#631 — March 24, 2023
JavaScript Weekly
Speeding Up the JavaScript Ecosystem: npm Scripts — The latest in what has been a fascinating series on finding ‘low hanging fruit’ when it comes to performance in the JavaScript world. The author explains it best himself:
“‘npm scripts’ are executed by JavaScript developers … all the time. Despite their high usage they are not particularly well optimized and add about 400ms of overhead. In this article we were able to bring that down to ~22ms.”
What Marvin does here is a valuable skill for all developers to pick up, and you can enjoy more by going back to the start.
Marvin Hagemeister
Playwright v1.32 – Now with UI Mode — The popular Web testing and automation framework is taking more steps toward the ground currently served by tools like Cypress by offering a ‘UI mode’ that lets you explore, run and debug tests in a UI environment, complete with watch mode. ▶️ This video provides a good introduction.
Microsoft
A Grid Component with All the Features & Great Performance — Try our powerful JS data grid component which lets you edit, sort, group and filter datasets with fantastic performance. Includes a TreeGrid, API docs and plenty of demos. Seamless integration with React, Angular & Vue apps.
Bryntum sponsor
Why We Added package.json Support to Deno — Deno shares some provenance with Node.js but till recently it hadn’t focused on supporting Node features like npm modules. But with Node and npm compatibility beginning to improve, the team has faced questions about the runtime’s priorities. Ryan Dahl explains more about their thinking here.
Ryan Dahl
???? In other Deno news, Deno 1.32 has been released with… improved package.json support, and more.
How to Start a React Project in 2023 — There are lots of ways, but this well-regarded author explains the pros and cons of a few approaches, and gives you a few options targeting specific use cases you might have.
Robin Wieruch
IN BRIEF:
GitHub had to update its RSA SSH host key today so you may see security related warnings when pushing and cloning. It’s easy to fix, but check the new fingerprint matches – it’s for your own security.
The New Stack caught up with Svelte’s Rich Harris on SvelteKit and what’s coming for Svelte 4.
The React team shared some cutting edge updates on what they’re working on including React Server Components and an optimizing compiler.
If you were experiencing errors on the official Node site last week, here’s the (detailed) post mortem of why. Config errors and inappropriate caching, mostly.
✨ Did you know there’s a market in fake GitHub stars? Some developers analyzed some repos to learn more about it.
???? Congratulations to Lea Verou on her TC39 appointment9. Her efforts to push the Web forward are legendary. Prism is one project you may be aware of.
Make your opinions known on what should be in the next version of Vite.
RELEASES:
Docusaurus 2.4
↳ Easy to maintain documentation site generator.
Puppeteer 19.8
↳ Headless Chrome Node.js API.
Neutralinojs 4.11
↳ Lightweight cross-platform desktop app framework.
???? Articles & Tutorials
Buying a Hard-to-Get Bicycle using Playwright — An unusual use case for JavaScript, Playwright, and GitHub Actions, but Maciek managed to buy his bike.
Maciek Palmowski
Snyk Top 10: JavaScript OSS Vulnerabilities — Dive into the most prevalent critical and high open source vulnerabilities found by Snyk scans of JavaScript apps in 2022.
Snyk sponsor
The ‘End’ of Front-End Development? — A recent narrative doing the rounds suggests that large language models like GPT-4 (or even tools like Copilot X) could soon put some developers out of a job — however, Josh is “optimistic about what these AI advancements mean for the future of software development”.
Josh W. Comeau
In related news, Eric Elliott put ChatGPT through its paces to see if it would make for a good JavaScript tutor. It did well, though with mixed results.
Migrating from ts-node to Bun — A look at adopting performance-oriented Bun when you’re used to using TypeScript with Node.js. John runs us through porting a console app from the ts-node approach over to Bun — “a pretty easy process,” he says.
John Reilly
▶ A Pinia Crash Course for Beginners — Pinia is a store / state management solution for Vue that does believe in pineapple on pizza.
Alexander Gekov
A Practical Guide to Getting Started with Astro — An extensive walkthrough of Astro that covers all the topics you’ll need to get you started.
Mojtaba Seyedi
???? Test Website Speed Continuously and Rank Higher In Google — You need a fast website to make users happy and meet Google’s Core Web Vitals metrics. Test and optimize with DebugBear.
DebugBear sponsor
Automatic npm Publishing with GitHub Actions and Granular Tokens
Tim Perry
Make Sure You Do This Before Switching to Signals in Angular
Jordan Powell
Six CSS Snippets Every Developer Should Know
Adam Argyle (Google)
???? Code & Tools
trace.cafe: Easy Webperf Trace Sharing — A quick way to share a performance profile saved from your DevTools, available for up to 90 days with the DevTools perf panel embedded (see example).
paul irish
VueUse: A Collection of Vue Composition Utilities — With over 200 functions targeting both Vue 2 and 3, there’ll be something in this suite of Composition API-based utility functions for you, whether it’s working with state, browser capabilities, animations, Electron, Firebase, and more.
Anthony Fu
Don’t Let Your Issue Tracker Be a Four-Letter Word. Use Shortcut
Shortcut (formerly Clubhouse.io) sponsor
OTPAuth: One Time Password (HOTP/TOTP) Library — When you log in to a site that uses 2FA and you’re asked for some digits from an authentication app, that’s probably a Time-based One-Time Password (or TOTP). This library for Node, Deno, Bun and the browser lets you work with TOTPs and HOTPs from JS.
Héctor Molinero Fernández
Recharts 2.5: Chart Library Built with React and D3 — Easy to deploy with declarative components, native SVG support, and lightweight dependency on D3. Line, bar, scatter, composed, pie, and radar charts are offered. There are lots of examples, complete with code.
recharts
DOCX 8.0: Generate Word .docx Files from JavaScript — The code to lay out documents is verbose but there’s a lot of functionality. Here’s a CodePen example and release notes – GitHub repo.
Dolan Miu
SvHighlight: Code Syntax Highlighter for Svelte — Powered by Highlight.js, it includes a blurring feature to focus attention on specific areas of code and you an customize it with Tailwind. Try the interactive examples to see the effect.
SvHighlight
eslint-formatter-pretty 5.0: Pretty ESLint Formatter — Nicer output than the default. Sort results by severity. Get stylized inline code blocks, and more.
Sindre Sorhus
AWS JWT Verify: Verify JWTs Signed by Amazon Cognito — In both Node.js and the browser.
Amazon Web Services
???? Jobs
Software Engineer (Backend) — Join our “kick ass” team. Our software team operates from 17 countries and we’re always looking for more exceptional engineers.
Sticker Mule
Find JavaScript Jobs with Hired — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.
Hired
???????? Got a job listing to share? Here’s how.
melonJS 15.0
↳ Mature HTML5 game engine.
Marked 4.3
↳ Markdown parser and compiler. (Demo.)
v8go 0.9
↳ Execute JavaScript from Go(lang).
Million 2.1
↳ Fast Virtual DOM to make React faster.
Partytown 0.7.6
↳ Take third-party scripts off the main thread.
???? Bonus Item
Make Bookmarklets — Create and test bookmarklets directly in the browser. Makes an irritating task slightly easier if you need to do it.
Cullan Luther