Web Tools #439 - JS Patterns, CSS, Build Tools, React

WEB VERSION Issue #439 • December 16, 2021 Advertisement The New Tab Page You'll Actually Use Replace your web browser’s new tab page with a minimal list of links, grouped and sorted how you like. A Fine Start is for fans of minimalism and nice typography. Get It Free For Chrome and Firefox There are some coding topics that are certainly beyond the scope of this newsletter's intro section. For example, I've never really studied JavaScript classes yet on my own, so I wouldn't be able to write anything too in-depth on that even if it did fit for this short intro. If, however, you want what looks to me to be a pretty good guide to using JavaScript classes, you'll want to check out Advanced JavaScript Design Patterns on DEV.to by a developer who works for a company called DhiWise. What I like about this post is that it's not actually supposed to be a tutorial on JavaScript classes but, as the author explains, the post covers 20+ JavaScript design patterns with all the code examples using JavaScript classes. So you're more or less getting two tutorials in one: A deep look at design patterns commonly used in software development along with a bunch of practical uses for JavaScript classes. The only thing that's annoying about the post is the fact that all the code examples are images. Terrible for accessibility and copying/pasting. That being said, when I first started to code more than 20 years ago, I learned everything from hard copy books and had to type it all by hand while learning. That was valuable to be able to do that because it forced me to memorize a lot of things. So if you have to type these examples out yourself, maybe that will help the concepts stick a bit more? And if you want a few hundred JS/DOM quick tips in book form you can buy my JavaScript E-Books bundle (half price!) that compiles into 3-ebooks most of the coding tips I've included in past issues of this newsletter. Now on to this week's tools   CSS and HTML Tools The New Tab Page You'll Actually Use Replace your web browser’s new tab page with a minimal list of links, grouped and sorted how you like. A Fine Start is for fans of minimalism and nice typography.  sponsored  Open Props Pre-defined components made up of CSS variables that you can drop into a project to build your own components or design system. Text Balancer A fast text wrap balancer for multi-line headlines on the web that wraps text more evenly across lines, reducing uneven line lengths. Container Query Polyfill A tiny polyfill for CSS Container Queries that transpiles CSS on the client side and implements Container Query functionality using ResizeObserver and MutationObserver. Shadow Palette Generator Online tool to create more realistic looking CSS shadows. Uses CSS variables along with layered shadows to get a more "lush" look. Atmos Multi-featured tool to create, edit, and customize color palettes for UI designs that lets you generate colors and uniform shades or refine specific colors in the palette. Free during Beta phase. Mimcss A CSS-in-JS library that allows authoring CSS styles without creating CSS files. Instead, you code your styling rules by creating TypeScript classes. UnoCSS An instant on-demand atomic CSS engine. There's a blog post explaining the rationale, along with a playground and VS Code extension. Stampino A fast and powerful HTML template system that lets you write dynamic templates using real HTML <template> tags. tailwindcss-typography A plugin that provides a set of `prose` classes that adds beautiful typographic defaults to any vanilla HTML you don't control (like HTML rendered from Markdown or a CMS). Color Wheel An interactive tool that lets you recognize the relationship between colors, to discover color harmonies and color combinations and create beautiful palettes easily for your designs. Modular Scale An older tool that lets you generate CSS/Sass or JS for a modular scale in your typographic designs.   Build Tools, Bundlers, etc. Build Internal Apps Remarkably Fast with Retool Retool is a new approach to building internal apps: we’ve unified the ease of visual programming with the power and flexibility of real code. Drag and drop a form together, and have it POST back to your API in minutes. Deploy instantly with access controls and audit logs.  sponsored  eslint-plugin-anti-trojan-source An ESLint plugin to detect and prevent Trojan Source attacks from entering your code base. envsafe TypeScript module that makes sure you don't accidentally deploy apps with missing or invalid environment variables. Nandu An open source npm registry compatible with npm, Yarn and pnpm. They warn that while it's functional, it may not be production-ready yet. Depp Check your npm modules for unused and duplicate dependencies fast. gko/Project Shell script to create Node, Rust, Python, or Ruby projects locally and on GitHub. PickBetterPack Online tool that lets you enter a project's package.json contents, then this will list similar packages you can consider as alternatives.   nanobundle Yet another bundler for tiny modules, powered by esbuild, with support for ESM and CommonJS. Create Rust App Set up a modern Rust+React web app by running a single command. TypeDI A dependency injection tool for TypeScript and JavaScript to build well-structured and easily testable applications in Node or in the browser. eslint-plugin-simple-import-sort Easy autofixable import sorting, for those who use eslint --fix (autofix) a lot and want to completely forget about sorting imports. React Tools Build Internal Apps Remarkably Fast with Retool Retool is a new approach to building internal apps: we’ve unified the ease of visual programming with the power and flexibility of real code. Drag and drop a form together, and have it POST back to your API in minutes. Deploy instantly with access controls and audit logs.  sponsored  React Query Helper A helper library to help you use React Query (the Hooks library for fetching, caching, and updating data) more easily and consistently. Rendition A Figma plugin that converts a Figma design into a React component with a single click. resourcerer Declarative data-fetching and caching framework for REST APIs with React. Graphire A declarative and unopinionated graph visualization library for React that supports different layouts to visualize large dynamic networks of nodes and links in both 2D and 3D. React Location Powerful, enterprise-grade routing for React apps. Features declarative and asynchronous route elements and data loaders, first-class search param APIs, nested-routing, code-splitting, and more. Code Hike React component to write embedded code-walkthroughs. Handy for presentations, documentation, coding videos, blog posts, etc.   Chakra-UI AutoComplete An autocomplete library for the Chakra UI component library, featuring accessibility via a utility called Downshift. use-smartcrop React hook for smartcrop.js, the utility for content-aware image cropping with points of interest and facial recognition. React Search Field An elegant search field component for React with a few different options for on-page filtering via search. React Marquee Slider A marquee/slider component for React. Certainly not for every project but brings back memories of HTML's <marquee> element. use-onclickoutside A React hook for listening for clicks outside of an element. React Transcript Editor A React component from BBC's open source, to make transcribing audio and video easier and faster.   Commercial Apps and Classifieds These are commercial (non-free) tools, paid classifieds, and affiliate links. You can submit a link for consideration or you can buy a classified link (will be marked "ad"). Linkz.ai - Add link preview popups that appear on hover. Morning Brew - A daily newsletter to keep you informed & entertained. ad  Package Updater - Safely update npm packages in all your projects. Nebo - Visual React builder to assemble React components with no code. Alternative Assets - World’s largest alternative investment community. ad  Uideck - Premium HTML landing page templates and UI kits. Nudge - A privacy-first analytics stack for content marketers.   A Tweet for Thought Sahil Bloom's advice on getting ahead is on point, even though on the surface it seems like it will end up with the opposite result.   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 looking for a quick way to look up IMDB ratings for a TV series, check out SeriesHeat. Do a search then get a heatmap of average IMDb ratings for each episode. The cool part is you can click on a square in the heat map (e.g. any green one, which represent the highest rated episodes) to view that episode's IMDB page. Thanks to everyone for subscribing and reading! Keep tooling, Louis @WebToolsWeekly Support this newsletter: PayPal.me  /  Patreon / GitHub Sponsors  /  E-Books / Buy Me a Coffee Copyright © 2021 Web Tools Weekly, All rights reserved. Curious about this email? Well, at some point you subscribed, likely at webtoolsweekly.com Web Tools Weekly 5576 Yonge Street PO Box 10044 North York, ON M2N 5S0 Canada Add us to your address book unsubscribe from this list update subscription preferences Privacy Policy