Pedro Botelho | The Blog Pros

February 3, 2020

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

How I recreated a Polaroid camera with CSS gradients only

A high-level tutorial by Sarah Fossheim on how to recreate physical products with CSS only.

Read it

CSS Positioning

An interactive way to learn how positioning works in CSS. By Ahmad Shadeed.

Check it out

Flipping Images Horizontally or Vertically with CSS and JavaScript

Rik Schennink shows how to flip images horizontally and vertically using CSS and JavaScript.

Read it

How to Choose the Best Static Site Generator in 2020

A guide on the current top SSGs with tips for picking the right one for your project.

Read it

attributes.css

A very useful Gist of the seven different types of CSS attribute selectors by Emma Bostian.

Check it out

Palette Generator

Generate instant color combinations with this color schemes generator.

Check it out

coders.guide

A roadmap for learning full-stack web development using React.

Check it out

Simulating dark/light colour mode

A quick tip by Christian Heilmann on how to simulate dark/light mode in the dev tools of Microsoft Edge.

Check it out

Animating Clip-Path Sections w/ Intersection Observer

A great layout by Ryan Mulligan where he uses the intersection observer API to animate each section as it scrolls in and out of the viewport.

Check it out

No-Code Coffee

A daily shot of No-Code related things sent to you every day via email or Twitter.

Check it out

Displaced box

In this live coding session, Yuri Artyukh shows how to recreate the displaced box effect seen on the Milano Digital Week site.

Watch it

Styled Components vs. CSS Stylesheets

Luke Smetham weighs up the pros and cons of CSS vs. Styled Components and shares how it affects the way he write React components.

Read it

Motion

An animated SVG icon editor where you can animate a pre-built set of icons. By Philip Ardeljan.

Check it out

Cheat Sheets Dev

Developer community built to share the most used and popular programming snippets, in a simplistic way.

Check it out

Night & Day

A lovely toggle made by Steve Gardner. Here’s a variation.

Check it out

Toggles

Super-awesome checkbox toggles made by Olivia Ng.

Check it out

FlowFields

A tool that lets you create some beautiful generative art using particle simulation to visualize a field of directional vectors.

Check it out

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

January 30, 2020

Inspirational Website of the Week: Socialclub

A refreshing modern design with playful interactions and great typography. Our pick this week.

Check it out

Our Sponsor

This WordPress theme follows 2020 design trends

BeTheme is a ThemeForest top-three bestseller, with over 183k downloads to date. ‘Would give 6 stars if I could’ – ZombieBatman.

Check it out

React Tutorial

An interactive way to learn and practice modern React online. Made by Jad Joubran.

Check it out

CineShader

A fantastic cinematic real-time shader visualizer made by the folks of Lusion.

Check it out

YourStack

YourStack is a place to share and discover your favorite products. Now in public beta.

Check it out

WebGLFundamentals: WebGL State Diagram

This great WebGL State Diagram shows a visual representation of most of WebGL’s internal state. Made by Gregg Tavares.

Check it out

Animating CSS Width and Height Without the Squish Effect

A tutorial by Rik Schennink where he explains how to use the transform property to simulate animating the width of an element.

Check it out

How Smashing Magazine Manages Content: Migration From WordPress To JAMstack

In this technical case study, Sarah Drasner covers Smashing Magazine’s migration from WordPress to JAMstack.

Read it

Case study: Moving a Three.js-based WebXR app off-main-thread

Read how Workers can help keep the frame rate stable in XR apps in this article by Surma.

Read it

The Year of Greta

An interactive timeline of how Greta Thunberg rose from a solo campaigner to the leader of a global movement in 2019.

Check it out

Use and Reuse Everything in SVG… Even Animations!

An article where you’ll be learning how to build and optimize your code with the SVG <use> element, CSS Variables and CSS animations.

Read it

Lingua Franca is a design language for human-centered AI – a set of guidelines that apply to any AI-driven product, tool, service, or experience, to bring coherence and fluidity to otherwise complex and messy technologies.

Check it out

PPL MVR

An animated recreation of a PPL MVR band poster. By Kristopher Van Sant.

Check it out

2020 Creative Trends: Data-Driven Design Trends

See the top design trends of 2020, based on search data from Shutterstock in this beautiful presentation.

Check it out

Can you make a countdown timer in pure CSS?

An interesting exploration on how making a countdown timer in CSS (and some JavaScript) by Chen Hui Jing.

Read it

HanaGL

Such an awesome WebGL demo! Put the finger in the nose and see what happens

Check it out

Glitch Brush

A fun brush tool made by Fabio Ottaviani.

Check it out

Staggered Animations with CSS Custom Properties

Learn how to manage staggering animations using CSS variables.

Read it

Band Moiré Filter

A mesmerizing proof-of-concept involving banded moiré images with pure HTML and CSS. By Henry Desroches.

Check it out

Remote Stash: 330 Tools for Remote Work

A hand-picked list with useful tools for remote work.

Check it out

From Our Blog

How to Create Procedural Clouds Using Three.js Sprites

Learn how to simulate a cloud on a Three.js Sprite using React-Three-Fiber.

Read it

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

January 27, 2020

Collective #584

Optimising SVGs for the Web

Michelle Barker shares her process for optimizing SVG assets, which may help you if you’re a designer or developer unfamiliar with working with SVG on the web.

Read it

Introducing Yarn 2

Maël Nison introduces the new Yarn that comes with fundamental core changes.

Read it

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

Today, the Trident Era Ends

A great article by Christian Schaefer about the rise and fall of Microsoft’s take on the web.

Read it

Playwright

Playwright is a Node library to automate the Chromium, WebKit and Firefox browsers with a single API and headless support.

Check it out

#s3e12 ALL YOUR HTML

In this episode of the amazing ALL YOUR HTML video tutorial series, Yuri Artyukh explains how to pull off the walking hands animation seen on the #Handspotting website. You should subscribe to Yuri’s channel if you want to learn some serious WebGL in fun live coding sessions.

Watch it

Intrinsic Sizing In CSS

Ahmad Shadeed explores intrinsic sizing in CSS and explains how to use those values in combination with CSS grid, and other properties.

Read it

Some Imaginary CSS

Tyler Sticka compiles some fictional CSS features he wish existed.

Read it

Griddle

Griddle is a CSS framework created with CSS Grid and Flexbox. By Dave Berning.

Check it out

AMS – Freelance Software Engineer

Andrés Valencia Téllez’s professional portfolio has some really cool effects. You can browse the full source here.

Check it out

Greenhouse Icons

Some adorable vector icons made by the team of Freepik for Pixel Buddha.

Check it out

CSS Specificity

Emma Bostian explains CSS Specificity visually and shows why understanding it is fundamental for writing proper CSS.

Read it

Flowers

A beautiful demo by Cassie Evans using SVG masking and some turbulence filter trickery.

Check it out

Userbase

In case you didn’t know about it yet: With Userbase you can easily add user accounts and data persistence to your static site. All Userbase features are accessible through a simple JavaScript SDK, directly from the browser and no back-end is necessary.

Check it out

How to copy to the clipboard using JS and the Clipboard API

Find out how to copy to the clipboard using JavaScript and the modern asynchronous Clipboard API in this tutorial by Catalin Red.

Read it

Hello from Here

In case you missed it: Create and customize a unique poster generated with real-time data from any city. Made by Upperquad.

Check it out

Standards for Writing Accessibly

An excerpt from the book “Writing is Designing” by Michael J. Metts and Andy Welfle.

Read it

ZIZO

The new website of ZIZO is a fantastic interactive 3D web adventure.

Check it out

ESLint configuration and best practices

A complete guide on how to setup ESLint in different scenarios.

Read it

UI Interactions & Animations Roundup #2

Some selected shots of great UI interactions and animations for your inspiration.

Check it out

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

January 23, 2020

Collective #583

Inspirational Website of the Week: basement.studio

Everything on basement is bold: from its striking typography to the brilliant effects and playful interactivity. Fantastic work.

Get inspired

This content is sponsored via Thought Leaders

Clubhouse: Make 2020 your most productive year

Clubhouse is a collaborative home for software teams that breaks down silos and brings creators together to ship value, not features.

Try Clubhouse Free

The CSS Cascade

Amelia Wattenberger’s interactive article that will give you insight to how cascading works in CSS.

Read it

Déplacé Maison – A case study by Niccolò Miranda

An excellent case study on a brilliant website made by Niccolò Miranda and Luca Mariotti.

Read it

Sideway

A community of Product, UI, UX Designers showcasing live projects.

Check it out

Teaching in the open: Eleventy

Jérôme Coupé writes about his switch to Eleventy and offers his free course “Introduction to Eleventy” on GitHub.

Read it

PHENOMENA

A great page with amazing effects created by Mario Carrillo for the fashion brand Phenomena.

Check it out

Robb Owen – Independent Creative Developer

A great website made with Eleventy. Read more about it in this article.

Check it out

Walkers – How to

Louis Hoebregts’ visual walkthrough of a stunning animation.

Check it out

Night at the Museum of Very Good Boys

An incredible demo by Adam Kuhn.

Check it out

Smashing TV: Form Design Patterns with Adam Silver

In this webinar, Adam Silver will show you how to analyze and redesign a real-world checkout journey. He’ll also introduce his book, Form Design Patterns.

Watch it

Multi-line gradient links

Zell Liew explains how to create links with gradients that span multiple lines.

Read it

Radio Hopping

A cool radio button animation made by Jon Kantner.

Check it out

Typo-coaster

Michelle Barker’s addictive motion-path demo.

Check it out

Internet Relay Chat: IRC-style Chat On Every Website

Relay Chat adds anonymous, IRC-style chat on every domain on the Internet, so you can chat with other people browsing the same website.

Check it out

The state of installability

Declan Rek writes about the current state of PWAs.

Read it

4 CSS layouts without using media queries

The Polypane team dissects the magic flexbox form style by Adam Argyle and shows all four layouts in action in Polypane.

Check it out

PHP in 2020

After looking at PHP in 2019, Brent from stitcher.io updated his thoughts on why PHP isn’t the same old crappy language it was ten years ago.

Read it

From Our Blog

Case Study: itsnotviolent.com

A case study that explores the motivation, choices and implementation of the itsnotviolent.com awareness campaign brought to live by the Locomotive web agency.

Check it out

From Our Blog

How to Unroll Images with Three.js

Discover the basic concept behind an unrolling image effect using WebGL.

Check it out

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

January 20, 2020

Collective #582

Design System Checklist

An open-source checklist to help you plan, build and grow your design system. By Arda Karacizmeli, Dmitry Belyaev and Steven Baguley.

Check it out

CSS Grid Template Areas In Action

Ahmad Shadeed explores how to put the grid-template-areas property to use and shares his insights.

Read it

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

Subscribercoaster

An absolutely amazing motion-path demo by Adam Kuhn.

Check it out

Using responsive modifiers to control layout changes in your components

Learn about a new approach to the responsiveness of content-dependent components in this article by Claudia Romano.

Read it

City Roads

A beautiful city road renderer made by Andrei Kashcha. Check out the GitHub repo.

Check it out

The Role of Animation and Motion in UX

Page Laubheimer describes when and how animation in UX should be used.

Read it

The JAMstack in 2020: Why (and How) to Get Started

The great getting-started guide on JAMstack by Mathieu Dionne got a fresh update with more info and resources.

Read it

Microsoft Edge Browser

The new Microsoft Edge browser is out. Read more about it in this article.

Check it out

Streams for reactive programming

Can you use WHATWG Streams for reactive programming? Find out in this exploration by Surma.

Read it

The Apple Archive

Sam Henri Gold’s incredible yearly archive that collects all the fantastic work and resources around Apple products.

Check it out

Get Ready for New SameSite=None; Secure Cookie Settings

With Chrome 80 in February only cookies with the SameSite=None; Secure setting will be available for external access, provided they are being accessed from secure connections.

Read it

Physarum Algo in Three.js

An insane demo made by Domenico Bruzzese. Check out the repo here.

Check it out

Shimmery Text w/ SVG + GSAP

A configurable animated shimmery SVG text demo made by Jhey Tompkins.

Check it out

Fireworks VR

Some impressive Three.js powered fireworks made by Lallassu.

Check it out

Sitara | Let Girls Dream

A very creative WebGL powered website to support a gender-equal future.

Check it out

Icon Giveaway

126 beautiful free icons designed by Rui Sereno for Significa.

Check it out

rgb() and hsl() accept a 4th parameter

Some good news by Adam Argyle on some revised Color Level 4 syntax for rgb() and hsl().

Check it out

Turn of the Screw

A beautiful Three.js project realized by Lusion: Explore a haunted audio landscape in an immersive trailer for Opera North’s 2020 production of Benjamin Britten’s opera.

Check it out

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

January 16, 2020

Collective #581

Inspirational Website of the Week: NT

On Nathan Taylor’s portfolio everything is interactive! A true digital pleasure. Our pick this week.

Get inspired

Magical Rainbow Gradients with CSS Houdini and React Hooks

A great tutorial by Josh Comeau about a very creative way to animate magical gradients!

Read it

Tiny Helpers

Easily find useful single-purpose online tools on this site made by Stefan Judis.

Check it out

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

Exploring the Web Animations API

Charlie Gerard walks us through a practical Web Animations API example.

Read it

Free Font: JetBrains Mono

A really great looking monospace font made for developers by JetBrains.

Check it out

An Introduction To React’s Context API

In this article, you will learn how to use React’s Context API which allows you to manage global application states in your React apps without resorting to props drilling.

Read it

Design Password

A fun designer-friendly password generator.

Check it out

Dark Isn’t Just a Mode

Steven Hoober takes a look at what it means to be in dark mode, why it exists, and what the research on dark mode says.

Read it

Is reduce() bad?

Jake and Surma discuss the array function reduce() and answer the question if it’s good to use it.

Watch it

The paradox at the heart of A/B testing

Matthew Ström writes about how the fundamental ideas of A/B tests contain a contradiction that calls their value into question.

Read it

CSS4 is here!

Peter-Paul Koch proposes that web developers start saying “CSS4 is here!”, for the marketing effect.

Read it

SVG Pattern Doodler

A fantastic demo by Niklas Knaack where unique art is generated by an algorithm.

Check it out

Masonry layout

An exciting proposal to extend CSS Grid to support a masonry-type layout. By Mats Palmgren.

Check it out

Adding separators to layouts with CSS-in-JS

Mandy Michael writes about how to add separators to a grid using a combination of :not and :nth-child with a pseudo-element.

Read it

beedii

A hand-drawn Emoji set by Nitish Khagwal and Prafful Kumar.

Check it out

I have been underestimating JS

Alfonso de la Rocha shares his experience with digging deeper into JavaScript to have better low-level control.

Read it

Pure CSS dial button

A configurable CSS dial button demo by Jhey Tompkins.

Check it out

Flexbox Responsive Form

Adam Argyle created this responsive form with four potential layouts that is powered by Flexbox.

Check it out

30 seconds of code

What started with short JavaScript snippets has now grown into a snippet collection for all your development needs.

Check it out

From Our Blog

3D Folding Layout Technique for HTML Elements

A tutorial on an experimental 3D layout technique for HTML elements with endless possibilities.

Check it out

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

January 13, 2020

Collective #580

React-three-fiber v4

Read about all the new things coming with this major release of the react-three-fiber library.

Check it out

Progressive Web Apps in 2020

Maximiliano Firtman explores how Progressive Web Apps look like in 2020 and what changes the past year has brought to the ecosystem.

Read it

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

React-spring visualizer

The missing visualizer for your react-spring UI animations. By Joost Kiens.

Check it out

Theme UI Gallery

Theme UI is a library for building “consistent, themeable React apps based on constraint-based design principles”.

Check it out

Understanding CSS Grid: Grid Lines

In this new article series, Rachel Andrew breaks down the CSS Grid Layout specification. This time she shows how to use grid lines to place items.

Read it

Independent transform properties

Dan Wilson on Twitter: “Independent transform properties are now also supported in Firefox 72!”

Check it out

ilithya.rocks

The creative new portfolio site of code artist ilithya.

Check it out

Goodbye, Clean Code

Dan Abramov shares his insights from a “clean code” experience and what he learned along the way.

Read it

Aria Tablist

Zero dependency plain JavaScript module for WCAG compliant tablists. Also great for accordions.

Check it out

Navigating the web with a gamepad

Learn how you can use a gamepad to navigate the web using the gamepad API.

Read it

Why I quit using Google

Kyle Piira explains why and how he got out of the Google ecosystem.

Read it

Emoji brush

An experimental tool that lets you use SVG Emojis as a paint brush. By Yoksel.

Check it out

/uses

A list of /uses pages detailing developer setups, gear, software and configs.

Check it out

Hiding Elements On The Web

An article by Ahmad Shadeed on how to go about hiding elements in HTML & CSS, that covers accessibility, animation and use cases.

Read it

Using easing for more than just CSS transitions

An interesting article on the idea of expanding the easing usage to other things then animations. By Kilian Valkhof.

Read it

Smooth Scrolling Sticky ScrollSpy Navigation

Bramus Van Damme shows how to make a page with a sticky navigation more delightful by adding smooth scrolling.

Read it

Understanding Async Await

Sarah Drasner explains Async/Await and shows how to use it.

Read it

Building a Windows 3.1 application in 2019

A super-fun project for the Super Silly Hackatron by Chen Hui Jing.

Check it out

Performance Budgets, Pragmatically

Harry Roberts shows an off-the-shelf trick for defining performance budgets.

Read it

CSS is Awesome (CSS Motion Path)

A great demo that shows how you can draw along arcs with CSS Motion Path properties.

Check it out

Pure CSS Glitchy Image Reveal

A cool image reveal effect.

Check it out

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

January 9, 2020

Collective #579

Inspirational Website of the Week: Obys

A combination of unique layouts, beautiful elements and smooth animations make Obys stand out.

Get inspired

This content is sponsored via Thought Leaders

Manage projects better in 2020 – Clubhouse.io

“Clubhouse is like a fast and delightful version of Jira, a more purposeful version of Trello.” Free for up to 10 users.

Check it out

The End of Indie Web Browsers: You Can (Not) Compete

Samuel Maddock’s sobering article on the detrimental consequences of the introduction of Encrypted Media Extensions (EME) by the W3C, bringing with it the end of competitive Indie web browsers.

Read it

Smaller HTML Payloads with Service Workers

Philip Walton shares a great technique leveraging Service Workers to decrease HTML payloads.

Read it

All Design Conferences

A great project by Pablo Stanley: a list of all design and front-end conferences around the world in 2020.

Check it out

calcolor.co

A fantastic new way to find, modify and share digital colors. Created by Timon Weber.

Check it out

Let’s Learn Eleventy!

In this episode of “Learn With Jason”, Zach Leatherman shows how Eleventy makes building static sites fast and fun.

Watch it

Why You Should Choose HTML5 <article> Over <section>

In this article, Bruce Lawson explains what use we have of <section> and how authors should mark up headings that are hugely important to AT users.

Read it

EscherSketch

A really nice tool for drawing and exploring symmetrical patterns and designs. It can export pictures, pattern tiles for fabric and wallpaper design, and SVG for further editing.

Check it out

Awwwards Nominees of the Year 2019

Vote for the best of the web in the annual awards by Awwwards.

Check it out

Fun with CSS Motion Path

Michelle Barker shares some fun animations you can do with the new CSS Motion Path properties.

Check it out

Publish

A static site generator built specifically for Swift developers. It enables entire websites to be built using Swift, supporting themes, plugins and more customization options.

Check it out

Whack-a-mole!

Andrew Burton coded this offline-first PWA version of Whack-a-mole for his children. The source code can be found here.

Check it out

Mailchimp’s 2019 Annual Report

The beautiful annual report by Mailchimp that highlights some interesting stats.

Check it out

Multi-Thumb Sliders: Particular Two-Thumb Case

In this two part article, Ana Tudor makes her own version of a multi-thumb slider.

Read it

The Solar System 2010 – 2020

Rob DiMarzo explores the changes the solar system has gone through in the past decade.

Check it out

22120

An archivist browser controller that caches everything you browse, a library server with full text search to serve your archive.

Check it out

The Jam – Swissted

A fantastic GSAP 3 powered demo by Pete Barr where he brings a poster to life.

Check it out

7 CSS properties you had no idea about

A compilation of some really interesting and lesser known CSS properties.

Read it

13 ways to vertical center in 2020

The team of LogRocket shows 13 ways to vertically center an element in CSS. Check out the demos here.

Watch it

From Our Blog

Awesome Demos Roundup #12

A hand-picked collection of fantastic web experiments for your inspiration.

Check it out

From Our Blog

Playing with Texture Projection in Three.js

In this tutorial, you’ll learn how to project a texture onto an object in Three.js with some interesting examples.

Check it out

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

January 6, 2020

Collective #578

Front-End Performance Checklist 2020

A front-end performance checklist with everything you need to know to create fast experiences on the web today.

Check it out

Kinesis

Kinesis lets you easily create interactive animations with Vue.js.

Check it out

Our Sponsor

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

Min and Max Width/Height in CSS

A practical dive into min-width and min-height in CSS by Ahmad Shadeed

Check it out

Sampling bias, FDR, and The State of JS

A very insightful article on sampling bias and why the results of the State of JS survey should be taken with a grain of salt.

Read it

Excalidraw

Excalidraw is a whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.

Check it out

Exifer

A lightweight JavaScript image meta-data reader that can extract EXIF, GPS, XMP & IPTC data.

Check it out

2019: Projects of the Year

A collection of the most beautiful projects made with Readymag.

Check it out

A short history of body copy sizes on the Web

An interesting article on the history of body copy font sizes and the challenges that come with responsiveness.

Read it

Jesper Landberg Portfolio

The fantastic portfolio of creative front-end developer Jesper Landberg.

Check it out

Line Through Effect

A great video tutorial on how to create a cool line through effect with CSS and JavaScript.

Watch it

Get Moving (or not) with CSS Motion Path

Dan Wilson explores some possibilities with the new CSS Motion Path properties.

Read it

Instagram Font Generator

Pick, preview, copy and paste fancy text to use on Instagram and other social networks.

Check it out

Understanding CSS Grid: Creating A Grid Container

In a new series, Rachel Andrew breaks down the CSS Grid Layout specification and takes a detailed look at what happens when you create a grid container.

Read it

Craft.js

A React Framework for building extensible drag and drop page editors.

Check it out

Snowflake painter

A fantastic snowflake creator made by Yoksel.

Check it out

“Watercolor” effect in WebGL

A fantastic WebGL demo made by Robin Delaporte.

Check it out

Another Damn ToDo App in Vue.js

Raymond Camden shares how he built the classic ToDo app in Vue.js.

Check it out

Getting Started with Front End Testing

Amy Kapernick showcases different tests for accessibility, visual regression and end-to-end testing as well as linting.

Read it

Sscaffold

Sscaffold is a modern, lightweight CSS library that builds on Milligram, Skeleton and Normalize.

Check it out

Beautiful React Hooks

A collection of useful React hooks to speed-up your components and hooks development.

Check it out

What is the JAMstack?

A January series of compact articles on JAMstack.

Check it out

The Hidden Treasures of Object Composition

As part of the “Composing Software” series on learning functional programming and compositional software techniques in JavaScript ES6+, Eric Elliott explores the topic of object composition.

Read it

Awesome Mobile Security

An effort to build a single place for all useful Android and iOS security related resources.

Check it out

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

January 2, 2020

Collective #577

Inspirational Website of the Week: Monokai

A unique design with beautiful details and some interesting visual elements.

Check it out

Flash Grid: learn CSS Grid by building a grid system

Join Sebastiano Guerriero in building a lightweight grid system and deepen your understanding of CSS Grid.

Read it

Our Sponsor

Start your freelance business in 2020

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

Start learning now

Mix and Jam

André Cardoso started a gamedev journey and shares it by creating videos and making all of the code available.

Check it out

Things you can do with a browser in 2020

A repo that contains a non exhaustive list of less-known features implemented in browsers today.

Check it out

NBA 3D Data Visualization: 1950–2020

An amazing 3D data visualization of NBA stat totals from 1950 through 2020. Made with React, Three.js and react-three-fiber by Peter Beshai.

Check it out

massCode

MassCode is a free and open source code snippets manager for developers.

Check it out

A Recap of Frontend Development in 2019

A look back at the top events, news, and trends for frontend and web development. By Trey Huffine.

Read it

Everyone has JavaScript, right?

An excellent reminder of how important it is to develop websites with progressive enhancement in mind. By Stuart Langridge.

Check it out

Move Fast & Don’t Break Things

Scott Jehl’s annotated transcript of his 2019 conference talk.

Check it out

Building my bullet journal layout with CSS Grid & Subgrid & Flexbox

A tutorial by Stephanie Stimac on how she built her bullet journal demo.

Read it

5 JavaScript Features I Couldn’t Code Without

In this first article of JavaScript January, Kent Dodds shares the JavaScript features he uses all the time.

Read it

Helping Browsers Optimize With The CSS Contain Property

Learn about the new CSS contain property and how it gives you a way to explain your layout to the browser, so performance optimizations can be made.

Read it

IsoCity

A simple JavaScript city builder with no simulation. By Victor Ribeiro.

Check it out

Why I moved from React to Svelte and others will follow

Mike Nikles’ article about his React experience and thoughts on why Svelte impressed him.

Read it

Neumorphism in user interfaces

Michal Malewicz takes a look at what Neumorphism means for UI design.

Read it

Pure CSS gooey loader #2/ 2020

A fantastic gooey loader made with CSS only by Ana Tudor.

Check it out

Convert2Svg

A free and open-source tool to easily transform any image or photo into a multi-colored SVG file. Created by Vincent Will with Next.js.

Check it out

Bot Land

Bot Land is an automated strategy game where you have to create bots, write scripts, and battle other players.

Check it out

Every Sunrise of 2019

A wonderful project where Bugsy Sailor photographed every sunrise of 2019.

Check it out

From Our Blog

Inspirational Websites Roundup #11

Get a last festive dose of creative website inspiration in this final roundup of 2019!

Check it out

From Our Blog

Case Study: Akaru 2019

In this creative breakdown you will learn how the signature WebGL oil effect of the new Akaru website was created.

Read it

From Our Blog

A Look Back at 2019: Roundup of Codrops Resources

Goodbye 2019! Here’s our traditional yearly roundup with an overview of all Codrops publications from the past year.

Check it out

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

December 26, 2019

Collective #576

Inspirational Website of the Week: Obys

The team of Obys created a very artful portfolio with great typography and layouts using the fantastic gooey and motion hover effects.

Get inspired

Color Theory and Contrast Ratios

A great guide by Christopher Schmitt that will give you valuable insight to the concept of color contrast ratios.

Read it

Our Sponsor

Start your own freelance business in 2020 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

Just JavaScript

Learn the JavaScript mental models in this email series by Dan Abramov. Also, check out his latest article What Is JavaScript Made Of?

Check it out

Flexible Captioned Slanted Images

A master class by Eric Meyer on how to create slanted images using clip-path.

Read it

Bundling JavaScript for Performance: Best Practices

David Calhoun looks at three approaches for bundling a simple React.js app.

Read it

Free Font: MAK

An experimental contrast typeface, inspired by Ukrainian music. By Valentyn Tkachenko.

Get it

RTL Styling 101

An extensive guide on how to style for RTL in CSS by Ahmad Shadeed.

Read it

Acoustic activity recognition in JavaScript

Charlie Gerard shares a prototype of a browser-based acoustic activity recognition system.

Read it

Top Pens of 2019 on CodePen

A collection of the 100 most liked Codepen demos of 2019.

Check it out

Thoughts On Svelte

Some interesting thoughts on why Svelte is becoming so popular. By Dwayne Charrington.

Read it

What a Year of Learning and Teaching Accessibility Taught Me

Sara Soueidan shares some valuable lessons and core values that drive her work on accessibility.

Read it

Generative Placeholders

A really cool placeholder images tool that uses generative art images. By Stefan Bohacek.

Check it out

Porting a JavaScript App to WebAssembly with Rust

The first part in a series on how to do a complete port of a web application from React+Redux written in JavaScript to WebAssembly (WASM) with Rust.

Read it

ImTui

ImTui is an immediate mode text-based user interface library. Check out the Hacker News terminal example.

Check it out

This is my new favorite (free) programming tool – GitHub Actions Tutorial

A practical video tutorial by Kristian Freeman where he explores the what, the why, and the how of GitHub Actions.

Watch it

chl.li URL shortener

A simple, modern, free and privacy-friendly URL shortener.

Check it out

Krabby

Krabby is a web extension (for Chrome, Firefox and surf) for keyboard-based navigation, inspired by Kakoune.

Check it out

Accessibility tools for designers and developers

A guide by Lisa Dziuba with accessibility testing tools, color contrast checkers and color blindness simulators.

Check it out

How tracking pixels work

Julia Evans explains how advertisers track people on the internet using tracking pixels.

Read it

Color Picker From Image

A tool that generates a color palette from an image with a color picker.

Check it out

From Our Blog

How to Create the Apple Fifth Avenue Cube in WebGL

A tutorial on how to re-create the Apple Fifth Avenue Cube animation using WebGL.

Read it

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

December 19, 2019

Collective #575

Inspirational Website of the Week: CANALS

An exceptional horizontal design that gets elevated by smooth and well timed animations.

Get inspired

This content is sponsored via Thought Leaders

Join the 20,000+ developers who love Clubhouse

“I can’t say enough good things about @clubhouse #ProjectManagement software: flexible & feature-rich, but not bloated.” – Current User

Check it out

The State of JavaScript 2019

This year’s edition of the most valuable survey on the JavaScript ecosystem.

Check it out

Building and deploying modern websites and apps

Guillermo Rauch walks us through all the important steps it takes to build and deploy a cutting-edge website.

Watch it

Making Room for Variation

An excerpt chapter from Yesenia Perez-Cruz’s new book Expressive Design Systems.

Read it

Awesome Design Conferences

The ultimate list of great design conferences all in one place.

Check it out

Dynamic, Date-Based Color with JavaScript, HSL, and CSS Variables

Rob Weychert introduces a rational system for generating thousands of possible color schemes.

Read it

<select> your poison

Sarah Higley takes a closer look at the <select> element and investigates what happens when we try to remake it. Also, check out the second part.

Read it

Steer the Deer

Hello Monday’s awesome Christmas gift: a game where you can fly Santa’s sled. On desktop you can steer the deer using nothing but your hands.

Play it

RegExp match indices

Learn about the new regular expression enhancement in JavaScript, called “match indices”.

Read it

Understanding positioning in CSS

Learn how positioning works in CSS with this illustrated guide by Chen Hui Jing.

Check it out

Crater

Crater is an open-source invoicing app made in Laravel, VueJS and React Native with many useful features.

Check it out

Animate Text on Scroll

Learn how to animate text along a path on scroll using SVG and JavaScript in this video tutorial by Stephen Shaw.

Watch it

SVG Section Divider

Learn how to create SVG section dividers in Illustrator and how to import them into your web project. A video tutorial by Sebastiano Guerriero.

Watch it

Five Interesting Ways to Use Array.reduce() (And One Boring Way)

Chris Ferdinandi shows some cool things you can do with Array.reduce().

Read it

All I Font for Christmas

A typographic holiday calendar where you can unwrap a new font every day.

Check it out

On the origin of cascades

In this talk by Hidde de Vries at dotCSS 2019 you’ll learn how CSS came to be, and how the language’s simplicity and flexibility still make it stand out today.

Check it out

Visualizing Every Pantone Color of the Year

An overview of the 22 Pantone colors picked in the past two decades.

Check it out

Adding Dynamic And Async Functionality To JAMstack Sites

Jason Lengstorf explains how JAMstack sites are great for creating highly dynamic, asynchronous interactions.

Read it

Reimagining Design Systems at Spotify

Read about the idea and motivation behind Encore, Spotify’s new approach to design systems.

Read it

HSL Dimmer Switch

A great example of utilizing HSL with custom properties: a dimmer switch!

Check it out

The Origin Story of Container Queries

Zach Leatherman pins down the origin of the Container Queries idea.

Check it out

From Our Blog

Scroll, Refraction and Shader Effects in Three.js and React

Discover how to use react-three-fiber and combine some common techniques to create a Three.js powered layout with shader effects.

Read it

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

December 16, 2019

Collective #574

Taking The Web Off The Screen

A very inspiring talk by Charlotte Dann on how to bring coding and generative art to the physical realm.

Watch it

Bravo Studio App

An app that lets you turn Figma prototypes into native iOS and Android apps without having to write code.

Check it out

Styled Components, Styled Systems and How They Work

Chris DePaul explains how styled-components and styled-systems operate together.

Read it

Our Sponsor

Work with the Powerful Divi Theme Builder

Learn how you can enjoy complete control over your entire website with the new and powerful Divi Theme Builder.

Check it out

JSON Parser with JavaScript

Tan Li Hau’s step-by-step guide to implementing a JSON parser in JavaScript.

Read it

Happy Hues

Happy Hues is a color palette inspiration site that acts as a real world example of how color palettes can be used in a project. By Mackenzie Child.

Check it out

A Blind System Administrator’s Journey to Microsoft

Ryan Shugart shares his interesting journey to his current position at Microsoft.

Read it

JavaScript Visualized: the JavaScript Engine

Understand the basics of how the JavaScript engine handles human-friendly JS code in this article by Lydia Hallie.

Read it

Raw WebGL

In case you missed it: A great guide that will teach you key data structures and types that are needed to draw in WebGL.

Read it

The Icon Kaleidoscope

Jon Friedman on the amazing project of redesigning over 100 icons for the Microsoft ecosystem.

Read it

CSS 3D transformations & SVG

Nikolas Zimmermann’s great work on enabling CSS 3D transformations in Webkit SVG.

Read it

The Architecture of a Large-Scale Web Search Engine, circa 2019

Another great article in the intriguing series by Cliqz that explores the technology stack they employ that powers their private search products.

Read it

Getting Started with Web Performance

Karolina Szczur explains critical web performance concepts and strategies.

Read it

Tesla Cybertruck in Three.js

A really cool Cybertruck demo by Jon Kantner.

Check it out

Challenging projects every programmer should try

Austin Henley’s suggestions for side projects every programmer should challenge themselves with.

Read it

The Loss Of Micro-Privacy

Adrian Zumbrunnen writes about the impact of messaging apps on our privacy.

Read it

Why <details> is Not an Accordion

Dave Rupert shares some sobering insight on the <details> element he gained when tasked to build an accordion.

Read it

A History of CSS Through Fifteen Years of 24 ways

Rachel Andrew takes a look back at her 24 ways contributions of the past 15 years.

Read it

Experiments in Constraint-based Graphic Design

A very interesting article on a new system called Basalt, a constraint-based graphic design tool that works based on relationships and abstractions. By Anish Athalye.

Read it

Develop, Debug, Learn? A time to re-think our tooling.

Chris Heilmann’s write-up of his talk at DotJS Paris.

Read it

20 ways to become a better Node.js developer in 2020

Some useful advice on how to get better at developing with Node.js by Yoni Goldberg.

Read it

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

December 12, 2019

Collective #573

Inspirational Website of the Week: Plink

Super-smooth animated models make Plink such a great browsing experience. Our pick this week.

Get inspired

This content is sponsored via Thought Leaders

Clubhouse: efficient teamwork, without silos

Clubhouse is the first software project management platform that brings everyone on every team together to build better products.

Try it Free

Interactivity and Animation with Variable Fonts

Some fantastic examples of creative experiments with variable fonts by Mandy Michael.

Read it

Write three.js in React Using react-three-fiber

A great tutorial by Robert Borghesi on how to change one’s approach of writing 3D using three.js, leveraging React and using the react-three-fiber library.

Read it

Drawing Homer Simpson using circles in CSS

Read how Alvaro Montoro drew Homer Simpson in CSS, using only circles.

Read it

Leonardo: an open source contrast-based color generator

Read all about Leonardo, a color generator that helps with creating beautiful, accessible, and adaptive color systems using contrast-ratio based generated colors.

Read it

7 Uses for CSS Custom Properties

Some clever and useful examples of how to take advantage of CSS variables. By Michelle Barker.

Read it

No to Chrome

It’s important to raise awareness about the surveillance machine Google has become and “No to Chrome” is an attempt to do so by urging to seek out a better web browser as a simple first step to oppose Google’s intrusive disregard for our rights.

Check it out

Spiral generator

A very nice spiral shape generator by Fabio Ottaviani.

Check it out

Game accessibility and the Web

Learn what accessible games are and how to use assistive technologies for games compiled to the web. By Matthew Atkinson.

Read it

Z’s Still Not Dead Baby, Z’s Still Not Dead

Andy Clarke encourages us to move beyond flatness and shows five CSS properties which help bring depth and richness to a design.

Read it

React View

React View is a set of tools that aspires to close the gap between users, developers and designers of component libraries.

Check it out

Building A CSS Layout: Live Stream With Rachel Andrew

Rachel Andrew talks about how to build a CSS layout using Grid and Flexbox.

Check it out

Learning Modern JavaScript with Tetris

Michael Karén writes about the basics in game development by the example of the classic game of Tetris.

Read it

It’s Centred That

The festive Christmas edition of the epic design challenge.

Check it out

The Complete Guide to JavaScript Classes

Learn all about JavaScript classes in this guide by Dmitri Pavlutin.

Read it

SVG clip-path masking effect

Niklas Knaack’s dynamic clip-path experiment.

Check it out

Cybertruck with Babylon.js

Hitesh Sahu created this fantastic demo of a cybertruck using Babylon.js.

Check it out

The unseen performance costs of modern CSS-in-JS libraries in React apps

Aggelos Arvanitakis aims to demystify the high-level strategies of the most popular CSS-in-JS libraries and discusses the performance issues they may introduce along with techniques to mitigate them.

Read it

WOOBRO.design

High-quality vector illustrations free for commercial or personal use.

Check it out

From Our Blog

Building a Physics-based 3D Menu with Cannon.js and Three.js

Learn the basics of doing physics in WebGL by building a 3D menu with Cannon.js and Three.js as renderer.

Check it out

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

December 9, 2019

Collective #572

Accessibility Tips for Web Developers

Addy Osmani writes about the six key areas of disability we can optimize for: visual, hearing, mobility, cognition, speech and neural.

Read it

This content is sponsored via Thought Leaders

User flows done right.

Enhance design presentation and collaboration with Overflow, the world’s first user flow diagramming tool for product design teams!

Start 30-day free trial

Techniques for Rendering Text with WebGL

Daniel Velasquez’s great guide to text rendering techniques in WebGL.

Read it

Calculating Color: Dynamic Color Theming with Pure CSS

Read how with the magic of CSS Custom Properties, HSL colors, and some calc() fun, you can create custom theming with no dependencies. By Una Kravets.

Read it

Browser Default Styles

A great tool that lets you search against any element for standardized and default styles from all major rendering engines (WebKit, Blink, Gecko, Trident).

Check it out

Building a search engine from scratch

Read about the challenges involved in creating an alternative web scale search engine. By the Cliqz team.

Read it

Accessibility Testing by People with Disabilities

Some great insight into how to ensure accessibility by employing accessibility experts of all abilities to perform accessibility review and testing.

Read it

NanoNeuron

NanoNeuron is a set of seven simple JavaScript functions that will give you a feeling of how machines can actually “learn”.

Check it out

Responsive images

Addy Osmani encourages us to use responsivebreakpoints.com for creating responsive images fast.

Check it out

Infinite draggable WebGL slider

An amazing WebGL slider demo by Jesper Landberg.

Check it out

Waves

A beautiful demo of a wave by Louis Hoebregts that changes with the mouse move.

Check it out

Beautiful Scrolling Experiences – Without Libraries

Michelle Barker explores the new CSS features for scrolling.

Read it

Sentence lengths

Amelia Wattenberger’s experiment where you can visually explore how authors vary sentence lengths.

Check it out

AnonAddy

With AnonAddy you can create unlimited aliases for free and protect your email from spam using disposable addresses.

Check it out

How to fight back against Google AMP as a web user and a web developer

Marko Saric lists some steps to oppose Google AMP.

Read it

Use view matrix outside WebGL (calculate displaced surface normals)?

An interesting thread on how to work with normals and perlin noise in react-three-fiber.

Check it out

Fretboard learning

A really nice game and tool that helps you learn the notes of your fretboard (PWA).

Check it out

Flynt

Flynt is a powerful, component-based WordPress starter theme for developers.

Check it out

Matestack

In case you haven’t heard about it: Matestack can help you rapidly create interactive UIs in pure Ruby.

Check it out

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

December 5, 2019

Collective #571

Inspirational Website of the Week: Esperanto

A fantastic interactive design that celebrates an exciting journey. Our pick this week.

Get inspired

CSS: An Art, a Science, a Nightmare (Everything You Should Know)

In this excellent guide, Tania Rascia covers the practical parts of CSS that are important on a daily basis.

Read it

Our Sponsor

Work with the Powerful Divi Theme Builder

Learn how you can enjoy complete control over your entire website with the new and powerful Divi Theme Builder.

Check it out

CSS Layout

A fantastic collection of popular layouts and patterns made with CSS. Made by Phuoc Nguyen.

Check it out

Advent of Code 2019

Advent of Code is an Advent calendar of small programming puzzles for a variety of skill sets and skill levels that can be solved in any programming language you like.

Check it out

Use CSS Subgrid to layout full-width content stripes in an article template

Learn how to augment a Grid-infused article layout that allows for certain sections of content to break out into full-width areas.

Read it

An Introduction to Variable Fonts

An excellent guide to variable fonts by Jason Pamental.

Read it

Music and Web Design

Brad Frost’s interesting thoughts on the parallels between Music and Web Design.

Read it

Web Components and the Accessibility Object model (AOM)

Léonie Watson writes about the AOM, an experimental JavaScript API that proposes several new features intended to solve existing accessibility use cases.

Read it

DrumBot

Play real-time music with a machine learning drummer that drums based on your melody. Read more about it in this article.

Check it out

Binary Music Player

A musical player, with a binary twist. Built by Tim Holman using Tone.JS.

Check it out

Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components?

Drew McLellan talks to Smashing author Heydon Pickering about Inclusive Components.

Check it out

The State of UX in 2020

An insightful list of what to expect for User Experience (UX) Design in the next year.

Check it out

Make a smooth shadow, friend

A smooth shadow generator inspired by Tobias Ahlin’s article. By Philipp Brumm.

Check it out

Re-creating the ‘His Dark Materials’ Logo in CSS

Michelle Barker re-creates an interesting typographic logo with CSS.

Read it

Firefox 71: A year-end arrival

A plethora of new developer tools features including the web socket message inspector, console multi-line editor mode and more are coming in the new Firefox version.

Check it out

Holiday CSSweater Generator

A great CSS pattern generator with a geeky Christmas theme. By Adam Kuhn.

Check it out

Interactive Hippo Button

A fun button that looks like a hungry Hippo. By Mariusz Dabrowski. Check out the written and video tutorial.

Check it out

From Our Blog

Awesome Demos Roundup #11

A hand-picked collection of fantastic web experiments from the past weeks.

Check it out

Piano keyboard

An awesome Codevember demo by Ricardo Oliva Alonso.

Check it out

From Our Blog

Motion Paths – Past, Present and Future | Codrops

An article by Cassie Evans that explores a few ways of moving an element along a path, including the upcoming CSS motion path module and the newly released GSAP3.

Read it

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

December 2, 2019

Collective #570

Lighthouse CI

Lighthouse CI is a set of commands that make continuously running, asserting, saving, and retrieving Lighthouse results as easy as possible.

Check it out

Our Sponsor

The Divi Cyber Monday Sale 2019

If you are waiting for the perfect time to join the Divi community or the best time to upgrade your current account to Lifetime, this is it! Don’t miss your chance because a better deal than this doesn’t exist!

Get the deal

Making a Better Custom Select Element

Julie Grundy shares how to create a custom select input and make it accessible.

Read it

Bekk Christmas

Bekk is creating twelve calendars, each with daily content, articles and podcasts around front-end, coding, UX and more.

Check it out

Blocks UI

A JSX-based page builder for creating beautiful websites without writing code. It’s currently in early alpha and only supports a constrained subset of JSX source code.

Check it out

Highlights From Building a Magazine Layout

Some great insights into re-creating a print magazine layout. By Ahmad Shadeed.

Read it

19′ Codevember

Corentin Bernadou’s awesome Codevember experiments.

Check it out

Diagram.Codes

A tool that lets you describe diagrams with a simple text language and automatically generate exportable images.

Check it out

Pico-8: Advent Calendar 2019

Twenty-five different surprises are awaiting you on Pico-8 this month, each made by a different developer. The first one is the UFO Santa Candy Blaster.

Check it out

Blooom

An experimental project by Tom Pickering to showcase his exploration of modern web technologies through creative coding.

Check it out

Dealing with Ads in 2020

Christian Schaefer shares how to deal with ad integration without losing your sanity.

Read it

Patchbay

Patchbay.pub is a free web service you can use to implement things like static site hosting, file sharing, cross-platform notifications, and much more.

Check it out