Dear Friend,

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.

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)

---

Table of Contents

1.	Vanilla JavaScript Code Snippets
2.	Getting To Grips With Asynchronous JavaScript
3.	Upcoming Front-End & UX Workshops
4.	Improving Performance With Modern JavaScript
5.	Learn Puppeteer And Playwright
6.	Designing Very Large JavaScript Applications
7.	Writing Clean, Reusable Code
8.	New On Smashing Job Board
9.	Our Current Most Popular Articles

---

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)

---

From our sponsor

Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy

Earn your master’s degree online.

---

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)

---

From our sponsor

The Collaborative CSV Template

Securely import, format, and merge CSV/XLS data. Zero code.

---

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)

---

From our sponsor

Coming Soon: Editor X’s Unmissable Online Event For Web Creators

Editor X, the advanced web design platform is holding an online event on Feb 4. Join to discover game-changing web design feature rollouts, watch a live demo with OFFF Barcelona and stay tuned for the after party. RSVP for the event →

---

8. New On Smashing Job Board

• Senior UX Product Designer
  at X-Team (US)
• Professor Of Practice In UI/UX Design
  at Michigan Technological University (US)
• Front End Developer
  at Convit GmbH (Cologne, DE)

---

9. Our Current Most Popular Articles

• From Design To Developer-Friendly React Code In Minutes With Anima
• How We Improved SmashingMag Performance
• Making Remote Work Work: Useful Tools And Resources

---

That’s All, Folks!

Wow, you’ve made it this far! We hope you’ve found at least one useful, practical tidbit that will help you get better at what you do. As you see, there are so many talented folks out there working on so many brilliant projects, and we’d sincerely appreciate it if you could help spread the word and give them all the credit they deserve!

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