Web Tools #422 - CSS Modules, JS Libraries, Build Tools, React Native

Advertisement

In case you missed it, the HTML/DOM spec is introducing something called CSS Module Scripts, as outlined in this pull request on the WHATWG GitHub repo.

Dan Clark of the MS Edge team explains:

"This change extends the ES Script Modules system to include CSS module scripts. These will allow web developers to load CSS into a component definition in a manner that interacts seamlessly with other module script types."

The explainer document that he links to in that PR goes over some of the reasons CSS modules are needed (like we need a reason!) in the current landscape where many devs are doing module-based CSS:

• Problems occur when using a `style` element in document scope or in shadow root
• Inlined CSS text as a string in JavaScript has performance issues
• Using fetch() to insert CSS makes things overly complex

JavaScript Libraries and Frameworks

Web Scraping API
Extract the data you need with scrapestack’s powerful web scraping API. Get Your Free API Key!   sponsored 

Pancake
A lightweight, fast, and easy-to-use HTML5 2D game framework powered by HTML Canvas.

Turf
A JavaScript library for spatial analysis that includes traditional spatial operations, helper functions for creating GeoJSON data, and data classification and statistics tools.

Baileys
A lightweight full-featured TypeScript/JavaScript WhatsApp Web API.

Tempura
A fast, customizable, and lightweight template engine with syntax similar to Handlebars.

CalDOM
An agnostic, reactive, and minimalist (3kb) JavaScript UI library with direct access to the native DOM.

VibeJS
A small (under 14kb minified) component-based library for building user interfaces, with built-in drag-and-drop.

AdonisJS
A fully featured web framework for Node.js that includes everything you need to create a fully functional web app or an API server.

Solid
A declarative, efficient, and flexible JavaScript library for building user interfaces.

Handsfree.js
Quickly integrate face, hand, and/or pose tracking to your front-end projects in a snap.

txiki.js
A tiny JavaScript runtime built with QuickJS and libuv.

On the Release Radar:

• Quasar - Vue 3 library at version 2+
• Angular - Now at version 12+

Build Tools, Bundlers, etc.

The Reshape
Stay up to date with AI 🤖 & Data Science 📊 by reading top-notch articles. We are the first to spot hot news (data proven!). At the same time, we scour the Internet to find the most overlooked publications. Get a package of both in a concise form delivered straight to your inbox for free 📬.   sponsored 

eslint-nibble
Gives you a quick overview of your failing ESLint rules then shows you the detailed error reports for one rule at a time.

Webpack Stats Diff
GitHub action to print Webpack stat diffs in your pull requests.

Fiddly
Create beautiful and simple HTML pages from your Readme.md files.

Next.js + graphql-let plugin
Frictionless automatic GraphQL TypeScript generation setup for Next.js.

RisXSS
Eradicate all XSS flaws of your React or Vue application using a single ESLint rule.

Ship.js
Automated, asynchronous, and collaborative release management for your JavaScript apps.
 
Juke
A build tool for Node.js apps, inspired by a .NET build tool with a similar name.

Storybook Builder for Vite
An experimental plugin to run and build Storybooks with Vite.

Deno Deploy
A globally distributed JavaScript VM that runs JavaScript, TypeScript, and WebAssembly at the edge, worldwide.

yaup
An unopinionated esbuild CLI with a minimal API for easier maintenance.

Serverless Next.js Component
A zero configuration Next.js serverless component for AWS Lambda@Edge aiming for full feature parity.

React Native and Mobile Tools

The Reshape
Stay up to date with AI 🤖 & Data Science 📊 by reading top-notch articles. We are the first to spot hot news (data proven!). At the same time, we scour the Internet to find the most overlooked publications. Get a package of both in a concise form delivered straight to your inbox for free 📬.   sponsored 

React Native Notifications
Handle all the aspects of push notifications for your app, including remote and local notifications, interactive notifications, silent notifications, and more.

rnsvg-generator
Convert any SVG file into a programmable React Component that's compatible with react-native-svg.

Sentry SDK for React Native
Official React Native SDK for Sentry, the app monitoring and error tracking service.

Hotpot
A one-stop site for creating and downloading graphics and templates for device mockups, app screenshots, and lots more.

react-native-zoomable-view
A view component for React Native with pinch to zoom, tap to move and double tap to zoom capability. Zooms images, text, and complex nested views.

react-native-progress
Progress indicators and spinners for React Native using React Native SVG.

React Native Easing Gradient
Create smooth gradients in React Native using easing functions to avoid linear gradients with hard edges.

react-native-popable
Popover and tooltips component for React Native, built in TypeScript.
 
React Native Numpad
A simple React Native number pad for quickly updating multiple number inputs.

react-native-collapsible-tab-view
A cross-platform Collapsible Tab View component for React Native.

react-native-dialog
A flexible pure JavaScript React-Native dialog that follows the native UI guidelines closely.

FlutterFlow
Build Flutter apps visually using a drag-and-drop interface that includes a decent free plan.

Commercial Apps and Classifieds

This is a new section of the newsletter that contains brief links to commercial (non-free) apps and paid classifieds. You can submit a link for consideration or you can buy a classified link (will be marked "ad").

Swetrix - Privacy-friendly, advanced, and customizable analytics platform.

BugBug.io - Automated browser testing and QA with no code.

JavaScript E-Books Bundle - 3 JavaScript E-Books for $9 USD (50% off).  ad 

Lemon - Alternative and intuitive UI for AWS.

Slip - Platform to create and sell interactive programming courses.
 

A Tweet for Thought

One of the first ever Tweets I saved for this section of the newsletter, but never used is this absolute classic Facebook screenshot that I have no idea if it's real but who cares because it's funny.

 

Send Me Your Tools!

Made something? Send links via Direct Message on Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
 

Before I Go...

Code House claims to be the world's biggest storehouse of developer cheatsheets. Don't know if it's true but worth a visit.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

Want to get notified of new issues via Twitter, Telegram, or Messenger? You can sign up using a service called Reachme.

Support this newsletter:
PayPal.me  /  Patreon / GitHub Sponsors  /  E-Books / Buy Me a Coffee