Collective #588

Building a Continuous Integration & Deployment Pipeline Using Docker (CI/CD)
Tania Rascia shows how to create a CI/CD pipeline for a Node.js project using Docker and Travis.
Read it
Experts Love It. Intruders? Not So Much.
It feels good to fear less. SimpliSafe stands up to the unexpected, from burglars to burst pipes. As more than 3 million customers already know, fear has no place in a place like home.
Learn more here
Good First Issue
Good First Issue is a curated list of issues from popular open-source projects.
Check it out
Baretest
Baretest is a fast and simple JavaScript test runner. It offers near-instant performance and a brainless API.
Check it out
How to create a stacking cards effect
In this tutorial, Claudia Romano shows how to create a stacking cards effect, using the CSS sticky position and the Intersection Observer API.
Check it out
#s3e14 ALL YOUR HTML, Barycentric coords, physics
Yuri Artyukh explains how to code the awesome animation seen on the basement.studio website.
Watch it
DotMatrx.js
A dot matrix with animated movements that respond to mouse/touch move events.
Check it out
Quick and Easy Dark Mode with CSS Custom Properties
Michelle Barker shows how to easily offer a dark theme with CSS.
Check it out
Single div Sierpinski triangle
Learn how to draw the Sierpinski triangle using pure CSS in this tutorial by Yuan Chuan.
Read it
Bouncing Balls
A bouncing balls simulation using plain JavaScript.
Check it out
Understanding the ECMAScript Spec (Part 1)
In this article, you'll get to understand the notation of a simple function in the ECMAScript spec.
Read it
Design Systems Hub
Rangle's collection of perspectives and approaches on how to build, optimize and define design systems.
Check it out
Demystifying Browsers
With this article, Eric Lawrence aims to provide a roadmap for developers getting into the browser space.
Check it out
Why Web Browsers Are FREE
Do you know why you don't have to pay for browser software? This video will enlighten you.
Watch it
Why Discord is switching from Go to Rust
A very interesting article by Jesse Howarth on why using Rust has many advantages for Discord.
Read it
Starfields GLShader
A really nice pseudo 3D demo by Paul J Karlik. Learn how to do it in this video tutorial: part 1 and part 2.
Check it out
JavaScript Lightning Effect
A lightning effect experiment with HTML canvas and JavaScript.
Check it out
Soft UI CSS shadow generator
If you're into all that Neumorphism hype, this generator will make your day.
Check it out
Implementing Dark mode with TailwindCSS
If you use Tailwind CSS, this guide on how to implement dark mode will come in handy.
Read it
Awesome Demos Roundup #13
A fresh selection of the most interesting demos and web experiments from the past weeks.
Check it out