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:
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
10. Recent Smashing Articles
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
0 Komentar untuk "All Good Things JavaScript"