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.
![C508_Handbook](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2019/04/C508_Handbook.jpg)
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.
![C508_VC](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2019/04/C508_VC.jpg)
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!
![C508_yuantalk](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2019/04/C508_yuantalk.jpg)
Generative Art with CSS
The translation of Yuan Chuan’s CSSConf talk by Chen Hui Jing.
![C508_CodeGuppy](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2019/04/C508_CodeGuppy.jpg)
CodeGuppy
A place where kids and adults alike learn JavaScript coding through fun and easy to follow tutorials.
![C508_artdirection](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2019/04/C508_artdirection.jpg)
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.
![C508_typora](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2019/04/C508_typora.jpg)
Typora
A very minimal Markdown editor with a seamless writing and reading experience.
![C508_griditems](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2019/04/C508_griditems.jpg)
Controlling leftover Grid items with pseudo-selectors
Michelle Barker describes a technique for taking care of leftover grid items.
![C508_svgload](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2019/04/C508_svgload.jpg)
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.
![C508_styleguide](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2019/04/C508_styleguide.jpg)
CSS Grid: Style Guide
Olivia Ng created this great style guide with CSS Grid.
![C508_deno](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2019/04/C508_deno.jpg)
Deno, a new way to JavaScript
A presentation by Ryan Dahl on the new TypeScript runtime for Node called Deno.
![C508_test](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2019/04/C508_test.jpg)
Domain-Oriented Observability
Pete Hodgson describes a pattern for adding business-relevant observability in a clean, testable way.
![Screen-Shot-2019-04-15-at-22.55.10](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2019/04/Screen-Shot-2019-04-15-at-22.55.10.jpg)
CSS masonry with flexbox, :nth-child(), and order
Tobias Ahlin describes a CSS-only way of creating a masonry (or mosaic) layout.
![C508_poster](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2019/04/C508_poster.jpg)
Free Font: Postertoaster
A very artsy monospace typeface by Vsevolod Abramov.
![C508_acc](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2019/04/C508_acc.jpg)
Accessibility Events
An article by Mat Marquis about why we don’t want a way to know when a user has a disability.
![C508_3dyuan](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2019/04/C508_3dyuan.jpg)
Chasing
Yuan Chuan’s awesome animation with a 3D look.
![C508_boilerplate](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2019/04/C508_boilerplate.jpg)
Three.js Boilerplater for CodeSandbox
Francesco Michelini created a really useful Three.js boilerplate to easily quickstart a project on CodeSandbox.
![Screen-Shot-2019-04-15-at-22.45.53](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2019/04/Screen-Shot-2019-04-15-at-22.45.53.jpg)
GLSL: Blinn-phong shading
An incredible GLSL sphere demo by Liam Egan.
![C508_deutschmeister](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2019/04/C508_deutschmeister.jpg)
Free Font: Deutschmeister Moderne
Rick Lewik created this typeface as a homage to the Grobe Deutschmeister font.
![C508_variable](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2019/04/C508_variable.jpg)
Get a CSS Custom Property value with JavaScript
Andy Bell shows a trick for getting a CSS variable value with JavaScript.
![C508_editor](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2019/04/C508_editor.jpg)
Editor
In case you didn’t know about it: a real-time, responsive HTML/CSS/JS code editor.
![C508_spiral](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2019/04/C508_spiral.jpg)
Whirling
A fantastic spiral demo by Yuan Chuan. Support on Chrome and Firefox.
![Screen-Shot-2019-04-15-at-22.46.16](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2019/04/Screen-Shot-2019-04-15-at-22.46.16.jpg)
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.
![C508_pixelcorner](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2019/04/C508_pixelcorner.jpg)
Pixel borders
A SASS mixin to add pixelated borders to HTML elements.
![C508_hooks](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2019/04/C508_hooks.jpg)
React Hooks Cheat Sheet
A React hooks cheat sheet with live editable examples.
![C508_reactsvg](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2019/04/C508_reactsvg.jpg)
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.