Scotch.io's Real-World Vue Book is launching! Get 50% Off

Code. Eat. Sleep. Loop

welcome to scotch.io

fun and practical web development tutorials

Byte Sized Computer Science: Order of Operations

Introduction As a coder, you're probably pretty used to telling computers what to do. Type up some code, run it, and the computer gets to work executing whatever command you gave it. Even though we have this powerful reign over computers, there's still a lot of magic con...

Read more

The New Windows Terminal Is Now Available to Download

In May, Microsoft announced that they would release a brand new Windows Terminal. You can now download it from the store here: https://w...

Read more

Build a Low Latency, Globally Distributed Python App using Macrometa's Geo-Distributed Database Cloud.

In this tutorial, I'm going to show you how to quickly and easily build a distributed database backend that spans across North America (Los Angeles & Ashburn VA), Europe (Frankfurt) and Asia (Mumbai, India). We're going to build simple python application on Macrometa's serverless geo-d...

Read more

Handling File Uploads in GraphQL and Vue

In this tutorial, I'll be showing you how to hand file uploads in GraphQL by building a fullstack app. The tutorial will be divided into two main sections: building the GraphQL API and the frontend app. The GraphQL API will be built using Apollo Server and the frontend app will be built with Vue....

Read more

Deep Dive into GraphQL Mutations

This is a continuation on the series i’ve been doing on GraphQL Actions. In the last post on this series we worked on a Deep Dive into Queries. This time, we will take a closer look at Mutations. There’s a lot of similar...

Read more

Use Vue.js Data Binding Options for Reactive Applications

Vue.js is known as a "progressive framework for building user interfaces". There's a lot to unpack in this simple statement. It's easy to get started with Vue.js, with a minimal feature set, and then layer in more of the framework as you need it. Unike React, it has full support for the MV...

Read more

Why I'm Switching to YouTube from Twitch for Live-Coding

A few months ago, I started live-coding and streaming on Twitch. It was an experiment to get closer to the community and give back to let people see my coding/writing/editing process. I wanted to show off all the things I do when building ...

Read more

Detect Responsive Screen Sizes in Angular

Most of the time, we use CSS media queries to handle responsive, screen size changes to layout our content differently. However, there are times where CSS media queries alone isn't sufficient for that. We need to handle the responsiveness in our code. In this article, I would like to share...

Read more

Building a UI Component with React and Storybook

In the previous article, I gave an Introduction to Storybook and how it can be used to organize and build JavaScript components. Storybook is a UI library that can be used to document compo...

Read more

Easily Deploy a Serverless Node App with ZEIT Now

I wanted to deploy a simple demo node app the other day using Now, and I got into a lot of difficulties and gotchas, with little help from the official docs. If you are in my shoes, this is for you, otherwise, read on to find out how to deploy a node app easily u...

Read more

Build a To-Do application Using Django and React

Web development has grown rapidly over the last decade, and there's a long list of frameworks to choose from when building your projects. A developer’s decision on what framework(s) to use for a project is usually influenced by a number of specific factors; one of which is the complexity of th...

Read more

Closures and Currying in JavaScript

What are Closures? If you write code in JavaScript it's quite likely you have come across the term closure, which is a useful yet often confusing concept. But just what is a closure? A closure may be described as a combination of a function and the lexic...

Read more

Deploying an Angular App to Netlify

Netlify is one of the best places to deploy an application or a website today. There is no need to manage a server, NGINX, certificates, or scaling due to high traffic. While it is first thought of as a place to deploy your JAMstack site, it can also be used...

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

Create a Custom useFetch() React Hook

A custom hook is a JavaScript function with a unique naming convention that requires - the function name to start with use and the function may call other Hooks The whole idea behind custom hooks is just so that we can extract component logic into ...

Read more