Smashing Newsletter: Issue #234

Editorial

It is summer in the Northern Hemisphere at least, and some of our Smashing team are taking some well-deserved vacation. Things never seem to stop here at Smashing however. In the last week we've published articles on subjects including JavaScript, Yarn, fonts, and CSS. We publish pretty much every weekday, so do keep an eye on our articles page for the latest updates. I try to bring a range of subjects across the week so there is something for everyone, whatever your role on the web.

In other Smashing news, we're all excited about our soon to be released print magazine. There will be more on the site this week about how you can get your copy. We are also looking forward to our conferences in Freiburg and New York this year. Tickets for both sold out very quickly, but there are a few workshop tickets left for New York.

Take a look if you would like to learn web performance with Scott Jehl or Harry Roberts, or how to build accessible site with Gatsby led by Marcy Sutton. We have a workshop on designer and developer collaboration with Brad Frost and Dan Mall, React with Next.js led by Remy Sharp, or you could even come and learn CSS Layout with me!

If getting to conferences is tricky, another way to get to learn directly from many of our speakers is via Smashing TV. We're bringing you sessions with lots of the folk you'll recognize from our conference line-ups — all included with Membership, or you can buy individual tickets for the sessions you don't want to miss. We also have a Smashing TV livestream on privacy and ethics coming up this Wednesday, so join us there.

That's quite a lot to get on with — and we have plenty of other things planned for the coming months! As always we love to hear feedback from readers, so do get in touch if you have any questions about anything in the Smashing universe.

Till next time!
Rachel Andrew (@rachelandrew)

Loading CSS Asynchronously
The Benefits Of Self-Hosting Your Static Assets
Handy npm Tricks To Speed Up Your JavaScript Development
Email Design Inspiration
Form Design From Zero To Hero
Making Cognitive Biases Easier To Understand
Free Summer And Tourism Icons
Patterns, Patterns Everywhere
Upcoming In Smashing Membership
Our Next Smashing Workshops

1. Loading CSS Asynchronously

It’s become a common practice to inline critical CSS in HTML to fit in as much useful CSS and HTML as possible within the first server roundtrip (14 KB gzipped or Brotlified). However, to start render faster, we need to asynchronously request the full CSS file as it otherwise would block the rendering of the page.

Unlike for scripts where we have async or defer attributes to load JavaScript asynchronously, there isn’t such attribute for CSS. So for years a common way to achieve this was by using LoadCSS, open-sourced by Scott Jehl from Filament Group. However, according to Scott’s new post, there is a simpler way to load CSS async:

<link rel=“stylesheet” href=“/path/to/my.css” media=“print” onload=“this.media=‘all’”>

Basically, by prompting the browser to fetch a stylesheet for print media, the browser will load the CSS stylesheet without delaying page rendering, asynchronously. For the CSS to be applied, we use the onload attribute to set the link’s media to all when it finishes loading. Easy and straightforward! (vf)

2. The Benefits Of Self-Hosting Your Static Assets

When loading external dependencies, we often rely on good ol’ CDNs, serving assets from a server located near the user. Surely Google Fonts or JavaScript libraries are better served from a public CDN due to cross-domain caching, right? Well, that’s not necessary the case. In fact, it’s not clear at all that assets loaded from the same CDN are shared across sites (e.g. jQuery or Google Fonts).

So have you considered to self-host your static assets to make your site faster? Performance-wise, it’s one of the quickest wins, as Harry Roberts points out. And even though it might seem counter-intuitive to do so at first glance, it has some overwhelming benefits compared to hosting your static assets off-site. Time to audit your projects and gain back control. (cm)

3. Handy npm Tricks To Speed Up Your JavaScript Development

Millions of developers use npm for their JavaScript projects. And while it has become the go-to way to begin a project or to install packages, the powers of npm go far beyond that. To make full use of them, Bret Cameron compiled 13 npm tricks for faster JavaScript development. The tricks are aimed at beginner and intermediate developers, but even experienced developers might find some gold nuggets in there to take their development workflow to the next level. (cm)

4. Email Design Inspiration

If you’ve designed or developed an HTML email before, you know that making great email is hard. To provide a look under the hood of emails that are both visually compelling and polished on the code side, Really Good Email showcases more than 4,000 handpicked emails. A great source of inspiration, no matter if you want to notify your customers about an abandoned cart or send them a thank-you message. (cm)

5. Form Design From Zero To Hero

At first glance, forms seem easy. All it takes are a couple of text boxes and radio buttons. But once you look closer, usability issues revolving around forms, are, unfortunately, quite common. To make sure that your forms are quick and hassle-free to use and complete, Adam Silver wrote a concise guide with everything you need to consider to get form design right. One for the bookmarks.

If you need slightly more detail to dive in, Adam has written an entire book on Form Design Patterns, focusing on how to build simple and inclusive web forms. And were privileged to publish it on yours truly Smashing Magazine. Happy reading! (cm)

6. Making Cognitive Biases Easier To Understand

Nowadays, there’s way too much information to process, and in times when we have to digest and make sense of it all, we’re left to rely on our psychological biases that help us figure out how to think at all. To avoid problems in communication or issues in your design, it’s useful to understand how people think, and how they make decisions.

Benson decided to create an app that will help us understand our biases and how to find better ways to think, communicate, and act in a way that is in line with your intentions. Great for designers, and also great for managers running teams. (il)

7. Free Summer And Tourism Icons

Barbecues, a trip to the beach, exploring a new city — summer is the time to make memorable experiences. To bring some of the summer feeling into your projects, you might want to take a look at the Summer Time and Tourism icon sets which the folks at Design Zone offer for free download. Each set includes 20 vector icons (in colored and linear versions) and comes in AI, EPS, and PNG formats. You can use the icons for both personal and commercial projects. Happy summer! (cm)

8. Patterns, Patterns Everywhere

When we start designing, we often start with predictable, basic shapes — rectangles, circles, and if we are really creative, maybe triangles. But we can also use organic shapes, letters, whitespace, audio, video, textures and, of course, patterns.

Paaatterns is a set of eye-catching background patterns, available for free personal and commercial use for Figma, Illustrator, Sketch, and Adobe XD. The sources files in EPS, SVG, and PNG are provided as well. An email is required to download the set, and a few questions will be asked, with the set then sent via email. A wonderful set worth downloading. (vf)

9. Upcoming In Smashing Membership

Thank you for being smashing! Over the last months, we’ve been increasing the number of webinars (without increasing the price of membership — it still starts at just $5 a month!) and have also improved video quality since we’ve moved to Zoom. Also, the eBook version of Andy Clarke’s brand new book “Art Direction for the Web” is now available as a part of the Membership, too. Obviously.

Smashing TV on July 23 at 16:00 GMT
Email Coding Guidelines with Rémi Parmentier
Smashing TV on July 24 at 13:00 GMT
Towards Ethics & Privacy By Default, A Live Conversation with Vitaly Friedman
Smashing TV on August 13 at 16:00 GMT
Customer Journey Mapping: Where UX And Marketing Meet with Paul Boag
Smashing TV on August 20 at 16:00 GMT
Interactive Web Animation With SVG with Cassie Evans

Dear friends, thank you for your kind support. It allows us to bring you great content, pay all our contributors fairly, and reduce advertising on the site. (Ah, you could become a Smashing Member, too! Join us in Smashingland where everyone is beautiful and you never get merge conflicts. 😉)

10. Our Next Smashing Workshops

In our workshops, we are looking into the current state of front-end and interface design, covering advanced challenges and actual real-life solutions to front-end problems. Coming up next:

🇧🇾 Rolling Scopes (Aug 9–11) in Minsk, Belarus.
🇨🇭 Front Conference (Aug 29–30) in Zürich, Switzerland.
🇩🇪 SmashingConf Freiburg (Sept 9–10) in Freiburg, Germany.
🇨🇿 WebExpo (Sept 20–22) in Prague, Czechia.
🇺🇸 Awwwards Digital Thinkers (Sept 25–27) in NYC, USA.

Or, if you’d like to run an in-house workshop at your office, please get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you’re facing and would like to solve. Get in touch — it’s that easy! (vf)

July 23, 2019 Smashing Newsletter: Issue #234

Previous Issues