We're live-coding on Twitch! Join us!

welcome to scotch.io

fun and practical web development tutorials

Exploring the New GitHub CLI

GitHub recently announced their new CLI offering. cli.github.com It allows us to do GitHub work directly from the command line....

Read more

Get Started with Tailwind CSS in 15 Minutes

Tailwind CSS is a CSS framework that gives you utility classes instead of pre-built components. One of my favorite things I've found after using Tailwind: You'll never need to override CSS framework classes again. ...

Read more

Create a CSS/JS Countdown Timer

I was watching Disney+ the other day (Mandalorian rocks!) and I saw a neat UI for auto advancing a user to the next episode. It was a button with a countdown. I thought "Can we make that in CSS?!" Let's go ahead and make it! What We'll Build Here is our countdown timer. You...

Read more

Accurate Forward & Reverse Batch Geocoding REST API Geocoding is the ability to provide geographical coordinates based on a known address. This is also known as forward-geocoding. Reverse-geocoding is the ability to input geographial coordinates and get an address back from those coord...

Read more

Flight Tracking with aviationstack Real-Time Flight Tracking API

aviationstack is a suite of API used in tracking flight data. This is useful for individuals who are interested in building a flight booking or tracking system. Features It’s free to get started, so you can evaluate if this is suitab...

Read more

Recreate the Spotify Album Page with Tailwind CSS

Tailwind CSS is an awesome tool that changes the way we write our HTML and CSS. Tailwind is a "utility-first CSS framework" that I initially wasn't sure about. Our HTML gets pretty busy when using Tailwind, but I've found it's not that bad of a tradeoff....

Read more

Recreate Google.com with Tailwind CSS

Tailwind CSS is an awesome tool that changes the way we write our HTML and CSS. Tailwind is a "utility-first CSS framework" that I initially wasn't sure about. Our HTML gets pretty busy when using Tailwind, but I've found it's not that bad of a tradeoff....

Read more

Recreate the Tweet Creation Modal with Tailwind CSS

Tailwind CSS is an awesome tool that changes the way we write our HTML and CSS. Tailwind is a "utility-first CSS framework" that I initially wasn't sure about. Our HTML gets pretty busy when using Tailwind, but I've found it's not that bad of a tradeoff....

Read more

Build a Weight Tracker App with Node.js and PostgreSQL

Did you make any resolutions this year? One resolution I seem to make every year is to lose weight and exercise. Sometimes I even stick to it. A good way I have found to keep on track with any resolution is to record progress. There's something about visualizing progress that help...

Read more

5 Things I Love About My Website Built with Next.js

This site is home to certain tech and web dev goodies that make me very happy. This post is about what they are, and how they work. 1. It follows light/dark mode based on your preference While most websites these days come with some type of dark/light mode toggle switch, I serve ...

Read more

Why I'm Excited to Attend and Speak at Reactathon

Reactathon is happening in San Francisco on March 30-31. It’s got a solid lineup of attendees and speakers. Definitely gonna have an amazing “hallway track” at this conference. Get $50 off Reactathon ...

Read more

Get Your JAM on With Gatsby, React, and Netlify

Gatsby is a tool for creating static websites with React. It allows you to pull your data from virtually anywhere: content management systems (CMSs), Markdown files, APIs, and databases. Gatsby leverages GraphQL and webpack to combine your data and React code to generate static files for your web...

Read more

Real-Time Google Search Results API with serpstack

SERP stands for Search Engine Results Page. serpstack is an API that queries the result page of search engines and gives you a clean JSON response. Search engines like Google used to have straight-forward result listing which made scraping them a whole lot easier. Now, there’s videos, i...

Read more

How Buddy Turns DevOps to NoOps the DigitalOcean Way

In 2019, DevOps still remains something of a codeword: a sphere reserved to developers trained in writing complicated scripts for tools only they know how to use. Tools whose purpose is to make your life easier with automation, but somehow: take weeks to configure and launch ...

Read more

Build a chat app with Laravel and Vue

It's been a while since I wrote about Laravel and thought I should do something fun with it. In this tutorial, I will show you how to build a web-based chat application using Laravel and Vue.js quickly. With a simple step by step guide, you will be able to create a system that supports user authe...

Read more

Host websites with a $100 credit