Collective #429
Publikováno: 2.7.2018
Shotsnapp * fakeScroll * SVG Pattern Doodler * Singlie * Generative WorldCup * Scrolling Gradient * ChartGen * React From Zero
Collective #429 was written by Pedro Botelho and published on Codrops.

Shotsnapp
A fantastic tool for creating mockup presentations for your design. Made by Gaddafi Rusli.

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.

Designing for accessibility is not that hard
Pablo Stanley shows us seven easy-to-implement guidelines to design a more accessible web.

Tenori-off
A smart music sequencer that uses Machine Learning to try to match drums to a synth melody. Made by Monica Dinculescu.

Scrolling Gradient
Mike Riethmuller created this demo where a background gradient changes according to the scroll position.

Reduce JavaScript Payloads with Tree Shaking
Jeremy Wagner explains how to use tree shaking, a form of dead code elimination, to improve JavaScript performance.

SVG Pattern Doodler
Niklas Knaack created this fantastic demo where a simple algorithm draws patterns and doodles into an SVG element.

An adventure in sparse arrays
Remy Sharp explores sparse arrays and shares some common pitfalls when dealing with them.

Singlie
A progressive and minimal implementation of the circular and linear singly linked list data structures in modern ES6.

Free Font: Leira
A playful brush font designed by Evita Vilaka.

Interneting Is Hard
In case you missed it: A resource of friendly web development tutorials for complete beginners.

fakeScroll
A lightweight and robust custom-looking HTML scrollbar script.

React From Zero
A simple yet comprehensive React tutorial.

What is the CSS ‘ch’ Unit?
Eric Meyer explains the ch unit in CSS.

Generative WorldCup
An experiment with the world cup statistics API and canvas to generate abstract patterns for each soccer match.

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.

ChartGen
An SVG chart generator that utilizes the Box-Muller transform to generate random trending data for realistic SVG line and bar charts.

Everything You Need To Know About Transactional Email But Didn’t Know To Ask
Some advanced best practices for transactional emails by Garrett Dimon.

Fitting Text to a Container
Chris Coyier explores the different ways of making a text size itself to fill a container.

Where is CSS4? When is it coming out?
Jen Simmons explains why CSS4 does not exist.

‘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.

More
A nice link animation made by Chris Gannon.

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.

The Vue Handbook
A guide to Vue written by Flavio Copes. Free for a subscription.

The simpleton’s guide to CSS Grid
An easy-to-follow guide to CSS Grid by Dennis Gaebel.
Collective #429 was written by Pedro Botelho and published on Codrops.