Collective #586

Vanilla Web Projects
Mini projects built with HTML5, CSS and JavaScript without frameworks or libraries.
Check it out
A new technique for making responsive, JavaScript-free charts
Rich Harris explores how to create responsive SVG charts that work without JavaScript.
Check it out
Start your own freelance business by just learning Divi
Learn how to develop websites with the most popular WordPress theme in the world and secure your success as a freelancer.
Start learning now
Old CSS, new CSS
An excellent read on how CSS looked like in the past and where we are at now.
Read it
iHateRegex
Stop hating regex and start learning; iHateRegex is a very useful regex cheatsheet that also explains the commonly used expressions so that you can easily understand them.
Check it out
How I recreated a Polaroid camera with CSS gradients only
A high-level tutorial by Sarah Fossheim on how to recreate physical products with CSS only.
Read it
CSS Positioning
An interactive way to learn how positioning works in CSS. By Ahmad Shadeed.
Check it out
Flipping Images Horizontally or Vertically with CSS and JavaScript
Rik Schennink shows how to flip images horizontally and vertically using CSS and JavaScript.
Read it
How to Choose the Best Static Site Generator in 2020
A guide on the current top SSGs with tips for picking the right one for your project.
Read it
attributes.css
A very useful Gist of the seven different types of CSS attribute selectors by Emma Bostian.
Check it out
Palette Generator
Generate instant color combinations with this color schemes generator.
Check it out
coders.guide
A roadmap for learning full-stack web development using React.
Check it out
Simulating dark/light colour mode
A quick tip by Christian Heilmann on how to simulate dark/light mode in the dev tools of Microsoft Edge.
Check it out
Animating Clip-Path Sections w/ Intersection Observer
A great layout by Ryan Mulligan where he uses the intersection observer API to animate each section as it scrolls in and out of the viewport.
Check it out
No-Code Coffee
A daily shot of No-Code related things sent to you every day via email or Twitter.
Check it out
Displaced box
In this live coding session, Yuri Artyukh shows how to recreate the displaced box effect seen on the Milano Digital Week site.
Watch it
Styled Components vs. CSS Stylesheets
Luke Smetham weighs up the pros and cons of CSS vs. Styled Components and shares how it affects the way he write React components.
Read it
Motion
An animated SVG icon editor where you can animate a pre-built set of icons. By Philip Ardeljan.
Check it out
Cheat Sheets Dev
Developer community built to share the most used and popular programming snippets, in a simplistic way.
Check it out
Night & Day
A lovely toggle made by Steve Gardner. Here's a variation.
Check it out
Toggles
Super-awesome checkbox toggles made by Olivia Ng.
Check it out
FlowFields
A tool that lets you create some beautiful generative art using particle simulation to visualize a field of directional vectors.
Check it out