Smashing Newsletter: Issue #243

Editorial

Many of our readers in the USA may already be heading off to spend a few days with family and friends for Thanksgiving. As a Brit, I have to admit being somewhat envious of this holiday. In the UK, we have recently gained Black Friday as an excuse for stores to send special offer emails for the entire month of November, however, we have nothing quite like Thanksgiving.

Looking up the history of the holiday, I learned it started as a thanksgiving for the harvest — something which churches and schools in the UK do still celebrate as do cultures around the world. When I was a child, we would bring fruit and vegetables to decorate the harvest table, and gifts which were then distributed to those in need. Today, the collection is often canned goods and other items needed at a food bank.

Most of us don’t harvest crops and produce food today. However, we are involved in producing digital things that we can’t eat or hold, but that have a direct impact on the lives of those around us. And, in that work, we rely on the things that others have produced. Could you have shipped that application on time without the JavaScript library that would have taken you weeks to develop, yet was freely available? How many times has an article or blog post saved you hours of puzzling over an obscure spec?

Whether you are celebrating Thanksgiving or not this week, I’d like to invite you to look at the articles, libraries, code snippets, and answers on forums you have benefited from over the last few weeks and take the time to say a few thank yous. So many of the people behind the things we rely on when we work on the web get very little credit for their hard work. They often only hear from people when they are requested new features or pointing out a problem. A simple Thank You can go a very long way to help a person know their work is appreciated.

Happy Holidays!
— Rachel Andrew (@rachelandrew)

Web Almanac 2019
Inclusive Components Is Shipping: Robust Solutions For Your Work
Open-Source Illustrations Kit
Commit-Message-Driven Development
How To Read A WebPage Test Waterfall Chart
Web Performance Vs. User Engagement
Freebie: E-Commerce Icon Set
Upcoming In Smashing Membership
Our Next Smashing Workshops

1. Web Almanac 2019

Take data processed from nearly 6 million websites and 85 people volunteering countless hours planning, researching, and writing — that’s what it took to create the 2019 edition of the Web Almanac, HTTP Archive’s annual state of the web report.

The report consists of 20 chapters spanning aspects of page content, user experience, publishing, and distribution to shine a light on the current state of the ever-evolving network of technology that the open web is. A great resource to become more aware of current best practices. (cm)

2. Inclusive Components Is Shipping: Robust Solutions For Your Work

Because we often build and deploy under tough deadlines, we tend to break accessibility without even noticing it. Our products become slower, clunkier and more painful to use — often simply unbearable for keyboard- and screen reader users, and as such fragile and vulnerable for legal disputes. Our new book Inclusive Components is here to change that. In fact, the books have arrived already and we start shipping them today and tomorrow. You can still get the book ahead of time with 20% off.

Written by Heydon Pickering, Inclusive Components examines the interface components you author, plug in, and use every day — accordions, tables, modals, notifications, tabs, toggles, and everything in-between — through the lens of inclusion. All solutions are available as bulletproof code snippets that you can apply to your work right away, and, as a bonus, you’ll also learn how to build your own accessible components with inclusive design in mind — all in a single book. 332 pages. Shipping now.

3. Open-Source Illustrations Kit

100-day challenges are a wonderful opportunity to dive deep into a topic or craft and evolve and improve with each day. Back in 2016, Vijay Verma spent almost two hours a day for 100 days designing, illustrating, and experimenting to get himself to the next level of illustration.

After living on a harddrive untouched since then, Vijay now decided to release the illustrations as a free open-source illustrations kit so you can use them for your landing pages, mobile apps, presentations, or whatever else comes to your mind. Available in AI, SVG, PNG, and EPS formats. Thank you, Vijay, for sharing! (cm)

4. Commit-Message-Driven Development

Have you ever considered to write the commit message before you start writing the code? Sven Hofmann does it this way, and now he explains why you could give it a try, too.

We all know those vague and messy commit messages like “bugfixes and minor improvements” that aren’t helpful in the long term — especially if you’re working with a team or on an open-source project. The commit-message-driven workflow that Sven suggests could help change that: first, you write the commit message, then the code, then you commit. Having the scope of the task nailed down in advance, gives each commit a precise goal that you can focus on and that makes it easier to review your commits later on. Clever! (cm)

5. How To Read A WebPage Test Waterfall Chart

Do you have difficulties reading WebPageTest waterfall charts? You’re not alone, it can be quite a challenge to remember the details and what they all mean. To freshen up your knowledge, Matt Hobbs collected all the many bits of information in a single blog post that we all can refer to.

The post explains the basic layout of the waterfall chart, what each of the colored vertical lines means, and what metrics the horizontal blocks refer to. It also lists common patterns that you might stumble upon in a waterfall chart. One for the bookmarks. (cm)

6. Web Performance Vs. User Engagement

It’s no secret that performance can have a positive impact on user engagement and, in effect, improve conversion. To find out how performance correlates to conversion for their product, the team at Vrbo implemented an automated process that shows the connection between business events and performance data.

Carlos Moro from Vrbo now shares a case study in which he gives more insights into the approach, as well as handy tips for measuring site performance, user engagement, and putting the two into relation to one another. Interesting. (cm)

7. Freebie: E-Commerce Icon Set

Are you working on an e-commerce project? Then you might want to take a look at the e-commerce icon set which the team at the design agency H2D2 now offers for free download. Designed as “the essential e-commerce icon set”, Shopicons features 60 icons depicting the most important e-commerce symbols.

The set is available in four versions (light, regular, bold, and filled) and shines with a clear and simple look that blends beautifully into any design. You can download and use the icons for free in SVG and PNG formats directly from the GitHub repo. An overview of all the icons is available on H2D2’s site. Handy! (cm)

8. Upcoming In Smashing Membership

A few weeks ago, we pre-released Heydon Pickering’s brand new book Inclusive Components. The eBook version is and always will be free for Smashing Members, of course. Please check your dashboard to download it.

We are also looking into a slightly more interactive format for our Smashing TV sessions. We kindly invite you to submit your questions or actual mock-ups of your work in the Membership channel (#tv), so our speakers can review and provide feedback to your current projects — live!

Here’s the list of new webinars coming up soon:

“Encouraging Clicks Without Shady Tricks” with Paul Boag — Nov 28 at 17:00 Berlin time
“Privacy UX” with Vitaly Friedman— Dec 3 at 18:00 Berlin time
“Building A CSS Layout, Live” with Rachel Andrew— Dec 10 at 18:00 Berlin time

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. Join us in Smashingland where everyone is beautiful and you never get merge conflicts. 😉

9. 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:

🇮🇹 Speaking Of (Nov 28–29) in Milano, Italy.
🇨🇭 Web Zürich (Dec 18) in Zürich, Switzerland.
🇯🇵 Awwwards Conference (Jan 20) in Tokyo, Japan.
🇳🇱 Awwwards Conference (Feb 19) in Amsterdam, Netherlands.

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)

November 26, 2019 Smashing Newsletter: Issue #243

Previous Issues