Smashing Newsletter #243: Web Performance, Front-End, Free Illustrations

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. Issue #243 Tue, Nov. 26, 2019 View in the browser 💨

Smashing Newsletter

Dear Friend,

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)


Table of Contents

1. Web Almanac 2019
2. Inclusive Components Is Shipping: Robust Solutions For Your Work
3. Open-Source Illustrations Kit
4. Commit-Message-Driven Development
5. How To Read A WebPage Test Waterfall Chart
6. Web Performance Vs. User Engagement
7. Freebie: E-Commerce Icon Set
8. Upcoming In Smashing Membership
9. New On Smashing Job Board
10. Our Next Smashing Workshops
11. Our Most Popular Articles

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.

Illustration showing little characters made up of geometrical forms painting a website.

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.

The cover of Inclusive Components, a new book by Heydon Pickering.

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.

Design- and office-themed illustrations

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.

Bash functions incorporating commit-message-driven development into a developer's workflow.

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.

WebPageTest waterfall chart

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)


From our sponsor

Online Masters in Information Design and Strategy

Ad
Earn your master's degree online.


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.

Dashboard showing how TTFB coorelated to user engagement for one of the company's most important pages.

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.

What's inside the Shopicon icon set.

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 (only in German, but the overview of what's inside the set is self-explanatory, of course). 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:

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. New On Smashing Job Board

  • Senior Engineer I, Front End at SpotHero (Chicago, IL)
    "SpotHero is seeking a Senior Engineer I to be part of the team working on our flagship consumer products. This team owns building out new features & products and improving existing ones that allow millions of customers find and book parking seamlessly."
  • UX Engineer at ThoughtSpot (Sunnyvale, CA)
    "As a User Experience (UX) Engineer at ThoughtSpot, you synthesize design and development. You take ThoughtSpot's innovative product concepts and bring them to life in an effort to push the boundaries of UI design."
  • Java Software Developer (m/f/d) at Consors Finanz BNP Paribas S.A. Niederlassung Deutschland (Munich, Germany)
    "The develop leader of the digital factory is in charge of defining and maintaining the coherence of the developments of its digital factory, both on the choice of technologies in connection with the community of the digital factory and on the quality of the developments produced by the Teams."

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:

A cartoon of the Smashing Cat being on stage and giving a presentation with a flipchart

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)


11. Our Most Popular Articles

  • How To Use FOMO To Increase Conversions
    You may have heard that FOMO is harmful for consumers. There's even research that supports it. That said, what if we removed "fear" from the "fear of missing out" and put the good parts of this marketing strategy to use in web and app design? It's possible to do and this article will unpack four ways you can more delicately and ethically use (F)OMO when designing digital experiences.
  • Getting Started With An Express And ES6+ JavaScript Stack
    A basic introduction to the backend web application development process with Express — discussing bleeding edge ES6+ JavaScript features, the Factory Design Pattern, MongoDB CRUD Operations, servers and ports, and the future with enterprise n-tier architectural patterns for TypeScript projects.
  • Better Design With Deep Thinking
    Task switching is a design killer. Find out why switching and interruptions are even more serious than you think and how biology makes it difficult to resist the temptation to just check your email every few minutes. Learn how to slay the distraction dragon with five practical tips for increasing focus as you tackle challenging design problems.

This newsletter issue was written and researched by Cosima Mielke, Iris Lješnjanin, Rachel Andrew, 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 коммент.: