Collective #540
Publikováno: 12.8.2019
Largest Contentful Paint * Dashblock * The birth of Inter * Amphora * JAMstack Templates * Extra.css
Collective #540 was written by Pedro Botelho and published on Codrops.

Largest Contentful Paint
Philip Walton explains how to make it easier to know when a page’s important content has loaded using the Largest Contentful Paint (LCP) API.

Get a Free .design Domain Name For a Year
Thinking of building your portfolio? .design is like .com, but it’s more relevant to what you do as a designer. Includes free SiteBuilder.

Create and Deploy a Node.js, Express, & PostgreSQL REST API to Heroku
Learn how to create a local REST API with Node using an Express server and PostgreSQL database in this tutorial by Tania Rascia.

Lazy load embedded YouTube videos
Arthur Corenzan shows a smart way to embed a YouTube video using the srcdoc
attribute. Remy Sharp also adds IE11 support to this solution.

Extra.css
A CSS Houdini library giving some cool features to your site (turn on Experimental Web Platform features or use Chrome Canary to see the effects). By Una Kravets.

Design Principles for Developers: Processes and CSS Tips for Better Web Design
Andrew Spencer practical guide with helpful tips for creating better web experiences.

Inspired Design Decisions: Ernest Journal
In this third instalment of Inspired Design Decisions, Andy Clarke will teach you how to use frameworks to create layouts as engaging as in the well-known Ernest Journal.

Time to First Byte: What It Is and Why It Matters
Learn all about the “Time to First Byte” (TTFB) metric in this article by Harry Roberts.

Procedurally Generated CSS Numbers
An awesome demo made by Adam Kuhn.

Async Generator Functions in JavaScript
Valeri Karpov explains what async generator functions are and shows some practical examples.

Quick tip: using scrollIntoView() to show added elements to a container with overflow
A great tip by Christian Heilmann on using scrollIntoView
.

Building an extensible app or library with vanilla JS
Chris Ferdinandi shares some insights on building a modular and extensible vanilla JavaScipt application.

Dashblock
Turn any website into an API with this machine learning powered tool.

The birth of Inter
Learn how the new open-source typeface used by GitHub and Mozilla came to be in this article by Carmel DeAmicis.

ThreeJS Hover Zoom Channel Displacement
An amazing channel displacement demo by TheFrost.
react-three-fiber/three.js train app
Paul Henschel’s interesting experiment based on a SwiftUI train app. Read more about it in this tweet.

Introducing git-revise
Nika Layzell introduces git-revise, a new tool to overcome the downsides of git rebase -i
.

Crash Course: Headless WordPress with WPGraphQL, ACF, and React
A crash course where you’ll learn the basics of how to get a simple headless WordPress setup with WPGraphQL and React.

Metaprogramming in JavaScript with jscodeshift
Kacper Kula’s article on how to analyze and modify your programs using Facebook’s jscodeshift.

JAMstack Templates: How to Launch Fast, CMS-Powered Static Sites
Francois Lanthier Nadeau shares the results of a JAMstack site challenge with lots of insights.

Stop Misusing Toggle Switches
Some useful advice on when to use toggle switches and when to avoid them.

Circles #3457
A mesmerizing animated circles demo by Dan Wilson.

Uno Platform
In case you missed it: Uno let’s you build mobile, desktop and WebAssembly apps with C# and XAML.
Collective #540 was written by Pedro Botelho and published on Codrops.