DEV Community: Nazanin Ashrafi

Windows paths with spaces in Python's `os`

Nazanin Ashrafi — Mon, 22 Dec 2025 16:20:37 +0000

Dealing with spaces in file paths is an issue that I keep running into.
So here's a very short blog to save us time and headaches.

You can either use r string or double backslashes (\\).

1. The Recommended Fix: Use a Raw String `r`

import os

# Correct: Use 'r' before the string to create a raw string
path_with_spaces = r"F:\python\New folder (2)"

if os.path.isdir(path_with_spaces):
    print(f"'{path_with_spaces}' is a directory.")
else:
    print(f"'{path_with_spaces}' is NOT a directory or does not exist.")

2. Alternative Fix: Double Backslashes

import os

# Alternative: Escape the backslashes
path_with_spaces_escaped = "F:\\python\\New folder (2)"

if os.path.isdir(path_with_spaces_escaped):
    print(f"'{path_with_spaces_escaped}' is a directory.")
else:
    print(f"'{path_with_spaces_escaped}' is NOT a directory or does not exist.")

Fake SMTP Server

Nazanin Ashrafi — Mon, 01 Dec 2025 15:12:45 +0000

Step 1: Install `aiosmtpd` library

pip install aiosmtpd

Step 2: The Modern Fake SMTP Server Script (`aioserver.py`)

import asyncio
from aiosmtpd.controller import Controller
from aiosmtpd.smtp import SMTP

# --- Define the Handler Class ---
# This class defines what happens when the server receives a message.
class DebuggingHandler:
    """
    A modern asynchronous handler that processes and prints received emails.
    """

    async def handle_DATA(self, server, session, envelope):
        """
        Called when the server receives the full email data.
        """
        print("\n=======================================================")
        print("  !!! EMAIL SUCCESSFULLY RECEIVED by FAKE SERVER !!!  ")
        print("=======================================================")
        print(f"  - Client connected from: {session.peer}")
        print(f"  - MAIL FROM: {envelope.mail_from}")
        print(f"  - RCPT TO: {envelope.rcpt_tos}")
        print("--- MESSAGE CONTENT START ---")

        # 'envelope.content' contains the raw email message bytes.
        # We decode it for display.
        print(envelope.content.decode('utf8', errors='replace'))

        print("--- MESSAGE CONTENT END ---")
        print("=======================================================\n")
        # Returning '250 OK' tells the client the message was accepted
        return '250 OK'


# --- Startup Code ---

SERVER_IP = 'localhost'
SERVER_PORT = 1025

async def run_server():
    """
    Starts the asynchronous SMTP server.
    """
    handler = DebuggingHandler()

    # The Controller handles starting and stopping the asyncio event loop.
    controller = Controller(handler, hostname=SERVER_IP, port=SERVER_PORT)

    # Start the server (it runs in the background)
    controller.start()

    print("Starting modern fake SMTP server...")
    print(f"Listening on {SERVER_IP}:{SERVER_PORT}...")
    print("Leave this window open.")
    print("Press Ctrl+C to stop the server and exit.")

    # Keep the main thread alive so the server can run
    while True:
        await asyncio.sleep(1)

if __name__ == "__main__":
    try:
        # Start the asyncio event loop
        asyncio.run(run_server())
    except KeyboardInterrupt:
        print("\nModern fake server stopped.")

Step 3: The Client Script (`client_script.py`)

import smtplib
from email.mime.text import MIMEText

# Use the same IP and PORT as your fake_server.py
FAKE_SERVER_IP = 'localhost'
FAKE_SERVER_PORT = 1025

# --- Email Details ---
SENDER_EMAIL = 'my_modern_test_address@fake.com'
RECIPIENT_EMAIL = 'recipient_for_learning@test.org'
EMAIL_SUBJECT = 'Modern Test Email from Python smtplib'
EMAIL_BODY = (
    "This message confirms my smtplib script is working against the modern aiosmtpd server.\n"
    "No real email account was used!"
)

# --- Construct the Message ---
# MIMEText is used to properly format the email content and headers.
message = MIMEText(EMAIL_BODY, 'plain', 'utf-8')
message['Subject'] = EMAIL_SUBJECT
message['From'] = SENDER_EMAIL
message['To'] = RECIPIENT_EMAIL


# --- Send the Email using smtplib ---
try:
    print(f"Attempting to connect to modern fake server at {FAKE_SERVER_IP}:{FAKE_SERVER_PORT}...")

    # We use smtplib.SMTP for the simple, local connection
    with smtplib.SMTP(FAKE_SERVER_IP, FAKE_SERVER_PORT) as server:

        # Send the message data
        server.send_message(message)

    print("\n--- SUCCESS ---")
    print("The email was successfully handed off to the modern fake server.")
    print("Check your 'aioserver.py' terminal window for the full message content!")

except Exception as e:
    print("\n--- ERROR ---")
    print(f"An error occurred: {e}")
    print("Ensure 'aioserver.py' is running in a separate terminal window and you ran 'pip install aiosmtpd'.")

Instructions:

Save the new server script as aioserver.py.
Save the client script as client_script.py.
Run the server in one terminal: python aioserver.py
Run the client in a second terminal: python client_script.py

Another script

fake_smtp.py

import asyncio
from aiosmtpd.controller import Controller


class DebugHandler:
    async def handle_DATA(self, server, session, envelope):
        print("\n===== NEW EMAIL RECEIVED =====")
        print(f"From: {envelope.mail_from}")
        print(f"To: {envelope.rcpt_tos}")
        print("----- MESSAGE BODY -----")
        print(envelope.content.decode("utf-8", errors="replace"))
        print("===== END EMAIL =====\n")
        return "250 Message accepted for delivery"


async def main():
    handler = DebugHandler()
    controller = Controller(handler, hostname="localhost", port=1025)
    controller.start()
    print("Fake SMTP server running on localhost:1025")
    try:
        await asyncio.Future()  # Run the event loop forever
    except KeyboardInterrupt:
        controller.stop()


if __name__ == "__main__":
    asyncio.run(main())

test_client.py

import smtplib
from email.mime.text import MIMEText

msg = MIMEText("Hello! This is a test email to the fake SMTP server.")
msg["Subject"] = "Test Email"
msg["From"] = "me@example.com"
msg["To"] = "you@example.com"

with smtplib.SMTP("localhost", 1025) as server:
    server.send_message(msg)

print("Email sent!")

Fake server doesn't support it
Fake server doesn't require auth
localhost:1025

# No TLS, no login (fake server doesn't support it)
# connection.starttls()  <-- remove
# connection.login(user=my_email, password=password)  <-- remove

Note: This is AI generated and its only purpose is to help me and maybe someone else will find this useful as well.

`requirements.txt` in python

Nazanin Ashrafi — Fri, 14 Nov 2025 08:21:33 +0000

Stop Saying "It Works on My Machine!"

Ever tried to share your Python project and had someone tell you, "It doesn't work on my machine?" That usually happens because they're missing a library or using the wrong version.

The fix is simple: the requirements.txt file.

Think of it as the master list or shopping list for your project. It tells anyone exactly which libraries and versions they need to install to make your code run perfectly.

Here’s the fastest way to generate this file on Windows, using the modern and blazing-fast uv tool.

Why Bother Making This File?

It might seem like an extra step, but creating this file saves you massive headaches later on. It all comes down to control and consistency.

1. It Stops Breakages (Version Control)

Libraries are constantly being updated. A new version might change something small that totally breaks your existing code. If you rely on someone else installing the latest version, your project could stop working overnight! By pinning the exact version in requirements.txt (like requests==2.31.0), you ensure your project only ever uses the version you tested it with.

2. It Makes Sharing Easy

Imagine sharing a complex recipe. You don't just say, "Get flour, sugar, and butter." You list the exact amounts. Similarly, you don't share your code and say, "You'll need numpy." You share the requirements.txt file. This lets other developers (or your future self!) set up the environment perfectly with just one command.

3. It Keeps Your Environment Clean

When you delete and recreate your virtual environment, this file is the key to immediately rebuilding it exactly how it was before. It makes the entire environment disposable and easy to manage.

Step 1: Get Into Your Workspace

Before we do anything, you need to be inside your project's isolated environment—that's your .venv folder! This ensures we only list the packages specific to your project, not every random library on your computer.

Open your project folder in your terminal (like PowerShell or Command Prompt).
Run the command to activate your environment. You'll know it works when your terminal prompt starts with (.venv).

For PowerShell:

.venv\Scripts\Activate.ps1

Step 2: Install the Stuff You Need

This is where you install any libraries your project uses. If you've already installed them, great! If not, install them now using uv:

Example: Install the popular requests library:

(.venv) $ uv pip install requests

Step 3: Generate the File (The Magic Command!)

This is the key step. We're going to use the uv pip freeze command to inspect your environment and then use the magical redirect symbol (>) to write that list straight into a file.

Make sure you're in your project's main folder and the environment is active.
Run this single line:

(.venv) $ uv pip freeze > requirements.txt

What Just Happened?

uv pip freeze: This command quickly scans your active environment and prints a neat list of every installed package, locking in its exact version (like requests==2.31.0).
>: This little symbol is crucial. It tells your computer, "Take the output from the left side and save it into the file named on the right side."

Step 4: You're Done!

Check your project folder—you now have a clean requirements.txt file!
If you open it, you’ll see the pinned versions of your dependencies.

Now what?

When you share your project, the next person just needs to run one simple command after creating their own environment:

uv pip install -r requirements.txt

Note: This blog was AI generated.

Getting Marimo Up and Running on Windows with uv

Nazanin Ashrafi — Fri, 14 Nov 2025 06:56:30 +0000

Getting Started with Marimo on Windows (using uv)

Let's install the Marimo Python notebook on Windows with uv.

1. Get the uv Installer

First, we need to install uv.

Open PowerShell:
Run this command:

powershell -c "irm [https://astral.sh/uv/install.ps1](https://astral.sh/uv/install.ps1) | iex"

Check if it worked!

To make sure the install was successful, close and reopen your PowerShell window, then type:

uv --version

If you see a version number, you're good to go!

2. Set Up Your Marimo Project

1. Create a Project Folder: Let's make a new folder and move into it:

mkdir MarimoProject
cd MarimoProject

2.Initialize the Project: This command tells uv to create a virtual environment inside this folder:

uv init

3. Install Marimo Now, let's add the Marimo package to your new environment:

uv add marimo

To unlock extra features like SQL cells and AI integration, you can use:

uv add "marimo[recommended]"

3. Launch Your Marimo Notebook!

Everything is installed! Now we use uv to run the Marimo tool we just installed.

1. Start the Editor: (it will create a new file named my_notebook.py if it doesn't exist)

uv run marimo edit my_notebook.py

2. Go to Your Browser: This command will automatically open the interactive Marimo notebook editor in your default web browser. You can now start writing your Python code!

Installing pandas with uv on windows

Nazanin Ashrafi — Tue, 28 Oct 2025 15:48:03 +0000

Here's a quick overview to installing pandas on windows:
We will follow these steps:

Install uv (if you haven't already).
Create a virtual environment using uv.
Activate the virtual environment.
Install pandas into the environment using uv.

1. Install uv (If Needed)

powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"

2. Create a Virtual Environment

# Replace 'my_project' with your desired folder name
mkdir my_project
cd my_project

# Create the virtual environment
uv venv

You should see output similar to: Creating virtual environment at: .venv

3. Activate the Virtual Environment

For PowerShell:

.venv\Scripts\Activate.ps1

For Command Prompt (cmd.exe):

.venv\Scripts\activate

Once activated, your command line prompt will typically change to show the environment's name (e.g., (.venv) C:\Users\...).

4. Install pandas

Now, use uv's package management interface to install pandas into the active virtual environment.

uv pip install pandas

Basic Mail Automation in Python

Nazanin Ashrafi — Sat, 11 Oct 2025 19:00:58 +0000

Mail automation is a python script and is usually called "Mail Merge Generator" but I like mail automation more, so that's what I'm gonna call it for my article.

This article is very beginner friendly and what we're gonna do is to get our letter template and replace [name] with each names and create a new mail for each names.

This is our directory, folders and starting files that we're gonna be working with for this article.

/Main_Folder/
├── main.py  <-- we are here
├── Input
│   ├── Letters
│   │   └── letter_template.txt <-- we need to get this file
│   └── Names
│       └── invited_names.txt <-- and this file
└── Output

Let's start with the basic logic:

Open letter_template.txt and invited_names.txt
Read the files
Loop through names from the invited_names.txt file a. Get the content b. Replace [name] with name c. Write the output for each letter

Now let's go through these steps with more details.

1. Opening Files:

├── main.py  <-- we are here
├── Input
│   ├── Letters
│   │   └── letter_template.txt <-- we need to get this file
│   └── Names
│       └── invited_names.txt <-- and this file
└── Output

# opening the letter_template file
with open("Input/Letters/letter_template.txt") as letter_file:

# opening the names file
with open("Input/Names/invited_names.txt") as name_file:

2. Reading files:

Starting with the letter_template file.

We know that for reading the file we use the read() method.

with open("Input/Letters/letter_template.txt") as letter_file:
    letter_content = letter_file.read()

And now for the names file: We can't use the read() method for names because it returns a big string and we don't want that. What we need is a list of names so that we can loop through. So instead of the read() method, we need to use readlines() method:

with open("Input/Names/invited_names.txt") as name_file:
    names = name_file.readlines()

And if you print out the names, the result would be :

with open("Input/Names/invited_names.txt") as name_file:
    names = name_file.readlines()
    print(names)

# ['Alice\n', 'Bob\n', 'Charlie\n', 'Diana\n', 'Ethan\n', 'Fiona\n', 'Greg\n', 'Hannah\n']

Before we go the next step and loop through names, let's create a constant for [name] at the top of main.py:

PLACEHOLDER = "[name]"

3. Looping through names:

Basically what we need to do here is to get the letter content, and replace the PLACEHOLDER ([name]) by each names:

with open("Input/Names/invited_names.txt") as name_file:
    names = name_file.readlines()
    for name in names:
        new_letter = letter_content.replace(PLACEHOLDER, name)

Now if you print out the new_letter the result might look a bit weird:

Hello Fiona
,

We're writing to formally invite you to our annual end-of-year celebration.


Hello Ethan
,

We're writing to formally invite you to our annual end-of-year celebration.

You see? the line breaks after each name and that's because of the readlines() method

# ['Alice\n', 'Bob\n', 'Charlie\n', 'Diana\n', 'Ethan\n', 'Fiona\n', 'Greg\n', 'Hannah\n']

As you can see, there's line break after each name, \n and we need to get rid of that with the strip() method, meaning we need to clean the words first:

cleaned_word = name.strip()

with open("Input/Names/invited_names.txt") as name_file:
    names = name_file.readlines()
    for name in names:
        cleaned_name = name.strip()
        new_letter = letter_content.replace(PLACEHOLDER, cleaned_name)

4.

The last and final step is to print out a new separate letter for each names:
Inside our for loop, we need to go to the Output folder and write the new letter there.

├── main.py
├── Input
│   ├── Letters
│   │   └── letter_template.txt 
│   └── Names
│       └── invited_names.txt 
└── Output  <-- we need to create the new letters inside this folder

In order to write in a file, we need to switch to the w (write) mode:

        with open(f"Output/ReadyToSend/letter_for_{cleaned_name}.txt", "w") as output:
            output.write(new_letter)

Now if you run your code, you'll have some new letters for each names in the Output folder

├── main.py
├── Input
│   ├── Letters
│   │   └── letter_template.txt 
│   └── Names
│       └── invited_names.txt 
├── Output
    ├── ReadyToSend
       └── letter_for_Alice.txt
       └── letter_for_Bob.txt
       └── letter_for_Charlie.txt
       └── and so on

Here's the whole code snippet:

PLACEHOLDER = "[name]"

with open("Input/Letters/letter_template.txt") as letter_file:
    letter_content = letter_file.read()

with open("Input/Names/invited_names.txt") as name_file:
    names = name_file.readlines()
    for name in names:
        cleaned_name = name.strip()
        new_letter = letter_content.replace(PLACEHOLDER, cleaned_name)

        with open(f"Output/ReadyToSend/letter_for_{cleaned_name}.txt", "w") as output:
            output.write(new_letter)

Note:

We can also combine the reading step like this:

# Combine reading of both files into a single block
with open("Input/Letters/letter_template.txt") as letter_file, \
     open("Input/Names/invited_names.txt") as name_file:

    letter_content = letter_file.read()
    names = name_file.readlines()

with open("Input/Letters/letter_template.txt") as letter_file, \
     open("Input/Names/invited_names.txt") as name_file:

    letter_content = letter_file.read()
    names = name_file.readlines()
    for name in names:
        cleaned_name = name.strip()
        new_letter = letter_content.replace(PLACEHOLDER, cleaned_name)

        with open(f"Output/ReadyToSend/letter_for_{cleaned_name}.txt", "w") as output:
            output.write(new_letter)

Text Cleaning in Python

Nazanin Ashrafi — Fri, 03 Oct 2025 15:04:24 +0000

Hey to my fellow Python enthusiasts.

This article is about a very simple text cleaning. Nothing fancy or complicated here.
This might not be exactly a practical script but it'll help you get the idea of how some stuff works, like accessing the file and breaking texts into Words.

In this article I'll be talking about how to clean up the symbols and keep the words in each separate line.

So for example, we have this text file and want to get rid of the symbols

!@#<h2>**The Qu!ck Br0wn F0x Jumps Over The L@zy D0g.**</h2>
 (Did you see that?) Th!s is a sample $tring with **m!xed** cAsE, num3r@ls (like 123),

Let's work on the logic and breaking down the problems and then we'll go through this step by step.

First we need an empty list to add the cleaned words to.
Then we have to access the text file which means opening and the file.
Python reads a file line bye line, not words by words. So first we have to go through each line, then go through each words and then go through each characters.
(line → word → character)
So when we go through each characters, we need to check if it's a symbol or not.
If it is, then it should go out and if it isn't, then we'll keep it.

Now let's work through this logic step by step with code snippets:

Let's start off with creating an empty list:

words = []

We also need to create a list of the characters that we identify as the things that we don't want in out text.

symbols = ['!', '"', '#', '$', '%', '&', "'", '(', ')', '*', '+', ',', '-', '.', '/', ':', ';', '<', '=', '>', '?', '@', '[', '\\', ']', '^', '_', '`', '{', '|', '}', '~']

It's time to access and open the file

with open("text.txt") as file:

In step 3 we talked about how python reads a file line bye line. So to do that and go through each characters, we need nested loops.

looping through lines:

with open("text.txt") as file:
     for line in file:

Looping through words of each lines:
This part is a bit tricky because we can't just say:

for word in line:

Here comes the split() method ins play:
What split() Does:
It takes a single string and breaks it up into a list of smaller strings.

with open("text.txt") as file:
    for line in file:
        for word in line.split():

So let me explain this part:

for line in file will get each line.
for word in line will get each words from the line.
let's say this is our text : "Hello, World!"

what for word in line does is that it will get each words but not a word a whole.

So basically it's not gonna print out "hello" but instead it prints out something like this:

H
e
l
l
o

And we don't want that. That's why we need the split() method to tell the python "okay cut the whole word from the string and then move on to the next word, instead of printing them out by characters and then moving on to the next words"

Here's an example:

text = "Hello, World!"
for word in text:
    print(word)

text = "Hello, World!"
for word in text.split():
    print(word)

The first one would print out:

H
e
l
l
o
,

W
o
r
l
d
!

While the second one would print out:

Hello,
World!

Now that we have each words as whole, then we can move on to the next part, which is to check for a symbol in each words.
But before we loop through each characters like this:

for char in word:

We need to create an empty string outside of this for loop, so that each time a character is not a symbol, it's go to that variable.
Let's call it cleaned_word

cleaned_word = ""

with open("text.txt") as file:
    for line in file:
        for word in line.split():
            cleaned_word = ""

Now we can loop through each character and see if there's a symbol or not:

            cleaned_word = ""
            for char in word:
                if char not in symbols:
                    cleaned_word += char

Now all we have to is to get the cleaned_word and add them to the words list:

            final_word = cleaned_word.lower()
            words.append(final_word)

So now let's put together the whole code block:

with open("text.txt") as file:
    for line in file:
        for word in line.split():
            cleaned_word = ""
            for char in word:
                if char not in symbols:
                    cleaned_word += char
            final_word = cleaned_word.lower()
            words.append(final_word)

The las and final step would be to get each word from the words list:

for word in words:
    print(word)

You can also filter the cleaned words and only print out the words that are longer than 5 charachters:

            final_word = cleaned_word.lower()
            if len(final_word) > 5:
                words.append(final_word)

with open("text.txt") as file:
    for line in file:
        for word in line.split():
            cleaned_word = ""
            for char in word:
                if char not in symbols:
                    cleaned_word += char
            final_word = cleaned_word.lower()
            if len(final_word) > 5:
                words.append(final_word)


for word in words:
    print(word)

So that's basically it for this article.
See yall in the next one.

You can also reach out to me on twitter: @nazanin_ashrafi

How To Make a Hexagon honeycomb With CSS

Nazanin Ashrafi — Fri, 17 Dec 2021 20:23:32 +0000

I used to think making honeycombs is hard, but it really isn't.

In this article i'll show you how to make a honeycomb.

Before we get started, you need to know that honeycomb is basically made of a rectangle and two triangles .

1. First you need to make a rectangle :

.honeycomb {
    width: 57px;
    height: 100px;
    background-color: #3d3d3d;
    transform: rotate(90deg);
}

2. The next step is to make the triangles.

If you don't know how to make triangles or have a hard time understanding how it works, I've already written an article about it.

You can check it out HERE

Okay back to our triangles.

You can make them with before/after pseudo elements.

A.

.honeycomb::before {
    content: "";
    display: block;
    /* I made it red just to show you where the triangle is */
    border-right: solid red 28px;
    border-top: solid transparent 50px;
    border-bottom: solid transparent 50px;
}

Now we just need to position it on top of the rectangle :

.honeycomb::before {
    content: "";
    display: block;
    /* I made it red just to show you where the triangle is */
    border-right: solid red 28px;
    border-top: solid transparent 50px;
    border-bottom: solid transparent 50px;
    position: absolute;
    left: -27.8px;
    top: 0px;
}

B.

And we do the same thing for the other triangle :

.honeycomb::after {
    content: "";
    display: block;
    /* I made it red just to show you where the triangle is */
    border-right: solid red 28px;
    border-top: solid transparent 50px;
    border-bottom: solid transparent 50px;
    /* position it at the bottom */
    position: absolute;
    left: 56.9px;
}

For flipping the triangle you could either :

Use rotate property Or
Use scale property

       /* flipping the triangle */
    transform: scaleX(-1);
    /* or rotate it 180deg */
    transform: rotate(180deg);

.honeycomb::after {
    content: "";
    display: block;
    /* I made it red just to show you where the triangle is */
    border-right: solid red 28px;
    border-top: solid transparent 50px;
    border-bottom: solid transparent 50px;
    /* position it at the bottom */
    position: absolute;
    left: 56.9px;
    /* flipping the triangle */
    transform: scaleX(-1);

    /* or rotate it 180deg
    transform: rotate(180deg); */
}

Just change all the background color to #3d3d3d and you have a honeycomb

Here's my pen :

See the Pen
Honeycomb by Nazanin Ashrafi (@nazaneyn)
on CodePen.

If you want to the honeycomb to look like this (below picture), instead of the sharp point facing up , all you have to do is to remove the rotate proprty :

.honeycomb {
    width: 57px;
    height: 100px;
    background-color: #3d3d3d;
    /* transform: rotate(90deg); */
}

That's the end of this article.

I hope you enjoyed it 😊

You can also connect with me on twitter

How to @import sass in Jekyll

Nazanin Ashrafi — Mon, 02 Aug 2021 17:10:31 +0000

Jekyll is a small community and finding the right docs and tutorials is kind of hard.
Yes you can find stuff in Jekyll official docs but you will eventually face some error which you can't find in the official docs.

I spend the whole day on trying to import my sass files in Jekyll, so in this article I will tell you how to do it and save you lots of time.

The good news is Jekyll comes with a built-in sass plugin and you don't have go through the whole installing sass process thing

Let's get started

1.

The first thing you need to do is go to your "_config.yml" file and add this :

sass:
    sass_dir: _sass
    style: compressed

2.

Now create a new folder and name it "_sass".

pssst don't forget the underscore

Inside your "_sass" folder you can create folders and sass files.

Let's create 2 folders, one is named "base" and the other is "layout"

> _sass
   > base
   > layout

Inside each folder, create a sass file.
I called one "test.scss" and one "home.scss"

> _sass
   > base
       > test.scss
   > layout
       > home.scss

The files in your "_sass" folder are the the files that you write your styles in

3.

create a main sass file in _sass foldeer

> _sass
   > base
   > layout
   > styles.scss

and import all of your files (which are inside "_sass" folder ) inside "styles.scss.

Now let's import our index.scss and home.scss inside styles.scss

@import "base/index.scss";
@import "layout/home.scss";

Note : you may see some people import their files without .scss and it'd work just fine for them but for my case didn't work because Jekyll generates new css files inside of _sass folder which then would interfere with scss file and you'd get a got an error


<!-- Jekyll generates new css files -->
> _sass
    > styles.scss
    > styles.css
    > styles.css.map

So you see now we have three files that has the same exact name
and when you import your files like :

@import "styles";

Jekyll wouldn't know which style file to import and you'll get an error telling you to delete or rename your file. So it's best to write the file extension.

4.

after importing our files into the main scss file , now it's time to compile it into css
and all we have to do is import the main scss file into it

A. Create "assets" folder , then create a new css folder inside it. now we need to create our main css file
but here's the trick, your main css file shouldn't be "style.css" it won't work , instead it should be "style.scss"

>assets
   >css
      >style.scss

B. Now it's time to import your main scss file into your main css file (which we create in css folder) like this :

---
---

@import "styles.scss";

Note :You only need to add front matter in your main css file and Jekyll will automatically figure our to compile it into css

5.

The last step is linking our css file in index.html

Remember when I said our main css file can't be "styles.css" and need to be in "styles.scss"?
So here's another tricky part, when you want to link it in your index.html you shouldn't link it like this :

    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/style.scss">

We simply need to turn it into css :

    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/style.css">

Tada! you're all set and done.

Tip : I used to create all these bunch of folders/files that were empty and imported them and kept getting errors , it turned out you shouldn't import empty files

Create An Image Gallery Using Flexbox

Nazanin Ashrafi — Tue, 20 Apr 2021 17:59:39 +0000

Creating a simple image gallery could be a little hard.
But thanks to flexbox for making it very simple and save us the headaches ! phew!

We're going to create something like this :

P.S. I originally used different pics for this article which I got them from GUWEIZ's twitter

Okay lets get started

Setting up HTML

Create an ul element and add your image

<ul>
        <li><img src="/img/new/Es568VFXYAARANj.jpeg" alt=""></li>
        <li><img src="/img/new/Es56_FqXMAUB_O4.jpeg" alt=""></li>
        <li><img src="/img/new/EvexIKIUYAAHw-L.jpeg" alt=""></li>
        <li><img src="/img/new/EvFHhxNXYAg59-F.jpeg" alt=""></li>
</ul>

Setting up CSS

First thing first:

Set the ul element's display to display: flex;.


  ul {
      width: 100%;
      display: flex;
  }

It will line up all the image in one line and no matter how many images you add, they will all end up being in that line

This is where flex-wrap: wrap; comes in to warp the images.

 ul {
      width: 100%;
      display: flex;
      /* as the name shows, it will wrap your images */
      flex-wrap: wrap;
  }

This is the final code snippet :


  ul {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
  }

  li {
      width: 25%;
      /* gets rid of the bullets */
      list-style: none;
  }

  img {
      width: 100%;
  }

We just created a image galley.

But there's a little problem.

As you can see I sorted my images (vertically/horizontally).

What if my images are like this :

What if you don't want to sort your images? or you have lot of images and don't have time to sort them! What should you do then?

In the first method I sorted the images and set width for li element, but this won't work for unsorted images and will completely ruin everything ( like I showed you in the pic above).

From what I've learned from css tricks
, in a situation like this when you have unsorted images you need to set height for li element instead of width
and for img element you need to set max-height , min-width

ul {
  display: flex;
  flex-wrap: wrap;
}

li {
  height: 40vh;
  flex-grow: 1;
}

img {
  max-height: 100%;
  min-width: 100%;
  object-fit: cover;
  vertical-align: bottom;
}

Here's a small galley project I did back then.
You can check it out here

How To Create a Sticky Navbar

Nazanin Ashrafi — Sun, 11 Apr 2021 15:36:36 +0000

In today's article I'll show you how to create a sticky navbar.
There's also gonna be two bonuses.

It's not really hard, all you have to do is :

ul {
position: fixed;
    top: 0;
}

BUT it could be tricky.
So stay with me until the end of this article .

First thing first :

Setting up HTML

 <header>

        <!-- This is for our background image -->
        <div class="bg"></div>

        <nav>
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">Projects</a></li>
                <li><a href="">Contact</a></li>
                <li><a href="">About</a></li>
            </ul>
       </nav>
    </header>

  <section>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae, unde sequi. Labore, tempora quos veniam sunt deserunt dolor autem ullam eligendi, accusamus laudantium dolore cupiditate dignissimos omnis? Suscipit, ipsam possimus?</p>
    </section>

Setting up CSS

A. Create a simple navbar

ul {
    width: 100%;
    background-color: rgb(0, 204, 255);
    display: flex;
    justify-content: center;
}

li {
    /* gets rid of the bullets */
    list-style: none;

    margin: 20px 25px;
}

a {
    color: #fff;
    font-size: 120%;

    /* gets rid of the link underline */
    text-decoration: none;
}

B. Create the background image or your texts or whatever you like, which in my case I created a background image


.bg {
    position: relative;
    width: 100%;
    min-height: 125vh;

    /* got the image from https://www.gavtrain.com/?p=6851 */
background-image: linear-gradient(rgba(0, 0, 0, 0.801), rgba(0, 0, 0, 0.801)), url(https://www.gavtrain.com/wp-content/uploads/2020/02/Neon-BG-Blog.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: repeat;
}

And now if you scroll down, you'll see that the navbar will disappear

C. It's time to fix this mess by giving the ul element fixed positioning

ul {
position: fixed;
    top: 0;
}

This will fixate the navbar on top of the screen.

But as you can see (in the gif below) the navbar disappeared or it's better to say it went behind the background image.

Add z-index:1 ; to your ul element to fix this.

PS I briefly explained about z-index in this article

ul {
    width: 100%;
    background-color: rgb(0, 204, 255);
    display: flex;
    justify-content: center;
    position: fixed;
    top: 0;
    z-index: 1;
}

Congratulations, you just created a sticky nabvar 🥳🥳

This is the final touch up :

Bonus 1 : How to stop the navbar from overlapping

So this is the original background image

(Got the image from here )

As you see the navbar overlapped on our element and a little bit of image went underneath the navbar

You can fix the overlapping by giving margin-top to the background

Fun fact : I just created a channel just to upload this short video lol

Bonus 2 :

For animating link underlines you can check out this amazing article

How To Blur Background Image Without Affecting The Child Element

Nazanin Ashrafi — Sun, 04 Apr 2021 15:10:55 +0000

Let's pick up where we left off last week.

So in last week's article I talked about getting rid of white borders.
And now we want to set the blurry image as background and add some stuff in front of it.

If you use the second trick, you don't even need to read this article but if you're gonna use the first trick then stay with me .

And now we want to learn how to do this :

The first thing you should absolutely avoid is doing this :

<section class="blurry-bg">       <!-- Don't use section element as your background -->
    </section>

You need to create a new div inside your section and set a background image for that div. Because if you set it for your section, it will affect your child elements and things will get ugly , like this :

Instead do this :

 <section class="gallery-section">

<!-- Create a separate div for the background image -->
        <div class="blurry-bg"></div> 
    </section>

Now we need to set an image as the background and then blurred it , like how we did it in last week's article :

.blurry-bg {
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(0, 0, 0, 0.63), rgba(0, 0, 0, 0.623)), url(img/000333.jpg);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.blurry-bg::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100vh;
    backdrop-filter: blur(5px);
}

After doing so , you can add your child elements

 <section class="gallery-section">
        <div class="blurry-bg"></div> 
        <p>Some text here</p>
        <img src="/img/000333.jpg">
    </section>

But there's gonna be a little problem here. Your elements will go below the background.

We will fix it with relative/absolute positioning and z-index :

Set your background element to position: absolute; and the parent element to position: relative;
(which in our case is the section which I gave it class="gallery-section" )


 .gallery-section {
    position: relative;
}

.blurry-bg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.63), rgba(0, 0, 0, 0.623)), url(img/000333.jpg);
    width: 100%;
    height: 100vh;
    position: absolute;
    z-index: -1;  <-- comment z-index and see what happens -->

}

You might wonder why we need z-index

Take a look at this pic

You see that blue layer ?

This is where your elements are right now. in order to bring it back up to the surface (green layer) we set the z-index of the background to "-1" , meaning we sent green layer behind our elements.

Here's the final touch

 <section class="gallery-section">
        <div class="blurry-bg"></div> 
        <p>Some text here</p>
        <img src="/img/000333.jpg">
    </section>


 .gallery-section {
    position: relative;
}

.blurry-bg {
    width: 100%;
    height: 100vh;
    position: absolute;
    background-image: linear-gradient(rgba(0, 0, 0, 0.63), rgba(0, 0, 0, 0.623)), url(img/000333.jpg);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
}

.blurry-bg::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100vh;
    backdrop-filter: blur(7px);
}

I've created a small project.
You can check it out here

And here is the link to github

DEV Community: Nazanin Ashrafi

Windows paths with spaces in Python's `os`

1. The Recommended Fix: Use a Raw String r

2. Alternative Fix: Double Backslashes

Fake SMTP Server

Step 1: Install aiosmtpd library

Step 2: The Modern Fake SMTP Server Script (aioserver.py)

Step 3: The Client Script (client_script.py)

Instructions:

Another script

`requirements.txt` in python

Stop Saying "It Works on My Machine!"

Why Bother Making This File?

1. It Stops Breakages (Version Control)

2. It Makes Sharing Easy

3. It Keeps Your Environment Clean

Step 1: Get Into Your Workspace

Step 2: Install the Stuff You Need

Step 3: Generate the File (The Magic Command!)

What Just Happened?

Step 4: You're Done!

Now what?

Getting Marimo Up and Running on Windows with uv

Getting Started with Marimo on Windows (using uv)

1. Get the uv Installer

2. Set Up Your Marimo Project

3. Launch Your Marimo Notebook!

Installing pandas with uv on windows

1. Install uv (If Needed)

2. Create a Virtual Environment

3. Activate the Virtual Environment

4. Install pandas

Basic Mail Automation in Python

Let's start with the basic logic:

Now let's go through these steps with more details.

1. Opening Files:

2. Reading files:

3. Looping through names:

4.

Text Cleaning in Python

Let's work on the logic and breaking down the problems and then we'll go through this step by step.

How To Make a Hexagon honeycomb With CSS

1. First you need to make a rectangle :

2. The next step is to make the triangles.

A.

B.

How to @import sass in Jekyll

1.

2.

3.

4.

5.

Create An Image Gallery Using Flexbox

Okay lets get started

Setting up HTML

Setting up CSS

Here's a small galley project I did back then. You can check it out here

How To Create a Sticky Navbar

Setting up HTML

Setting up CSS

Bonus 1 : How to stop the navbar from overlapping

Bonus 2 :

How To Blur Background Image Without Affecting The Child Element

1. The Recommended Fix: Use a Raw String `r`

Step 1: Install `aiosmtpd` library

Step 2: The Modern Fake SMTP Server Script (`aioserver.py`)

Step 3: The Client Script (`client_script.py`)

Here's a small galley project I did back then.
You can check it out here