Welcome to the second edition of the Frontenders Kaleidoscope. First of, thank you to everyone for their claps and positive feedback about the first edition. I really appreciate it.

This was a busy week on the interwebs. So busy in fact, I had to add two new sections, What?! Exactly. So, let me not stand in your way, dig in.

Weekend Reading

Photo by abednego setio gusti on Unsplash

Momoh Silm wrote a great post over on the prototypr.io blog covering the various aspects to keep in mind when design web forms. Forms is often one of the central points of an online experience. Ensuring that there is as little friction as possible is therefore paramount.

The only items I will add to his article is:

Never break the expected tab order of form elements.

Always remember to associate your label element with its associated input field using the for attribute.

element with its associated field using the attribute. Always prefer instant form validation feedback, instead of relying on a server side roundtrip(Do not skip the server altogether though).

Local Overrides in Chrome’s Devtools

This is probably not news to anyone but, Chrome’s local overrides has landed in the latest release, and it is going to change how you use Devtools. This week I ran into a number of posts of people explaining how they are using local overrides to test design changes, quick prototyping, and especially proving performance hypothesis. All without ever having to push anything to production.

Here I would like to highlight two:

Continuing with the performance theme, Alexander Zlatkov has been writing a series on the Sessiontrack blog, looking at how JavaScript works. In this post he goes into the details of the rendering engine of browsers. This is a deep dive so bring a cup of coffee.

As part of covering how the rendering engine works, and its impact on performance, Alexander also provides so tips on optimising performance of this critical piece of the page rendering process. You will also find links to the previous posts in this series.

This has been mentioned before but, it bears repeating. The greatest thing about CSS is the cascade, and the worst thing about CSS is the cascade. This is especially true when we looking at theming and developing a style guide for front end code.

Over on CSS-Tricks, builder of stuff on the Web, Cliff Pyles writes about theming with CSS variables. Specifically, employing a two-tier theming system where component level scoped style rules are still informed by globals. Meaning, globals provide consistency and structure, while at the component level focus is on theme-able properties.

NOTE: As Cliff mentions, even though he uses native CSS variables in this article, the concept applies to variables used with preprocessors as well.

There was a time, and that time was not that long ago at all, when designers and developers only ever had contact with each other when assets was handed over. The proverbial, throwing over the wall.

We have come a long way since but, we are definitely not all the way there. This is not yet a solved problem. What I love though, is when designers talk about improving the working relationship with designers. What I love even more, is when they write about it, and provide concrete, actionable next steps.

That is why I wanted to highlight this piece by Asli Kimya over on the UX Collective. In this article she covers the edge cases. Thinking about users on the extremes of the usage curve. Especially her piece on localisation is so, so important. A great read indeed.

Tools, Tools, Tools

Photo by Alexander Andrews on Unsplash

Tools, we cannot live without them. That’s it. This week I would like to share a new tool I found called FontDrop. Created by Viktor Nübel and Clemens Nübel, this tool pulls back the curtains, the drapes and everything else and shows you all a font face can be. Head over to FontDrop, drop your font, and be amazed.

Add To Library Maybe?

Photo by Christin Hume on Unsplash

Want to programatically draw graphics that has a hand drawn, sketch like appearance? With 8kb of JS and the canvas element you can.

Training wheels for your webapp in 4kb of vanilla flavoured JavaScript. Give your users the tour, without the bloat.

Maintaining open source code can be hard. It is a problem that is talked about a lot in the community at the moment. Anything that can automate repetitive tasks away is worth its weight in gold. From the repo:

semantic-release automates the whole package release workflow including: determining the next version number, generating the release notes and publishing the package.

You want a slick, no nonsense WYSIWYG editor for your website. You search just ended. You can thank Jared Reich later ;)

Notable Releases

“A macro shot of round droplets of water on a long thin leaf” by Jono Hislop on Unsplash

Browser Updates

Photo by Chen Hu on Unsplash

Safari Technology Preview 52 — Adds support for preconnect in link headers, service worker changes and fixes, adds new env() constant to CSS with use in fullscreen, and various other improvements and fixes.

Phew! And that is it for the second edition. Until next week. Stay curious.