Smashing Newsletter: Issue #285

Editorial

JavaScript has gone through quite a journey over the last decades. From being seen as irrelevant, clunky and slow, these days it’s difficult to imagine a modern project that doesn’t use JavaScript in some way. And so as time passes by, the amount of JavaScript grows. However, with it comes a significant cost, and that cost is performance.

Web Almanac 2.0 JavaScript — We spend quite a bit of time discussing new frameworks, but a vast majority of the web is still running on good ol’ jQuery. From Web Almanac 2020.

To keep our websites and apps accessible and fast, we need to tame JavaScript, and that requires us to focus on a good front-end architecture, avoiding monolithic bundles, running scripting off the main thread whenever possible and keeping JavaScript light and tidy. In this newsletter, we’ll look into everything around JavaScript to do just that.

Ah, and if you spend more of your time around CSS or UI/UX these days (ahem, ahem), perhaps forward this newsletter issue to a friend who might use some of the resources mentioned there. Happy coding, everyone! :)

— Vitaly (@smashingmag)

Vanilla JavaScript Code Snippets
Getting To Grips With Asynchronous JavaScript
Upcoming Front-End & UX Workshops
Improving Performance With Modern JavaScript
Learn Puppeteer And Playwright
Designing Very Large JavaScript Applications
Writing Clean, Reusable Code

1. Vanilla JavaScript Code Snippets

Every now and again we have to deal with legacy code, wading through dark and eerie sides of the code base, often with a vague, ambiguous and unsettling documentation — if any is provided at all. In such cases, refactoring the component seems inevitable. And so we rebuild the component, and often rely on pieces that our framework provides. However, as JavaScript is expensive, we might want to use plain JavaScript instead. Fortunately, there is no shortage in tooling to do just that.

HTML Dom provides over 120 bulletproof, plain JavaScript snippets for everything from toggling password visibility to creating resizable split views — all supported for modern browsers and IE11+.

The Vanilla JavaScript Toolkit provides a collection of JavaScript methods, helper functions, plugins, boilerplates, polyfills, and learning resources. Also, Chris Ferdinandi runs a Vanilla JS Academy, with plenty of daily developer tips on Vanilla JS sent in his newsletter.

Finally, if you find yourself in the land of jQuery, PlainJS, You Might Not Need jQuery and You Don’t Need jQuery feature a repository of code snippets for everything from UI and inputs to media, navigation and visual effects (with use cases not just for jQuery, but pretty much any legacy code). (vf)

2. Getting To Grips With Asynchronous JavaScript

Are you struggling with asynchronous programming in JavaScript? Dr. Axel Rauschmayer’s book JavaScript for impatient programmers has got your back. Written for newcomers who know how to code but don’t have a prior knowledge of JavaScript yet, it gets you started with modern JavaScript quickly. A preview with all essential chapters is available for free as HTML.

The book tackles asynchronous programming in four parts: Starting with the foundations, it goes on to explore Promises, async functions, and, finally, asynchronous iteration. Need a handy cheatsheet to keep in front of you? Check out the cheatsheet which the folks at Frontend Armory offer for free download. (cm)

3. Upcoming Front-End & UX Workshops

JavaScript is awesome, and we can get better at it by learning together. So as it happens, we have some friendly online front-end & UX workshops dedicated to SVG animation, design systems, HTML email, interface design and web performance.

Our workshops are packed with practical examples, video recordings and friendly Q&A sessions. Each and every workshop has been a truly smashing experience with wonderful folks from all over the world. There are still some early-birds left, with a lil’ friendly discount. Perhaps you’d like to join us and recommend to others — just sayin’! ;-)

4. Improving Performance With Modern JavaScript

Legacy JavaScript is one of the biggest performance bottlenecks, being typically 20% larger and slower than equivalent modern code. Library code often brings along an even higher legacy overhead that could be avoided. But how much faster would your site be if you switched to modern JavaScript syntax?

EStimator helps you find out. Enter a URL, and the browser-based tool calculates the size and performance improvement your site could achive. If you want to make the switch, Houssein Djirdeh and Jason Miller summarized several approaches to turning on modern JavaScript dependencies and output. (cm)

5. Learn Puppeteer And Playwright

The Node-library Puppeteer automates a lot of the things that you can do manually in the browser: testing, taking screenshots, scraping websites for data, automating interaction of web pages — all of this with a focus on performance, security, and stability. Playwright builds upon this experience and broadens the use cases even further.

A great place to learn how to make full use of the duo’s power is theheadless.dev. The community-driven knowledge base shares tips, tricks, and in-depth guides for learning headless browser automation — from scraping data that is only available behind a login wall to generating PDFs from web pages and measuring page performance. New guides are added regularly. (cm)

6. Designing Very Large JavaScript Applications

What does it take to design very large JavaScript applications? Drawing from his experience of building JavaScript infrastructure that is used by Google web apps, Malte Ubl attempts to make the complex task more straightforward for fellow developers.

In his post “Designing very large (JavaScript) applications”, Malte dives deep into large applications, the things they have in common, and what you need to think about when building them. Apart from the technical perspective, he also considers the human side: The way to get to the final result is to use empathy and think with the engineers on your team about how they will use your APIs and your abstractions. A good read. (cm)

7. Writing Clean, Reusable Code

No one likes to deal with badly written code, but in reality it happens all too often. To help us do better, Ryan McDermott adapted the software engineering principles from Robert C. Martin’s book Clean Code for JavaScript. The result is a practical guide to producing readable, reusable, and refactorable software in JavaScript.

From making variables meaningful and explanatory to limiting the amount of functions and dealing with error handling, the guide compares good and bad code examples. Of course, not every principle has to be strictly followed, but the guidelines help you assess the quality of the JavaScript code you and your team produce. (cm)

January 26, 2021 Smashing Newsletter: Issue #285

Previous Issues