Collective #508
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
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
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