Articles

The End of an Era: Migrating from WordPress to Gatsby

On September 24th, 2015, I made the first post on this blog, which was a custom self-hosted WordPress theme. I discovered Git, I discovered WordPress, and I made 1,039 commits…

Everything I Know as a Software Developer Without a Degree

I'm not going to get into the details of my story - in short, I liked making websites as a kid, but I went to culinary school and worked in the restaurant industry for nearly a…

Using Content Editable Elements in JavaScript (React)

Any element can be made editable with the addition of the attribute. This attribute is used all over the web, such as in Google Sheets. I'm not going to tell you to use or not to…

Understanding Bits, Bytes, Bases, and Writing a Hex Dump in JavaScript (Node)

I was recently tasked with creating a simple command line program that would take an input of a file of unknown contents and print a hex dump as the output. However, I didn't…

2018 into 2019

Over the past few years, I've taken to making a list of some of what I've done over the year to help me keep track of my progress. Here are lists from previous years: 2016 into…

Build a CRUD App in React with Hooks

In the latest release of React, a new concept was introduced - Hooks . Hooks are being added to React as an alternative to classes. If you use React right now, you'll be familiar…

Website Redesign: Version 4.0

Back in July 2017, I posted about all the redesigns of taniarascia.com that happened up to version 2.0. I made many small, incremental changes to the design over the course of…

Promise.all with Async/Await

Let's say I have an API call that returns all the users from a database and takes some amount of time to complete. Now there's another call that relies on some information that…

Getting Started with React - An Overview and Walkthrough

I've been hearing about React since I first started learning JavaScript, but I'll admit I took one look at it and it scared me. I saw what looked like a bunch of HTML mixed with…

How to Promisify an Ajax Call

Let's say you have an AJAX call, and some other function that depends on the AJAX call loading before it runs. Here's the AJAX function. And you might call the two functions in…

The Simplest PHP Router

I wanted to create the absolute most basic routing code in PHP, so here it is. We will direct ALL traffic to and route to the new files from there. Redirect all requests to index…

How to Create a Snippet in Visual Studio Code

Here's how you make a custom, global snippet in VSCode. Press COMMAND + SHIFT + P to open the command palette. Find "Preferences: Configure User Snippets". Click "New Global…

Rewrite Query String to Path with htaccess

Let's say I have this URL: And I want this URL: I can do so with the following : I can even still GET the URL query. Alternatively, you could redirect everything to and route it…

How to Create and Use Bash Scripts

Bash scripting is an extremely useful and powerful part of system administration and development. It might seem extremely scary the first time you do it, but hopefully this guide…

Overview of SQL Commands and PDO Operations

Structured Query Language, or SQL , is a widely used language the allows users to query and manage data in a database. Databases such as MySQL, MariaDB, SQLite, PostgreSQL, Oracle…

How to Upload Files to a Server with Plain JavaScript and PHP

Writing the code to upload images to a server from scratch seems like a very daunting task. I'm going to make a very simple upload form to demonstrate how file data works and can…

Create a Simple CRUD Database App: Connecting to MySQL with PHP] (Part 2: Update, Delete)

In the first part of this tutorial series , I taught you how to connect to a MySQL database with PHP using the modern PDO method. We accomplished this by developing the first half…

ES6 Syntax and Feature Overview

ECMAScript 2015, also known as ES6, introduced many changes to JavaScript. Here is an overview of some of the most common features and syntactical differences, with comparisons to…

How to Paginate an Array in JavaScript

I wanted to take an array of URLs in JavaScript and be able to paginate to the correct one by clicking on the previous and next buttons. Here's the HTML code. And the JavaScript…

Basic Refactoring: Don't Repeat Yourself

Refactoring is the process of editing code to improve efficiency and readability without changing the output. I made a little example to demonstrate how a beginner can start…

Object Oriented Pattern: JavaScript Constructor Functions, ES6 Classes, and PHP Classes

I wrote an article on Understanding Prototypes and Inheritance in JavaScript for DigitalOcean, in which I explained how to use constructor functions and create new objects that…

Unit Testing in JavaScript with Mocha

Test-driven development (TDD) is an approach to development that consists of writing tests, followed by production code, and refactoring as needed. The tests are written to fail…

How to Use the JavaScript Fetch API to Get JSON Data

In How to Use JSON Data with PHP or JavaScript , I discussed how to use to get data from a JSON feed. The Fetch API is a newer built-in feature of JavaScript that makes…

How to Set Up a Cron Job in MAMP

In Setting Up a Basic Cron Job in Linux , I went over how cron jobs work and how to set one up. Recently I wanted to set up a cron job on MAMP, and could not find any resources on…

How to Create a Memory Game (ala Super Mario 3) with Plain JavaScript

I was presented with a coding exercise to make a memory game using any language. I decided such a task really doesn't require any libraries like React or jQuery, so I made it with…

2017 into 2018

Last year, I wrote 2016 into 2017 , a post summarizing what I felt I accomplished throughout the year and some of my goals for the year to come. I'm continuing that tradition this…

How to Use Local Storage with JavaScript

I like making tutorials where you build a small application completely from scratch with plain JavaScript. A to-do list is a common app idea, but without having a database to store…

How to Connect to an API with JavaScript

A big part of working with JavaScript is knowing how to connect to APIs. As a fledgling developer, you may have been told at some point to just "play around with some APIs!" to…

Basic Authentication for an Express Node App (htpasswd)

I was struggling to find a simple way to add username and password authentication to a Node.js app running on an Express server, like .htpasswd for Apache. Finally, a…

Whirlwind Tour of Europe

I've spent the past three months backpacking around Europe. I imagine that some of my friends, family, and even readers might be curious as to the whys, hows, and wheres of the…

Design for Developers: Specific Steps to Improve Your Website Design

I've noticed a lot of web developers struggle with design; they think they don't have a natural talent for design and knowing what looks good, and everything they create from…

Real World Examples of Map, Filter and Reduce in JavaScript

I don't know about you, but it doesn't help me very much to peruse through endless examples of and to try to figure out how to use a feature of a programming language. There…

How to Install and Use Node.js and npm (Mac, Windows, Linux)

In order to use almost any development tools based in JavaScript, you'll need to know how to use npm and Node.js. Gulp , Grunt , and Webpack are a few examples of popular…

Backpacking in Europe: Planning and Packing

So, I bought a one-way flight to Europe. I'm not much of a planner, to be honest, but some level of planning must be done. I'm going to lay out the most important things I've done…

How I Made a Career Change into Web Development

I'm Tania, and I made a career change into web development in 2015. Before that, I worked as a chef. I often get asked how I did it, and if I have any advice for new and aspiring…

How to Install Apache, PHP 7.1, and MySQL on Ubuntu with Vagrant

In order to run a server locally, we need to set up an environment for the stack, or server, database, and language, to run in. An easy way for beginners to do that is to set up…

What are Vagrant and VirtualBox and How Do I Use Them?

I've gotten to the point in my web development career where I can no longer avoid the words VirtualBox , Vagrant , and Docker . Thanks to my friend Timm Stelzer, I finally got…

Web Developers and Bloggers I Follow (2017)

Over the past few years, my RSS feed has begun to fill up with a number of amazing and inspiring web developers, entrepreneurs, and bloggers. I encountered most of them while…

The Beginning of the Next Phase

Today is a pretty big day for me - it's the last day of my first full-time web development job. I began my career change journey about three years ago, and I can't believe how much…

Website Redesign: Version 2.0 (863 Commits Later)

From September 24th, 2015 to June 10, 2017, I've made 863 commits on my personal website, taniarascia.com. That means there's technically 863 versions of the site - but most of…

How to Generate a Public Key from a Private Key

Recently, I needed to find the corresponding public key from a private key ( ) to give a Linux user access to a server. I used the below code to generate the public key. This code…

The Three Types of Can't

It looks like there's just one definition for the word can't . can't - cannot I've found that there's actually three true meanings behind the word. Don't want to Don't know…

Create a Simple CRUD Database App: Connecting to MySQL with PHP (Part 1: Create, Read)

In this tutorial, we're going to learn how to make the beginnings of a very simple database app, using PHP and MySQL. It will be half of a CRUD application, which stands for C…

Smooth Scroll to ID with jQuery

Here's a quick snippet of jQuery code I use often when I need to smoothly scroll to an ID. Just change the to whatever speed (in milliseconds) you want the page to scroll at…

Prevent Mouse Scroll from Zooming on Embedded Google Maps

If you embed a Google Map into a website, they'll give you some HTML that looks like this: And the embedded result will look like this. You'll notice that when you scroll over the…

A Practical Guide to Search Engine Optimization (SEO) with Google

Most of the traffic to my site comes from organic Google searches. Searching for how to make a wordpress theme , how to use bootstrap , and jekyll tutorial , including…

Crossfade Between Two Images with CSS Animations

A website I worked on wanted an animated, flashing neon sign. A gif is the first thing that comes to mind in such a situation, but unfortunately gifs do not allow partial…

Background Position Fixed and Cover with CSS

I wanted to make a section of a website have a div featuring a background image that had both and , regardless of the image's size. This website is a working example of…

Redirect all HTTP requests to HTTPS

If you have SSL/TLS set up on your server, you might need to force the site to redirect to the secure HTTPS version. If you need to know how to obtain the certificate, read about…

Simple jQuery Examples with Code and Demos

Recently, I wrote a beginner's guide to using and understanding jQuery for Digital Ocean . I found the official jQuery documentation difficult to understand, especially for…

How to Use JSON Data with PHP or JavaScript

JSON is used to transmit data between a server and a browser. Here is a basic example of what might be in a string. As you can see, it's a human readable format of data that…

How to Use the Command Line for Apple macOS and Linux

You might be like me - I used computers for twenty years without ever touching a command prompt. I didn't know anything about it, and it seemed scary and overwhelming. I thought it…

2016 into 2017

A year is just one thing - one revolution of the Earth around the Sun. Here are a few things I did. I wrote 14 articles. That’s a little over one article per month. I did my best…

Setting up a Brand New Mac for Development

I just got a new MacBook Pro, and I decided to research the fastest, most efficient method to set up a clean, organized, and up-to-date development environment for my new computer…

Productivity: How I Use Technology to Organize My Life

Time is the most valuable asset you have, and depending on how you use technology, it can either drastically hinder or improve your productivity. I'm very much a minimalist, and I…

My Complete Front End Web Development Setup

I'm a self-taught web developer who has been working professionally in the field since June, 2015. I'm going to write about the setup, programs, and plugins I use on a daily basis…

Styling UI Components from Scratch: Buttons & Forms

It's hard to style basic web components if you've never done it before. You want your buttons and forms to look good and also be cross-browser consistent. The easiest solution…

Setting Up a Basic Cron Job in Linux

Recently, I had to set up a scheduled task on a server, which is a little intimidating and scary the first time around, so here's a quick article about the steps for setting up a…

WordPress Theme Development: Creating Custom Fields and Meta Boxes

In the first part of my WordPress tutorial series, we learned what WordPress is and how to create and use a basic theme . In part two , we learned more advanced concepts like…

How to Build a Responsive Image Gallery with Flexbox

You may have noticed I've updated the site to include a front page with a grid listing all the tutorials . As you resize the screen, it goes from three columns, to two columns, to…

Adding Syntax Highlighting to Code Snippets in a Blog or Website

I've received a few requests on how to highlight the syntax of snippets of in a blog like I have. Here is an example snippet of SCSS code, so you can see exactly what I'm referring…

Parallax Scroll Effect

Parallax scrolling, an effect that allows sections of a website to scroll at different speeds, is an effect that has gone through various stages of popularity over the last few…

Straightforward Guide to Setting Up a Gulp Workflow

Can I just have a tutorial that tells me exactly what I need to do and know to set up Gulp, without spiraling into some unrelated discussion about HTML semantics , you wonder? Yes…

Obtain a TLS/SSL Certificate and Enable HTTPS Encryption

This article begins with the assumption that you're not looking for an in-depth explanation of what HTTPS is, how encryption works, the difference between TLS and SSL, or why you…

WordPress Theme Development: Pagination, Comments, Functions, & Custom Posts

In part one of the tutorial series Developing a WordPress Theme From Scratch , we learned what WordPress is, what it can do, and how to do the following: Set up a local Apache…

Getting Started with AWS - Setting Up a Virtual Server

Amazon Web Services, or AWS, is a set of web services provided by Amazon.com. If you're looking for web hosting through AWS and have only had experience with managed hosting…

Learn Sass Now: A Guide to Installing, Using and Understanding Sass

Sass is a CSS preproccessor that can make writing CSS faster and more efficient. You might have heard of Sass, but not know how to set it up or integrate it with your projects. We…

Make a Static Website with Jekyll

Jekyll is a static site generator that runs on the Ruby programming language. You may have heard of Jekyll or static site generators, but don't know how or where to get started…

Full Screen Navigation Overlay

One current trend in navigation styles that you may have seen is the full screen navigation overlay. With this type of navigation, toggling the navigation will overlay the menu…

Google Maps APIs for Multiple Locations

I was working on making a locations page for a multi-location restaurant concept. The overwhelming trend currently is to include a Google map with a marker for each location. Huge…

What is Bootstrap and How Do I Use It?

If you have any sort of interest in web development, you've likely heard of Bootstrap . According to the official website, Bootstrap is the most popular HTML, CSS, and JS…

From Cooking to Coding

It's difficult to think of two careers more contrasting than chef and web developer. I would venture to put myself into a fairly unique category of people who have done both…

Off Canvas Navigation

One of the more minimalist approaches to responsive navigation is the off canvas navigation method. This method utilizes the ubiquitous three-line hamburger menu, which prompts a…

You Don't Need a Framework: Understanding the Fundamentals of Responsive Design

Responsive web design is an approach to creating websites in which the layout adapts to fit the device's screen - whether it's a phone, tablet, laptop, desktop, TV, or hologram…

RSS Feeds

I've always seen RSS feed buttons all over the web, but I didn't understand what they were for or how to use them until now. You might think a simple Google search would clear it…

Migrating a WordPress Site to a Live Server

If you already know how to set up a local server and get WordPress up and running, migrating to a live server is extremely simple. We'll avoid the dreaded "Error establishing a…

Getting Started with Grunt and Sass

You've probably heard of Grunt , the JavaScript task runner that runs on Node.js . Maybe you've tried to get it up and running, but got lost or confused during setup. Maybe you…

Developing a Wordpress Theme from Scratch

You know HTML, CSS, and JavaScript. You can make beautiful websites. Maybe you've heard about WordPress, but aren't entirely sure how to implement it, or why you might need it…

Setting Up a Local Server Environment

My early experiences with web design and development only involved the front end - HTML, CSS and some JavaScript. As long as I had a browser, I was set. Eventually as a web…

Setting Up Virtual Hosts

Did you read about how to set up a local server environment , or do you already know how to do that? The next step is setting up virtual hosts . I've found most - if not all - of…

How to Create a Flexbox Grid

The flexbox layout module is good news for web developers everywhere. The part where all major browsers now support it is even better news. A lot of fantastic resources…

Responsive Dropdown Navigation Bar

Bootstrap and Foundation have fantastic navbars that you can use if you choose to base your layout on their framework. For my own projects, I chose to make a customizable…

Basic HTML5 Skeleton File

I often like to start my projects from scratch and stray away from using frameworks. HTML5 Boilerplate is a really great resource for creating a style-agnostic web project…

Getting Started with Git

Git is a difficult subject to tackle for self-taught web developers who didn't learn to code with a team. If you've always worked alone and want an explanation of how to get…