JavaScript Icon

JavaScript

Tracking all things JavaScript
1189 Stories
All Topics

Tobias Bieniek mainmatter.com

node_modules: How one character saved 50 GB of disk space

Tobias Bieniek:

Have you ever worked with JavaScript? Have you been annoyed by the three hundred copies of left-pad in all of the node_modules folders on your disk? Would you prefer if all of your projects shared their node_modules folders instead of each getting their own copy?

The single character that saved him all that space? The p in pnpm

JS Party JS Party #245

Launching Platformatic DB 🚀

Patformatic co-founders Matteo Collina & Luca Maraschi join Amal & Chris to discuss their just-announced (and we mean just announced) open source database tool: Platformatic DB!

It’s a daemon that can turn any PostgreSQL, MySQL, MariaDB, or SQLite database into a REST and GraphQL endpoint. What makes it special is that it allows massive customization thanks to the flexibility of Fastify plugins.

HTML enhance.dev

Enhance is a web standards-based HTML framework

I love that people are bringing HTML back to the forefront:

Our mission is to enable anyone to build multi-page dynamic web apps while staying as close to the platform as possible. Enhance fills in the gaps to make building for the backend, and the browser a seamless experience for web authors and consumers.

Modern JavaScript frameworks bring more problems than they solve; recreating native web platform features adding unnecessary weight and complexity, which is challenging to unravel.

Enhance provides a dependable foundation built on standards-based web platform features, allowing developers to create web applications that are lightweight, flexible, and future-proof.

JavaScript github.com

A web-based implementation of The Matrix's digital rain

This project is a web implementation of the raining green code seen in the Matrix franchise. It’s built right on top of the upcoming graphics API WebGPU, but falls back to the functional WebGL wrapper, REGL; its previous Three.js version is maintained in a separate branch.

I used to spend countless hours in college scouring the web for the best digital rain screen saver for my laptop. Sounds like the author is with me on that:

The number of implementations out there of this effect is a testament to the size of the film’s impact on popular culture. For decades, I’ve enjoyed searching for and comparing them from time to time. That’s probably how you arrived here— it’s fun to see what kinds of solutions different people come up with to a problem, when the process is purely recreational and its success is subjective.

This one’s really nice and even has a 3D mode. The README says it’s “made with love”, but from what I can tell it’s almost entirely JavaScript. 😜

A web-based implementation of The Matrix's digital rain

JS Party JS Party #244

The spicy React debate show 🌶️

We’re back with another spicy YepNope debate! This time, Amelia and KBall are arguing that there’s real value to (continue) using React in 2022, while Amal and special guest (and author of the post which stemmed the whole debate) Josh Collinsworth argue that React’s time leading innovation has passed. Of course, the stance each panelist is taking is assigned ahead of time. Is that how they really feel? Tune in and find out!

Tan Li Hau youtube.com

Build your own Svelte

Tan Li Hau gave this talk at Front Conference, but the videos won’t be out for a year (!), so he gave the talk again and posted it to his YouTube channel. Here’s how he described the video to us:

Watch the <1 hour video to write a simplified Svelte compiler <300 lines of code is amazing! Easy to follow, inspiring, and gives a great overview of how to write a compiler.

Josh Collinsworth joshcollinsworth.com

"React isn't great at anything except being popular"

Josh Collinsworth (an unapologetic React non-fan) writes on his blog about the ubiquity of React:

I don’t know what the future of front-end looks like. Nobody really does. But it’s a very safe bet that React will continue to be the thing for a very long time.

If you’re learning front-end development in the hopes of getting a job, or trying to level up your career, and React is a knowledge gap for you, it seems like the safest bet you could make. React isn’t going anywhere anytime soon. That said, however…

But why does React remain on top?

Because we don’t always value the strongest choice as much as we value consensus. (In fact, you could make an argument that consensus is the strongest choice, in many ways.)

React keeps getting picked…because React keeps getting picked.

But there’s a ton more to unpack. Josh got into the details on the best choice for the job, covering: Performance, learning curve, bundle size, scalability, community and support, financial backing, hireability, and developer experience.

Should I spoil it for you? Nah. Read Josh’s words for the full story.

Natasha Lekh crawlee.dev

Crawlee is a web scraping & browser automation library for Node.js

Here’s Natasha Lekh from Apify describing the project:

This project really is a culmination of 4 years of work trying to make the best library for web scraping in production. Web scraping is a very dynamic environment and what works today might not work tomorrow, so we at Apify had to go through a lot of trial and error to figure out the most reliable and convenient ways of crawling the web and scraping data. We hope that we finally cracked it and that now many developers will enjoy working with our new library and it will make their scrapers more reliable and time to production faster.

I like how it starts with simple HTTP-based scraping, but can switch to browser-based automation when a site has JavaScript rendering. I don’t love the built-in proxy rotation features. Not because they’re bad, per se, but because they make spammers lives easier…

JavaScript preactjs.com

The Preact team introduces Signals

The Preact team dropped a new state management solution on us:

Signals are a way of expressing state that ensure apps stay fast regardless of how complex they get. Signals are based on reactive principles and provide excellent developer ergonomics, with a unique implementation optimized for Virtual DOM.

Adding Signals to your Preact app only adds 1.6kB to your bundle size. So what’s the big idea?

The main idea behind signals is that instead of passing a value directly through the component tree, we pass a signal object containing the value (similar to a ref). When a signal’s value changes, the signal itself stays the same. As a result, signals can be updated without re-rendering the components they’ve been passed through, since components see the signal and not its value. This lets us skip all of the expensive work of rendering components and jump immediately to the specific components in the tree that actually access the signal’s value.

HTML web.dev

A course that breaks down every aspect of modern PWA development

This course from the folks at web.dev targets beginners and advanced developers alike.

You’ll learn PWA fundamentals like the Web App Manifest, service workers, how to design with an app in mind, what’s different from a classic web app, how to use other tools to test and debug your PWA. After these fundamentals, you’ll learn about integration with the platform and operating system, how to enhance your PWA’s installation and usage experience, and how to offer an offline experience.

JS Party JS Party #240

Bringing the vibe

Tejas Kumar joins Jerod & KBall for a wide-ranging convo about React Suspense, human skills, and the four pillars of impact for web engineers. We also discuss the news in “Story of the Week” and give a few quick shout outs to a must-read book and a great new publishing platform for lead devs.

Join Tejas at React Brussels on October 14, 2022! Get 30% off your ticket when you use code JSPARTYTIME at checkout and follow @JSPartyFM on Twitter for giveaway details.

Lőrik Levente levminer.com

Tauri vs Electron with a real world app

Lőrik Levente shared a real world comparrison between Tauri and Electron using a real application he’s building called Authme. The comparrison focused on all the major things you’d care about — Bundle size, startup time, performance, app backend, rendering your app, security, auto update, and developer experience.

Also, see this tweet from swyx.

Tauri vs Electron results are consistently mindblowing

App: 97% smaller
Startup: 50% faster
RAM: 33% less
Security: priceless

So, is Electron is being replaced? Lőrik says yes, but…

Tauri vs Electron with a real world app

iOS krausefx.com

See what JS commands get injected through an in-app browser on iOS

Felix Krause built an iOS browser app that lists the JavaScript commands executed by the iOS app rendering the page. Use it like this:

  1. Open an app you want to analyze
  2. Share the URL somewhere inside the app (e.g. send a DM to a friend, or post to your feed)
  3. Tap on the link inside the app to open it
  4. Read the report on the screen

His findings after using this for a bit are… concerning. Especially TikTok.

React mailing.run

Build + test + send emails with React

We’re longtime users of Action Mailer and wanted something similar for our TypeScript/React apps. We didn’t find anything, so we decided to build Mailing.

We added some features that we would’ve liked in Action Mailer, like a mobile toggle (with hotkeys), and the ability to send a test email from the browser while developing. We went all in on MJML so that we (almost) never have to think about email clients or nested tables :)

Plays well with the popular JS web frameworks, too. Demo video here.

0:00 / 0:00