CONNECT WITH US

Next

CSS Grids are coming! 5 learnings from the #CSSDevConf

Heidi Olsen
Senior Developer
CSS Dev Conference 2016

Move over Flexbox, CSS Grids are all that anyone is talking about in the CSS Developer community.

Senior Developer Heidi Olsen traveled to San Antonio last week to attend the 5th Annual CSS Dev Conference. The conference is unique in that it focuses strictly on CSS or Cascading Style Sheets. The sessions are voted on by the CSS community and are run by some of the most well-known peeps in the biz. Here are Heidi’s top 5 learnings from this year’s conference:

1. CSS GRIDS

Many of us have dabbled in the joys of Flexbox, but have you heard about CSS Grids? Slated to release in early 2017, CSS Grids control the layout of its content through the use of a grid. Duh, I know, but the way this differs from our current grid systems is that it takes an intersecting set of horizontal and vertical lines to create a sizing and positioning coordinate system that is fixed as well as flexible.

Jen Simmons opened up the second day of the conference with an amazing talk on Art Directing the Web. CSS Grids will enable us to look back at our editorial design roots and leverage the power and tradition of graphic design, finally breaking free of the Bootstrap carbon-copy websites we see saturating the web today. Do yourself a favor and download Firefox Nightly and view the amazing layouts on Jen’s website.


2. MOVE AWAY FROM PIXELS

One of the biggest shifts in development during my career was moving away from pixels to relative measurements. Did you know there are 27 different units of measurement in CSS? That’s insane. Keith Grant gave a talk called #StopPixels that provided a method to the madness.

By default use the following measurements for each use case:

  • rem (font-size)
  • px (border-width)
  • em (padding, margin, border-radius)
  • unitless numbers (line-height)

Remember: Using relative units for font-size is not only important for accessibility, but its more accurate, simpler to code and more flexible.


3. AVOID DROPDOWNS IN FORMS

I develop a lot of forms in my role at eROI due to our love affair with email marketing. Naturally I was excited to see Clarissa Peterson’s talk on creating beautiful, accessible and user-friendly forms.

Avoiding dropdowns in forms is something I haven’t considered, but it makes perfect sense. The UX on a mobile device is terrible and its easy to allow the user to either select from a variety of choices (as buttons, not plain checkboxes) or allow the user to start typing and autocomplete the choice.

Beyond a hundred other juicy tips and tricks she dealt out, she brought up the question of why ask a user’s gender? As a company you should really ask yourself if its necessary information or just another piece of demographic data we are used to obtaining.


4. PROGRESS BARS VS. SPINNERS

Ok, this is going to blow your mind. Did you realize that progress bars are actually preferred over spinners while waiting for an action to take place? In his talk Perceived Performance, Eli Fitch discussed the idea of objective time vs. subjective time. Most of us optimize for objective time but its actually less sufficient. All that matters is what the user perceives as a noticeable difference in wait time. Testing shows that optimizing load times need to be 30% faster for it to feel faster.

So where does that leave us when some processes just takes awhile?

Un-Suck Waiting Time.

  • Respond to users immediately
  • Give users a sense of certainty
  • Occupy users’ attention
  • Render minimum viable layout

Makes a lot of sense right? One last fun tidbit from Eli’s talk: Use the mousedown event vs. click event when firing an action. It’ll give you 100-150ms head start!


5. FIGHT BURNOUT

One talk that really pulled my heartstrings was Alicia Sedlock’s talk about How to Fight and Prevent Burnout. There are a few expectations in our field:

  • We should know everything about everything yesterday
  • When starting out, you work twice as hard to be seen as an equal. Ageism in tech puts pressure on both junior and senior developers.
  • Information overload makes us think we’re always behind.

So what do we do about it?

  • Feel free to say no: Its ok not to take on every freelance project that comes your way just because it is an opportunity to learn something new. Also research outside of work counts as unpaid labor. Remember that.
  • Check in with yourself: Sure we have those late nights working on a passion project, but what about all those other times we find ourselves missing out on the things we like to do outside of our job? Make sure you are have the right motivation.
  • Learn everything in moderation. I like to give it some time before I jump into the next, big, shiny technology. Remember when Angular 1 was all the rage and then Angular 2 was completely different? Caused a lot of issues when there was no migration plan. Focus on the fundamentals & stay framework and platform agnostic.
  • What do you want people to remember you for? What’s the point of your blood, sweat and tears if you aren’t making what you love?


This list just skims the tip of the knowledge iceberg. Join the conversation on Twitter with #CSSDevConf and hope to see you next year!

Heidi Olsen
Heidi Olsen, Senior Developer at eROI.