Inspirational Websites Roundup

September 24, 2020

Inspirational Website of the Week: Brews & Grooves

An excellent design with some interesting animations and great typography! Our pick this week.

Learn about spring physics animation in JavaScript

Josh W Comeau explains the magic behind Spring Physics and why they are the secret ingredient that make animations “taste better”.

Read it

Simplify Your Stack With A Custom-Made Static Site Generator

In this article, Bryan Robinson explores how to take a humble HTML page and make its content editable in a CMS with no frameworks and no client-side JavaScript.

Read it

Ray Marching Soft Shadows in 2D

Ryan Kaplan posted a WebGL demo on Twitter and now he explains how it works under the hood.

Read it

filters.css

In case you missed it: a supercool CSS only library to apply color filters.

Check it out

Blacklight

A great real-time website privacy inspector that will reveal the specific user-tracking technologies on any given website.

Check it out

Buttons that Spark Joy

The web certainly can’t have enough of these: Aaron Iker’s buttons that are mini celebrations. In this article you’ll learn how they are made.

Read it

#s3e38 ALL YOUR HTML, Fancy colors shader and GSAP ScrollTrigger

In this video Yuri Artyukh dissects and recreates the amazing animations seen on mav.farm.

Watch it

3D Room

Amazing CSS work by Ricardo Oliva Alonso: a 3D room with great lightning.

Check it out

Finding The Root Cause of a CSS Bug

Great article on debugging CSS by Ahmad Shadeed.

Read it

adidas – CHILE20

Outstanding WebGL work for adidas by Active Theory.

Check it out

Content delivery networks (CDNs)

This article provides a comprehensive overview of content delivery networks (CDNs). In addition, it explains how to choose, configure, and optimize a CDN setup.

Read it

Meta Tags

With Meta Tags you can edit metatags and generate a preview for social media.

Check it out

Old, Good Database Design

An excellent summary of the fundamentals of good database design.

Read it

Mono Icons

A simple, consistent open-source icon set designed to be used in a wide variety of digital products. Read more about it in this article.

Check it out

From Our Blog

Inspirational Websites Roundup #18

A gigantic set of hot new websites for your inspiration and to get you up to date on the current web design trends.

Check it out

From Our Blog

UI Interactions & Animations Roundup #10

Check out the latest trends in web motion design, UI interaction and animations and get inspired.

Check it out

The post Collective #624 appeared first on Codrops.

July 2, 2020

Inspirational Website of the Week: Sennesro

Simplicity, elegance and flowy motion made us pick Sennesro as inspirational website this week.

Get inspired

60 Days of Animation

The Undead Institute offers books on HTML, CSS, Responsive Design and more that marry humor, excellent teaching, and brain-lodging practice for an experience that’ll outlive the apocalypse.

Check it out

Irregular-shaped Links with Subgrid

In this excellent article, Michelle Barker shows how CSS subgrid can solve the problem of irregular, distributed link shapes.

Read it

Our Sponsor

Efficiently build beautiful websites for your clients

You’ve never built a WordPress website like this before. Divi is more than just a WordPress theme, it’s a completely new website building platform that replaces the standard WordPress post editor with a vastly superior visual editor.

Check it out

Stryve

A new community for tech enthusiasts to share, learn, and build their careers.

Check it out

The design systems between us

Ethan Marcotte shares his thoughts on why he believes that design systems haven’t brought rich, cross-functional collaboration to most organizations.

Read it

Understanding Template Literals in JavaScript

Tania Rascia’s in-depth explanation of template literals in JavaScript.

Read it

html.systems

An excellent library of components built with HTML, CSS and JavaScript.

Check it out

3D banners with ScrollTrigger

A supercool GSAP scroll demo with some 3D magic.

Check it out

Getting CSS Translate values with JavaScript

Zell Liew shows how you can get CSS translate values in JavaScript by parsing 2d and 3d matrices.

Read it

Aligning Logo Images in CSS

Ahmad Shadeed tackles the task of taking a group of logos, and exploring many ways to align and position them perfectly in CSS.

Read it

Design Better Buttons

A great read on button design best practices by Andrew Coyle.

Read it

Launching docs.github.com

Jenn Leaver writes about the launch of docs.github.com, a single home for all of GitHub’s product documentation.

Read it

Profiled

With Profiled you can create a developer portfolio from your GitHub account.

Check it out

Is WebP really better than JPEG?

According to Google, WebP is 25 – 34% smaller than JPEG at equivalent quality. But how much of it is really true? Find out in this article by Johannes Siipola.

Read it

Free Faces

A great selection of freely available fonts.

Check it out

CSS Painting vs. CSS Houdini Paint API

Lisi Linhart takes a look at the performance of the Paint API vs. traditional CSS painting.

Read it

Dark Ages of the Web

A fun journey that recaps the old Web features and front-end patterns.

Check it out

I Just Hit $100k/yr On GitHub Sponsors!

Caleb Porzio shares his fascinating story of a successful open source project and the earnings he’s made with its screencasts.

Read it

The Google ‘vs’ Trick

Read how ego graphs can help you learn about AI, play chess, eat healthier, buy a dog and find love.

Read it

From Our Blog

Creating a Menu Image Animation on Hover

A tutorial on how to create a hover effect for a menu where images appear with an animation on each item.

Check it out

From Our Blog

UI Interactions & Animations Roundup #8

A new collection of UI animation shots that summarizes the latest creative trends.

Check it out

From Our Blog

Inspirational Websites Roundup #16

This special collection of wonderful websites will get you up-to-date on current web design trends.

Check it out

The post Collective #612 appeared first on Codrops.

May 21, 2020

Collective #606

Inspirational Website of the Week: Ivan Toma

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

Get inspired

Our Sponsor

Start your own freelance business by becoming a Divi developer

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

Start learning now

WebGL guide

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

Check it out

Animated Sparkles in React

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

Read it

Beginner’s Guide to Eleventy [Part II]

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

Read it

Best Practices in JavaScript Array Iteration

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

Read it

Minimalist HTML

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

Check it out

Thinking About The In-between Design Cases

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

Read it

Neon Mode: Building a new Dark UI

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

Read it

An introduction to accessible data visualizations with D3.js

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

Read it

Runme.io

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

Check it out

The Third Age of JavaScript

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

Read it

How to Use Object Destructuring in JavaScript

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

Read it

The Kawaiization of product design

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

Read it

new.css

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

Check it out

DOM diffing with vanilla JS

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

Read it

Ghost at the Disco

Anna the Scavenger’s beautiful animated scene.

Check it out

The Fastest Google Fonts

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

Read it

In defense of the modern web

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

Read it

Release 4.0.0 of reveal.js

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

Check it out

This Word Does Not Exist

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

Check it out

SEO Cheat Sheet

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

Check it out

Painter

A subtly animated illustration by Ricardo Oliva Alonso.

Check it out

From Our Blog

UI Interactions & Animations Roundup #6

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

Check it out

From Our Blog

Inspirational Websites Roundup #15

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

Check it out

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

April 2, 2020

Collective #600

Inspirational Website of the Week: Rino & Pelle

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

Get inspired

Our Sponsor

Be: Affordable top value for your website

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

Try Be Theme

Ash’s Smooth Scroll

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

Check it out

Animockup

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

Check it out

Fix an overloaded server

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

Read it

The field

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

Check it out

Creativity over everything

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

Check it out

HTML DOM

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

Check it out

New use-cannon features

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

Check it out

FWA 100

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

Check it out

Understanding Default Parameters in JavaScript

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

Read it

CSS Findings From The New Facebook Design

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

Read it

Hook: A dark HTML landing page template

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

Check it out

Infinite scene with Threejs and InstancedMesh

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

Read it

[3D] Synth Canyon Run

A great Three.js powered demo by Chris Johnson.

Check it out

Margin considered harmful

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

Read it

Flat-html

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

Check it out

Apple’s attack on service workers

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

Check it out

Level Up Your CSS Animation Skills

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

Check it out

From Our Blog

UI Interactions & Animations Roundup #5

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

Check it out

From Our Blog

Inspirational Websites Roundup #14

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

Check it out

From Our Blog

CSS-Only Marquee Effect

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

Check it out

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

March 12, 2020

Collective #596

Inspirational Website of the Week: Odunpazari Modern Museum

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

Get inspired

This content is sponsored via Syndicate Ads

Grow with the
All-in-One Marketing Platform

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

Learn more

Revealing footer with position: sticky!

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

Watch it

Using Redux with React

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

Read it

Utopia

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

Check it out

Rendering 100k spheres, instantiating and draw calls

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

Read it

Midori

A fantastic Three.js library for animated image backgrounds.

Check it out

Pure CSS Landscape – An Evening in Southwold

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

Check it out

Setting Height And Width On Images Is Important Again

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

Read it

mgz.me

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

Check it out

ls-lint

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

Check it out

Yoichi Kobayashi

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

Check it out

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

Frank Force shows how he programmed a tiny racing game.

Read it

How to create an autocomplete input with only HTML

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

Read it

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

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

Check it out

Why Svelte

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

Read it

Stop using Material Design text fields!

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

Read it

Radiooooo.com

A fantastic musical time machine.

Check it out

Introduction to D3

A practical introduction to D3.js by Arvind Satyanarayan.

Read it

Snapfont

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

Check it out

Jitsi Meet

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

Check it out

Shorthand

Shorthand is a utility based CSS framework for rapid prototyping.

Check it out

From Our Blog

Inspirational Websites Roundup #13

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

Check it out

From Our Blog

Background Scale Hover Effect with CSS Clip-path

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

Check it out

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

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.

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.

October 10, 2019

Collective #556

Inspirational Website of the Week: Lafaurie Paris

A super-slick and smooth scroll experience with sharp typography and excellent color choices. Our pick this week.

Get inspired

Our Sponsor

Accentuate Custom Fields for Shopify

The professional solution to extend Shopify with checkboxes, selection lists, images and 15 other field types. Cross-reference objects to create anything you need.

Check it out

Cascading Cache Invalidation

Philip Walton discusses how some caching best practices can actually backfire, and presents some techniques for solving the problem.

Read it

A Guide To New And Experimental CSS DevTools In Firefox

In this article by Victoria Wang you’ll learn about all the CSS DevTools in Firefox.

Read it

Clipping, Clipping, and More Clipping!

Some great new techniques for using CSS clip-path to create interesting effects. By Mikael Ainalem.

Read it

Top-level await

Read about top-level await that makes it possible to use the await keyword outside of async functions in JavaScript modules.

Read it

The Khan Academy 2018 Annual Report Case Study

Sara Soueidan’s case study on a recent micro-site project for Khan Academy.

Read it

Introducing Sass Modules

Read all about the new module system feature of Sass in this article by Miriam Suzanne.

Read it

The Obvious UI is Often the Best UI

Some useful insights on which mobile navigation pattern works best.

Read it

Dark mode

Jeremy Keith shares how he implemented a dark mode for his website.

Read it

Designing a focus style

Zell Liew shares his thoughts on default focus styles and collects some focus styling ideas from around the web.

Read it

Why the Box Model is Integral to Web Design

In this article David Leger explains how the box model works.

Read it

dashdash

Dashdash is a new spreadsheet tool with access to business data and APIs through integrations with Crunchbase, LinkedIn, Mailchimp, Google Maps data, easily usable with the fresh templates feature.

Check it out

Image to Orange and Blue Stencil

With this little tool by Jon Kantner you can turn images into stencil art of orange and blue.

Check it out

Moveable

In case you didn’t know about it: Moveable is draggable, resizable, scalable, rotatable, warpable, pinchable, groupable and snappable. A super useful script.

Check it out

JavaScript Broughlike Tutorial

A tutorial about writing a broughlike (a small roguelike game similar to 868-HACK or Cinco Paus) from scratch in JavaScript.

Read it

TakeNote

Tania Rascia’s plain text notes app in progress. Built with React, Redux and TypeScript.

Check it out

Announcing WebAssembly.sh

After the release of Wasmer-JS, Aaron Turner now introduces WebAssembly.sh, an online WebAssembly Terminal to run WASI modules directly in your browser.

Read it

Layout-Fun with CSS Grid

Some fun demos made with CSS Grid by Tobi Reif.

Read it

Images done right: Web graphics, good to the last byte

Learn the essentials of image formats in this article by the folks of Evil Martians.

Read it

The box model is not layout

Kilian Valkhof argues that if we keep referring to our imaginary perfect layout system in design tools as “box model”, we risk getting the wrong thing.

Read it

cursorOS

A Figma-ready collection of original macOS cursors to be used in design projects.

Check it out

From Our Blog

Creating a Water-like Distortion Effect with Three.js

Learn how to achieve a water-like ripple distortion effect with Three.js and postprocessing.

Read it

From Our Blog

Inspirational Websites Roundup #9

A hand-picked selection of outstanding website designs from September 2019 for your inspiration.

Check it out

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

September 12, 2019

Collective #548

Inspirational Website of the Week: Design Embraced

Anthony Goodwin’s portfolio has a beautiful flowy design with lovely details. Our pick this week.

Get inspired

Our Sponsor

The Ultimate WordPress Page Builder

Try it

Simplicity (II)

Bastian Allgeier on the lessons learned while working on very old projects and how the post-build-process era brought dependency hell.

Read it

Animate it

A tool to create high-quality GIFs and video animations in your browser.

Check it out

Metronomes in JavaScript

Monica Dinculescu’s exploration of metronomes and how to keep time in JavaScript.

Read it

Two Browsers Walked Into a Scrollbar

Zach Leatherman studies scrollbar obtrusiveness and the design control we have with CSS.

Read it

Logical Operations with CSS Variables

Ana Tudor explores the interesting possibilities of logical operations using CSS custom properties.

Read it

Can I email

A very useful site that offers support info on more than 50 HTML and CSS features tested across 25 email clients.

Check it out

VeoLuz

A generative art tool that lets you play with light in a way you never have before. By Jared Forsyth.

Check it out

CSS-Camera

Add depth using a 3D camera view to your web page with CSS3 3D transforms. By Mingyu Kim.

Check it out

Active Theory v5

The amazing new website by Active Theory.

Check it out

Scheduling Netlify deploys with GitHub Actions

Thadee Trompetter shows how to use cron jobs on GitHub Actions and Netlify build hooks to perform nightly updates of a static site.

Read it

Speeding up the web with the Save-Data header

Matt Hobbs experiments with the Save-Data header and shares what he learned.

Read it

Cables

In case you didn’t know about it: Cables is a tool for creating beautiful interactive content. With an easy to navigate interface and real time visuals, it allows for rapid prototyping and fast adjustments. Currently in public beta.

Check it out

Reverse interview

A list of questions to ask the company during your interview.

Check it out

Learn Regex in 4 tweets

A crash course on regex by Somdev Sangwan in just four tweets.

Check it out

Caniuse and MDN compatibility data collaboration

Read about how two great data sources on web compatibility come together.

Read it

Procedural Mountains

A fantastic demo by Kyle Wetton.

Check it out

fullstack.ai

End-to-end machine learning project showing key aspects of developing and deploying real life ML driven application.

Check it out

Dissolve

A wonderful demo of a dissolving effect shader by Colin Peyrat.

Check it out

Daytripper: Hide-My-Windows Laser Tripwire

Daytripper is a laser tripwire that can, upon triggering, hide all your windows, lock your computer, or execute a custom script to do whatever you want

Check it out

From Our Blog

How to Create a Webcam Audio Visualizer with Three.js

A tutorial on how to create a Three.js powered audio visualizer that takes input from the user’s webcam.

Read it

From Our Blog

Inspirational Websites Roundup #8

Another set of inspirational website designs from the previous month to bring you up to date on the current design trends.

Check it out

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

June 6, 2019

Collective #522

Inspirational Website of the Week: Elena Iv-skaya

A beautiful design with lush typography and unconventional interactive elements. Our pick this week.

Get inspired

This content is sponsored via Syndicate Ads

Free automated visual testing with Percy

?Visually test your web app, component library, or static site across browsers and responsive widths to catch UI bugs and ship with complete confidence.

Try it free

Extract critical CSS

Learn how to improve render times with the critical CSS technique in this article by Milica Mihajlija.

Read it

How To Make an Animated Interactive Vue.js Slider

Henry Desroches’s in-depth tutorial on how to create a really cool slider based on Alexsander Barhon’s Dribbble shot.

Read it

Prevent Page Scrolling When a Modal is Open

A good tip by Brad Wu on how to prevent scrolling when a dialog is open.

Read it

Enabling Modern JavaScript on npm

A great article by Jason Miller on how shipping modern JavaScript requires more than changing our build targets.

Check it out

CSS Grid Level 2 – subgrid is coming to Firefox

Rachel Andrew explains what you can do with CSS subgrid.

Read it

Magical, Mystical JavaScript Transducers

James Sinclair explains the not so easy to understand concept of JavaScript transducers in a great way.

Read it

Building the most inaccessible site possible with a perfect Lighthouse score

An experiment by Manuel Matuzovic that shows how we shouldn’t rely solely on automation when testing websites.

Check it out

Free Font: National Park

A typeface designed to mimic the national park service signs that are carved using a router bit.

Get it

How To Start Using Sketch And Framer X

A tutorial by Martina Pérez about how to build prototypes and interactions by making use of the pre-built components in Framer X.

Read it

Mixkit art

Mixkit has now a section for free high-quality and modern illustrations. By Envato.

Check it out

Images drawn with Zdog

Some really cool image to 3D landscape magic using Zdog.

Check it out

Learn git concepts, not commands

An interactive git tutorial meant to teach you how git works and not just which commands to execute. By Nico Riedmann.

Read it

Webcam Air Guitar

Kevin Newcombe used TensorFlow and Posenet to make a playable air guitar.

Check it out

The Truth about Web Components and Frameworks

Dion Almaer explores the reasons behind why we see the same discussions come up again and again.

Read it

Grid, content re-ordering and accessibility

Rachel Andrew expresses her concerns when it comes to re-ordering content and accessibility using the new layout techniques of CSS.

Read it

Analog Algorithm

A really cool website for the publication of a book on source-related grid systems.

Check it out

Indicating focus to improve accessibility

Hidde de Vries show how focus outlines make a site easier to use.

Read it

Embla

An extensible low level carousel for the web, written in TypeScript.

Check it out

Gatsby site search with Lunr.js

Luke Whitehouse explains how you can leverage Lunr.js to create search components that are accessible, fast and extensible.

Read it

Px

Px is a tiny 2D canvas framework for turn-based puzzle games.

Check it out

From Our Blog

Awesome Demos Roundup #5

Another monthly roundup of super-creative web experiments and demos for your viewing pleasure.

Check it out

From Our Blog

Inspirational Websites Roundup #5

An inspirational collection of trendy websites from May 2019 including first-class designs.

Check it out

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

May 9, 2019

Collective #514

Inspirational Website of the Week: Lusion

A futuristic website design that plays with amazing illumination effects. Our pick this week.

Get inspired

This content is sponsored via Syndicate Ads

Northwestern’s Online MS in Information Design and Strategy

Build the in-demand skills, such as UX, UI, and HCI, to drive user interactions. Choose a track in content strategy, analytics, or learning design.

Apply now

React on web.dev

A new section on web.dev to help developers build fast and performant React applications.

Check it out

Hybrid Lazy Loading: A Progressive Migration To Native Lazy Loading

Learn how you can progressively replace your JavaScript-driven lazy loading with its native alternative, thanks to hybrid lazy loading.

Read it

SVG Will Save Us

Sarah Drasner shows some great things we can do with SVGs in this PerfMatters Conference 2019 talk.

Watch it

Building a JavaScript guitar pedalboard

Trys Mudford shares how he created a guitar pedalboard in JavaScript.

Read it

Making Things Better: Redefining the Technical Possibilities of CSS

Rachel Andrew’s presentation at An Event Apart Boston in May 2019.

Check it out

Hands-on with Portals: seamless navigations on the Web

Learn how to build good navigation UX with the Portals API in this article by Yusuke Utsunomiya.

Read it

CSS-Only Chat

An insane project that shows how it’s possible to achieve an asynchronous chat that sends and receives messages in the browser with no reloads and no JavaScript.

Check it out

Why, How, and When to Use Semantic HTML and ARIA

Adam Silver looks over the benefits of using HTML and ARIA, why starting with semantic HTML is the way to go, and why ARIA ought to come in as a last resort.

Read it