Smashing Magazine - #352: Front-End Tooling

Terminal tools, VS Code extensions, DOM events, bundle analyzer and accessible Vue.js. Issue #352 May 10, 2022 View in the browser 💨

Smashing Newsletter

Dobryy vechir Smashing Friends,

There will be a time when front-end developers won’t even remember what Internet Explorer once was. All those hacks for the quirks mode and transparent PNGs, along with layout bugs and browser sniffing. These times are way behind us, and we are looking at a shiny bright front-end landscape shaped by all of us.

In today’s newsletter issue, we look at some of the useful tools for front-end developers and engineers to boost their toolbelts. From making better sense of the Terminal to DOM events and useful VS Code Extensions to accessible Vue and bundle analyzer.

SmashingConf SF 2022
SmashingConf SF 2022

We’ll be diving into the state of front-end at the upcoming SmashingConf SF as well, with Brad Frost, Cassie Evans, Miriam Suzanne and Pablo Stanley speaking, among many other wonderful speakers.

Smashing Hour with Amit Sheen

Also, we have a Smashing Hour coming up this week: an informal get-together to talk about the good ol’ web, this time on all of the exciting features in CSS with Amit Sheen, a creative mastermind who is slightly obsessed with CSS animations. We hope to see you there!

In the meantime, happy front-end hunting!

Vitaly (@smashingmag)


1. Handy Command Line Tools

Let’s make the good old command line a bit more glamorous! That’s the self-declared mission of the Charm ecosystem. It offers the tools you need to build great stuff for the terminal.

Charm

There are currently three Charm applications and seven open-source libraries available to help you take the command line to the next level. A self-hostable Git server for the command line called Soft Serve, the app Glow that renders markdown on the command line, and Skate, a personal key-value store with a simple but powerful command-line interface. There’s also Charm Cloud, a command-line backend that combines the power of the command line with next-generation networking, data storage, identity, encryption, and multi-machine support, as well as mighty little helpers like a stylesheet-physics-based animation library, style definitions for nice terminal layouts, and much more. A powerful package. (cm)


2. Hydration Is Pure Overhead

Hydration is a solution to add interactivity to server-rendered HTML. It recovers event handlers by downloading and re-executing all components in the SSR/SSG-rendered HTML. And while hydration is often seen as a virtue, Miško Hevery has a different opinion. For him, hydration is overhead, a “horrible workaround because web frameworks don’t embrace how browsers actually work”. But why? And how can we do better?

Hydration Is Pure Overhead

In his post “Hydration is Pure Overhead”, Miško digs deeper into hydration, where he sees the overhead, and, of course, his suggestion for a no-overhead alternative: resumability. Resumability focuses on transferring all of the information from the server to the client, allowing the client to reason about the application without downloading the application code eagerly. Only a user interaction forces the client to download code to handle that specific interaction, there’s no duplicate work involved as in the case of hydration, and, thus, no overhead, involved. A concept worth exploring. (cm)


From our sponsor

40 Free Webinars: Design, Coding, Video, Marketing, Data, & More

40 Free Webinars: Design, Coding, Video, Marketing, Data, & More
In May & June join a free Noble Desktop live webinar to learn about web design and development (Figma, Adobe XD, React, Django, WordPress, GreenSock), UX design, video editing & motion graphics, digital marketing and social media, data analytics (Excel, SQL, Python), and a lot more. Register today.


3. DOM Events Visualizer

Listening to and responding to events is a fundamental skill for building software on the web. And while the DOM has a powerful built-in event system, many of us have a rather basic understanding of the DOM Event system and only scratch the surface of the available power. This can lead to bugs in applications and writing lots of code to work around the DOM event system rather than leveraging it. To change that, Alex Reardon built the DOM Events visualizer.

DOM Events

The DOM Events visualizer helps you learn about the DOM Event system through exploration. With just a few clicks, you can add different kinds of event listeners to parent, child, and grandchild elements, and dispatch them to see how the setup works in practice. A fantastic little helper. (cm)


4. Useful VS Code Extensions

We spend so much time in our text editors, and every now and again we encounter those frustrating little issues that slow us down. Perhaps finding the right files takes too long, or finding a matching closing bracket becomes a long-winded adventure on its own. Let’s fix all those annoyances for good.

Useful VS Code Extensions For Front-End Developers

In our post “Useful VS Code Extensions For Front-End Developers”, we compiled handy VS Code extensions for front-end development that minimize slow-downs and frustrations. You’ll find fine productivity boosters in there just like advanced debugging helpers. We hope they’ll prove to be useful in your day-to-day work — and, most importantly, help you avoid some time-consuming, routine tasks. (cm)


5. Upcoming Online 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
With online workshops, we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are.

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


6. Understanding Bundle Size

When you’re building complex JavaScript applications, it is common to bundle files together to ensure that users only download the code necessary for the page to make the app load faster. However, this can turn out to be quite a balancing act: You need to limit the number of files while at the same time limiting the size of each of those files. So where is the sweet spot? Bundle Buddy helps you find out.

Bundle Buddy

Created by Susie Lu and Sam Saccone, Bundle Buddy determines if your bundles are duplicating too much code at the cost of reducing the file count. To understand what code is in your bundle and how it got there, you can import an existing project or select the bundler you’re using and upload your assets. Bundle Buddy will then visualize the relationship of the files before and after bundling. (cm)


7. Free eBook: Accessible Vue

JavaScript frameworks like Vue, React, and Angular have a reputation for poor accessibility. But is this really an inherent problem of these tools? Or is it possible to build accessible sites and apps with them if you respect web app idiosyncrasies? Marcus Herrmann is convinced that the component-based architecture, statefulness, and related tooling can and should be used for “the good cause”.

Accessible Vue

In his free eBook Accessible Vue, Marcus looks into the why and how of building inclusive apps with Vue.js. He gathered strategies, code snippets, and already inclusive component libraries for working with Vue 2 and 3 — from the very basics of accessibility and web app accessibility concepts to making typical components accessible and testing for accessibility. You can download the eBook for free in PDF, Mobi, and ePUB formats or pay what you want for it. A web version is also available. (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.


8. Practical Front-End Challenges

Learning by doing is often the best way to bring your skills to the next level. And, well, that’s also the idea behind Frontend Practice. The site gives front-end developers of all skill levels ideas for recreating real websites for real companies to put their front-end knowledge to the test.

Frontend Practice

The challenges are divided up into three levels, with level 1 aimed at developers who are just starting out learning about layouts, animations, and color choices and level 3 pushing to complex layouts and interactive elements. Each project comes with a color palette to save you time and curated resources that help you tackle difficult elements. A fun way to get better at your craft. (cm)


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

#351: Interface Design Tools

Tuesday, May 3, 2022

With image clean-up tools, free icons, font utilities, accessible color palettes and image upscaling. Issue #351 • May 3, 2022 • View in the browser 💨 Smashing Newsletter Hei Smashing Friends, We all

#350: Front-End Debugging

Tuesday, April 26, 2022

With memory debugging, terminal tips, debugging strategies, DevTools and debugging tooling. Issue #350 • Apr 26, 2022 • View in the browser 💨 Smashing Newsletter Dear Smashing Friends, A few years back

#349: SVG

Tuesday, April 19, 2022

With SVG masks, SVG Grids, grainy gradients, SVG cut outs, image grids and conversion from bitmap to SVG. Issue #349: SVG • Apr 19, 2022 • View in the browser 💨 Smashing Newsletter Dear Smashing

#348: UX and Interface Design

Tuesday, April 12, 2022

On interface design, accordions, breadcrumbs, contextual menus, motion in UX and design patterns. Issue #348 • Apr 12, 2022 • View in the browser 💨 Smashing Newsletter Tâi-gí Smashing Friends,

#347: Web Performance

Tuesday, April 5, 2022

On Core Web Vitals, 3rd-Party-Scripts, B/F Cache, Priority Hints and responsive images preloading. Issue #347: Web Performance • Apr 5, 2022 • View in the browser 💨 Smashing Newsletter Dear Smashing

Lessons from PM & UXR collaboration

Monday, May 23, 2022

Part 2: What we learned from working on a new product project together ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

🤩 Magnificent Landing Page Designs + 🏆 Challenge Updates

Monday, May 23, 2022

Your Freshest UpLabs Design News Is Here! 🙌 First off, congratulations to Arjun Makwana, the winner of our latest 🛒 Ebay Website Redesign Challenge! Next off, remember that the second week to vote in

Step Inside Ken Fulk’s Cinematic Universe

Monday, May 23, 2022

Plus, 6 new glass collections to know View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Confectionery, Food, Sweets, and Plant GLASS IS RED-HOT: HERE

An Op-Art Loft in Los Angeles

Monday, May 23, 2022

Design editor Wendy Goodman takes you inside the city's most exciting homes and design studios. Design Hunting A visual diary by Design Editor Wendy Goodman Photo: Lane Barden Architect, critic,

Into the Archive: California Dreaming

Monday, May 23, 2022

Plus, everything you need to know about designing an ADU (image) Architectural Digest AD PRO Logo Into the Archive: California Dreaming The June 2022 issue of AD is all about families. But from cover

Button Component, Line Length, Design Thinking, Glenn Davis, Keyboard Accordion

Monday, May 23, 2022

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 23 2022 Building a button component web.dev A foundational

✏ Exciting New Tools for Designers May 2022, and more…

Sunday, May 22, 2022

Your Inbox Needs This Clever Business Newsletter [ad] MORNINGBREW.COM Exciting New Tools for Designers, May 2022 WEBDESIGNERDEPOT.COM COMMENTS HTMLrev - 50 Beautiful HTML Landing Page Templates Library

Invoke fun at work

Sunday, May 22, 2022

Issue 93: Fun and play leads to sustainable creativity ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

The 7 Design Trends All the Spring Markets Agreed On

Friday, May 20, 2022

Plus, Victor Glemaud teams up with Schumacher, Hermès opens in Austin, and more news View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Shop, Flooring,

The Games Table Is Having a Moment—And We're All In

Friday, May 20, 2022

Plus, more sourcing inspiration. View in your browser | Update your preferences Architectural Digest AD PRO logo image Welcome to the PROcurement, our weekly roundup of the best designs to source and