Welcome to the third edition of the Frontenders Kaleidoscope. I almost thought I was not going to make it this week. Life…

This week, responsive images, tools to fill your chest, some new releases, TC39 and the developer community, and podcast episodes. It’s a day late, but I hope you enjoy it nonetheless.

Weekend Reading

“A person reads a newspaper on a bench in front of a graffitied building in Berlin” by Roman Kraft on Unsplash

Unless you live in a magical land of Gnomes, Fairies and Unicorns, you have surely turned a little red when attempting to line up the copy on a button just so. And lining it up with an icon, so all the things are nicely centred, that can lead to a world of hurt.

You have now entered the world of pixel nudging, negative margins, and positioning tricks. Well, no we can all breath a sigh of relief. Thanks to the ingenuity of Kevin Powell we have the Text Crop Tool. I sincerely hope this sparks a fire that will give us this type of control natively through a standard(Is there work like this underway already?). text-crop: narrow; anyone?

Not an post, but a really promising move from the TC39 panel. Through the information you provide in this survey, the TC39 plans to improve the way they engage with the developer ecosystem. If this means a more transparent process, and faster time to implementation for new JavaScript features, sign me up.

There has been a lot going on in this space over the last two or so years. There are so many design system/pattern library building tools out there, one often get lost in choosing one.

Being in the midst myself of putting one together for the front-end codebase of MDN Web Docs, I have personal experience of this. It is incredibly important though, and Nathan Curtis’ series of articles on the specifics around building one is timely and incredibly useful. Even if you are not the person responsible for building the one at your company, this is well worth your time.

In the tools roundup section later in this post, I posted some links to tools specifically aimed at automating much of this process when working on React or Vuejs codebases.

Compressive images is a technique by Daan Jobsis later defined as compressive images by the folks over at the Filament group. It is a technique trying to best solve the problem of responsive images. At that time there was no native solution for this, so various techniques cropped up in lieu of a standard browser based implementation.

Even though we now have the picture element, I still do not see it used much on the web. In this article Tim Kadlec revisits the above mentioned technique, and posits that we no longer need to deal with the tradeoffs the technique incurs. Instead, we can embrace the new standards such as the picture element, srcset and density descriptors.

For even more on srcset and the sizes attributes, head over to the article by Jake Archibald, The Anatomy of Responsive Images

Tool Roundup

“Woman with painted nails wearing rings and bracelet sketches on light table” by Kelly Sikkema on Unsplash

Living Styleguide

As mentioned above, I recently learned about the Vuejs Design System builder and, in digging around on the main repo, I learned that it is made up of several libraries. One of these is vue-styleguidist which is a based on react-styleguidist. So, whether you are building with Vuejs or Reactjs, these tools provides a way to automate much of the style guide creation process.

In essence, it is stated to be a linter for the web, and was created by the JS Foundation. From the website:

sonarwhal is a linting tool that will help you with your site’s accessibility, speed, security and more, by checking your code for best practices and common errors.

Besides the website, you can also run sonarwhal as a CLI and define your own custom set of rules.

Tools for Responsive Images

Following on from the above article by Tim, I found a couple of tools that can assist in your foray into responsive images.

First up, a command line tool by The Filament Group to analyse the efficiency of your use of responsive images markup at different viewports ~ imaging-heap

The second tool is a linter bookmarklet by Martin Auswöger you can run against any page to check for common mistakes and best practices related to responsive images ~ RespImageLint

Managing dependencies on a project can be a tedious task. It is however a task that is extremely important to ensure the stability and security of your overall project. Github offers a way to monitor dependencies and be notified when a security vulnerability has been identified in one of your dependencies.

Renovate aims to go a step further by as much, or as little of the process as you need. It is unopinionated, while offering some sane defaults. You can add Renovate from the Github marketplace to all your repo’s or selectively.

Notable Releases

“A large number of hot air balloon silhouettes in the orange sky over Brasília” by Alexandre Perotto on Unsplash

Podcasts

“Tired woman rests her pen while working in a cafe and listening to music” by Siddharth Bhogra on Unsplash

The Web Platform Podcast ~ A Developer’s Guide into the World of Web Standards

Following on from the mention earlier regarding the TC39 developer survey, this is a great episode from the Web Platform Podcast that aims to demystify the world of web standards.

We are guided into this world by Jory Burson from Bocoup, herself a member of the JS Foundation.

Listen Now

The Changelog ~ The Burden of Open Source with James Long

This episode is from roughly a year ago but, it is still as relevant today as it was then. How to ensure the sustainability of open source, and lessen the load on maintainers are an important topic that we do not have a solution to yet.

In this episode the hosts of The Changelog talks with James Long, creator of, among other things, Nunjucks and Prettier, about exactly this topic.

Listen Now

The Changelog ~ Automated dependency updates

And if by magic, in this weeks’ episode of The Changelog, the team is joined by the creator of the above mentioned Renovate. So, if you are not sure whether to take Renovate for a spin, get all the details and get an inside into the future of this tool.

Listen Now

And that is it for this week. If you are enjoying a long weekend, lucky :) See you all next week. Stay curious!