Web Tools #475 - DOM Examples, CSS Tools, Build, JS Utils

Advertisement

If you're looking for different sources of inspiration for learning something new, MDN's official GitHub account has a repository called dom-examples that includes code examples "that accompany various MDN DOM and Web API documentation pages."

The repository currently holds 38 different folders, each featuring a separate DOM or Web API feature. Each one is named after the API that the demo is based on. Many of those folders contain nested folders for sub-features in that API. Some of those nested folders contain multiple demos. Quite a bit to look at!

You can fork the repository and use it locally to view the files. Or use a service like htmlpreview.github.io to view any of the HTML files directly.

Some examples to demonstrate: The Fullscreen API, the Picture-in-Picture API, and the Web Sharing API.

The Picture-in-Picture API demonstrated

Some of the folders have individual README files that point to MDN's version of the links, but many of them require that you use a different method to view the demo, as I've shown above.

And while we're on the subject of DOM API demos, I continue to maintain a CodePen collection of all DOM-related demos I've included in this newsletter (125 demos as of this writing). And there's also my CodePen collection of ECMAScript demos (137 demos). And if you want all of the tips and demos in book form and want to support my work, you can check out my JavaScript/DOM e-books bundle on Leanpub.

Now on to this week's tools!
 

CSS and HTML Tools

Retool is the Fast Way to Build Internal Tools
Retool offers a component library and app-building framework in one, powerful platform. Ship apps 10x faster with 90+ production-ready UI components.     SPONSORED 

Gradientify
A gradient tool and gallery of 100+ gradients that you can customize, save, download the CSS, or grab any gradient in PNG format.

Tailwindhelper
An online visual tool to fiddle with and convert various CSS properties to their equivalents as Tailwind CSS utility classes.

Reverb
A simple color palette or gradient generator. Just press the spacebar to get a random beautiful palette or gradient that you can save or copy, no sign-in required.

dark-mode-toggle
A custom element that allows you to easily put a dark mode toggle or switch on your site.

react-smooth-corners
Leverage the CSS Houdini API to create a rounded corner look for your React elements.

tailwindcss-perspective
A Tailwind plugin to add utility classes for CSS 3D transforms.

Hand Coding Tools
A collection of tools for HTML and CSS, including premade lists, color combinations, flash cards for learning, URL extractor, and more.

Markdown-Tag
Add Markdown to any HTML using an `md` custom element, with support for GitHub-flavoured Markdown via a `github-md` custom element.

bootstrap-fileinput
An enhanced HTML5 file input for Bootstrap 5.x/4.x./3.x with file preview, multiple selection, and more.

html-midi-player
Fully styleable and scriptable custom elements for playing and visualizing MIDI files on the web.

Subsetting.xyz
A quick reference to find type foundries that support font subsetting (i.e. the ability to only use specific characters in a typeface, to reduce file size).

Build Tools, Bundlers, etc.

Refind
Every day Refind picks 7 links from around the web that make you smarter, tailored to your interests. Loved by 50k+ curious minds. Subscribe for free today.   SPONSORED 

Node File Trace
A node package to determine exactly which files (including node_modules) are necessary for the application runtime. In other words, this is an "NFT" that might actually have practical value.

ts-version
A small TypeScript utility that allows you to access the current TypeScript version from your types.

njt
"npm jump to", a quick navigation tool for npm packages to avoid having to search for a package and navigate manually to its source, homepage, open issues, changelog, etc.

serverless-dns
A self-hosted, Pi-hole-esque, DNS resolver that deploys to Cloudflare Workers, Deno Deploy, and Fly.io.

UpToDate what?
A quick look-up to see what is the latest version of a poplar library, framework, etc.

Chunk
Write code and run it in the cloud via HTTP, webhook, or schedule in less time than it takes to search online how to do it.

Bundle Buddy
Online tool to visualize what code is in your web bundle, and how it got there by uploading the appropriate file and choosing your bundler.

Upgraderoo
Upload your package.json file and this tool will scan it and query the npm registry for the latest package version, show you the changelog, indicate breaking changes and outdated packages.

Hex Service
A Deno boilerplate for plain backend microservices, to enable developers to start coding their backend API codebase immediately.

Dependency Cruiser
CLI tool that runs through the dependencies in any JavaScript, TypeScript, LiveScript, or CoffeeScript project and validates them against (your own) rules, reports violated rules, etc.

On the Release Radar:

• Lerna – Build system for monorepos now at version 5+
• Size Limit – Performance budget tool for JavaScript now at version 8+
• Astro – Modern build tool now at version 1+
• npm-check – Outdated dependency checker now at version 6+
• Vite – Next-gen front-end tooling now at version 3+

JavaScript Utilities

Morning Brew
There's a reason over 2.6 million people start their day with Morning Brew — the daily email that delivers the latest news from Wall Street to Silicon Valley. Business news doesn't have to be dry and dense...make your mornings more enjoyable, for free.    SPONSORED 

Connect-Web
A simple library to call remote procedures from a web browser. Unlike REST, you get a type-safe client and never have to think about serialization again.

article-parser
A utility to extract article info from a given URL with Node.js. Extracts HTML content, main image, and meta data.

discord.js
A powerful Node.js  module that allows you to interact with the Discord API.

superstate
A micro state management library for JavaScript apps that's compact enough for prototypes and scales well as your project grows.

find-up
JavaScript utility to find a file or directory by walking up parent directories.

magic-regexp
A compiled-away, type-safe, readable RegExp alternative with a zero-dependency and minimal runtime.

kmenu
A JavaScript library to add an animated and accessible command menu (i.e. command palette) to a page or app.

Jarallax
A parallax library for modern browsers with support for images, background images, YouTube, Vimeo and self-hosted videos.

next-international
A small, type-safe, SSR-enabled internationalization library for Next.js, written in TypeScript.

HypeScript
A simplified implementation of TypeScript's type system written in TypeScript's type annotations. This means that it uses types only — with no runtime code whatsoever.

Timewave
A tiny time simulation and date/time math library, small enough for every day date/time math and powerful enough for games and simulations.

Commercial Apps and Classifieds

These are commercial apps (i.e. not free or limited free plan), paid classifieds, and affiliate links.

Atorable – Peer-to-peer CDN with accelerated performance and lower costs.

DocsToSite – Convert Google docs to beautiful, fully-responsive web pages.

React for Beginners - The best HD course on the market to learn React. AD

Reform – A modern no-code form builder that integrates with your stack.

Malthus – Generate high-quality prospects and leads for your business. AD

Imitate Email – Easy email flow testing for developers and users.

Fabrx – Carefully built design systems & UI kits for Figma, Sketch, Bootstrap.
 

A Tweet for Thought

This infinite story is almost certainly the most impressive thing you'll see in technology this week.

 

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

Are you a 1x Engineer? Based on the qualities listed, I think we need more of those kinds of engineers.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly
PayPal.me/WebToolsWeekly