Automating a Gatsby Blog with GitHub and Buddy

Launching a successful blog or website means your server will need to be able handle traffic that will increase rapidly in the coming months. An effective advertising campaign or a partnership with a content distributor can easily generate 10x more traffic ... more

Animations with the Canvas API - Part 3: Gravity and Dynamic Rendering

Over in Part 2 of this series we created a ball that would ricochet around the screen and change color when it collided with a border. Now we’re going to use what we learned to make this rain animation that dynamically renders drops with particle effect ... more

Command-line Basics: Downloading Files with cURL

Client URL, or simple cURL is a library and command-line utility for transferring data between systems. It supports a myriad of different protocols and tends to be installed by default on many Unix-like operating systems. Because of it’s general availability, ... more

Working with Futures and Streams in Dart and Flutter

The most important features of almost any app relies on the ability to interact with external API’s and databases. With that comes the problem of dealing with code that runs in an order different to how it was written while waiting for certain requests ... more

Animations with the Canvas API - Part 2: Basic Collisions

In Part 1 of this series we went over the basics of rendering reusable objects to the canvas, using our GUI for more intuitive controls, and creating the illusion of basic movement with our animation loop. In this part we’ll get comfortable with creating ... more

Understanding Variable Scope in JavaScript

The scope is the execution context of a variable or function. It defines what data it has access to. This concept may seem pretty straightforward, but has some important subtleties. JavaScript has traditionally had two types of scope: global scope and ... more

Animations with the Canvas API - Part 1: Linear Motion

In this series, we’ll be exploring by example some of the common methods and patterns for creating stunning and interactive JavaScript animations with the HTML canvas element. Prerequisites Understanding how to render basic shapes is necessary, which ... more

Command-line Basics: Background and Foreground Processes

Ever run a command that you knew would take a long time to run, and you end up stuck leaving the terminal open eagerly waiting for it to finish? I have and it sucks. Fortunately from the command-line you can push processes to the background and recall ... more

How to setup Firebase with Flutter for iOS and Android Apps

Firebase is a great backend solution for anyone that wants to use authentication, databases, cloud functions, ads and countless other features within an app. Luckily for us, Flutter has official support for Firebase with the FlutterFire set of libraries. ... more

Flutter: Getting a User's Location with the Geolocator Plugin

Ever wanted to get a user’s location within your Flutter application? We’re going to be building an application that does exactly that by taking advantage of the Geolocator plugin. Creating a new Flutter project As always, we’ll start off by setting ... more

Flutter: How to Use the WebView Plugin

Displaying webpages inside of your Flutter applications is easy with the use of the WebView plugin. In our example application, we’ll look at how to create a custom Widget that can be used throughout our application to launch a WebView from anywhere. ... more

Adding and Removing Packages Using npm or Yarn

One of the beautiful things about both Open Source and the ecosystems of modern programming languages is that there’s a good chance the code you’re about to write has already been written. There are a plethora of packages out there for Node.js and between ... more

Infinite Scroll in Angular Using the CDK

When dealing with a large amount of content, you may find it useful to add an infinite scroll feature to your site. When I say infinite scrolling , I’m referring to a page appending new content as the user continues to scroll, giving the page the illusion ... more

Draw the Alligator.io SVG Logo with GreenSock

To get the most out of this article it is important that you have a solid understanding of JavaScript. We will be solely focusing on understanding GreenSock in this article, so if you haven’t used JavaScript before then get learning and come back! What ... more

Renderless Behavioral Slots in Vue.js

Let’s go over the renderless slot pattern in Vue and see the problems that it can help solve. Introduced with Vue.js 2.3.0, scoped slots have considerably improved component reusability. For example, the renderless component pattern emerged and solved ... more

Using the Trim String Method in JavaScript

It’s always helpful to have an easy method method on strings to remove trailing or leading whitespace and the trim() method available on JavaScript strings is here to help us with doing exactly that. Whitespace can anything such as spaces , tabs , no-break ... more

Command-line Basics: Symbolic Links

Symbolic links allow you to links files and directories to other files and directories. They go by many names including symlinks, shell links, soft links, shortcuts, and aliases. At a glance, a symbolic link looks like just a file or directory, but when ... more

Comparing CSS Pseudo-Classes: nth-child vs nth-of-type

CSS has a number of pseudo-classes to help you style your app with ease. Having lots of options can be great, but it can also be confusing to know which pseudo-class to use and what it really does. Here we’ll look at CSS’s nth-child and nth-of-type pseudo-classes ... more

What is the preventDefault Event Method in JavaScript?

In this article you’ll learn about the event.preventDefault() method. It’s a reminder of how much control we have over the client (the browser) when programming in JavaScript. If you’ve ever doubted how much power JavaScript gives you, try using event.preventDefault() ... more

Using if Blocks in Svelte

In this tutorial, we’ll see how to use the if blocks with the Svelte framework to add some flow control logic to our Svelte markup code. Blocks in Svelte start use the {#block}...{/block} syntax, so if blocks use the {#if}...{/if} syntax. And, as you’ll ... more

A Simple Way to Animate Scrolling Effects in JavaScript

Gone are the days of using JavaScript plugins to animate scrolling. In this article, you’ll learn about a native way to accomplish this that you may not have heard of yet. It’s actually really easy to natively animate scrolling. Instead of using this ... more

Introduction to the typeof Type Guard in TypeScript

In certain cases we’d like to act differently on a passed-in argument depending on it’s type. This is where the typeof guard comes into play. Say we have an employeeInfo function that accepts either a number or a string using a union type. Depending ... more

Command-line Basics: Timing Command Execution

The command-line is full of a bunch of small, single purpose utilities that can help eliminate the need of writing any additional code yourself. Sure, you could track the start and end times and calculate the difference to get the duration. You could ... more

Creating a Basic Layout in Flutter

As Flutter quickly becomes one of the leading technologies in app development, it is important for even someone in the web dev environment to check out. Coming from a background of HTML, CSS and JavaScript, the way Flutter handled everything seemed extremely ... more

Using the Array.find Method in JavaScript

The JavaScript Array.find method is a convenient way to find and return the first occurence of an element in an array, under a defined testing function. When you want a single needle from the haystack, reach for find() ! When to Use Array.find The function ... more

Creating Complex Animations in React Using react-spring

Before, we went over how to create single animations with react-spring. Now we’ll be looking over the different methods for combining multiple springs for more complicated animations. Prerequisites Knowing how to create basic animations with useSpring ... more

Using TypeScript with Vue Single File Components

You might be asking yourself, “What is TypeScript”? Well, it’s one of the fastest growing programming languages that’s what! It’s a JavaScript superset created by Microsoft and turns the loosely typed language into strictly typed one; basically, it’s ... more

Change Text Case with CSS's text-transform Property

CSS’s text-transform property offers a simple way to change the case of your text. It’s a small but helpful tool that’ll make sure you never have to worry about hard-coding text in a specific case. Here we’ll take a look at all your text-transform options ... more

react-notifications-component, a Powerful React Notifications Library

In this article, we’ll look at the new release of react-notifications-component (v2.0.6). It’s a React component that provides you with a fully-featured notification system that will save you the time & effort of building one yourself. Let’s start ... more

What's the Difference Between var, let and const in JavaScript?

In this article, we’ll cover the differences between var , let , and const . You’ll also learn some prescriptive rules to know when to choose one over the other. With ES2016, two new ways to define variables were introduced with let and const . Before ... more