Create and Query Postgres Database
Why Postgres
There’s a number of options available when it comes to choosing a database when starting on a new project. You could use JavaScript-based MongoDB which stores data as documents. While you can link related data to documents in MongoDB, using a relationship-based database could be a better option if you’re looking to run complex queries.
Postgres uses SQL which stands for Structured Query Language. This is a human-readable language that has the ability to get very specific results. Postgres, MySQL, SQLite, and Oracle are all SQL databases that store information in a table-like format.
One advantage of Postgres is that…
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…
An Overview of Setup and File Structure
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 bundlerStarting 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. …
Creating Virtual References within Database Schema
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…
Toggling Classes to Uncover Secret Elements
When you want to hide something… but show it sometimes
This article was inspired by Codepen’s recent weekly code challenge. The theme for their code challenges for this month was micro-interactions. There are many situations where you might want to hide and later reveal an element on the DOM based on user actions.
For example, you might want to hide a form or you might want to hide some instructions or additional information in a tooltip to better inform users about form fields or other elements within the DOM. For single-page applications, it can be especially important to preserve valuable screen space. Easter eggs…
