Sveiki Smashing Friends,

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)

From our sponsor

Cloudways: Your Next-Gen Cloud Hosting Platform For Better UX And Performance

Supercharged cloud hosting helps you improve your user experience. Join 79,727+ businesses that trust Cloudways as their managed hosting platform for incredible speed, security & 24/7 expert support. Use promo code BFCM4030 for 40% off for 4 months and 30 FREE migrations. Start your free trial today!

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.

With online workshops, we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are.

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
  8h-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)

From our sponsor

Northwestern’s Online MS in Information Design and Strategy

Prepare for a range of dynamic communication roles and build the skills needed to lead communication strategy, translate complex data, and drive user interactions. Choose from specializations in content strategy, UX/UI, communication with data, and learning design. Learn more.

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)

9. New On Smashing Job Board

• Senior Designer
  at DUMBO (Cologne, Germany)
• Web Developer m*w*d
  at 4wd media GmbH & Co. KG (Darmstadt, Germany)
• Design System Builder / DesignOps Specialist
  at zooom productions GK (Tokyo / Remote)

10. Recent Smashing Articles

• A Guide To Image Optimization On Jamstack Sites
• Smashing Podcast Episode 54 With Stéphanie Walter: What Is User Journey Mapping?
• Using Automated Test Results To Improve Accessibility
• A Guide To Keyboard Accessibility: HTML And CSS (Part 1)
• A Guide To Keyboard Accessibility: JavaScript (Part 2)
• Read more articles on Smashing Magazine →

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).

Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.

Follow us on Twitter • Join us on Facebook