Ahoy Smashing Friends,

There are so many things I don’t know about the web. The way all the underyling networking layers work together is one of them. I’ve been struggling with regular expressions for years. Not to mention the best practices around API design, and to me, Docker is still a big mysterious box that just happens to work somehow.

Nobody knows everything on the web, and that’s perfectly fine. The magic really lies in a simple fact that we all learn a little bit more every day. Yet some things are quite difficult to wrap your head around — whether you are just starting out or have been around for a while. We hope you’ll find the resources in this issue that will help you fill those gaps for good.

And if you need a few more resources to wrap your head around, join a free 2×2.5h online workshop with Alba on how to migrate your system to a headless CMS, with practical tips, techniques and real-time coding — and enough time to answer all your questions!

The free workshop is kindly powered by our colleagues at storyblok, a friendly headless CMS with a visual editor and customizable content blocks. We hope to see you there!

— Vitaly (@smashingmag)

1. Learn Regex The Easy Way

Regular expressions are super powerful. Essentially a group of characters or symbols, they help us define patterns — to replace text within a string, validate forms, extract a substring from a string based on a pattern match, and much more.

If you haven’t gotten around to wrapping your head around Regex yet or are looking for a cheatsheet to help you define different kinds of patterns, Zeeshan Ahmad’s guide Learn Regex The Easy Way is for you. It covers everything from the very basics of how a regular expression works to using lookarounds when a pattern must be preceded or followed by another pattern and using flags to modify the output of a regular expression. A comprehensive overview. (cm)

2. The Ultimate Guide To API Design

When internal services slowly turn into APIs, you often end up with undocumented spaghetti monsters that pile up technical debt. But where to begin if you need to refactor an existing API into something more manageable? And what can you do to prevent spaghetti monsters up front? “The Ultimate Guide to API Design” takes you through the process step by step.

From planning your API patterns to improving an API’s performance, the guide covers everything you need to know to ensure that your API does not slow down your users or your team’s process. And even if you haven’t considered APIs to be overly complex until now, it gives you a clear overview of where in the process the complexity might crop up. A valuable read. (cm)

Powered by Storyblok

Building Digital Experiences With Storyblok

Today’s newsletter is kindly powered by our dear friends at storyblok who have created a friendly headless CMS with a visual editor, nested components and customizable content blocks for websites and apps. A headless CMS worth trying out.

3. High Performance Browser Networking

Web performance has become more and more important in the past few years. For a good reason: Faster sites engage users and lead to higher conversions. And while a lot of factors contribute to delivering user experiences that are fast and reliable, there’s no getting around networks, transport protocols, application protocols, and browser APIs. Ilya Grigorik’s guide to high performance browser networking helps you make sense of it all.

Starting off with a primer on latency and bandwidth and exploring the building blocks of TCP and UDP as well as TLS, the guide dives deep into the performance of wireless networks, HTTP, browser APIs and protocols, how they work and how to optimize for them. A fantastic overview for every developer who wants to get more involved with web performance. (cm)

4. Upcoming Front-End & UX Workshops

You might have heard it: we run online workshops around front-end 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.

Front-end 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:

• Smart Interface Design Patterns, 2022 Edition Design
  with Vitaly Friedman. October 25 – November 8.
• Behavioral Design Design
  with Susan and Guthrie Weinschenk. November 3–17.
• Deep Dive On Accessibility Testing Dev
  with Manuel Matuzović. November 4–18.
• Jump to all online workshops →

5. Making Design More Human

Behind every “user” there’s a human. A person who has certain expectations about how something should work and what value your product or site should offer them. To help you create products that cater to these needs and expectations, user research is a crucial component of human-centered design. But how to best tackle the task? “The Ultimate Guide To UX Research” that the team at Maze published shares valuable methods, tips, and best practices from leading industry experts.

When speaking of human-centered design, there are design teams to consider, too. Each team is made up of individuals who all have their unique potential and who need to together to create stellar work. The Playbook collection “Grow as a Design Manager” features ways to approach the challenges that managing a design team can bring along: growing your designers, building a healthy culture and process, resolving team conflict, and scaling your team. Two great resources to make design more human — for everyone involved. (cm)

6. Making Sense of Headless CMS

Jamstack, static site generators, headless CMS. You might have heard of all the terms and actually understand how it works, but how do you actually get started with it? How do you choose a decent headless CMS, what factors do you need to keep in mind doing so, and how do you migrate from a current system to the new one?

Over the last months, we’ve been publishing guides all around headless to help us all wrap our heads around the topic. You can explore use cases for going headless, and common considerating worth keeping in mind when choosing and evaluating a headless CMS. Once you’ve made a decision, you can read Alba Silvente’s piece on “How To Migrate From WordPress To A Headless CMS.”

And if you’d like to dive deeper, join a free 2×2.5h online workshop with Alba on how to migrate your system to a headless CMS, with practical tips, techniques and realtime coding — with enough time to answer all your questions! (vf)

7. A Complete Guide To Docker

Every now and again your colleagues ask you to pull a Docker image to get a dev environment up and running. No need to fiddle with config files, and no need to install all the dependencies. It all sounds great, but how do you get started with Docker if you’ve never really used it?

Jeff Hale has published a detailed series of articles on Docker, going into all the fine details of why Docker is useful, the terms you need to know about Docker, Dockerfile instructions, optimization and useful Docker commands. A useful reference to keep in mind when trying to wrap your head around Docker once and for all. (vf)

8. The Front-End Developer Learning Roadmap

The world of front end is complex, and even for advanced front-end developers, things can feel intimidating at times. There’s so much to make sense of, so much to learn. To help you see things a bit clearer, the folks at Frontend Masters designed a front-end developer learning roadmap that visualizes how different aspects of frontend correlate.

Each aspect in the roadmap — from the Front-End Developer Profession and The Web Platform to Progressive Web Apps and JavaScript State Management — is represented by a card and marked as either fundamental or specialized knowledge. Once you click on a card, you’ll get a brief overview of the topic as well as links to learning resources and tools. One for the bookmarks. (cm)

8. New On Smashing Job Board

• Front-End Engineer
  at Threespot (Washington, DC, USA)
• Graphic Designer
  at University of Connecticut (Storrs, CT)
• Technical Support Engineer
  at eMDs Inc. (Richardson, Austin)

9. Recent Smashing Articles

• A Guide To CSS Debugging
• Bridging The Gap Between Designers And Developers
• Composable CSS Animation In Vue With AnimXYZ
• Freebie: COVID-19 Icon Set (56 Icons, AI, EPS, SVG, PNG)
• Local Testing A Serverless API (API Gateway And Lambda)
• How To Build An Expandable Accessible Gallery

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