Pedro Botelho | The Blog Pros

February 11, 2021

Inspirational Website of the Week: Universal Favourite

This studio’s website has a slick and sexy design with many lovely details.

Our Sponsor

Beautifully designed workspaces for data import

Collaborative workspaces built for customer data onboarding. Import, format & merge messy spreadsheets with Flatfile Concierge. Best of all? No code required.

Get access

CSS transitions and hover animations, an interactive guide

A comprehensive guide about CSS transitions which takes a look at the fundamental building blocks we need to create microinteractions and other animations.

Read it

Fluid typography with CSS clamp

Learn to create a simple, accessibility friendly and configurable fluid type system that uses modern CSS sizing functions.

Read it

Why I Still Use RSS

Read why the Internet, and what it stood for, peaked with RSS, and why you should use it.

Read it

About Us Pop-Out Effect

A great effect using clip-path: path() by Mikael Ainalem.

Check it out

Graxel

A pocket doodling editor in pixel art made by Max Wellito.

Check it out

Prefers-contrast: forced is a mistake

Kilian Valkhof explains why he feels that prefers-contrast: forced is a mistake in the making.

Read it

Sharing data between CSS and JavaScript using custom properties

Christian Heilmann shows how to manipulate CSS custom properties with JavaScript.

Read it

Developing a performant custom cursor

A great article by Stefan Vitasovic on how to implement a custom cursor the right way.

Read it

Tiny Blocks

Tiny Blocks is a curated collection of inspiring user interfaces from the web.

Check it out

Finding an Element’s Nearest Relative Positioned Ancestor

Michelle Barker shows how to find the nearest positioned parent in JavaScript, right in the browser console.

Read it

Interactive particles text create with three.js

A very nice particle effect on a text made by Ricardo Sanprieto.

Check it out

BitmapFonts

A gigantic collection of bitmap fonts pulled from various demoscene archives over the years.

Check it out

Same Energy

Jacob Jackson has been working on a visual search engine called Same Energy for the past couple of months. Give it a try, it’s amazing!

Check it out

Clipping Scrollable Areas On The inline-start Side

A note regarding how the browser deals with clipping scrollable areas on the block-start and inline-start sides.

Check it out

Obstacles

A supercool Three.js and Cannon.js demo by Ion Drimba Filho.

Check it out

The home of Can You Draw a Perfect Circle?, Hit the High Notes, Kick the Ball Back, Programming Language Inventor or Serial Killer?, ButtyStock, Goth or Moth? and oodles more. Formerly known as ‘malevole’.

Check it out

Uniwidth typefaces for interface design

A short, handy compilation of uniwidth typefaces by Lisa Staudinger.

Check it out

Underwater

A beautiful water effect made by Ko Yelie. Another great demo is Shooting Star.

Check it out

Haven: Host your own private blog

With Haven (formerly SimpleBlog), you choose who gets to see your website instead of trusting a big company to control who gets access on your behalf.

Check it out

Form.taxi

Submit your web forms with form.taxi — no programming, PHP scripting, or FormMailer required. Free for small websites.

Check it out

My 90’s TV

Go back to the 1990’s via this nostalgic TV simulator and relive the original ads, music videos, movie trailers, shows and more!

Check it out

Loudreader

The Web’s only usable ebook reader inside a browser.

Check it out

From Our Blog

UI Interactions & Animations Roundup #14

Some selected animation shots that explore experimental and modern ideas for interactions on the web.

Check it out

From Our Blog

Simple CSS Line Hover Animations for Links

A couple of simple & subtle CSS-based line hover animations for links.

Check it out

The post Collective #648 appeared first on Codrops.

February 4, 2021

Collective #647

Inspirational Website of the Week: CCNCN – Saison 2021

A fresh design with great typography and a daring, addicting click interaction concept. Our pick this week.

Get inspired

Our Sponsor

Blockchain domains are owned, not rented

Blockchain domains are stored by their owners in their wallet like a cryptocurrency, no third party can take them away. Pay once and you own the domain for life, no renewal fees. Get your .crypto or .zil domain now.

Check it out

Creative Good: Why I’m losing faith in UX

Read why Mark Hurst thinks that UX is now “user exploitation”.

Read it

New aspect-ratio CSS property supported in Chromium, Safari Technology Preview, and Firefox Nightly

Maintaining aspect ratio within images and elements is now easier to achieve with the new aspect-ratio CSS property.

Read it

Things You Can Do With CSS Today

Andy Bell looks into masonry layout, :is selector, clamp(), ch and ex units, updated text decoration, and a few other useful CSS properties.

Read it

We Value Your Privacy (At About $0.50): Dark Patterns in UI Copy 2021

Read how shady euphemisms are employed to trick users into handing over personal data, and manipulative descriptions continue to deceive people. By Graeme Fulton.

Read it

SVG Waves

A handy SVG wave generator made by Bereket Semagn.

Check it out

Mutsuacen

A great little tool to create animated and interactive drawings.

Check it out

Fusuma

A tool to create slides from Markdown.

Check it out

Crunk dancer

An amazing music web experiment by Arno Di Nunzio. Made with Three.js and Cannon.

Check it out

Faking container queries with CSS Grid

With CSS Grid and some trickery it’s possible to implement something very close to container queries.

Read it

Le Voyage Azarien

A beautiful immersive journey into a forest made by Joseph Azar.

Check it out

Making GitHub’s new homepage fast and performant

The third article in a five-part series on building GitHub’s new homepage.

Read it

Iconduck

Iconduck lists over 100,000 free open source icons, illustrations and graphics from around the web. They can be used for personal and commercial projects.

Check it out

CSS Polygon Shapes

Tweakable shapes generated with css-doodle and clip-path. By Yuan Chuan.

Check it out

ReacType

If you didn’t know about it yet: ReacType is an open-source application that assists developers in prototyping React applications via a user-friendly drag-and-drop interface.

Check it out

Supercons

A friendly open source React iconset by Lachlan Campbell.

Check it out

How-to: Use the tabindex attribute

Learn why and how to use the tabindex attribute in this article by Eric Bailey.

Read it

Continuous Typography Tester

A prototype of a design tool for continuous typography made by Max Kohler. Read more about it here.

Check it out

Don’t use functions as callbacks unless they’re designed for it

Jake Archibald shows why functions shouldn’t be used as callbacks unless they are designed for it.

Read it

GutenSearch

Find any term in the wast body of Project Gutenberg books.

Check it out

Gaze-controlled keyboard

Write words using your eye movements. Built with Tensorflow.js

Check it out

Skateboard Video Platform

A beautiful UI coded by Aysenur Turk.

Check it out

Droste Creator

Create recursive images with the droste effect using this cool tool. Made by Javier Bórquez.

Check it out

Barebones CSS for Fluid Images

Zach Leatherman’s CSS tip for fluid images.

Check it out

Svelte Kit, the first ‘serverless-first’ framework?

Jasper Moelker tested out Svelte Kit and summarized what he learned.

Read it

Introducing Pika. A free, open-source colour picker app

Learn about Pika, an easy to use, open-source, native colour picker for macOS.

Read it

From Our Blog

How to Code the Traveling Particles Animation from “Volt for Drive”

A coding session where you’ll learn how to implement Volt for Drive’s traveling particles animation with Three.js.

Check it out

From Our Blog

Rotating Loading Animation of 3D Shapes with Three.js

Check it out

The post Collective #647 appeared first on Codrops.

January 28, 2021

Collective #646

Inspirational Website of the Week: Aurélia Durand

We just love how unique this design is and how much personality it has. An explosion of colors and creativity.

Get inspired

Our Sponsor

Become a Software Engineer, job guaranteed.

Ready to master software engineering or switch to a career as a software engineer? Gain the skills you need with Springboard’s Software Engineering Bootcamp.

Learn More

The styled-components happy path

An article where Josh W Comeau shares his personal “best practices” when it comes to styled-components.

Read it

Houdini Paint Dojo

A small project with 0 external dependencies to explore the emerging CSS Houdini Paint API. Check out the GitHub repo. By Georgi Nikolov.

Check it out

Luis Henrique Bizarro’s portfolio

The repository of Luis Henrique Bizarro’s portfolio made entirely with plain JavaScript code using ECMAScript 2015+ features without any frameworks.

Check it out

Form Validation: You want :not(:focus):invalid, not :invalid

Learn how you can perform validation only when a field is not being edited anymore.

Read it

How We Improved SmashingMag Performance

In this article, you’ll learn about the changes made on Smashing Magazine — running on JAMStack with React — to optimize the web performance and improve the Core Web Vitals metrics.

Read it

The importance of `@font-face` source order when used with preload

A small change in the ordering of your font sources in the `@font-face` rule can have a big impact on data and web performance. An article by Matt Hobbs.

Read it

Snowflake Generator

An interactive WebGL snowflake generator made by Vivian Wu.

Check it out

Building a sidenav component

A foundational overview of how to build a responsive slide out sidenav. By Adam Argyle.

Read it

Cell fracture

Paul Henschel plays with blender and cell fracture.

Check it out

The unreasonable effectiveness of simple HTML

Terence Eden urges to ask the important question “how easy is it to use the websites you’ve created?”

Read it

Enabling Popups

An idea to extend the web platform with popups by the Microsoft Edge team.

Check it out

The Minimum Content Size In CSS Grid

Ahmad Shadeed walks us through an issue he faced that is related to the minimum content size in CSS grid.

Read it

Webcam x Dices

A great dice effect made by Louis Hoebregts.

Check it out

HTML and CSS still isn’t about painting with code

Christian Heilmann shares his experience in explaining what HTML and CSS is about.

Read it

Add scroll margin to all elements which can be targeted

A quick tip on how to add an extra bit of space to targeted elements.

Read it

How to design highly performant animations and micro-interactions

In this post, you can learn how to design highly performant animations and micro-interactions to improve the UX of your site.

Read it

Wldlght

Follow an amazing journey in Japan with this projection mapping project, Wldlght.

Check it out

How to avoid layout shifts caused by web fonts

Late-loading web fonts can be a main cause of layout shifts. Simon Hearne shows how to optimize them.

Read it

Building an Audio Player With React Hooks

Discover how to build an audio player using React and the HTMLAudioElement interface.

Read it

Re-Creating the Porky Pig Animation from Looney Tunes in CSS

Learn how to make Porky Pig come out of those red rings. By Kilian Valkhof.

Read it

Thinking outside the box model for GUI design

From a while back: This article investigates why and how the box model in GUIs limits users, UI/UX designers, and developers – and how we can do better to improve usability.

Read it

Formality

A designless, multistep, conversational, secure, all-in-one WordPress forms plugin.

Check it out

From Our Blog

Awesome Demos Roundup #19

A large collection of fantastic web experiments and demos that were made in the past couple of weeks.

Check it out

From Our Blog

Recreating Frontier Development Lab’s Sun in Three.js

Learn how to create a 3D sun with Three.js in this coding session.

Check it out

From Our Blog

Twisted Colorful Spheres with Three.js

Learn how to deform and color spheres to create an interesting animation with Three.js.

Check it out

From Our Blog

Inspirational Websites Roundup #22

A collection of fresh websites with brilliant designs to get you updated on the current trends.

Check it out

The post Collective #646 appeared first on Codrops.

January 21, 2021

Collective #645

Inspirational Website of the Week: Myriad

A brilliant design with lots of unique details and beautiful micro-effects. Our pick this week.

Get inspired

Our Sponsor

Instant websites for your clients with Divi Layout Packs

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

Check it out

State of JS 2020 Results

The results of the annual survey about the latest trends in the JavaScript ecosystem are out.

Check it out

JPEG.rocks

A browser-based, privacy-aware JPEG optimizer.

Check it out

Creating comic book speech bubbles with SVG and JavaScript

A great tutorial by Paul Spencer on how to create SVG speech bubbles with text.

Read it

My Favorite Typefaces of 2020

After a decade, ILT’s annual Favorite Fonts list is back. The top-ten favorite typefaces is now joined by another 50 typefaces in the extended Honorable Mentions list.

Read it

Aronian

A beautiuful exposé for chess player Levon Grigori Aronian.

Check it out

Noise Planets

Atul Vinayak studies and replicates some generative line artwork by Tyler Hobbs using p5js.

Read it

A developer’s perspective: the problem with screen reader testing

Jake Tracey asks “what should be the baseline in terms of testing for screen readers, and what browser and screen reader combinations are the most important to cover in order to achieve the greatest level of WCAG compliance?”

Read it

In Critical Defense of Frontend Development

Jens Oliver Meiert on how the field of frontend development is in another crisis and what we can do to fix it.

Read it

React-three-fiber and GSAP demo

A fantastic demo by Fabio Ottaviani.

Check it out

Responsible Web Applications

Some tips for creating applications that are both responsive and accessible out of the box. By Joy Heron.

Read it

Understanding Clip Path in CSS

Learn everything about CSS clip-path, how it works, with examples and use-cases. By Ahmad Shadeed.

Read it

Maintaining JavaScript applications in the long term

A very interesting case study on how 9elements enhanced and refactored a client project over six years.

Read it

Why Tailwind Isn’t for Me

Jared White shares why he’s not very enthusiastic about Tailwind CSS.

Read it

Nested Media Queries

Great tip by Bramus regarding nesting media queries.

Check it out

Comparison between web browsers

A web browser ranking that is based on how much Privacy a browser offers by default, as well as, how much privacy can be gained by configuring it.

Check it out

Synesthesia

A beautiful demo of the cool audio-visual synthesizer.

Check it out

Text warping – Animated

A super cool text warping demo by Lokesh Dhakar.

Check it out

From Our Blog

Drawing 2D Metaballs with WebGL2

An in-depth tutorial on how to code 2D visuals using WebGL2.

Check it out

From Our Blog

On-Scroll Letter Animations

Some examples of how to make interesting letter animations when scrolling a web page using translations and Locomotive Scroll.

Check it out

The post Collective #645 appeared first on Codrops.

January 14, 2021

Collective #644

Inspirational Website of the Week: Clar Development

Great colors, a smooth scroll experience and lovely animations. Our pick this week.

Get inspired

Our Sponsor

Can gaming save itself from its content moderation problems?

Twitch, Playstation, Xbox, and other big players in the gaming industry face a treacherous future — but there is room for optimism.

Like to read more?

2020 JavaScript Rising Stars

The 5th edition of the JavaScript Rising Stars, the annual round-up of the JavaScript landscape.

Check it out

Front-End Performance Checklist

An annual front-end performance checklist with everything you need to know to create fast experiences on the web today, from metrics to tooling and front-end techniques.

Check it out

Bringing Spacer GIFs Back, to handle spacing elements in React and CSS

In this article, Josh W Comeau explains how he uses a Spacer component to solve common layout problems, and why it’s often a great tool for the job in the modern web.

Read it

Luxury Hotel: Free HTML template

Luxury Hotel is a free, high-quality HTML template for hotels and holiday houses designed by Joefrey Mahusay.

Check it out

Ditherpunk — The article I wish I had about monochrome image dithering

Surma “fell into the rabbit hole that is monochrome image dithering” and shares everything he’s learned in this great article.

Read it

@react-three/a11y

@react-three/a11y brings accessibility to WebGL, with easy to use components to enable focus indication, keyboard tab navigation, and screen reader support.

Check it out

Descript

Create podcasts, videos, and transcripts easily with this new tool.

Check it out

Stack game with Three.js and Cannon.js

A great 3D game made by Hunor Márton Borbély.

Check it out

Annual Awwwards 2020

The annual awards of the best in the web design industry. By Awwwards.

Check it out

Three-projected-material

A Three.js Material which lets you do Texture Projection on a 3D Model. By Marco Fugaro.

Check it out

Voting Autumn Fox 2020

Introducing the best websites of the web design community. Time to vote and choose the Autumn Fox 2020 seasonal award winner.

Check it out

Transmission materials

An interesting demo by Paul Henschel. Check out this tweet to learn more.

Check it out

Grids Part 2: Semantics

Part 2 in a series about ARIA grids by Sarah Higley.

Read it

Number 20

A fantastic Three.js demo by ycw.

Check it out

Seven ways to test for accessibility of your web site with browser Developer Tools

Christian Heilmann shows ways of testing a web site for accessibility issues using the browser Developer Tools.

Read it

How to Fall In Love With Single Div Illustrations

A short tutorial on how to start with single div images by Albert Walicki.

Read it

The New Array Method You’ll Enjoy: array.at(index)

The array.at(index) method in JavaScript accesses array items at positive and (finally!) at negative indexes.

Read it

PixelCraft: A Pixel Art Editor

A mobile-friendly pixel art and animation creation tool (PWA) built using HTML5 Canvas.

Check it out

OpenScan

OpenScan is an open-source app that enables users to scan hard copies of documents or notes and convert it into a PDF file.

Check it out

From Our Blog

Infinite Hyperbolic Helicoid Animation with Three.js

A coding session where you’ll learn how to create an infinite shape animation of a hyperbolic helicoid using Three.js.

Check it out

The post Collective #644 appeared first on Codrops.

January 7, 2021

Collective #643

Inspirational Website of the Week: Sam Goddard Dev

A great portfolio with a strong design and fantastic typography. Our pick this week.

Get inspired

Our Sponsor

Instant websites for your clients with Divi Layout Packs

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

Check it out

Figma Crash Course

A fantastic free Figma course by Pablo Stanley.

Check it out

The future of CSS: Higher Level Custom Properties to control multiple declarations

Bramus Van Damme on the exciting new idea of Higher Level Custom Properties.

Read it

The Art of Building Real-life Components

A walkthrough on building a component with HTML & CSS in details by Ahmad Shadeed.

Read it

How we built the GitHub globe

Learn how the globe was built for the new GitHub website.

Read it

ASCII Art Playground

A browser-based live-code environment with text-only output. Learn how to use it in this manual.

Check it out

Translucent Pearls

A beautiful demo of translucent pearls by Arno Di Nunzio.

Check it out

Magazine Layout for Viola Site

A great implementation of a multi-column layout.

Check it out

Top Pens of 2020 on CodePen

The yearly collection of the most hearted Codepen demos is out!

Check it out

Options for styling web components

Nolan Lawson shows the different ways a standalone web component can expose a styling API and covers strengths and weaknesses of each technique.

Read it

Discover the best websites of 2020!

Explore the best designs on Awwwards of 2020 and leave your vote.

Check it out

The Devil’s Albatross

Learn how to build an algorithmic layout that switches from two centered elements to a spaced-out flex layout. By Nils Binder.

Read it

Art Direction for Static Sites

Dave Rupert shows how to spice up your blog posts with minimal effort.

Check it out

You want overflow: auto, not overflow: scroll

Some very useful insights regarding the visible scrollbar problem by Kilian Valkhof.

Read it

The State of CSS 2020: Trend Report

The State of CSS survey results boiled down to the three key CSS trends of the past year.

Check it out

Back to basics: adding a playback speed control to an audio player

Christian Heilmann shows how to add a speed control in audo players using basic HTML5 and JavaScript.

Read it

Fire ball 2

Yoichi Kobayashi’s sketch that is an example of how to use SkinnedMesh, Skeleton, and Bone by creating a fireball tail.

Check it out

Simulating Drop Shadows with the CSS Paint API

Steve Fulghum looks at how we can use the CSS Paint API to paint a complex shadow within a border image.

Read it

Fantasy UIs

If you didn’t know about it: super interesting interviews about fantasy user interfaces.

Check it out

The Most Interesting Developer Tools for 2021

The 60 most interesting and useful developer tools from the past year, as seen by the CTR stats from Louis Lazaris’ weekly newsletter on tools.

Check it out

CV Boostifier

An open source tool for creating cool CV online made for developers by developers.

Check it out

Write code. Not too much. Mostly functions.

Some good advice based on an analogy by Brandon Smith.

Read it

CSS paper snowflakes

Some lovely CSS paper snowflakes made by Michelle Barker.

Check it out

LinkAce

LinkAce is a free and open source bookmark archive for long-term storage and organization of your favorite links.

Check it out

Peaks of Austria

Explore the peaks of Austria in 3D in your browser, both on the desktop and mobile.

Check it out

From Our Blog

A Look Back at 2020: Roundup of Codrops Resources

2020 is almost over. Join us for a look back on some of our articles, tutorials and experiments.

Check it out

From Our Blog

Creating an Infinite Auto-Scrolling Gallery using WebGL with OGL and GLSL Shaders

A tutorial explaining how to build an infinite auto-scrolling gallery using WebGL with OGL and GLSL Shaders.

Read it

The post Collective #643 appeared first on Codrops.

December 10, 2020

Collective #640

Inspirational Website of the Week: Vrrb

An elegant and clean design with beautiful details and some creative animations. Our pick this week.

Get inspired

50 Projects in 50 Days

A fantastic repo by Brad Traversy with 50+ mini web projects using HTML, CSS and JavaScript.

Check it out

Moonbridge

A simple and fun way to create your own WebGL experiment.

Check it out

The 2020 Web Almanac

The Web Almanac is an annual state of the web report combining the expertise of the web community with the data and trends of the HTTP Archive.

Check it out

Christmas Cannon

A super fun Christmas demo made by Steve Gardner.

Check it out

Kinetic Type Tutorial (Github Universe 2020)

A tutorial by Mario Carrillo on how to create the kinetic type for Github Universe.

Check it out

The Import On Interaction Pattern

An article by Addy Osmani on lazy-loading non-critical resources when it’s required by user interaction.

Read it

The Rules of Margin Collapse

Josh W Comeau puts an end to the mystery of collapsing margins and explains everything you need to know to not get caught by surprise anymore.

Read it

Introduction to Spline

If you got excited about Spline, you’ll find this tutorial very useful.

Watch it

Why I Love Tailwind

Max Stoiber shares why he loves Tailwind and explains how to avoid the downsides of atomic CSS.

Read it

Alt vs Figcaption

Elaina Natario explains alt and figcaption, their differences and how to use them.

Read it

Animated SVG Links

Some super stylish line animations for links by Adam Kuhn.

Check it out

CSS Scroll Snap

Learn why and how to use CSS scroll snap in this article by Ahmad Shadeed.

Check it out

Valtio Game

A demo that shows how to create a simple game with Valtio, a proxy-state library for React.

Check it out

Style your readme using CSS with this simple trick

A gem from some months ago: Some wicked CSS trickery by Sindre Sorhus.

Check it out

Accessible icon links

Hugo Giraudel shows how to make icon links accessible in this article.

Read it

Human performance metrics

A very insightful article by Gilles Dubuc on how web performance perception was measured at Wikipedia.

Read it

What Can You Put in a CSS Variable?

An article by Will Boyd on what you can use as CSS variable value.

Read it

GitHub: Where the world builds software

The new landing page of GitHub shines with an interactive globe.

Check it out

Typography Principles

A really nice scroll experience with a wonderful design explaining typographic principles.

Check it out

From Our Blog

Horizontal Smooth Scroll Layouts

Some ideas for horizontal smooth scrolling layouts powered by Locomotive Scroll.

Check it out

The post Collective #640 appeared first on Codrops.

December 7, 2020

Collective #639

Radicle

A peer-to-peer stack for building software together. Without central servers and censorship.

Check it out

This content is sponsored via Thought Leaders

JavaScript Speed Coding Challenge

Are you ready to put your JavaScript skills to the test? Enter the challenge and see how you stack up among the world’s top developers!

Get started

Mannequin.js

Mannequin.js is a simple library of an articulated mannequin figure. The shape of the figure and its movements are done purely in JavaScript. The graphics is implemented in Three.js.

Check it out

A Utility Class for Covering Elements

Michelle Barker shares a useful utility class that you can use to easily cover elements.

Read it

Cssfox

A place to showcase websites, receive web design awards, find inspiration for a web design project and interact with people that have similar interests.

Check it out

Advent of Code 2020

A new edition of the great coding Advent calendar: 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

Automatic Social Share Images

A fantastic tutorial on how to generate social share images with a serverless function and headless browser by Ryan Filler.

Read it

CSS Sticky Parallax Sections

Ryan Mulligan’s CSS sticky positioning demo with some neat parallax effect on scroll using scale transforms.

Check it out

Introduction to Bash Scripting

An open-source introduction to Bash scripting that will help you learn the basics of Bash scripting for automating your daily SysOps, DevOps, and Dev tasks.

Check it out

Structure Synth JS

An amazing demo collection by Gerard Ferrandez that will take you to another world.

Check it out

Clemens Wenger: Physics of Beauty

An interactive, minimal audio-visual dive into the music album by Clemens Wenger.

Check it out

Exophysics

Explore the physics of other universes with this particle simulator that was built in ~500 lines of self-contained HTML/JS/WebGL2.

Check it out

2020: Projects of the Year

Every December, Readymag’s team takes a look back at the previous 12 months and selects the best projects made with their platform.

Check it out

PRESENTA Play!

Create slides using Markdown with this cool tool.

Check it out

Real Debugging Beyond Console Log

Steve Griffith shows how to debug code beyond console.log statements.

Watch it

I created my own YouTube algorithm (to stop me wasting time)

Great article on how Chris Lovejoy improved the YouTube recommendation algorithm using the YouTube API and Amazon’s AWS Lambda.

Read it

An ex-Googler’s guide to dev tools

After leaving Google, many engineers miss the developer tools. Here’s one ex-Googler’s guide to navigating the dev tools landscape outside of Google, finding the ones that fill the gaps you’re feeling, and introducing these to your new team.

Read it

Arokite

Preview your business cards in a 3D scene you can customize, save and export.

Check it out

Time to Say Goodbye to Google Fonts

Simon Wicki explains why you should self-host your fonts for better performance.

Read it

K!sbag: Free minimal portfolio template

K!sbag is a free minimal site template with 6 ready-made HTML pages for building a personal portfolio website.

Check it out

Under-Engineered Responsive Tables

Adrian Roselli shows how to make a WCAG-compliant responsive HTML table.

Read it

From Our Blog

Coding a Simple Raymarching Scene with Three.js

A coding session where you’ll learn how to set up a simple Raymarching scene with Three.js.

Check it out

The post Collective #639 appeared first on Codrops.

November 30, 2020

Collective #637

Building TakeNote, a Notes App for Developers With GitHub Sync

Tania Rascia shares how she built TakeNote, a clutter-free web-based notes app for developers.

Check it out

Boop!

A tutorial on how to create a brilliant React hover animation effect with React Spring.

Read it

Sick of the stupid jokes? Write your own arbitrary-precision JavaScript math library

James Sinclair shows how to write your own custom JavaScript math library tailored to your specific needs.

Read it

Native Aspect Ratio Boxes in CSS thanks to aspect-ratio

Learn all about the new “aspect-ratio” property and how to use it.

Read it

Infinite Bad Guy

Infinite Bad Guy is an AI experiment that uses machine learning to seamlessly align thousands of covers of Billie Eilish’s “Bad Guy” into an infinite music video.

Check it out

Responsive and Configurable SVG Waves

A great playground experiment by Jhey where you can configure and copy some CSS/SVG page section waves. Read the thread here.

Check it out

List.js

An easy-to-use library for adding search, sort, filters and flexibility to tables, lists and various HTML elements.

Check it out

Use console.log() like a pro!

Marko Denic shows how to use console.log() for JavaScript debugging.

Read it

Andrea Perato

A website made only with Google Docs Spreadsheets.

Check it out

Accessible, Smooth Scroll-to-top Buttons with Little Code

Ashlee M Boyer shows how to add a scroll-to-top button with smooth scrolling using just a few lines of code.

Read it

A tale of four prototypes

Dave Rupert shares some prototypes of ideas he had in the past couple of years.

Check it out

Beginner’s Guide to Static Site Generators

A helpful guide to the basics of static site generators.

Read it

So you wanna create an eco-friendly website

Eric Bailey helps find the answer to the question on how to make a website or web app not-awful.

Read it

A Complete State Machine Made With HTML Checkboxes and CSS

In this article, Ryan Bethel adapts the concept of a state machine to HTML and CSS.

Read it

The Queen and The Crown

A supercool virtual 3D exhibition.

Check it out

Back to Basics: Creating a clickable card interface in plain HTML, CSS and JavaScript

A tutorial by Christian Heilmann on how to create a clickable card interface.

Read it

naaro

This website has a really cool dragging interaction.

Check it out

Squeeshy Toy

A fluffy toy prototype made by Christoph Lorenzi with Three.js.

Check it out

Why it’s good for users that HTML, CSS and JS are separate languages

Hidde de Vries looka at why it is good for people that HTML, CSS and JS are separate languages.

Read it

Dashboard UI

Mert Cukuren made this Tailwind CSS Dashboard that supports dark mode.

Check it out

From Our Blog

Building a Svelte Static Website with Smooth Page Transitions

A video tutorial that will show you how to build a static website with Svelte.js and add smooth page transitions using Three.js and GSAP.

Check it out

The post Collective #637 appeared first on Codrops.

November 26, 2020

Collective #636

Inspirational Website of the Week: Loftgarten

Design excellence in every way: layout, typography, colors and interactions are just spot-on!

Get inspired

Our Sponsor

The Divi Black Friday Sale

Black Friday is the only time each year that we offer 25% off new Divi memberships and Divi membership upgrades and along with each purchase, customers also get access to a free prize. We are giving away premium Divi modules, child themes and layouts in batches.

Get ready!

Playfulness In Code: Supercharge Your Learning By Having Fun

The master of dev fun, Jhey Tompkins, shows how having fun can supercharge your learning in this great article.

Read it

Swimming on Scroll with GSAP

Alex Trost dissects the amazing “Weird Fishes” demo by Michelle Barker.

Read it

What are design tokens?

Learn why design tokens are a powerful way of sharing design properties and how they work.

Read it

Color Theming with CSS Custom Properties and Tailwind

Michelle Barker explains how custom properties can be used for theming, and how they can be integrated with Tailwind to maximize the reusability of our code.

Read it

Tomorrowland: Digital Event

Dogstudio’s great case study of how they built a new kind of immersive experience for Belgium’s EDM sweetheart.

Read it

Web Development for Beginners – A Curriculum

Azure Cloud Advocates at Microsoft are pleased to offer a 12-week, 24-lesson curriculum all about JavaScript, CSS, and HTML basics.

Read it

Text Gradients in CSS

A great tip on how to create text gradients in CSS using the background-clip property.

Read it

The case for Weak Dependencies in JS

Lea Verou has some interesting thoughts in “weak dependecies” in JavaScript.

Read it

Liquid masking – scroll

A great demo by Cassie Evans that shows a cool liquid masking scroll effect.

Check it out

Thinking Like a Front-end Developer

Learn how to think as a front-end developer and account for edge cases you might have missed.

Read it

MIDWAM

A really cool immersive web experience.

Check it out

Disable mouse acceleration to provide a better FPS gaming experience

Learn about how web apps can now disable mouse acceleration when capturing pointer events.

Read it

Draggable elastic

A great starting template for a cool slider by Jesper Landberg.

Check it out

CSS clip-path Editor

A very useful clip-path editor made by Mads Stoumann.

Check it out

The most accurate way to schedule a function in a web browser

A detailed analysis of 3 JavaScript timeout strategies (setTimeout, requestAnimationFrame & Web Worker) and how they perform in thousands of web contexts. By Benoit Ruiz.

Read it

Shifting an image with canvas

Christian Heilmann shows how to use HTML canvas to shift the pixels of an image.

Read it

Flash Animations Live Forever at the Internet Archive

Great news for everyone concerned about the Flash end of life planned for end of 2020: The Internet Archive is now emulating Flash animations, games and toys in our software collection.

Read it

Building a Web App Powered by Google Forms and Sheets

Learn how to use Google Forms and Sheets to build a client-side application.

Read it

A centered CSS navigation with fit-content

Stefan Judis shows a CSS pattern that uses ‘fit-content’ to center a flexible-width navigation.

Read it

Modern HTML Starter Template

Igor Agapov created this starter template for HTML projects that comes with some useful contents.

Check it out

From Our Blog

Inspirational Websites Roundup #20

Our favorite website designs that we’ve collected over the past couple of weeks for your inspiration.

Check it out

From Our Blog

Image Stack Intro Animation

Two simple intro animations where an image stack moves to become a grid using GSAP and Locomotive Scroll.

Check it out

From Our Blog

Replicating the Icosahedron from Rogier de Boevé’s Website

Learn how to replicate the beautiful icosahedron animation from Rogier de Boevé’s website using Three.js and GLSL.

Check it out

The post Collective #636 appeared first on Codrops.

November 19, 2020

Collective #635

Inspirational Website of the Week: Grove Lust

Beautiful simplicity, unique colors and a fun interactive effect made us pick Grove Lust this week.

Get inspired

Back/forward cache

Learn how to optimize your pages for instant loads when using the browser’s back and forward buttons. By Philip Walton.

Read it

Pattern Collect

A curated gallery of patterns by awesome designers and illustrators

Check it out

Simple pie charts with fallback, today

Lea Verou shows a modern solution for pie charts with a fallback for older browsers.

Read it

A Deep Dive Into CSS Grid minmax()

Learn how CSS grid minmax() works, with a detailed visual explanation for auto-fit and auto-fill keywords.

Check it out

ThreeJS starter

A fantastic Three.js boilerplate made by Francesco Michelini. It uses Parcel to create the bundle and Tweakpane for live updates. Here’s the demo.

Check it out

Tailwind CSS v2.0

Read about the new Tailwind CSS version that includes an all-new color palette, dark mode support, and a lot more.

Read it

upptime

An uptime monitor and status page powered by GitHub.

Check it out

Masonry Layout

Level 3 of the CSS Grid Layout specification includes a masonry value for grid-template-columns and grid-template-rows. This MDN guide details what masonry layout is, and how to use it.

Read it

SvgPathEditor

A very useful online editor to create and manipulate SVG paths.

Check it out

Warp: Improved JS performance in Firefox 83

An article that explains how Warp works, a significant update to SpiderMonkey.

Read it

Standardizing <select> And Beyond: The Past, Present And Future Of Native HTML Form Controls

In this article, Stephanie Stimac dives into the past by going back to the beginning of HTML and tracing the evolution of form controls through to the present and the current state of working with them.

Read it

Railroad switches game

A simple remake of an 8 bit minigame in ~150 lines of pure JavaScript.

Check it out

Simulating color vision deficiencies in the Blink Renderer

This article describes why and how we implemented color vision deficiency simulation in DevTools and the Blink Renderer.

Read it

Draggable Blend Generator

A generator that lets you experiment with the background-blend-mode and mix-blend-mode CSS properties.

Check it out

GSAP Believe – Collage Animation

A very beautiful collage animation made by Shunya Koide.

Check it out

Interstellar

A tweakable demo made by Arnaud Di Nunzio.

Check it out

Inside the Mind of Samuel Day

What an awesome scroll experience!

Check it out

Building My First PC

Tania Rascia shares how she built her own PC in this great article.

Read it

Kode Sports Club

A really cool interactive 3D tour for a spots club. Made by the folks of Merci-Michel.

Check it out

PAC-MAN Password Reveal w/ GSAP

A fun password reveal effect made by Jhey.

Check it out

Romanizer

A great project made with Vue.js: a roman numerals converter.

Check it out

From Our Blog

UI Interactions & Animations Roundup #12

Some fresh UI interaction and animation concepts for your inspiration.

Check it out

From Our Blog

Coding the Golden Spiral City from the Creative Cruise Website with Pixi.js

Dive into a remake of Creative Cruise’s amazing golden spiral city using Pixi.js.

Check it out

The post Collective #635 appeared first on Codrops.

November 12, 2020

Collective #634

Inspirational Website of the Week: Chartogne-Taillet

A wonderful, immersive web experience with a beautiful design. Our pick this week.

Check it out

Operator Lookup

Search JavaScript operators with this useful tool by Josh W. Comeau.

Check it out

22120

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

Check it out

Our Sponsor

Black Friday with 15,000+ Free Prizes!

With over 15,000 free prizes, free bonus gifts, dozens exclusive discounts and perks from our partners, and our biggest discount ever on Divi memberships and upgrades, you wouldn’t want to miss this year’s Black Friday sale that starts on Nov 27th at exactly 12:00 AM UTC-6.

Save the date

Not so short note on aria-label usage

A great article on aria-label and how to use it. The discussion is also very insightful with lots of answers and questions.

Read it

Web animation gotchas

Fading something in, and fading something out – sounds simple right? Unfortunately not! Jake & Surma talk through the various gotchas of animating the web, and how to work around them.

Watch it

The Raven Technique: One Step Closer to Container Queries

Mathias Hülsbusch shows how to use calc(), min(), max() and clamp() to build a container-query-like solution.

Read it

A Dive Into React And Three.js Using react-three-fiber

React-three-fiber is a powerful Three.js renderer that helps render 3D models and animations for React and its native applications. In this tutorial, you will learn how to configure and build 3D models in a React application.

Read it

Socialify

Socialify helps you showcase your project to the world by generating a beautiful project image.

Check it out

Lobe

A “free” tool by Microsoft that helps you train machine learning models.

Check it out

Stage waves

Some magic made by Liam Egan.

Check it out

Unexpected, Useless, and Urgent

From last month, but what a great read: Thinking about inbox management, RSS feeds, and email overload.

Read it

Nomad Web

An experimental web version of the epic sculpting and painting app.

Check it out

HTML Forms: How (and Why) to Prevent Double Form Submissions

An interesting article on preventing double from submissions by using an attribute on the form element.

Read it

React Forms Tutorial: Access Input Values, Validate, and Submit Forms

A step by step tutorial on how to access input values, validate, and submit forms in React.

Read it

Drum Sequencer

A super cool sequencer with sample pad made by Jacob Kucera.

Check it out

Quick hack: How to make the new CSS Overview feature of Chromium Devtools shareable

Christian Heilmann shares a quick and useful Devtools hack.

Check it out

react-gl-transition-image

Lazy load and transition your React images with some WebGL glsl niceness.

Check it out

The art of making information beautiful

A great read on Bureau Oberhaeuser’s work around data visualization.

Read it

How I wrote JavaScript to avoid JavaScript

Christoph Grabo shows how many things can be done without JavaScript.

Read it

From Our Blog

Recreating the Exploding Particles Video Animation from M-trust.co.jp

In this live stream you’ll learn how to code the exploding particles video effect seen on the website of M-Trust with WebGL.

Check it out

From Our Blog

Inline Menu Layout with Gallery Panel

An inline menu layout with a playful hover animation and a gallery content preview panel.

Check it out

The post Collective #634 appeared first on Codrops.

November 5, 2020

Collective #633

Inspirational Website of the Week: Krause Studio

A very unique design with a lot of personality. Our pick this week.

Get inspired

Webbed Briefs

Webbed Briefs are brief, hilarious videos about the web, its technologies, and how to make the most of them. By no other than Heydon Pickering.

Check it out

Chasing the Pixel-Perfect Dream

A great article by Josh W Comeau on the impossibility of hitting “true” pixel-perfection and why that’s actually not such a big deal.

Read it

Flow CSS Utility

Learn how the flow utility provides flow and rhythm between direct sibling elements. By Andy Bell.

Read it

Site-Speed Topography

Harry Roberts shares his approach for finding slowdowns, blindspots, and inefficiencies on websites.

Read it

Effective Skeleton Screens

Tim Kadlec on best practices when it comes to using skeleton screens.

Read it

Internationalization And Localization For Static Sites

Internationalization and localization is more than just writing your content in multiple languages. Learn all about it in this guide by Sam Richard.

Read it

#30DayMapChallenge

If you’re into maps: The official repository for #30DayMapChallenge, It is a daily mapping, cartography and data visualization challenge aimed at the spatial community.

Check it out

Coin Flip Donate Button

A really fantastic button animation made by Cooper Goeke.

Check it out

How to persistently change third party web sites with browser developer tools

Christian Heilmann explains how to use some features of Developer Tools that allow you to change web sites locally.

Read it

Additive Animations in CSS

Learn how you can use the Web Animations API to apply two simultaneous animations that modify the same property in CSS.

Read it

Play the Chrome dino game with your gamepad

Thomas Steiner shows how to control web games with the Gamepad API.

Read it

What Makes JavaScript JavaScript? Prototypal Inheritance

A guide that will help you understand prototypal inheritance in JavaScript: prototype object, inherited propertes and chain of prototypes.

Read it

Converting the Vue.js markdown editor demo to vanilla JS

See how to convert the Vue.js markdown editor demo into vanilla JS.

Check it out

Container Queries are coming to Chromium!

Bramus Van Damme picked up some interesting news: the Chromium team intents to prototype container queries as proposed by Miriam Suzanne.

Read it

Block Rage

Block Rage is a super cool pixel art game where you must move descending blocks of different shapes to form lines.

Check it out

Origami Simulator

An app that allows you to simulate how any origami crease pattern will fold.

Check it out

If not SPAs, What?

Tom MacWright on alternative futures of the SPA pattern.

Read it

From Our Blog

Distorted Infinite WebGL Slider with Pixi.js

In this video you’ll learn how to code the infinite scrollable image slider from Lamadone Studio using Pixi.js.

Check it out

The post Collective #633 appeared first on Codrops.

November 2, 2020

Collective #632

Copying is the way design works

Matthew Ström’s in-depth exploration into why designers have such a complicated relationship with copying.

Read it

This content is sponsored via Thought Leaders

Get a Free .design Domain Name Today!

A .design domain name allows you to create a more succinct, powerful, and elegant URL and email address. Get 1-year for free today.

Get it today

Getting Audio Visualizations working with Web Audio API

A great tutorial by Dwayne Harris on how to create an audio visualization based on the Web Audio API.

Read it

pet_cursor.js

Pet cursor (Neko cursor) is a simple JavaScript file that turns your website’s cursor into a cute animated pet. By Nathalie Lawhead.

Check it out

How to sanitize third-party content with vanilla JS to prevent cross-site scripting (XSS) attacks

Chris Ferdinandi takes a look at how XSS attacks work and how to prevent them.

Read it

How to Build an Expandable Comment Box

Learn how to recreate the Medium comment box from scratch using React Hooks.

Read it

Voxiom.io

A WebGL game inspired by Minecraft, Fortnite, Counter Strike, and Call of Duty. Read more about it here.

Check it out

Painting With the Web

Matthias Ott shares his thoughts on why designing and building for the Web should be more playful.

Read it

Setting Up Netlify Forms: In-Depth Tutorial

This tutorial shows how Netlify Forms makes it easy to handle contact forms.

Read it

Supershape

A beautiful demo where you can adjust the parameters of a shape made by Arnaud Di Nunzio.

Check it out

Writing a dog picture browser in ~200 lines of code

Christian Heilmann shows how he built a fun dog picture browser using the Dog.ceo API.

Read it

Algebraic Effects for React Developers

Reese Williams on building a mental model for React Hooks.

Read it

Bridging design and code with Variants

Read about Variants and updates to the Inspect panel of Figma that will help power up your design system.

Read it

Stories for VSCode

An extension that allows you to share Instagram-style stories from within Visual Studio Code. By Ben Awad.

Check it out

How to make CSS Animations

Patrícia Silva’s interactive guide to CSS Animations.

Read it

Web scraping with JS

Pavel Prokudin shows how to use ES2020, node, and browser APIs for web scraping.

Read it

Looking deep to have a big influence

Some very interesting insights from a jQuery maintainer.

Read it

Native CSS Masonry Layout In CSS Grid

There is now a specification for native CSS masonry layout, as part of the Grid Layout spec. In this article, Rachel Andrew explains how it works with the help of a couple of demos you can try out in Firefox Nightly.

Read it

Svelte rendering and SEO

How do you handle SEO with Svelte? Julien Maury explains.

Read it

Micro Frontends Pattern Comparison

Comparing build-time integration, server-side integration, run-time integration via iframes, and run-time integration via script.

Read it

How to Build HTML Forms Right: Styling

Part of a series on HTML form design patterns, common gotchas, and CSS tips.

Read it

The post Collective #632 appeared first on Codrops.

October 29, 2020

Collective #631

Inspirational Website of the Week: Goliath Entertainment

A really fun website with lots of interesting interactions and effects. Our pick this week.

Get inspired

CSS Grid Layout Module Level 3

The new exciting grid draft that includes a Pinterest/Masonry layout option is out.

Check it out

Build a game this November with GitHub Game Off

GitHub’s annual hackatron for building games, Game Off, is about to begin.

Read it

Anima 4.0: Design and development, united at least

Anima’s latest release helps you transform designs into workable, developer-friendly React code.

Check it out

Next.js Commerce

The all-in-one starter kit for high-performance e-commerce sites. With a few clicks, Next.js developers can clone, deploy and fully own their own store.

Check it out

Layout projection: A method for animating browser layouts at 60fps

In this short (interactive) series of posts, Matt Perry provides an overview of the layout animation problem and some of the solutions attempted to date.

Read it

Curve Modifiers in Three.js

Ada Rose Cannon on her first major PR to Three.js, Curve Modifiers.

Read it

Selecting Random Posts in Eleventy

If you work with Eleventy, this might be very useful: Raymond Camdon explains how to add links to random pages in Eleventy.

Read it

Free Image and Video API – Pexels

Pexel’s free API lets you use their stock images and videos on your website, app or project easily.

Check it out

Tyrus

Tyrus is a free digital toolkit from Airbnb Design that helps freelance illustrators optimize their business, so they have more time to focus on what they love.

Check it out

Jean Dawson

What a cool camcorder-like website design!

Check it out

Prevent layout shifts with CSS grid stacks

A detailed explanation with real examples of a CSS grid technique for preventing layout shifts when a component state changes.

Read it

Part of your world: Why we’re proud to build a truly native Mac app

A great article by the Sketch team that highlights the benefits that come with native macOS apps.

Read it

Vue Data Table

TJ Fogarty explores how to tackle a data table in Vue without relying on third-party solutions.

Read it

buoy – Illustrator and Animator

The portfolio of buoy is full of WebGL goodness. Made by Keita Yamada.

Check it out

ML Art

A curated showcase of creative machine learning artworks and projects.

Check it out

Tetris

A great Babylon.js Tetris demo by by Hitesh Sahu.

Check it out

How to Timeout a fetch() Request

Learn how to use setTimeout(), the abort controller, and the fetch() API to make requests with a configurable timeout.

Read it

Clip-path demo

A recreation of an effect made by Lorenzo Cadamuro on Robin Noguier’s website. By Gianmarco Simone.

Check it out

“The CSS Universal Selector Is Slow And Should Be Avoided” — Yet Another Lie!

Jason Knight shows why it’s a bald faced lie that the “universal selector” is slow.

Read it

Vanilla ToDo

A case study on viable techniques for vanilla web development.

Check it out

Real people from drawings

Too cool to miss: an experiment using #pixel2style2pixel to create real people from drawings. A thread by Nathan Shipley.

Check it out

From Our Blog

Awesome Demos Roundup #18

A big selection of the best web experiments made in the past weeks.

Check it out

Particles Image Animation from Mathis Biabiany’s website

A coding session where you’ll learn how to implement the particles effect seen on Mathis Biabiany’s website.

Watch it

The post Collective #631 appeared first on Codrops.

October 26, 2020

Collective #630

Three.js Journey

Bruno Simon’s ultimate Three.js course is now open for subscriptions!

Check it out

Our Sponsor

Be: 600+ stunning pre-built websites. Now with Elementor.

Save time. Stop building sites from scratch.

Find out more

Understanding Modules, Import and Export in JavaScript

Learn how to use webpack to bundle JavaScript, images, fonts, and styles for the web and set up a development server.

Read it

daily.dev

A great new aggregator with the latest programming news.

Check it out

Ghost Card

A terrifying ghost card that you can drag to rotate. Made by Yugam.

Check it out

Getting Started With Next.js

A tutorial for developers who are looking to get started with Next.js or have already begun but need to fill some knowledge gaps.

Read it

The Deliciously Dark Escape

A great game made by the folks of Active Theory for Trolli.

Check it out

Dissecting A Dweet #9: City Sunset

Explore the JavaScript code that produces a beautiful procedurally generated cityscape.

Read it

State-Switch Controls: The Infamous Case of the “Mute” Button

Learn about the best practices regarding on–off controls that switch between two different system states.

Read it

Phosphor Icons

In case you didn’t know it yet: A flexible icon family for interfaces, diagrams, presentations and more.

Check it out

Tap to Navigate

Linzi Berry’s great article on how to systemizing interactive labels for maps.

Read it

Bongo Cat

In case you missed it: Hit the bongos like Bongo Cat!

Check it out

Handsfree.js experiments

Oz Ramos shows some really cool stuff he made with Handsfree.js.

Check it out

r3f-blob

A great demo by Marco Ludovico Perego.

Check it out

link-to-qr

Easy to create, free customizable QR codes.

Check it out

waypoint-examples

Some practical example apps that can be deployed with Waypoint.

Check it out

Merlin

Simple web-like forms in react native.

Check it out

Half-Life inspired 3D scene with WebGL

An amazing demo made with ROYGBIV by O?uz Ero?lu.

Check it out

Responsive Grid Design: Ultimate Guide

A guide on how to start designing with a grid system. By Nitish Khagwal.

Read it

This page is a truly naked, brutalist html quine.

Leon from SecretGeek combines Brutalism and quines to create a truly creative webpage.

Check it out

Obolify

A project worth mentioning: Find and support independent, local shops as an alternative to Amazon.

Check it out

The post Collective #630 appeared first on Codrops.

October 22, 2020

Collective #629

Inspirational Website of the Week: Glenn Catteeuw

A unique portfolio design with lots of interesting details and cool effects. Our pick this week.

Get inspired

Our Sponsor

Exploring Livestream Chat UX: Threads and Replies

Threads help livestream chats stay organized and clean.

Thinking Outside the Box with CSS Grid

In this great tutorial, Alex Trost breaks down three unconventional CSS Grid powered layouts.

Read it

Responsive Height Design

A great article by Ahmad Shadeed on how to make sure responsiveness works for the height of a layout.

Read it

Hands-Free Coding

Josh W Comeau shares his workflow where he almost exclusively uses a microphone and an eye-tracker.

Read it

How to build a progressively enhanced accordion component with vanilla JS

Chris Ferdinandi shows how we can replace the need for a big plugin by progressively enhancing HTML to add a bit more functionality to it.

Read it

CSS Game: Build a lighthouse

Join the challenge to build a lighthouse in this pure CSS game made by Ben Evans.

Check it out

Getting dicey – how I failed to write a perfect dice throw simulator and how that is totally OK

Christian Heilmann shares how he developed a Dice Throw Simulator.

Read it

The most useful accessibility testing tools and techniques

In case you missed it: Learn about tools and techniques for accessibility testing. By Artem Sapegin.

Read it

The good line-height

A tool that gives you the right line-height for every text size in a specific scale.

Check it out

The lang attribute: browsers telling lies, telling sweet little lies

A very interesting read on how an Austrian news site got into trouble because of a wrong attribute.

Read it

Harlem

Simple, unopinionated, lightweight and extensible state management for Vue 3.

Check it out

Checka11y.css:

A CSS stylesheet to quickly highlight a11y concerns by Jack Domleo.

Check it out

How to Learn JavaScript If You’re a Beginner

Some good tips on getting started with JavaScript by Dmitri Pavlutin.

Read it

Animated clip-path slider Concept

A beautiful demo made by Jake Whiteley.

Check it out

I want my own media queries in browsers

Kilian Valkhof writes how great it would be for developers to be able to emulate arbitrary media features in the browser.

Read it

Nokia Composer in 512 bytes

Read how to make a tiny oldschool music composer inspired by RTTTL and Nokia Composer. Check out the demo and GitHub repo.

Read it

SVG Favicon Maker

With modern browsers supporting SVG favicon this tool will come in handy to create your own letter or Emoji-based icon.

Check it out

Waveform Visualiser

A wonderful audio visualizer made by Yugam.

Check it out

Image Cropper

A simple JavaScript image cropper demo that does not rely on canvas or SVG.

Check it out

3D CSS Letter Transition

A super cool letter transition demo made by Adam Kuhn.

Check it out

Pure CSS Product Card

Adam Kuhn made this fun product card with some magic CSS.

Check it out

From Our Blog

Inspirational Websites Roundup #19

A new roundup of our favorite inspirational websites that stand out in design and creative interactivity.

Check it out

The post Collective #629 appeared first on Codrops.

October 19, 2020

Collective #628

The State of CSS Survey

The annual survey about the latest trends in CSS is now open. It’s available in many different languages.

Check it out

This content is sponsored via Thought Leaders

Cut Your IT Bills in Half

Deploy more with Linux virtual machines, global infrastructure, and simple pricing. No surprise invoices, no lock-in, and the same price across 11 global data centers. Industry-leading price-performance. Shared, Dedicated, High Memory, and GPU instances plus S3-Compatible Object Storage, Managed Kubernetes, and more. $100 in cloud infrastructure credit.

Try Linode Free