Forem: Hossein Kazemi

Open spot for a 6 month mentorship

Hossein Kazemi — Thu, 27 May 2021 15:10:11 +0000

I have a new spot open to mentor a junior/starting developer for free for the next 6 months. Read along if you are interested and see if this matches your profile:

1️⃣ What you will learn?

A. Backend development and a bit of DevOps
B. I'll define a project for you and I'll teach you everything I know to complete it. The exact contents will be based on your experience
C. Focus is on problem solving and proper thinking

2️⃣ For who?

You should fall into one of the following categories:

A. Looking for a job
B. A Recent graduate of a coding school or a CS degree
C. Changing career into tech and self-learning

3️⃣ What is the format?

A. Weekly/bi-weekly calls

B. Code reviews

C. Pair-programming

D. Direct access to me on Slack to ask any technical questions

4️⃣ When do we start?

I need to make sure that you are serious and genuinely want to learn, so send me a DM on twitter: @hossein761 and we schedule a call.

Put your Macbook to sleep with this command

Hossein Kazemi — Thu, 04 Mar 2021 19:33:58 +0000

Do you hate to use the Macbook’s touchbar like me? And do you spend most of the time in your terminal?

Use the command below to put your Macbook to sleep:

pmset displaysleepnow

Follow me on twitter for more @hossein761

I am looking for people who need a mentor

Hossein Kazemi — Mon, 01 Mar 2021 14:20:37 +0000

Hi all,

My name is Hossein and I am going to work on a few small (personal) software projects in the coming months, ranging from tiny saas products to just useful features/functionality. I like to share and teach what I do and learn to others along the way. So I am looking for people who need a mentor.

I use these projects as a source to teach you:

How to solve problems with code and how to think like a proper developer
How to use mental models to improve your coding skills
How to choose the right technology for the problem
How to build software products zero to one.
Help you fill in the knowledge gaps you have
Explain the concepts you are struggling with. No question is stupid. I try to answer what I know.
I might put some of these products on the market. You can learn the business side of things as well. You can do the same, and I don’t mind. I love to see you put something out there with what I teach.

What if you have a project of your own?

No problem, I can help you with that. You can use the stuff I teach you for your own products.

Why am I doing this?
I have been coding since the age of 13 ( I am 38 now). A mentor taught me how to code at that age. The impact of what he did on my life was massive. So I fully understand how valuable having a mentor is. Sadly he lost his battle with cancer in Nov 2020. I am doing this to honor his life.

For who?

If you are a CS student/recent graduate or have done coding 101, I can help you the most. But If you just want to start learning how to code, I need to work on a different curriculum for you.
People who are confused about what to do after their learning/studying phase is finished.

Requirements

Massive interest in learning
You want software development to be your profession.
Have a proper and tangible goal (we can work this out together)

What would be the format?

Blog posts, Chat, Email, Zoom, Twitter Spaces.

Technology focus:

I do stuff in Python/Django, Golang, a bit of Javascript, DevOps(AWS, Terraform, Docker, Kubernetes). The majority of the teachings are about backend and infrastructure.

If you are interested, enter your contact info in this GOOGLE FORM so I can contact you back, and we start planning.

Cheers
Hossein

Leverage Selective Ignorance to improve your software development skills

Hossein Kazemi — Wed, 24 Feb 2021 20:33:34 +0000

Since I've started applying mental models to my software development process, I have seen significant improvement in my productivity, code quality, and problem-solving. Because of this, I decided to write a series of newsletter posts to teach other developers to become a better version of themselves.
The first post is about leveraging Selective Ignorance. You can read it here:

Selective Ignorance

And here is the full list that I will be writing in the near future:

Mental Models for Developers

You can subscribe to my newsletter or follow me on Twitter @hossein761. I'd love to hear your comments and feedback!

Make your Django models self-timestamp

Hossein Kazemi — Sun, 21 Feb 2021 19:37:28 +0000

Make your Django models inherit from the below abstract class. You models will get automatically timestamped upon creation and update of instances.

from django.db import models


class TimeStampedModel(models.Model):
    """
    An abstract base class model that provides self-updating
    ``created_at`` and ``updated_at`` fields.
    """
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

    class Meta:
        abstract = True

Join my free newsletter BORING BACKEND. Soon i'll be starting mentoring people by doing micro-projects.

How to use TailwindCSS in a Cookiecutter Django project

Hossein Kazemi — Wed, 17 Feb 2021 08:52:14 +0000

Motivation

TailwindCSS has found a growing fan-base among the developers who use Javascript frameworks such as React, GatsbyJS, Next.js.
But for the rest of us Bootstrap has been a go to option for years. In fact Cookiecutter Django configures Bootstrap out of the box for you.

Like many for a new project, I used Django Cookiecutter as my base, but this time I wanted to use those fancy styling from TailwindCSS in my project. After playing with the structure I managed to make it work the way I want it. As there was a lack of a proper tutorial on this, I felt this could be a good subject to write about.

Below are the steps you should follow:

1. Generate your Django project with Cookiecutter

# install cookie-cutter
pip install "cookiecutter>=1.7.0"

# generate your project
cookiecutter https://github.com/pydanny/cookiecutter-django

You will be asked a few questions, you can find a good explanation of all in Cookiecutter's docs. If you don't know the answer, go with the provided default. ==Don't over analyze==.

2. Create a new folder structure for static files

In the root of your project create a folder called frontend and under it, create the same subfolders as you see in your apps static folder like below:

frontend/
 css/
 fonts/
 images/
 js/
 scss/

From now on this will be the place in which you put your static files. You will see the reason for this shortly.

3. Upgrade your Node version

Tailwind works with node version 12 above. What worked for me without much problems was version 14. Make sure you are upgrading your local version to 14 or if you are using Docker, change the version in the compose/local/node/Dockerfile. Your Dockerfile should look something like the following:

FROM node:14-stretch-slim

WORKDIR /app

COPY ./package.json /app

RUN npm install && npm cache clean --force

ENV PATH ./node_modules/.bin/:$PATH

==Still with me?==

4. Add the necessary dependencies to your `package.json` file

First add the following to dependencies in package.json. You don't need to use any dependency managers like npm or yarn at this stage. Just make sure you insert the following dependencies in the right version in the right place. To avoid conflicts, I suggested that you first start with the exact same dependencies mentioned below, make everything work and add other dependencies as you go:

  "dependencies": {
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^4.5.1",
  },
  "devDependencies": {
    "autoprefixer": "^10.2.4",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^7.0.0",
    "css-loader": "^5.0.2",
    "dotenv-webpack": "^6.0.0",
    "file-loader": "^6.2.0",
    "mini-css-extract-plugin": "^1.3.6",
    "node-sass": "^5.0.0",
    "postcss": "^8.2.6",
    "postcss-loader": "^5.0.0",
    "purgecss-webpack-plugin": "^4.0.0",
    "sass-loader": "^11.0.1",
    "tailwindcss": "^2.0.3",
    "webpack": "^5.19.0",
    "webpack-cli": "^4.4.0",
    "webpack-dev-server": "^3.11.2"
  }

NOTE 1: It is important to know that TailwindCSS relies on PostCSS 8 and above. If are using packages different from the above, you need to make sure that there is no other dependency in your package.json that depends on PostCSS lower than version 8. To do the inspection use npm list or if you use yarn yarn list.

NOTE 2: Make sure there is no packages in your package.json that is related to Bootstrap

If you are already lost, just copy my config file from here: package.json and jump to step 7.

6.Replace Gulp with Webpack

As you saw in the previous step, we are introducing Webpack in the dependencies. This means that you need remove anything related to Gulp from your package.json file. Remove gulp-* dependencies and adjust the scripts section to look like below:

"scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
}

==Don't fall sleep yet!==

7. Glue everything together with Webpack

As you saw we created a separate folder structure called frontend in which we are going to put our static files.
Now you might ask isn't the default static folder for this? It is a legit question, it actually is, however instead of we manually put our js, scss, etc files in there, Webpack will do this for us.

It simply reads everything in the frontend folder, does whatever magic is needed on those files such as optimization, post-processing, etc and put the results in the static folder for us so that Django can use them.

For this we create a Webpack configuration file called webpack.config.js. We tell Webpack where to start entry, where to find our static files and what to do with each of them based on their type rules and plugins. Explaining out Webpack works is outside the scope of this tutorial. You can copy my configurations directly from here: webpack.config.js

8. Add static files to your `frontend` folder

Now you need to create the necessary files in your frontend subfolder.
First, in the scss subfolder, create a file called app.scss and include the following:

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

This will serve as the main file for the styles. Webpack does its magic on it and converts it to a proper css file called app.css which you need to include in your base.html Django template.

Next, in the js subfolder, create a file called app.js and include the following as the first line:

import '../scss/app.scss';

This file serves as the entry point for Webpack. If you see the entry in the webpack.config.js file you can see that it points to this file. Webpack reads this file and sees that it should process a .scss file and does its magic based on what you've configured in the config file.

Finally, don't leave the fonts and images folder empty. My Webpack configs are not optimized to handle empty folders.

9. Delete your existing static folder

Make sure you've moved whatever file you want to frontend. Then remove the static folder as it will be generated by Webpack upon build. As a bonus add this folder (static) to your .gitignore file.

10. Add PostCSS config file

As mentioned above, TailwindCSS needs PostCSS. You'll need to add a file called postcss.config.js with the following content to the root of your project:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

11. Add TailwindCSS config file

You can configure TailwindCSS the way you want it. However, to do this you need to create a file called tailwind.config.js in the root folder of your project and include the following:

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

You can read TailwindCSS documentation for more on this.

==Still Awake?!==

Now double check everything and if you use docker,first build the container using:

docker-compose -f local.yml build node

Then bring up the node container:

docker-compose -f local.yml up node

If everything is worked as planned, you should see the static folder generated for you include all the processed files from in your frontend folder. Now make sure you are using app.css and app.js in your base.html template file.

This article is originally posted on my Boring Backend Newsletter.

If you have any comments, or need help please do reach out to me on Twitter. And if this post helped you please don't forget to share it.

Free up disk space by running these docker commands

Hossein Kazemi — Sat, 13 Feb 2021 18:59:28 +0000

If you are using Docker, every now and then your disk gets filled up with dangling docker images and volumes. Simple run the following commands to get rid of them and open up disk space on your machine:

# remove dangling images
docker rmi -f $(docker images -f dangling=true -q)

# remove dangling volumes
docker volume rm $(docker volume ls -qf dangling=true)

I am starting a newsletter focused on teaching hands-one backend and infrastructure through building micro-projects.
Follow me on Twitter for the announcement: hossein761