Collective #429

Shotsnapp
A fantastic tool for creating mockup presentations for your design. Made by Gaddafi Rusli.
Check it out
Use pre-built websites to avoid making unforgivable design mistakes
Even the best web designers make mistakes. A solution to this problem is using pre-built websites. Be Theme offers over 350 of them, each of them at one click away from being installed on your website.
Check them out
Designing for accessibility is not that hard
Pablo Stanley shows us seven easy-to-implement guidelines to design a more accessible web.
Read it
Tenori-off
A smart music sequencer that uses Machine Learning to try to match drums to a synth melody. Made by Monica Dinculescu.
Check it out
Scrolling Gradient
Mike Riethmuller created this demo where a background gradient changes according to the scroll position.
Check it out
Reduce JavaScript Payloads with Tree Shaking
Jeremy Wagner explains how to use tree shaking, a form of dead code elimination, to improve JavaScript performance.
Read it
SVG Pattern Doodler
Niklas Knaack created this fantastic demo where a simple algorithm draws patterns and doodles into an SVG element.
Check it out
An adventure in sparse arrays
Remy Sharp explores sparse arrays and shares some common pitfalls when dealing with them.
Read it
Singlie
A progressive and minimal implementation of the circular and linear singly linked list data structures in modern ES6.
Check it out
Free Font: Leira
A playful brush font designed by Evita Vilaka.
Get it
Interneting Is Hard
In case you missed it: A resource of friendly web development tutorials for complete beginners.
Check it out
fakeScroll
A lightweight and robust custom-looking HTML scrollbar script.
Check it out
React From Zero
A simple yet comprehensive React tutorial.
Check it out
What is the CSS 'ch' Unit?
Eric Meyer explains the ch unit in CSS.
Read it
Generative WorldCup
An experiment with the world cup statistics API and canvas to generate abstract patterns for each soccer match.
Check it out
Pixels vs. Ems: Users DO Change Font Size
An interesting article with data on how many users actually change the font size in their browsers. By Evan Minto.
Read it
ChartGen
An SVG chart generator that utilizes the Box-Muller transform to generate random trending data for realistic SVG line and bar charts.
Check it out
Everything You Need To Know About Transactional Email But Didn't Know To Ask
Some advanced best practices for transactional emails by Garrett Dimon.
Read it
Fitting Text to a Container
Chris Coyier explores the different ways of making a text size itself to fill a container.
Read it
Where is CSS4? When is it coming out?
Jen Simmons explains why CSS4 does not exist.
Watch it
'Fire' visual effect in JavaScript
A short tutorial on how to create a pixel fire effect in JavaScript with just about 20 lines of code.
Read it
More
A nice link animation made by Chris Gannon.
Check it out
The guide to integrating and styling icon systems?- inline SVG and icon components
In this two-part series, Claudia Romano explains integration techniques for icon systems using practical code examples.
Read it
The Vue Handbook
A guide to Vue written by Flavio Copes. Free for a subscription.
Check it out
The simpleton's guide to CSS Grid
An easy-to-follow guide to CSS Grid by Dennis Gaebel.
Read it