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

Industry News

11/29/2023
Every Framework Everywhere All at Once





















#​665 — November 30, 2023

Read on the Web


JavaScript Weekly








Eliminating JS Framework Lock-in with Web Components? — Can you build an app where each component is using a different framework? Amazingly, yes. Web components aren't new but are 'having a moment' and Jake demos an interesting, if contrived, use case. He explains: “Say you’re writing a Vue app and you really want to use a library that’s only available as a React component. You can wrap that library in a web component and use it in your Vue app...”


Jake Lazaroff






Announcing Deno Cron — Deno adds a cron-style feature to run code on a pre-defined schedule using Deno.cron. This works locally (behind --unstable) in a long-running process, but on Deno Deploy it analyzes the definition and runs the code on time, as you’d expect, with no extra work needed.


Zinkovsky and Jiang (Deno)






Feel the Power of More Than 420,000 Teammates and Work #LikeABosch — At Bosch, we shape the future with high-quality technologies and services to inspire people and improve their lives. And it’s our people who make us remarkable. Our success is your success. Let’s celebrate together. Learn more.


Bosch sponsor






The Biome Formatter Wins the 'Prettier Challenge' — Two weeks ago, the creator of Prettier put up a $10k bounty for a Rust-powered code formatter that could pass over 95% of Prettier’s tests. Biome, the toolchain forked from Rome, has already managed to claim the prize, topped up by further contributors.


Biome




🤔 There's a post from the Prettier POV where @vjeux explains why he offered the bounty: he felt a 'a lack of competition' was holding Prettier back.



IN BRIEF:





RELEASES:




  • Passport 0.7 – Popular authentication middleware for Express-based apps.




  • eta (η) 3.2 – Embedded JS template engine for Node, Deno, and browsers.




  • Fable 4.6 – F# to JavaScript transpiler.





📄 Articles & Tutorials








▶  10 JavaScript Changes You (May Have) Missed in 2023 — We’ve covered most of these, but this is still a productive refresher in just six minutes, covering things like toSorted(), iOS Web Push, Next.js updates, Angular 17, and the rapid rise of Bun.


Fireship on YouTube




Fireship is a great channel for these sort of quick-fire roundups, and if you want more 100+ JavaScript Concepts You Need to Know is a fun one.





Tracking Frontend JS Exceptions with Playwright Fixtures — Playwright is commonly used to test frontend apps and ensure they’re rendering and behaving correctly, but what if you want to be sure the underlying JavaScript is working as expected too? Stefan has some tips.


Stefan Judis






Lesser Spotted React Mistakes and How to Avoid Them — Read about common pitfalls that occur when writing React code. Cut, paste, & try the included examples in your own code.


Sonar sponsor






A Deep Dive into CheerpJ 3.0: A WASM JVM for the Browser — A look at an interesting WebAssembly-based Java Virtual Machine that runs client side in the browser, opening up bidirectional Java-JavaScript interop, if you need it. Note that it’s commercial, but can be used free for personal projects and evaluation.


Pignotti, Bates, and De Rossi






A Simple WebSocket Benchmark: Node vs Bun — Using as ‘textbook’ an example of WebSocket communication as possible, the author pits Node and Bun against each other.


Daniel Lemire





Svelte Through the Eyes of a React Developer

Ido Shamun



🛠 Code & Tools








FullCalendar: A Full Sized JavaScript Calendar Control — An interesting option if you want a Google Calendar style experience for your own apps. Has connectors for React, Vue and Angular. The base version is MIT licensed, but there’s a commercial version too with extra features.


Adam Shaw






Knip 3.3: Find Unused Files, Dependencies and Exports — Finds unused files, dependencies and exports in your projects and lets you cut/knip them away.


Lars Kappert




😍 Knip has continued to evolve a lot this year, and now also has a snazzy new homepage. You can also learn more about what's new in 3.x.









Inline REPL Anywhere in Your Code — Execute context aware code snippets directly in your editor, anywhere in your project, even if your application/tests are not working.


Wallaby Team sponsor






Syntax.js: Code Syntax Highlighting Library — There are many long standing options in this area, such as Prism and highlight.js, but it’s interesting to see a fresh and lightweight take.


William Troup






ai2html: Turn Adobe Illustrator Files into HTML — We noticed this tool being used by the Financial Times to share graphs they've designed, and the result is really good. This project isn't new, but we haven't shared it before, it's well maintained, and there are lots of examples.


The New York Times Company






aws-lite: A New Node.js-Powered AWS API Client — AWS does a good job with its APIs and tooling, but sometimes their approach is a little heavyweight. aws-lite provides a simpler, faster option. “You can think of it as a community-driven alternative to AWS’s JavaScript SDK.”


Begin






Hire Vetted Developers in US Time Zones, Fast


Revelo sponsor








NOTABLE QUOTABLE




“As a principal engineer, I view it as my role to keep us off the bleeding edge as much as possible. That way, when we really do need to innovate, we have the capacity to do so. And when we don't need to, we can go really freaking fast.”




___
Nicole Tietz












11/22/2023
The unbearable weight of massive JavaScript





















#​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:





RELEASES:




📄 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








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.










11/21/2023
sesseeses
11/15/2023
Digging into explicit resource management





















#​663 — November 16, 2023

Read on the Web


JavaScript Weekly








Prettier 3.1 Released — The popular opinionated code formatter has a new release including support for the new control flow syntax in Angular 17 plus a new, experimental formatting option for ternary expressions (as in x ? y : z) explained in more depth in "A curious case of the ternaries."


Alex Rattray




🤔 With an aim to making code formatting even faster, Prettier's co-creator has put up a $10k bounty for any Rust project that passes >95% of Prettier's tests.





Exploring Explicit Resource Management in JS — A practical look at the idea of explicit resource management, an idea both currently at stage 3 in TC39 (and partly supported in TypeScript 5.2) that makes it easier to ‘clean up’ resources once they are no longer used or needed.


Ilia Pozdnyakov






Build Interactive, Live Video Applications with Amazon IVS — Amazon Interactive Video Service (Amazon IVS) allows developers to create dynamic video experiences, such as collaborative real-time livestreams. Check out the new ivs.rocks to find code samples, demos, and other resources. Click here to get started.


Amazon Web Services (AWS) sponsor






On HTML Web Components — “With web components, you might even say React’s component model is being ported to the browser. But it’s being done in a way that works to enhance how the web already works, not replace it”.


Jim Nielsen






A Review of Lightweight JavaScript Frameworks — This overview is targeted at Django (i.e. Python) developers but if you, too, want to avoid larger frameworks like React or Angular, you might appreciate this look at numerous alternatives from Stimulus and htmx to more oblique options like Laravel Livewire.


Michael Yin







RELEASES:




📄 Articles & Tutorials





67 Browser-Based Debugging Tricks — A list of useful, ‘not-obvious’ hacks to get the most out of the browser’s DevTools. Assumes a reasonable existing understanding of said tools.


Alan Norbauer






Exploring V8's Strings: Implementation and Optimizations — Note: This is very technical and most JavaScript developers do not need to go this deep. That aside, this is a fantastic look under the covers of how the V8 engine handles strings, including the optimizations used that allow it to go toe to toe with languages like C++.


Ilia Pozdnyakov






JavaScript Scratchpad for VS Code — Quokka.js is the #1 tool for exploring/testing JavaScript with edit-continue experience to see realtime execution and runtime values.


Wallaby Team sponsor






▶  An Overview of Angular 17's New Built-In Control Flow — Angular 17 was released last week and a significant enhancement was support for a new syntax in templates that looks and feels more JavaScript-y.


Dmytro Mezhenskyi






Moving Back to React (from Preact) — Preact felt like a logical, lightweight choice to this team at one time, but they’ve switched to React for better compatibility with Next.js, among other things. Their page weight is up slightly, but they feel the tradeoff is worth it.


Ante Barić (Daily․Dev)






My Journey to 3x Faster Builds: Trimming Barrel File Imports — “I maintain a small frontend application (4K LOC) which uses Vite as the compiler. The production build, using npm run build, was taking 26 secs on Github Actions. It seemed awfully slow for such a small application. I decided to investigate why.”


Ramana Venkata






Can Bun Eat Node’s 'Lunch'? — An experiment in migrating a codebase (a restaurant voting app called Lunch) from Node over to Bun and seeing how it fares.


Jeffrey Carl Faden






Feel the Power of More Than 420,000 Teammates and Work #LikeABosch


Bosch sponsor






How to Use NPM Packages Outside of Node — Learn how to run NPM packages in ‘other places’ like serverless platforms, the browser, and beyond.


George MacKerron (Neon)





What I Learned Building an Audio Plugins System for the Web

Ben Wiley





Rust for JavaScript Developers: An Overview of Testing

Joshua Mo



🛠 Code & Tools









gsplat.js: A Gaussian Splatting Library — Gaussian splatting is an increasingly popular graphics rendering techniques where rather than render millions of tiny, textured triangles in a scene, you get a more wild paintball-like splatter fest, where each paintball creates a smooth, colorful blob instead of a rigid shape. This demo is both simple and striking.


Dylan Ebert






Reveal.js 5.0: The HTML Presentation Framework — A way to build presentations using standard Web technologies. The project’s homepage is, itself, such a presentation. v5.0 adds support for ‘scroll mode’ which essentially turns presentations into more typically scrolling Web experiences – demo.


Hakim El Hattab






🖍️ Marker.io: Collect Bug Reports With Annotations & Session Replay — Collect feedback on live websites. Get dev-friendly bug reports with screenshots, URLs, console logs & session replay.


Marker.io sponsor






Datasheet Grid: An Airtable-like React Component — If you’ve got an array of objects and you want a way for users to manipulate them, this is for you. It’s not going to replace a spreadsheet or an extensive data grid framework, but it’s a mature solution featuring smooth animations, virtualized rows/columns, keyboard navigation, and more.


Nicolas Keller






Perfect Freehand: A Library for Creating Better 'Freehand' Lines — You can try it out here. Makes your e-signature not look like chicken scratch! Might be useful for drawing apps.


Steve Ruiz






Wild Wild Path v5: Object Property Paths with Wildcards and Regexps — A 'wild' way to access properties in objects (which can be deeply nested) by way of string based queries that support wildcards and regexes. The examples help communicate the idea.


ehmicky






@storybook-test: More Streamlined and Powerful Storybook Testing — @storybook/test consolidates the API of @storybook/jest and @storybook/testing-library into a new, single package, powered by Vitest.


Kasper Peulen








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).








NOTABLE QUOTABLE




“When you choose a language, you’re choosing more than a set of technical trade-offs – you’re choosing a community.”




___
Joshua Bloch












11/08/2023
Angular is back





















#​662 — November 9, 2023

Read on the Web


JavaScript Weekly








Reintroducing Angular with Angular v17 — Angular first appeared in the shape of AngularJS in 2010 and helped launch a wave of large-scale JavaScript frameworks. Angular remains popular in many use cases but is often overlooked in favor of newer options. v17 takes a leap forward in both features and vision, with the team rebranding Angular and repositioning it as a modern solution:




  • Angular.dev is an all-new docs site and home for the project (the new guides look fantastic). It's in beta till Angular v18 is released – you can learn more about it here.

  • Hydration is now production ready.

  • Vite and esbuild are the default for new projects.

  • Improved support for creating server side apps.

  • New, improved built-in control flow to make code less verbose.

  • Google pulled out all the stops for ▶️ the 'Special Angular Event' – an hour of talks, interviews and discussions to bring you up to speed.


Minko Gechev and the Angular Team






Bare Metal JavaScript: The JavaScript Virtual Machine with Miško Hevery — Learn how high-level JavaScript turns into low-level CPU instructions. Build up your mental model of JavaScript's performance characteristics through understanding the JavaScript Virtual machine under the hood!


Frontend Masters sponsor






Mastering DOM Manipulation with Plain JavaScript — A mega collection of hundreds of examples of doing things like selecting text, manipulating elements, resizing things, scrolling, and such – all by using the DOM and browser APIs with no external libraries. You Might Not Need jQuery is another classic resource in a similar vein.


Phuoc Nguyen






▶  Why Signals Are Better Than React Hooks — When Preact’s Marvin Hagemeister pops up in the comments saying “this is by far the best video about signals and why they are so exciting. I love the way you demonstrate it by coding along and moving an app over to signals,” it should bump a video up to the top of the Watch Later playlist.


Web Dev Simplified







RELEASES:




📄 Articles & Tutorials








How to Do a JS to TypeScript Conversion — Chris, who led the conversion of a 150k LOC app to TypeScript, addresses a common question: do-it-as-you-go or follow the dependency graph?


Chris Krycho






Exploring the Headless Component Pattern for Composing React UIs — An engineer at Atlassian takes us on a thorough and practical journey into the concept of headless components and the pattern of having reusable logic and behavior separate from the presentation of UI elements.


Juntao Qiu






📞 Calling JavaScript Devs! Sentry Launch Week is Coming. Join Online


Sentry sponsor






▶  8 Talks from JetBrains' JavaScript Day 2023 — JavaScript Day is an annual virtual event featuring a handful of talks on diverse JS related topics. This year, Romulo Cintra shows us how TC39 works on language proposals, Stefan Baumgartner spoke about the lies we tell ourselves using TypeScript, and more.


JetBrains






Writing Components That Work in Any Framework — Looks at why web components can be difficult to adopt, and shows how using a higher-level library can let us “easily write components that work everywhere”.


Andrico Karoulla





Build a Lightweight Code Generator with TypeScript and JSON Imports

John Ruble





Deploying a Vue Application with Netlify and GitHub

Ezekiel Lawson (Telerik)





Don't Disable Buttons, Do This..

Chris Ferdinandi



🛠 Code & Tools








Moveable: A Library for Dragging, Resizing, Scaling and More — If you want to offer up physical manipulation of elements (warping, pinching, rotating, etc.) this library could help. Its homepage is a fun self-demo and there are packages for integrations with common frameworks.


Younkue Choi






🔥 Need to Eliminate Tech Debt Without Falling into Dependency Hell? — Upgrade seamlessly and let us tackle tech debt with our fixed-cost, monthly maintenance service (starting at $2k/month).


UpgradeJS | Tech Debt Services sponsor






🖼  image-dimensions: Get the Dimensions of Images — Sindre’s latest creation is a simple but comprehensive one. A way to get the size (as width and height in pixels) for JPEG, PNG, APNG, and GIFs in any modern JS environment.


Sindre Sorhus






main-thread-scheduling 9.0: Consistently Responsive Apps While Staying on the Main Thread — An easier alternative to Web Workers that uses the approach of stopping heavy tasks on the main thread from executing when the user interacts with the UI. This new version adds afterFrame (like requestAnimationFrame but called after frame drawing has rendered), queueTask, and extensions to promises.


Antonio Stoilkov






React Components for the Google Maps JavaScript API — react-google-maps is the ‘first Google-sponsored library’ for integrating Google Maps JavaScript API components into a React app.


Mike Pegg (Google Cloud)






capture-website 4.0: Capture Screenshots of Websites — A Puppeteer wrapper to capture screenshots of site from Node or the command-line.


Sindre Sorhus







Never Stop Learning and Work #LikeABosch — At Bosch, you always keep growing. Upskill yourself into countless new roles, positions and opportunities. Learn more.


Bosch sponsor










⌘K-sv: A Fast, Composable, Unstyled Command Menu for Svelte — A port of ⌘K, a React-based command menu component.


huntabyte








NOTABLE QUOTABLE




“The first 90% of the code accounts for the first 90% of the development time. The remaining 10% of the code accounts for the other 90% of the development time.”




___
Tom Cargill





🚀 Everyone's gone to the moon..








Spacekit.js: A Library for Creating 3D Space Visualizations — Not just any old 3D space, but actual space – think planets, stars, and meteors. A library like this comes, of course, with many examples to try. GitHub repo.


Ian Webster