Collective #414
Publikováno: 10.5.2018
Guess.js * Styling buttons, the right way * Ranger * Fugue * First Input Delay * Themify * What's right with css-in-js
Collective #414 was written by Pedro Botelho and published on Codrops.

Inspirational Website of the Week: #Art4GlobalGoals
A beautiful design with great typography and fantastic effects. Our pick this week.

Enroll in over 65,000 online courses for only $14.99 each
From web design and development to digital marketing to cooking courses, Udemy has something for everyone. Take top-rated courses, discover new passions, and expand your skills.

Guess.js
A very interesting toolkit for enabling data-driven user experiences on the web.

First Input Delay
Philip Walton explains the “First Input Delay” interactivity metric that the Chrome team is currently experimenting with.

CSS Grid Layout Interface Builder
A very useful visual interface builder for CSS Grid that allows you to create and export your custom layouts (with legacy grid support).

WebGL Distortion Slider
Ash Thornton implemented a beautiful Dribbble shot designed by Nathan Riley and applied a great three.js powered transition effect inspired by Robin’s distortion idea.

Free Font: MT Knox
A fine editorial display font designed by Morrison Type.

Themify
With Themify you can manage your application’s themes in realtime, using a robust solution that’s easily configurable. Read more about it in this article.

The Front-End Tooling Survey 2018 – Results
The interesting results of this year’s Front-End Tooling Survey by Ashley Nolan.

Styling buttons, the right way
Florens Verschelde shows how to create basic styles for links and buttons, and how to make a custom .btn CSS component.

What’s new in Chrome DevTools (Google I/O ’18)
Learn about the latest features shipping in Chrome DevTools.

My struggle to learn React
Brad Frost shares why he has trouble with learning React.

Overriding Default Button Styles
Chris Coyier explores how the default button styles can be overridden.

What’s right with css-in-js
Micah Godbolt shares some interesting thoughts on CSS in JS as an answer to Brad Frost’s “What’s wrong with css-in-js”.

World Draw
World Draw starts with a simple 2D sketch, which is then transformed into a customizable 3D model and placed into a virtual world.

Fugue
High-quality music tracks for your projects. Free for a link, by the folks of Icons8.

New CSS Features That Are Changing Web Design
A nice introduction to new CSS layout options with some interesting examples. By Zell Liew.

Using grids to create copies
Roman Komarov’s interesting CSS grid demo where the items’ sizes depend on a particular one.

A Guide to JavaScript Regular Expressions
A great manual for regular expressions in JavaScript by Flavio Copes.

Summer Child Graphics Set
A beautiful summer themed illustration set by Helter Skelter.

Workplace Brand Visualizations
A very interesting digital visualizations project that shows evolving animated graphic patterns.

How To: Tune a Guitar
A beautiful and interactive guide that will teach you how to tune a guitar. By Matthew Conlen and Alex Kale from the Interactive Data Lab at the University of Washington.

Emoji Bounce
A fun Emoji demo by Chris Gannon.

Ranger
Ranger.js is a small, standalone library for working with ranges of numbers in JavaScript.

Free Font: Mandorlato
An almond shaped font designed by Stefano Giliberti.
Collective #414 was written by Pedro Botelho and published on Codrops.