RWD Weekly #365

Welcome to week 365 of the responsive design weekly! This week is absolutely packed so let’s get straight into it.

Happy Friday!
 

Headline

When should you be using Web Workers?

A really great read from Surma about when you should be including Web Workers on your site. The great thing about this post is that it isn’t just about when/how, but it provides you with a great understanding of the current mobile web footprint, and how that is going to change over the next 10-15 years (based on current trends).

Sponsorship

SmashingConf Toronto 🇨🇦 2019 (June 25–26)

Up, up, up to the stars! SmashingConf Toronto is a friendly, inclusive event which is focused on real-world problems and solutions. Instead of showing slides, presenters prefer showing attendees how they work in a practical sense, from live debugging to live redesign. 13 speakers including Sarah Drasner, Brad Frost and Steven Hoober will be exploring practical front-end techniques and design strategies. Tickets are now available ↬

Feel excited to join, but you think your manager could need just a little bit more persuasion? We’ve prepared a neat Convince Your Boss PDF (123 KB).

Articles

Drop caps & design systems

It’s been a while since I’ve come across one of Ethan’s epic design posts and it’s certainly been worth the wait. Do you want to know more about drop caps (initial letter), well this article from Vox and Ethan has you covered.
 

Mozilla will launch a paid version of Firefox this fall (Updated)

Would you pay for a browser? Given there is some addons and storage involved with this, and the fact that I trust Mozilla much more than a lot of the other browser vendor (singular intentional), I probably will.
 

How to Section Your HTML

Defining your HTML within the markup might seem like a trivial task, but since the arrival of HTML5 markup we have a semantic duty to apply the right tags to the right area. This article covers everything from <main> <aside>, <header> and <footer>, <section> and <article> and much more. You should read it.
 

Audiobook Profile for Web Publications

We have had a set of standards for ebooks for a long time, the EPUB standard, but nothing has ever standardised the way in which we approach Audio Books. With the rise of the podcast and the continued popularity of ebooks this is a welcome new development.
 

Micro Frontends

As frontend codebases continue to get more complex over the years, we see a growing need for more scalable architectures. This allows different parts of the application to be worked on by domain experts but still pull together simply.
 

HTML is the Web

Whether you’re writing Vue or React you still need to know about HTML. That’s exactly what this article is all focussed on, the HTML as the basic building blocks of what we do.
 

Scraping Burned Toast

Google has recently proposed a new element into the HTML ecosystem, the <toast> element. This would be used to semantically encapsulate any elements that provide a notification kind of popup (all I need is for people to have more reasons to use notification popups). In this post, Adrian covers the timeline and the backlash in the community.

The State of CSS 2019

The results from the CSS are in.
 

Third party blame game


Tutorials

A Topographic Map of Mercury

Just to be clear, this doesn’t have anything to do with front end development, but I think you’d be a fool not to check it out. I love anything to do with space, so when I was sent this link to check out these maps and the accompanying detailed code tutorials I lost many many hours to learning and fun. The code tutorial is linked from this article and takes you through how to plot data (specifically, maps) using Python. The data itself is pulled from public places (thanks NASA). It is an excellent tutorial about the process start to finish for data visualisation and design.
 

How to Use the Web Share API

This covers pretty much the baseline for what you need to know about the Web Share API. By implementing it on your website, visitors can share your content more easily across a wider variety of social networks, with contacts and other native apps.

Improving Performance with Google Fonts

Reduce up to 90% of your Font loading by using this cool little technique if you’re only using a small subset of characters from a font family.

Gitting Your First Dev Job

Git is a really valuable tool in any developers toolbox. Here are the key commands you should familiarise yourself with when approaching your first year on the job.
 


Tools & Resources

Darkmode.js

This library uses the css mix-blend-mode in order to bring Dark-mode to any of your websites. Just copy paste the snippet and you will get a widget to turn on and off the dark-mode. You can also use it without the widget programmatically. The plugin is lightweight, built in VanillaJS. It also uses localstorage by default so your last setting will be remembered !
 

basier mono

A monospaced font that you can pick up for free with a single weight, or pay what you want for the whole family.
 

Website Speed Test – Image Analysis Tool

This tool from Cloudinary will take a URL from you and then run a report across all of the images on that page to let you know how much faster you can make your site. Here’s an example when I ran it across my shopify notebook store.
 

City Intelligence Data Design Guidelines

The London City Intelligence Unit creates a lot of maps and visualisations. To help with this they’ve created and now shared this set of guidelines that will help you get you started. This goes so well along with the space visualisations this week
 

A simple starter kit for Eleventy

Hylia is a lightweight Eleventy starter kit with Netlify CMS pre-configured, so that you can one-click install a progressive, accessible blog in minutes. It also gives you a well organised starting point to extend yourself.

Relearn CSS layout: Every Layout

Brought to you by the great minds of Heydon Pickering and Andy Bell, Every Layout is a site that will help you relearn the way in which you previously used CSS to build out particular layouts by using the new CSS capabilities like CSS Grid and Flexbox plus much more.


Conferences

CSS Day 2019: some things I learned

A great overview of the CSS Day 2019.

The Technical Side of Design Systems

Take a look at Brad Frost’s talk from the CSS Day Conference where he talks about the non-design side of design systems. These are often the hardest things to get right and go a long way to ensuring that the design system can stand the test of time, and work throughout your company.

Refactoring UI | CSS Day 2019

Sometimes when we look at a polished interface we can acknowledge that it looks good but it’s hard to articulate why it looks good. In this practical session, Steve will be explaining the why. He’ll be looking at a poorly designed UI and refactoring it while providing some of the strategies and techniques designers use to give an interface that polished look.

Finally

Sustainable Web Manifesto

This is a lovely idea and a beautiful one-page site. I hope that they add links to find things like Clean renewable hosting, or which popular products are Open and Honest.


That’s all for this week, enjoy your weekend and if you have written about anything you have been doing lately please hit reply.

Cheers,

Justin.

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.