Pedro Botelho | The Blog Pros

January 7, 2019

SVG Gradient Map Filter

A great tool by yoksel for creating filters with Gradient Map allowing for Duotone effects.

Check it out

The Most Hearted Pens of 2018

The one hundred most loved Codepen demos of 2018.

Check it out

Our Sponsor

Join The Most Empowered WordPress Community On The Web

554,210 customers are building amazing websites with Divi. You can try Divi with a 30 day money back guarantee.

Try it

Tap to Dismiss

Linzi Berry shows how to design accessible escape hatches for modals.

Read it

FBT

FBT is an internationalization framework by Facebook designed to be both powerful and flexible, but also simple and intuitive.

Check it out

A free electronic version of a soon to be published textbook by Jeff Erickson, along with other lecture notes he has written for various theoretical computer science classes at the University of Illinois, Urbana-Champaign since 1998.

Check it out

A Beginner’s Guide to GraphQL

Leonardo Maldonado explains how GraphQL works in practice.

Read it

All Gone (No Escape II)

A mesmerizing demo by Gerard Ferrandez.

Check it out

The Elements of UI Engineering

An insightful summary by Dan Abramov on the challenges of user interfaces.

Read it

omniclone

An isomorphic and configurable JavaScript utility for objects deep cloning.

Check it out

Fancy Function Parameters

Jake Dohm shows how to refactor a function to make its declaration and uses cleaner and more readable.

Read it

Free Font: Biasachxua

Inspired by old Vietnamese book covers, Hiep Tong designed this typeface. It’s free for personal use and commercial use if you credit the author.

Get it

WebsiteVoice

A tool that lets you turn articles to high-quality audio.

Check it out

Flipping Out

Jon Kantner created this demo of arrays of animated table flipping text emoticons.

Check it out

HTML5 SVG Fill Animation With CSS3 And Vanilla JavaScript

Learn how to build the animated note display from the Awwwards website in this tutorial by Marina Ferreira.

Read it

Why Founders Should Start With a Website, Not a Mobile App

Julia Enthoven shares her opinion on why founders should *almost* always build a website first instead of a native app in the early days of a startup.

Read it

Understanding Bits, Bytes, Bases, and Writing a Hex Dump in JavaScript (Node)

Tania Rascia shares what she learned when writing a command line program that outputs a hex dump.

Read it

How I stumbled across a niche hobby I never knew existed: Drawing (and animating) in CSS

Kyle Wetton shares how he found a great new hobby on Codepen.

Read it

Static Site Boilerplate

A boilerplate for static websites with automated build processes, a local development server, production minification and optimizations.

Check it out

Free Font: Justice Regular

Described as “rough monospace type with cowboy boots”, the Justice font family is an outstanding gem. The regular style is free.

Get it

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

January 3, 2019

Collective #480

Inspirational Website of the Week: IN FOCUS

Innovative shapes and details made us pick IN FOCUS this week.

Get inspired

UI Sounds

A great library of sounds from popular apps. Read more about it in this article.

Check it out

Making Future Interfaces: Algorithmic Layouts

Heydon Pickering’s fantastic video will show you how to create CSS layouts that are self-governing, using Flexbox and Grid.

Watch it

Our Sponsor

Real Time Design in WordPress

Divi is powered by the Divi Builder, an insanely fast and incredibly intuitive front end editor like nothing you have seen before. It will change the way you build websites forever.

Check it out

The History of Everything

Guido Rosso from 2Dimensions announces the release of the source code of “The History of Everything” built with Flutter.

Read it

rrweb

Rrweb is an open source web session replay library that provides easy-to-use APIs to record interactions and replay them remotely.

Check it out

How To Learn CSS

Rachel Andrew shows which fundamental things are important the learn so that using CSS becomes easier.

Check it out

Learn JavaScript

A new platform for interactively learning JavaScript. By Jad Joubran.

Check it out

Blobmaker

This app lets you create, tweak and download organic SVG shapes.

Check it out

Paint on Mouse Move

Angela He created this stunning demo of an animated drawing.

Check it out

Gradient Borders in CSS

Some ideas on how to pull off gradient borders in CSS.

Read it

New Year 2019

A great three.js demo by Yoichi Kobayashi for the new year.

Check it out

Crossy Road with three.js

An adorable road crossing game made with three.js by Hunor Marton Borbely.

Check it out

Learning #threejs & (a little bit of) #webgl

Shirley Wu shares her journey of learning three.js by creating various experiments.

Check it out

Designers Talk: How to Be Unique in 2019?

A very nice article with interviews of designers on how to get inspired for making unique creations.

Read it

Free Font: Shnobel

An extraordinary font with interesting shapes. Free for a subscription.

Get it

Blendy

A little tool for previewing CSS blend modes on images.

Check it out

Buddience

Students from Nara University in Japan have created this project where your face is matched to a Buddha statue image using Microsoft’s emotion analysis technology.

Check it out

Making single color SVG icons work in dark mode

Hidde de Vries shows how to tackle color change in SVG icons for dark mode.

Read it

How Doom fire was done

Fabien Sanglard’s article on how the fire for Doom was coded.

Read it

From Our Blog

Awesome Demos from 2018

A collection of our favorite demos and experiments from 2018.

Check it out

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

December 27, 2018

Collective #479

Inspirational Website of the Week: Cult

A very elegant design paired with smooth effects. Our pick this week.

Get inspired

This content is sponsored via Syndicate Ads

monday.com – More Than a Project Management Tool

It’s time to get work done with monday.com! A visual project management tool for teams. Plan, organize & track your team’s projects in one place.

Try it free

Annual Awards 2018

Awwwards invites you to vote for the best of the web in 2018.

Check it out

screen.guru

Take a clean screenshot of any websites with this open source tool.

Check it out

Using DevTools to understand modern layout techniques

Chen Hui Jing shows how to use DevTools to visualize and understand how the browser handles layout.

Read it

Fiddly

A project by Sara Viera that let’s you create beautiful and simple HTML pages from Readme.md files.

Check it out

Magic Grid

A simple, lightweight Javascript library for dynamic grid layouts with images of different heights.

Check it out

Infinite Gift

An amazing finish for this year’s Christmas experiments. By Jaume Sanchez Elias.

Check it out

Creating and filling Arrays of arbitrary lengths in JavaScript

Axel Rauschmayer’s tutorial on JavaScript arrays.

Read it

An Initial Implementation of clip-path: path();

Chris Coyier shares his thoughts and wish list for the clip-path property.

Read it

Generic First CSS: New Thinking On Mobile First

Alastair Hodgson shares his methodology for implementing responsive websites.

Read it

Common CSS Issues For Front-End Projects

A useful list of common gotchas and issues in CSS/HTML. By Ahmad Shadeed.

Read it

Neural networks in JavaScript

A 19-part course that teaches you how to build your own neural networks in Brain.js through a mix of lectures and interactive tutorials.

Check it out

Parallax Self Portrait

A self-portrait that reacts to device tilt or mouse movement. Check out the demo on Codepen.

Check it out

Useful Collection of Sketch UI freebies

Bunin Dmitriy shares a handy set of user-friendly Sketch resources.

Check it out

A free set of 150 vector icons

Elmira Gokoryan created this great collection of icons from different categories.

Get it

Flameout

A fantastic paper burning simulation. Check out the GitHub repo.

Check it out

3D xmas baubles

A fun demo inspired by Christmas Collisions.

Check it out

Data Science Cheatsheets

A collection of various cheatsheets related to Data Science.

Check it out

Highlights for Game Off 2018

The winners of the Game Off challenge as voted on by the game developers themselves.

Check it out

From Our Blog

Interactive Animated Landscape

An exploration of an animated interactive landscape built with three.js.

Check it out

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

December 20, 2018

Collective #478

Inspirational Website of the Week: Rezo Zero

A sophisticated design with great typography and smooth effects. Our pick this week.

Get inspired

#merryCSSmas

Tommy Hodgins covers some of the most requested CSS styling features in a month-long series in this Twitter thread.

Check it out

Our Sponsor

Real Time Design in WordPress

Divi is powered by the Divi Builder, an insanely fast and incredibly intuitive front end editor like nothing you have seen before. It will change the way you build websites forever.

Check it out

Styling a Select Like It’s 2019

Scott Jehl shows how a reasonable set of styles can create a consistent select across new browsers, while also looking fine in older ones.

Read it

Reversing an Easing Curve

Michelle Barker walks through the math of reversing any easing function.

Check it out

I Used The Web For A Day Using A Screen Reader

Chris Ashton experiences first-hand difficulties that visually impaired users face and describes what we can do as web developers to help.

Read it

Handling broken images with the service worker

Ire Aderinokun shows how to implement a service worker for handling broken images.

Read it

Web components still need to be accessible

Eric Bailey reminds us that using modern development techniques are not a guarantee for accessibility.

Read it

Glimmer

A mesmerizing Christmas Experiment by Nicolas Riciotti.

Check it out

JavaScript Getter-Setter Pyramid

André Staltz provides a tour through the different layers of JavaScript abstractions.

Read it

Magic Sketchpad

Every time you start drawing a doodle, a machine learning algorithm tries to finish it and match the category you’ve selected. Made by Monica Dinculescu.

Check it out

Flame in the wind

Blake Bowen coded this captivating flame demo.

Check it out

Spotify Wrapped 2018 – Technical Case Study

A look under the hood at the technology and techniques used to power Spotify Wrapped 2018.

Read it

Ouch!

Super stylish illustrations for your next project. PNGs are free for a link.

Check it out

Animated Multiline Link Underlines with CSS

Danny Guo shares how to create an animated underline style for a breaking link.

Read it

I’m Awake! Stay Awake with the WakeLock API

Learn all about the Wake Lock API in this post by Pete LePage.

Read it

Writing A Multiplayer Text Adventure Engine In Node.js

A tutorial by Fernando Doglio on how to build a multiplayer text adventure engine.

Read it

Taming Data with JavaScript

An article by Brian Greig where he shares some insight on how to properly deal with data processing in the browser.

Read it

Why you should use D3

Mike Bostock lays down two reasons why you might want to use a library like D3 (or Vega).

Read it

XmasTree Game

A fun game where you decorate a Christmas tree.

Check it out

How to do this in Flutter?

A cheat sheet for React Native developers for finding Flutter alternatives to familiar concepts.

Check it out

Checking if an input is empty with CSS

An article by Zell Liew where he explores how to check if an input is empty using CSS.

Read it

Spotify Wrapped Animation using GSAP

A recreation of the effect seen on the Spotify “Your 2018 Wrapped” page. By Peter Barr.

Check it out

From Our Blog

Inspirational Websites from 2018

An inspirational collection of our favorite website designs from 2018.

Check it out

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

December 17, 2018

Collective #477

Rallax.js

With Rallax.js you can easily implement a dynamic parallax scrolling effect.

Check it out

This content is sponsored via Syndicate Ads

monday.com – A new way to manage work

monday.com is a project management tool teams love! It’s super flexible and easy for everyone to collaborate! Plan visually and see who’s doing what at a glance.

Try it free

Semi-Conductor

A marvelous Google experiment where you can control an orchestra with your body movements. Built by Rupert Parry, Melissa Lu, Haylie Craig and Samantha Cordingley. Watch the video and find out more on this page.

Check it out

Remove.bg

Remove.bg is a free AI-powered service to remove the background of any photo with people.

Check it out

I Threw Away my Mouse

Manuel Matuzovic shares his experience of surfing the web by using only the keyboard for several weeks.

Read it

Using aria-live

Ire Aderinokun explains what the aria-live attribute is and shows how to use it.

Read it

20 web design trends for 2019

An exploration of web design trends, techniques, and tools that will define website and digital product design in 2019.

Read it

Researching a Property in the CSS Specifications

Rachel Andrew shows how to learn directly from the CSS specs.

Read it

ReferenceError: x is not defined?

Lea Verou shares her brave solution of checking “x is not defined” ReferenceErrors.

Read it

Loop

A beautifully rendered demo by Guillaume Lanier.

Check it out

Take a journey through Trench

A fantastic immersive experience for the song “Bandito” by Twenty One Pilots.

Check it out

Pampy.js

Pampy.js is a fast pattern matching library for JavaScript.

Check it out

Sneaky Santa

An adorable little Christmas game by 14islands.

Check it out

Public and private class fields

Mathias Bynens explains the new public class fields syntax in V8 v7.2 and Chrome 72, as well as the upcoming private class fields syntax.

Check it out

Essentials Icon Pack

A great icon pack of popular symbols from InVision. Free for a subscription.

Get it

Spline Dance

A joyful dance animator made by Murasaki Uma for the Christmas Experiments.

Check it out

Free Font: Monoline

A beautiful script font made by MLKWSN for PixelBuddha. Free for a subscription.

Get it

Perspective Mouse Scroll

Mike Quinn recreated the perspective scrolling effect seen on PART Architects.

Check it out

What happens when packages go bad?

Jake Archibald summarizes how much damage can a malicious package have on a static site, and what can be done about it.

Read it

omi-chart

Simple HTML5 charts using the chart-x tag powered by omi and chart.js.

Check it out

Sandspiel

A “falling sand” game made by Max Bittker. Check out the source code on GitHub.

Check it out

Let’s make Machine Learning on the web and in the client happen. We need your input!

Learn about the new community group of the W3C that works on an API proposal for Machine Learning on the web. By Chris Heilmann.

Read it

Free Font: Optician Sans

Optician Sans is a free font that is based on the same visual principles as the LogMAR chart, adjusted to be used as a fully functional display typeface. It was created by ANTI Hamar and typographer Fábio Duarte Martins.

Get it

tutpad

In case you didn’t know about it: Tutpad is an online learning community for designers with high quality design tutorials.

Check it out

From Our Blog

Ambient Canvas Backgrounds

Five ambient webpage backgrounds created using the HTML5 Canvas API and jwagner’s Simplex Noise library.

Check it out

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

December 13, 2018

Collective #476

Inspirational Website of the Week: PART Architects

A bold design with many innovative details. Our pick this week.

Get inspired

This content is sponsored via Thought Leaders

Learn about design systems from the experts

Expert talks, hands-on guides, and inspirational soundbites from designers working on teams at Slack, Dropbox and Facebook, all curated by the team at Framer.

Get inspired

quicklink

Quicklink attempts to make navigations to subsequent pages load faster by prefetches URLs to the links when the browser is idle.

Check it out

The (Switch)-Case for State Machines in User Interfaces

David Khourshid introduces the concept of state machines and how they can help in the design of user interfaces.

Check it out

DebuCSSer

A very useful CSS debugging tool by Lucas Gesmundo.

Check it out

Designing for Interaction Modes

A very insightful article by Andrew Grimes on how to approach the task of designing for interaction modes.

Read it

Under

Under is a great little game written in JavaScript and GLSL with procedural graphics. By Weston C. Beecroft.

Check it out

Top 10 Albums 2018

Adam Kuhn created this slideshow of his top 10 music albums of 2018.

Check it out

Choir

A super fun demo by David Li for Adult Swim.

Check it out

Not Your Father’s Navigation Strategy: There’s More Than Just the TAB Key

Rachel Olivero explains that while the use of the Tab key for navigation is appropriate in the right circumstances, utilizing quick navigation keys and element lists can offer greater flexibility for screen reader users.

Read it

CSS-in-JS or CSS-and-JS

John Polacek has built something with fashioned CSS and JS and then again with new fangled CSS-in-JS. His message is: either approach is fine, do what is right for you.

Check it out

Keep Math in the CSS

Chris Coyier shows how keeping Math in the CSS can make things cleaner and easier to manage.

Check it out

Retro Pixel

A splendid rhythm game by Misaki Nakano for the Christmas Experiment collection.

Check it out

A Recap of Frontend Development in 2018

Trey Huffine recaps the most important frontend news, notable events, and trends in JavaScript for 2018.

Read it

Drone

A fantastic demo using Three.js Unreal Bloom effect by Baron Watts.

Check it out

Programming CSS

Jeremy Keith reminds us how powerful CSS selectors are.

Read it

What I learned in (almost) 30 days of Codevember

Brian Romer shares his Codevember experience.

Read it

Only CSS: Shooting Star

Beautiful little shooting start made with CSS only. By Yusuke Nakaya.

Check it out

Free Font: Scotland

A beautiful blackletter typeface made by Phil MacIsaac.

Get it

Meetio UI Kit (XD)

A great UI kit with more than 80 screens for Adobe XD.

Get it

So you want to use Redux

A good primer to Redux by Sérgio Gomes.

Read it

From Our Blog

Motion Transition Effect

A speedy motion transition effect for an image slideshow inspired by Gal Shir’s “Ping Pong Slow Motion” animation.

Check it out

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

August 23, 2017

Collective #343

This content is sponsored via Syndicate Ads

See What Your Users See With FullStory

FullStory helps you build incredible online experiences by capturing every click, swipe, and scroll, then replaying sessions with pixel-perfect clarity.

Try FullStory, free

Custom Elements Everywhere

A project that shows interoperability issues with Custom Elements and other frameworks, and highlights potential fixes.

Check it out

Cboard: AAC Communication Board for the Browser

Cboard is an augmentative and alternative communication (AAC) web application, allowing users with speech and language impairments (autism, cerebral palsy) to communicate by symbols and text-to-speech. By Shay Cojocaru.

Check it out

pdf-bot

A Node queue API for generating PDFs using headless Chrome. Comes with a CLI, S3 storage and webhooks for notifying subscribers about generated PDFs. By Esben Petersen.

Check it out

Free Font: Interface

Interface is a typeface specially designed for user interfaces, with excellent legibility at small sizes.

Get it

Electron Webpack Dashboard

Electron desktop GUI for the Webpack dashboard by Formidable. Read more about it in this article.

Check it out

Inside a super fast CSS engine: Quantum CSS (aka Stylo)

Lin Clark introduces the new CSS engine that is now available for testing in Firefox Nightly.

Read it

Comments on “Explaining React’s License”

Facebook refuses to remove a controversial clause from React’s license that makes developers feel stranded and insecure about FB’s open source spirit.

Read it

How JavaScript works: inside the V8 engine + 5 tips on how to write optimized code

Alex Zlatkov dives into the internal parts of Google’s V8 JavaScript engine and provides some tips on how to write better JavaScript code.

Read it

WebGL Fluid Simulation

A fantastic WebGL demo by Pavel Dobryakov.

Check it out

Implementing Push Notifications: Setting Up & Firebase

Part one of a two-part series on implementing push notifications. By Pascal Klau.

Read it

Pts.js

A great library that enables you to compose and visualize points in spaces.

Check it out

Free font: Celestina

A lovely handwritten brush font designed by Antonina Zhulkova.

Get it

Awesome Linux Software

A list of awesome applications, software, tools and other materials for Linux distros. By Luong T.T. Vo.

Check it out

How To Create A Sketch Plugin With Front-End Technologies

Zachary Schuessler shows how to use WebView to create a Sketch plugin using HTML, CSS and JavaScript.

Read it

Async/Await Will Make Your Code Simpler

Read how Patrick Triest learned to stop writing callback functions and love JavaScript ES8.

Read it

How to think like a programmer

In case you missed it: learn how to think like a programmer with these useful tips. By Zell Liew.

Read it

SVG Gradient Wave Generator

A generator by Fabio Ottaviani for creating interesting SVG wave patterns with gradients.

Check it out

Vue.js + Brunch: The Webpack Alternative You’ve Been Hungry For

Anthony Gore shows how to use Brunch with Vue.js, a Webpack alternative for faster and more compact compilation.

Read it

Run multiple versions of Chrome side-by-side

Chrome Beta and Chrome Dev can now be installed on the same Windows computer as stable Chrome and run simultaneously, allowing developers to more easily test their site across multiple versions of Chrome.

Read it

How Machines Learn: A Practical Guide

Karlijn Willems lists seven steps (and 50+ resources) that will help you get started with machine learning.

Read it

My wonderful world of macOS

A list of applications, alfred workflows and various tools that make a macOS experience even more amazing. By Nikita Voloboev.

Check it out

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

August 19, 2017

Collective #342

Inspirational Website of the Week: Formigari

An elegant design with great details and modern effects. Our pick this week.

Get inspired

Our Sponsor

Add Powerful UI Components to your React Apps with ExtReact

Learn how to build data-intensive, cross-platform web apps leveraging more than 115 professionally tested and supported Sencha components and React.

Try it for free

Increase your web development skill-set: 150 animated tips on Chrome DevTools

Umar Hansa shares some of his over 150 animated gifs which showcase how to use Chrome DevTools.

Check it out

The Lightweight Browser: Firefox Focus Does Less, Which Is So Much More

Read about Firefox Focus, the new private browser for iOS and Android, which is aimed to be simple and lightweight.

Read it

Product Graveyard

A final resting place for deceased products.

Check it out

JavaScript Events Unmasked: How to Create an Input Mask for Mobile

Learn how to tackle the challenges that come with building an input mask for mobile.

Read it

Using the Paint Timing API

The Paint Timing API arrived in Chrome 60 and Jeremy Wagner shows how to use it to capture metrics on when a page begins painting.

Read it

User Authentication For Web And iOS Apps With AWS Cognito (Part 1)

David Tucker shows how to use Cognito, a tool for enabling users to sign up for and sign into web and mobile applications.

Read it

Machine Learning Mindmap / Cheatsheet

A mind map summarizing Machine Learning concepts, from Data Analysis to Deep Learning.

Check it out

Fuzzysort

Fuzzysort is a JavaScript library for fast SublimeText-like fuzzy search.

Check it out

How to create a Neural Network in JavaScript in only 30 lines of code

A tutorial by Per Harald Borgen where he shows how to create and train a neural network using Synaptic.js, which allows you to do deep learning in Node.js and the browser.

Read it

Towards a JavaScript Binary AST

David Teller introduces the JavaScript Binary AST, an ongoing project for faster web page loading.

Read it

All the fundamental React.js concepts, jammed into this single Medium article

Samer Buna’s practical introduction to the fundamentals of React.js for those who are already familiar with JavaScript and know the basics of the DOM API.

Read it

Vim isn’t that scary. Here are 5 free resources you can use to learn it.

Fatos Morina shares some great resources for getting started with Vim.

Read it

An Intro to Compilers

Learn about what a complier does in this introduction by Nicole Orchard.

Read it

Puppeteer

Puppeteer is a Node library which provides a high-level API to control headless Chrome over the DevTools Protocol. It can also be configured to use full (non-headless) Chrome.

Check it out

Songbird: Spatial Audio Encoding on the Web

Songbird is a real-time spatial audio encoding JavaScript library for WebAudio applications by Google.

Check it out

Desktop Kit

A Sketch template of macOS UI elements from Facebook Design.

Get it

Integrating Animation into a Design System

Alla Kholmatova writes about the challenges of creating a cohesive system and ensuring consistency when it comes to integrating animations into a design.

Read it

A Gulp Workflow for Frontend Development Automation

A tutorial by Andrew Welch where he shows how to use Gulp for frontend development.

Read it

Chunky Gradient Along SVG Path

An interesting animated chunky gradient that uses stroke-dasharray and stroke-dashoffset.

Check it out

Draw a horizontal tree using CSS pseudo elements

Check out some pseudo element trickery for creating a horizontal tree structure in CSS.

Read it

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

August 16, 2017

Collective #341

Our Sponsor

You’ve Never Made A Website Like This Before

When you pick the right platform, creating isn’t a struggle! Change the way you make websites forever.

Try PageCloud today

Designing The Perfect Feature Comparison Table

Vitaly Friedman continues an excellent series on UI patterns and dives into feature comparison tables.

Read it

Speakerdex

A place for speakers to share talks and for event organizers to find them.

Check it out

Using ES2017 Async Functions

Eric Windmill explains asynchronous JavaScript and the new ES2017 feature async.

Read it

Js13kGames

Enter this year’s JavaScript coding competition and make something under 13kb. The competition started at 13:00 CEST, 13th August and will end at 13:00 CEST, 13th September 2017. Theme for 2017 is: lost.

Check it out

Thoughts on Skeuomorphic Menu Systems

Charlie Deets explores skeuomorphic and spatial menu systems, highlighting advantages and disadvantages.

Read it

Web fonts: when you need them, when you don’t

A great read by David Gilbertson on making an informed decision when it comes to using web fonts.

Read it

Free Font: Buddy Mac

A skinny all-caps font designed by Missy Meyer.

Get it

Creating a Collaborative Style Guide for Designers and Engineers

Learn how building a flexible, collaborative, and scalable typography guide helps designers and engineers collaborate better.

Read it

Hologram

A Mac app that lets you prototype WebVR interactively without prior coding knowledge.

Check it out

Foundations of Interaction Design

Read about how Christina Wodtke teaches Interaction Design in this interesting article.

Read it

How to design websites for blind and partially sighted people

Learn how to improve accessibility for people with visual impairments. By Christopher Ratcliff.

Read it

Phpbot

A PHP snippet bot that generates code examples for quick copy/pasting.

Check it out

Blender

A Sketch app plugin that distributes shapes evenly between multiple objects in Sketch.

Check it out

Teaching an AI to play a simple game using Q-learning

Learn how to teach a computer to master a simple video game using the q-learning reinforcement learning algorithm.

Check it out

Stockio

A new site with free photos, vectors, icons, fonts and videos for personal and commercial use.

Check it out

A free set of 48 free fintech vector icons

A great line icon set designed by Agente Studio.

Get it

Pretty algorithms

Common useful algorithms written in modern, pretty and easy-to-understand JavaScript along with real-world usage examples.

Check it out

Accessibility Testing with pa11y

In this article by Ire Aderinokun you’ll learn how to use pa11y, a set of free and open source tools that aims to make designing and developing accessibility easier.

Read it

Picostyle

An ultra small CSS in JS library by Masaaki Morishita.

Check it out

Free Font: Arcanista

Victor Tramontin designed this creative display font.

Get it

Sketch for Designers

A growing collection of the best Sketch resources.

Check it out

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

August 12, 2017

Collective #340

Inspirational Website of the Week: Rafael Derolez

A modern website experience with delightful details and smooth interactions. Our pick this week.

Get inspired

Our Sponsor

Take your WordPress site to the next level

Get the ultimate toolkit for WordPress. Jetpack Professional gives you everything you need to design, secure, and grow your site.

Check it out

react-beautiful-dnd

Accessible drag and drop for lists with React.js with a solid API and natural movement of items.

Check it out

Font-size: An Unexpectedly Complex CSS Property

An interesting article on the trickiness of the font-size property by Manish Goregaokar.

Read it

The Difference Between Explicit and Implicit Grids

Manuel Matuzovic explains the difference between explicit and implicit CSS grids.

Read it

Free Font: Delirium

A charismatic calligraphy typeface by Bruno Fontenelle.

Get it

Shadow DOM: fast and encapsulated styles

Learn why CSS encapsulation is so hard and what’s the fastest way to get it in this article by Monica Dinculescu.

Check it out

Roger Water

An endless flying exploration of a generative, infinite open world. A mind-blowing Chrome Experiment by Stefano Maccarelli.

Check it out

Timescale

An open-source time-series database fully compatible with Postgres for fast ingest and complex queries.

Check it out

Performant Web Animations and Interactions: Achieving 60 FPS

Emily Hayman explains all important details involved in making web animations performant.

Read it

gtop

Gtop is a system monitoring dashboard for terminal.

Check it out

Kozmoz

A next-generation bookmarking tool that will organize your favorites automatically. Currently in private beta.

Check it out

Tracking Internal Marketing Campaigns With Google Analytics

Christian Ebernickel gives an advanced masterclass on campaign tracking in Google Analytics.

Read it

deeplearn.js

Deeplearn.js is an open source hardware-accelerated JavaScript library for machine intelligence allowing you to train neural networks in a browser or run pre-trained models in inference mode.

Check it out

Real World Examples of Map, Filter and Reduce in JavaScript

A practical use case for map(), filter(), and reduce() By Tania Rascia.

Read it

How to build your personal brand as a new developer

Some useful tips on building a personal brand as a developer. By Rick West.

Read it

ES Modules in Node Today!

John-David Dalton announces the release of standard/esm, an opt-in, spec-compliant, ECMAScript (ES) module loader that enables a smooth transition between Node and ES module formats with near built-in performance.

Read it

Page speed optimization

One of the many SEO tools by Varvy that gives you very useful insights on page speed.

Check it out

Effective Tensorflow

A repo that collects Tensorflow tutorials and best practices.

Check it out

CSS Utility Classes and “Separation of Concerns”

Adam Wathan shows how to follow a functional CSS approach.

Read it

The Siren: One-page blog/magazine design concept (Sketch)

A clean and elegant Sketch website template designed by Kulikov Ilya.

Check it out

Learn regex the easy way

In case you missed it: Zeeshan Ahmed wrote this great guide to regular expressions.

Read it

Free Font: Tormentor

A lovely handwritten font made by Besttypeco for Pixel Buddha subscribers.

Get it

From Our Blog

Morphing Page Transition

A simple morphing page transition effect where an SVG path gets morphed into another while the current page moves up.

Check it out

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

August 9, 2017

Collective #339

Our Sponsor

Get a free .design domain name

Codrops readers can get a totally free domain to use for their portfolios, side projects or any other project instantly.

Check it out

Prodigy

A new tool for efficient machine teaching. Read more about it in this article.

Check it out

Lazy loading images using Intersection Observer

Learn how to put the Intersection Observer API to use for lazy loading images. By Dean Hume.

Read it

Compression Decompressed

A great article by Jack Preston that will introduce you to the basics of data compression in a visual way.

Read it

DesignBetter.Co

An essential guide that lets you discover best practices, stories, and insights from the world’s top design leaders.

Check it out

Building A Simple AI Chatbot With Web Speech API And Node.js

A tutorial by Tomomi Imura on how to implement an AI chatbot.

Read it

JavaScript for People Who Hate JavaScript

A witty article by Zach Holman on today’s JavaScript experience viewed from the perspective of a Rubyist.

Check it out

Creating an Image Zoom Library With Vanilla JavaScript

Learn how to build a simple, solid JavaScript library for adding zoom-on-hover effects to images.

Read it

Airport Distance Map

A really cool demo by Stephen Shaw powered by SVG, Vue, D3 and GSAP.

Check it out

react-simple-maps

An svg map component built with and for React. It allows the creation of pure React SVG maps using d3-geo and topojson.

Check it out

CSS Grid Highlighter for Chrome

Adem ilter made this fabulous Chrome extension that highlights CSS grids.

Check it out

Publii

A desktop app that let’s you build static blog websites easily.

Check it out

Posterus

Posterus is a library of promise-like asynchronous primitives (futures) that support true cancellation. By Nelo Mitranim.

Check it out

Side Project Marketing

A useful checklist for marketing side projects. Made by Karl L. Hughes.

Check it out

Topography of Dante’s Inferno

“The Topography of Dante’s Inferno (Infernal Topography)” is an alternative learning tool for the Divine Comedy first Cantica, made for aiding visual memory. A fantastic Chrome Experiment developed by Alpaca.

Check it out

Firefox 55: first desktop browser to support WebVR

Firefox on Windows is the first desktop browser to support the new WebVR standard (and macOS support is in Nightly).

Read it

Gorillaz – Andromeda in WebGL

A great WebGL recreation of the popular music video Andromeda by Gorillaz. By Yagiz.

Check it out

Deep structure

A fascinating demo by Gerard Ferrandez.

Check it out

JPNG.svg

Magically combine the transparency of a PNG with the compression of a JPEG. By Stephen Shaw.

Check it out

Abstract Watercolor Textures vol. 2

Some lovely high-resolution watercolor textures by Tatiana Lapina.

Get it

Browser Compatibility for CSS Grid Layouts with Simple Sass Mixins

Farley Reynolds shows how to make the fundamental aspects of Grid work across the browsers that support it, including IE versions that supported a different grid implementation.

Check it out

Binary Search in JavaScript

Brandon Morelli shows how to do binary search in JavaScript with a practical example.

Check it out

AsciiDots

AsciiDots is an esoteric programming language based on ASCII art. In this language, dots, represented by periods, travel down ASCII art paths and undergo operations. By Aaron Janse.

Check it out

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

August 5, 2017

Collective #338

Inspirational Website of the Week: RGB – Richard Gazdik

A well designed portfolio and blog with some lovely details. Our pick this week.

Get inspired

Our Sponsor

Design discovery made easy

The easiest way to search, organize and share all your customer feedback and user research in one place. NomNom is data-driven design made easy.

Check it out

StackBlitz

StackBlitz is an online VS code IDE for Angular & React for creating, sharing and embedding live projects. Read more about it in this article by creator Eric Simons.

Check it out

The Surprising Relationship Between Gamification And Modern Persuasion

A very interesting article by Akar Sumset that explains how gamification can work by showing the relationship between gamification, UX design, and BJ Fogg’s modern persuasion phenomenon, “mass interpersonal persuasion.”

Check it out

Send: Private, Encrypted File Sharing

Send files through a safe, private, and encrypted link that automatically expires. By Mozilla.

Check it out

Creating Photorealistic 3D Graphics on the Web

Learn the basics of three.js for creating photorealistic scenes in this tutorial by Engin Arslan.

Read it

A Million WebSockets and Go

An article by Sergey Kamardin from Mail.Ru on how they built a high-load WebSocket server with Go.

Read it

Hazel

This project lets you deploy an update server for Electron apps with ease: You only need to run a single command and fill out two text fields.

Check it out

Wavy ball

A fantastic WebGL shape demo by Louis Hoebregts.

Check it out

Oh yes! Async / Await

Tiago Lopes Ferreira writes about the new async/await syntax in JavaScript.

Read it

Fiber

Fiber is a free, interactive UI Kit by Framer.

Check it out

Music Blocks

Music Blocks is an interactive web based music application built in HTML5 Canvas. The application utilizes the MIDI.js library to create music sequencing in the browser. By Ariel Scott and Mike Aikins.

Check it out

Vue Time Comparison

A Vue.js demo by Sarah Drasner that makes use of the browser’s native API for .toLocaleTimeString.

Check it out

Intersection Observer comes to Firefox

Dan Callahan introduces the very useful IntersectionObserver API, that allows browsers to notify when an element’s visibility changed.

Read it

10 guidelines to improve your web accessibility

Ten web accessibility guidelines that will guarantee access to your site to any person, in spite of their disabilities.

Read it

Parallax SVG Animation Tools

A simple set of python functions to help working with animated SVGs exported from Illustrator.

Check it out

Free Font: Rana

A great display font designed by Mohamed El Dardery.

Get it

Hot and Sticky

A lovely demo by Mariusz Dabrowski built with Matter.js and P5.js.

Check it out

Building a Music Recommender with Deep Learning

A tutorial by Matt Murray where he teaches how to create a neural network based music recommender system.

Read it

Free Font: Wrangell Medium

A free weight from the Wrangell slab serif font family designed by Paul van Oijen.

Get it

Canvas Image Copy / Paste Demo

Tiffany Rayside’s demo shows how to apply image copy/paste functionality to the canvas element.

Check it out

Ten Years Ago

See what was going on 10 years ago on some popular sites.

Check it out

GitPoint

If you didn’t know about it yet: GitPoint is the most feature-rich unofficial GitHub client. Built with React Native.

Check it out

From Our Blog

Inspiration for Menu Hover Effects

Some menu link hover effects for your inspiration. Powered by CSS and JavaScript for individual letter animations.

Check it out

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

August 2, 2017

Collective #337

This content is sponsored via Syndicate Ads

See What Your Users See With FullStory

FullStory helps you build incredible online experiences by capturing every click, swipe, and scroll, then replaying sessions with pixel-perfect clarity.

Try FullStory, free!

TensorFire: Blazing-fast in-browser neural networks

TensorFire is a framework for running neural networks in the browser, accelerated by WebGL. Have a look at the powerful demo.

Check it out

Unsplash Designer Survey: What are your stock photography pain points?

Share your biggest pain points or challenges you have with stock photos and images in this survey by the folks of Unsplash, the free high-res photography library.

Check it out