Smashing Magazine - 341: Front-End & UX Reading

With design patterns, UX guides, free JavaScript books, UX guides and books from the community. Issue #341 February 22, 2022 View in the browser 💨

Smashing Newsletter

Bom Dia Smashing Friends,

When I was growing up, we had a large bookshelf in our living room. It housed literally hundreds of books, from classic literature to practical guides. Every other evening I would pass by the bookshelf studying what’s inside: the covers, the titles, dusty pages, and perhaps even notes on the side.

One book, in particular, was among my favorites though. It was a dusty old book, with partly torn pages, plenty of coffee stains, and yellowish old paper. It was a book that my grandfather, who had been a scientist, wrote years ago on the subject of geology. I couldn’t understand much of what the book was about, but I enjoyed exploring all of his notes, deciphering the handwriting, and imagining the stories behind all of the stains that came to be. For years, it has become a journey that I was fiercely exploring in my imagination.

We all learn from books that just happen to be around us. They may not cover the topics that we’re particularly interested in. In this newsletter issue, we want to highlight some of the wonderful books released by the community, and hopefully, you’ll be able to learn something from them as well.

A Smashing Hour With Paul Boag

On another note, we have another fantastic Smashing Hour coming up this week. This time, I’ll be spending a full hour with Paul Boag on Feb. 24, 8–9 AM PT (check your timezone). This community event is free for all, and you are more than welcome to register and join us. We’d love to see you there!

Pssst! We’ve just recently finished cooking something new. 🍕😉

Happy reading, everyone!
Vitaly (@smashingmag)


1. How Modern Browsers Work

Have you ever wondered how the browser turns your code into a functional website? Or maybe you’re unsure why a specific technique is suggested for performance improvements? An inside look at how modern browsers work can help you connect the dots.

Inside look at modern web browser

Mariko Kosaka wrote a great four-part article series in which she looks inside the Chrome browser — from high-level architecture to the specifics of the rendering pipeline — to give you a better understanding of the bigger picture. The friendly illustrations in the article make the quite abstract topic easier to grasp. If you want to dig even deeper, Pavel Panchekha’s and Chris Harrelson’s free eBook Web Browser Engineering is for you. They have a very special approach to learning to understand how browsers work: You get to construct a basic browser yourself. Will you take on the challenge? (cm)


2. Free Design And UX Books

What practices power the world’s best design teams? DesignBetter by InVision published 10 free books that share valuable insights into how others work. They help you bring design and development closer together, share tips to get the best out of a design sprint, guide you through planning and implementing a design system, look into strategies to communicate with business partners, and much more. The books are available in ePUB, PDF, and audiobook formats.

Design Better library

Maze provides guides to usability testing and UX research. UXPin also offers a massive library of UX books and whitepapers for free download. In it, you’ll find more than 100 books covering everything from mobile and web prototyping, wireframing, and mockups to usability testing, project management, design process, and more. Good stuff. (cm)


From our sponsor

VS Code Day 2022: Free Online Event

VS Code Day 2022: Free Online Event
Join the Visual Studio Code team and community at a live event just for VS Code users. Get a glimpse of things to come and meet the team who works on VS Code every day. Add to your calendar →


3. Design Patterns For Modern Web Apps

Design patterns are a fundamental part of software development. They provide solutions to common code problems and guide you when you face a problem that fellow developers have already encountered before. Whenever you’re in the need for a helpful design or component pattern when building a web app, Patterns.dev has got your back.

Patterns.dev

The free book and accompanying online platform puts the power of patterns right at your fingertips. The patterns are divided into three categories: design, rendering, and performance and cover vanilla JavaScript just like React. And while some might argue that patterns needlessly add complexity to a codebase, Patterns.dev understands itself as a catalog that wants to increase awareness rather than a checklist of things that you must do. One for the bookmarks. (cm)


4. Upcoming Front-End & UX Workshops

You might have heard it: we run online workshops around frontend and design, be it accessibility, performance, navigation, or landing pages. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.

Smashing Online Events
Frontend and design can sometimes feel like you’re riding some pretty wild waves! We’ve got your back with personal and inclusive events.

As always, here’s an overview of our upcoming workshops:


5. Books From The Community

Here at Smashing, we know from our own experience how much love and sweat goes into producing a book that is truly valuable to its readers. That’s why we’d love to shine a light on three fantastic books from the community today. Books that tackle topics that you certainly don’t have on your (digital) bookshelf yet, but that will prove to be precious companions in your day-to-day work.

Engineering Management For The Rest Of Us

First off, Sarah Drasner’s Engineering Management For The Rest Of Us. Sarah wrote the book not for the born leaders but for engineers who suddenly find themselves in a managing position. In it, she shares everything she learned in more than 10 years of experience in Engineering Management, the things nobody told her about and that she wished she knew when she was getting started.

Next up, Emma Bostian. Emma wrote her book De-Coding The Technical Interview Process to help you nail every aspect of your next tech interview. After spending hundreds of hours studying JavaScript and systems designs for interviews and working on take-home projects, she distilled everything she learned into this guide — from the application process to the live coding challenge, the whiteboard on-site interviews, and, of course, negotiating an offer.

Last but not least, Ahmad Shadeed’s book Debugging CSS is here to help you improve your debugging skills and reduce the time you spend on bugs. The focus lies on actionable advice and tips and each CSS issue has a mockup that shows it clearly so you don’t have to imagine it. All the examples are things that you face in your day-to-day work, nothing is abstract. Happy reading! (cm)


6. Free JavaScript Books

Maybe you have heard developers say that JavaScript is the worst language you could possibly learn. Well, it doesn’t have to be. We came across three free books that help you master JavaScript — no matter if you’re just about to take your first steps in the world of JavaScript or if you already have some experience with the language.

JavaScript books

JavaScript For Impatient Programmers by Dr. Axel Rauschmayer is aimed at newcomers without any prior JavaScript knowledge who are looking to gain a modern view on the language. It covers all essential JavaScript features up to and including ES2022. Exercises and quizzes help you put your knowledge to the test and, if you like, you can dig even deeper with the optional advanced sessions.

Marijn Haverbeke’s book Eloquent JavaScript is a modern introduction to programming. Part one discusses the JavaScript language, part two looks at web browsers and how JavaScript is used to program them, and part three focuses on Node.js. The book is also available in Persian, Spanish, Arabic, Bulgarian, Portuguese, and Russian.

If you already have 6–9 months experience with JavaScript, you might want to look into Kyle Simpson’s free book series You Don’t Know JS Yet. It dives deep into the core mechanisms of JavaScript and helps you understand why the code you write does work. Looking for more? The site JSbooks collected more free JavaScript resources for different skill levels. Happy learning! (cm)


From our sponsor

Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy

Work at the Intersection of Data, Design and Technology. Earn your master’s degree online at Northwestern Information Design and Strategy.
Earn your master’s degree online.


7. High Performance Browser Networking

Web performance has gained more and more importance in the past years. For a good reason. Faster sites improve user engagement and retention and lead to higher conversions. In fact, speed is a feature, and there are many factors to consider to deliver speedy experiences. Ilya Grigorik’s free book High Performance Browser Networking explores what plays into the performance of your site.

High Performance Browser Networking

In his book, Ilya dives deep into the various types of networks (WiFi, 3G/4G), transport protocols (UDP, TCP, TLS), application protocols (HTTP/1.1, HTTP/2), and APIs (XHR, WebSocket, WebRTC, and more) available in the browser. A hands-on overview to make sense of it all. (cm)


8. Why Are Hyperlinks Blue?

Why is it that links are blue? Who was it that decided to make them blue? When was this decision made, and how did this decision make such a lasting impact? Well, no one knows, but Elise Hotard Blanchard has some pretty good theories.

Why are hyperlinks blue?

Elise is a Senior UX Designer at Mozilla and has been creating websites since 2001. Once she stopped and wondered why links — specifically hyperlinks — are blue, she and her colleagues set out to do some research. With some fascinating discoveries of how hyperlinks evolved over time, her article explains just how these early innovations impact usability on the web today. (il)


9. New On Smashing Job Board


10. Recent Smashing Articles


That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!


This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).


Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You
rock.

Follow us on Twitter Join us on Facebook

unsubscribe update preferences view in your browser

Older messages

Meet “Touch Design for Mobile Interfaces”, a new Smashing Book

Wednesday, February 16, 2022

Meet our shiny new Smashing Book for accessible and usable mobile interfaces, with guidelines, examples and best practices. It's here! Touch Design for Mobile Interfaces, our new guide for better

#340: Productivity Helpers

Tuesday, February 15, 2022

With little helpers for getting work done faster in browsers, Figma and other tools that you use daily. Issue #340 • February 15, 2022 • View in the browser 💨 Smashing Newsletter Bună dimineaţa

#339: Modern CSS Techniques

Tuesday, February 8, 2022

With modern CSS, techniques for better CSS shadows, SVG icons, CSS Reset and even CSS pseudo commas. Issue #339 • February 8, 2022 • View in the browser 💨 Smashing Newsletter Dear Smashing Friends,

#338: UX & Front-End Tools

Tuesday, February 1, 2022

Little tools for card sorting, tree testing, gathering feedback, testing with screen readers and monitoring Core Web Vitals. Issue #338 • February 1, 2022 • View in the browser 💨 Smashing Newsletter

#337: Design Inspiration

Tuesday, January 25, 2022

With miniature illustrations, Japanese Fireworks, CSS art, generative art and a free Mac screensaver. Issue #337 • January 25, 2022 • View in the browser 💨 Smashing Newsletter Hyvää päivää Smashing

You Might Also Like

Cascade, HTMX, Sponge Furniture, Meaning of Color, Flipbook

Friday, April 26, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 26 2024 A primer on the cascade and specificity piccalil.

9 Trends From Milan We Can’t Stop Thinking About

Thursday, April 25, 2024

View in your browser | Update your preferences ADPro Even More From Milan Design Week Each year, the design world convenes in Milan—and that applies to us at AD, too. For the third year running, our

Subframe, Attributes vs Properties, Front End Handbook, aspect-ratio, GenAI

Thursday, April 25, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 25 2024 Subframe subframe.com Subframe is a design-to-

Ritmo, Climate Change, Icons & Typefaces, Click Wheel JS, CarPlay

Wednesday, April 24, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 24 2024 Meet Ritmo, Musixmatch's cross-platform

Why Jake Arnold Doesn’t Text Clients

Tuesday, April 23, 2024

View in your browser | Update your preferences We've had a remodel! From now on, you'll be hearing from AD PRO in your inbox twice a week—once with a deep dive into trends to watch and subjects

The secret ingredient to media success

Tuesday, April 23, 2024

PR tips from our founder Nora Wolf In this month's edition is all about *the most important* element of successful media outreach—photography. You may have some photos, but if the backgrounds are

#453: Design Systems

Tuesday, April 23, 2024

Design system generator, types of design systems and how to consolidate design systems. Issue #453 • Apr 23, 2024 • View in the browser Smashing Newsletter Buổi tối vui vẻ Smashing Friends, Ah, design

👨‍🏫 Striking Educational Website Designs + 🏆 Challenge Updates

Tuesday, April 23, 2024

Your UpLabs Design Updates Await! Let's Get Going! 🎨 Firstly, let's congratulate Mariana Gameiro, the winner of our latest 👩‍💻 SheCodes Website Redesign Challenge! Congratulations!! Secondly,

Code Connect, JS Naked Day, Shape of AI, Product Design, CSS Grid Level 3

Tuesday, April 23, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 23 2024 The Right Code for Your Design System figma.com

Accessibility Weekly #393: When Security and Accessibility Clash

Monday, April 22, 2024

April 22, 2024 • Issue #393 View this issue online or browse the full issue archive. Featured: When security and accessibility clash: Why are banking applications so inaccessible? "While using