Pedro Botelho | The Blog Pros

October 15, 2020

Inspirational Website of the Week: Monsieur M

An incredibly smooth and fine-tuned design with beautiful creative details. Our pick this week

Get inspired

:focus-visible Is Here

Fantastic news: Chrome 86 just shipped with support for :focus-visible.

Read it

PureCSS Character

Diana Smith made another mind-blowing CSS character and this time, you can adjust some colors!

Check it out

Developing For The Semantic Web

Frederick O’Brien’s article on the Semantic Web and how to get started with data-fying content.

Read it

min(), max(), and clamp(): three logical CSS functions to use today

Una Kravets explains to control element sizing, maintain proper spacing, and implement fluid typography using the min, max, and clamp functions.

Read it

Huluween – The Screamlands

Take a trip to Huluween’s The Screamlands — a hair-raising, haunted house experience that will make your wildest nightmares come true. Fantastic work by Active Theory.

Check it out

Radix Icons

A crisp set of 15×15 icons designed by the Modulz team.

Check it out

Butter Slider

Butter is a simple drag and hold slider with zero dependencies.

Check it out

Encharm

A wonderful demo of real-time raytracing in WebGL. By Dre.

Check it out

The –var: ; hack to toggle multiple values with one custom property

Lea Verou explains a very interesting trick to turn multiple different values on and off across multiple different CSS properties.

Read it

Cumulative Layout Shift in Practice

Learn all about the Cumulative Layout Shift (CLS), the user experience metric that measures how unstable content is for your visitors.

Read it

Webpack Tutorial: How to Set Up webpack 5 from Scratch

Tania Rascia’s super-useful guide where you’ll learn how to use webpack to bundle JavaScript, images, fonts, and styles for the web and set up a development server.

Read it

ZzFXM

ZzFXM is a tiny music generator and toolkit designed for size-limited JavaScript productions.

Check it out

Free Font: Nafta

A crisp and modern brush marker typeface that embodies free hand drawn shapes combined with bouncy positioning between each letter.

Check it out

Cheating Entropy with Native Web Technologies

Some very interesting thoughts by Jim Nielsen on how web tooling introduces a whole new layer of complexity that needs to be maintained.

Read it

Writing even more CSS with Accessibility in Mind, Part 2: Respecting user preferences

Manuel Matuzovi?’s second article in a series where he explores user preferences and how to respect them when writing CSS.

Read it

Totem animals

A beautiful WebGL experiment made by ALP Dev.

Check it out

Pi-Slices

Pi-Slices is a GIF artist who has made a 3D animated GIF every day more than 6 years. Some great coding inspiration!

Check it out

When fonts fall

In case you missed it: A great deep-dive into font fallback by Marcin Wichary.

Read it

Link hover animation

A really nice hover effect made by Aaron Iker.

Check it out

Logical layout enhancements with flow-relative shorthands

Learn about some new logical property shorthands and new inset properties for Chromium.

Read it

From Our Blog

Coding the Mouse Particle Effect from Mark Appleby’s Website

Learn how to create the mouse particle effect from Mark Appleby’s website in this ALL YOUR HTML episode.

Check it out

From Our Blog

Scroll Animations for Image Grids

Some ideas for scroll animations for image grids powered by Locomotive Scroll.

Check it out

The post Collective #627 appeared first on Codrops.

October 8, 2020

Inspirational Website of the Week: When we were kids

A fresh, crisp design with some rad effects and really nice details. Our pick this week.

Get inspired

Our Sponsor

Create Pixel-Perfect WordPress Websites With Elementor

Build websites that people won’t forget! Design your sites like a pro, using advanced features like Motion Effects, Global Colors & Typography, and many more!

Start Today

With Code

Learn basic movements for interactions with visual examples. By Jongmin Kim.

Check it out

CSS Grid full-bleed layout tutorial

In this great interactive article, Josh W Comeau shows an elegant solution to a tricky modern layout.

Read it

Sketchy Webcam Filter Effects

Alex Trost deconstructs Adam Kuhn’s amazing webcam filter effect.

Read it

Build a responsive media browser with CSS

Learn how you can create a flexible media browser and video player layout that maintains its aspect ratio at all viewports using the power of modern CSS layout.

Read it

WebGL Slider Interaction

A fantastic demo made by Sikriti Dakua.

Check it out

Why Tailwind CSS

Shawn Wang shares why he changed his mind on Tailwind CSS, and why he now considers it the “Goldilocks Styling Solution”.

Read it

ScrollTrigger Demos

A super useful collection of demos that use GSAP’s ScrollTrigger plugin.

Check it out

CSS Variables 101

A great guide on CSS Custom Properties by Ahmad Shadeed.

Read it

Clamp

Trys Mudford dives into one of CSS’s exciting new features for fluid scaling, clamp() for Utopia.

Read it

Full bleed layout using simple CSS

Kilian Valkhof shows a more simple solution to the full-bleed layout problem.

Read it

Mamboleoo

The fantastic website of Louis Hoebregts designed by Lotte Bijlsma.

Check it out

How To Use Face Motion To Interact With Typography

In this article by Edoardo Cavazza, you’ll learn how to combine Machine Learning, variable fonts, and CSS grids to create layouts that respond to the proximity, the inclination, and the number of the users’ faces.

Read it

Closing the gap (in flexbox)

Sergio Villar’s blog post about the challenges of flexbox in Webkit and how they were fixed.

Read it

Beautiful CSS 3D Transform Perspective Examples in 2020

Beautiful CSS 3D transform examples using a single div that you can copy with one click.

Check it out

What’s New In DevTools (Chrome 87)

New CSS Grid debugging tools, Web Authn tab, moveable tools and Computed sidebar pane are all coming with Chrome 87.

Read it

How to work with multiselect elements in vanilla JS

Learn how to work with multiselect elements in this article by Chris Ferdinandi.

Read it

To Eleventy and Beyond

Stuart Colville writes about how the Firefox Extension Workshop site was migrated to Eleventy.

Read it

From Our Blog

WebGL Video Transitions with Curtains.js

Some experimental video transitions using Curtains.js and WebGL shaders.

Check it out

From Our Blog

Recreating the “100 Days of Poetry” Effect with Shader, ScrollTrigger and CSS Grid

The latest ALL YOUR HTML live coding session where you’ll learn how to recreate the effect seen on 100 DAYS OF POETRY.

Check it out

The post Collective #626 appeared first on Codrops.

September 24, 2020

Collective #624

Inspirational Website of the Week: Brews & Grooves

An excellent design with some interesting animations and great typography! Our pick this week.

Get inspired

Learn about spring physics animation in JavaScript

Josh W Comeau explains the magic behind Spring Physics and why they are the secret ingredient that make animations “taste better”.

Read it

Simplify Your Stack With A Custom-Made Static Site Generator

In this article, Bryan Robinson explores how to take a humble HTML page and make its content editable in a CMS with no frameworks and no client-side JavaScript.

Read it

Ray Marching Soft Shadows in 2D

Ryan Kaplan posted a WebGL demo on Twitter and now he explains how it works under the hood.

Read it

filters.css

In case you missed it: a supercool CSS only library to apply color filters.

Check it out

Blacklight

A great real-time website privacy inspector that will reveal the specific user-tracking technologies on any given website.

Check it out

Buttons that Spark Joy

The web certainly can’t have enough of these: Aaron Iker’s buttons that are mini celebrations. In this article you’ll learn how they are made.

Read it

#s3e38 ALL YOUR HTML, Fancy colors shader and GSAP ScrollTrigger

In this video Yuri Artyukh dissects and recreates the amazing animations seen on mav.farm.

Watch it

3D Room

Amazing CSS work by Ricardo Oliva Alonso: a 3D room with great lightning.

Check it out

Finding The Root Cause of a CSS Bug

Great article on debugging CSS by Ahmad Shadeed.

Read it

adidas – CHILE20

Outstanding WebGL work for adidas by Active Theory.

Check it out

Content delivery networks (CDNs)

This article provides a comprehensive overview of content delivery networks (CDNs). In addition, it explains how to choose, configure, and optimize a CDN setup.

Read it

Meta Tags

With Meta Tags you can edit metatags and generate a preview for social media.

Check it out

Old, Good Database Design

An excellent summary of the fundamentals of good database design.

Read it

Mono Icons

A simple, consistent open-source icon set designed to be used in a wide variety of digital products. Read more about it in this article.

Check it out

From Our Blog

Inspirational Websites Roundup #18

A gigantic set of hot new websites for your inspiration and to get you up to date on the current web design trends.

Check it out

From Our Blog

UI Interactions & Animations Roundup #10

Check out the latest trends in web motion design, UI interaction and animations and get inspired.

Check it out

The post Collective #624 appeared first on Codrops.

September 17, 2020

Collective #623

Inspirational Website of the Week: Claudio Guglieri

A well designed and exciting web experience by Claudio Guglieri. Our pick this week.

Get inspired

Progressive Enhancement with WebGL and React

David Lindkvist explains how the 14islands team approaches mixing creative technologies like WebGL and HTML/CSS while ensuring the content is still available to as many visitors as possible.

Read it

Sidebar Webring

The Sidebar Webring is a collection of handpicked sites and blogs focused on design and the web. Read more about reviving this cool old concept in this article by Sacha Greif.

Check it out

BGJar

A Free SVG background generator with lots of patterns to choose from.

Check it out

Forms best practice

A comprehensive guide to well-made forms by Geri Reid.

Check it out

eleventy-high-performance-blog

A starter repository for building a blog with the Eleventy static site generator implementing a wide range of performance best practices.

Check it out

Sombras.app

Create and share shadow art with Sombras. Made with React-three-fiber and cannon.js.

Check it out

How to use CSS clipping

Another great article by Rachel Andrew where you’ll learn the different ways to create a clip-path.

Read it

Learn CSS Centering

A visual guide to everything you need to know about centering in CSS by Ahmad Shadeed.

Read it

An Introduction To Running Lighthouse Programmatically

This article contains a brief introduction to Lighthouse, discusses the advantages of running it programmatically, and walks through a basic configuration.

Read it

How to Use Fetch with async/await

In this article Dmitri Pavlutin shows the common scenarios of how to use the Fetch API with the async/await syntax.

Read it

Mirrors

React-three-fiber powered mirrors made by Marco Ludovico Perego.

Check it out

Is this evil?

Lars Wikman asks an interesting and important question reagrding some “evil” things that can be done with CSS.

Read it

Understanding the Event Loop, Callbacks, Promises, and Async/Await in JavaScript

In this article, you will learn about the event loop, the original way of dealing with asynchronous behavior through callbacks, the updated ECMAScript 2015 addition of promises, and the modern practice of using async/await.

Read it

Voronoi Pebbles

Beautiful Voronoi pebbles by James Hancock.

Check it out

Crumbskees

Such a cool game: The Crumbskees are lunch-munching couch potatoes on the hunt for more food. Eat as many snacks as you can before your show comes back from commercial!

Check it out

fr.js

An amazing Three.js demo by Yuri Artiukh.

Check it out

Learning About CSS 3D Transforms and Perspective

Michelle Barker shares her journey of learning 3D transforms and perspective.

Read it

Tooltip Sequence

A simple step by step tooltip helper for any site.

Check it out

The tangled webs we weave

Dave Rupert shares another reflection on modern web development.

Read it

How to use CSS masking

Rachel Andrew explains how to use the mask-image property in CSS, which lets you specify an image to use as a mask layer.

Read its

Writing even more CSS with Accessibility in Mind, Part 1: Progressive Enhancement

The first article in a series on writing CSS with accessibility in mind by Manuel Matuzovi?.

Read it

Setting Up Tailwind CSS in a Vue.js Project

Learn how to craft better looking Vue.js apps using Tailwind CSS. This tutorial explains what Tailwind is and how to set it up in a Vue project.

Read it

You Really Don’t Need All That JavaScript, I Promise

An interesting presentation by Stuart Langridge at GOTO Chicago 2020.

Watch it

Tools should not only be for experts – they should turn us into them

Christian Heilmann argues that it is high time we moved away from the concept of “tools for experts” towards one of “using this tool over time makes you an expert”.

Read it

Managing several displays with the Multi-Screen Window Placement API

Thomas Steiner article about the Multi-Screen Window Placement API that allows you to enumerate the displays connected to your machine and to place windows on specific screens.

Read it

LED Switch

A very nice switch made by Jon Kantner.

Check it out

From Our Blog

Menu to Inner Page Animation with Image Grid Background

A website layout with a menu and background image grid that animates to an inner content page.

Check it out

The post Collective #623 appeared first on Codrops.

September 10, 2020

Collective #622

Inspirational Website of the Week: MGcream

A fun design with a modern touch and some lovely details. Our pick this week.

Get inspired

Parsel

Parsel is a tiny, permissive CSS selector parser by Lea Verou.

Check it out

react-three-flex

React-three-flex brings the flexbox spec to react-three-fiber to make it easier to place content. Check out this amazing demo. By Paul Henschel.

Check it out

REST API: Sorting, Filtering, and Pagination

In this great tutorial, Tania Rascia makes an example API endpoint and SQL query for various sort, paginate, and filter APIs.

Read it

Custom, accessible radio/checkbox buttons with perfect alignment

Learn how to create custom, accessible radio and checkbox buttons in CSS that perfectly align with their labels.

Check it out

How to pick more beautiful colors for your data visualizations

Lisa Charlotte Rost explains how to choose the right colors for your charts and visualizations.

Check it out

Alter

A creative 3D typeface exploration by Yuin Chien.

Check it out

AVIF has landed

Jake Archibald introduces the new AVIF image format that is derived from the keyframes of AV1 video.

Read it

Accessible Color Standards – Designing in the Browser

Una Kravets talks about color contrast in this new episode of “Designing in the Browser”.

Watch it

vanilla-colorful

A tiny color picker custom element for modern web apps. By Serhii Kulykov.

Check it out

Designing With Reduced Motion For Motion Sensitivities

An article by Val Head on how to use the prefers-reduced-motion-media feature.

Read it

How to build awesome forms with only HTML & CSS

A great Twitter thread by Arslan Khalid on how to build solid forms in a step-by-step manner.

Check it out

Candy Ring Preloader

A clever faux 3D ring preloader made by Jon Kantner.

Check it out

What is the Value of Browser Diversity?

Dave Rupert tries to answer a very important question.

Read it

DevTools architecture refresh: Migrating to JavaScript modules

The first article in a series of blog posts describing the changes the Chrome DevTools team is making to DevTools’ architecture and how it is built.

Read it

Duo

A really cool Three.js and GSAP demo by ycw. Check out this one, too.

Check it out

Read Me: Magazine

A fantastic Readymag essay (and template) on how to create good content and set it in type.

Check it out

How they test

A curated collection of publicly available resources on how software companies around the world test their software systems and build their quality culture.

Check it out

#s3e36 ALL YOUR HTML, Interactive Ribbon

A really good video tutorial by Yuri Artyukh where he dissects and builds an interactive WebGL ribbon.

Watch it

Education & LMS landing page design

A free landing page designed in Sketch with an educational theme.

Check it out

Responsive “Cool” Steps

Some fantastic step trickery by Jhey Tompkins.

Check it out

BLINK 3D Gallery

In case you haven’t seen this yet: BLINK is an online platform where art collectors, artists, and art lovers can meet and mingle to explore and enjoy art together.

Check it out

Styling Complex Labels

Danielle Romo’s tip on how to deal with more verbose input labels.

Read it

The post Collective #622 appeared first on Codrops.

September 3, 2020

Collective #621

Inspirational Website of the Week: Elias & Valentin

A very fluid experience on another level of sophistication. Our pick this week.

Get inspired

Component Driven User Interfaces

The Chromatic team made this great resource that explores how modularity is transforming design and front-end development and explains what Component Driven UIs are.

Check it out

Shader Studies: Matrix Effect

Shahriar Shahrabi wrote this break down of the matrix shader effect written by Will Kirby and also implemented a real time matrix Shader in Unity 3D with Triplanar mapping.

Read it

Present

A terminal-based presentation tool with colors and effects.

Check it out

Web Brutalism, Seamfulness, and Notion

A very interesting article on how a tool for sensemaking reconciles two distinct software design ideologies.

Read it

Omatsuri

A great place to find open source browser tools for everyday use.

Check it out

Stitches

A CSS-in-JS library with near-zero runtime, server-side rendering and multi-variant support.

Check it out

Building Website Headers with CSS Flexbox

A very practical tutorial on how to code up responsive flexbox-powered website headers.

Read it

Custom bullets with CSS ::marker

Learn how trivial it has become to customize the color, size or type of number or bullet when using lists.

Read it

CSS ART – Vintage VW Bug

A beautiful VW Bug created with CSS only.

Check it out

An Interesting Explanation of async/await in JavaScript

Learn how to use async/await in JavaScript in this article by Dmitri Pavlutin.

Read it

Proportional Resizing with CSS Variables

A very useful snippet by Ahmad Shadeed on how to proportionally control the dimensions of an element.

Check it out

Is the web getting slower?

Is website performance getting worse overall? The team of DebugBear tries to answer the question.

Check it out

To design and develop an interactive globe

Read about Stripe’s approach to creating a 1:40 million-scale, interactive 3D model of the earth.

Read it

Increment: APIs

This issue of Increment explores all things APIs—from their prehistory to their future, their design and development to their opportunities and impacts.

Check it out

CSS3D Adventure Game

A 3D game rendered entirely in CSS/HTML. Can you escape the dungeon?

Check it out

Flexbox Defense

The Tower Defense game with a twist: all towers must be positioned with CSS Flexbox!

Check it out

Alt text overlay bookmarklet

Christian Heilmann created a bookmarklet to easily test which images have alternative text and what it is.

Check it out

Creating A Custom Scroll Bar In 24 Lines Of CSS

Have you ever encountered a website with a beautiful scrollbar and thought to yourself “wow, I wish I… Tagged with css.

Check it out

CSS Values

A place to search the syntax and all possible values for any valid CSS property.

Check it out

From Our Blog

Diagonal Thumbnail Slideshow Animation

A simple slideshow with tilted thumbnails and large titles that animate when navigating.

Check it out

The post Collective #621 appeared first on Codrops.

August 20, 2020

Collective #619

Inspirational Website of the Week: Next Big Thing

Excellent layout explorations with very nice details. Our pick this week.

Get inspired

Our Sponsor

The Divi Summer Sale

Now it’s your chance to get a huge 20% discount on the most powerful WordPress theme in the world. Don’t miss out!

Get it

The Animated Web

A wonderful resource site by Steve Gardner that collects animations from around the web.

Check it out

The Just in Case Mindset in CSS

Ahmad Shadeed writes about the “just in case mindset” which aims to educate designers and developers to think ahead of time of some possible failure scenarios for a component.

Read it

Accessibility In Chrome DevTools

This article Umar Hansa demonstrates some useful features in DevTools which can help you improve the accessibility of your website.

Read it

theheadless.dev

Free and open-source guides for learning Puppeteer & Playwright.

Check it out

Generative art by Manolo

Generative artist Manolo shares all his sketches including code and generated images for free. Absolutely stunning work!

Check it out

#s3e34 ALL YOUR HTML, Four Icosahedron geometries

A fantastic video tutorial by Yuri Artyukh on how to create four different icosahedron geometries.

Watch it

Custom Select Styles with Pure CSS

Stephanie Eckles shows how to style native select elements with CSS only.

Read it

Leading-Trim: The Future of Digital Typesetting

Read how an emerging CSS standard can fix old problems and raise the bar for web apps.

Read it

Creating 3D Illustrations with CSS

Learn the process of creating 3D illustrations with CSS only.

Read it

Infinity Search

A new search engine where you can search with privacy and efficiency.

Check it out

Fixing Safari’s back button browser cache issue with vanilla JS

Learn how to fix a weird cache quirk in Safari in this article by Chris Ferdinandi.

Read it

Impossible Checkbox v2

A supercool little checkbox that will make it impossible for you to leave it checked

Check it out

Making Maisel Marvelous

A beautiful, immersive web experience for the Marvelous Mrs. Maisel series.

Check it out

Single Page Applications using Rust

An easy to follow guide to building SPAs using Rust, WebAssembly and Yew.

Read it

I Love MDN, or the cult of the free in action

Peter-Paul Koch shares why he finds I Love MDN demeaning to technical writers. Also, read The cult of the free must die to understand more on the topic.

Read it

Mozilla Lifeboat

A list of Mozillians actively hiring kind, passionate, awesome humans.

Check it out

Tip on inputmode

Álvaro Trigo shows a great trip on using “inputmode” to hint browsers what virtual keyboard to show.

Check it out

Kinopio

In case you didn’t know it yet: Kinopio is the visual thinking tool for new ideas and hard problems.

Check it out

Paper plotter

Such a cool thing: create 3D plots out of paper!

Check it out

Natively Format JavaScript Numbers

A great explainer on how to format JavaScript numbers by Elijah Manor.

Check it out

From Our Blog

Thumbnail to Full Width Image Animation

An experimental animation where an image goes from thumbnail to full width, allowing for a classy entry to an article view.

Check it out

The post Collective #619 appeared first on Codrops.

August 6, 2020

Collective #617

Inspirational Website of the Week: Ali Ali

Sheer elegance and slickness combined with the right typography. Our pick this week.

Get inspired

content-visibility: the new CSS property that boosts your rendering performance

Vladimir Levin and Una Kravets introduce a new CSS property that can be used to improve initial load time by skipping the rendering of offscreen content.

Read it

Our Sponsor

Build websites with the most popular WordPress theme in the world

With the Divi Layout Packs you’ll get world-class designs ready to be used for your client projects.

Check it out

Infinite Scroll without Layout Shifts

Addy Osmani looks at how patterns for loading long lists can impact the Core Web Vitals with some recommended fixes.

Read it

Understanding Arrow Functions in JavaScript

Learn about the differences between traditional function expressions and arrow function expressions in this great guide by Tania Rascia.

Read it

Simulating Object Collisions With Canvas

Josh Bradley’s tutorial on how to simulate object collisions as a way to learn the basics of HTML canvas and physics simulation.

Read it

Online Workshops on Front-End & UX

Boost your design skills online and learn practical insights from experts in the industry, live. Use a friendly code CODROPS to save $50 off the price!

Check it out

Take Me On

A beautiful immersive web experiment by Adam Kuhn.

Check it out

#s3e32 ALL YOUR HTML, Particles on a sculpture

Yuri Artyukh’s great video tutorial where you’ll learn how to create a cool particle effect on a sculpture.

Watch it

Modern CSS grid solutions to common layout problems

Learn how to overcome media-query fatigue by using CSS grid for responsive layouts. Kevin Pennekamp explores three useful layout implementations.

Check it out

Tailwind CSS: From Side-Project Byproduct to Multi-Million Dollar Business

A great article about the story of Tailwind CSS by Adam Wathan.

Read it

Three.js mesh modifiers

A Three.js mesh morph modifier, including nearly ten modifiers, such as Bend, Bloat, Noise, Skew, Taper and more.

Check it out

Naming layout components

Andy Clarke shares why he’s not fond of frameworks and explains what approach he uses instead for designing layouts.

Read it

r3f-bubbles

A very interesting react-three-fiber and drei demo.

Check it out

Offline first with service workers and vanilla JS

The third article of a series on service workers by Chris Fernandi.

Read it

Brick

Brick is a lightweight platform for creating small sites.

Check it out

Developing and Deploying Micro-Frontends With Single-Spa

Tyler Hawkins shows how to develop an app composed of micro-frontends using single-spa and deploy it to Heroku.

Read it

Drop-Shadow: The Underrated CSS Filter

Michelle Barker shows what you can do with drop-shadow, the CSS filter.

Read it

Turning pages with CSS

Amit Sheen created this fun demo of a CSS book.

Check it out

Optimizing CSS for faster page loads

Tomas Pustelnik shares how to impove loading times of a website by optimizing its CSS.

Read it

blogit

A personal blog based on Github Pages and issues. By Dmitriy Derepko.

Check it out

Digging Into the Flex Property

Ahmad Shadeed demystifies the flex property and shows how to use it.

Read it

CSS Vocabulary

A nice visual explainer of CSS terms.

Check it out

Papercups

Papercups is an open source live customer chat web app.

Check it out

The Girl With A CSS Earring

Louise Flanagan created this CSS masterpiece.

Check it out

How I Build Scalable Modern Web Applications for Real Users

An article that details the languages, libraries, and tools that Trey Huffine used to build Skilled.dev, a platform to prepare developers to succeed in coding interviews.

Read it

RevKit

A free design system UI kit for Sketch App, Figma, and XD.

Check it out

moment-guess

A utility package for guessing date formats.

Check it out

From Our Blog

Magnetic Buttons

A small set of magnetic buttons with some fun hover animations. Inspired by the button animation seen on Cuberto.

Check it out

UI Interactions & Animations Roundup #9

A fresh set of inspirational UI interactions and animations from the past couple of weeks.

Check it out

The post Collective #617 appeared first on Codrops.

July 30, 2020

Collective #616

Inspirational Website of the Week: FIL – SUMI LIMITED

An impressive dark design with very smooth animations. Our pick this week.

Check it out

What does 100% mean in CSS?

Amelia Wattenberger’s guide on what 100% in CSS actually means in its different contexts.

Check it out

It’s time to lazy-load offscreen iframes!

Addy Osmani introduces browser-level native lazy-loading for iframes.

Check it out

this vs that

What is the difference between some key concepts in front-end development? Find out with this great collection. By Nguyen Huu Phuoc.

Check it out

100 Days of 3D Design

Tiantian Xu writes about learning 3D modeling in 100 days.

Read it

Tinykeys

A small, modern library for keybindings by Jamie Kyle.

Check it out

macintosh.js

A virtual Apple Macintosh with System 8, running in Electron.

Check it out

svelthree

Svelthree is a components library for declarative construction of reactive and reusable scene graphs utilizing a slightly modified three.js source.

Check it out

Depth peeling & SS refraction

Mind-blowing demo: screen space refraction through depth peeling in Three.js.

Check it out

CS Visualized: CORS

In this part of the “CS Visualized” series, Lydia Hallie explains cross-origin resource sharing in an easy to understand way.

Check it out

Perfect Edition

A lightweight, responsive web e-book template by Robin Sloan.

Check it out

Teenyicons

A gigantic set of tiny minimal 1px icons made by Anja van Staden.

Check it out

window.matchMedia

A great tip by Álvaro Trigo that you might have never heard about!

Check it out

Some CSS comics

Some great CSS comics made by Julia Evans.

Check it out

Rubber Mesh Swipe Transition

Pull and release the image for a rubbery motion and transition. By Yugam.

Check it out

Designing Adaptive Components, Beyond Responsive Breakpoints

Stéphanie Walter writes about designing systems of reusable components that adapt to responsive layouts and more.

Read it

Luckysheet

Luckysheet is an online spreadsheet like Excel that is powerful, simple to configure, and completely open source.

Check it out

Webpack: A gentle introduction

A gentle introduction to why Webpack exists, what problems it solves, and how to use it.

Check it out

Natively Format JavaScript Dates and Times

Elijah Manor explains how to go about date and time formatting in JavaScript.

Read it

Mandala maker

A supercool mandala generator by Amit Sheen.

Check it out

Floating island /w Threejs & GSAP

Awesome 3D scene demo made by Kasper De Bruyne.

Check it out

The post Collective #616 appeared first on Codrops.

July 23, 2020

Collective #615

Inspirational Website of the Week: Sweet punk

Great visual content with a clear design and interesting details. Our pick this week.

Get inspired

Our Sponsor

Build websites with the most popular WordPress theme in the world

With the Divi Layout Packs you’ll get world-class designs ready to be used for your client projects.

Check it out

Primo

Primo is an all-in-one IDE, CMS, component library, and static site generator.

Check it out

What the f*** is …?

An opinionated glossary of computer science terms for front-end developers by Dan Abramov. Read more about it in the repo.

Check it out

CSS easing

Adam Argyle shares 18 hip cubic-bezier easing functions in handy variables with us.

Check it out

3D Hands gestures

An amazing free 3D hands gestures library with 12 hands gestures in 9 different skin tones and with 3 sleeve types.

Check it out

3D Book Image CSS Generator

Fantastic tool: Generate an animated 3D image from a book cover and export to HTML/CSS to embed on your website.

Check it out

@property: giving superpowers to CSS variables

Una Kravets introduces the Houdini Properties and Values API which is coming to your CSS file in Chromium 85.

Read it

Things I Wish I’d Known About CSS

Some useful things to understand before starting out with CSS. By Dave Smyth.

Check it out

Understanding CSS Multiple Backgrounds

In this article, Ahmad Shadeed explains the background-image property in detail, and provides a visual explainer on how multiple backgrounds can be stacked.

Read it

CSS leaning card effect

A beautiful card effect made by Lynn Fisher.

Check it out

A Simple Explanation of Event Delegation in JavaScript

Dmitri Pavlutin explains event delegation which is a useful pattern to listen for events on multiple elements using just one event handler.

Read it

Import non-ESM libraries in ES Modules, with client-side vanilla JS

Lea Verou explores some strategies of importing non-ESM libraries in ES modules.

Read it

A CSS only “click to animate gif” solution

Christian Heilmann shares a quick experiment in pure CSS how to cover a GIF with a play button instead of playing it

Check it out

Warp SVG Online

A nice tool that can warp and distort SVGs.

Check it out

css-media-vars

A brand new way to write responsive CSS. Named breakpoints, DRY selectors, no scripts, no builds, vanilla CSS.

Check it out

Modern CSS Techniques To Improve Legibility

Edoardo Cavazza covers how to improve websites legibility using some modern CSS techniques.

Read it

A CSS-only, animated, wrapping underline

NickyMeuleman explores how to create wrapping underlines that can be animated.

Read it

Building a self-updating profile README for GitHub

Simon Willison shows how to implement a GitHub Action to automatically keep a profile README up-to-date.

Check it out

CSS Painting Order

An interesting article on how a browser determines what order to paint content in.

Read it

Beyond screen sizes: responsive design in 2020

Kilian Valkhof thinks we’re now at a point where we can start considering a new type of responsiveness for websites.

Read it

Rich HTML in GitHub README

Learn how to create a rich HTML document enveloped in an SVG file.

Check it out

Mars Explorer ScrollTrigger demo

Hai Le made this fantastic GSAP ScrollTrigger plugin example.

Check it out

Droplets

Stunningly realistic CSS droplets by Oscar Salazar.

Check it out

The post Collective #615 appeared first on Codrops.

July 16, 2020

Collective #614

Inspirational Website of the Week: Anastasiia Afanasieva

So many engaging details, fantastic motion and superb typography! Without a doubt, our pick for you this week.

Get inspired

Our Sponsor

Instant websites for your clients with Divi Layout Packs

With the Divi Layout Packs you’ll get world-class designs ready to be used for your client projects.

Check it out

The WET Codebase

Dan Abramov shares his talk where he shows “why strict adherence to writing code that is free of duplication inevitably leads to software we can’t understand”.

Check it out

Style Stage from Modern CSS Solutions

A modern CSS showcase styled by community contributions. Maintained by Stephanie Eckles of ModernCSS.dev.

Check it out

30 Great Websites with Parallax Scrolling

A great collection of websites with interesting parallax effects.

Check it out

How To Create A GitHub Profile README

Learn how to access GitHub’s new profile level README feature.

Read it

Awesome Github Profile README

A curated list of awesome Github Profile READMEs.

Check it out

zerodivs.com

An experimental UI editor for creating illustrations with single-element CSS. By Joan Perals.

Check it out

Tabler Icons

In case you missed it: 550+ customizable free SVG icons.

Check it out

Super Expressive

Super Expressive is a lightweight JavaScript library that allows you to build regular expressions in almost natural language.

Check it out

Webwaste

An excerpt from Chapter 9 of Gerry McGovern’s Book World Wide Waste, from Silver Beach.

Check it out

Grids Part 1: To grid or not to grid

Sarah Higley’s first article in a series on interactive grid accessibility.

Read it

Zettlr

Zettlr is an open source Markdown editor with many advanced features.

Check it out

The State Of Pixel Perfection

An interesting article on pixel perfection and why the modern web should overcome the concept.

Read it

Scrollable sidebar with sticky footer using Flexbox

Learn how to use Flexbox to create a scrollable sidebar with a sticky footer in this great video by CodyHouse.

Watch it

Foam

Foam is a personal knowledge management and sharing system for VSCode.

Check it out

What is CSS Specificity?

Sarah Chima explains CSS specificity, an important topic to understand if you want to get better at CSS.

Read it

Clipped Image Reveal on Hover

A very nice clipped hover effect by Katherine Kato.

Check it out

3D Radio

An interactive 3D radio made by Ricardo Oliva Alonso.

Check it out

GUI Sites

Simone Marzulli’s curated list of sites that look like desktop graphical user interfaces.

Check it out

127 design websites

An extensive list of websites to show off your design. Made by the content team at lemon.io.

Check it out

AudioMass

In case you missed it: AudioMass is a free full-featured web-based audio and waveform editing tool in just 65kb of vanilla JavaScript.

Check it out

form-validation.js

The most customizable validation framework for JavaScript.

Check it out

Button state and accessibility

Chris Fernandi looks at button state and the [aria-pressed] attribute.

Read it

The post Collective #614 appeared first on Codrops.

July 9, 2020

Collective #613

Inspirational Website of the Week: makemepulse

Makemepulse challenges the laws of physics by being razor sharp and smooth as a feather at the same time. Our pick this week.

Get inspired

Our Sponsor

Be: 500+ pre-built websites for ANY kind of project

Now comes with Elementor and dedicated Elementor pre-built websites.

Discover more

Ten modern layouts in one line of CSS

A post by Una Kravets that highlights a few powerful lines of CSS that do some serious heavy lifting and help you build robust modern layouts.

Check it out

Lights and Shadows

Bartosz Ciechanowski’s interactive journey into the world of light and how it interacts with different objects.

Read it

The Cicada Principle, revisited with CSS variables

Lea Verou shows some amazing examples of the Cicada Principle with CSS variables.

Check it out

Accordion Rows in CSS Grid

Eric Meyer shares the way he’s using CSS Grid rows to for more layout flexibility.

Read it

viewBox

A newsletter with tips, demos, articles and a monthly challenge all about the magical world of SVG! By Cassie Evans and Louis Hoebregts.

Check it out

WebGL with Three.js Program

Bruno Simon has started working on a Three.js course and the outline looks very promising.

Check it out

CSS News July 2020

In this article, Rachel Andrew takes a look at some of the interesting CSS features that are making their way into browsers right now.

Read it

Rubik’s Cube

A Rubik’s cube made with Three.js. By Aaron Bird.

Check it out

Knopf.css

A modern, modular, extensible button system designed for both rapid prototyping and production-ready applications.

Check it out

Favicon in Dark Mode

A great CodyHouse video that shows how to change the colors of your favicon when dark mode is enabled.

Check it out

The Comeback of Fun in Visual Design

Michael Flarup writes about the long awaited “swing of the pendulum” in visual design.

Read it

Uncommon CSS Properties

In this article, Ahmad Shadeed goes through some different interesting CSS properties.

Check it out

Lemon.io

Find a perfect freelance match for your project in just 24 hours.

Check it out

CSS collector’s cabinet

Lynn Fisher’s beautiful CSS creation.

Check it out

Always bet on HTML – being misunderstood

Christian Heilmann takes a look at the reasons why people might be less enthused about HTML.

Check it out

Goodbye Squarespace. Hello Eleventy, Tailwind CSS and Netlify!

Sahil Parikh shares his experience with transitioning his blog to a static site generator.

Read it

Bubbles Lamp

A beautiful demo by ilithya.

Check it out

Arched 3D panel

Watch a modern take on an older component Ana Tudor coded some year ago.

Watch it

WordPress Static Site: Benefits, Limits & Tools

A complete guide to getting started with WordPress static site generators.

Read it

Accessible and Keyboard-Friendly Hamburger Menu + Slide Out Navigation

A live demo and tips on building an accessible hamburger menu that’s keyboard-friendly and toggles a slide-out navigation panel.

Check it out

From Our Blog

Exploring Animations for Menu Hover Effects

A couple of ideas for creative menu hover animations with images.

Check it out

The post Collective #613 appeared first on Codrops.

July 2, 2020

Collective #612

Inspirational Website of the Week: Sennesro

Simplicity, elegance and flowy motion made us pick Sennesro as inspirational website this week.

Get inspired

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

Free Faces

A great selection of freely available fonts.

Check it out

CSS Painting vs. CSS Houdini Paint API

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

Read it

Dark Ages of the Web

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

Check it out

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.

Read it

The Google ‘vs’ Trick

Read how ego graphs can help you learn about AI, play chess, eat healthier, buy a dog and find love.

Read it

From Our Blog

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.

Check it out

From Our Blog

UI Interactions & Animations Roundup #8

A new collection of UI animation shots that summarizes the latest creative trends.

Check it out

From Our Blog

Inspirational Websites Roundup #16

This special collection of wonderful websites will get you up-to-date on current web design trends.

Check it out

The post Collective #612 appeared first on Codrops.

June 18, 2020

Collective #610

Inspirational Website of the Week: Superfluid

Superfluid’s web store design is an exciting clash of colors and motion. Our pick this week.

Get inspired

Our Sponsor

15 Tools and Services Worth Checking Out

Looking for web design tools or services? Here’s a curated list for you.

Discover them now

Tutorialist

A great place to find the best software development tutorials from YouTube. By Dmytro Barylo.

Check it out

React Icon System

A tutorial on how to set up an icon system using SVGR, a tool for transforming SVGs into React components. By Varun Vachhar.

Read it

Deep JavaScript: Theory and techniques

A book that teaches practical JavaScript techniques by Dr. Axel Rauschmayer.

Check it out

CSS Custom Properties Fail Without Fallback

Some important notes on how CSS variables don’t support the cascade when a value is invalid.

Read it

Artvee

A great site to browse and download high-resolution, public domain artworks.

Check it out

Inclusively Hiding & Styling Checkboxes and Radio Buttons

Sara Soueidan shows how to hide an element visually while keeping it screen-reader accessible.

Read it

Checkboxes waves

A super-crazy smooth checkboxes animation made by Louis Hoebregts.

Check it out

Learn Z-Index Using a Visualization Tool

Learn Z-Index and Stacking Context in a fun and interactive way.

Check it out

Airplanes

A wonderful GSAP ScrollTrigger demo by Steve Gardner.

Check it out

Snowpack + Eleventy + Sass + PostCSS

Zell Liew shares how he combined some great tools together to create websites.

Check it out

CasioPT-1.css

Sarah Fossheim’s incredible CSS-only Casio synthesizer.

Check it out

border-radius playground

A great tool by Jhey Tompkins that lets you visualize border radii.

Check it out

How to delete all node_modules directories from your computer

Chris Fernandi distills a practical technique of freeing up space on your machine by deleting all node_modules folders.

Check it out

How to Compare Objects in JavaScript

Learn how to compare objects in JavaScript with referential, manual, shallow and deep equality.

Read it

ScrollTrigger – Highlight Text

Ryan Mulligan shows how to use the new GSAP ScrollTrigger plugin to animate highlighted text.

Check it out

Pure CSS halftone portrait from .jpg source

A great demo by Ana Tudor which shows a pure CSS halftone effect. View with a blend modes capable browser.

Check it out

Touch One

One of the many wonderful experiments by Jaume Sanchez Elias. Discover more in this thread.

Check it out

Genetic Drawing

Anastasia Opara open sourced her genetic drawing project that imitates a drawing process given a target image.

Check it out

Online text to diagram tools

A comprehensive list of text to diagram tools.

Check it out

From Our Blog

Making Stagger Reveal Animations for Text

A short tutorial on how to recreate a letter stagger animation with GSAP and Splitting.js.

Check it out

The post Collective #610 appeared first on Codrops.

June 11, 2020

Collective #609

Inspirational Website of the Week: Studio Almond

Studio Almond has an equisitely fine design with some lovely animations. Our pick this week.

Get inspired

Our Sponsor

Create WordPress sites with easy using Divi

Check it out

Color Copy Paste

Cross-platform color copy paste from phone’s camera to web, Figma and Sketch plugin.

Check it out

Hybrid positioning with CSS variables and max()

Lea Verou shares a solution for a tricky layout problem.

Check it out

Shape Divider App

Create fully responsive SVG shape dividers with customised code.

Check it out

The Mad Magazine Fold-In Effect in CSS

Thomas Park made a CSS-based web version of the wonderful Mad Magazine’s Fold-Ins by comic artist Al Jaffee.

Read it

Perceptually Smooth Multi-Color Linear Gradients

An interactive article by Matt DesLauriers on how to create perceptually smooth CIELAB spline gradients.

Check it out

Grid for layout, Flexbox for components

In this article Ahmad Shadeed explores the question about when to use Flexbox and when it’s better to use Grid.

Read it

Optimizing keyboard navigation using tabindex and ARIA

Sara Soueidan’s case study on how reducing the number of tab stops for consecutive identical links might improve the experience for keyboard users.

Read it

CSS tip

A great tip by Hakim El Hattab on using inset box-shadows.

Check it out

The complete guide to CSS media queries

A packed guide on media queries and how to use them.

Read it

Frontend Mentor Challenges

Learn how to create 14 different websites from scratch using HTML/CSS and JavaScript in this live series from the Frontend Mentor website.

Watch it

HTML5 Boilerplate 8.0.0 Released

Read all about the 10th anniversary release of the epic HTML5 Boilerplate.

Read it

Cool Little CSS Grid Tricks for Your Blog

Join Ana Tudor on an insightful journey through CSS madness and how to solve an interesting layout problem.

Read it

CSS Grid: Newspaper Layout

A fantastic newspaper layout made by Olivia Ng.

Check it out

Web Platform Contribution Guide

A beginners guide to becoming a web platform contributor.

Check it out

CSS :is() and :where() are coming to browsers

Read how the new CSS :is() and :where() pseudo-classes are now supported in some browsers. By Šime Vidas.

Check it out

Revisiting Array.reduce()

Chris Fernandi revisits the Array.reduce() examples from one of his previous articles, and shows how he would approach those same tasks today.

Read it

No Design Development

A collection of tools for developers who have little to no artistic talent.

Check it out

The Surprising Things That CSS Can Animate

Will Boyd explores some not-so-usual CSS properties for animations.

Read it

JazzKeys

JazzKeys lets you sculpt your messages using music.

Check it out

How Wikipedia Lost 3 Billion Organic Search Visits To Google in 2019

A very interesting article on Wikipedia’s traffic loss due to “zero-click results”.

Read it

Supporting Dark Mode in Your Website

Another good guide on implementing light and dark modes on websites.

Read it

The Need for Speed, 23 Years Later

An short analysis on how, in spite of an increase in Internet speed, webpage speeds have not improved over time.

Read it

Drag to confirm

A very nice button interaction idea by Aaron Ilker.

Check it out

Grid.js

In case you didn’t know about it: Grid.js is a lightweight, advanced table plugin that works everywhere.

Check it out

Blobs

Another gem you migh have missed: Customizable blobs as SVG and Flutter Widget.

Check it out

From Our Blog

How to Create a Motion Hover Effect for a Background Image Grid

A short tutorial on how to achieve a motion hover effect on a background image grid.

Check it out

The post Collective #609 appeared first on Codrops.

June 4, 2020

Collective #608

Inspirational Website of the Week: 14islands

Fall in love with this amazing website of 14islands and its fantastic organic shapes and effects. Can you discove the easter egg?

Get inspired

A user’s guide to CSS variables

Lea Verou’s guide to help us understand the differences between declarative CSS variables and variables in other programming languages, and how you can leverage their power.

Read it

Our Sponsor

Simply build visually with Divi

Discover Divi

AudioMass

AudioMass is a free full-featured web-based audio and waveform editing tool. Find the GitHub repo here.

Check it out

ScrollTrigger

The new ScrollTrigger plugin by GreenSock creates amazing scroll-based animations with minimal code. You can also trigger anything scroll-related, even if it has nothing to do with animation.

Check it out

Free The Docs

Instantly convert documents within Google Docs into reStructuredText. Downloads images, converts markup, bulleted lists, tables, and more.

Check it out

Twin

With twin, you can use Tailwind classes within css-in-js libraries.

Check it out

CUBE CSS

Learn about the CSS methodology oriented towards simplicity and consistency with a heavy dosage of pragmatism.

Read it

Consoleimg

Add images to your website’s developer console with this script.

Check it out

Global and Component Style Settings with CSS Variables

Sara Soueidan explains how she uses scoped CSS variables in her own pattern library to speed up prototyping and client work.

Read it

Colors in CSS

Ahmad Shadeed dives into CSS colors and explains many useful details.

Read it

3D First Person Art Gallery – No Javascript!

An amazing demo by Ben Evans.

Check it out

Free Font: HK Grotesk Wide

HK Grotesk Wide is a free font, great for posters, headlines or book/magazine covers.

Check it out

The menu

A step by step guide to creating a hamburger menu in SVG and CSS by Mikael Ainalem.

Read it

Overlapping Header with CSS Grid

A great CSS grid based solution to an overlapping layout.

Check it out

Colors and Fonts

Colors & Fonts is a curated library of colors and fonts for digital designers and web developers.

Check it out

ScrollTrigger Demo

Mariusz Dabrowski’s cool demo that showcases the new ScrollTrigger plugin by GreenSock.

Check it out

Object.is() vs Strict Equality Operator in JavaScript

When should you use Object.is() instead of the strict equality check in JavaScript?

Read it

Semilattice

A collection of system and interaction concepts for personal knowledge management tools that reimagines how we work with and organize information. By Aosheng Ran.

Check it out

Fun with Fonts

Two short multiple choice quizzes on Gutenberg and font identification.

Check it out

Stranger Things, JavaScript Edition

Find the explanation to some of the weirdest JavaScript moments in this article.

Read it

TitleRun

TitleRun is a game that lives in your title bar: jump over the obstacles to survive and reach the flag!

Check it out

From Our Blog

Kinetic Typography with Three.js

Discover how to use Three.js to render kinetic typography.

Check it out

From Our Blog

UI Interactions & Animations Roundup #7

Some modern UI animation shots to keep you up-to-date with the new motion trends and get you inspired.

Check it out

The post Collective #608 appeared first on Codrops.

May 28, 2020

Collective #607

Inspirational Website of the Week: SEMP.AI

The portfolio of Ernesto Aguirre has a super-cool design with a futuristic touch and nice effects.

Get inspired

Our Sponsor

8 Great WordPress Plugins You Need to Try Out Now

There are so many fantastic WordPress plugins on the market. The WordPress plugins we bring you today are the MUST-HAVE tools.

Discover them now

PureCSS Gaze

A pure CSS oil painting by Diana Smith inspired by the Italian Renaissance.

Check it out

Tailblocks

An great project of ready-to-use Tailwind CSS blocks.

Check it out

Responsive web design turns ten

Ethan Marcotte remembers the first article on responsive web design and the history of the term and idea behind it.

Read it

Windups

A really nice typewriter effect library for React.

Check it out

Modern Touch-Friendly Design

Addy Osmani shares what he learned from Steven Hoober about designing for touch interfaces.

Read it

Today’s Javascript, from an outsider’s perspective

Lea Verou writes about how difficult the experience with today’s JavaScript workflow can be for novices.

Read it

Untools

A collection of thinking tools and frameworks to help you solve problems, make decisions and understand systems.

Check it out

CSS-only Slide-up Caption Hover Effect

Michelle Barker shows how to create a caption transition for an image. If you enjoy this, you might also like these demos on Codrops.

Check it out

RoughNotation

A small JavaScript library to create and animate hand-drawn annotations on a web page.

Check it out

Figma Plugins

Some great insight into Figma plugins by Varun Vachhar.

Read it

On fixed elements and backgrounds

Chen Hui Jing dives into containing blocks, rendering and scroll performance.

Read it

The Git Commit Hash

Mike Street writes about the magic 40 character string that is attached to every commit you do.

Read it

Boids

Marius Ballot made this wonderful boid simulation with Three.js.

Check it out

Ask an expert: Why is CSS …the way it is?

Chris Lilley unpacks the histories and mysteries of CSS in this great article.

Read it

Here’s what I didn’t know about “content”

Manuel Matuzovi? is sharing what he I didn’t know about the ‘content’ property.

Read it

Sorted CSS Colors

A tool to sort the named CSS colors for showing related colors together.

Check it out

Free Font: Ephemera

Inspired by ephemera from the printing tradition, Barrett Reid-Maroney designed this font.

Check it out

Single div CSS “Six”

A great single-div demo by Lynn Fisher.

Check it out

Safe/unsafe alignment in CSS flexbox

Learn how safe alignment can prevent data loss in CSS flexbox layouts.

Read it

Water

A lovely water effect demo made by Kasper De Bruyne.

Check it out

Svelte, why so much hype?

In this article, Anthony Le Goas answers some questions related to Svelte.

Read it

Web Engine Diversity and Ecosystem Health

Brian Kardell argues that we actually have a very healthy and open web ecosystem.

Read it

Browsers are not rendering engines

Stuart Langridge’s perspective on the narrative of Brian Kardell’s article on the web ecosystem.

Read it

Htmx

Htmx allows you to access AJAX, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext.

Check it out