Issue #305 (MutationObserver, CSS/HTML, React Tools, Uncats)05/23/19
Ship Front-end Features, Faster, with Mason
Meet the front-end feature-building platform for modern product teams. Chop your dev time, deploy faster, and outpace the competition. Ship client-side software in a fraction of the time, and make updates in seconds, with Mason.
TRY MASON FREE
|
|
Recently I started to experiment with a web API that has been somewhat overlooked, despite how useful it can be in certain circumstances. After starting to mess around with it, I eventually wrote a full article on it that was published on Smashing Magazine last month:
Getting To Know The MutationObserver API
In brief, the purpose of the MutationObserver API is to allow you to easily monitor for specific changes to the DOM and respond accordingly.
I tried to discuss every aspect of the API and I added an interactive demo for each feature. I also put all the demos together into a CodePen Collection, so you can go straight there if you just want to see the code examples in action. And note that the demos will be easier to follow with the console open in CodePen or in your developer tools.
Now on to this week's tools!
|
CSS and HTML Tools
Ship Front-end Features, Faster, with Mason
Meet the front-end feature-building platform for modern product teams. Chop your dev time, deploy faster, and outpace the competition. Ship client-side software in a fraction of the time, and make updates in seconds, with Mason. sponsored via ThoughtLeaders
CSSFX
Beautifully simple click-to-copy CSS effects. A carefully crafted collection designed with a focus on fluidity, simplicity, and ease of use.
Cattous
CSS in JSX for lazy developers, built using styled-components and styled-system.
IsometricSass
Sass library to make isometric 2D without JavaScript.
iFrame Resizer
Now at version 4+. Keep same- and cross-domain iframes sized to their content with support for window/content resizing, in-page links, nesting, and multiple iframes.
Accessible Color Generator
A tool for creating color variations on a base color to meet WCAG AA or AAA color contrast ratio guidelines.
Pixel Borders
A Sass mixin to add pixelated, retro video game-like borders to HTML elements, which can be customized for size, colour, and inset borders.
html-include
A web component to easily include external HTML in your pages.
WebP in CSS
PostCSS plugin and tiny script (128B) to use WebP video in CSS backgrounds.
Scoped Styles for React
React tool to scope your class names by component directory, allowing you to create scoped styles without changing the conventional styling workflow.
Water.css
A just-add-CSS collection of styles to make simple websites just a little nicer.
WhatCSS.info
CSS page load analyzer and optimizer that allows you to easily see what styles are required to display your site.
|
React Tools
A New Way to Develop
With Airtable, you can customize every aspect of your work. Flexible bug tracking, on-duty schedules, team standups, and more. sponsored via ThoughtLeaders
react-spotify-api
A React component library that makes it easier to interact with the Spotify API.
React Redux Loading Bar
A React component that provides a loading/progress bar for long running tasks.
copy-text-to-cb
React component to copy text to clipboard on click, with function to execute after copying.
react-rough
React bindings for Rough.js (library that lets you create graphics with a hand-drawn, sketchy, appearance).
bezier-easing-editor
Cubic Bézier curve editor made with React and SVG.
Griffith
A React-based web video player.
React Hook Router
A flexible and fast router for React that's entirely based on Hooks.
Gourmet SSR
A lightweight server-side rendering engine for React apps.
useDimensions
A React Hook to measure DOM nodes.
ReactN
Extension of React that includes global state management. It treats global state as if it were built into React itself -- without the boilerplate of third party libraries.
Worldview
A lightweight, extensible 2D and 3D scene renderer built on React and regl (an abstraction for WebGL). Performance, ease of use, and extensibility are top priorities.
|
The Uncategorizables
A New Way to Develop
With Airtable, you can customize every aspect of your work. Flexible bug tracking, on-duty schedules, team standups, and more. sponsored via ThoughtLeaders
Space Browser
iOS app currently in early access. The first mobile browser made for power users.
QUID
A new micro-payments monetization service for writers, podcasters, etc.
SugarKubes
A code and container marketplace.
WildDuck
Modern mail server software for IMAP and POP3. Scalable, Unicode-first, and API-controlled.
Full Help
Self-hosted help desk and knowledgebase software for small businesses, professionals and freelancers.
SimpleLocalize.io
App localization software for developers.
Diffbot
Extract anything on any page, at any time. Automates web data extraction from any website using AI, computer vision, and machine learning.
MDX
Now at version 1+ (details). An authorable format that lets you seamlessly write JSX in your Markdown documents.
GB Studio
A free and easy to use retro adventure game creator for your favourite handheld video game system (which I assume means Gameboy).
|
A Tweet for Thought
Scott Jehl started an interesting thread on whether or not Google should include non-AMP pages in the "top stories" carousel.
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...
This Startup Does Not Exist is kind of a sad commentary on the state of tech today. (For those who don't get it, each time you refresh the page, you'll get a fake startup, but it wouldn't be obvious if you stumbled on this by accident).
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
