Pedro Botelho | The Blog Pros

May 14, 2020

Inspirational Website of the Week: Stephanie Jeong

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

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

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

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

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

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.

April 9, 2020

Inspirational Website of the Week: Stone & Style

A wonderful design that presents with the central element in a unique way. 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

LCH colors in CSS: what, why, and how?

Lea Verou gets us excited about LCH colors in CSS and explains how to put them to use.

Read it

Frontend Mentor

Improve your front-end skills by building real projects. Solve real-world HTML, CSS and JavaScript challenges whilst working to professional designs.

Check it out

Building an Interactive Timetable

Michelle Barker shares how she built an interactive timetable.

Read it

BEM Naming Cheat Sheet

A visual tool that provides naming-suggestions for CSS classes using the BEM naming convention.

Check it out

Radius: A Design System Accelerator

The Radius DS is a collection of open-source tools and libraries that allow you to accelerate your design system.

Check it out

Responsive Images the Simple Way

An easy-to-follow guide on how to get responsive images right. By Scott Vandehey.

Read it

Circle Swap Photo Gallery

A playful gallery with a really cool transition effect made with React and GSAP. By Steve Gardner.

Check it out

Button?Design

All you need to know about button design, one of the main interactive building blocks for creating a user interface. An article by Taras Bakusevych.

Read it

Fullstack

A little game by Hakim El Hattab where you stack checkboxes. Also, check out this remix by Phillipp Kief.

Check it out

Sections 2 Wireframe Kit

Sections 2 is a library of UI components for rapidly building landing page wireframes. The free version includes 10 ready-made screens in light mode.

Check it out

Cross-origin fetches

In this episode of HTTP 203, Jake and Surma dive into the world of cross-origin fetches, and how the web is still battling against some early design mistakes.

Watch it

Linux Man Pages — Dash Dash

Dash Dash sets the linux documentation in a beautiful collection of typefaces to make the technical content more approachable.

Check it out

Font Books

Font Books is a collection of original typefaces designed to help people read and understand classic literature better.

Check it out

MVP.css

In case you didn’t know it yet: MVP.css is an out-of-the box CSS styling for HTML elements. No class names, no framework to learn.

Check it out

Button bending hover

Some button bending magic by Aaron Iker.

Check it out

WebGL water ripples

An amazing demo by Martin Laxenaire.

Check it out

Rapid Image Layers Animation

A rapid animation of multiple layers of images for intros or page transitions made with GSAP.

Check it out

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

April 2, 2020

Inspirational Website of the Week: Rino & Pelle

A web artwork with slick interactions and wonderful typography. The definite pick for us this week.

Get inspired

Our Sponsor

Be: Affordable top value for your website

In times like these, you need an affordable Multipurpose WordPress theme that easily adapts to any website. Be Theme offers you 500+ pre-built websites and almost infinite possibilities for the lowest one-time fee.

Try Be Theme

Ash’s Smooth Scroll

ASScroll is a hybrid smooth scroll setup that combines the performance gains of virtual scroll with the reliability of native scroll.

Check it out

Animockup

Create your free animated product mockup with Animockup to create videos and animated GIFs for social media, landing pages, Dribbble, and more. Check out the GitHub repo.

Check it out

Fix an overloaded server

Katie Hempenius explains how to determine a server’s bottleneck, quickly fix the bottleneck, improve server performance, and prevent regressions.

Read it

The field

“The field” is a beautiful WebGL experiment by Akaru Studio.

Check it out

Creativity over everything

Great website with an important message from the folks of Patreon.

Check it out

HTML DOM

In case you didn’t know about it: A great collection of HTML DOM management techniques using vanilla JavaScript.

Check it out

New use-cannon features

Paul Henschel’s awesome demos that show all the new use-cannon features.

Check it out

FWA 100

Jam3 is celebrating 100 FWA wins with some artistic expression and fun.

Check it out

Understanding Default Parameters in JavaScript

Tania Rascia’s thorough guide on default parameters in JavaScript.

Read it

CSS Findings From The New Facebook Design

Ahmad Shadeed talks about all the interesting things he discovered when inspecting Facebook’s new UI design.

Read it

Hook: A dark HTML landing page template

Hook is a free HTML template by Bansal that you can use to build a dark landing page for your SaaS.

Check it out

Infinite scene with Threejs and InstancedMesh

Renaud Rohlinger explains how he created the infinite 3D scene of Japanese artist Akino Kogomi’s website.

Read it

[3D] Synth Canyon Run

A great Three.js powered demo by Chris Johnson.

Check it out

Margin considered harmful

Read why Max Stoiber thinks that we should ban margin from our React components.

Read it

Flat-html

An alternative to templating and generating complicated HTML. With flat-html you write a series of statements of what each element should be set to.

Check it out

Apple’s attack on service workers

Jeremy Keith writes why you can kiss your service workers goodbye on iOS.

Check it out

Level Up Your CSS Animation Skills

The course playlist of “Level Up Your CSS Animation Skills”.

Check it out

From Our Blog

UI Interactions & Animations Roundup #5

The new collection of recent UI works to keep your creative flow going.

Check it out

From Our Blog

Inspirational Websites Roundup #14

This roundup contains our personal selection of the most interesting websites that were released in the past couple of weeks.

Check it out

From Our Blog

CSS-Only Marquee Effect

A simple CSS-only marquee effect for a menu based on Francesco Zagami’s Dribbble shot.

Check it out

Collective #600 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 12, 2020

Collective #596

Inspirational Website of the Week: Odunpazari Modern Museum

Our pick this week is a celebration of modern design, with many interesting interaction details.

Get inspired

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

Revealing footer with position: sticky!

Stephen Shaw reveals how to create a fantastic footer like seen on TheMarkup.org using position: sticky.

Watch it

Using Redux with React

A complete Redux tutorial with real-world examples by Tania Rascia.

Read it

Utopia

A fluid responsive design project by James Gilyead and Trys Mudford.

Check it out

Rendering 100k spheres, instantiating and draw calls

Daniel Velasquez’s first article in a series where he’s explaining the main techniques needed to make a curl simulation.

Read it

Midori

A fantastic Three.js library for animated image backgrounds.

Check it out

Pure CSS Landscape – An Evening in Southwold

An insane CSS-only landscape painting by Ben Evans. Try changing the color of the sun!

Check it out

Setting Height And Width On Images Is Important Again

Barry Pollard explains why it’s now well worth setting `width` and `height` attributes on your images again.

Read it

mgz.me

A unique portfolio with endless scenes to play with. By Marco Gomez.

Check it out

ls-lint

An extremely fast file and directory name linter with full unicode support.

Check it out

Yoichi Kobayashi

The amazing website of web developer Yoichi Kobayashi with lots of 3D magic.

Check it out

How I made a 3D game in only 2KB of JavaScript

Frank Force shows how he programmed a tiny racing game.

Read it

How to create an autocomplete input with only HTML

Learn how to create an autocomplete input with only HTML using the datalist element.

Read it

TIL CSS can check for a font installed locally before fetching it remotely!

Adam Argyle shows a great CSS trick for checking for locally installed fonts.

Check it out

Why Svelte

Learn why the folks of Felt Co-op is choosing Svelte for large web projects in 2020.

Read it

Stop using Material Design text fields!

Matsuko Friedland explains why you shouldn’t use or imitate the text fields from Google’s Material Design UI library.

Read it

Radiooooo.com

A fantastic musical time machine.

Check it out

Introduction to D3

A practical introduction to D3.js by Arvind Satyanarayan.

Read it

Snapfont

With Snapfont you can instantly preview any Google font, local font or a custom font on a live website.

Check it out

Jitsi Meet

In case you didn’t know about it: Jitsi Meet is a fully encrypted, 100% open source video conferencing solution.

Check it out

Shorthand

Shorthand is a utility based CSS framework for rapid prototyping.

Check it out

From Our Blog

Inspirational Websites Roundup #13

A special collection of excellent web designs that reveal current trends and that will get you inspired.

Check it out

From Our Blog

Background Scale Hover Effect with CSS Clip-path

A simple recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip-path.

Check it out

Collective #596 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