#606 — September 16, 2022
Liang Gong and Glenn Conner (Meta)
💡 Nolan Lawson’s Fuite is another, smaller, tool worth considering in this space.
Frontend Masters sponsor
Best Practices for Creating a Modern npm Package — A step-by-step “as of 2022” walkthrough of creating your own npm package using current best practices. It’s very thorough and certainly worth revisiting, even if you’ve built a package already. As always, though, there’s more than one way to do it, and other tools like np can be brought into the mix as needed.
Brian Clark (Snyk)
Node.js is getting some security releases on September 22 across all supported lines due to multiple issues (some of ‘high’ severity).
Talking of Node, 📅 Nodeconf EU 2022 is taking place on October 3-5 in Ireland and they’ve offered a discount code of NodeWeekly2022 for readers. (Note: We have no financial connection with them.)
Spacetime 7.2 – Lightweight timezone library.
React Router 6.4
↳ Now with backported Remix features.
↳ Fast, low overhead web framework for Node.
↳ 3KB React alternative with the same API.
↳ Easy testing for anything in a browser.
📒 Articles & Tutorials
The Seventh Way to Call a Function Without Parentheses — If you’re surprised that there were even six ways, this is for you. These are almost entirely ‘tricks’ but ones that can be important when it comes to security or sanitizing user supplied code.
What’s New with HTML Forms in 2022? — Some useful additions to working with forms that you might have missed…
Snyk Finds PyPi Malware That Steals Discord & Roblox Credential and Payment Info — Read about the latest PyPi malware found by the Snyk security research team stealing Discord & Roblox payment info.
The Secret of Successfully Using Multi Window WebGL Canvas — This is technical and most of us won’t need to dig so deep, but it’s a neat exploration of using an offscreen canvas to render using separate worker contexts – these can then be used in other tabs or browser windows.
Why the type=”number” Input is the Worst Input — Think that web form has got your number? If you used input type=”number”, you may be surprised to find that it doesn’t.
useSyncExternalStore: The Underrated React Hook? — A hook for subscribing to external data sources. But did you know it can also be used to stop over-returning React hooks triggering needless re-renders?
Badmus Kola beginner
Darren Jones beginner
🛠 Code & Tools
npm-check-updates: Update package.json Dependencies to the Latest Versions — That is, as opposed to the specified versions. A particularly neat feature is the -i interactive mode so you can look at potential upgrades and then action them one by one.
❤️ Loving console.log Is Easy, but hate 😡 Losing Context to View Messy Output — Developer productivity tools Wallaby.js, Quokka.js, and Console Ninja (coming soon) show console.log values and errors right next to your code.
Theatre.js 0.5: Hackable Motion Design for the Web — Can be used both programmatically and visually to animate 3D objects created with things like Three.js, React Three Fiber, HTML/SVG, or even to ‘animate’ variable values. v0.5 introduces 3D scene editing and complex keyframing. Docs and GitHub repo.
Code Capsules sponsor
⚡️ OTHER QUICK RELEASES:
React Grid Gallery 1.0
↳ Justified image gallery component.
↳ ES5.1 interpreter written in pure JS.
↳ Concatenate audio files with the Web Audio API.
↳ React table component with sorting, filtering, etc.
↳ Graphviz DOT rendering and animated transitions.
Senior UI Dev — Join us and innovate with MicroFrontends, custom Node tools, build systems (Webpack/Github Actions), TypeScript, React, and more with a11y and DX in mind.
A LITTLE BIT OF FUN AT THE END: