🔥 A small rant about tables

[Robin]: I’ve been interviewing a lot of folks lately for front-end roles at Gusto (where I work) and I’ve been noticing something peculiar about the interview process. In these interviews, I test a front-end engineer’s basic HTML and CSS skills with the following mockup that I ask them to build:

All I ask them to do is replicate that design in the browser with the help of CodePen (and without the need for them to do anything with interactivity or JavaScript). Anyway, I really like this exercise because the design makes things deceptively tricky. How will they organize the calendar? Will they use Grid or Flexbox? Will they stick to a regular old table? Will they care about accessibility? Do they know about ARIA roles? Do they care about different browsers and responsive design? How do they structure their code? And most importantly of all: are they focused? Do they tackle one problem at a time before moving onto the next? Those last questions are perhaps more important than any technical skill in this humble blogger’s opinion.

However! One point of anxiety I hear from a lot of folks in these exercises is whether they should use a table to markup that calendar. I’ve heard it perhaps a dozen times this year, where the interviewee mentions that they’ve heard that the table element is not good practice. And that they should never, ever use it.

Which is odd, because there’s nothing wrong with it! This calendar is the perfect use case for a table — any time you’re marking up tabular data then a table is just fine. The only problem comes in when you start using that element specifically for doing layouts. Like, say you want a grid of elements on a page – but that data is not tabular – then that’s not a great idea!

Anyway, I just thought I’d mention that because it’s mighty interesting to see this common concern leak out into our industry.

🔗 Links from around the web

Dan Mall wrote a great piece about The Hot Potato design handoff process. That’s where he tackles the misconception that the design handoff should be from designer → engineer and only happen once. Dan argues ideas should be passed back and forth between designers and engineers all the time.

Also, in my experience, this is the best way to work across engineering and design. Once the hand-off happens a designer should expect to sort of work like a consultant, constantly giving feedback and making sure that all the edge cases have been covered; responsive design, accessibility, interactions, and animations, etc. Those things are especially hard to get right in the first mockup.

🔥 Links from around the web

Miriam Suzanne has been making a bunch of really lovely bite-size videos about making layouts with CSS Grid—with a special focus on subgrid.

The exciting part is how it’s so much faster to build complex layouts and this shows us just how much the field of web design has improved in recent years. And on this note: I remember wanting subgrid way back in 2007 and shaking my fist at the sky when I realized that the only way to build a particular design would require writing a ton of ugly CSS. Not anymore! These days we’re pretty gosh darn lucky to have the tools we do.