Collective #541
Get Waves
A free SVG wave generator to make unique SVG waves. Choose a curve, adjust complexity and randomize.
Check it out
Aren't you tired of wasting time coding buttons and other minor elements?
The FREE Visual Composer Website Builder is perfect for building simple elements FAST with 0 coding. Based on ReactJS for performance & loading speed, it shaves hours off your work!
Download for free
Roll Your Own Comment System for a Static Site
Tania Rascia shows how to create your own clean comment system for a static website.
Read it
StoryTime
StoryTime enables developers to easily simulate debugger-like visuals to tell or read a story about pieces of code.
Check it out
Deep Dive Into Modern Web Development
A course that will introduce you to modern JavaScript-based web development. The main focus is on building single page applications with ReactJS that use REST APIs built with Node.js.
Check it out
Efficiently load third-party JavaScript
Milica Mihajlija's guide to avoiding the common pitfalls of using third-party scripts to improve load times and user experience.
Read it
All the New ES2019 Tips and Tricks
Laurie Barth takes a look at what's new in ES2019 and what you can do with the new features.
Read it
JavaScript & Node.js Testing Best Practices
Comprehensive and exhaustive JavaScript and Node.js testing best practices.
Read it
Variable Font Animation with CSS and Splitting JS
A tutorial by Michelle Barker on how to animate variable fonts.
Read it
Divjoy
A React codebase generator where you can select the stack you want, pick a template and then export a complete React codebase. By Gabe Ragland.
Check it out
Why a cookie-cutter design system won't work for your organization
Linzi Berry, Product Design Systems Manager at Lyft, shares the story and core principles of their design system.
Read it
Call to Action Hype Man
An adorable call to action button animation made by Mariusz Dabrowski.
Check it out
Input delay
Monica Dinculescu created this experiment to see what amount of delay is too annoying for a user interaction like typing.
Check it out
Modern Web Development on the JAMstack
A free eBook that explains how to run your web projects on the JAMstack. By Mathias Biilmann and Phil Hawksworth.
Get it
Sphere of Boxes
A really nice Three.js demo by Johan Karlsson.
Check it out
Strandbeest walk
Based on the Jansen's linkage leg mechanism, Nick Watton created this awesome demo.
Check it out
Day/Night Ambient Light Animation
Mandy Michael shares a demo that shows how to change the page content based on the light level in the room using the Ambient Light API. Works behind the #enable-generic-sensor-extra-classes flag in chrome://flags.
Check it out
Motion Lab react-text-reveal
A tool for generating text reveal animations based on React. By Ivo Ilić.
Check it out
Procedural Audio On the Web: Part One
An article by Berrak Nil where she explains what procedural audio is and how it can be used on the web, while walking through a WebVR experience created using A-Frame.
Read it
MC.JS
An open source Minecraft clone built with ThreeJS, ReactJS, GraphQL, and NodeJS.
Check it out
Fork This Nav
Ryan Mulligan's fork of the latest Codepen challenge on navigations.
Check it out
HeadBanger
An AI powered interactive experiment where you can release fireballs from your mouth and head bang to break barriers.
Check it out
MARTINI
Vladimir Agafonkin introduces MARTINI, an open source, client-side terrain mesh generation library.
Check it out
How to chain multiple functions in JavaScript properly with await/async
Nicholas Dunkel shares some code that chains multiple functions with await/async.
Read it
gatsby-plugin-optimize-svgs
A Gatsby Plugin to minify SVGs output to the filesystem during the build. Uses svgo under the hood to minify SVGs. By Victor Zhou.
Check it out
Making Cloud.typography Fast(er)
Harry Roberts' investigation into the performance of Cloud.typography and how to make it faster.
Read it