QR Code
OWT Web Services       http://owtweb.com
[Skip to Content]

Industry News

03/13/2024





















#​679 — March 14, 2024

Read on the Web





JavaScript Weekly








Use Parcel Macros in Other Bundlers with unplugin-parcel-macrosMacros, as implemented in Parcel (and Bun!), are JS functions that run at build time whose results are inlined into a bundle in place of the original call. You can now use this feature with webpack, Vite, Rollup, esbuild, etc. Here's a quick example of how handy this can be.


Devon Govett




𝕏 Devon goes into extra detail 🐦 in this Twitter/X thread. You can also revisit the release of Parcel 2.12.0 to learn more.





How to Add an Onboarding Flow for your Application — Learn to enhance onboarding for your app with Clerk and Next.js: add custom session tokens, configure Next.js middleware for session data, and auto-update user metadata for a streamlined, code-efficient user experience with minimal code.


Clerk sponsor






Speedometer 3.0: The Best Way Yet to Measure Browser Performance — Speedometer has been around since 2014, but this new release is the first with a full collaborative approach involving each major browser engine (Blink, Gecko, WebKit). You can run the test yourself here.


Apple, Google, Microsoft, and Mozilla






WinterJS 1.0: A Fast WinterCG and WASM-Compatible JS Runtime — WinterJS initially pitched itself as a Rust and SpiderMonkey-powered ‘Service Workers server’ but now simply boasts being the fastest WinterCG-compatible JavaScript web server full stop. The ability to run JITed JS workloads entirely under WebAssembly is next on their radar.


Wasmer




IN BRIEF:



RELEASES:




📒 Articles & Tutorials








Comparing JavaScript Frameworks: Templates — A thorough comparison of the template languages used by React, Vue, Angular and Svelte. Interesting analysis and this looks set to turn into a great series.


Maarten Hus






▶  Setting up an Express.js App with TypeScript in 2024 — This hour-long video isn't about building an entire app, but getting everything set up and working in a clear, easy to follow way, including a variety of modern DX niceties.


Anson the Developer






5 Lessons Design Systems Teams Can Learn from Open-Source Maintainers — Design system teams must balance evangelism with maintenance and development. Turns out, the same is true of open source.


StackBlitz sponsor






Make Your TypeScript Functions More Reusable with Generics — Matt kicks this off with a challenge for you to consider, before showing how to make a function more flexible and type-safe by using type parameters instead of any.


Matt Pocock





How HEAD Works in Git

Julia Evans



🛠 Code & Tools








Shiki 1.0: A Powerful Syntax Highlighter — A few months ago, we linked to Shikiji, a fork of Shiki that was created to push the project forward. Happily, the creators of both libraries decided to join forces and Shiki 1.0 was born. It’s a syntax highlighter based on TextMate grammar and themes, the same engine as used by VS Code. The docs are good.


Pine Wu, Anthony Fu






Rolldown: A Rust-Powered Bundler for JavaScript — A new entry to an increasingly crowded market, but they explain why they’re building it here – it’s intended to underpin a future bundler to be used in Vite, rather than esbuild and Rollup. GitHub repo.


Rolldown






Breakpoints and console.log Is the Past, Time Travel Is the Future — 15x faster JavaScript debugging than with breakpoints and console.log, supports Vitest, jest, karma, jasmine, and more.


Wallaby Team sponsor






Storybook 8 Released — The popular front-end component workshop introduces built-in visual testing, support for React Server Components, up to 50% faster start times, Vite 5 support, and upgraded Vue and React control auto-generation. There’s also ▶️ a launch video to enjoy.


Michael Shilman (Storybook)










The Playwright Test Generator — I don't know why I’ve not linked this before, as it’s so useful. Playwright isn’t just a library for controlling browsers from JavaScript, but also includes a tool for generating tests and page navigation code from your own interactions. Hit record, do stuff, and code is written.


Microsoft






Managed Reliability & Observability for Webhooks & Asynchronous Messaging — Send, receive, authenticate, transform, filter, & route events between 3rd-party APIs (Stripe, Shopify, Twilio, etc.) & serverless functions.


Hookdeck sponsor






TinyBase 4.7: A Reactive Data Store for Local-First Apps — If you want a bit more database-esque structure around the management of state in your apps, this is worth a try. The demos show it off well. v4.7 adds support for Turso’s LibSQL (a fork of SQLite).


James Pearce et al.






⌘K 1.0: A Composable, Unstyled 'Command Menu' for React Apps — The home page includes some neat examples in a variety of styles. GitHub repo.


Paco Coursey






webtoon/PSD: Zero-Dependency PSD Parser for Browsers and Node — PSD (Photoshop Document) is the format used by Photoshop and this library lets you dig into metadata and pixels on each image layer.


webtoon inc













03/12/2024

Snapchat driving spend growth at higher efficiency Nutrimuscle is a fast-growing sports supplement brand that started using Fospha in June 2023. Their goal was to grow by increasing conversions and effectively allocating spend, but like many businesses, one of the primary challenges they faced was the inability to track key metrics (i.e. Cost of Acquiring Customers) […]


The post Nutrimuscle: Scaling spend and growing ROAS through better measurement appeared first on Search Engine Watch.


03/06/2024





















#​678 — March 7, 2024

Read on the Web





JavaScript Weekly








📒  Eloquent JavaScript Goes Fourth — Coming several years after the third edition, the latest version of, perhaps, the best ‘all rounder’ book for learning JavaScript is here: “adjusted to the realities of 2024 and generally touched up.” You can read it on the Web, but it’ll be available in print later on too.


Marijn Haverbeke






Deno Introduces JSR: A New JavaScript Registry — The JavaScript Registry (a.k.a. JSR) is a new TypeScript-first, ESM-only module registry designed for the entire JavaScript ecosystem. This post digs into what it’s all about and how it builds upon the success of npm.


Dahl, Casonato, and Whinnery






Advanced JavaScript Tools to Empower Your Applications — Build better web applications with powerful JavaScript developer tools including: SpreadJS Excel-like spreadsheet components, ActiveReportsJS reporting tools, Wijmo UI component suite, and Document Solutions viewers for PDF, Excel, Image, and more.


MESCIUS inc sponsor






'Apple Backs Off Killing Web Apps, But The Fight Continues' — Last week, we linked to an open letter imploring Apple to reverse its moves around breaking PWAs.. and it worked? Whatever the case, Apple continues to seem hostile to developers, and there's more to be tackled in this area.


Open Web Advocacy




IN BRIEF:



RELEASES:








Sentry Launch Week: Making Debugging Fun — We’ll be making debugging fun, raffling swag and talking about all things developer, every. single. day. (For one week.)


Sentry sponsor



📒 Articles & Tutorials





Ultimate Guide to Visual Testing with Playwright — ‘Ultimate’ is always a gamble in a title, but this tutorial is pretty thorough and will get you several steps down the road of fetching pages and making comparisons, all from JavaScript.


Mike Stop Continues (BrowserCat)






Streaming HTML Out of Order Without JavaScript? — An interesting, yet short and sweet, demo of a browser feature that enables a technique you may not have imagined possible without JavaScript – note that support is still rather fresh in Firefox.


Chris Haynes






Effortless GraphQL with Hasura and TypeScript Functions — Connect to your data sources, generate a GraphQL API, and deploy globally — instantly. Want to write and use TypesScript functions directly in your GraphQL API? With Hasura, you can. Check it out.


Hasura sponsor






▶  Drizzle ORM Explained in 100 Seconds — The latest bitesize video from the always educational Fireship channel covers Drizzle ORM, a fast, TypeScript-based way to work with a variety of database systems across numerous JavaScript platforms, from Node to Bun, Deno Deploy, Supabase Functions, Cloudflare Workers, and more. If you need more, there’s ▶️ a 13 minute ‘crash course’ to learning Drizzle, too.


Fireship




Fireship has a ▶️ Expo in 100 seconds video out too, providing a rapid explanation of what the React Native-based toolkit is about.





JavaScript Bloat in 2024 — What’s the average size of JavaScript code downloaded per website? Spoiler alert: it’s a lot and will make anyone from the 56k dialup days cry.


Nikita Prokopov






Tiny Predictive Text — Using 2MB of JavaScript with no AI or LLMs in sight (but using a variant of a Markov chain).


Adam Grant






Coroutines and Web Components“We will see how coroutines can be used to model web components in a different way, and why you might like it.”


Laurent Renard





Using Web Bluetooth to Read BBQ Temperature Sensor Data

Rik Schennink



🛠 Code & Tools








Million Lint: A Linter for React PerformanceMillion’s mission is to make React apps faster and the new VS Code extension Million Lint takes a new approach: imagine ESLint but for suggesting performance improvements.


Aiden Bai






Your Google Translate for UI ↔️ Code — Don’t get lost in translation. Build UI with code and copy clean JSX off your design.


UXPin Merge sponsor






BlockNote 0.12: A 'Notion-Like' Block-Based Text Editor0.12.0 is a significant release for this ProseMirror and TipTap-based editor that lets you drag and drop blocks, add real-time collaboration, add customizable ‘slash command’ menus, and more. It has an all new homepage, too, along with new examples.


TypeCell






PixiJS v8: Build Striking 2D WebGL ExperiencesPixiJS is a very mature, long standing rendering library that abstracts away all the pain of building fast 2D graphical experiences for the Web. v8 boasts significant performance improvements, a WebGPU-backed renderer, and a variety of API improvements. If you’re new to Pixi, there’s an interactive tutorial to show you the ropes.


PixiJS Team






NSFW JS 4.1: Client-Side Indecent Content Checking — A client-side TensorFlow.js-powered option for detecting potentially indecent images before they even go over the wire. It’s not fool proof but may help as another layer of protection for both you and your users. GitHub repo.


Infinite Red, Inc.










Plotly 2.30: A JavaScript Graphing Library — A high-level, declarative charting library, built on top of D3 and stack.gl, with over 40 chart types, including 3D charts, statistical graphs, and SVG maps.


Plotly, Inc.






ONBOARDING_LIB: A Headless Onboarding Library — An onboarding library for building accessible, customizable and persisted onboarding flows in React apps. The site itself is an example of such a flow.


Neftic Oy






Finder 3.2: CSS Selector Generator — Given an element, it produces the shortest possible, but precise, selector that reaches that element.


Anton Medvedev






Set Your JavaScript Job Hunt on Autopilot — First 2 Apply automatically monitors most popular job sites and sends you instant notifications for new listings. Try it for free.


First2Apply sponsor






  • Partytown 0.10.0 – Move intensive third-party scripts off the main thread and into a web worker.




  • AdminJS 7.7 – Automatic admin interface for Node.js apps.




  • visx 3.9 – Airbnb's React-based visualization primitives.




  • NVM Desktop 3.2 – GUI for Node Version Manager.




  • melonJS 17.0 – Browser-based 2D game engine.




  • NodeBB 3.7 – Node.js based forum system.












02/28/2024





















#​677 — February 29, 2024

Read on the Web





JavaScript Weekly








PGlite: PostgreSQL in WebAssembly (and TypeScript) — People have brought Postgres into the browser before, albeit atop a Linux VM WASM layer. PGlite, however, packages a WASM build of Postgres into a TypeScript library that can be run in the browser or on Node.js or Bun and is only 3.7MB gzipped. You can play with a live deployment here.


ElectricSQL / Neon






JSR: What We Know So Far About Deno’s New JS Package Registry — The Deno team is cooking up JSR (still behind a waitlist), a new JavaScript package registry (not merely a package management tool, like pnpm or Yarn) to address various npm limitations, including for Node users who don't even plan to use Deno.


Sarah Gooding (Socket)






Practice Your JavaScript through Vanilla JS Projects — Join Anjana Vakil for this extensive video course on vanilla JavaScript projects. Tackle real-world tasks and learn how to use asynchronous JS, Browser APIs, the DOM, Node.js, GitHub Actions, and more.


Frontend Masters sponsor






Parcel v2.12.0: Now with Bun-Style Macros — The popular zero-config build tool introduces support for bundle-time macros, such as those offered in Bun. The value returned by a macro is inlined into the bundle in place of the original call. There’s also a new online REPL where you can play with Parcel in the browser with support for most of Parcel’s features.


Parcel.js




IN BRIEF:




  • TypeScript 5.4 RC has been released, packing lots of small changes, as well as Object.groupBy, Map.groupBy, and type narrowing enhancements.




  • Christopher Chedeau (aka Vjeux) has written about his 12 years at Meta, including being involved in the early days of both React and React Native.




  • A summary of recent updates to the V8 JavaScript engine.




  • 🇪🇺 Fed up with Apple's nonsense around removing PWA support in the European Union? Open Web Advocacy has an open letter you can co-sign.




RELEASES:




  • Express.js 4.18.3 – The first release in sixteen months. 😁




  • Deno 1.41 – Now with much smaller deno compile binary sizes, official Linux ARM64 binaries, and improvements to Node.js compatibility.




  • Playwright 1.42 – Browser remote control and runner toolkit.




  • Babel 7.24.0 – Supports importing JSON modules and updates its Decorators implementation.




  • TinyMCE 7.0 – Rich text editor component – now GPL licensed.









Frontend Developer 🔝 (Fully Remote 🌐 Or In Our Office In Stockholm, Sweden 🇸🇪) — Do you get excited when you hear Next.js, Supabase, GraphQL? Let’s talk.

ZCO Stockholm job






📒 Articles & Tutorials





Reporting Core Web Vitals with the Performance API — The Performance API provides an interface to ways to measure and evaluate Web performance metrics from JavaScript. Geoff demonstrates how to use its capabilities to do your own performance reporting.


Geoff Graham






A Fun Line of JavaScript Code — Namely, using Promise.race to search through audio files forwards and backwards at the same time and stop as soon as the relevant metadata is found.


David Bushell






How StackBlitz Built a T-Shirt That Renders Itself — How we designed a t-shirt using valid JavaScript that is also the source code of the image itself (and how you can get one).


StackBlitz sponsor






Next.js vs. Remix: A Developer's Dilemma — Compares a variety of areas, from how various techniques are implemented through to deployment, support, and popularity.


Chetan Gawai






Why Does is-number Have 70+ Million Weekly Downloads? — In part, it’s included in a chain of dependencies used by a very popular project.


Shubham Jain






17 Equations That Changed the World - Rewritten in JavaScript — This is quite neat if you enjoy a bit of math.


RunJS





How to Create Sidebar Navigation with Astro, Tailwind CSS and Alpine.js

Michael Andreuzza





▶  Use AWS Amplify Gen 2 to Create a Full Stack App with Type Safety

Erik Hanchett (AWS)





A Look into JSDoc as an Alternative TypeScript Syntax

Alex Harri



🛠 Code & Tools








PrimeVue 3.49.0: Vue UI Component Library — A mature, rich set of open source UI components for Vue developers we first mentioned a few years ago. This new release includes components to enter one time passwords and a ‘stepper’ for wizard-style workflows. There’s also a new optional declarative syntax for using components that makes their code easier to read and write.


PrimeTek






Authentication & User Management for the Modern Web — Add authentication & user management easily with Clerk using our Quickstart guides. Purpose-built for React & Next.js.


Clerk sponsor






Waku: A Minimal Server-Side React Framework — From the maintainer of Jotai, Valtio, and Zustand, Waku is a lighter alternative to something like Next.js but that still opens up the potential of server components, shared components, and elegant routing, in a simpler, easier to apply way.


Daishi Kato






Embla Carousel 8: Carousel with Fluid Motion and 'Swipe Precision' — Carousels are a popular, though often maligned, UI element, but the examples work pretty well for us. Library agnostic, but has easy integrations for React, Solid, and Angular, if you need them. The v8.0 release notes touch on many new features.


David Jerleke






Readability.js: Extract the Readable Content from an HTML Document — A standalone version of the library used to power Firefox’s Reader View. It's been a few years since we've linked to this, but it continues to be improved.


Mozilla










Viz.js: Work with Graphviz in the BrowserGraphviz is a suite of open source graph drawing tools of some 30+ years’ vintage. Viz.js is a WebAssembly Graphviz build that brings some of its functionality into the browser, as seen in the homepage's live demo (above). GitHub repo.


Michael Daines






🎨 Vue Color Wheel: A Wheel-Style Color Picker for Vue 3 — Far from a new idea, but elegantly demonstrated on its homepage. Coloris is a nice, vanilla alternative in this space, if the wheel view isn't a necessity.


Robert Shaw






Neon is Postgres from the Future — Scales to zero when idle, autoscales based on load, provisions instantly. Generous free tier - no credit card required.


Neon Serverless Postgres sponsor






WXT: Next-Gen Web Extension Framework — A framework for creating cross-browser extensions. You can target Chrome, Firefox, Edge and Safari. Plasmo is another option in this space.


WXT













02/21/2024





















#​676 — February 22, 2024

Read on the Web





JavaScript Weekly








📊 Apache ECharts 5.5: The Powerful Visualization LibraryECharts’ big selling point, beyond being a well supported Apache-backed project, is its balance of power and simplicity. You can do a lot with it (check out the many examples here) without the code becoming complex. v5.5 enhances its ESM support, adds server-side rendering support, and lets you make incomplete pie charts.


Apache Software Foundation




💌 If you need to be convinced further, check out Alice GG's Love Letter to Apache ECharts.





📣 The React Team Shares What It's Been Working On — Work on React Compiler has progressed with it now powering Instagram’s prod site ('React 19 Will Be Compiled' goes into depth on what the compiler means for most React devs). We also learn React 19 is on the way and will include breaking changes to support things like Web Components.


The React.js Core Team






Register for POST/CON 24! Coming April 30-May 1 — Join hundreds of developers in San Francisco on April 30 and May 1 for hands-on API workshops, presentations from industry leaders, and a big reveal of Postman product updates.


Postman sponsor






Redwood v7.0: The React + GraphQL App FrameworkRedwood is a full-stack Web framework that takes an opinionated approach, bringing together React, GraphQL, Prisma, and TypeScript, with a focus on building complete apps rapidly. v7 includes a new observability tool called Redwood Studio, realtime GraphQL features, and more.


RedwoodJS Community






Node.js's 2023 Summarized — Rafael, of the Node.js TSC and Fastify core team, shares a useful update on the evolution of Node.js over the past year, how the team ensures Node is well tested and reliable, changes to Node’s vendor dependencies (of which it gained three in 2023), as well as enhancements to Node’s security and Web presence.


Rafael Gonzaga




IN BRIEF:



RELEASES:




📒 Articles & Tutorials





A Guide to Using localStorage in Modern AppslocalStorage has been supported in most browsers for fifteen years plus now, so it’s a reliable way to store data client-side, though there are still situations where you wouldn’t want to use it. A good primer, but with a focus on alternative options.


RxDB Project






How to Set Up a Basic Node Server App with TypeScript in 2024 — Popular dev educator Jason with a quick tutorial on how to set up a modern Node project with TypeScript, live reloading, and loading in environment variables.


Jason Lengstorf






Transformational Auth & Identity | Userfront — Userfront is an auth & identity platform that transforms your business to serve free, freemium and enterprise customers.


Userfront sponsor






▶  Pac-Man in JavaScript in 1 Hour — I felt old when Ania said “if you’ve never played Pac-Man before..” 😅 – nonetheless, she’s back with another of her fantastic, thorough walkthroughs.


Ania Kubów






HTMX vs React: A Complete Comparison — It strikes me as tricky to compare two very different approaches to what will often be distinct use cases, but undoubtedly people will want to weigh them up against each other, so here you go.


Antonello Zanini and Dan Ackerson






How Qwik Differs From React HydrationQwik works quite differently to the React approach.


Paul Scanlon (The New Stack)





An Ultimate Vim Vue Setup — How to set up Vue/Nuxt autocompletion for Vim/Neovim.

Nikola Đuza



🛠 Code & Tools








Perspective 2.8: Fast Streaming Data Visualization via WebAssembly — A data visualization component, well-suited for large and/or streaming datasets, that can be used from both JavaScript and Python. It’s been fun watching this library improve over the past couple of years. The docs have been improved a lot. GitHub repo.


Perspective Authors






Hookdeck: The Amazon EventBridge Alternative — Receive, send, and route messages across your event-driven applications with an event gateway for engineering teams.


Hookdeck sponsor






Vuestic Admin: A Vue 3 Admin Template — A recently redesigned, modern admin template using Vue 3, Vite, Pinia, and Tailwind CSS. Check out the live demo or GitHub repo.


Epicmax LLC










🗓 Tommy's Inclusive Datepicker: A Human-Friendly Date Picker — Try out this Web Component on the homepage itself. The user can type natural language phrases like “Next Friday” or “in 30 days” and the picker will move to the correct date. GitHub repo.


Tommy Feldt






Skeleton: Reactive, Accessible Svelte UI Toolkit — A cool feature of the homepage is you can try out the different built-in themes, including dark and light modes, using a drop-down at the top.


Skeleton Labs






Dax: Cross-Platform Shell Tools for Node — Similar to Google's zx but uses a cross-platform shell with common built-in commands so more code will work across platforms. Dax was originally written for Deno but now supports Node too.


David Sherret






js-tokens 9.0: A Tiny JavaScript Tokenizer — A regex-powered ‘almost spec-compliant’ JavaScript tokenizer.


Simon Lydell






A Sudoku Solver Implemented in the TypeScript Type System? — An appropriate use of the 🤯 emoji here, I think!


Roy Li






Save 30% on Your POST/CON Ticket — Time is running out to save 30% on POST/CON 24. Don't miss out on Postman’s biggest user conference ever.


Postman sponsor













02/19/2024

In the ever-evolving landscape of eCommerce, staying ahead requires constant adaptation and strategic insights. The Fospha State of eCommerce Report for Q1 2024 brings valuable data to the forefront, guiding marketers, advertisers, business owners, and agencies in the eCommerce industry on where to channel their efforts for maximum return.   The report reveals a significant underinvestment […]


The post Fospha’s Insights to Unlock eCommerce Growth in 2024 appeared first on Search Engine Watch.