📝 This Week in Web Design and Development

View this newsletter on the web.

🔗 Links from around the web

Diana Smith has made another fantastic painting in CSS, this time called Lace. These wondrous examples of browser art are 100% HTML and CSS and are painstakingly edited by hand:

Also the fun part of this is how the paintings breaks down in different browsers. When I opened up this site in my RSS reader’s browser, this is the spooky Halloween version I found instead:

📝 This Week in Web Design and Development

View this newsletter on the web.

🔥 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.

📝 This Week in Web Design and Development

View this newsletter on the web.

🔗 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.