Collective #445

SVG Filters
An excellent drag and drop tool for generating SVG filter code with a preview of the result. By Yoksel.
Check it out
UX And HTML5: Let's Help Users Fill In Your Mobile Form (Part 1)
An extensive list of useful techniques to make forms better. By Stéphanie Walter.
Read it
A Modern Builder For A New Era
The new visual builder interface in Divi 3.0 has been re-built from the ground up using React, the modern JavaScript library for user interfaces.
Check it out
Designing Illustrations for Small Screens
Meg Robichaud shares some useful tips for designing illustrations for mobile screens.
Read it
Code Surfer
A React component for scrolling, zooming and highlighting code. By Rodrigo Pombo.
Check it out
Shrink Me
Filipe Santos Correa created this tool that optimizes images of JPG and PNG format.
Check it out
Service Worker Caching Strategies Based on Request Types
Thomas Steiner shows how you can use the Request.destination property in your service worker to determine the type and caching strategy of requests.
Read it
Heard at Work
Heard at Work is a collection of overheard exclamations that aims to capture what it’s like to work in a New York design studio. By Justine Braisted.
Check it out
Size-plugin
Prints the gzipped sizes of your webpack assets and the changes since the last build.
Check it out
Chris Kelly on Designing an Award-Winning Brand for Adobe Live
Read the inspiring background story behind Adobe Live's brand design by Chris Kelly.
Read it
Turbo-json-parse
Mathias Buus created this really fast JSON parser for type stable JSON data.
Check it out
CSS Grid in 45 Minutes!
Wes Bos' great talk on CSS Grid at Laracon.
Watch it
Designer+Developer Workflow: Head-Down Work
Watch Brad Frost do some head-down development work in this video.
Watch it
Extending the Browser with WebAssembly
Alex Danilo walks us through an example of how to take the existing AV1 video codec source code, build a wrapper for it, and try it out inside your browser with the power of WebAssembly.
Read it
How I Recorded User Behaviour on my Competitor's Websites
A very interesting article by Dan Petrovic on how he manipulated the browser back button to track what users did on mirror sites of competitors.
Read it
Windows95
Felix Rieseberg's crazy recreation of Windows 95, running in an Electron app for macOS, Linux, and Windows.
Check it out
Pure CSS The Carlton Dance
Grzegorz Witczak brings a pixel version of Carlton to life in just CSS.
Check it out
Using CSS Clip Path to Create Interactive Effects, Part II
Mikael Ainalem shares another tutorial on CSS clip-path awesomeness.
Read it
The Complete CSS Demo for OpenType Features
An overview of all CSS OpenType features in one place. Work in progress. By Tunghsiao Liu.
Check it out
Git-bug
A distributed bug tracker embedded in Git that uses git's internal storage so no files are added in your project.
Check it out
OpenStax
Rice University's free educational books on various topics.
Check it out