Issue #198 (Functional Programming, CSS/HTML, JS Utils, Uncats)05/04/17
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!
|
CSS and HTML Tools
Fela
A fast and modular library to handle styling in JavaScript. It is dynamic by design and renders your styles depending on your application state.
ReactSimpleFlexGrid
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.
polished
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.
css-razor
Uses cheerio.js to parse static HTML to remove unused selectors in CSS.
debugCSS
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.
Alix
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.
Animista
A very nicely designed CSS animation tool to build and download code for various animated effects.
|
JavaScript Utilities
Snazzy Info Window
A plugin for customizable info windows using the Google Maps JavaScript API.
franc
Now at version 3.x. Natural language detection to detect the language of text.
awaiting
An async/await utility for the browser and Node.js.
Tippy.js
A lightweight, pure JavaScript tooltip library.
across-tabs
Easily communicate among browser tabs (supports cross-origin).
moveTo
A lightweight dependency-free scroll animation library.
Numscrubber.js
This is interesting. A way to allow number inputs to be increased/decreased by sliding left/right while hovering over the input.
typeis.js
The smart and simple JavaScript type checker.
TinyTyper
A tiny library for creating a typing effect on a specified text element.
|
The Uncategorizables
JAMstack
Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.
Upspin
An experimental project to build a framework for naming and sharing files and other data securely, uniformly, and globally.
publishthis.email
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.
Otherside
Creates a Twitter List of the accounts someone follows, letting you see Twitter from their perspective.
txt.fyi
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,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
