January 14, 2021

If you’ve ever used something like Drupal, Laravel, or Adonis, you’ve likely encountered a template engine. A templating engine is a tool that a framework can use to assist in scaffolding a front-end for a website or webapp. The engines used in the aforementioned tools are Twig, Blade, and Edge, respectively. These languages allow you to write HTML like structures while retaining the ability to insert variables and use logic within the structure. Today I will be talking about one of the most popular templating languages for Node.js applications, Pug.

Pug, formerly known as Jade, released it’s…

By learning a few commands can open a new world of functionality as a developer. Today I’m going to cover some of those basic commands to get you going.

I recently attended a talk which compared the Linux command line to magic in Harry Potter. Although I went into the talk a bit skeptical, I ended up being very impressed with how well the analogy worked. He talked about how they’re both very powerful but when you don’t know what you’re doing, they can be very dangerous. …

In the third part of this series about WordPress and Gatsby js, we will be creating pages using templates and components using data from WordPress.

So far, we’ve talked about what themes and plugins to use for a WordPress back-end and why. We have also created a new Gatsby js site and set it up to create routes for our blog posts programmatically. We will be using the same skills for some of the things in this post since we probably want to have a default template for our static pages. …

Note: This is part two in a series of posts about Gatsby.js and WordPress. You can find Part One here, and Part Three here.

In the last post, we covered setting up WordPress for use with Gatsby. Today we will cover how to pull the data from WordPress into Gatsby and build pages.

I have set up a wordpress site for us to use with the plugins mentioned in the last post as well as some dummy content for us to use. If you’re curious, my favorite lorem generator is Fillerama which offers random content from Futurama, Monty Python, Star…

Note: This is part one in a series of posts about Gatsby.js and WordPress. You can find Part Two here.

Ever wondered how to use Gatsby js with WordPress? This post will cover everything you need to know about getting WordPress ready for a Gatsby site.

In a previous post, we spoke about using React js to build a front-end for a WordPress site. We talked about a simple setup to do this, but also mentioned some drawbacks to doing this.

One such drawback is the difficulties faced when trying to rank for SEO, because search engine crawlers have a…

Today we will be covering a few popular methods to style our React JS applications such as Styled Components and Sass to explain the benefits of both.

There is a battle raging in the online development community about whether or not people should be using CSS-in-JS, or CSS-in-Javascript. This post is not to agree or disagree with any of those viewpoints, but rather to give an introduction so you can decide for yourself.

The two tools we’ll be covering today are Styled Components, which is a CSS-in-JS library that makes it easy to implement in a React js project. …

In this article, we will cover how to use WordPress as a headless CMS by leveraging the WordPress API and React js when building a project.

If you’ve ever wondered whether or not you can use React with Wordpress, the answer is yes. If you’ve built wordpress sites before then the solution may not be as obvious as one might expect.

What is a Headless CMS

Before we get into the code, it may be useful to explain how we will handle this. You may have heard the buzz word “headless cms” tossed around if you’ve searched for an easy way to manage content for…

I know, I know…another task app…

Hear me out though! We are going to build a task app that also filters the list based on a search query in real time. Sound complicated? It’s not as complicated as you may think, so let’s dig in!

A quick note before we begin: I’m going to be using Parcel as a bundler. It’s pretty awesome and SUPER easy to set up. …

If you’re anything like me, react state was a somewhat confusing concept at first. Props were easy enough to grasp, but state was a harder piece to get my head around. How is it set? Why use that if props can handle data? In this react.js tutorial, we’re going to answer those questions and more.

Props are pieces of data passed into a child component from the parent while state is data controlled within a component

React.js State vs Props

Props and state both have their place within react. There are instances where each one is appropriate and I can’t imagine trying to build…

Note: The code for this project can be found here.

If you’ve been around in the developer world for a while now, you’ve probably come across comments or articles which mention “stacks” such as MEAN, LAMP, or XAMPP.

Today we will be diving into the MERN stack which is similar to the aforementioned MEAN stack. I will explain what it is and how to use it when building a web application or website. Let’s dive in!

What’s a “stack”?

Perhaps the first item to discuss is the idea of a “stack”. There are many different stacks out there, but they are all just…

Tim Smith

I am a full-stack web developer from the midwest.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store