Pedro Botelho | Fuel Your Blog

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