Smashing Newsletter #285: JavaScript Edition

With clean and tidy JavaScript, vanilla JavaScript snippets, async JavaScript, architecture of large applications, Puppeteer and Playwright. Issue #285 • Tue, Jan. 26, 2021 • [View in the browser]( [Smashing Newsletter]( 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](. [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]( --------------------------------------------------------------- Table of Contents 1. [Vanilla JavaScript Code Snippets](#a1) 2. [Getting To Grips With Asynchronous JavaScript](#a2) 3. [Upcoming Front-End & UX Workshops](#a3) 4. [Improving Performance With Modern JavaScript](#a4) 5. [Learn Puppeteer And Playwright](#a5) 6. [Designing Very Large JavaScript Applications](#a6) 7. [Writing Clean, Reusable Code](#a7) 8. [New On Smashing Job Board](#a8) 9. [Our Current Most Popular Articles](#a9) --------------------------------------------------------------- #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. [Vanilla JavaScript Code Snippets]( [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. [Asynchronous JavaScript cheatsheet]( 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. [Smashing Online Workshops]( 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]( [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. [Learn Puppeteer and Playwright]( 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 [Northwestern: Online Master’s 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. [Designing Very Large JavaScript Applications]( 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 [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. [Clean Code]( 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 [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]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](