Collective #612
Publikováno: 2.7.2020
60 Days of Animation * Stryve * The design systems between us * html.systems * Design Better Buttons
The post Collective #612 appeared first on Codrops.

Inspirational Website of the Week: Sennesro
Simplicity, elegance and flowy motion made us pick Sennesro as inspirational website this week.

60 Days of Animation
The Undead Institute offers books on HTML, CSS, Responsive Design and more that marry humor, excellent teaching, and brain-lodging practice for an experience that’ll outlive the apocalypse.

Irregular-shaped Links with Subgrid
In this excellent article, Michelle Barker shows how CSS subgrid can solve the problem of irregular, distributed link shapes.

Efficiently build beautiful websites for your clients
You’ve never built a WordPress website like this before. Divi is more than just a WordPress theme, it’s a completely new website building platform that replaces the standard WordPress post editor with a vastly superior visual editor.

Stryve
A new community for tech enthusiasts to share, learn, and build their careers.

The design systems between us
Ethan Marcotte shares his thoughts on why he believes that design systems haven’t brought rich, cross-functional collaboration to most organizations.

Understanding Template Literals in JavaScript
Tania Rascia’s in-depth explanation of template literals in JavaScript.

html.systems
An excellent library of components built with HTML, CSS and JavaScript.

3D banners with ScrollTrigger
A supercool GSAP scroll demo with some 3D magic.

Getting CSS Translate values with JavaScript
Zell Liew shows how you can get CSS translate values in JavaScript by parsing 2d and 3d matrices.

Aligning Logo Images in CSS
Ahmad Shadeed tackles the task of taking a group of logos, and exploring many ways to align and position them perfectly in CSS.

Design Better Buttons
A great read on button design best practices by Andrew Coyle.

Launching docs.github.com
Jenn Leaver writes about the launch of docs.github.com, a single home for all of GitHub’s product documentation.

Profiled
With Profiled you can create a developer portfolio from your GitHub account.

Is WebP really better than JPEG?
According to Google, WebP is 25 – 34% smaller than JPEG at equivalent quality. But how much of it is really true? Find out in this article by Johannes Siipola.

Free Faces
A great selection of freely available fonts.

CSS Painting vs. CSS Houdini Paint API
Lisi Linhart takes a look at the performance of the Paint API vs. traditional CSS painting.

Dark Ages of the Web
A fun journey that recaps the old Web features and front-end patterns.

I Just Hit $100k/yr On GitHub Sponsors!
Caleb Porzio shares his fascinating story of a successful open source project and the earnings he’s made with its screencasts.

The Google ‘vs’ Trick
Read how ego graphs can help you learn about AI, play chess, eat healthier, buy a dog and find love.

Creating a Menu Image Animation on Hover
A tutorial on how to create a hover effect for a menu where images appear with an animation on each item.

UI Interactions & Animations Roundup #8
A new collection of UI animation shots that summarizes the latest creative trends.

Inspirational Websites Roundup #16
This special collection of wonderful websites will get you up-to-date on current web design trends.
The post Collective #612 appeared first on Codrops.