December 24th, 2021
Building an API with Flask and SQLAlchemy
While researching API frameworks and libraries, I grew interested in the Flask framework. Flask is a very lightweight framework, allowing engineers to quickly create APIs in Python without much opinionated tooling. For example, Flask does not come installed with a database access layer or ORM, allowing engineers to pick whichever database access library they prefer. This flexibility is appealing to me because it allows me to configure and design the API to my liking. Also, working in Python is easy and allows me to quickly write API code.
In this article, I begin by describing how I structured my SaintsXCTF API, which is written in Flask. Next, I provide an overview of Flask and SQLAlchemy, an object relational mapper (ORM). Finally, I dive into my API code. You can view the code discussed in this article in my saints-xctf-api repository.
December 3rd, 2021
Redux in a TypeScript React Application: Following the Ducks Pattern
Redux is a state management pattern that is commonly used in complex React applications. Redux, based on the Flux design pattern, is helpful when application state is shared between many pages of a website and is updated frequently1. In my saintsxctf.com website, Redux stores and uses application state across all my webpages. SaintsXCTF is a good example of a website that can benefit from Redux; it needs login information, user preferences, team memberships, group memberships, and more to be shared amongst all pages.
In this article, I start by going over the basics of Redux. I'll also explain the “ducks pattern”, which is an approach to writing Redux code. Then, I'll walk through the Redux configuration and code in my SaintsXCTF application. All the code for my SaintsXCTF web application is available in a GitHub repository.
November 15th, 2021
Building a Web Application with React and TypeScript
I recently rewrote my web application saintsxctf.com using React and TypeScript. This article looks at how the application is configured and walks through some React code. All the code for the website exists in a GitHub repository.
November 1st, 2021
SaintsXCTF Version 2.0: React Web Application Overview
At its core, SaintsXCTF is a web application that allows users to log their running workouts, openly express how they felt while running, and encourage and support teammates. From a user perspective, the website is the most important part of the SaintsXCTF technology stack, since it is what they interact with every day and depend on being operational.
When I wrote the first version of the saintsxctf.com website, I was a senior in college who just began learning web development. I was also new to user interface (UI) design and user experience (UX) design. Over time, this inexperience became more and more apparent when viewing the first version of the website and its underlying code. While designing the second version of the website, I knew not only did I need to follow best engineering practices, but I also had to make an elegant user interface.
October 25th, 2021
SaintsXCTF Version 2.0: Kubernetes Infrastructure
The infrastructure for the React/TypeScript frontend and Flask/Python backend for my website saintsxctf.com is hosted on Kubernetes. My Kubernetes infrastructure is hosted on a cluster, which is managed by AWS EKS. This article outlines the Kubernetes infrastructure and walks through Terraform code which configures and builds the infrastructure.
October 19th, 2021
Creating a Go Module for Reusable Test Functions
Recently I wrote tests for my Kubernetes infrastructure in Go. These tests are split across multiple different repositories. However, there is a lot of overlap in testing logic between the test suites in each repository. In attempts to follow good programming practices and keep my code DRY, I split out the common code between the repositories into reusable functions. These functions exist in their own Go module, which is imported into the test suites as a dependency.
Go modules are part of Go's dependency management system1. They consist of a collection of packages, which are defied in a go.mod file. Go modules can be used as dependencies in other modules, as is the case with my reusable test function module and my Kubernetes test modules.
October 10th, 2021
Writing Kubernetes Tests with Go
These days, most of my application infrastructure exists on Docker containers, orchestrated by Kubernetes. My AWS account has a Kubernetes cluster, which is hosted using EKS (Elastic Kubernetes Service). Since two of my production applications (jarombek.com and saintsxctf.com) run on this Kubernetes cluster, the health of their infrastructure is critical. To help ensure that the Kubernetes cluster is running properly, I created tests which check the state of my Kubernetes objects and ensure that they exist on the EKS cluster as expected.
This article explores my Kubernetes test suite, which is written in Go and leverages the Kubernetes Go Client. It also describes how the test suite is run on an automated schedule, alerting me when test failures occur.
September 24th, 2021
Creating Reverse Proxies with Nginx and Docker
Many of my applications contain frontend components and API components. These two components are loosely coupled but communicate with each other over HTTPS. For example, my saintsxctf.com application has a React frontend which communicates with a Flask REST API backend, along with other API Gateway REST APIs. One way to accomplish communication from a frontend to an API is by explicitly writing the URLs of the APIs in the frontend code. This works fine, but it also exposes information about API origin servers to clients. Origin server information exposure can be avoided by passing all API traffic through the same URL as the frontend application. This is accomplished using a reverse proxy.
The following image shows my SaintsXCTF website, and how the URL of the API is hidden from clients. If users inspect the website's network traffic, they see HTTPS requests sent to the reverse proxy server for saintsxctf.com, instead of the actual API server api.saintsxctf.com.
August 11th, 2021
Building Cypress End to End Tests in TypeScript
August 2nd, 2021
Writing Less Stylesheets
When it comes to CSS preprocessors (stylesheet languages that add features on top of CSS and transpile to CSS), in the past I've often used Sass. When I first started learning about CSS preprocessors, the two main choices were Sass and Less. The reason I decided to learn Sass instead of Less was due to its greater popularity and me trying to follow industry trends. At the time, Bootstrap had just released version 4, which switched its stylesheet language from Less to Sass1. In my mind, it didn't make sense for me to learn a preprocessor language that was being left in the dust.
Over time, I increasingly wished to learn the difference between Sass and Less. It was hard for me to tell if there were differences in the functionality of Sass or Less, or if Sass was picked as the favorite due to syntactical preferences and third-party library support. Last year I wrote two front-end application prototypes, graphql-react-prototype and apollo-client-server-prototype. Instead of using a stylesheet technology I already knew such as Sass or JSS, I decided to learn Less and use it as the stylesheet language for these prototypes.
July 31st, 2021
Building a GraphQL React Prototype
Last year, I started using GraphQL at my job. I decided to create some GraphQL prototypes in my spare time, to get better acquainted with the GraphQL ecosystem. In 2018 I learned the basics of GraphQL and wrote two articles about my experience, but never dove into using GraphQL in real world applications. The GraphQL React prototype discussed in this article along with my Apollo prototype are the beginnings of that production application journey. In the future, I plan on using GraphQL for the API layer of my applications.
The GraphQL prototype discussed in this article is a React front-end application that connects to a GitHub GraphQL API. The API provides details about my repositories, and React displays those details in a dashboard. The dashboard is shown below.
July 26th, 2021
Creating AWS CloudWatch Synthetics Canary Functions with Terraform
I started looking into Synthetic Monitoring as a way to test my SaintsXCTF application running in production. I had an issue where the website unexpectedly stopped working, and there was no automated process in place to alert me. With Synthetic Monitoring, I created canary functions to test critical paths of the website, such as signing in a user. If canary functions fail, I get an email alerting me of the issue.