Collective #512

Original Source: http://feedproxy.google.com/~r/tympanus/~3/VV820Ts2Qf4/

Let’s Make A Design System! Live Coding at Smashing Conf

Watch Brad Frost live-code a design system on stage at Smashing Conf San Francisco.

Check it out

Moving from Gulp to Parcel

Ben Frain explains how to use Parcel instead of Gulp for application bundling.

Read it

Our Sponsor
Divi: The Powerful Visual Page Builder

Divi is a revolutionary WordPress theme and visual page builder for WordPress. With Divi, you can build your website visually. Add, arrange and design content and watch everything happen instantly right before your eyes.

Try it

Getting To Know The MutationObserver API

Louis Lazaris shows how to use the MutationObserver API to make observing for DOM changes relatively easy.

Read it

CSS Spatial Navigation Level 1

The first public working draft of the specification that defines a general model for navigating the focus using the arrow keys, as well as related CSS, JavaScript features and Events.

Read it

3D Projection

Jordan Santell writes about the fundamentals of 3D projection and frustums with lots of visuals and math cheats.

Read it

Using React Router for a Single Page Application

A tutorial by Tania Rascia on how to use the react-router-dom library.

Read it

Musical Bubble Sort (CPC Bubble Sort)

In this great demo by Stephen Sparling you can actually listen to Bubble sort!

Check it out

Line Drawing

A hypnotizing pattern demo that changes according to the mouse position. By Liam Egan.

Check it out

DRAG AND JUUUMP!! AND DROP

Have some fun with a click and drag interaction.

Check it out

Create an animated scroll cue

Learn how to add a subtle cue to the bottom of the page that lets people know that they can scroll to see more content.

Read it

The Billion Ways to Display an SVG

An exploration of the various ways there are across HTML, CSS, and JavaScript for getting a SVG to display in the browsers.

Read it

Angled Background CSS-only “Mixin”

A demo by Miriam Suzanne that shows how to create Sass-like “functions” and “mixins” in plain CSS.

Check it out

Base Web React Components

Base Web is the React implementation of Base, Uber’s design system comprised of modern, responsive, living components.

Check it out

Enriching Search Results Through Structured Data

Learn about the importance of structured data in this article by Daniel Waisberg on the Google Webmaster Central Blog.

Read it

Building a pure CSS animated SVG spinner

Glenn McComb’s tutorial on to create a SVG spinner powered by CSS animations.

Read it

Lorem Picsum

Easy to use, stylish placeholders where you just need to add your desired image size after the URL, and you get a random image.

Check it out

Free Font: Pippa Handwriting

A playful handwriting font made by Queenie Appleyard.

Get it

Rushing rapid in a forest by Three.js

A beautiful Three.js demo by Yiting Liu.

Check it out

Mirrorball

A very creative way of showcasing projects.

Check it out

A Designer’s Guide to Animating Icons with CSS

Shannon Thomann shows how to approach CSS animations for animating SVG icons.

Read it

City Life Icons Collection

50 SVG and PNG icons with a city theme by Freepik. Free for a subscription.

Get it

Collective #512 was written by Pedro Botelho and published on Codrops.