Collective #541
Publikováno: 19.8.2019
Get Waves * StoryTime * MC.JS * Input delay * Variable Font Animation * Divjoy * HeadBanger
Collective #541 was written by Pedro Botelho and published on Codrops.

Get Waves
A free SVG wave generator to make unique SVG waves. Choose a curve, adjust complexity and randomize.

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!

Roll Your Own Comment System for a Static Site
Tania Rascia shows how to create your own clean comment system for a static website.

StoryTime
StoryTime enables developers to easily simulate debugger-like visuals to tell or read a story about pieces of code.

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.

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.

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.

JavaScript & Node.js Testing Best Practices
Comprehensive and exhaustive JavaScript and Node.js testing best practices.

Variable Font Animation with CSS and Splitting JS
A tutorial by Michelle Barker on how to animate variable fonts.

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.

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.

Call to Action Hype Man
An adorable call to action button animation made by Mariusz Dabrowski.

Input delay
Monica Dinculescu created this experiment to see what amount of delay is too annoying for a user interaction like typing.

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.

Sphere of Boxes
A really nice Three.js demo by Johan Karlsson.

Strandbeest walk
Based on the Jansen’s linkage leg mechanism, Nick Watton created this awesome demo.

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.

Motion Lab react-text-reveal
A tool for generating text reveal animations based on React. By Ivo Ilić.

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.

MC.JS
An open source Minecraft clone built with ThreeJS, ReactJS, GraphQL, and NodeJS.

Fork This Nav
Join this challenge to create a CSS powered navigation. By Ryan Mulligan.

HeadBanger
An AI powered interactive experiment where you can release fireballs from your mouth and head bang to break barriers.

MARTINI
Vladimir Agafonkin introduces MARTINI, an open source, client-side terrain mesh generation library.

How to chain multiple functions in JavaScript properly with await/async
Nicholas Dunkel shares some code that chains multiple functions with await/async.

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.

Making Cloud.typography Fast(er)
Harry Roberts’ investigation into the performance of Cloud.typography and how to make it faster.
Collective #541 was written by Pedro Botelho and published on Codrops.