Forem: Nava

The Python Guide: Virtual Environments, pip, and Everyday Workflows

Nava — Sat, 21 Feb 2026 11:45:30 +0000

Python is one of the most widely used languages in the world, but a clean development workflow matters just as much as the code itself. This guide covers the essentials — virtual environments, dependency management, and handy tricks that save time day to day.

1. Setting Up a Virtual Environment with `venv`

Virtual environments keep each project's dependencies isolated from one another and from your system Python. Every project should have its own — it prevents version conflicts and makes your setup reproducible on any machine.

Example

mkdir projectA && cd projectA

python3.8 -m venv env

source env/bin/activate    # Linux / macOS

env\Scripts\activate.bat  # Windows CMD

env\Scripts\Activate.ps1  # Windows PowerShell

To exit the environment:

deactivate
Running python3.8 -m venv env creates an env/ folder containing an isolated Python binary, pip, and a lib/ directory for installed packages. Always add env/to your .gitignore — it should never be committed to version control.

2. Managing Dependencies with pip

pip is Python's package installer. The key workflow is to install what you need, then freeze those dependencies into a requirements.txt file so anyone else can reproduce your exact environment with a single command.

Example

pip install Flask             # install a package

pip list                   # see installed packages

pip freeze > requirements.txt  # save exact versions

pip install -r requirements.txt # restore from file

To uninstall and cleanly reinstall all dependencies — useful when something breaks — run pip uninstall package-name followed by pip install -r requirements.txt. This is often the fastest way to resolve mysterious dependency conflicts.

3. `virtualenvwrapper`for Convenience

If you manage many projects, virtualenvwrapper is a layer on top of venv that gives you short commands to create, switch, list, and delete environments from anywhere on your system — no need to navigate into the project folder first.

Example

pip3 install `virtualenvwrapper`

mkvirtualenv my-project   # create

workon my-project       # activate

lsvirtualenv           # list all environments

rmvirtualenv my-project   # delete

You can confirm which environment is currently active at any time by running echo $VIRTUAL_ENV — it prints the full path to the active environment, or nothing if none is active.

Spin Up a Quick HTTP Server Python ships with a built-in HTTP server that's useful for serving static files locally — great for previewing HTML or sharing a folder over a local network without installing anything extra.

Example

python -m http.server 8000
Serves the current directory at http://localhost:8000

5. Clearing the Python Interpreter

When working interactively in the Python REPL, the screen can fill up quickly. There's no built-in clear command, but you can use os.system() to call the terminal's clear command. A cross-platform one-liner works on both Windows and Unix.

Example — cross-platform clear

import os

clear = lambda: os.system('cls' if os.name == 'nt' else 'clear')

clear()  # call it any time

os.name == 'nt'

evaluates to True on Windows and False on Linux or macOS, so the same function works everywhere without any changes.

6. Python in WSL / Ubuntu on Windows

When running Python projects inside WSL (Windows Subsystem for Linux), your Windows files are accessible under /mnt/c/. Navigate there from the Ubuntu terminal to work on projects stored in your Windows filesystem.

Example

cd /mnt/c/Users/yourname/dev/my-project

python3 -m venv env

source env/bin/activate

If you run into issues with Node-based tools (like Vite) inside WSL, a common fix is to delete node_modules and reinstall from within the Linux environment, or set CHOKIDAR_USEPOLLING=true to work around file-watcher mismatches between Windows and Linux.

A solid Python workflow comes down to three habits: always use a virtual environment, keep your requirements.txt up to date, and know your tools. The commands above cover the majority of what you'll need for day-to-day Python development.

Responsive grid layout

Nava — Sun, 26 Mar 2023 12:59:08 +0000

Introduction

Responsive design involves Writing code that targets different screen sizes with @media rule. A web page may have a menu on top right with a logo on left for a simplest form which looks cool on desktop or laptop. Responsive design cares about how same menu looks on a smaller screens like iPad or mobile on resize.Bootstrap provides convenient classes like .sm-col-6, or .md-col-8 to specify width of element on small or medium devices.

'''css
@media only screen and (max-width:601) {
.logo, .nav li {
display: block;
Width: 100%
}
}
'''

In css grid, we have different grid-template-areas property that allows to define areas in the page that can be applied to individual div containers like header,#main-content or footer like,

main-content {

grid: content

Simple Web development workflow

Nava — Sun, 26 Mar 2023 12:58:14 +0000

The folder structure

Any development work needs some organised plans.In my project I am up files in a new folder starts with creating folder and files before coding for web development, in my case it looks like this.

Project folder

images
app
- style.scss
- script.js
dist
- style.css
index.html

Customizing and Plugins in Visual code

Changing default Settings in order to customize visual studio code is easy.To do that, I go to bottom left in settings, I choose font-size to be large enough to see clearly so I chose it 18px, You may choose different depending on your needs. The tabs-size 2 instead of default of 4, and word wrap to yes.
Installing plugins from Extensions Marketplace
The basic plugins are Live server and Sass live serve. The javascript snippets for Html css and Js plugins is also helpful.

Common shortcuts and buttons

Shift-Alt-DOWN which copies whole line down
CTRL-D which selects similar tags in between lines
CTRL-B hide sidebar
CTRL-p search files or Alt-Tab
CTRL-R to browse between folders
Shift-CTRL-p opens control pallete for shortcuts keys or settings project workspace or any plugins.
Go Live button to open live server
Watch Sass to enable watch sass to convert to css

Pulling together files for build

I usually setup a app folder for sass files and dist folder for style-sheets file. The live sass compiler compiles the sass files and generate the style.css in dist folder. The app folder contains style.sass as main sass file which pulls together other sass partial files like _globals.sass, _variables.sass, _mixins.sass, typography.sass and other sass files.The _debugging in google chrome is very helpful to see if the final style.css file is working.

Conclusion

These settings help me a lot to get started, I hope It helps someone to learn using the tools and get started in the journey. All the best.

Vscode Shortcuts and Extensions commonly used

Nava — Sun, 26 Mar 2023 12:57:12 +0000

Shortcuts

All Commands Pallette - cmd + shft + p
Files - cmd + p
Toggle terminal - ctrl + `(backtick)
Toggle sidebar - cmd + b
Comment selected - cmd + /
Indent selected - cmd + } or {
Select multiple lines hold alt and select
Select similar tags - alt + d

Extensions

Code Formatter - Prettier
Icons - Material icon theme
Live Server - Live SASS compiler - Browser Sync
Theme dark - One Dark Pro Atoms - Mariana sublime text theme
HTML CSS Support - CSS Intellisense
Tailwind CSS intellisense

Accessing Mongo database in Node app

Nava — Sun, 26 Mar 2023 12:56:36 +0000

MongoDB is no-sql non-relational database. Means data is stored as documents similar to objects in javascript.

Installation of MongoDB in Mac

$ brew install mongodb-community
$ brew services start mongoDb
local install in /usr/local/var/mongodb, /usr/local/etc/ for config. ip=127.0.0.1

Commands to see database and collections

start shell $ mongo, db shows test database, use dbname,
db, use, show databases, show collections.
collections is same like tables.

Operations on local database

create datadb.createCollection('cars') or other way db.dogs.insert({ name: "Roger" })
db.dogs.find()
filter and retrieve entry $ db.dogs.find({name: 'Roger'}):
findOne(),
update datadb.dogs.remove({}) removes all entries.
db.dogs.update({key: 'old obj'}, {key: 'new obj'})
remove datadb.dogs.remove({name: 'sakira'})

Remote mongo database setup using Atlas

Atlas is remote database as a service.managed, hosted.

Create account, create db user, use ip, 0.0.0.0/0 connect from everywhere , get db connected, authId.
Create Model, first schema, is shape of document.
.env for url, to use invironment var we need .env file with variable='string', we install dotenv, require ('dotenv').config()
npm install mongodb, mongoose, dotenv, express. require them in .json.package.also, nodemon,
mongoose.connect(url, {topology})
const personSchema = new mongoose.Schema({}
Person = mongoose.model('Person',personSchema);

we created schema personSchema and we created model Person

We can instantiate Model Person
then call save() with callback err,data parameters inside handler function, we call callback done(null, data). we call done, it inside again. That's it.
we use Model.create() for many, use instance,Model.save() for single person. awe, difference.
Model.Method takes first parameter obj, second calback.So, two callbacks, one for handler fn, and other from Model.method()
some methods save,create,find,findOne,findById,findOneAndUpdate,findByIdAndRemove, callbacks done,done(null, data),function(err, data) {} etc to list in MongoDB & Mongoose package.
- Model.Method takes first parameter obj, second calback.So, two callbacks, one for handler fn, and other from Model.method() // some methods save,create,find,findOne,findById,findOneAndUpdate,findByIdAndRemove, callbacks done,done(null, data),function(err, data) {} etc to list in MongoDB & Mongoose package.

Using MongoDB from Node.js

To interface to a MongoDB database from a Node.js app
init -y, npm install mongodb
const mongo = require('mongodb').MongoClient

try {
  const client = await mongo.connect(url, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  });
} catch (err) {
  console.error(err);
}

Now you can select a database using the client.db() method:
select a database const db = client.db('kennel')
can get a collection const collection = db.collection('dogs')
one const result = await collection.insertOne({name: 'Roger'})
many const result = await collection.insertMany([{name: 'Togo'}, {name: 'Syd'}])
find const items = await collection.find().toArray()

We need a handle either as a function or const variable collection,
or db.collectionName. then we add dot method.

Rest API uses routes HTTP GET / and HTTP POST /

In Express we create server, web server
app.get('/', (req, res) ) to send to client ,get data from database or from script.
single data as app.get('/:id', (req, res) ) handled in script using filter(cb) from req.params. and send back using res.status(code).json()
app.post('/', (req, res) ) to insert data to db.
we use mongodb or postgre sql database to store local or remote.

Callbacks and Promises in Asynchronous Programming

Nava — Wed, 07 Jul 2021 02:27:16 +0000

Asynchronous Programming means running programs without waiting for execution line by line. We can move onto next line during execution. If one line accessing data from database or server is taking wait time and we donot want to halt entire program.

Browsers provide API's like setTimeout, promise, Async-await, fetch API, Storage API for Asynchronous programs.These are commonly called by the name Web API.

In backend there are other api's like REST api, graphQl api.

Callbacks and setTimeout function

Callbacks are very useful in application programs.For a simple example,We can use callbacks using setTimeout function. We can see most functions in javascript use callbacks likeforEach,fetch,promise,addEventListener, async await,map, filter, reduce.

setTimeout

The example here has three setTimeout functions. Each function takes an argument. Each of the arguments are functions themselves. They are called callbacks.Each of them prints a string on console. First timer function executes after one second, second after five seconds and third after two seconds. So, that means javascript executes first then executes third console.log because it is set to run after two seconds. And then third one after five seconds.

Javascript has something called event loop, to handle asynchronous code.When you call an asynchronous function in JavaScript, that is queued into the event loop, and will only be executed when its turn comes.This prevents blocking execution of other programs. So, to make every process isolated from each other, every tabs of browser, each node.js programs, API calls, Web Workers have their own event loop.

setTimeout(function () {
  console.log("Hello");
}, 1000);
setTimeout(function () {
  console.log("Dear come later.");
}, 5000);
setTimeout(function () {
  console.log("World");
}, 2000);

The execution of code does not care about the order setTimeout functions are written in code. It follows the timer which controls the order the outputs are executed. Event loop executes third setTimeout function by loading it in call stack after it executes and removes first function from call stack.

(
Callback
Most programs that use callback has to perform operations in an order, for example, if we access data from database using API and then so some operation on data and then display the result.
This code above prints results without any sequence because the timer is asynchronous. To display output in sequence, we can do use same code by nesting setTimeout functions into one.

Note: The main point is second setTimeout depends on result of first function and result of third function depends on result of second setTimeout function.

setTimeout(function () {
  console.log("Hello");

  setTimeout(function () {
    console.log("It comes sooner.");
    setTimeout(function () {
      console.log("World");
    }, 2000);
  }, 5000);
}, 1000);

In the following example we use callback cb as parameter of handleName function. We use callback to call string functions makeUpperCasename and reverseName as argument along with a string name. The handle name function takes the argument name and replace the parameter with it, and it takes a callback which is invoked inside the function. The result is uppercase fullname and reverse fullname.

function makeUpperCasename(value) {
  console.log(value.toUpperCase());
}
// makeUpperCasename("Johathon");

handleName("Jimmy", makeUpperCasename);
handleName("Jimmy", reverseName);

function reverseName(value) {
  console.log(value.split("").reverse().join(""));
}

function handleName(name, cb) {
  const fullName = `${name} Carter `;
  cb(fullName);
  cb(fullName);
  cb(fullName);
  //  two gotchas, we donot invoke `cb` in function parameter
  //  and we can pass any functions as `cb` when we invoke it
  // and any number of time.
}

()
Callbacks are very useful in most cases.The example we use here is simple one, in real world, in application programs code using callback are less manageable when we have so many callbacks. It is called callback hell. The simplest solution to this is promises.

const btn = document.getElementById("btn");

btn.addEventListener("click", function () {
  console.log("Hello World!");
});
// console.log(btn);

Promise

We define promise using new constructor which takes a callback as a parameter. We have an arrow function as callback.
The callback has two parameters resolve and reject which are methods of Promise API.We call these methods inside the curly braces in our logic.If we have a error in our logic we call reject and if the code is doing well we use resolve.

const promise = new Promise((resolve, reject) => {
  // resolve("I am a resolve of promise");
  reject("I am a reject of promise");
});
console.log(promise);

We need to call promise after defining. We do that using handlers .then and .catch.Both catch and then takes callback functions as arguments.

We need to handle errors, inside catch method using a parameter that we can name whatever we like, here, I use error parameter, then we print error. We print result if there is no error inside the then method.

promise
  .catch((error) => {
    console.error(error);
  })

  .then((data) => {
    console.log(data);
  });

Async await

Async await provides similar functionality like promises with a nicer syntax.
Any function can become async function by using async keyword prefix. We call promise using await afterwards. We have assigned data as constants to store result returned.

const getProducts = () => {
  return new Promise((resolve, reject) => {
   // get products data 
    resolve("fulfillling promises");
  });
};

const doSomething = async () => {
  const data = await getProducts();
  console.log(data);
};

doSomething();

Fetch API

Fetch provides networking in Browser. We have access to response and request objects of HTTP using fetch. HTTP is the API that connects our browsers to the web server.
Just a fetch on a url returns a promise.We need to handle the promise returned.
We need use async function and await to make sense of data returned. Other option is to handle promise with then and catch methods.
const result = fetch(url)
console.log(result)
Calling just fetch returns promise, so we use await before fetch and try catch block and enclose everything inside async function.we are using IIFE in this example.IIFE is immediately invoked function expression that invokes itself.

The fetch call makes a request to the server and returns a response object in body of the message. Next step is to convert that response into human readable data.Finally we are using .json method on the response object returned by the fetch network call. Then we print the data as our result in the console.

(async () => {
  try {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
})();

Do CSS Grid replace Flexbox?

Nava — Mon, 27 Jul 2020 06:01:51 +0000

Grid is better than flexbox for a number of valid points. There are things grid do better than flexbox and vice versa.On March 2017 with less browser support than flexbox grid was released unprefixed and ready-to-go, in Chrome, Opera, Firefox, and Safari.
Grid is better for whole page layouts than flexbox because using flexbox for layout can cause content shift during loading due to js modifying the DOM which can be used for tools not rules.

Grid can add columns or rows on fly with grid-template-rows or grid-template-columns and use grid-gap property to make home made style page. The flexbox on other hand use its content to layout the page using flex-wrap and flex-basis which can essentially implement flex-grow or flex-shrink the boxes.

Furthermore, Grid uses the auto layout, minmax(), repeat(), and auto-fill which can provide responsive media query alternative.
Flexbox is essentially for laying out items in a single dimension – in a row OR a column. Grid is for layout of items in two dimensions – rows AND columns.

Positioning a navbar and logo in Landing Page

Nava — Tue, 30 Jun 2020 05:51:52 +0000

Introduction

Positioning is often overlooked property in CSS. This may be because the elements normally follow the flow of the document and positioning is not always needed.The elements of an HTML document can be either block elements like p,div or h1 that spans through entire line or inline elements like span or images which fills the surrounding space in a container.There are four basic positioning properties that are static, relative, absolute and fixed.

Static and Fixed

The static is dafault positioning which is normal flow of elements.The fixed positioning places an element at a certain position which remains unchanged on scroll or resizing the browser window.Fixed positioning removes an element from the normal flow of the document, which is similar to absolute positioning.In example, an unordered list is positioned fixed at bottom of browser window with 20px pixels from right.



ul {
    position: fixed;
    bottom: 0px;
    right: 20px;
}

Relative positioning

The other two positioning that needs more illustrations are relative and absolute positioning. The relative positioning is basically moves an element from the original position(normal flow of document) to a new position specifically dictated by values of left, right, bottom and top properties. Relative positioning does not affect the surrounding elements or parent elements.



.nav-bar {
    position: relative;
    top: 0px;
    right: 0px;
}

In above code, lets assume a menu with class .nav-bar is pushed from normal flow to top-right corner from its usual position.

Absolute positioning

In contrast, the below code places the element shifted with coordinates (20px, 25px) from the left corner of the browser window.Coordinates for absolute elements are always relative to the closest container that is a positioned element.



.logo {
    position: absolute;
    top: 25px;
    left: 20px;
}

So, if we change .logo's parent element which may be a header element to be relatively positioned, it should appear in the position 25px from top and 20px from the left of its parent element instead the browser window.

Forem: Nava

The Python Guide: Virtual Environments, pip, and Everyday Workflows

1. Setting Up a Virtual Environment with venv

To exit the environment:

2. Managing Dependencies with pip

3. virtualenvwrapperfor Convenience

5. Clearing the Python Interpreter

6. Python in WSL / Ubuntu on Windows

Responsive grid layout

Introduction

main-content {

Simple Web development workflow

The folder structure

Project folder

Customizing and Plugins in Visual code

Common shortcuts and buttons

Pulling together files for build

Conclusion

Vscode Shortcuts and Extensions commonly used

Shortcuts

Extensions

Accessing Mongo database in Node app

Installation of MongoDB in Mac

Commands to see database and collections

Operations on local database

Remote mongo database setup using Atlas

we created schema personSchema and we created model Person

Using MongoDB from Node.js

Rest API uses routes HTTP GET / and HTTP POST /

Callbacks and Promises in Asynchronous Programming

Callbacks and setTimeout function

setTimeout

Promise

Async await

Fetch API

Do CSS Grid replace Flexbox?

Positioning a navbar and logo in Landing Page

Introduction

Static and Fixed

Relative positioning

Absolute positioning

1. Setting Up a Virtual Environment with `venv`

3. `virtualenvwrapper`for Convenience