#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 Workshops]( 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]( - [DevOps Masterclass]( Dev with Denys Mishunov. May 16–30 - [The Fundamentals of UX Writing]( UX Yuval Keshtcher. May 18–26 - [UX for Mobile eCommerce Masterclass]( UX Rinaldo Ugrina. May 23 – June 6 - [Pushing CSS to The Limit]( Dev with Amit Sheen. May 25 – June 2 - [Designing Better UX With Top Tasks]( UX with Gerry McGovern. June 1–15 - [Smart Interface Design Patterns]( UX with Vitaly Friedman (6h video + UX training) - [Jump to all online 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 [Northwestern: Online Master’s in 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 - [Web Content Manager]( at Baymard Institute (Remote) - [UX Designer]( at Mutual of Omaha (Remote) - [Engineering Lead]( at The Washington Post (Washington, DC) --------------------------------------------------------------- 10. Recent Smashing Articles - [Magical SVG Techniques]( - [Performance Game Changer: Browser Back/Forward Cache]( - [How To Give Effective Feedback Remotely]( - [Resilience, Flexibility And Immediacy: Working With Headless Systems]( --------------------------------------------------------------- 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]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](