Pedro Botelho | The Blog Pros

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

The Buggiest Site On The Web

Check out the horror in your browser’s developer console.

Check it out

From Our Blog

An Infinitely Scrollable Vertical Menu

A quick look at how an infinitely scrollable menu works based on a looping scroll illusion of cloned items.

Check it out

Collective #607 was written by Pedro Botelho and published on Codrops.

May 21, 2020

Collective #606

Inspirational Website of the Week: Ivan Toma

A fitting design that shouts elegance and sophistication. Our pick this week.

Get inspired

Our Sponsor

Start your own freelance business by becoming a Divi developer

Learn how to develop websites with the most popular WordPress theme in the world and secure your success as a freelancer.

Start learning now

WebGL guide

Maxime Euzière’s complete, summarized WebGL tutorial, with tiny interactive demos in each chapter.

Check it out

Animated Sparkles in React

Learn how to animate sparkle text in React in this tutorial by Josh W Comeau.

Read it

Beginner’s Guide to Eleventy [Part II]

In this second article of a four part series, Tatiana Mac shows you how to install Eleventy step-by-step.

Read it

Best Practices in JavaScript Array Iteration

Violet Peña invites you to take a look at four essential Array methods and how to use them.

Read it

Minimalist HTML

An HTML document by Ryan Jacobs that shows a minimal example of HTML5.

Check it out

Thinking About The In-between Design Cases

Ahmad Shadeed writes about those often neglected in-between design cases of a responsive website.

Read it

Neon Mode: Building a new Dark UI

Max Böck explains how the dark mode with extra features was implemented on Codista.

Read it

An introduction to accessible data visualizations with D3.js

Sarah L. Fossheim’s series on data visualizations and accessibility.

Read it

Runme.io

Run your application from any public GitHub repo with one click.

Check it out

The Third Age of JavaScript

Some interesting thoughts on the future of JavaScript by Shawn Wang.

Read it

How to Use Object Destructuring in JavaScript

Dmitri Pavlutin explains how to use object destructuring in JavaScript really well in this article.

Read it

The Kawaiization of product design

Tobias van Schneider’s thoughts on the “cutification” of product design.

Read it

new.css

A classless CSS framework to write modern websites using only HTML.

Check it out

DOM diffing with vanilla JS

Previously, Chris Ferdinandi explains how to build reactive, state-based components with vanilla JS and in this article he shows how to add DOM diffing to a component.

Read it

Ghost at the Disco

Anna the Scavenger’s beautiful animated scene.

Check it out

The Fastest Google Fonts

Harry Roberts’ exploration of how to design some fairly resilient measures for faster Google Fonts loading.

Read it

In defense of the modern web

Rich Harris thoughts on the article “Second-guessing the modern web” by Tom MacWright.

Read it

Release 4.0.0 of reveal.js

This update of the great HTML presentation framework brings some important changes.

Check it out

This Word Does Not Exist

This Word Does Not Exist uses an artificial intelligence model named GPT-2 to invent new English words with a definition.

Check it out

SEO Cheat Sheet

A sorted list that provides technical On-Page SEO best practices.

Check it out

Painter

A subtly animated illustration by Ricardo Oliva Alonso.

Check it out

From Our Blog

UI Interactions & Animations Roundup #6

A hand-picked collection of superb UI inspiration from the past weeks.

Check it out

From Our Blog

Inspirational Websites Roundup #15

A new roundup that consists of a special collection of the latest web design trends and inspiration.

Check it out

Collective #606 was written by Pedro Botelho and published on Codrops.

May 14, 2020

Collective #605

Inspirational Website of the Week: Stephanie Jeong

Stephanie Jeong’s portfolio combines fun interactions with surprise elements and a fantastic design.

Get inspired

Our Sponsor

Start your own business and become financially independent

Learn how to develop websites with the most popular WordPress theme in the world and secure your success as a freelancer.

Get Divi

IntersectionObserver Visualizer

A simple visualizer tool to assist with using the Intersection Observer API. By Michelle Barker.

Check it out

Understanding Destructuring, Rest Parameters, and Spread Syntax

Learn about destructuring, rest parameters, and spread syntax in this article by Tania Rascia.

Read it

Micro-Typography: How To Space And Kern Punctuation Marks And Other Symbols

Thomas Bohm writes about the modern challenges of adding spacing to punctuation marks and other symbols.

Read it

The Oscars 2020

A Three.js experiment with the 2020’s Oscars. Check out the this tweakable version here. By Robert Borghesi.

Check it out

SVG Path Visualizer

A visualizer where you can enter SVG path data and discover how it’s build up.

Check it out

Pose Animator

Pose Animator takes a 2D vector illustration and animates its containing curves in real-time based on the recognition result from PoseNet and FaceMesh.

Check it out

Modern CSS Solutions

A great series by Stephanie Eckles that examines modern solutions to old CSS problems.

Check it out

A case study of complex table design

James Long shares how he approaches product design and all the considerations one needs to think about.

Read it

Blush

Blush makes it easy to add illustrations to your projects. Create, mix, and customize illustrations made by artists around the world.

Check it out

Progressively enhancing radio buttons with SVG whilst staying accessible

Christian Heilmann shows how to progressively enhance a radio button group to look great and still work with keyboard and screen readers.

Read it

switch.css

Sarah Fossheim’s latest CSS creation.

Check it out

Reef

A lightweight library for creating reactive, state-based components and UI. Reef is a simpler alternative to React, Vue, and other large frameworks.

Check it out

Optimize Cumulative Layout Shift

In this guide, Addy Osmani covers optimizing common causes of Cumulative Layout Shift (CLS) such as images and iframes without dimensions or dynamic content.

Read it

Everything I Learned About min(), max(), clamp() In CSS

Ahmad Shadeed shares what he learned about CSS Comparison Functions that are now supported in all major browsers.

Read it

The Deno Handbook: a concise introduction to Deno

Learn how to get up and running quickly with Deno, a modern Node.js alternative.

Read it

Modernist Abstract Vector and Pattern Set

A very nice set of geometric vector illustrations.

Check it out

Second-guessing the modern web

Tom MacWright explains why for things like blogs, shopping-cart-websites, mostly-CRUD-and-forms-websites, using React might not have any concrete benefit.

Read it

Animal Crossing: Isabelle’s Day Off

Tee Diang’s beautiful CSS only scene.

Check it out

Minigames & Playful Interactions

A great collection of microinteractions and mini-games.

Check it out

Behind the Source

Behind the Source is a series of interviews with the people behind the websites.

Check it out

Underline animation

An delightful animation where a line becomes a caret.

Check it out

Exciting Things on the Horizon For CSS Layout

Michelle Barker shares the exciting new things coming for CSS layout.

Read it

CSS fix for 100vh in mobile WebKit

Matt Smith shows how to use -webkit-fill-available as a CSS trick to handle the annoying mobile viewport bug with 100vh in WebKit on Safari.

Read it

window.location Cheatsheet

The very useful window.location cheatsheet by Samantha Ming.

Check it out

Web Vitals

Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web.

Check it out

Collective #605 was written by Pedro Botelho and published on Codrops.

April 30, 2020

Collective #604

Inspirational Website of the Week: Edoardo Smerilli

We are total suckers for these wonderful interactions and distortions! Our pick this week.

Get inspired

The Open Web is Dying

Some very important thoughts by Tony Perez: “The open web is changing dramatically, and not for anything that resembles openness, and the world seems to be ok with it.”

Read it

Our Sponsor

Become a Divi expert and get your own business going

Learn how to develop websites with the most popular WordPress theme in the world and secure your success as a freelancer.

Start learning now

Immersive Section Transition Effect in CSS and JavaScript

Claudia Romano shows how to create an immersive transition effect between sections on a webpage.

Check it out

Are you using SVG favicons yet? A guide for modern browsers.

Antoine Boulanger explains why and how to use SVG favicons.

Read it

What is a resilient website?

An episode of “A Question of Code” with Jeremy Keith where he talks about the concept of “resilient” websites.

Check it out

Trails

A simple geometrical trail to attach to your Three.js object. By Arnaud Svart.

Check it out

The Hero Generator

A very helpful hero section generator made by Sarah Drasner.

Check it out

Rust and Node.js: A match made in heaven

Anshul Goyal explains how you can use Rust to build a native add-on for Node.js.

Read it

Your dark mode toggle is broken

Kilian Valkhof on how most sites do not implement dark mode toggles correctly.

Read it

The 4 Key Steps to Art Direction

Marcus Brown shares his approach to art direction, making iconic striking visual experiences, and the importance of typography and color, at Awwwards Conference Amsterdam.

Watch it

What I wish I knew about React

Ire Aderinokun shares some facts about React she wishes she knew before.

Read it

Faking 3D Elements with CSS

Bradley Taunt shows how to make an element look like a 3D object with some CSS trickery.

Check it out

The CSS “content” property accepts alternative text

Stefan Judis shows how the CSS ‘content’ property allows a way to provide an alternative text.

Check it out

Box Line Text

Box Line Text is a minimalistic virtual whiteboarding tool without visible UI for a clean screencasting experience.

Check it out

Balancing Moods

Great demo by Chris Gannon.

Check it out

Favorite JavaScript single line of code

Favorite JavaScript utilities in just a single line of code.

Check it out

Responsive CSS Grid – Books

Andy Barefoot made this cool book grid demo.

Check it out

Insomnia

A collaborative API design tool for designing and managing OpenAPI specs.

Check it out

Real-World Effectiveness of Brotli

Harry Roberts ananlysis of how effective Brotli, which can be used over Gzip, really is.

Read it

Password Reveal

A fun password reveal effect by Mikael Ainalem.

Check it out

Who can get my blood?

A visualizer demo for blood group compatibility.

Check it out

NONYMOUS

A supercool web experience of an anonymous marketing company.

Check it out

From Our Blog

Morphing Gooey Text Hover Effect

Three gooey morphing hover effects using SVG filters for menu links based on a demo by Graham Pyne.

Check it out

Collective #604 was written by Pedro Botelho and published on Codrops.

April 23, 2020

Collective #603

Inspirational Website of the Week: Houses Of

A great design with wonderful colors and great typography. Our pick this week.

Check it out

Our Sponsor

Start your own freelance business by becoming a Divi expert

Learn how to develop websites with the most popular WordPress theme in the world and secure your success as a freelancer.

Start learning now

Gallery

A touch-friendly, responsive and performant JavaScript gallery made by Benjamin DeCock.

Check it out

Different Approaches to Responsive CSS Motion Path

An article by Michelle Barker on the workarounds needed for responsive motion paths.

Read it

How We Built a Playful WebGL Experience for 100 FWA Wins

Jam3 commemorates 100 FWA wins by creating a fantastic WebGL experience. Learn how they did it in this article.

Read it

CSS for internationalisation

A great first article by Chen Hui Jing on styling related to language in CSS.

Read it

Spacing in CSS

A great guide on spacing in CSS by Ahmad Shadeed.

Read it

The Cost of JavaScript Frameworks

Tim Kadlec’s analysis of the potential negative impact of using JavaScript frameworks.

Read it

Pseudo-Randomly Adding Illustrations with CSS

Eric Meyer shares a CSS technique on how to add an illustration to a page in a nearly random way.

Check it out

Solar.css

A wonderful CSS based solar system with lots of nice details.

Check it out

The joy of pixeling and building pixel tools with HTML5 canvas and JavaScript

Christian Heilmann shares his passion for creating pixel tools.

Read it

The Quest for the Perfect Dark Mode

Josh Comeau’s scintillating exploration of color themes in Gatsby.

Read it

98.css

A design system for building faithful recreations of old UIs like the Windows 98 UI.

Check it out

markmap-lib

Markmap is a combination of Markdown syntax and mindmap.

Check it out

Styled System Revisited

Varun Vachhar shares his insight on building Rangle’s open-source design system kit, Radius.

Read it

40 Free HTML landing page templates

A great collection by Davide Pacilio of free landing page templates.

Check it out

pattern.css

A CSS-only library to fill an empty background with beautiful patterns.

Check it out

67 Free device icons

A free set of 67 device icons in multiple file formats (SVG, EPS, PNG, Ai).

Check it out

Listboxes vs. Dropdown Lists

Anna Kaley defines listboxes and dropdown lists and discuss when to use each element, and cases where either will suffice

Check it out

Themer

Addy Osmani’s tip: themer takes a set of colors and generates themes for your development environment (editors, terminals, wallpapers, and more). Check it out if you didn’t know it yet.

Check it out

How To Create A Particle Trail Animation In JavaScript

In this article, Anna Prenzel explains how you can to easily program a small trail of particles with anime.js.

Read it

The Decline of Usability

Carl Svensson points out how UIs got worse during the last couple of years.

Read it

Turning Vue components into reusable npm packages

How can you reuse Vue.js components across your projects? Learn how to automated the process of bundling, testing, documenting and publishing Vue components.

Read it

From Our Blog

Awesome Demos Roundup #15

A fresh collection of the most intriguing coding experiments from around the web.

Check it out

Collective #603 was written by Pedro Botelho and published on Codrops.

April 16, 2020

Collective #602

Inspirational Website of the Week: CUSP

A superb elegant look with very interesting distortion effects. Our pick this week.

Get inspired

Our Sponsor

Start your own freelance business by becoming a Divi expert

Learn how to develop websites with the most popular WordPress theme in the world and secure your success as a freelancer.

Start learning now

Building dark mode on Stack Overflow

Aaron Shekey talks about the work that went into the new dark mode option of Stack Overflow.

Read it

Kontrapunkt Type

Step inside a virtual experience of the solo exhibition ‘Kontrapunkt Type’, presented by design agency Kontrapunkt, DNP and Ginza Graphic Gallery in Tokyo.

Check it out

Watched Box

Heydon Pickering made this declarative container queries solution.

Check it out

Writing an Emulator in JavaScript (and Interfacing with Multiple UIs)

A great guide by Tania Rascia where she shares her journey of writing a Chip-8 interpreter.

Read it

Image Compare Viewer

Compare before and after images, for grading, CGI and other retouching comparisons.

Check it out

Image Techniques On The Web

Ahmad Shadeed’s guide to including images in HTML covering various techniques.

Read it

Stacks

A set of layout components for building React Native views blazingly fast.

Check it out

How && and || Operators Really Work in JavaScript

An in-depth post that explains in examples how exactly && and || operators work in JavaScript.

Read it

Practice time!

Practice your ukulele with this project by Monica Dinculescu.

Check it out

Generative Data Visualization

The third part of a series where Shirley Wu show how to create custom data visualizations using SVG, Vue, and D3.js.

Check it out

Bubble Tape Text

A super cool unrolling scroll effect by Matthew Rayfield.

Check it out

Prog Arp II

An arpeggiator instrument by Jake Albaugh.

Check it out

Creating Morphing Animations with CSS clip-path

Learn how to implement morphing, a technique for transforming one appearance into another, using CSS in this tutorial by Mikael Ainalem.

Read it

How Google Ruined the Internet

Google has become a card catalog that is constantly being reordered by
an angry, misinformed mob.

Read it

Updates to Form Controls and Focus

Microsoft Edge and Google Chrome spent the last year collaborating to retheme and improve the functionality of the built-in form controls on Chromium browsers.

Read it

Meanderer

A JavaScript micro-library for responsive CSS motion paths. Made by Jhey Tompkins.

Check it out

Bongo Cat Codes #2 – Jamming

A lovely animation by Caroline Artz.

Check it out

3D Photography using Context-aware Layered Depth Inpainting

A novel method for converting a single RGB-D input image into a 3D photo.

Check it out

Making a responsive CSS grid layout with just 3 properties

Learn how to pull off a simple responsive template based on CSS Grid.

Read it

Why you should stop using Google Analytics on your website

Here’s a look at why you should remove Google Analytics from your website and help create a more open, independent web that’s more friendly to the visitors.

Read it

From Our Blog

Interactive WebGL Hover Effects

A simple tutorial on how to achieve an interactive mouseover/hover effect on images in some easy steps.

Check it out

Collective #602 was written by Pedro Botelho and published on Codrops.

March 26, 2020

Collective #599

Inspirational Website of the Week: Playful

A really unique design that surprises with many “playful” details. Our choice this week.

Get inspired

Our Sponsor

Get Divi for less

Join 649,032 customers and get access to Divi, Extra, Bloom, Monarch and more. Power your entire team and build unlimited websites. The ultimate WordPress toolkit awaits.

Get Divi now

Vincent

Vincent is a one-stop inbox for design and frontend news, curated daily by real people.

Check it out

Embracing modern image formats

A great article by Joshua Comeau on tiny cross-browser images, in HTML and React.

Read it

Kosmi

With Kosmi you can watch videos, play games, or simply chat with friends or strangers all from within your browser.

Check it out

Emergency Website Kit

Max Böck shares an emergency website kit: a static boilerplate which contains only the bare minimum for maximum resilience.

Check it out

A Practical Overview Of CSS Houdini

In this article, Adrian Bece takes a look at each part of Houdini, its current browser support, and how they can be used today using progressive enhancement.

Read it

Here Dragons Abound: Creating a Pencil Effect in SVG

A fantastic tutorial on how to create a beautiful pencil line effect in SVG.

Read it

Akino Kogomi

An interactive art exhibition website made as a tribute to Japanese artist Akino Kogomi.

Check it out

Everything About Auto in CSS

Ahmad Shadeed explores all the things we can do with the “auto” keyword.

Read it

Styling Scrollbars with CSS: The Modern Way to Style Scrollbars

A quick tutorial on how to style browser scrollbars using only CSS by William Le.

Check it out

Color Push

With Color Push you can create and download generative art. Read more about it here.

Check it out

Explaining CSS specificity to a 5-year-old

Amelia Bellamy-Royds answers the question on how to explain specificity to a 5-year-old child.

Read it

Connect Four in Vue and CSS

The classic game of Connect Four in Vue and Sass. By Josh Collinsworth.

Check it out

3D Kinetic Typography

A beautiful demo by Anna the Scavenger.

Check it out

Cyberpunk: Then and now

Steve Lord explores how Cyberpunk has changed over the past 50 years: “Cyberpunk’s aesthetic is no longer the future. Cyberpunk is now.”

Read it

IMAP API

IMAP API is a self hosted application for accessing IMAP accounts over REST API.

Check it out

CSS Can Influence Screenreaders

In case you missed it: Ben Myers’ excellent article on how CSS bleeds into content and influences screenreader announcements.

Read it

Fun with browsers: how to get an image into the current page

Christian Heilmann gave himself the task to build an interface to make it as easy as possible for a user to add an image into the document.

Check it out

Homer’s Face Animated /w GSAP

Kasper De Bruyne’s animated Homer Simpson demo.

Check it out

Exciting Multi-line Highlights

Manan Tank’s demo of exciting highlights.

Check it out

Inspired Design Decisions With Otto Storch: When Idea, Copy, Art And Typography Became Inseparable

In this seventh instalment of Inspired Design Decisions, Andy Clarke will explore how American art director and graphic designer Otto Storch inspires his designs for the web.

Read it

Conic gradients + CSS masks (no FF)

A cube demo with conic gradients by Yoksel.

Check it out

From Our Blog

Animated Custom Cursor Effects

Some ideas for interactive custom cursor animations using SVG filters.

Check it out

Collective #599 was written by Pedro Botelho and published on Codrops.

March 19, 2020

Collective #598

Inspirational Website of the Week: Wannabe — Toys

A real masterpiece with playful interactions and unique design details. Our pick this week.

Get inspired

Our Sponsor

The Divi Birthday Sale

Divi’s biggest discount of the year so far has arrived: get 20% off when you join today!

Get Divi now

Backstage

An open platform for building developer portals by Spotify.

Check it out

Flexible Repeating SVG Masks

A CSS technique for using SVG as repeating masks by Tyler Gaw.

Check it out

Positioning Text Along a Path with CSS

A great article by Michelle Barker on the fun things we can do with CSS Motion Path.

Read it

Currying in CSS?

Is this an example of currying in CSS? An interesting case by Trys Mudford.

Check it out

‘CSS X’

Bert Bos on the idea and problematic of CSS versioning.

Check it out

Building with Friction

Tim Kadlec on the importance of introducing some friction in our workflow to help prevent the wrong actions.

Read it

npm is joining GitHub

Read the announcement on Microsoft-owned GitHub signing an agreement to acquire npm.

Check it out

Gray Spiral Delaunay with Texture

A beautiful spiral demo by Johan Karlsson. Click to generate a new pattern.

Check it out

Mutik

A tiny immutable state management library based on Immer. By Jared Palmer.

Check it out

LoveIt Theme for Hugo

LoveIt is a clean, elegant but advanced blog theme for Hugo.

Check it out

Droplet Loader

A fantastic loader demo by Chris Gannon.

Check it out

Payforlayers

Some free PNG illustrations by Carlos Px.

Check it out

For of loops in Javascript one loop to rule them all

An article by Jonathan Creamer that explains the for of loop in JavaScript.

Read it

VanillaJSChess

A simple Chess engine made with vanilla JavaScript.

Check it out

Tabler Icons

A set of over 300 free MIT-licensed high-quality SVG icons for you to use in your web projects.

Check it out

From Our Blog

Ideas for Distorted Link Effects on Menus

After showing how to use SVG filters for line distortion effects on links, here are some examples of how to use this kind of decorative style on menus.

Check it out

From Our Blog

Create a Wave Motion Effect on an Image with Three.js

Learn how to make a wave motion effect on an image with Three.js and simplex noise.

Check it out

Collective #598 was written by Pedro Botelho and published on Codrops.

March 16, 2020

Collective #597

Creative Coding Essentials

The Alpha-version of Tim Rodenbröker’s course “Creative Coding Essentials”, teaching you the very basics of Creative Coding.

Check it out

This content is sponsored via Syndicate Ads

Grow with the
All-in-One Marketing Platform

Your app is up and running! Now what? Seamlessly connect it to your marketing data. That’s what.

Learn more

Accessible SVGs: Inclusiveness Beyond Patterns

Carie Fisher explores the question “if true inclusiveness lies beyond patterns — what other factors should we consider when designing and developing accessible SVGs?”

Read it

The CSS Podcast

Una Kravets and Adam Argyle break down complex aspects of CSS into digestible episodes covering everything from accessibility to z-index.

Check it out

How to create an accordion hover effect with box-shadows

A step-by-step tutorial on how to create a rainbow accordion animation in CSS, using only box-shadows. By Sarah L. Fossheim.

Read it

Sketch Dark Mode Plugin

Generate a dark mode version of any Sketch document, the right way.

Check it out

MonoLisa

A beautiful monospace font family designed for software developers.

Check it out

CSS Viewport Units

A thorough and practical guide to CSS viewport units by Ahmad Shadeed.

Check it out

RedwoodJS

An opinionated framework that combines React, GraphQL, Prisma2, SQL, and lots more out of the box.

Check it out

The History of the URL

Zack Bloom from Cloudflare dives into the history of the URL.

Read it

16 Things to Improve Your Website Accessibility (Checklist)

In this article Bruce Lawson explains how to improve website accessibility.

Check it out

Ping Pong Mini-Game

A great mini-game made with react-three-fiber ofc, use-cannon and zustand. By Paul Henschel.

Check it out

Photo Stream

Self-hosted, super simple photo stream. By Tim Van Damme.

Check it out

Deep Learning Algorithms – The Complete Guide

Learn about all the essential Deep Learning algorithms including models used in Computer Vision and Natural Language Processing.

Check it out

Aliasing in computer graphics

A fascinating read on the manifestations of aliasing in 3D graphics including an attempt to theoretically unify them.

Read it

CSS Mondrian

Piet Mondrian style art using CSS grid made by Adam Fuhrer.

Check it out

Flexbox and absolute positioning

A mini-post about Flexbox and absolute positioning, and a minor bug in the Firefox DevTools.

Read it

Boardist

Create your personal workspace to keep everything organized with boards.

Check it out

Virtual Doom

In case you didn’t know about it: Virtual DOOM is a first-person 3D demo that uses the DOM as its render engine, no WebGL, canvas or SVG.

Check it out

Unscreen

Remove the background of any video with this online tool.

Check it out

Flip Counter Plugin

An advanced flip counter plugin that is easy to setup.

Check it out

Collective #597 was written by Pedro Botelho and published on Codrops.

March 2, 2020

Collective #594

Vue.js: The Documentary

With the help of Sarah Drasner, Taylor Otwell, Thorsten Lünborg and many others from the Vue.js community, Evan You tells the story of how he fought against the odds to bring Vue.js to life.

Watch it

Our Sponsor

You just need Divi to start your own freelance business

Learn how to develop websites with the most popular WordPress theme in the world and secure your success as a freelancer.

Start learning now

Links to cross-origin destinations are unsafe

Learn how to safely link to resources on another host in this web.dev article.

Read it

Understanding Generators in JavaScript

Tania Rascia explains generators that were introduced with ECMAScript 2015.

Read it

Beastnotes

A very useful note taking app for online courses.

Check it out

HTML: The Inaccessible Parts

Dave Rupert highlights some interesting cases where using plain ol’ HTML causes accessibility problems.

Read it

Rome

Rome is an experimental JavaScript toolchain that includes a compiler, linter, formatter, bundler, testing framework and more.

Check it out

grep.app

Search across a half million git repos using regular expressions.

Check it out

More accessible defaults, please!

Hidde de Vries argues that useful HTML elements like date inputs and <video> could make the web a much better place, if browser accessibility bugs in their implementations were prioritized.

Read it

Negative margins in CSS

Peter-Paul Koch’s interesting overview of using negative margins in simple situations.

Read it

Metrics, Logs, and Traces in JavaScript Tools

Some tips and tools on adding Metrics, Logs, Traces, and Events to your JavaScript code.

Check it out

RaymondCamden.com now powered by Eleventy!

Raymond Camden shares the process of converting his blog to Eleventy. You can find the source here.

Check it out

Text divider with a single <div>

A CodyHouse nugget that shows how to create a text divider with pseudo elements using flexbox.

Check it out

Animated Responsive Navbar with CSS

A great beginner’s tutorial on how to create an animated navigation.

Watch it

Tower Time

An engaging tower defense game written in Vanilla JavaScript by Adrian Rampy.

Check it out

Memphis Beauty

A wonderfully creative 3D scene made with Three.js by Anna the Scavenger.

Check it out

Web Soft Sphere

An implementation of the tricky soft ball algorithm. See this related tweet, and also this one.

Check it out

Masked & Layered Linear Gradients

A little mask trick for a four corner layered gradient.

Check it out

Shader moire

Some beautiful Three.js shader art.

Check it out

pwn.college BETA

A first-stage education platform for students to learn about, and practice, core cybersecurity concepts in a hands-on fashion.

Check it out

Collective #594 was written by Pedro Botelho and published on Codrops.

February 27, 2020

Collective #593

The Markup

The Markup is a nonprofit newsroom that investigates how powerful institutions are using technology to change our society.

Check it out

Our Sponsor

Become a Data Scientist, job guaranteed.

The Data Science Career Track is a 6-month, self-paced online course that equips students with the skills and hands-on experience to get hired in data science.

Apply today

Tailwind UI

Fully responsive, beautiful UI components, designed and developed by Adam Wathan and Steve Schoger, the creators of Tailwind CSS.

Check it out

Open Peeps

A mix-and-match hand-drawn illustration library by Pablo Stanley.

Check it out

How does the Virtual DOM work?

An animated explainer by Sarah Drasner on how the Virtual DOM works.

Check it out

Inconsistent user-experiences with native lazy-loading images

Daniel Aleksandersen highlights the differences of implementation of native lazy loading in browsers.

Read it

Revealing Hero Effect in CSS and JavaScript

Learn how to create a section that reveals its content when the previous element scrolls away. A tutorial by Claudia Romano.

Check it out

Heroicons

A set of free MIT-licensed high-quality SVG icons for UI development.

Check it out

What Does A Foldable Web Actually Mean?

A very interesting read on foldable devices and the ideas around a “foldable web”. By Frederick O’Brien.

Check it out

Drag–and–Drop: How to Design for Ease of Use

Learn how clear signifiers and feedback at all stages of the interaction make drag–and–drop discoverable and easy to use.

Read it

Iconset

Iconset is a free SVG icon organizer and manager app for designers, developers and teams for both, macOS and Windows.

Check it out

Booklets.io

A place that collects hundreds of booklets on design, business, freelancing and more.

Check it out

Why write vanilla JS when you can just use [insert library or framework here]?

Some good points on why writing your own vanilla JS instead of using a framework can be a better option.

Read it

Mosquito JS

A fun creation by Tim Holman: an annoying mosquito noise, generated with JavaScript.

Check it out

Buttono

A flexible Sass mixin for creating BEM-style buttons. By Hasan Aydo?du.

Check it out

Your website probably has a memory leak

Memory leaks are common in Single Page Apps and this article will show you how to find and fix them.

Read it

The Tuner

Eric Karjaluoto has a very distinct view on the role of the designer. He writes: “It’s hard to produce suitable work when you think about design as a form of expression.”

Read it

CSS Specificity calculator

Quickly calculate any CSS selector specificity score along with explanations.

Check it out

5 Common Web App Accessibility Issues And How To Fix Them

Some useful tips on how to fix common accessibility issues in web apps.

Read it

Share images to your website using the Web Share Target API

Learn how to use the Web Share Target API on the example of a grayscale converter for images. By Michael Scharnagl.

Check it out

Pure CSS Responsive Browser Template

A really nice and responsive browser template by Adam Marsden.

Check it out

From Our Blog

Animating SVG Text on a Path

A demo that shows how to animate SVG text on a path on scroll using the Intersection Observer API and SVG filters.

Check it out

From Our Blog

Audio-based Image Distortion Effects with WebGL

Some experiments that show how to use audio-based distortion effects on images with p5.js and its sound library.

Check it out

Collective #593 was written by Pedro Botelho and published on Codrops.

February 24, 2020

Collective #592

Making Things Better: Redefining the Technical Possibilities of CSS

The talk of Rachel Andrew at an An Event Apart DC 2019.

Watch it

How To Use The HTML Drag-And-Drop API In React

In this tutorial, you’ll learn about the HTML drag-and-drop API and how to use the `useReducer` hook for managing state in a React functional component.

Read it

Our Sponsor

Rapidly build websites for clients by mastering Divi

Learn how to develop websites with the most popular WordPress theme in the world and secure your success as a freelancer.

Start learning now

CLI Diagram

With CLI Diagram you can draw needlessly complex diagrams right in the console.

Check it out

Building a new kind of ecosystem

A great talk by Lin Clark from the WebAssembly summit.

Watch it

Kasaya

A “WYSIWYG” (kind of) scripting language and runtime for browser automation.

Check it out

mgz.me

The amazing portfolio of Marco Gomez is like the 80s on ASCIID.

Check it out

esbuild

In case you missed it: A JavaScript bundler and minifier that focuses on speed.

Check it out

Disappearing-People

Jason Mayes’ great project that removes people from complex backgrounds in real time using TensorFlow.js.

Check it out

Pixel Dust

Some sparkling flowy pixel dust made by Paul Neave.

Check it out

In Search of Simplicity

Some insightful thoughts by Michelle Barker on the quest for simplicity.

Check it out

Pure CSS Claw Crane

A really nice CSS only demo by Jon Kantner.

Check it out

Wind field – How To

A breakdown of a wind field in 8 steps, using P5.js. By Louis Hoebregts.

Check it out

React + Canvas = <3

Thibaut Dutartre shows how to write canvas-based components in React.

Read it

Glitch Art Generator

A fun glitch art generator made by Adam Fuhrer.

Check it out

Corgo’s with Jason

A beautiful variable font text effect made by Mandy Michael.

Check it out

Fluiditype

In case you didn’t know about it: Fluiditype is an interesting fluid typography CSS helper.

Check it out

void-merge-2048

A 2048-inspired game with a twist. Made with Three.js.

Check it out

Gauging users’ reactions to non-native UI

Some interesting insights from some gorilla usability tests conducted at DroidCon NYC 2019 by Frances Biedenharn.

Read it

TEXTREME

An explosive text processor with lots of potential. Made by Ash K and Maks Loboda.

Check it out

Collective #592 was written by Pedro Botelho and published on Codrops.

February 20, 2020

Collective #591

Inspirational Website of the Week: Six N. Five

A very interesting layout with beautiful transitions and great typography. Our pick this week.

Get inspired

Interactive Toys

A collection of cool interactive demos by Paul Neave.

Check it out

Styling The Good Ol’ Button Element

In this article, Ahmad Shadeed walks us through the fine details of a button element and how to style it to ensure that it looks good in all browsers.

Read it

Our Sponsor

Become a successful freelancer

Learn how to develop websites with the most popular WordPress theme in the world and secure your success as a freelancer.

Start learning

monica.css

Monica Dinculescu’s super-compact and useful CSS framework.

Check it out

Fixing memory leaks in web applications

Nolan Lawson shares his experience with fixing memory leaks in web applications, and provides some examples of how to effectively track them down.

Check it out

Art42

Art42.net showcases an infinite stream of unique AI art from the training of a carefully selected set of cubist art pieces. Based on StyleGAN2. Read some more about it in the HN comments.

Check it out

The Theory: A Semantic Color System

The first article in a series about how the YNAB team works with colors in their design system.

Read it

The Three Graces

Paul Henschel is testing out interactive low-key lighting in this amazing demo. Read more in his tweet and check out the source code.

Check it out

font-variant-numeric: tabular-nums

Sebastian De Deyne shares why he loves “font-variant-numeric: tabular-nums”.

Check it out

Don’t touch my clipboard

Alex Ellis writes about how you can (but shouldn’t) change how people copy text from your website.

Read it

CSS Tutorial: Create Diagonal Layouts Like It’s 2020

Nils Binder shows us how to create layouts with diagonal sections in a couple of steps.

Read it

Yelloworld

A beautiful web experience by Onetold Stories.

Check it out

BBC Micro bot

Send a tweet to @bbcmicrobot in BBC BASIC and it will run it on a 1980s 8-bit computer emulation and reply with a GIF.

Check it out

Let’s Define CSS 4

Read the interesting responses to the idea of officially defining “CSS 4”.

Read it

When CSS Blocks

Tim Kadlec shows why using an outdated preload/polyfill pattern is problematic.

Read it

Intimacy

A beautiful interactive poem composed with images, sounds and text.

Check it out

threejs-nuxt-sample

Misaki Nakano’s geometric Nuxt.js project. Find the source code here.

Check it out

macOS Catalina 10.15: Setting up a Brand New Mac for Development

Tania Rascia’s great guide on setting up a new Mac for development.

Read it

Svelte-grid

In case you didn’t stumble upon it yet: A draggable and resizable grid layout with responsive breakpoints, for Svelte.

Check it out

5 monospaced fonts with cool coding ligatures

Matej Latin explores some nice monospaced fonts suitable for coding.

Read it

YouTube Rewind 2019

Explore the best YouTube moments of 2019.

Check it out

Collective #591 was written by Pedro Botelho and published on Codrops.

February 17, 2020

Collective #590

Understanding Map and Set in JavaScript

Tania Rascia goes over the Map and Set objects, what makes them similar or different to Objects and Arrays, the properties and methods available to them, and examples of some practical uses.

Read it

Our Sponsor

Start your own freelance business by becoming a Divi expert

Learn how to develop websites with the most popular WordPress theme in the world and secure your success as a freelancer.

Start learning now

Listen to your web pages

Listen to DOM changes as different pitches of audio with this script by Tom Hicks.

Check it out

Link Targets and 3.2.5

Adrian Roselli recommends not to arbitrarily open links in a new window or tab.

Read it

How to Publish an Updated Version of an npm Package

Scott Vandehey covers the most common release steps for an npm project, how to determine the release process for an existing one, and recommendations for project maintainers.

Read it

Flight

3D video game experiments built with Three.js, TypeScript, React, Redux and GLSL shaders.

Check it out

Turbulence

A beautiful experiment where you can play with an animated SVG filter on hover.

Check it out

Exploring the Web Speech API

An experiment with voice on the web using the Web Speech Synthesis and Recognition API.

Read it

Case Study: Spatzek Studio

Daniel Spatzek shares the journey of the interesting redesign of Spatzek Studio, the successor of Ursa Major Supercluster.

Read it

Stage.js

In case you didn’t know about it: Stage.js is a 2D JavaScript library for cross-platform HTML5 game development.

Check it out

Building a login system with HTML, CSS, and JavaScript

Zell Liew shares a login system he built with HTML, CSS, and JavaScript.

Read it

Chameleonic Header in CSS and JavaScript

Learn how to create a chameleonic header that changes its style on scroll to match the color theme of the underneath section. A tutorial by Sebastiano Guerriero.

Read it

Google Fonts Tip

Addy Osmani shows how to shave up to 90% off the size of Google Fonts requests by declaring only characters you need with &text.

Check it out

Whoosh

A great game prototype by Charlie Gerard where you control a 3D spaceship with hand movements.

Check it out

Calm Spikes

A great Three.js demo by Anna the Scavenger.

Check it out

Another 85 ideas for computing (in progress)

After a fantastic set of ideas Sam Squire adds another 85 ideas for computing.

Check it out

Why the JAMStack is awesome (and a few reasons why its not)

Chris Ferdinandi’s clarifies what JAMStack is and provides some great resources for getting started.

Read it

The Side Effects of an Unfinished Internet

Some interesting thoughts on the way the modern internet had a negative effect on key aspects of meaningful creation.

Read it

Care Bear NEEDS Love

An adorable demo by Jhey Thompkins.

Check it out

The Map of Mathematics

An incredible exploration of some parts of the boundless mathematical universe with beautiful visualizations.

Check it out

Collective #590 was written by Pedro Botelho and published on Codrops.

February 13, 2020

Collective #589

Inspirational Website of the Week: Connect home

A crystal clear design with smooth animations and a modern layout. Our pick this week.

Get inspired

Our Sponsor

Start your own freelance business by becoming a Divi developer

Learn how to develop websites with the most popular WordPress theme in the world and secure your success as a freelancer.

Start learning now

Understanding CSS Grid: Grid Template Areas

Rachel Andrew takes a look at how to use grid-template-areas to place items.

Read it

OpenChakra

A great visual editor with drag and drop for the Chakra UI component library.

Check it out

The wonderful sound of an atomic commit

James Long explains what atomic behavior is an why it is so important for quality software.

Read it

Same HTML, Different CSS

Ahmad Shadeed shows how to tackle the challenge of creating different styles for the same HTML.

Read it

How To Create Maps With React And Leaflet

Shajia Abidi explains how to use Leaflet to create an advanced map along with the help of React and JavaScript.

Read it

Redesign: Gridniking

Frank Chimero is redesigning his website in the open. This article is about how to set up a grid and begin with the layout.

Read it

Variable fonts’ past, present and future, according to Dalton Maag

A great interview with type designer Dalton Maag on variable fonts.

Read it

How To Setup Your Local React Playground

Dmitri Pavlutin shows how to setup your local React playground in three easy steps.

Check it out

SKMZ

A GraphQL-based web app written with Go, React and MongoDB for devs to explore their skills via a GraphQL API.

Check it out

Toward Responsive Elements

Brian Kardell talks about the “Container Queries” problem, shining light on some misconceptions and exploring the state of things.

Read it

drop.lol

Mat Sz created this practical WebRTC file transfer tool.

Check it out

How I built my own browser

Kilian Valkhof tells the interesting story of how Polypane, the browser for responsive web development and design, was developed.

Read it

Performant front-end architecture

Learn how to make client-side apps load faster and provide a better user experience.

Read it

Collection of slick UI demos

A demo app by Marian Ban that uses techniques from Amelia Wattenberger’s “Fullstack D3 and Data Visualization” book.

Check it out

Supercharge your command line experience: GitHub CLI is now in beta

Billy Griffin from GitHub explains how you can use the new GitHub CLI in your terminal.

Read it

GSAP Stagger Cube

A beautiful cube with stagger animations made by Ryan Mulligan.

Check it out

Vangogh

A search engine for color palettes. It uses Machine learning to generate color palettes from millions of images that are contextually representative.

Check it out

react-particle-image

A React component that lets you render images as interactive particles. By Austin Malerba.

Check it out

Pokemon Master Guessing Game

A Pokemon guessing game with some hidden easter eggs made by Wesley Zen.

Check it out

From Our Blog

How to Create a Physics-based 3D Cloth with Cannon.js and Three.js

Learn how to create a physics-based 3D cloth with Cannon.js and Three.js and use simplex noise to create a wind effect.

Read it

Collective #589 was written by Pedro Botelho and published on Codrops.

February 10, 2020

Collective #588

Building a Continuous Integration & Deployment Pipeline Using Docker (CI/CD)

Tania Rascia shows how to create a CI/CD pipeline for a Node.js project using Docker and Travis.

Read it

This content is sponsored via Thought Leaders

Experts Love It. Intruders? Not So Much.

It feels good to fear less. SimpliSafe stands up to the unexpected, from burglars to burst pipes. As more than 3 million customers already know, fear has no place in a place like home.

Learn more here

Good First Issue

Good First Issue is a curated list of issues from popular open-source projects.

Check it out

Baretest

Baretest is a fast and simple JavaScript test runner. It offers near-instant performance and a brainless API..

Check it out

How to create a stacking cards effect

In this tutorial, Claudia Romano shows how to create a stacking cards effect, using the CSS sticky position and the Intersection Observer API.

Check it out

#s3e14 ALL YOUR HTML, Barycentric coords, physics

Yuri Artyukh explains how to code the awesome animation seen on the basement.studio website.

Watch it

DotMatrx.js

A dot matrix with animated movements that respond to mouse/touch move events.

Check it out

Quick and Easy Dark Mode with CSS Custom Properties

Michelle Barker shows how to easily offer a dark theme with CSS.

Check it out

Single div Sierpinski triangle

Learn how to draw the Sierpinski triangle using pure CSS in this tutorial by Yuan Chuan.

Read it

Bouncing Balls

A bouncing balls simulation using plain JavaScript.

Check it out

Understanding the ECMAScript Spec (Part 1)

In this article, you’ll get to understand the notation of a simple function in the ECMAScript spec.

Read it

Design Systems Hub

Rangle’s collection of perspectives and approaches on how to build, optimize and define design systems.

Check it out

Demystifying Browsers

With this article, Eric Lawrence aims to provide a roadmap for developers getting into the browser space.

Check it out

Why Web Browsers Are FREE

Do you know why you don’t have to pay for browser software? This video will enlighten you.

Watch it

Why Discord is switching from Go to Rust

A very interesting article by Jesse Howarth on why using Rust has many advantages for Discord.

Read it

Starfields GLShader

A really nice pseudo 3D demo by Paul J Karlik. Learn how to do it in this video tutorial: part 1 and part 2.

Check it out

JavaScript Lightning Effect

A lightning effect experiment with HTML canvas and JavaScript.

Check it out

Soft UI CSS shadow generator

If you’re into all that Neumorphism hype, this generator will make your day.

Check it out

Implementing Dark mode with TailwindCSS

If you use Tailwind CSS, this guide on how to implement dark mode will come in handy.

Read it

From Our Blog

Awesome Demos Roundup #13

A fresh selection of the most interesting demos and web experiments from the past weeks.

Check it out

Collective #588 was written by Pedro Botelho and published on Codrops.

February 3, 2020

Collective #586

Vanilla Web Projects

Mini projects built with HTML5, CSS and JavaScript without frameworks or libraries.

Check it out

A new technique for making responsive, JavaScript-free charts

Rich Harris explores how to create responsive SVG charts that work without JavaScript.

Check it out

Our Sponsor

Start your own freelance business by just learning Divi

Learn how to develop websites with the most popular WordPress theme in the world and secure your success as a freelancer.

Start learning now

Old CSS, new CSS

An excellent read on how CSS looked like in the past and where we are at now.

Read it

iHateRegex

Stop hating regex and start learning; iHateRegex is a very useful regex cheatsheet that also explains the commonly used expressions so that you can easily understand them.

Check it out