Ask Velir: 5 Easy Hacks for the Efficient Front-End Developer
In code, there is typically more than one way to skin the proverbial cat. This differs from design in that solving a problem is more about personal preference, efficiency, and available technologies rather than adhering to generally accepted standards for what makes something look good and behave intuitively. The ever-evolving web development community seems committed to churning out new and better solutions to existing problems, and for those who code here at Velir, any improvement to efficiency is a bonus where fluctuating scope, timelines, and client needs are the unavoidable realities of working in an agency setting.
With that in mind, five of our front-end development ninjas divulge their favorite tips, tricks and workarounds that improve the efficiency of their workflows and resolve challenges that crop up frequently.
1. Shelby Staab, UX Engineer
Centering an element with unknown height
One go-to CSS trick I use is for centering objects with an unknown height. It’s easy to vertically center a block with a known height, such as an image or an icon. However, it becomes more complex with an element of unknown height, especially if it’s featured in multiple different instances on a site. For example, it can come in handy if you’re trying to vertically center the text in a hero element. Since you can’t be sure how much copy a content author will put in this component from page to page, it’s helpful to know that the content will remain centered regardless of length.
CODEPEN: http://codepen.io/chriscoyier/pen/lpema
2. Umesh Upadhayay, Front-End Developer
:empty selector
Occasionally, I run into cases where HTML selectors like a
are added without content wrapped inside them. This creates unwanted whitespace inside a CMS (such as Sitecore, Drupal or Adobe EM) that needs to be removed. Ensuring that any :empty tag used in conjunction with a
isn’t displayed, effectively hides the whitespace. Some might be tempted to use the “*” tag to universally target and hide all empty selectors, but doing so may cause problems where empty selectors get content from JavaScript or on page load.
CODEPEN: http://codepen.io/anon/pen/eJvjbz
3. Ben Garfield, Front-End Developer
Flex-Order
Flexbox is a fantastic addition to the CSS toolkit, and one of my favorite use cases is when I need to change layout order without changing the underlying markup. This allows me to solve some traditionally JavaScript-based problems (such as ad placement) with CSS rather than having to do breakpoint detection within scripts. With some forethought and a mobile-first approach to design, a lot of layout headaches can be avoided through well-planned markup and flex ordering.
Flex-order: https://developer.mozilla.org/en-US/docs/Web/CSS/order
CODEPEN: http://codepen.io/anon/pen/GpVBvb
4. Bryan Mills, Senior Front-End Developer
Quantity Queries
One of my very favorite things that came from the web development community last year was CSS quantity queries. Making its debut in an A List Apart article, they seem to have been adopted fairly quickly. This is CSS ‘trickery’ at its best — leveraging basic aspects of the language to create a rich new set of features.
As the name implies, a ‘quantity query’ in CSS allows us to write specific styles for an element based on how many siblings the targeted element has. For example, say we have a small number of “card” components in a horizontal row; If we add more cards to the row, we may want to fundamentally change their layout. Using a quantity query offers the control to do that, and allows us to affect deep change in component behavior.
Quantity queries are still a very young development pattern, but have proven useful in a number of situations -- especially when working with content management systems. I encourage every developer to check them out!
CODEPEN: http://codepen.io/SitePoint/pen/ogaRBG
5. Kevin Quillen, Drupal Practice Lead
Task automation with Gulp
This is less of a CSS trick and more of general way to automate front-end tasks day to day. Gulp is typically used to automate repetitive tasks during development. When I start a new project, I have Gulp and a generic Gulpfile.js ready to use. This allows me to have some basic tasks defined within my Gulpfile that ensure a more efficient workflow for all developers on the project.
Automating these tasks allows us to focus on writing HTML/SCSS/JS in the editor. Whenever it detects a change to any SCSS file in the theme, it automatically regenerates the entire sites’ CSS behind the scenes. This means you can write Sass in the editor without having to open CodeKit or a terminal window to build the CSS output, while the browser refreshes to display each change in real time. There are similar tasks for handling changes to JS and template files as well.
Additionally, Gulp can do other tasks like clear application caches when CSS/JS is regenerated or templates are added/changed. This allows for production level caching to be enabled during local development, so that things run much faster and mirror real-world settings when the site is live.
The Gulpfile.js we use is included in our Drupal theme, Neato, which we built in-house.
Gulpfile (Neato): http://cgit.drupalcode.org/neato/tree/STARTER/Gulpfile.js?h=8.x-1.x