Issue #198 (Functional Programming, CSS Tools, JS Utils, Uncats)
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.
Now on to this week's tools!
CSS and HTML Tools
A way to quickly add a 12-column flexbox-based grid layout to your React app.
Styles to build 3-D pressable buttons with CSS.
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.
Snazzy Info Window
Now at version 3.x. Natural language detection to detect the language of text.
An async/await utility for the browser and Node.js.
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.
A tiny library for creating a typing effect on a specified text element.
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!