Latest Articles

The job title “Design Engineer” has been having a moment. I commented on Jim Nielsen’s takes recently. To me it makes a logical sense. The engineer aspect means they know the tech (HTML, CSS, JavaScript), and the design aspect means they are building and refining the look and experience. You don’t have to be both. The point of this role is that you do have this specific combination of skills and put it to good use.

Poking around big job posting sites, I do see it around used like this a bit (nice!) but it’s a more common term in the not-terribly-related field of mechanical engineering. I wouldn’t hate it to see it as “Web Design Engineer” when used officially.

Maggie Appleton has curated a bunch of writing, and just as interesting, a group of actual people who typify the role and examples of their work.

You could design something on the web then take a screenshot of it. That is, in a basic sense, converting DOM to PNG. But a screenshot is rather manual and finicky. If you had to do this over and over, or you needed a very exact size (like a social media card), you can actually produce a PNG right from the browser with the click of a button. No backend service needed, like Puppeteer or Playwright which are often thought of for this type of automatic screenshotting job.

The trick is that you can render DOM to a <canvas>, thanks to the very fancy html2canvas library. Then you can use .toDataURL() to get it into PNG format and ultimately download it. I always reference Andrew Walpole’s Pen to see it done, which also happens to be a rather elegant Petite Vue example, and the contenteditable usage is a clever way to make it even more usable.

An awful lot of JavaScript developers I know speak of Eloquent JavaScript as a very formative book for them in their path toward becoming the developer they are today. It’s certainly on my bookshelf. Eloquent JavaScript is now in it’s 4th edition, and available free online. Pretty sweet complementary learning resource right there, goes nicely with all the Frontend Masters books online.

Just a little appreciation for Dan Klammer’s Modern Font Stacks project. Not loading any custom fonts doesn’t need to mean being relegated to the Helvetica/Arial hole, system fonts (even though I do kinda love San Francisco), or some bummer typeface you feel pushed into.

I particularly like the Geometric Humanist stack:

font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;Code language: CSS (css)

Happy Friday!

The DevRel went down to Georgia, they had some code to shill
They were in a bind, cause they were way behind, and the VP wasn’t thrilled
When they came upon this young dev pushing to main and cursing a lot
The DevRel sat right down and said, “Hey let me tell you what,

The DevRel went down to Georgia…