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...
welcome to scotch.io
fun and practical web development tutorials
NEW! 🔥
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...
Where should you start?
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...
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....
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....
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....
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...
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 ...
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 ...
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...
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...
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 ...
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...
Scotch is Joining DigitalOcean!
I have some big news for the Scotch community. As of today, Scotch is joining the DigitalOcean family! This is a huge deal, and you probably have a ton of questions. In the short version, DigitalOcean is extremely community driven and is committ...
Web-Scraping Made Easy With ScrapeStack
At a particular point or another, you may want to build a simple bot for scraping website data. For example, on a link sharing website, you may want users to be able to see a meta preview of the what the shared link is about without the user needing to waste time visiting the URL. You fire...
Build a Star Rating Component for React
Who doesn't love beer? When you drink a great beer you want to tell someone. You definitely want to be able to remind yourself of the great beers you've had. Enter Brewstr, a beer rating application that allows you to enter a beer you're drinking and give it a rating. This way, you know what to g...
