Posts

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. ...

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. ...

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. ...

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. ...

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. ...

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 ├── . ...

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. ...

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. ...

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 ...

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. ...

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. ...

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”. ...

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. ...

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. ...

In this article, I will explain how you can use typescript aliases with Babel or TSPath. If you have been using TypeScript/JavaScript (TS/JS) and have a nested folder structure, you may well be used to seeing imports like so (using es6 style imports). This is sometimes referred to as path hell and is a very common occurrence as your project grows in size. import moduleA from "../../../moduleA"; import moduleB from ". ...

In this article, we will go over how you can use add the new adaptive app icons to your Android app. In his article I will be using a React Native project, so the structure of your Android app may vary. Adaptive Icons Adaptive icons are a new feature introduced in Android 8.0 (API level 26). It allows your app icon to be displayed using multiple shapes across different devices and launchers, more information available here. ...

In this article, I will show you how can automate the publishing of your AAB/APK to the Google Play Console. We will be using the Gradle Play Publisher (GPP) plugin to do automate this process for us. Using this plugin we cannot only automate the publishing and release of our app, we can also update the release notes, store listing (including photos) all from GitLab CI. Note: In this article I will assume that you are using Linux and React Native version >= 0. ...

In this article I will show how you can use the GitLab CI with React Native to create a binary which can be published to the Google Play Store. Prerequisites Google Developers Account A working React Native Android project Keystore First, we have to generate a keystore which we will use to sign our APK. To do this run the commands below, follow all the instructions and keep the file safe. ...

RESTful APIs are very popular at the moment and Python is a great language to develop web APIs with. In this article we will go over a documentation first approach to building APIs. We will be using Flask, Swagger Code-Gen (OpenAPI) and Connexions. I will go over an API/documentation first approach to building a RESTful API in Python. Which will try to minimise the differences between what’s defined in the API specification and the actual API logic itself. ...

Recently I started using TypeScript (TS) with React Native. Now I won’t be going over the benefits of typescript in this article there are plenty for other articles that will explain the benefits (and drawbacks). TS is a superset of JavaScript (JS) so anything JS can do TS can do (and more). One of the main advantages of TS is it’s strict type checking. JS is weakly typed which means variable and parameters can be of any type. ...

In this article, we will create a simple React Native (with Expo) application using React Navigation, for moving between screens/pages within our app. We will create an app which had a Stack Navigator nested in a Tab Navigator, nested within a Drawer Navigator. This might sound a bit complicated so let’s take a look gif below. We have three main pages in the Drawer Navigator Home (purple), Settings (red) and About (blue) pages. ...

Recently whilst developing a React Native app (with Expo), I built a simple tab navigator using React Navigation library. I wanted to theme the app so that the header would change colour depending on which page you’re on. For example on the primary page it would be red and on the secondary page, when you change tabs, the header would become blue. I ended up being able to do it using Redux. ...

Pytest is a popular Python library used for testing. It is my preferred testing library because it requires less boilerplate code than the alternatives such as (the builtin) unittest, the built in testing library. In this article, I will show you how you can use pytest-flask and pytest-mock to test your Flask app. These two libraries are plugins for Pytest which build upon some of the features that Pytest provides us. ...

SQLAlchemy is an object-relational mapper (ORM), it allow us to interact with a database using Python functions and objects. For example, if we have a table called Cats we could retrieve every row with a command like Cats.query.all(). The main advantage of this is that it allows us to abstract away the SQL. Docker 🐳 allows us to quickly bring up a database within a Docker container, this means we don’t have to set up and configure a database on our local machine. ...

Terminology Docker Image: Is a file used to execute code in a Docker container, built from a set of instructions. Docker Container: Is a Docker image that is being executed or run. Docker 🐳 is a relatively new and exciting technology, Docker is a containerisation tool. The main benefits of using Docker is that you can use the same environment for development, testing and production. Since Docker environments are consistent this means if the application works in the testing environment it will also work in production. ...