Pedro Botelho | The Blog Pros

January 27, 2020

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

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 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 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

Project X

Project X is a simple tool for composing JavaScript behavior in your markup.

Check it out

What’s the next UI design trend?

Michal Malewicz’s thoughts on what trends might be coming for UI design.

Read it

Creating the Martin Luther King jr. Handwriting Font

The fascinating project of creating a font based on the handwriting of Martin Luther King. By Harald Geisler.

Check it out

Pure CSS Koi Fish

A beautiful demo by Adir.

Check it out

DevTools as the ultimate CSS advocate

Read why Chen Hui Jing thinks that DevTools can become the ultimate CSS advocate.

Read it

Semantic sidenotes for the web

Koos Looijesteijn writes about how sidenotes are surprisingly hard to do well in HTML.

Read it

Bruno Simon: Cybertruck version

Remember Bruno Simon’s awesome portfolio? Now he did a Cybertruck version for it

Check it out

Hide Likes Everywhere

This is very interesting: Hide likes and other vanity metrics for a more authentic online experience.

Check it out

GooFonts

Find Google Fonts based on hand-crafted tags with this handy tool.

Check it out

Fibery

A fun way to present a product: Fibery’s “honest” landing page. They actually have a pretty cool tool.

Check it out

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

November 28, 2019

Collective #569

Inspirational Website of the Week: Limnia

A true masterpiece that brings together modern elegance and sophisticated interactions.

Get inspired

This content is sponsored via Thought Leaders

Remote teams? Get on Clubhouse.

Easily collaborate with anyone in your organization and focus on what matters: building products that customers love, together.

Check it out

Case Study: lynnandtonic.com 2019 refresh

An excellent case study by Lynn Fisher on the process behind the 2019 redesign of her portfolio.

Read it

How to Overlap Images in CSS

A great article by Bri Camp Gomez where she shows how to overlap images with CSS Grid and provide a fallback for non-supportive browsers.

Read it

Flowy

Alyssa X made this minimal JavaScript library for creating beautiful flowcharts.

Check it out

How I created 488 “live images”

Ire Aderinokun shares how she created “live images” for each feature on caniuse.com.

Read it

Does JavaScript keep you too busy to care about CSS? Here are recent features you want to know about!

Pawel Grzybek recaps some new and interesting features that are available in CSS.

Read it

The Third Generation of Interfaces

Dzianis Pomazau writes about what the next generation of interfaces might be.

Read it

Using CSS custom properties to reduce the size of your CSS

Learn how to use CSS custom properties to create abstractions and optimize your CSS in this article by Sebastiano Guerriero.

Read it

CSS Architecture for Modern JavaScript Applications

Mike Riethmuller explorations into modernizing learnings from CSS architecture and how to apply them in the context to modern JavaScript applications.

Read it

Checklist to avoid the most common accessibility errors

Bruce Lawson gives some practical tips on how to avoid the most common accessibility errors.

Check it out

Machine Learning Systems Design

A booklet on machine learning systems design with practical exercises.

Check it out

AppLibsList

A categorized collection of trending and most commonly used libraries and components for ReactJS developers.

Check it out

Accessibility drives aesthetics

In this article Alex Chen rebuts the claim that accessibility and aesthetics are at odds with each other.

Read it

From Milliseconds to Millions: The Numbers Driving Web Perf

At this talk Harry Roberts takes a look at some of the numbers powering the web performance industry.

Watch it

Peekobot

Peekobot is a simple choice-driven chatbot framework in less than 100 lines of JavaScript. Made by Ross Wintle.

Check it out

The Benefits of Orthogonal React Components

Learn how striving for orthogonality in React component design can help make a system flexible and adaptable to change.

Read it

Who Can Use

Find out who can use your color combination by checking the WCAG grading and contrast ratio.

Check it out

Animated CSS Background Generator

Vincent Will created this neat customizer of animated CSS backgrounds.

Check it out

Realistic 3D Photo Cards (Hover Effect, Vue.Js)

A beautiful demo by Jouan Marcel.

Check it out

From Our Blog

Creating a Distorted Mask Effect on an Image with Babylon.js and GLSL

Learn the basics of GLSL while creating a distorted mask effect on images using Babylon.js.

Read it

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

November 25, 2019

Collective #568

Global Design Survey 2019

Explore the data behind designer salaries, career trends, and what’s next for your design discipline in these design survey results by Dribbble.

Check it out

Our Sponsor

Are you going to miss these Black Friday deals for designers and devs?

At last – these awesome tools and resources for designers are at a discounted price. Don’t let them slip through your fingers. They’re available for a limited time.

Grab them now!

Cockatiel

A resilience and transient-fault-handling library that allows developers to express policies such as Backoff, Retry, Circuit Breaker, Timeout, Bulkhead Isolation, and Fallback. Inspired by .NET Polly.

Check it out

Creepyface

A JavaScript library that makes your face look at the pointer.

Check it out

Scaling SVG Elements

Amelia Wattenberger explains the basic principle behind scaling SVG elements.

Check it out

Request with Intent: Caching Strategies in the Age of PWAs

Aaron Gustafson dives into modern media caching strategies and shows how to use some Cache API tricks of Service Workers.

Read it

Design APIs: The Evolution of Design Systems

Matthew Ström’s exploration of how an API for design decisions works.

Read it

How To Run a Proxy Server Inside Your Browser

Danny Moerkerke explains how you can run a proxy server in your browser using just a service worker.

Read it

Quanta Magazine

A wonderful case study of one of the latest projects by Dogstudio.

Check it out

HexaBeat

HexaBeat is a sequencer using commits from GitHub to make beats.

Check it out

Complex Search-Results Pages Change Search Behavior: The Pinball Pattern

Read why users distribute their attention more variably across a search result page than in the past.

Read it

Avoiding jagged edges on gradients

In case you missed it: Mandy Michael’s tip on how to achieve smooth gradients in CSS.

Check it out

CSS Containment Module Level 1 is a W3C Recommendation

The CSS WG has published the CSS Containment Module Level 1 as a W3C Recommendation. It describes the contain property, which indicates that the element’s subtree is independent of the rest of the page.

Check it out

Print To CSS

Dan Davies recreates some print work using CSS Grid.

Check it out

Fit on a Floppy

A tool for determining if your webpage can fit on a 3.5 inch floppy disk.

Check it out

Pure CSS CYBRTRK

Jhey Tompkins recreated the new Tesla Cybertruck in this awesome demo.

Check it out

Creating complex layouts using CSS Grid

A practical tutorial on how to create a complex layout using CSS Grid. By Sush Kelly.

Read it

Masked areas in SVG using GIFs

Cassie Evans shows a magical method for creating masked areas in SVGs.

Check it out

Blader Runner

Ricardo Cabello’s awesome Three.js Blade Runner demo. View the source code here.

Check it out

Simplifying code with Maps in JavaScript

Oleksandr Khomenko explains how to refactor a component using maps in JavaScript.

Read it

BodyPix: Real-time Person Segmentation in the Browser with TensorFlow.js

Read all about BodyPix 2.0 that now comes with a new API, multi-person support and improved accuracy.

Read it

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

November 21, 2019

Collective #567

Inspirational Website of the Week: It’s not violent

A fantastic sharp design that gets the message across using “textversation”. Our pick this week.

Get inspired

Instanced Line Rendering

Rye Terrell shows how to tackle lines in WebGL using instanced line rendering.

Read it

Our Sponsor

Black Friday Is Coming

Not only do you get the best deal ever on Divi memberships and upgrades, but you can also win a Mac Pro worth over $6,000!

Enter now

Adaptive Loading – Improving Web Performance on low-end devices

Addy Osmani explains how to use Adaptive Loading optimally to allow users get an experience best suited to their constraints.

Read it

Lite YouTube Embed

A YouTube embed that renders much faster than a normal embed. By Paul Irish.

Check it out

Pika Registry

Pika is a new kind of package registry and code editor for package authors. Open for early access.

Check it out

Framer – Web Beta

Exciting news from Framer: Framer will offer a web-based collaborative version and you can request a beta invite now.

Check it out

Alex Pierce – Designer. Art Director. Geek.

Alex Pierce’s portfolio is a unique example of “maximalism” that leverages color, bold typography, motion, and pixel art to deliver a surprising and delightful user experience.

Check it out

Highlights from Chrome Dev Summit 2019

Ire Aderinokun’s roundup article that highlights the most interesting ideas and projects from the Chrome Dev Summit 2019.

Read it

Building a Football Ticket With CSS and SVG

Learn some advanced CSS techniques from this tutorial by Ahmad Shadeed.

Read it

Cube.js Templates

Cube.js templates are open-source, ready-to-use frontend analytics apps.

Check it out

Illlustrations

A set of 100 free illustrations made by Vijay Verma.

Check it out

SVG favicons

An exciting tweet by Mathias Bynens: you can use SVG for a favicon in Chrome now.

Check it out

The Firefox UI is now built with Web Components

An interesting article by Brian Grinstead on how the Firefox UI was migrated to modern web standards.

Read it

What are Microservices?

Sarah Drasner breaks down the term of Microservices.

Read it

Lynn Fisher Portfolio

Lynn Fisher’s awesome new portfolio has a super cool resize effect!

Check it out

Tetris & Snake

Can you play Tetris and Snake at the same time? Try it in this cool experiment by Grégoire Divaret-Chauveau.

Check it out

LegraJS

Legra is a small JavaScript library that lets you draw LEGO like brick shapes on an HTML canvas element.

Check it out

Password Guide

A fantastic little checklist for a password input by Andreas Storm.

Check it out

Multiple-column Layout and column-span in Firefox 71

In this post Rachel Andrew takes a look at the implementation of the column-span property.

Read it

From Our Blog

Inspirational Websites Roundup #10

Get some website inspiration with this set of beautiful and modern site designs freshly picked over the past few weeks.

Check it out

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

November 18, 2019

Collective #566

SWR: React Hooks for Remote Data Fetching

SWR is a React Hooks library for remote data fetching. SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again.

Check it out

Gifolio

Gifolio is a brilliant collection of design portfolios presented using animated GIFs. By Roll Studio.

Check it out

Our Sponsor

Become a Divi developer and change your life

Learn how to develop websites with the most popular WordPress theme in the world and start your own freelance business.

Start learning now

Masks

An interactive presentation on masking techniques originally created for a Creative Front-end Belgium meetup hosted by Reed. By Thomas Di Martino.

Check it out

How to Use Color Blind Friendly Palettes to Make Your Charts Accessible

A guide to color blindness and how to use color blind friendly palettes for charts to make them more accessible.

Read it

Responsible JavaScript: Part III

The third part of an article series on responsible JavaScript by Jeremy Wagner.

Read it

Supermaya

Supermaya is an Eleventy starter kit designed to help you add rich features to a blog or website without the need for a complicated build process.

Check it out

Dark Mode

Varun Vachhar shares the challenges he encountered when migrating from Jekyll to Gatsby related to dark mode.

Read it

Pure CSS Russian Bears

An adorable Russian doll demo by Jhey Tompkins.

Check it out

CSS Logical Properties

Adrian Roselli shares different approaches to get his head around CSS logical properties.

Read it

Announcing GitHub Security Lab: securing the world’s code, together

GitHub announced GitHub Security Lab to bring together security researchers, maintainers, and companies across the industry for contributing tools, resources and research with the aim to secure the open source ecosystem.

Read it