Collective #586
Publikováno: 3.2.2020
iHateRegex * Old CSS, new CSS * Vanilla Web Projects * coders.guide * Responsive, JavaScript-free charts
Collective #586 was written by Pedro Botelho and published on Codrops.

Vanilla Web Projects
Mini projects built with HTML5, CSS and JavaScript without frameworks or libraries.

A new technique for making responsive, JavaScript-free charts
Rich Harris explores how to create responsive SVG charts that work without JavaScript.

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.

Old CSS, new CSS
An excellent read on how CSS looked like in the past and where we are at now.

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.

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.

CSS Positioning
An interactive way to learn how positioning works in CSS. By Ahmad Shadeed.

Flipping Images Horizontally or Vertically with CSS and JavaScript
Rik Schennink shows how to flip images horizontally and vertically using CSS and JavaScript.

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.

attributes.css
A very useful Gist of the seven different types of CSS attribute selectors by Emma Bostian.

Palette Generator
Generate instant color combinations with this color schemes generator.

coders.guide
A roadmap for learning full-stack web development using React.

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.

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.

No-Code Coffee
A daily shot of No-Code related things sent to you every day via email or Twitter.

Displaced box
In this live coding session, Yuri Artyukh shows how to recreate the displaced box effect seen on the Milano Digital Week site.

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.

Motion
An animated SVG icon editor where you can animate a pre-built set of icons. By Philip Ardeljan.

Cheat Sheets Dev
Developer community built to share the most used and popular programming snippets, in a simplistic way.

Night & Day
A lovely toggle made by Steve Gardner. Here’s a variation.

Toggles
Super-awesome checkbox toggles made by Olivia Ng.

FlowFields
A tool that lets you create some beautiful generative art using particle simulation to visualize a field of directional vectors.
Collective #586 was written by Pedro Botelho and published on Codrops.