Remixing a new way to build full-stack JavaScript apps

#​566 — November 26, 2021

Unsubscribe  |  Read on the Web

JavaScript Weekly

Remix: A Newly Open Sourced React-Based Framework for Web Apps— Remix has been around for over a year as ‘sponsorware’ but after picking up a lot of ardent supporters (and $3m of seed funding) the project has now been opened up. Bringing modern Web tech, tooling, and server-side rendering concepts together, there are a few things to check out if you're keen to learn more:

• The project's official ▶️ 50 second Apple-esque commercial/pitch.
• ▶️ Kent C Dodd's multi-hour tutorial walkthrough. Almost a 'course' in scope.
• An introduction to building a Remix app with Flavio Copes.
• A ▶️ seven minute review with Ahmad Awais.
• Want to play? You can get building a Remix app right away thanks to StackBlitz's WebContainers at remix.new.

Remix Team

New Course: Introduction to Next.js, The Full-Stack React Framework— Next.js is a complete framework built on top of React.js. You'll learn server-side rendering, static site generation, data fetching, code API endpoints, creating pages with the file system, add CSS modules, and more.

Frontend Masters sponsor

Vercel, Creator of Next.js, Raises $150M— There’s a lot of money in developer tooling lately, it seems, including for the stewards of the Next.js project which gains a fresh competitor, of sorts, this week in the shape of Remix (above).

Vercel

Prettier 2.5 Released: Now with TypeScript 4.5 and MDX v2 Support— If you’re a TypeScript user, this bump to the popular code formatting tool will be of particular interest to you.

Sosuke Suzuki

IN BRIEF:

• Why does npm run an obfuscated file that looks like malware, but isn't? It's a birthday related easter egg.

• Not JS specific but AWS has just made a big change to its 'free tier' that might save many of us low-end users several bucks each month.

RELEASES:

Chalk 5.0– Terminal string styling for Node.js.
ShareDB 2.2– Realtime database based on operational transformation.
Signature Pad 4.0– Canvas control for drawing signatures.
node-qrcode 1.5– Generate QR codes in Node apps.
ESLint 8.3.0– Flexible code auditing tool.
Espree 9.1– Esprima-compatible JS parser.
React Redux v8 Beta

📖 Tutorials, Opinions & Stories

The Unexpected Return of JS for Automation on macOS— A long time Mac expert reflects on what JavaScript offers folks who want to automate macOS versus AppleScript or Python before digging some of what you can do.

Armin Briegel

Introducing Svelte, and Comparing Svelte with React and Vue— If Svelte isn’t new to you, keep scrolling. But if you’re unsure what it’s about, this is a reasonable explanation of why you might use it and the basic experience.

Josh Collinsworth

How JavaScript Engines Achieve Great Performance— If you’ve ever wondered what it is browsers actually do to get JavaScript to execute quickly, this post digs into it a little.

Robin Heggelund Hansen

Notification Systems 2.0: Part 2 - Scale & Reliability

Courier sponsor

Using WebAssembly (Created in Rust) for Fast React Components— Just how easy is it to integrate Rust into a standard React workflow? Josh takes a look. This may seem a real meeting of buzzwords, but ideas like this have a way of turning into the future..

Josh Finnie

Useful React Hooks That You Can Use In Your Projects
Ifeanyi Dike (Smashing Magazine)

Volta vs. nvm for JavaScript Tooling
Jon Surrell

Why IndexedDB Is Slow and What to Use Instead
RxDB Documentation

🛠 Code & Tools

Polly 5.2: Record, Replay, and Stub HTTP Interactions— Works in both Node and the browser and gives you a lot of control over recording, replaying and intercepting HTTP requests made from your test suites.

Netflix, Inc.

Fiddle: The Easiest Way to Get Started with Electron— If you’ve wanted to play with Electron for building a JavaScript-powered desktop app but didn’t have the time, Fiddle makes it into more of a quick-start ‘playground’ experience.

Electron

Breakpoints and console.log Is the Past, Time Travel Is the Future— Test your code without leaving your editor, results display right next to your code and update immediately as you type.

Quokka.js sponsor

reading-time: Reading Time Estimation for the Web— Feed it some text and it’ll give you some basic estimates (e.g. ‘7 min read’).

Nicolas Gryman

file-type: Detect the File Type of a Buffer, Uint8Array, or ArrayBuffer— For example, give it the raw data from a PNG file, and it’ll tell you it’s a PNG file.

Sindre Sorhus

PickBetterPack: Discover Similar Packages from package.json Dependencies— Paste a package.json and this tool will show you a tree-like view with similar options for each dependency listed. A mixed bag, but an interesting idea.

PickBetterPack

Tried. Tested. Trusted. Studio 3T - Power Tools for MongoDB— Intuitive IntelliShell. Generate JavaScript from queries. Reshape data with Reschema. Try Studio 3T free for 30 days.

Studio 3T sponsor

use-prosemirror: Use the ProseMirror Editor in React Easily— ProseMirror is a popular toolkit for building rich text editors.

Dmitry Minkovsky

Color 4: A Color Conversion and Manipulation Library— Immutable color conversion and manipulation with support for CSS color strings.

Qix

React Image Crop: A Responsive Image Cropping Tool
Dominic Tobias

🎵 Last but not least...

Elementary Grid: A JS + Elementary Powered Music Creator— Attempt to be the next deadmau5 with this JavaScript powered grid music creator.. or at least have a fun 30 seconds. Elementary is a toolkit we covered earlier this year that presents a new way to build audio software in JavaScript.

Johan Althoff