November 22, 2022 Smashing Newsletter: Issue #380
This newsletter issue was sent out to 216,217 subscribers on Tuesday, November 22, 2022.
Editorial
Today, we’d love to feature a few useful front-end articles and tools for front-end developers and engineers. From finding memory leaks in JavaScript and understanding how JavaScript works under the hood to Internationalization API and a deep-dive into browser cookies.
We’ve just announced SmashingConf Front-End , our brand new SmashingConf in SF on May 23–26, 2023 — entirely focused on state-of-the-art front-end. From accessibility and future-proof CSS to well-crafted JavaScript and cutting-edge web performance. Get your early-bird-ticket!
And if you are into design patterns, accessibility and design systems, we’ve also announced SmashingConf Freiburg , taking place at our hometown Freiburg on Sep 4–6, 2023 — with new adventures into everything front-end, from code to design. We’d love to see you there!
— Vitaly (@vitalyf)
1. JavaScript Array Methods Cheatsheet
JavaScript array methods can be overwhelming. How can you make sure you’re using the right approach? How do you figure out which array to use and when? While a lot of array methods cheatsheets list all array methods, James Sinclair chose a different approach.
Instead of listing all available array methods, James’ “Civilised Guide to JavaScript Array Methods” starts with the problem you’re trying to solve and then gently guides you to the right method. You can get the guide by subscribing to updates from James which he sends out when he publishes new posts or to share quick tips and best practices. (cm)
1. Understanding Browser Cookies
Have you ever dealt with cookies other than clicking those cookie notifications you get when visiting a website? If not, Hui Jing Chen wrote a great introduction to help you take your first steps in the world of browser cookies.
In her blog post, Hui Jing explores everything you need to know about how browser cookies work. She dives deeper into what cookies do, how cookie attributes influence a cookie’s behavior, and, of course, how to create a cookie. The focus lies on cookies on the client side. (cm)
3. Auditing And Sandboxing Made Easy
If you’re looking for an easy auditing and sandboxing solution to keep your project safe from hand-crafted, zero-day vulnerabilities, Sandworm might be for you. Sandworm watches lower-level APIs like the Node VM and browser APIs like DOM manipulation, fetch, etc., and lets you know when an npm package unexpectedly accesses these APIs. The analysis happens dynamically in the runtime, so Sandworm knows what happens when it happens.
Another useful tool to help reduce security risks comes from Snyk. Their dependency-check checks which modules you use in your code and makes sure they are listed as dependencies in your package.json. To ensure you’re using the healthiest npm packages, it scans all packages for vulnerabilities and provides automated fix advice.
Speaking of healthy npm packages: Snyk Advisor makes it easy to search and compare over 1 million open-source packages to find the healthiest package based on criteria like security, popularity, maintenance, and community. (cm)
4. Upcoming Online Workshops
That’s right! We run online workshops on front-end and design, be it accessibility, performance, or design patterns. 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.
As always, here’s an overview of our upcoming workshops:
- Designing Better Products Masterclass UX
with Stéphanie Walter. Nov 28 – Dec 12 - Building Modern HTML Emails Dev
with Rémi Parmentier. Nov 30 – Dec 8 - Advanced Next.js Masterclass Dev
with Átila Fassina. Nov 30 – Dec 15 - Successful Design Systems Workflow
with Brad Frost. Jan 10–24 - Universal Principles of Typography Masterclass UX
with Elliot Jay Stocks. March 2–16 - Smart Interface Design Patterns Video Course UX
9h-video + UX training on interface design with Vitaly Friedman - Jump to all workshops →
5. JavaScript Visualized
JavaScript can be confusing. To make complicated JavaScript concepts easier to grasp, Lydia Hallie decided to take a visual approach to explaining them — with GIFs.
Lydia’s seven-part article series JavaScript Visualized visualizes event loop, hoisting, scope, the JavaScript engine, prototypal inheritance, generators and iterators, as well as promises and async/await. No matter if you’ve come across one of the terms after googling an annoying bug and want to make sense of it for good or if you’re a visual learner who needs a practical example to better understand the concepts, Lydia’s guide has got your back. (cm)
6. Language-Sensitive Formatting
11/29/2022, 7:00:00 PM or 29.11.2022, 19:00:00? €100.00 or 100,00 €? There’s no right or wrong, only local differences depending on language and country. That’s where the ECMAScript Internationalization API comes in. Available under the namespace Intl in JavaScript, it provides language-sensitive functionality to help us deal with string formatting, number formatting, and date and time formatting.
A handy interactive tool that makes the API a lot more comprehensible comes from Jesper Orb: Intl Explorer. Choose a formatter from the menu or visit the playground, and you can start experimenting with the API. Whether it’s currency, date, time, plural rules, collators, or segmenters, the tool helps you find the output your project calls for. To use it, you can copy-and-paste the code snippet to your clipboard with just a click. One for the bookmarks. (cm)
7. Finding Memory Leaks
Performance issues in web apps are noticed immediately by users. Not so memory leaks. They aren’t immediately perceivable but eat up a chunk of memory at a time, making subsequent interactions slower and less responsive. And because they are so hard to spot, root-causing them in production is difficult, too.
To help developers address this issue, the Engineering team at Meta built MemLab, an open-source memory testing framework that automates JavaScript memory leak detection. MemLab finds memory leaks by running a headless browser through predefined test scenarios and analyzing the JavaScript heap snapshots. If you want to give it a try, you can install MemLab through npm or build it from the GitHub repo. (cm)
8. useMemo And useCallback Explained
Are you struggling to make sense of useMemo and useCallback? No worries, you’re not alone. Josh W. Comeau helps clear up the confusion.
In his blog post “Understanding useMemo and useCallback,” Josh dives deep into how useMemo and useCallback help us optimize re-renders. He explains in detail how they work, why they are useful, and how to get the most out of them. You’ll also learn more about potential use cases. A comprehensive explanation with lots of practical examples and strategies. (cm)
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).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.