What a Tool!

Issue #198  (Functional Programming, CSS Tools, JS Utils, Uncats)

Functional programming in JavaScript has been a popular theme for some time now. In January, JavaScript master Eric Elliot wrote a lengthy piece on the subject.

Read the article if you want a deep understanding, but here are a few highlights from the article (these are quotes from the article):

  • Functional programming is the process of building software by composing pure functions, avoiding shared state, mutable data, and side-effects.
  • Functional code tends to be more concise, more predictable, and easier to test than imperative or object oriented code.
  • Functional programming tends to reuse a common set of functional utilities to process data. Object oriented programming tends to colocate methods and data in objects.

The article covers shared state, immutability, and side effects at length, concepts that are (as shown above) imperative to understanding the benefits of functional programming.

The article is just one in a series of posts that enlighten on topics that might be covered in a JavaScript interview. Well worth a read.

Now on to this week's tools!
Support Web Tools Weekly on Patreon!
Monthly supporters of $10 or more will get a copy of both my JS/DOM e-books and my CSS e-book package.

CSS and HTML Tools

A fast and modular library to handle styling in JavaScript. It is dynamic by design and renders your styles depending on your application state.

A way to quickly add a 12-column flexbox-based grid layout to your React app.

Pushy Buttons
Styles to build 3-D pressable buttons with CSS.

Another option for writing styles in JavaScript. The home page lets you play around with it directly in the console.

CSS Grid Template Builder
CodePen demo. A simple tool to build complex CSS Grid templates. Edit the template string or drag the areas in the preview.

Uses cheerio.js to parse static HTML to remove unused selectors in CSS.

Meant to be loaded on an existing page to highlight potentially broken, malformed or legacy (X)HTML.

CSS Generator Tool
helps you demonstrate and quickly generate CSS declarations for your website. Shadows, gradients, border radius, filters, transforms, multi-columns, etc.

Chrome, Firefox, or Opera browser extension for a11y.css. It allows you to lint your HTML for accessibility issues by applying a stylesheet that makes use of advanced CSS selectors.

A very nicely designed CSS animation tool to build and download code for various animated effects.

JavaScript Modules and Utilities

Snazzy Info Window
A plugin for customizable info windows using the Google Maps JavaScript API.

Now at version 3.x. Natural language detection to detect the language of text.

An async/await utility for the browser and Node.js.

A lightweight, pure JavaScript tooltip library.

Easily communicate among browser tabs (supports cross-origin).

A lightweight dependency-free scroll animation library.

This is interesting. A way to allow number inputs to be increased/decreased by sliding left/right while hovering over the input.

The smart and simple JavaScript type checker.

A tiny library for creating a typing effect on a specified text element.

Support Web Tools Weekly on Patreon
Contribute $10 or more and get two JS/DOM e-books + my CSS e-book package.

The Uncategorizables

Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.

An experimental project to build a framework for naming and sharing files and other data securely, uniformly, and globally.

Write an email with the content you want to publish, send it to a specified email address, and you'll get a reply with a link to your new page.

Fabrica Dev Kit
An environment and build toolkit to accelerate and optimize the entire WordPress development process.

Creates a Twitter List of the accounts someone follows, letting you see Twitter from their perspective.

The dumbest publishing platform on the web. Write something, hit publish, and it's live.

A Tweet for Thought

Edge is currently the only browser that scores a 100% in HTML5 accessibility.

Suggestions / Corrections

Made something? Send links via 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...

Want to maximize the sticker space on your laptop? hexbin is a community curated list of hexagon stickers.

Thanks to all for subscribing and reading!

Keep tooling,