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.