Dear Friend,
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)
Table of Contents
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)
From our friends
Meet Clarity 2019: A Design Systems Conference
We're always happy to support our friends and colleagues. Jina is running Clarity, a design systems conference, focused on how we work together. We all provide tools and standards to scale across an increasing number of devices, platforms, and products. But real success comes when people align around a shared vision and language. We elevate our skills through multi-faceted inclusion, empathy, technology, creativity, and collaboration. A great conference with great content. Check the line-up, and join the conference!
Clarity is a design systems conference taking place on August 20-21 in San Francisco.
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)
From our sponsor
Get Angular Code from Sketch Designs with Indigo.design
Indigo Design is a unified platform for visual design, UX prototyping, code generation and app development that keep your teams productive in the tools
they love. Create the best-in-class UI designs using components & UX patterns in the expressive
Indigo Design System with Sketch UI Kits. With the click of a button, generate high-quality HTML, CSS, and Angular code from your design with no compromise.
Sign up for free ↬.
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)
Online Masters in Information Design and Strategy
Earn your master's degree online.
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.
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. New On Smashing Job Board
- Senior UX Designer at Elsevier (Aalborg, Denmark)
"At a time where fake news has run rampant, providing factual, valid and accurate information to the world has become more important than ever. This is what we do at Elsevier and you can be part of that and of Elsevier's mission to empower knowledge." - Front-End Designer at Brown University (Providence, RI)
"We are looking for a Front-End Designer to join its growing web and digital communication team. The ideal candidate is a visual designer, UX expert and technologist who will works in a team environment to create designs for Brown's digital platforms." - Full-Stack Developer at Lincoln Center for the Performing Arts (NYC, USA)
"We are looking for a Full-Stack Developer who'll be responsible for problemsolving and brainstorming around new ways to approach challenges and build solutions for the near and long-term."
11. 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:
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)
12. Our Most Popular Articles
This newsletter issue was written and researched by Cosima Mielke, Iris Lješnjanin, Vitaly Friedman and Christiane Rosenberger.
Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.
Follow us on Twitter • Join us on Facebook
0 коммент.: