Smashing Newsletter #292: JavaScript, Bundlers, Frameworks

With vanilla JavaScript snippets, bundlers, on migrating JavaScript to TypeScript, and how to choose a JavaScript framework. Issue #292 Tue, March 16, 2021 View in the browser 

Smashing Newsletter

G’day Friends,

If you are writing JavaScript every day, perhaps you’ll find a couple of useful JavaScript gems in this newsletter issue. We’ve collected some useful resources for you to keep close — whether you are new to JavaScript, or found your way through the trenches of legacy code over the decades.

Not many things are always right or wrong in the JavaScript universe. What’s the right bundler for your project? What’s the right JavaScript framework (if you need one)? Where do you start when migrating to TypeScript? Plus, nobody has ever complained about reliable JavaScript-one-liners for tedious regular tasks. So, let’s dive in!

Ah, and just before we head there, perhaps take a look at our upcoming React Performance Masterclass, along with a few other friendly online workshops on front-end & UX on everything from web performance to design systems. Or perhaps kindly forward it to your friends — we’d sincerely appreciate it.

Happy JavaScripting!
— Vitaly (@smashingmag)


1. What’s The Right Bundling Tool?

Most of us use one or the other bundler for our assets, but is it fast and flexible enough? Does it support features that other bundlers can do? And does it actually matter? Well, it might. Tooling.Report runs a suite of build tool tests — configuration files created to specifically handle a feature — and evaluates how well bundlers deal with these particular issues. The configuration files are tested in Browserify, Parcel, Rollup and Webpack.

What’s The Right JavaScript Bundle?

But perhaps even more useful is a comparison table of all bundlers, highlighting whether some of the features that you might be looking for are actually available in the bundlers. You can dive into code-splitting features, hashing, importing modules, transformations, output module formats and how non-JavaScript resources are managed. A fantastic little reference tool that’s worth keeping nearby. And it would be fantastic to see new bundlers such as Snowpack and Vite joining the report as well. (vf)


2. Picking The Right JavaScript Framework

Just like with bundlers, there are plenty of options when choosing a new framework. But do you need one? And if so, how do you pick the right one? Sacha Greif’s 12-Points-Checklist highlights 12 things to keep in mind when evaluating any new JavaScript library. Most notably, features, performance, learning curve, compatibility and track record.

Picking The Right JavaScript Framework

Perf-Track tracks framework performance at scale. It basically tracks the performance in terms of Core Web Vitals for Angular, React, Vue, Polymer, Preact, Ember, Svelte and AMP — on mobile and on desktop. The data set is currently still from 2020, but it gives us some insights into how well sites with these frameworks perform in the wild. For example, React with Gatsby perform better than the ones created with Create React app.

Tim Kadlec also conducted some research around that, comparing jQuery, Vue.js, Angular and React. The end result: the current crop of frameworks isn’t doing enough to prioritize less powerful devices and help to close the gap between desktop and mobile. These figures might give you at least some context to make a more informed decision. (vf)


From our sponsor

Do More For Clients. Expand Time With GoDaddy Pro, Free

Do More For Clients. Expand Time With GoDaddy Pro, Free
Boost efficiency and grow your business with GoDaddy Pro, a free set of site, client and project management tools. Manage and monitor all your clients’ sites from a single place, no matter where they’re hosted.


3. this vs. that

The deep knowledge of a subject really lies in understanding subtle differences between alternate ways of solving the same problem. How is nodeName different from tagName? How are the two increment operators different, e.g. ++value and value++? this vs. that is a friendly reference site for sorting out just this kind of questions.

this vs. that

The growing little repository by Phuoc Nguyen explains differences between properties and functions for JavaScript and TypeScript, as well as DOM, HTML and CSS. Also, Phuoc has released Single-Line-Of-Code, a repository of JavaScript utilities for everything around arrays, date and time, DOM manipulations, functions, numbers and objects. And if you need more snippets of vanilla JavaScript, we’ve got your back, too. (vf)


4. Upcoming Front-End & UX Workshops

JavaScript is awesome, and we can get better at it by learning together! So as it happens, we have a React Performance Masterclass with Ivan Akulov as well as a Dynamic CSS Masterclass workshop with Lea Verou coming up in a few weeks.

Smashing Online Events

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’! ;-)


5. JavaScript Operator Lookup

Let’s be honest, it can be hard to wrap one’s head around JavaScript operators, especially if you still have issues remembering which one does what exactly and need to make sense of all those ampersands, dashes, equal signs, and other glyphs that cross your way in JavaScript code. Josh W. Comeau built a little tool that helps you make sense of them all — for good.

Operator Lookup

The Operator Lookup lets you enter a JavaScript operator or pick one of the 50 provided operators to learn more about it. For every operator, Josh gives a brief explanation of what it does and shows how it is used in a code example. A friendly tool that makes operators feel a lot less daunting. (cm)


From our sponsor

Managing Apple Devices At Your Business Is Easier Than Ever

ad-jamf.png
Jamf Now is a one-stop, ultra-secure, couldn't-be-easier way to manage your team's Apple devices from one central platform that makes management tasks simple and affordable, so businesses can support their users; no IT experience required. Create your free account today!2030.gif?opens=1


6. Strategies For Migrating To TypeScript

Have you ever played with the thought of migrating your code base from JavaScript to TypeScript? If you rely on unreliable JavaScript libraries, have a large number of contributors, or a code base that has become difficult to maintain, the switch might be well worth it. But where to begin?

Strategies for migrating to TypeScript

Stephen Harfield has published a simple 10-mins read for migrating to TypeScript, a strategy to smoothly and efficiently migrate over to Typescript, including how to deal with styled components and how to move from JSX to TSX.

Axel Rauschmayer summarized three strategies for migrating to TypeScript. The first supports a mix of JavaScript and TypeScript files for your code base, so that you can switch more and more files to TypeScript bit by bit. Alternatively, you can continue to use plain JavaScript but you add type information via JSDoc comments until everything is fully typed.

Finally, for large projects, when migration may produce too many errors, snapshot-testing the TypeScript errors may be an option. A great overview to help find the strategy that best matches your project’s needs. (cm)


7. The JavaScript Developer’s Reading List

From books to videos to blog posts, the number of learning materials for web developers is huge, and while this variety is a great thing, it can also make it hard to decide which resources are actually worth your time. The JavaScript Developer’s Reading List makes your decision at least a bit easier.

The JavaScript Developer's Reading List

The reading list features hand-picked books and articles for JavaScript developers, broken down by technology/stack or concept. React and GraphQL are covered, Node.js, and Vue.js, just like design patterns in JavaScript, core concepts, software architecture, data structure, algorithms, and even soft skills. If you know of a resource that you feel is missing, you are welcome to contribute it to the list. Handy! (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. New On Smashing Job Board


9. Our Current Most Popular Articles


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

unsubscribe update preferences view in your browser


Older messages

New Live Workshops On Front-End & Design

Thursday, March 4, 2021

Live workshops on web performance, design systems, CSS with Lea Verou, Harry Roberts, Stephanie Eckles and Dan Mall. From front-end to design, to help your boost your skills online. Live workshops on

Smashing Newsletter #290: Email Productivity and Meetings

Tuesday, March 2, 2021

From email productivity to better code reviews, consistent color schemes and better scheduling. Issue #290 • Tue, March 2, 2021 • View in the browser Smashing Newsletter Ahoy Dear Friends, We all want

Smashing Newsletter #289: Front-End Accessibility

Tuesday, February 23, 2021

With accessible modals, tabs, autocomplete, icons, keyboard navigation and user preferences. Issue #289 • Tue, Feb. 23, 2021 • View in the browser 💨 Smashing Newsletter Howdy, Building accessible pages

Smashing Newsletter #288: Useful Little CSS/JS Helpers

Tuesday, February 16, 2021

With VS Code Settings sync, responsive debugging and blurred image placeholders. Don't forget to share your thanks and appreciation, dear folks! Issue #288 • Tue, Feb. 16, 2021 • View in the

Smashing Newsletter #287: Interface Design Edition

Tuesday, February 9, 2021

With useful Figma and Sketch Plugins, interface design tools, web typography helpers and generative doodles. Issue #287 • Tue, Feb. 9, 2021 • View in the browser 💨 Smashing Newsletter Meow, There were

Now Hiring: Designer at DMA (and More!)

Thursday, June 24, 2021

Visit our job board to view more opportunities. ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

🤯 Impressive Mobile UI Kits and more

Thursday, June 24, 2021

Fresh UpLabs Freebies? Yes Please 😉 Take a look at some fresh high-quality Freebies that have been handpicked for you by the UpLabs team this week. Only $9.99 for UpLabs Premium! Seize the opportunity,

✏ Splash Page Vs Landing Page, Frontend Toolbox, 10 JavaScript Keyboards, and more...

Thursday, June 24, 2021

Work at the Intersection of Data, Design, and Technology [ad] SPS.NORTHWESTERN.EDU Frontend Toolbox - A List of Handpicked Resources for Frontend Developers AKSHAY.ROCKS COMMENTS Splash Page Vs Landing

Grandma's Vases Are Causing a Buzz

Thursday, June 24, 2021

Plus, 15 interiors every design lover must see in person (image) Architectural Digest AD PRO Logo For Clients Enjoying the High Life, These Antiques Turned Cannabis Accessories Could Be a Big Hit Read

✏ Issue #492: Best New Fonts, What to Expect from Windows 11, Brave Search, 6 Levels of UX Maturity, and more…

Thursday, June 24, 2021

View this newsletter online Unsubscribe NEWSLETTER ISSUE #492 JUNE 24, 2021 20 Best New Fonts, June 2021 Welcome to the first in a new series of posts in which we take a look at the best new fonts

Universal Pictures, Surviving IDEO, Assassin’s Creed, Tipping Experience, Aspect-ratio

Thursday, June 24, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar June 24 2021 Universal Pictures Brand Identity Refinement

The Biggest Paint Trend News of 2021 (So Far)

Wednesday, June 23, 2021

Plus, 17 boldly beautiful dining room ideas from the pages of AD (image) Architectural Digest AD PRO Logo wooden drinks cabinet With Its IPO, Will 1stDibs Become the eBay of Luxury Design? Read More →

✏ How Performance Affects SEO, RWD in a Component World, Coded Illustrations, and more…

Wednesday, June 23, 2021

Work at the Intersection of Data, Design, and Technology [ad] SPS.NORTHWESTERN.EDU How your Website Performance Affects your SEO Rankings BOOTSTRAPBAY.COM COMMENTS Soft UI: Making Sense of the Latest

NYC Votes, Coded Illustrations, Motion & Accessibility, Custom Scrollbars, UCD

Wednesday, June 23, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar June 23 2021 Vela: Identity Design Process mattyow.medium.com

Issue 308

Wednesday, June 23, 2021

Information as more of the new rendering engine for Chromium lands. Explaining interesting CSS Grid examples, CSS masking, and serving sharp images. CSS Layout News Issue 308 By Rachel Andrew – 23 Jun