Code. Eat. Sleep. Loop

Welcome to Scotch.io

Fun and practical web development tutorials.

Google Fonts Now Supports font-display!

font-display is a CSS feature that allows us to control how we load fonts. Google Fonts are used by many websites (including Scotch.io) and up until now, we didn't have the ability to c...

Read more

New ECMAScript Modules in Node v12

If you’re familiar with popular JavaScript frontend frameworks like React, Angular, etc, then the concept of ECMAScript won’t be entirely new to you. ES Modules have the import and export syntax we see often in frontend frameworks. Node uses CommonJS which re...

Read more

Create a Bouncing Page Loader with CSS3 Animations

Side projects are not only fun but they bring a whole lot of learning experience for you. While hunting for a pre-built page loader for a website I ended up coding one for myself. Initially, I had a view that implementing CSS3 animations are quite a cumbersome task so, I looked for an onli...

Read more

10 Awesome Things from MS Build Day 1

Microsoft Build is packed with gazillion announcements, fun activities, people and it's so much to fit into one article. I won't be doing justice to the event by trying to fit everything that happened today in one article but I am just going to try and highlight some exciting news for those who a...

Read more

Microsoft Announces a New "Windows Terminal"

I am a big fan of Windows (shame shame shame). I’m usually the only Surface in a sea of MacBooks. I love both platforms and work on both. My kitchen laptop is a 2015 MacBook and I’d gladly get another if they ever fix the keyboard so that it has more than 1mm of travel. ...

Read more

Build a Slack App in 10 Minutes with MongoDB Stitch

Slack is not only the fastest growing startup in history, but it's also an app by the same name and one of the most popular communication tools in use today. We use it...

Read more

Quick and Simple Search Filter Using Vanilla JavaScript

When building Single Page Applications a feature I frequently find myself adding is a simple search filter. Nothing too in depth, I'll just want a text field to be able to quickly filter over items to find specific ones. I'm going to share what I do, because it's quick to implement, perfor...

Read more

create-react-app v3, What's new?

When you're looking to setup your React developer environment, create-react-app is one of the go to ways to go about it. This package allows you to do so with minimal configuration as it creates most of the boilerplate code needed to get you up and running. The React team recently un...

Read more

Use Artificial Intelligence to Suggest 1-5 Star Ratings

A handful of products rely on reviews and star-ratings for product feedback. When customers are impressed or dissatisfied about our product, they come back to where it was purchased looking for a way to leave feedback. Apps and e-commerce products are examples of the scenarios where we would love...

Read more

An Introduction To Storybook: Organize How You Build JS Components

What is Storybook? Storybook is an open source tool for developing UI components in isolation and it integrates pretty well with most front end frameworks including React, Vue, and Angular and a host of other frameworks. It makes building stunning ...

Read more

Scotch.io Job Board

Find your next passion job, remote or on-location, all over the world.

programmer

Add Authentication and Personalization to VuePress

There are several advantages to using a static site generator such as VuePress. With VuePress, you can focus on writing content using markdown, and the VuePress application generates static HTML files. VuePress also turns your content into a single-page application (SPA), so transitions between p...

Read more

Make Browsing GitHub Easier and Faster with Octotree

GitHub is an amazing tool that many of us developers use on a daily basis. While GitHub has many great features, one thing that I've always found it to lack is browsing speed. They've got keyboard shortcuts to get to the search bar (/) but it still isn't the easiest. If you wa...

Read more

Wrap a Vanilla JavaScript Package for Use in React

Complex web projects often require the use of 3rd party widgets. But what if you're using a framework while a widget is only available in pure JavaScript? To use a JavaScript widget in your project, the best approach would be to create a framework specific wrapper. That's wha...

Read more

Getting started with visual testing in 5 minutes

There are tons of tools out there that help you make sure your app is functioning perfectly, but how do you catch bugs that are purely visual? In the example above, the button stil...

Read more

Make Gmail Cleaner with the Simplify Chrome Extension

Google Inbox is officially gone, and for many, it's a hard pill to swallow. Hardcore fans are desperate to try and fill the void that Inbox has left. Here's a piece of good news. The Simplify Gmail extension for Chrome will bring you the familiar simplicity ...

Read more