Code. Eat. Sleep. Loop

Welcome to Scotch.io

Fun and practical web development tutorials.

Animated Page Transitions in Gatsby Websites

GatsbyJS is a React-based static site generator powered by GraphQL. It makes it possible for you to code and develop your site, while Gatsby transforms it into a directory with a single HTML file with all your static assets. On it’s own Gatsby is fast and comes already preconfi...

Read more

Build an Ionic 4 App with User Login and Registration

Ionic allows you to develop Progressive Web Applications (PWAs) and hybrid mobile apps. PWAs are web applications that run in a browser and allow for offline capabilities via service workers. They can be installed on desktops and mobile devices, just like you install apps on your smartphone. Hybr...

Read more

What’s New in Tailwind CSS v1

Tailwind has finally released a major version of the utility based styling library. Tailwind is a utility-based CSS framework that just hit a big milestone: v1!!!...

Read more

CSS Scan: The Fastest Way to Inspect and Copy CSS

CSS Scan is a super cool tool I've just learned about from Chris Nwamba. It allows you to inspect and copy CSS. It's definitely the fastest way I've seen to copy CSS from a website. ...

Read more

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

Scotch.io Job Board

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

programmer

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

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