Testing a Gatsby application with Cypress on Gitlab CI

In this blog post, we will go over how we can automatically test a Gatsby site end-to-end (e2e), using Cypress on Gitlab CI. Introduction Gatsby Gatsby is a static site generator (SSG) built upon React. It allows us to create “blazing” fast websites. In this example, we will use a simple blog starter template available and add a Cypress test. Cypress Fast, easy and reliable testing for anything that runs in a browser....

How to create a Golang Web Application using Fizz

Background A bit of background before we start the article. When I develop a Python web service I use the Connexion library created by Zalando. It’s a great library which is built on top of Flask. It uses an OpenAPI Specification (OAS) file to handle input validation and routing for you. Therefore reducing the boilerplate code you need to write. The main advantage of this is that we have a design-first approach to developing our API....

Golang & MongoDB with "Polymorphism" and BSON Unmarshal

Recently I’ve been working on a new personal project called Banter Bus, a browser-based multiplayer game. I’ve been working on a REST API to add new questions to the game. The API is built in Golang and uses MongoDB as the database. Since Golang is a strongly typed language, we will need to specify the structure of the data we expect from the database. This can get tricky if the data varies, such as one field changing....

What does yield do in Python

In this article, we will go over what the yield keyword is used for. We will also cover how you can use a yield with a pytest fixture to allow us to “teardown” tests, after all of our tests have run. A common job being removing test data from the database, so that next time your run the tests your tests won’t fail. Due to the database being in a different (unexpected) state....

How to add a ToC in Gatsby

A lot of people, I included, are using Gatsby to build their own blogs. One of the things I wanted to add to my blog was a table of contents (ToC) 📝. A ToC will show you all the headings of an article and when you click on a heading it’ll take you directly to that heading. It’s a nice little feature to have on your blog, which makes it easier for users to navigate and find the information they are looking for....

How DNS works with Docker

In this article, we will briefly go over what DNS (domain name system) is and explain how it is used in conjunction with Docker 🐳. DNS You can think of DNS like a phonebook, except instead of people’s name and phone numbers, it stores domains names and IP addresses (this can be either IPv4 or IPv6). Where a domain name is used to identify resources i.e. google.com is a domain name....

How SOCKS proxies work and using ProxyChains

In this article, we will go over how you can use proxychains to proxy our traffic through a socks proxy. Background Recently, like everyone else, I’ve been working from home a lot more often. This means to access resources at work I need to use a VPN. However, to access some resources, such as production servers from my local machine, I need to use a SOCKS5 proxy. Without using a SOCKS proxy, I would need to do something shown in the diagram below....

How to source your Gatsby posts from another repo

In this article, we will go over how you can manage your markdown blog posts from another git repository (repo). Separate to the git repository for your Gatsby site. This is the same process that I use to manage this repo. So what this entails is the source code for my Gatsby site is in a repo called portfolio-site on Gitlab. Then I have another repo for all of my blog posts (in markdown) called articles....

Add an 'edit post' button to your Gatsby blog

In this article, we will look at how we can add an “edit post” button, to your Gatsby blog. When this button is clicked it will take the user to your markdown file, on github/gitlab that was used to generate the blog post they are currently viewing. Setup Before we add the edit button to a Gatsby blog, let’s set up a simple Gatsby site using the Gatsby blog starter. You can skip this step and add the button to an existing site....

How to auto create MRs in Gitlab

In this article, we will go over how we can use the gitlab-auto-mr CLI script I wrote to help automate your Gitlab workflow. This is a very simple script you can use with Gitlab which will auto-create merge requests (MRs) every time you create a new branch on a project in Gitlab. (Optional) Git Feature Branches Feel free to skip this section if you are already familar with feature branch, skip to the Gitlab Auto MR section...

How to add offline search to a Gatsby blog

Let’s take a look at how we can add offline local search 🔍 to a Gatsby blog. There are two main types of search we can use an offline search like elasticlunr and external API search engines like ElasticSearch. These are typically more scalable but also more expensive. You can find more info here. In this article, I will show you how to add offline search to your Gatsby blog using elasticlunr....

TailwindCSS with CSS variables

TailwindCSS allows us to use pre-defined classes instead of defining our CSS styles. In this article, we will go over how we can use Custom properties (sometimes referred to as CSS variables or cascading variables) with TailwindCSS. Setup First, follow the installation guide found here. This will show you how you can add TailwindCSS to your current project. For part 2 I will assume you called your CSS file global.css. This is the file that contains @tailwind base; etc....

How to use Storybooks with MDX

This article (sort of) continues on from my previous article How to use Storybooks, Gatsby, Babel, Tailwind, Typescript together. In this article, we will document our React components using Storybook with MDX. You can find an example project using this here, you can also find a demo site for said project. Prerequisite Just to make sure everyone’s on the same page let’s follow the same steps to setup Storybook as we had in the last article....

How to use Storybooks, Gatsby, Babel, Tailwind, Typescript together

Recently I started to re-design my website, I decided to use this as an opportunity to learn some new technologies such as Gatsby, Tailwind. I also decided to try using Storybook. For this said project I used MDX to create my Storybook stories. In this article, I will show you how you can create Storybooks stories, for a Gatsby project with TailwindCSS, Typescript using MDX. You can find an example project using this here....

How to use Gitlab CI, Pytest and docker-compose together

On a recent project, I was working on, I wanted to test my web service using docker-compose where I can run and kill Docker containers used by the application and see how my web application reacts to that. In this article, we will go over how you start docker containers using docker-compose from within Gitlab CI. The diagram above is a visualisation of what we are trying to achieve. We want to spawn Docker containers using docker-compose from within our job....

Testing a Connexion/Flask Application with Pytest

In this article, I will show you how you can test a Python web service that was built using Connexion (a wrapper library around Flask). We will go over how you can mock functions and how you can test your endpoints. There are two related articles I have written in the past listed below. In the first one we go over how to create a web service using Connexions, the same web service we will in this article....

An example React Native Project Structure

In this article, I will go over an example project structure you can use for your React Native projects. This of couse my opinion so feel free to tweak the structure to your needs/preferences. Link to project Link to Docz Website Project Structure . ├── android ├── app.json ├── App.tsx ├── babel.config.js ├── .buckconfig ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── docs ├── doczrc.js ├── .eslintrc.js ├── gatsby-node.js ├── .gitignore ├── ....

How to make PrismJS code blocks editable

In this article, we will go over how you can make PrismJS (syntax highlighted) code blocks editable. Introduction PrismJS can be used to add syntax highlighting to code blocks on our website. For a persona project of mine, composersiation #ShamelessPlug :plug:, I needed to allow the user to paste in their own (docker-compose) yaml files. So let’s take a look how we can let a user to first edit a code block and then re-run PrismJS to add syntax highlighting....

How to use DinD with Gitlab CI

Like most developers, we want to be able to automate as many and as much of processes as possible. Pushing Docker images to a registry is a task that can easily be automated. In this article, we will cover how you can use Gitlab CI to build and publish your Docker images, to the Gitlab registry. However, you can also very easily edit this to push your images to DockerHub as well....

Using React Hooks, Context & Local Storage

In this article, I will show how you can use React Context with React Hooks to store global state across a React app, then store that state in local storage. This can be used for example to store light vs dark theme, then whenever the user visits your website again they will have the same theme they last selected. Which leads to an improved experience. Structure Note: We will be using typescript...

How to Deploy Docz on Gitlab Pages

In this article I will show you how you can deploy a Docz website on Gitlab pages, using .gitlab-ci.yml. Most of this article should be applicable to Github pages as well. Docz Docz is a tool powered by Gatsby, it aims to make it easier to document your project. It uses a language called mdx which is like normal markdown with some extra features, i.e. md + jsx. The main advantage of using Docz is you can render components “live”, if you put them with the <playground> tags....

An Example Gitlab CI file for React Native Apps

A bit of backstory when I first started developing React Native apps, I found there weren’t any good example of Gitlab CI files. So in this article, I will show you an example .gitlab-ci.yml file you can use with your React Native app. You can of course tweak and makes changes as required by your project. CI/CD Before we dive straight into the CI file itself, let’s do a quicker refresher on some basic concepts....

Using React Native with Firebase Cloud Functions and Gitlab CI

In this article, we will talk about how you can use React Native with Firebase Cloud Functions. We will also go over how we can automate the process of updating the cloud functions using Gitlab CI. Firebase is a cloud-based platform developed by Google to aid in the development of Web and Mobile applications. It is tightly coupled with the Google Cloud Platform (GCP), so much so that there are certain actions you can only do using the GCP GUI, such as increasing the RAM of your cloud function “containers”....

Auto Toggle Dark Theme on your React Native App

In this article, I will show you how you can change the theme of your app depending on the time of the day. We will change the theme of the app depending on if the sun has set or risen. Our Application To get started we will create a new React Native app by running the following command, react-native init ExampleApp --template typescript. Note: We are using path aliases so ~ is the same as saying src/, this keeps the import paths cleaner....

Using Tox with a Makefile to Automate Python related tasks

In this article, we will go over how we can use a makefile and tox to automate various Python related tools. This article assumes you are running bash (or equivalent). Tox Tox is an automation tool used primarily to add in testing. On the Tox website, it describes itself as tox aims to automate and standardize testing in Python. It is part of a larger vision of easing the packaging, testing and release process of Python software....