Collective #508

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

C508_Handbook

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

C508_VC

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

C508_yuantalk

Generative Art with CSS

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

Read it

C508_CodeGuppy

CodeGuppy

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

Check it out

C508_artdirection

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

C508_typora

Typora

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

Check it out

C508_griditems

Controlling leftover Grid items with pseudo-selectors

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

Read it

C508_svgload

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

C508_styleguide

CSS Grid: Style Guide

Olivia Ng created this great style guide with CSS Grid.

Check it out

C508_deno

Deno, a new way to JavaScript

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

Watch it

C508_test

Domain-Oriented Observability

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

Read it

Screen-Shot-2019-04-15-at-22.55.10

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

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

Read it

C508_poster

Free Font: Postertoaster

A very artsy monospace typeface by Vsevolod Abramov.

Get it

C508_acc

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

C508_3dyuan

Chasing

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

Check it out

C508_boilerplate

Three.js Boilerplater for CodeSandbox

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

Check it out

Screen-Shot-2019-04-15-at-22.45.53

GLSL: Blinn-phong shading

An incredible GLSL sphere demo by Liam Egan.

Check it out

C508_deutschmeister

Free Font: Deutschmeister Moderne

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

Get it

C508_variable

Get a CSS Custom Property value with JavaScript

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

Read it

C508_editor

Editor

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

Check it out

C508_spiral

Whirling

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

Check it out

Screen-Shot-2019-04-15-at-22.46.16

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

C508_pixelcorner

Pixel borders

A SASS mixin to add pixelated borders to HTML elements.

Check it out

C508_hooks

React Hooks Cheat Sheet

A React hooks cheat sheet with live editable examples.

Check it out

C508_reactsvg

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.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *