Smashing Newsletter: Issue #247

Editorial

I’ve recently moved house, and needed to purchase various things for my new home. Doing my research led to me being followed around the web by all manner of domestic appliances. Facebook is full of refrigerators, and every article I visit shows me an oven. While comparing prices, I add items to my basket. I then find I’m being pestered for days about the products that I left behind, with increasingly urgent messages about how stock is running low, or a discount is about to expire.

Those of us who work on the web don’t tend to like these intrusive patterns. Many of us have resorted to ad blockers or anti-tracking software to escape from them. However, we can also find ourselves being asked to implement such patterns in the sites we build.

Introducing a new Smashing book on how to influence a positive change in your company and help your business grow sustainably. Pre-order the book today.

Our new book, “The Ethical Design Handbook” which is pre-released today, seeks to offer an alternative approach. It will help you design more ethical experiences, which still serve the interest of the business. In fact, you’ll discover the competitive advantages your business can gain by focusing on privacy and transparency, creating loyal customers rather than one-off purchases from people who then feel tricked.

Ethics is an ever-so-important subject, one which we touched on in some of the essays in the first edition of our Smashing Print Magazine, and I’m happy that we are continuing the conversation with this practical guide to doing the right thing.

I look forward to hearing what you think!
— Rachel Andrew (editor-in-chief)

Smaller HTML Payloads With Service Workers
How To Build A Winning UX Strategy
Free Fonts For Your Projects
Generator Of Geometric Shapes
Git From Beginner To Advanced
The Illustrated Children’s Guide To Kubernetes
Useful Browser Extensions To Boost Your Workflow
The Museum Of Obsolete Media
Upcoming In Smashing Membership
Our Next Smashing Workshops

1. Smaller HTML Payloads With Service Workers

There are many reasons for using service workers: resilience, performance, better caching and offline access are the main reasons that come up quite frequently. However, we can explore another, slightly more obscure use case when a service worker could be useful.

As Phil Walton writes, we could serve smaller HTML payloads by programmatically generating our responses. In the end, we aren’t limited to just fetching from the network or reading from the cache. So since most sites have a lot of repetition in their HTML payloads, a service worker could request just the bare minimum of data it needs from the server (e.g. an HTML content partial, a Markdown file, JSON data, etc.), and then transform that data into a full HTML document. A great technique worth exploring for single-page apps.

A slightly older library, sw-delta, tries to achieve something similar: it makes the browser download only the delta between the previously cached file and the required version of the file. There are also a couple of interesting use cases as well. A few great ideas worth experimenting with! (vf)

2. How To Build A Winning UX Strategy

As designers, we often get in heated debates on design processes, our workflows, and our tooling. Of course, we want to improve the overall user experience and user satisfaction, and we want to establish a lasting, positive relationship with our customers by keeping them happy and productive with our services. Yet how exactly do we get there?

In his talk on UX strategy (transcript), Jared Spool has been looking into ways for us to create a better product and UX strategy. That involves regularly pruning features rather than adding them, continuously exploring common expectations and frequent frustrations, adding value by innovating where customers are most frustrated and establishing exposure hours with customers for the entire team.

In his other talk on Growth Stages in UX (transcript), Jared explains how everybody involved in the product is a designer as well, so increasing design literacy among the entire team is necessary to make the product fully focused on overall design and UX. He speaks about UX tipping point which organizations need to reach when design becomes an organization’s competitive advantage. Both talks are a good starting point when you want to understand how to take your organization from status quo to a better place, and where to start. (vf)

3. Free Fonts For Your Projects

Everybody loves a bunch of great typefaces! Mariano Diez and Denis Ignatov have designed Disket, a free display monospaced, grid-based typeface with 614 characters and two weights, regular and bold. Heavily inspired by geometry, grids and architecture, and now supporting 20 languages, it’s wonderful for headings and posters. Free for personal and commercial use.

Beattingville is another free release, from Garisman Studio. A beautiful multilingual script font with stylistic alternates, swashes, and ligatures. Could come in handy for branding, label design, logo type, quotes, posters and apparel, among others. Free for personal and commercial use as well. Happy downloading and using! (vf)

4. Generator Of Geometric Shapes

To stand out from the crowd of a myriad of websites out there, we can define one unique thing, the signature, that brings a bit of personality into our digital products. Perhaps it’s a little glitch effect, or a pencil scribble, a game or unusual shapes. Or, it could be a set of seemingly random geometric flow lines.

Flow Lines Generator produces random geometric lines, and we can adjust the formulas and distances between the shapes drawn, and then export the outcome as SVG. Perhaps every single page on your site could have a variation of these lines in some way? It might be enough to stand out from the crowd, mostly because nobody else has that exact visual treatment. It might be worth looking at! (vf)

5. Git From Beginner To Advanced

Most of us will be dealing with Git regularly, sometimes running Git commands from terminal, and sometimes using a visual tool to pull, push, commit and merge. If you feel like you’d like to supercharge your skills and gain a few Git superpowers, where do you start?

Mike Riethmueller has published a quick guide to Git, from beginner to advanced, explaining how Git works, how to configure it, aliases, important commands, staging/unstaging files, managing merge conflicts, stashing and a few advanced tips. Need more advanced stuff? Harry Roberts has published “Little Things I Like To Do With Git”, Atlassian has Advanced Git Tutorials, Bruno Passos lists useful git commands, and GitHub provides a Git Cheat Sheet PDF. (vf)

6. The Illustrated Children’s Guide To Kubernetes

Have you ever tried to explain software engineering to a child or to a friend, colleague, or relative who isn’t that tech-savvy? Well, finding easy words to explain a complex concept can be a challenge. A challenge that “The Illustrated Children’s Guide to Kubernetes” masters beautifully.

Designed as a storybook and available to be read online or as a PDF, the free guide tells the story of a PHP app named Phippy who wished she had her own environment, just her and a webserver she could call home. On her journey, she meets Captain Kube who gives her a new home on his ship Kubernetes. A beautiful metaphor to explain the core concept of Kubernetes. (cm)

7. Useful Browser Extensions To Boost Your Workflow

As much of our testing and debugging is happening in the browser these days, it’s useful to have a couple of extensions that help us speed up our work. For example, how often do you manually enter data to test the resilience of your web forms? Form-Filler (Chrome, Firefox) allows you to fill all form inputs (textboxes, textareas, radio buttons, dropdowns, etc.) with random data. OneTab (Chrome, Firefox) converts all of your tabs into a list that can be restored individually or all at once.

Open Graph Preview (Chrome, Firefox) displays how people will see a page in posts on popular social networks. Clear Cache (or Clear Browsing Data for Firefox) deletes all cache, including localStorage and Service Workers Cache with a click of a button (and you can customize what you’d like to delete).

Accessibility Insights runs sophisticated accessibility testing on webpages and web apps from the toolbar. Finally, VisBug allows you to edit web pages visually, in any state. More recommendations? Here’s a Twitter thread by our kind readers as well. Useful little time-savers for your work! (vf)

8. The Museum Of Obsolete Media

Do you remember the days when you listened to a music cassette on your Walkman, watched your favorite movie on video tape instead of streaming it, or stored your data on a floppy disk? The media we considered state-of-the-art back then, is obsolete today. And, well, a lot of other formats shared the same fate in the past.

In his Museum of Obsolete Media, Jason Curtis collects examples of media that went out of use, not just the ones you might remember, but also real curiosities and treasures dating back as far as to the middle of the 19th century. Things like the “carte de visite”, “Gould Moulded Records”, or “Magnabelt” for example. A fascinating trip back in time. (cm)

9. Upcoming In Smashing Membership

We’ve just finished it, and it’s already in your dashboard! Yesterday, we published Ethical Design Handbook and sent out a mailing to all Members. The eBook version is and always will be free for Smashing Members. Please check your dashboard (“eBooks”) 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 channel), so our speakers can review and provide feedback to your current projects — live!

“Inspired Design Decisions: Neville Brody” with Andy Clarke— Feb. 4 at 17:00 London time
“Video Killed My Data Plan: Performant Video Delivery On The Web” with Doug Sillars— Feb. 25 at 17:00 London 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. 😉

10. Our Next Smashing Workshops

In our workshops, we explore best practices and interesting techniques in front-end and interface design, always focusing on actual solutions to real-life problems.

🇳🇱 Awwwards Conference (Feb. 19) in Amsterdam, NL.
🇺🇦 Projector Practicum (Feb. 21–23) in Kyiv, UKR.
🇩🇪 TypeTech (Mar. 13–14) in Munich, DE.
🇺🇦 JS Fest (Apr. 2) in Kyiv, UKR.
🇺🇸 SmashingConf SF (Apr. 21–22) in San Francisco, USA.
🇮🇱 UX Salon (May 10–11) in Tel Aviv, Israel.
🇵🇱 infoShare Conference (May 13–14) in Gdańsk, PL.
🇺🇸 SmashingConf Austin (June 9–10) in Austin, Texas, USA.
🇩🇪 SmashingConf Freiburg (Sept. 7–8) in Freiburg, DE.
🇺🇸 SmashingConf New York (Oct. 20–21) in New York, 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)

February 4, 2020 Smashing Newsletter: Issue #247

Previous Issues