Overview of set-up and configuration

Easy Integration

The Netlify CMS is a great option for creating a customizable template for editing content on your Jekyll site. It is an open-source React application that offers the capability to edit and add text and/or media to your site with a real-time preview. There’s a wide range of customization options available via UI widgets and plugins.

Once your Netlify site is connected to the GitHub repo for your project, you’ll also have access to previews of pull requests and the CMS editor page.

Configuration

The quickest way to get started is to use a template. However…

Getting Started

As a static site generator, Jekyll gives us the ability to take text written in a markup language and insert that content into pre-defined layouts to be displayed in a browser. This is great for simple sites that don’t require a backend or database.

Jekyll is written in Ruby, so it does require the installation of Ruby before getting started. You’ll also want to install the Jekyll gems by entering the following command in the terminal while in your projects directory.

gem install jekyll bundler

Starting a new project is as easy as typing ‘jekyll new’ followed by the name…

A simple-to-use Enzyme alternative

Intro to RTL

The React Testing Library was created by the software testing guru, Kent C. Dodds. The goal was to provide a replacement for the popular JavaScript testing library, Enzyme that is more lightweight and eliminates the possibility of ‘damaging testbases’.

Kent is an advocate for good testing practices. He has written many blog posts on the topic that are publicly available and highly recommended. He explains the importance of writing tests that are maintainable meaning that they will still pass if the code being tested is refactored. …

A Space Limitation Solution

Mongo DB stores document-based records as BSON objects. These objects have the same format as JSON objects but include some additional information in a richer format. Persisted documents can only hold a maximum of 16 megabytes.

Due to this limitation, it’s best to be mindful of the data that is being stored in each collection. This can get tricky if you need to refer to another collection in the object fields. For example, if you’re creating a database regarding stats for basketball players, you might want to include the name of the team that a specific player belongs to. Hypothetically…

Structuring MERN Application Back-end

MVC Overview

When beginning a new project, there are several different methods that can be used to set up the overall file structure and flow. One of the most commonly used architectural patterns is called MVC. This is an acronym for Model, View, Controller.

This pattern is favored because of its alignment with the computer science design principle, Separation of Concerns. By dividing up responsibilities within our file structure, we can encapsulate information to be referred to via abstraction and maintain cleaner codebases.

The MVC structure separates concerns by making the Model responsible for data being used by…

Introduction to Creating and Running Containerized Programs

What Is Docker?

If you’re dipping your toes in the world of DevOps or Cybersecurity, it won’t be long before you start discovering some chatter about Docker, Kubernetes and, containerization. These topics can seem pretty complex and to be honest, they kind of are. However, you don’t have to fully understand all of the inner workings of Docker to start enjoying the benefits it offers.

At a high level, Docker is like an ecosystem of services that allows programmers to create and run something called containers. A container is an isolated environment that wraps up everything…

JavaScript-based Library for Mapping Anything!

Getting Started

Geolocation features have many uses in modern applications. The user might be looking for businesses closeby, planning a trip or tracking their workout trail. There are tons of use cases where being able to show and update locations on a map is necessary.

GoogleMaps API is a popular choice, but there’s another tool that I highly recommend called Mapbox. It comes with an extensive list of properties that allow you to customize your view and there’s some fantastic built-in styling features as well. Mapbox GL JS is JavaScript-based as you may have guessed by its…

Graphics That Offer Clarity

Scalable Vector Graphics

If you’re new to web development, opening up an SVG file for the first time can be a little overwhelming. Why is it so huge? What are all of these foreign attributes? Why does it not respond to CSS styling in the same way other image files do? It might be intimidating but once you see how scalable and customizable these files are, you’ll definitely prefer to utilize them whenever possible.

Raster vs. Vector

Comparing raster and vector graphics is like comparing old-school Super Nintendo games to modern 4K HD films. Raster graphics use a dot matrix data structure…