Playwright now offers a UI mode
#631 — March 24, 2023
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.
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.
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.
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.
📢 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.
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.
↳ Easy to maintain documentation site generator.
↳ Headless Chrome Node.js API.
↳ Lightweight cross-platform desktop app framework.
📒 Articles & Tutorials
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
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.
▶ A Pinia Crash Course for Beginners — Pinia is a store / state management solution for Vue that does believe in pineapple on pizza.
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.
🚀 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.
Automatic npm Publishing with GitHub Actions and Granular Tokens
Make Sure You Do This Before Switching to Signals in Angular
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).
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.
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.
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.
eslint-formatter-pretty 5.0: Pretty ESLint Formatter — Nicer output than the default. Sort results by severity. Get stylized inline code blocks, and more.
AWS JWT Verify: Verify JWTs Signed by Amazon Cognito — In both Node.js and the browser.
Amazon Web Services
Software Engineer (Backend) — Join our “kick ass” team. Our software team operates from 17 countries and we’re always looking for more exceptional engineers.
🧑💻 Got a job listing to share? Here’s how.
↳ Mature HTML5 game engine.
↳ Markdown parser and compiler. (Demo.)
↳ Fast Virtual DOM to make React faster.
↳ 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.