Tag: Web Applications

The unbearable weight of massive JavaScript

Posted on by

#​664 — November 23, 2023

Read on the Web

JavaScript Weekly

Time to Take the State of JavaScript 2023 — The long standing State of JavaScript survey is back for another run at figuring out what the community is up to and what tools we’re using. The results are always illuminating and we’ll share the tastiest parts once available.

Devographics

▶  The Unbearable Weight of Massive JavaScript — An extensive talk looking at what can be achieved by simplifying web architecture, chiefly by using new or upcoming Web Platform APIs and getting back to building fast, maintainable, user-friendly frontends. Slidedeck.

Ryan Townsend

Stop Building Auth, Start Building Apps with EdgeDB + Next.js — It’s hard enough to come up with an idea worth trying. See how EdgeDB and our new authentication extension makes it easy to go from idea to working application in record time using Next.js.

EdgeDB sponsor

TypeScript 5.3 Released — The latest edition of the type-enhanced JavaScript superset is here. The headline feature is full support for the import attributes proposal (as it currently stands, at stage 3 in TC39), but there are many enhancements around type narrowing, interactive inlay hints for types in editors, and more. Not the biggest update, but progress nonetheless.

Daniel Rosenwasser (Microsoft)

Vite 5.0 Released — The Vite suite of frontend tooling may have started life in the Vue.js world, but is now used by projects aplenty including SvelteKit, Remix, and Astro. v5 now uses Rollup 4, removes many deprecated features, and requires Node 18+. There’s a migration guide to help with your v4 to v5 progression.

Evan You and Contributors

IN BRIEF:

The Node.js 20.x runtime is now available on AWS Lambda.

🎁 A bumper list of dev-related tools & services running Black Friday deals.

GitHub looks at what’s new in the latest Git release: Git 2.43.

The AWS Amplify team teases ‘Gen 2’ of their fullstack app platform.

RELEASES:

⭐️ Transformers.js v2.9 – State of the art ML in JavaScript. v2.9 adds support for depth estimation, zero-shot object detection, and optical document understanding.

Redux Toolkit 2.0 rc.0, Redux 5.0 rc.0, React-Redux 9.0 rc.0 – Initial RCs with better packaging and smaller bundles. Final releases due soon.

Bun 1.0.14 – Introduces a high-perf globbing API for matching files and strings.

Rspack 0.4 including Rsbuild 0.1 – A fast Rust-based web bundler.

Node v21.2.0 (Current) and Node v20.10.0 (LTS)

Starlight 0.13.0 – Beautiful docs sites atop Astro.

📄 Articles & Tutorials

▶  4 Web Devs, 1 App Idea — Salma Alam-Naylor, Scott Tolinski, and Eve Porcello join Jason Lengstorf to kick off a fun new series where several developers all implement the same type of app, show off how they went about it, and react to each other’s approaches. Svelte, Astro, and Next.js each make an appearance.

Learn with Jason

Promises Training — Practice working with promises through a curated collection of interactive challenges. Aimed at developers with at least an intermediate understanding of promises who want to dig deeper.

Henrique Inonhe

JavaScript Error and Performance Monitoring — Track, trace, debug and resolve JavaScript errors across platforms. Are your releases that easy? Join us live.

Sentry sponsor

An Attempted Taxonomy of Web Components — A collection of open-source web components (and lessons learned from using them) that may help you on your journey in this complex, developing space.

Zach Leatherman

Using OpenAI APIs to Analyze Automated Test Failures — A look at how to develop a Nightwatch.js plugin which sends the test failure and associated errors to a service that integrates with OpenAI’s platform to analyze said errors and provide actionable feedback.

Andrei Rusu

🛠 Code & Tools

Bruno: An Open-Source HTTP API Exploration App — There are a lot of ‘API client’ tools like this, commercial and non-commercial, with varying levels of features, but this is an open source one entirely built in JavaScript with a fully-offline ethos some might appreciate. GitHub repo.

Anoop M D, Anusree P S and Contributors

debounce 2.0: Delay Function Calls Until a Set Time Elapses — If you don’t want something to run too often, debouncing is the strategy for you and this library makes it simple. v2 adds types and brings the code up to modern standards.

Sindre Sorhus et al.

Level Up Your UX With Bryntum — Empower your users with advanced widgets like data grids, calendars, schedulers, and Gantt charts.

Bryntum sponsor

H3: A Minimal HTTP Framework for Multiple JS Platforms — Aims to be as universal as possible and works across numerous platforms, including Node, while offering the basic HTTP framework features and a compatibility layer with Express middleware. v1.9 just landed.

UnJS

request-animation-frames: Use requestAnimationFrame Anywhere — The latest library from the one-man module powerhouse, Sindre Sorhus. The idea this time is to allow you to use requestAnimationFrame in any JavaScript environment. The implementation is delightfully simple.

Sindre Sorhus

Spectral.js: A More ‘Paint-Like’ Color Mixing Library — If you have two colors to transition between, just tweening the RGB values can result in some rather ugly intermediate colors. Spectral.js uses Kubelka–Munk theory which more closely matches how paints work for a visually satisfying result.

Ronald van Wijnen

‘A Node + TypeScript + ts-node + ESM Experience That Works’ — It’s just three files: package.json, tsconfig.json and a utilities file.

Khalid Zoabi

A Non-Cloud Alternative to Google Forms That Has It All

SURVEYJS sponsor

🖼 medium-zoom 1.1: A Library for Medium-Style Image Zooming — Responsive, can load a higher definition version of an image on zoom, and mouse, keyboard and gesture friendly. Now we just need a library that can cover up the bottom half of a page with junk like Medium also does now. Demo.

François Chalifour

gridstack.js 10.0 – Build interactive dashboard panels quickly.

MQTT.js 5.3 – MQTT client for Node and browser.

Piscina 4.2 – Node.js worker thread pool implementation.

(Official) MongoDB Node.js Driver 6.3

SQL Formatter 14.0 – Pretty print SQL queries.

Job Listing

Full Stack TypeScript Software Engineer – [Remote Europe] — Marker.io is a visual bug-reporting tool for the web. Join our dev team and work remotely (Stack: Node.js, Vue.js & MongoDB).

Marker.io

NOTABLE QUOTABLE

“Programming isn’t about what you know; it’s about what you can figure out.”

___
Chris Pine (author of Learn to Program)

P.S. Medium is 🗑️. If you don’t want to host your own blog, try Hashnode, dev.to, Bear, or even throw Markdown at GitHub Gists – it’ll provide a better reader experience and we’ll be more likely to link to it.

Svelte 5 is going to be radical

Posted on by

#​651 — August 10, 2023

Read on the Web

JavaScript Weekly

My Experience Modernizing Packages to ESM — What a post! Mark, well known for his work on React, Redux, and much more, details the painful experiences and hard-earned lessons he picked up while migrating the Redux packages to ES modules.

Mark ‘acemarke’ Erikson

Things You Forgot (or Never Knew) Because of React — “I’ve written before about how React is the new default frontend framework, and how I don’t think most people using React on a regular basis realize quite how much it’s fallen behind.” High level thoughts about the React ‘bubble’ and some reasons to look beyond it, including a round up of some of the alternative options.

Josh Collinsworth

Build Web Apps in 60 Seconds with Dynaboard AI — Dynaboard’s low-code IDE offers 40+ built-in UI components. Quickly connect to REST & GraphQL APIs, SQL databases, and spreadsheets. Write custom code or use AI to generate any SQL, JS, or CSS.

Dynaboard sponsor

⚡️ IN BRIEF:

“Svelte 5 is going to be radical,” 🐦 tweets Rich Harris.

Server side JS runtime Deno 1.36 has been released with extended security options, a polyfill for node:test, completion of the node:os polyfill, and many other minor Node.js compatibility improvements.

Google has unveiled a sneak peek of a new IDE it’s developing called Project IDX. It has VS Code at its base but with strong JS framework support, simulators, and lot of ‘AI smarts’ on top, 🐦 says Addy Osmani.

A revived but early stage proposal for introducing observables to JavaScript. Your feedback is sought, so file an issue if you have any.

A fun walk through front-end history with a blog post containing every HTML element (well, almost – sorry applet).

Nim 2.0 has been released. Nim is a C++ and Python inspired, statically typed systems language, that supports being compiled to JavaScript.

🎉 RELEASES:

TypeScript 5.2 RC – TS 5.2 is nearly set for its final release. Explicit resource management with using is the headline feature, but there’s more, as usual.

esbuild 0.19.0 – The high-perf bundler can now import paths containing wildcards and supports advanced CSS @import rules. Note that this release contains backwards-incompatible changes.

Astro 2.10 – There’s also a first beta of Astro 3.

Node.js Security Releases – v20.5.1 (Current), v18.17.1 (LTS) and v16.20.2 (LTS) are all part of this set of releases including OpenSSL security updates and fixes, mostly, around permission policies.

📒 Articles & Tutorials

Bringing Sharp to WebAssembly and WebContainers — A look at how it’s possible to bring Sharp, a popular Node.js image manipulation module, into the browser. Welcome to the future.

Ingvar Stepanyan

A Compilation of Outstanding JS Testing Articles — An opinionated list of 10 outstanding testing articles, all with a JS slant to them. He also mentions his own list of JavaScript and Node.js Testing Best Practices which is worth revisiting too.

Yoni Goldberg

🚀 JavaScript Moves Fast—and So Should You. Let Us Help You Upgrade — React, Vue, Next, Node – our expert devs have it covered! Technical debt mounting? We’re your tech debt busters! 👊

Reduce Tech Debt. UpgradeJS now. sponsor

▶  A Look at HTMX: A ‘Game-Changing’ Alternative to React? — One of Jack’s typically well produced, short tours (just 14-minutes). He likes htmx and thinks it’s worth learning in order to have more options in your toolbox.

Jack Herrington

📝 Prefer a traditional writeup? James Hibbard has one here.

Node.js’s ‘Config Hell’ Problem — Andy ponders why a Next.js project has over 30 configuration files and what we can do to avoid it (unsurprisingly, it involves using Deno, but I enjoy the boldness).

Andy Jiang (Deno)

Creating a Screen + Camera Recorder with the Document Picture-in-Picture API — This is more powerful than I was expecting. You can basically record a screencast using browser APIs. In Chrome, at least.

Sébastien Jalliffier Verne

React Authentication — Without Complexity

Userfront sponsor

▶  Build and Deploy a Full Stack MERN Next.js 13 Threads Clone — An extensive, five hour screencast walking through the creation of a Threads/Twitter/X-style app using Next.js 13 and Clerk for user management.

Adrian Hajdin

▶  Turbopack vs Webpack — Being involved with the development of both bundlers, Tobias Koppers has some interesting things to say about the differences and explains why Turbopack is necessary.

Tobias Koppers and Jack Herrington

Autogenerating Rust-JS Bindings with UniFFI

Ben Dean-Kawamura (Mozilla)

Migrating My Blog from Gatsby to Astro

Artem Sapegin

🛠 Code & Tools

Fuite 3.0: A Tool for Finding Memory Leaks in Web Apps — A CLI tool that you can point at any URL to analyze for memory leaks. Introductory blog post here, and there’s also a video tutorial.

Nolan Lawson

Luxon 3.4: Date and Time Manipulation Library — If you’re familiar with Moment.js, it’s like that but with immutable objects, 1-indexed months, Intl-powered localization (so no locale or timezone files needed) and more.

Moment.js

JavaScript Frontend Error Monitoring 101 — Take a crash (pun intended) course on frontend error monitoring with Sentry. Read on.

Sentry sponsor

Filesize.js: Generate Human Readable Strings From File Sizes — For example, 123456 bytes could turn into “120.56 KB” – though different standards of conversion can also be used. GitHub repo.

Jason Mulligan

Typograms: A Way to Render ASCII Diagrams More Elegantly — An intriguing project where you ‘draw’ diagrams in plain ASCII text within special script tags and these get rendered into much nicer looking versions. An interesting approach if Mermaid is too full on for your needs.

Sam Goto / Google

💡 Talking of Mermaid, the latest release supports Sankey diagrams.

d3-graphviz 5.1: Graphviz DOT Rendering and Animated Transitions — Renders SVGs from DOT-defined graphs using a WebAssembly port of Graphviz, a popular graph visualization tool.

Magnus Jacobsson

🔊 Meyda: Audio Feature Extraction Library — Supports both offline feature extraction as well as real-time feature extraction using the Web Audio API. You can play with a demo right on the homepage.

Rawlinson, Segal, Fiala, Wray, et al.

💻 Jobs

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

Senior Software Engineer (Frontend Lead) — Lead Emerge’s web platform, used by teams like DoorDash, Square, & Airbnb (Our stack: Next.js, React, TS, Vercel).

🛸 Emerge Tools

🧑‍💻 Got a job listing to share? Here’s how.

ggml.js: Run ggml-Ported ML Models Directly in Your Browser — We’re going to do a feature on ML/AI related stuff in JS next week, so watch this space..

Rahul D Shetty

React Virtuoso 4.5 – Powerful virtual list component.

Perspective 2.4 – Fast, streaming real-time data visualization.

express-rate-limit 6.9 – Basic rate limiting for Express apps.

PLV8 3.2 – Use JS as a procedural language in PostgreSQL.

Puppeteer 21.0 – Headless Chrome automation in Node.js.

📊 Well, that’s handy..

npmgraph: A Fun Way to Visualize Package Dependency Graphs — A Web tool that accepts one or more package names (or a package.json) and renders a visualization of their (possibly intersecting) dependency graphs. Packages can be colored by various criteria (such as number of maintainers, if you want to see how fragile the world is) and you can download SVGs of the output.

Kieffer, Brigante, et al.

Douglas Crockford calls JavaScript ‘smelly.’

Posted on by

#​642 — June 8, 2023

Read on the Web

JavaScript Weekly

Polywasm: A Polyfill to Run WASM in JS Environments — The creator of esbuild is back with something fresh: a polyfill that uses live translation to be able to run .wasm files in JS environments that either lack a WebAssembly implementation or have it disabled. You can see how it performs in this special version of the esbuild playground.

Evan Wallace

Announcing TypeScript 5.1 — This release of the statically typed JavaScript superset is a gentle ‘quality of life’ step forward rather than a featureful extravaganza, but we get support for linked editing of JSX tag names, namespaced JSX attributes, the ability to have unrelated types for getters and setters, and undefined-returning functions no longer need an explicit return.

Daniel Rosenwasser (Microsoft)

How to Send Password Resets via SMS and Email Using Node.js & Next.js — When you’re building a web application, there’s a decision to make about how to handle users and authentication. There are many services and libraries to choose from, and the right choice will depend on the requirements of what you are building.

Courier.com sponsor

NakedJSX: Use JSX Without React — If you like JSX and would like to use it to help in the production of static HTML without using React itself, this command line tool is for you. It even extracts scoped CSS classes and deduplicates them.

David Hogan

Oh, you can also use NakedJSX to use JSX with jQuery, which you may either find useful or a fun way to troll your team, depending on how you roll. 😏

Dan Abramov Rebuilds React Server Components from Scratch — Having faced a raft of questions about Server Components, Dan has begun to write a series covering everything from the ground up by reimplementing a basic form of RSC from scratch. It’s not aimed at day-to-day React developers, but those who want to grok the ideas behind RSCs.

Dan Abramov

⚡️ IN BRIEF:

⭐️ Douglas Crockford, of JS: The Good Parts fame, ▶️ is back pointing out JavaScript is a ‘smelly’ language and ‘it’s time for the next thing.’ 😬

MDN’s reference pages on regular expressions in JavaScript have been substantially improved.

From Apple’s WWDC this week comes ▶️ a handy presentation on Safari’s DevTools, plus a barrage of news about Safari enhancements around the ‘spatial web’, JPEG XL support, the popover API, offscreen canvas support, local storage policies, extra JS regex features, and more.

Emma Twersky shares everything Angular related from the recent Google I/O 2023 event.

📘 Faraz K. Kelhini’s Text Processing with JavaScript is a new book, currently in beta with a final release due in August from Pragmatic Bookshelf. The table of contents shows it to be packed with useful stuff.

RELEASES:

Tesseract.js 4.1 – Pure JavaScript OCR.

BlockNote 0.8 – ‘Notion-style’ block-based editor.

Redwood 5.3 – React + GraphQL full stack framework.

TensorFlow.js 4.7 – ML in the browser.

Madge 6.1 – Create graphs of module dependencies.

📒 Articles & Tutorials

Why (and How) You Should Write Your WebAssembly in TypeScript — Performance is the main argument made by the author who shows off Wasmati, a library for creating WebAssembly modules by writing TypeScript using an API that corresponds to WASM operations. It works in modern browsers, Node, and Deno.

Gregor Mitscha-Baude

Backtick Strings are Likely the Wrong Tool for Your Job — It’s too common to try to put together query strings using JavaScript’s template strings, says Mattie, and this leads to potential injection problems. Luckily, there’s an alternative way..

Mattie Behrens

Dynaboard: AI Meets Low-Code to Get More Done, Faster — Build high performance authenticated web applications in a collaborative — full-stack — development environment.

Dynaboard sponsor

Is React Having an ‘Angular.js Moment’? — The author puts forward an argument comparing the discontinuity from AngularJS to Angular 2 in 2014 with current shifts in the React ecosystem.

François Zaninotto

Painless WebGPU Programming with taichi.js — taichi.js is a GPU computing framework that transforms JavaScript functions into parallelizable WebGPU compute shaders. You can see a live demo here using the Game of Life.

Dunfan Lu

A Preview of Web Apps on macOS Sonoma 14 Beta — The next version of macOS will double down on the idea of well integrated, desktop-installable webapps. Here’s a dig around into how it works so far.

Thomas Steiner

Live Streaming with Multiple Hosts in a Browser with Amazon IVS

Amazon Web Services (AWS) sponsor

The Many Ways to Select the n-th Character from a String

Christian Heilmann

Primitive Objects in JavaScript: When To Use Them

Kirill Myshkin

A Quick Primer on Node.js’s New Built-in Test Runner

endpts

🛠 Code & Tools

Algolia AutoComplete: A Fast, Full-Featured Autocomplete Library — This isn’t a UI widget – you’re in full control of rendering the experience – but this will let you wire up the experience you want users to have. There’s a getting started tutorial and a CodeSandbox demo where you can play around with some live code.

Algolia

Perfectionist 1.0: ESLint Plugin for Sorting Data — It supports sorting all sorts of things (props, imports, types..) and enforcing that with ESLint. It supports alphabetical and natural sorting, as well as by line length which leads to a neat aesthetic..

Azat S.

Comprehensive Full-Stack Application Monitoring Solution — A flexible application monitoring tool that doesn’t break the bank.

TelemetryHub sponsor

pgsql-ast-parser 11.1: A Simple SQL Parser — A TypeScript-based Postgres SQL syntax parser that can produce a typed AST for most queries (PL/pgSQL is not supported). It’s used as part of the author’s pg-mem project which provides a mini, ‘in memory’ Postgres clone in Node or the browser (here’s a live demo of that).

Olivier Guimbal

Goxygen 0.4: Quickly Generate a Go(lang) Backend for a JS Project — A tool that sets up a new Go-based project with Angular, React, or Vue in the front-end, and Docker and Docker Compose files to spin it up. It’s been around a few years, but has now added Vue 3.3 support and a Vite-based Vue template.

Sasha Shpota

Noble Curves 1.1
↳ Audited elliptic curve cryptography library.

Taxi 1.3
↳ Add slick PJAX navigation to a site.

Inngest 2.0
↳ Build serverless job systems with TypeScript.

TinyBase 3.2
↳ Reactive data store for local‑first apps.

React Arborist 3.1
↳ Complete tree view component (demo).

Alova 2.6
↳ Request strategy library for Vue, React and Svelte.

💻 Jobs

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.

🛠 Useful Thing of the Week

bundlejs: Online npm Package Bundle Size Checker — A browser-based tool that can treeshake, bundle, minify, and compress (gzip and brotli) packages to show you what their weight impact is. It runs entirely in the browser, too, using the WebAssembly build of esbuild.

Okiki Ojo

Strengthening Node.js Security: NodeSource-GitHub Partnership

Posted on by

Strengthening Node.js Security: NodeSource and GitHub Partner to Boost Security for Software Developers

The NodeSource-GitHub partnership is a game-changer for developers seeking to build secure applications directly integrating NCM’s (Node Certified Modules) powerful security features into their GitHub Actions workflow. With our NCM GitHub App developers can easily add NCM to their repositories, configure organization-wide rules for vulnerability scanning and approval processes, and receive real-time reports on vulnerabilities in pull requests and deployment workflows that target a GitHub environment.

NCM is a core feature of N|Solid, providing enhanced security for Node.js applications in production environments. We help organizations & developers use Node to its fullest through __N|Solid__, the world’s best Node.js observability and security tool built on top of the Node.js runtime. It provides a secure environment for running Node.js applications and advanced features such as worker threads monitoring, memory leak detection, and CPU profiling.

This new integration with GitHub Actions Deployment Protection Rules streamlines managing open-source Node packages, ensuring compliance with licensing requirements, and helps developers proactively identify and mitigate security risks before they deploy their Node.js applications using GitHub Actions Workflows. It adds a valuable layer of security to the development and deployment workflows, enabling developers to identify and fix vulnerabilities before they become major security breaches, ultimately safeguarding Node.js applications and protecting critical data.

Simplifying Vulnerability Management for Open-Source Dependencies

Node.js applications and services rely heavily on open-source Node packages for their source code. Unfortunately, many of these packages have publicly disclosed vulnerabilities, often ignored or overlooked by developers. This can leave applications vulnerable to malicious code execution and secret leaks, potentially resulting in significant security breaches.

To mitigate this risk, developers must be vigilant when selecting and using Node packages in their projects and take prompt action when vulnerabilities are discovered. This requires staying informed about potential security issues and planning to address them.

NCM integration with GitHub Actions Deployment Protection Rules simplifies managing open-source Node packages. Users can add the NCM GitHub App to their repositories via the GitHub Marketplace and check NCM results in the Accounts Portal for every action, such as Pull Requests or Deployments.

With this integration, devs can:

Set up repositories to use the NCM GitHub App by searching and adding it via the GitHub Marketplace or using a direct link from the NodeSource Accounts Portal.

Check the NodeSource Accounts Portal for NCM results related to actions such as Pull Requests or Deployments configured in GitHub repositories.

NCM analyzes and approves or rejects every deployment flow based on organization-configured rules, ensuring secure project deployments.

Receive detailed reports attached to every Pull Request and deployment in configured repositories, indicating NCM’s findings with green or red status markers, helping users make informed security decisions.

Now, with the integration of NCM (Node Certified Modules) directly into N|Solid Console and through the __GitHub Marketplace__, users can access even more powerful toolsets for managing their Node.js applications. This integration streamlines managing open-source Node packages, allowing users to easily track and monitor package dependencies, scan for vulnerabilities, and ensure compliance with licensing requirements.

By leveraging the power of NCM within N|Solid Console and the GitHub Marketplace, organizations can effectively enhance their applications’ security and compliance while ensuring their stability and reliability. NCM provides a robust solution to proactively identify and address security risks, maintain compliance, and improve application performance. It empowers organizations to build and deploy secure, reliable, and compliant applications, ultimately protecting their reputation and mitigating risks associated with security breaches and compliance violations.

NCM is a powerful tool that greatly enhances application security, compliance, stability, and reliability. Organizations can proactively mitigate security risks, maintain compliance, and ensure application stability by integrating NCM into the deployment flow through N|Solid Console and the GitHub Marketplace. Embracing NCM as a part of the development process is a prudent choice for organizations prioritizing application security, compliance, and reliability in today’s dynamic software development landscape.

NCM – Deployment Protection Rule

GitHub Marketplace offers a range of third-party applications and services, such as code analysis tools, project management tools, continuous integration, deployment (CI/CD) tools, and security tools, among others, that can be integrated into pull requests and deployment workflows with GitHub Actions.

With its powerful feature set and certification program, NCM is an essential tool for any developer working with open-source Node packages.

Related Content

Unleashing the Power of NCM – https://nsrc.io/UnleashingNCM

Vulnerability Scanning with NCM – https://nsrc.io/VulnerabilityScanningNS

Avoiding npm substitution attacks using NCM – https://nsrc.io/AvoidAttackswithNCM

Experience the Power of N|Solid

To get the best out of Node.js and experience the benefits of its integrated features, including OpenTelemetry support, SBOM integration, and machine learning capabilities.✍️ Sign up for a free trial and see how N|Solid can help you achieve your development and operations goals. #KnowyourNode

The return of ECMAScript 2023 (and Angular)

Posted on by

#​634 — April 13, 2023

Read on the Web

JavaScript Weekly

The JavaScript Equality Table Game — Minesweeper will feel like a walk in the park after this reminder of the horrors of JavaScript’s ==. If you need to go in depth, Section 7.2.14 of the ECMAScript spec will help, but otherwise? Stick to three equals (===) unless you have a good reason not to.

Reinis Ivanovs

htmx 1.9 Released — htmx (homepage) is an increasingly popular library outside of the JavaScript space as it lets folks use things like WebSockets, SSE, AJAX, and CSS transitions by marking up HTML rather than writing lots of JavaScript. v1.9 adds support for view transitions and generalized inline event handling. The code examples are worth a look – htmx makes a lot possible, with rather little tooling or markup needed.

htmx team

Supercharge AWS S3 Video Streaming with ImageKit’s Video API — Get adaptive bitrate streaming, video optimizations, format conversions, and real-time transformations and watermarking by attaching ImageKit with your AWS S3 bucket.

ImageKit sponsor

The ECMAScript® 2023 Language Spec Steps Forward — After prematurely announcing the progression of the ES2023 spec in February, we can now announce: TC39 has approved the ECMAScript 2023 spec, and while it remains a candidate, it’s now a step closer to eventual ECMA General Assembly approval. The finished proposals list for 2023 now includes Array find from last, hashbang support, Symbols as WeakMap keys, and change Array by copy.

ECMA International

IN BRIEF:

▶️ Angular is back with a vengeance, says Fireship.

Serverless platform AWS Lambda has introduced response streaming on its JS runtime (for now) so you can send response data as it becomes available rather than all at once. (→ Via Serverless Status)

/[]/ A look at a seemingly JS-specific quirk in regular expressions when empty character classes are used.

An analysis of languages used in GitHub pull requests shows JavaScript/TypeScript leading the way with Python just slightly behind. The comments went in lots of odd directions here.

Seven folks at Vue Amsterdam 2023 shared their ▶️ tips on getting started with Vue.js.

▶️ An hour-long chat on the State of Node.js with some leading figures.

Node v18.16.0 (LTS) has been released with backported support for compiling JavaScript code into a single executable app. Node 19’s Ada URL parser also appears.

A striking visual introduction to React and its fundamental concepts.

RELEASES:

Node.js v19.9 (Current)

Puppeteer v19.9 – It’s the week for almost 20s.

pnpm 8.2 – Efficient npm alternative.

Redwood 4.5 – Popular app framework.

Storybook 7.0 – With an official release post this time.

???? Articles & Tutorials

Ranger: Use a Range-Like Syntax for Anything? — const numbers = 1[[…8]], anyone? This is a neat trick for a bit of syntatic sugar, but I’m not sure it would pass the sniff test for most teams. You might find the implementation interesting to check out though. Long may this sort of experimentation continue.

Jon Randy

???? A proposal for JavaScript to get built-in range support is at stage 2.

????  Build and Deploy ‘23: May 3rd – Save the Date! — The ultimate CI/CD virtual conference – best practices and end-user success stories from DevOps experts. Plus, a keynote from Emily Freeman, author of DevOps for Dummies.

Codefresh sponsor

Trying Node’s Built-In Test Runner — In 2022, Node gained an experimental built-in test runner (node:test). It’s going to become stable in the forthcoming Node v20, so it’s a good time to look at how it works and how it compares to other solutions you might already be using.

Gleb Bahmutov

▶  The Right Way To Merge JavaScript Objects — In just one minute, too.

Jack Herrington

Ref vs. Reactive: What to Choose When Using Vue 3 Composition API?

Michael Hoffmann

How to Stream File Uploads to S3 Object Storage from Node.js

Austin Gil

How to Contribute to a Project You Have No Idea About

Michal Warda

???? Code & Tools

Reveal.js 4.5: An HTML Presentation Framework — Brings elegant presentations to anyone with a Web browser. v4.5 was just released with support for jumping to specific slides, a few new themes, and with live reload working with files in subfolders.

Hakim El Hattab

List.js: Add Search, Sort, Filters, and More to Tables and Lists — A handy library for adding search, sort, filters and flexibility to tables, lists or other HTML elements. Want an example? Why, of course.

Jonny Strömberg

????Quokka.js – #1 JavaScript Scratchpad for VS Code — With 2M+ downloads, Quokka.js is the #1 tool for exploring and testing JavaScript/TypeScript. Code runs immediately as you type.

Wallaby.js sponsor

Queue: Async Function Queue with Adjustable Concurrency — Exports a class Queue that implements most of the Array API.

Jesse Tane

Yet Another React Lightbox — Add a lightbox component to your projects “in minutes” – there are several examples to try, as well as a playground with adjustable settings. GitHub repo.

Igor Danchenko

Sandpack 2.6: Component Toolkit for Creating Live Code Editing Experiences — Created by the folks at CodeSandbox, so they surely know what they’re doing in this space. GitHub repo.

CodeSandbox

Easy to Use, Full-Stack Application Monitoring

TelemetryHub sponsor

TS Writer: A Template String Template Engine for Generating Code at Runtime — Rather niche, but aimed at situations where you might need to generate code at runtime in TypeScript.

tinylibs

Minimatch 9.0
↳ Glob matcher library.
     minimatch(“bar.foo”, “*.foo”)

hls.js 1.4
↳ Play HLS in browsers with support for MSE.

Partytown 0.8
↳ Relocate third-party scripts off the main thread.

Plasmo 0.68
↳ “It’s like Next.js for browser extensions”

Obsidian 8.0 – GraphQL, built for Deno.

MUI X 6.1 – React component suite.

TestCafe 2.5 – Automate end-to-end web testing.

Maquette 3.6 – Lightweight virtual DOM library.

Venom 5.0 – WhatsApp bot library.

???? Jobs

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

Full Stack JavaScript Engineer @ Emerging Cybersecurity Startup — Small team/big results. Fun + flexible + always interesting. Come build our award-winning, all-in-one cybersecurity platform.

Defendify

????‍???? Got a job listing to share? Here’s how.

Transformers: JavaScript in Disguise

Posted on by

#​630 — March 17, 2023

Read on the Web

JavaScript Weekly

????  Transformers.js: Running ML Models in the Browser — Transformers are a type of machine learning model often used for natural language or visual processing and while running such models directly in the browser is in its infancy, Transformers.js opens up some ML models to you with some impressive demos here.

Xenova

????  Celebrating 10 Years of Electron — It feels like Electron pops up everywhere (Slack, Spotify, VS Code, and more) so it might feel surprising it’s only been with us for a decade. Slack and Electron developer Erick Zhao gives thanks to Electron’s developers, the community, gives us a bit of Electron related history, and reassures us Electron is still going strong.

Erick Zhao

Dynaboard: A Visual Web App IDE Made for Developers — Build high performance public and private web applications in a collaborative — full-stack — development environment.

Dynaboard sponsor

Announcing TypeScript 5.0 — Note that TypeScript doesn’t follow semantic versioning, so this is as much a ‘major’ release as 4.9 was.. but 5.0 looks cool anyway. This release of the typed JavaScript superset is packed with features like decorators, improved ESM project support for Node and bundlers, const type parameters, and more.

Daniel Rosenwasser (Microsoft)

Turbowatch: File Change Detector and Task Orchestrator — Not just that but it claims to be extremely fast and “if you ever wanted something like Nodemon but more capable, then you are at the right place.” This looks very promising and the README is full of examples.

Gajus Kuizinas

IN BRIEF:

BREAKING NEWS: The JS Party podcast has just dropped an episode called ▶️ The Future of React – so new, we haven’t listened to it, but it features Dan Abramov and Joe Savona so may make for good weekend listening..

“The most dangerous command you run every day: npm install” says Socket, who are introducing what they call ‘safe npm’, a transparent wrapper around npm designed to, well, make it less dangerous.

CORRECTION: In issue 627 we suggested the ECMAScript 2023 spec had entered a new draft stage. TC39 member Jordan Harband pointed out to us that it has been in such a state for some time. “There’s still a stage 4 PR not yet merged,” he noted, but there will be some progress in the next month.

Defer is a new ‘zero-infrastructure’ background jobs platform for Node.js apps.

Recently we linked to ???? Dittytoy, a fun online JavaScript environment for audio coding/experiments. Someone has somehow implemented an entire Commodore 64 SID synthesizer in it!

????  Developer Day: A Front-Row Seat to What’s New with Retool

Retool sponsor

RELEASES:

Node.js v19.8.0/1 (Current)

Jasmine 4.6
↳ Testing framework for browsers and Node.

pm2 5.3
↳ Popular Node production process manager.

Mongoose 7.0
↳ Popular MongoDB ODM for Node.js.

ESLint 8.36

???? Articles & Tutorials

Chrome 111 Gains a ‘View Transition’ Feature for SPAs — The View Transition API is only supported by Chrome so far, but allows easy animated page transitions within single-page apps (demo here). Luckily it suits progressive enhancement so you can start using it right now without feeling too guilty 😉 Multi-page app support is forthcoming.

Jake Archibald (Chrome Developers)

Create and Download Text Files with JavaScript — If you want your code to be able to generate a text (such as JSON) file on the fly and have it downloaded by the user’s browser, it’s reasonably easy.

Amit Merchant

Five Mistakes I Made When Starting My First React Project — Richard shares his early React mistakes with the hope you can learn from his misfortunes. He tackles topics like using defaultProps, propTypes, and class components.

Richard Oliver Bray

Too Much Tech Debt in Your node_modules? Our Team of JS Devs Can Help — We are a team of senior software engineers who specialize in tech debt. Let us modernize your JavaScript stack ????

UpgradeJS.com | JavaScript Upgrade Services sponsor

Progressively Enhancing a Table with a Web Component — Building a web component wrapper to add table sorting.

Raymond Camden

Shell-Free Node.js Scripting with Execa 7.1 — Execa is a popular process execution library for Node and the latest version includes an interesting $ method feature for writing zx-style scripts with it, making it even more useful for shell scripting style usecases.

ehmicky

What is Vite and Why Use It Over Create React App?

Luke Twomey

Pointers on Upgrading from Cypress v9 to v12

Gleb Bahmutov

How to Use v-model with Form Inputs in Vue

Dmitri Pavlutin

How to Create and Use Path Aliases in TypeScript Imports with Vite

Hasibul Hasan

What Is Deno and How to Use Its Sandbox?

Roman Zaynetdinov

???? Code & Tools

Template: A Simple Framework for Webapps — The author built it for his own projects, but notes: “It’s a joy to work in, feels “frameworky” but it’s just web standards with <100 lines of convenience JS wrapped around it. There is no magic beyond what the browser provides – I like it that way.” We do too.

William Blankenship

React ProseMirror: Integrate the ProseMirror Editor with React — ProseMirror is a toolkit for building rich text editors for the Web.

The New York Times

Breakpoints and console.log Is the Past, Time Travel Is the Future — 15x faster JavaScript debugging than with breakpoints and console.log, now with support for Vitest.

Wallaby.js sponsor

Fable 4.0: F# to JavaScript Compiler — If you fancy F#’s flavor of almost-entirely-functional development, this could be for you. GitHub repo.

Fable

MiniSearch: Small In-Memory Fulltext Search Engine for Browser and Node — The strength is that the indexed data is stored locally, allowing it to work offline and giving good performance, as seen in this demo.

Luca Ongaro

css-variable: Tiny Treeshakable Library to Define CSS Custom Properties in JS — Compatible with popular CSS-in-JS libraries like Emotion, styled-components, Linaria, etc., and it boasts better CSS minification and smaller virtual DOM updates, among other features.

Jan Nicklas

Tremor 2.0: The React Library to Build Dashboards Fast — Provides an array of modular components to build data-driven dashboards. v2.0 is the “first step towards a production-ready version of Tremor” and sees a full switch to Tailwind CSS. Homepage.

Tremor Labs

Stable Diffusion Plugin for Photoshop — Writing code that worked with Adobe’s weird JS variant was ghastly, but this uses their new ‘UXP’ based approach, so is interesting enough for that alone. This plugin also opens up the Stable Diffusion generative art system to Photoshop users.

Abdullah Alfaraj

Flexboard: A React Component Library for Resizable Sidebars — Try the live example. The code allows you to set min/max sizes for the resizable parts of the layout.

Dorbus

???? Jobs

Full Stack JavaScript Engineer @ Emerging Cybersecurity Startup — Small team/big results. Fun + flexible + always interesting. Come build our award-winning, all-in-one cybersecurity platform.

Defendify

Software Engineer (Frontend) — 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.

Fuite 2.0
↳ Tool for finding memory leaks in web apps.

???? wavesurfer.js 6.6
↳ Navigable waveform built on Web Audio & canvas.

Svelte-Inview 4.0
↳ Svelte action that monitors when an element enters/leaves the viewport.

Discord.js 14.8
↳ Library for using the Discord chat API.

Plotly.js 2.20
↳ Powerful charting library. (Examples.)

Recharts 2.5
↳ React + D3 charting library. (Examples.)

deepmerge 4.3.1
↳ Merges the enumerable properties of objects.

Vue Testing Library 7.0

React Table Library 4.1