Collective #508

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

Front-end Developer Handbook 2019

Cody Lindley wrote this guide that outlines and discusses the practice of front-end engineering, how to learn it and what tools are used when practicing it in 2019.

Check it out

Our Sponsor
Visual Composer founder had an AMA on Reddit – and he survived!

Here are the most surprising 5 things he’s learned from the community and the future he’s planning for Visual Composer. Bonus: there’s a great freebie at the end of his post, go check it out!

Discover more

Generative Art with CSS

The translation of Yuan Chuan’s CSSConf talk by Chen Hui Jing.

Read it

CodeGuppy

A place where kids and adults alike learn JavaScript coding through fun and easy to follow tutorials.

Check it out

Art Direction For The Web Using CSS Shapes

A tutorial by Andy Clarke where he goes beyond basic CSS Shapes and shows how you can use them to create five types of distinctive and engaging layouts for your art-directed designs.

Read it

Typora

A very minimal Markdown editor with a seamless writing and reading experience.

Check it out

Controlling leftover Grid items with pseudo-selectors

Michelle Barker describes a technique for taking care of leftover grid items.

Read it

Inline an SVG file in HTML, declaratively & asynchronously!

A fast and easy way to inline some remote SVG or HTML into your page. By Scott Jehl.

Check it out

CSS Grid: Style Guide

Olivia Ng created this great style guide with CSS Grid.

Check it out

Deno, a new way to JavaScript

A presentation by Ryan Dahl on the new TypeScript runtime for Node called Deno.

Watch it

Domain-Oriented Observability

Pete Hodgson describes a pattern for adding business-relevant observability in a clean, testable way.

Read it

CSS masonry with flexbox, :nth-child(), and order

Tobias Ahlin describes a CSS-only way of creating a masonry (or mosaic) layout.

Read it

Free Font: Postertoaster

A very artsy monospace typeface by Vsevolod Abramov.

Get it

Accessibility Events

An article by Mat Marquis about why we don’t want a way to know when a user has a disability.

Read it

Chasing

Yuan Chuan’s awesome animation with a 3D look.

Check it out

Three.js Boilerplater for CodeSandbox

Francesco Michelini created a really useful Three.js boilerplate to easily quickstart a project on CodeSandbox.

Check it out

GLSL: Blinn-phong shading

An incredible GLSL sphere demo by Liam Egan.

Check it out

Free Font: Deutschmeister Moderne

Rick Lewik created this typeface as a homage to the Grobe Deutschmeister font.

Get it

Get a CSS Custom Property value with JavaScript

Andy Bell shows a trick for getting a CSS variable value with JavaScript.

Read it

Editor

In case you didn’t know about it: a real-time, responsive HTML/CSS/JS code editor.

Check it out

Whirling

A fantastic spiral demo by Yuan Chuan. Support on Chrome and Firefox.

Check it out

Instagram Layout built in CSS Grid, Flexbox and Vue

A fully responsive take on the Instagram app layout using CSS Grid and Flexbox for the implementation of the layout and VueJS for the processing of the data.

Check it out

Pixel borders

A SASS mixin to add pixelated borders to HTML elements.

Check it out

React Hooks Cheat Sheet

A React hooks cheat sheet with live editable examples.

Check it out

From Our Blog
Pulling Apart SVGs with Reusable WebGL Components Using React-three-fiber

Learn how to pull apart SVGs in 3D space with Three.js and React, using abstractions that allow us to break the scene graph into reusable components.

Check it out

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