Issue #422 (CSS Modules, JS Libs, Build Tools, Mobile)08/19/21
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
The document then gives the following example code demonstrating how a CSS module will look (it's more or less the same as ES modules):
|
import styles from "./styles.css" assert { type: "css" };
document.adoptedStyleSheets = [
...document.adoptedStyleSheets, styles
];
|
As you can see, the one difference is the assert statement, which the doc explains:
"CSS modules will be imported using the same import statements currently used for other ES modules, with the addition of an import assertion module type check."
I'm sure you'll agree this is all great news. So far, implementation of the feature has started with Chromium behind a flag (which means all Chromium-based browsers, including Edge and Brave) and it's being discussed for Firefox and Safari as well.
It does seem a little strange, as others have pointed out, that this feature is going to be part of the HTML/DOM spec rather than the ECMAScript spec. Nonetheless, it's certainly something to keep an eye on. I wonder how many CSS-in-JS or similar tools will become obsolete when this feature is ready for production?
Now on to this week's tools!
|
| |
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:
|
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 all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
