Bi-Weekly Frontend News

Collective #612

July 2, 2020

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.

Check it out

Irregular-shaped Links with Subgrid

In this excellent article, Michelle Barker shows how CSS subgrid can solve the problem of irregular, distributed link shapes.

Read it

Our Sponsor

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.

Check it out

Stryve

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

Check it out

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.

Read it

Understanding Template Literals in JavaScript

Tania Rascia's in-depth explanation of template literals in JavaScript.

Read it

html.systems

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

Check it out

3D banners with ScrollTrigger

A supercool GSAP scroll demo with some 3D magic.

Check it out

Getting CSS Translate values with JavaScript

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

Read it

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.

Read it

Design Better Buttons

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

Read it

Launching docs.github.com

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

Read it

Profiled

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

Check it out

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.

Read it