Image for post
Image for post

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 clean up data after our tests.

Background

Iterables & Iterators

Before we can look at the yield keyword we will need to cover iterables and generators in Python. An "iterable" is any Python object that can return its members one at a time, in a for-loop.

In Python we have functions called magic methods, there are methods like __enter__ and __exit__ defined within objects. These are called "magic" methods because they are never directly called by the user. For an object to be iterable, it needs to implement the __iter__ method. If an object is iterable it can be passed to the iter() function. …


Image for post
Image for post

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.

https://www.youtube.com/watch?v=YrUeiD4YO5E

Prerequisite

So before we get started you can find the source code here. …


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. This is how DNS works:

google.com:     8.8.8.8
cloudflare.com: 1.1.1.1

Example

You can manually send a DNS request (and get a response) using the dig command. …


In this article, we will go over how you use proxychains to proxy our traffic through a socks proxy.

Image for post
Image for post

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.

Example Setup


Image for post
Image for post

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 the blog posts (in markdown) called articles. …


Image for post
Image for post

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.

npm -g install gatsby-cli
gatsby new my-blog-starter https://github.com/gatsbyjs/gatsby-starter-blog

If you don’t use the start above, you will need to make sure you have the gatsby-source-filesystem plugin installed. To import our markdown files. Your gatsby-config.js


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

Before I introduce what the script does and how we use it, let’s go over why you might need to use it. Say you’re working on a project with multiple other people and you want to make sure you keep your master/production branch clean. One way to do that is everyone uses “feature” branches. So for every feature being added to the project you create a new short-lived branch off of the master branch. Then typically one developer will work on a feature and make a merge request when ready to get the branch merged into the main master branch, to integrate their work with everyone else’s. …


Image for post
Image for post

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. This means your website needs to be indexed locally and will increase the bundle size as this index needs to be loaded by the client but with the scale and size of personal blogs (100s, not 1000s of blog post) this shouldn't make a massive difference. …


Image for post
Image for post

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.

global.css

First, we need to edit our TailwindCSS file so it looks something like this:

@tailwind base;
@tailwind components;
@tailwind utilities;

.root,
#root,
#docs-root {
--primary: #367ee9;
--secondary: #a0aec0;
--accent: #718096;
--background: #fff;
--main: #0d0106;
--header: #2d3748…

Image for post
Image for post

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. We will use the latest versions of Storybook (v6) so we can access the latest features. …

About

Haseeb Majid

Software Engineer | Pythonista | Typescripter | Docker Advocate | https://haseebmajid.dev

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store