Web Tools #450 - New MDN, Frameworks, Build, React

Advertisement

Almost all the content I include in the intro of this newsletter consists of coding tips, usually related to JavaScript or the DOM. One of the most important resources for my research is, of course, Mozilla's web docs, referred to as MDN.

It's exciting to see that the Mozilla team have given MDN a fresh new design that was helped out by the community.

You can read about the redesign in this post on the Mozilla Hacks blog but I'll just briefly point out a few of the highlights.

In addition to the new logo (voted on by the community) and optional dark mode (of course!), I really like the simplicity of the main navigation on the home page. Although I personally prefer to see little arrow indicators on drop-down menu buttons, I like that the navigation is simple and broken down into easy-to-digest sections, nested under "References" and "Guides".

The individual article pages have also been improved. The left and right navigation areas now stay in view while you scroll. I like this because on almost every article I visit on MDN I find myself speed-scrolling either up or down to go to the nav or to visit a specific section (often the browser compatibility table).

And speaking of the browser tables, those too have been simplified and redesigned. Version numbers are hidden so you only see yes/no indicators. If you want more details, you can click on a check mark or red "X" to see where browser support started.

There's lots more detail in the launch post, including mention of an upcoming optional subscription service called "MDN Plus" that's worth keeping an eye on.

I would guess that 90% or more of the content I've written over the past 10 years has been assisted by some form of research in the MDN docs. And I've probably made at least two dozen edits to the docs myself while doing research over the years. It's a great resource and I'm happy to see Mozilla continues to support it.
 

Now on to this week's tools!
 

Front-end Frameworks

How Modern Treasury Scaled Data Infrastructure Fast
Modern Treasury, the payment operations provider, needed to replace their BI tool with a robust data solution. With Mozart Data, they implemented faster and now over 50% of the company accesses data daily for faster insights. sponsored 

Amigo CSS
A simple, custom-first and intuitive CSS framework tailored for beginners. Based on some interesting concepts explained on the site.

California Design System
A design system for digital teams in California to build accessible, consistent, and performant services and products for California-based users.

Simple.css
A classless CSS framework that makes semantic HTML look good by means of some sensible and attractive defaults for all the different HTML elements.

Hibiki HTML
A powerful new web framework for creating modern, dynamic, front-end applications without JavaScript, that can be fully scripted and controlled by back-end code.

nextjs-components
A collection of React components transcribed from Vercel's design system.

remix-pwa
A template to get a Progressive Web App (PWA) up and running using Remix, the new full-stack web framework.

Konsta UI
Pixel perfect mobile UI components for React, Vue, and Svelte, built with Tailwind and iOS and Material design themes.

SPCSS
Another option for a minimalist, classless framework, this one would especially be good for mainly text-based content.

PlainAdmin
A free dashboard admin template with 100+ UI components and 15+ HTML files.

typescript-nextjs-starter
A non-opinionated TypeScript-based starter for Next.js projects that's highly scalable and designed for developer experience.

AatroX-vue
A minimal and elegant admin dashboard template built with Vue 3, Vite, and Tailwind.

On the Release Radar:

• Amplify UI - Design system + components, has had numerous updates.
• Material Design - Google's popular design system now at version 3.
• Tailwind - Performance gains, workflow improvements, etc. in version 3.
• Mantine - React component library for accessible web apps at version 3

Build Tools, Bundlers, etc.

Find, Visualize and Apply the Hidden Gems in Your Spam Inbox
Checkmate is the first tool ever built to sort, visualize and apply the deals from your spam inbox while you shop, finding hidden gems and saving early users an average of $40 per checkout. It’s completely free! Try Checkmate today!  sponsored 

dts-cli
A fork of TSDX. A zero-config CLI that helps you develop, test, and publish modern TypeScript packages.

vite-plugin-compile-time
A plugin to generate code at compile time or get data at compile time in your Vite projects.

babel-plugin-esm-rewrite
A babel plugin that rewrites ESM syntax to function calls, so they can be evaluated without ESM context.

tsup
Bundle your TypeScript library with no config, powered by esbuild.

Socket
An open-source GitHub-based security tool to protect your JavaScript apps from malicious dependencies.
 
Motor Admin
Deploy a no-code admin panel in less than a minute for Heroku, Railway, Docker, Ubuntu, or locally on MacOS.

xdm
An MDX compiler that compiles MDX syntax (markdown + JSX) to JavaScript and makes it easier to use MDX syntax in different places.

Mocha Esbuild
Run tests with Mocha compiled by esbuild at lightning fast speeds.

Deno Module Visualizer
View a flow chart of the dependency graph for any Deno package.

jsvu
A JavaScript engine version updater that makes it easy to install recent versions of various JavaScript engines without having to compile them from source.

esbuild react starter
A super simple starter pack for projects using esbuild and React.
 

React Tools

Find, Visualize and Apply the Hidden Gems in Your Spam Inbox
Checkmate is the first tool ever built to sort, visualize and apply the deals from your spam inbox while you shop, finding hidden gems and saving early users an average of $40 per checkout. It’s completely free! Try Checkmate today!  sponsored 

Resembli UI
React framework to build interactive, accessible, and data dense applications quickly.

redux-observable
RxJS-based middleware for Redux that lets you compose and cancel async actions to create side effects and more.

hox
A next-generation state manager for React that uses a single, simple, and efficient API.

react-leaf-carousel
A simple React infinite carousel with lazy loading and responsive support.

React Simple Rating
A simple React component for adding an interactive star-rating indicator to a project.

React Virtual
A library of React hooks for "virtualizing" scrollable elements in React, which basically means performance is improved for larger scrollable components or similar.

Use Form
Easily create forms in React by using custom hooks to manage your forms and use the same form in different components without the Context API.
 
react-number-format
React component to format numbers in an input (e.g. prefix, suffix, masks, custom patterns, etc).

React Responsive Pagination
A responsive React pagination component that intelligently renders to the available viewport width.

React Chicane
A simple and safe router for React and TypeScript.

React Focus Lock
A React component to manage tab focus for better usability in modals, isolated components, etc.

On the Release Radar:

• React Scroll Parallax - Hooks and components for parallax at version 3.
• react-markdown - Markdown component for React at version 8.
• react-use-wizard - React wizard builder now at version 2.
• React Image Crop - React image cropping tool now at version 9.
• reactstrap - React components for Bootstrap 5 now at version 9.

Commercial Tools and Classifieds

These are affiliate links, paid classifieds, and curated commercial apps (i.e. not free, not open source, limited free plan, etc).

TailGrids - 300+ Tailwind CSS UI components, 30 are free, remaining are paid.

Nubo - Deploy global TypeScript apps in seconds, for Node and Deno.

Bytes - A JavaScript newsletter that's informative and entertaining. ad 

Supernova - A design-system-as-a-service platform.

Advanced React - React course with 70+ HD videos across 11+ modules. ad 

WayScript - A developer hub for building internal tools for your team.

Tailwind Master Kit - Tailwind UI components with React/Angular support.
 

A Tweet for Thought

However bad you think you are at Wordle, it can't possibly be as bad as this.

 

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

If you're a history buff, you'll enjoy Wikitrivia, a game that asks you to put Wikipedia-sourced subject cards in the correct order chronologically. Not easy!

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

Support this newsletter:
PayPal.me  /  Patreon  /  GitHub Sponsors  /  E-Books  /  $5 Tip  /  $1 Tip