Collective #428

Inspirational Website of the Week: 2018 Foosball World Cup
A fantastic table football implementation for this year's soccer world cup. Our pick this week.
Get inspired
Need a course to broaden your skill set?
From web dev beginners courses to accelerated JavaScript training, Udemy has something for everyone. Learn basically anything and discover new skills and passions.
Pick your course
face-api.js
A JavaScript API for face detection and face recognition in the browser implemented on top of the Tensorflow.js core API.
Check it out
Drawing Images with CSS Gradients
An in-depth tutorial on how to use CSS gradients to draw complex shapes by Jon Kantner.
Check it out
Current state of webdesign
Will you realize what this is about in less than 3 seconds? :)
Check it out
The Experimental Layout Lab
Jen Simmons relaunched her labs section and added some more demos that show the possibilities of CSS Grid.
Check it out
Backspace Rethought
Louis Anslow shares a brilliant idea for backspace using the drag interaction.
Read it
On Consuming (and Publishing) ES2015+ Packages
A very interesting article by Henry Zhu how the community might move to a "post-ES5" package ecosystem.
Read it
CodePen Challenge: Menu
A fun, bouncy menu created by Adam Kuhn.
Check it out
Plexus Shaders
A futuristic WebGL music visualizer made with Three.js together with Vertex Shaders and Fragment Shaders.
Check it out
mkcert
A simple tool for making locally-trusted development certificates without requiring any configuration.
Check it out
How and Why We Unit Test Our Sass
Lindsey Wild shares how unit testing Sass code is done at Sparkbox.
Read it
Free Font: Kalpazan
Vladimir Fedotov shares one of the styles of his new font family "Kalpazan".
Get it
ml5.js
A library that aims to make machine learning approachable for a broad audience of artists, creative coders, and students. It provides access to machine learning algorithms and models in the browser, building on top of TensorFlow.js with no other external dependencies.
Check it out
Solids
Some 3D magic by Dave DeSandro using the <canvas> drawing API.
Check it out
The Garden of Earthly Delights by Jheronimus Bosch
A beautiful, interactive documentary that provides an in-depth tour though "The Garden of Earthly Delights" painting.
Check it out
150 Free Vector Icons
A great set of beautifully designed and versatile vector icons in three different styles. By Elmira Gokoryan.
Get it
Truchet
Amazing experiments in GLSL Truchet tiling and patterns by Liam Egan.
Check it out
Stationery Branding & Identity Mockup (PSD)
A modern stationery and identity branding mockup by the folks of GraphicPear.
Get it
Thank You
Liam Egan celebrates his 500 Codepen followers mark with this beautiful demo.
Check it out
Triple Panel Reveal Slideshow
A fullscreen image slideshow with lateral image previews and a reveal animation using TweenMax.
Check it out