Collective #508
Publikováno: 15.4.2019
Three.js Boilerplater * Pixel borders * Domain-Oriented Observability * Typora * Accessibility Events
Collective #508 was written by Pedro Botelho and published on Codrops.

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.

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!

Generative Art with CSS
The translation of Yuan Chuan’s CSSConf talk by Chen Hui Jing.

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

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.

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

Controlling leftover Grid items with pseudo-selectors
Michelle Barker describes a technique for taking care of leftover grid items.

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.

CSS Grid: Style Guide
Olivia Ng created this great style guide with CSS Grid.

Deno, a new way to JavaScript
A presentation by Ryan Dahl on the new TypeScript runtime for Node called Deno.

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

CSS masonry with flexbox, :nth-child(), and order
Tobias Ahlin describes a CSS-only way of creating a masonry (or mosaic) layout.

Free Font: Postertoaster
A very artsy monospace typeface by Vsevolod Abramov.

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

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

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

GLSL: Blinn-phong shading
An incredible GLSL sphere demo by Liam Egan.

Free Font: Deutschmeister Moderne
Rick Lewik created this typeface as a homage to the Grobe Deutschmeister font.

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

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

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

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.

Pixel borders
A SASS mixin to add pixelated borders to HTML elements.

React Hooks Cheat Sheet
A React hooks cheat sheet with live editable examples.

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.
Collective #508 was written by Pedro Botelho and published on Codrops.