Collective #571
Publikováno: 5.12.2019
CSS Layout * Advent of Code 2019 * DrumBot * Better Web List * The State of UX in 2020 * Binary Music Player
Collective #571 was written by Pedro Botelho and published on Codrops.

Inspirational Website of the Week: Esperanto
A fantastic interactive design that celebrates an exciting journey. Our pick this week.

CSS: An Art, a Science, a Nightmare (Everything You Should Know)
In this excellent guide, Tania Rascia covers the practical parts of CSS that are important on a daily basis.

Work with the Powerful Divi Theme Builder
Learn how you can enjoy complete control over your entire website with the new and powerful Divi Theme Builder.

CSS Layout
A fantastic collection of popular layouts and patterns made with CSS. Made by Phuoc Nguyen.

Advent of Code 2019
Advent of Code is an Advent calendar of small programming puzzles for a variety of skill sets and skill levels that can be solved in any programming language you like.

Use CSS Subgrid to layout full-width content stripes in an article template
Learn how to augment a Grid-infused article layout that allows for certain sections of content to break out into full-width areas.

An Introduction to Variable Fonts
An excellent guide to variable fonts by Jason Pamental.

Music and Web Design
Brad Frost’s interesting thoughts on the parallels between Music and Web Design.

Web Components and the Accessibility Object model (AOM)
Léonie Watson writes about the AOM, an experimental JavaScript API that proposes several new features intended to solve existing accessibility use cases.

DrumBot
Play real-time music with a machine learning drummer that drums based on your melody. Read more about it in this article.

Binary Music Player
A musical player, with a binary twist. Built by Tim Holman using Tone.JS.

Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components?
Drew McLellan talks to Smashing author Heydon Pickering about Inclusive Components.

The State of UX in 2020
An insightful list of what to expect for User Experience (UX) Design in the next year.

Make a smooth shadow, friend
A smooth shadow generator inspired by Tobias Ahlin’s article. By Philipp Brumm.

Re-creating the ‘His Dark Materials’ Logo in CSS
Michelle Barker re-creates an interesting typographic logo with CSS.

Firefox 71: A year-end arrival
A plethora of new developer tools features including the web socket message inspector, console multi-line editor mode and more are coming in the new Firefox version.

Holiday CSSweater Generator
A great CSS pattern generator with a geeky Christmas theme. By Adam Kuhn.

Interactive Hippo Button
A fun button that looks like a hungry Hippo. By Mariusz Dabrowski. Check out the written and video tutorial.

Awesome Demos Roundup #11
A hand-picked collection of fantastic web experiments from the past weeks.

Piano keyboard
An awesome Codevember demo by Ricardo Oliva Alonso.

Motion Paths – Past, Present and Future | Codrops
An article by Cassie Evans that explores a few ways of moving an element along a path, including the upcoming CSS motion path module and the newly released GSAP3.
Collective #571 was written by Pedro Botelho and published on Codrops.