Forem: Jaswant Vaddi

Help Me Simplify Virtual Environments with 'pve' – Community Input Needed!

Jaswant Vaddi — Sun, 23 Feb 2025 14:27:20 +0000

Hey everyone! As a beginner, I’ve found setting up virtual environments tricky due to varying commands across systems. They’re crucial for project organization, so I’m working on making them easier for newbies like me.

Description of My Package:

I’ve started building pve, a small package to simplify virtual environments. It has two commands: pve create {env_name} to make a new environment and pve start {env_name} to activate it.

Current Issue:

The package is working as expected in Windows but The start command isn’t activating environment in MAC OS, likely due to cross-platform issues. I’d love insights from experienced devs—any tips on fixing activation or handling system differences?

GITHUB

JavaScript: Mastering Asynchrony in a Single Thread

Jaswant Vaddi — Fri, 15 Mar 2024 17:00:36 +0000

Before we delve into asynchronous JavaScript, let’s first discuss how the JavaScript compiler performs operations.

JavaScript is often referred to as a single-threaded language, meaning it cannot delegate work across multiple threads. Instead, it must execute each operation one by one in a single thread.

This single thread operates like an array. It contains a set of operations to perform, and the JavaScript engine uses push and pop operations to add or remove functions from the stack.

For example:

function consoleLog(){
    console.log("testing")
}
function firstFunction(){
    consoleLog()
}
firstFunction();

In this case, the JavaScript engine, which is always checking for functions to run, initially adds firstFunction to the stack.

Then, it sees that we are calling the consoleLog function. Before completing this function, it adds consoleLog to the top of the stack for execution.

Next, it encounters the console.log() function, which it then adds to the top of the stack. After executing console.log(), it pops this function from the stack. Since there are no remaining parts of the consoleLog function, it pops consoleLog from the stack. Finally, it pops firstFunction from the stack.

Now, let’s talk about asynchronous JavaScript.

An asynchronous function is one that cannot be executed completely and return a value directly because some task within it takes a significant amount of time.

A prime example of asynchronous functions are API calls. These calls connect with servers, which then connect with the required resources and return that resource. This process usually takes more time than we might expect.

Imagine you are running a function, and then there is an API call to get some data from a server. If this call is not asynchronous, your code is forced to wait for the entire duration of the call without doing anything else. Then, it must complete the rest of the function. This can take a lot of time.

So, what does JavaScript do for these asynchronous functions?

These functions are usually browser functions, so the JavaScript engine sends these functions directly to the browser to perform these actions while it continues as usual with the rest of the code.

The browser performs the asynchronous function completely and sends a message to the task queue indicating that this call is completed and provides the return value.

The JavaScript engine is always on the lookout for any function to be performed and to be added to the stack.

For instance, let’s say we added a click event to an HTML button element where this event triggers a function. As soon as we click, the engine knows to perform the click event function and adds that to the stack. The engine is constantly on the lookout for functions to be performed and, once it sees that the stack is empty, it also checks the task queue sent by the browser to see if there is any function to perform.

The engine performs all the functions that are in the stack and then performs the functions given by the browser queue. A great example to observe this phenomenon is this code:

console.log("a")
setTimeout(()=> {console.log("b")},0)
console.log("c")

You can try to run this code and see the order in which “a”, “b”, and “c” are logged to the console.

Here is a small explanation for it:
When we run this code, the first function to go to the stack is console.log("a"), which gets executed and logs “a” to the console.
The second line added to the stack is the setTimeout function. Once this browser API function is triggered, it sends the contents in it to the browser to deal with directly and removes this call from the stack.

The browser immediately returns a message to the task queue saying that you have to perform console.log("b").

But our JavaScript engine will first check if there is any function which is required to be added to the stack before checking the queue. It sees we need to perform console.log("c"), and it doesn’t know there is a message in the queue yet.

Once it logs “c” to the console, it reads the task queue message and logs “b” to the console.

This is my basic understanding and explanation of what asynchronous is and how JavaScript manages it in a single thread.

If there are some more good examples which you think of are know, which showcases asynchronous of javascript please share them

What is custom attribute

Jaswant Vaddi — Sat, 03 Feb 2024 14:28:27 +0000

Table Contents

Introduction to Custom Attributes
Difference Between Data-Prefixed and Non-Prefixed Custom Attributes
Syntax for Data Attributes
Accessing and Modifying Data Attribute Values

Recently for some reason I had to use data attribute in my project, then I have wondered can I give a custom attribute to html tag without ‘data- ‘ as prefix then I did some digging online it took some time for me to find relevant details, in this post first lets go through what are custom attribute how we use then and some details regarding its syntax and also why we are not use custom attributes directly without ‘data- ‘ prefix, so lets start

Introduction to Custom Attributes

I am sure you know what are attributes in HTML tags like id, class, onClick etc these are predefined attributes for the HTML tags, if there is some data that we want to store on HTML without linking to a Javascript property then we use data attributes to be honest there is some other uses of data attributes instead of just storing content in HTML we can also use this as a CSS selector, this just some normal overview of what is data attribute

Difference Between Data-Prefixed and Non-Prefixed Custom Attributes

well on outside there is not much difference except for the prefix but inside the HTML DOM there is significant difference, so when we use ‘data-’ as prefix HTML knows we are using data attributes and it stores all the attributes which are prefixed with ‘data-’ in a particular property in its DOM known as ‘dataSet’, but when we don’t use the prefix it doesn’t know that they are custom attributes, this might lead to some validation and compatibility issues with different browsers so we are generally recommended to use ‘data-’ prefix

Syntax for Data attributes

syntax for data attributes is simple we will write the name of custom attribute with ‘data-’ as prefix

<article
    id='history'
    data-type='history'
    data-period='19th century'
    data-index-number=20
></article>

Any type of value you assign to data attribute it will always treat that data attribute as string when we try to access that in Javascript

Accessing and Modifying Data Attribute Values

I am sure you remember that in DOM object all the data attributes are stored in dataset property we can access these data attributes in ‘dataset‘ property

const element = document.getElementById('history')
//or you can use 
// const element = document.querySelector("#history")

element.dataset.type; // "history"
element.dataset.period; // "19th century"
element.dataset.indexNumber; // "20" // this is string

I hope you have saw how I accessed a data attribute ‘index-number’ we are accessing it in ‘dataset’ using ‘indexNumber‘

all the names of data attributes after ‘data-’ are divided by - if there is any in the name and are converted into camelCased

small question from my side what will happen if I have a data attribute which is data-Number, how to do you think we have to access that Number in dataset please let me know in comments

same way as we get the data attributes value we can set them

element.dataset.type='science'

there is also another way get and set the data attribute which is using getAttribute and setAttribute

element.getAttribute('index')

element.setAttribute('index','20')

I hope this blogs give you clarity on data attributes and if you have any comments you can ask in comments

sources:

MDN DOCS
ChatGPT,BingAI

Summary:

Custom attributes in HTML, known as data attributes, allow storing additional information on HTML elements without linking to JavaScript properties.
It's recommended to prefix custom attributes with 'data-' to ensure proper recognition and handling within the HTML DOM, this will resolve any potential issues which are raised by browsers
Data attributes follow a simple syntax where the custom attribute name is prefixed with 'data-'.
Don’t forget regarding the camelCase
Accessing and modifying data attribute values can be done using the 'dataset' property or via getAttribute and setAttribute methods.

Python Comprehensions: A Short Overview

Jaswant Vaddi — Thu, 01 Feb 2024 16:13:52 +0000

Table Contents

Introduction to Python Comprehensions
Syntax of Comprehensions
Adding Extra Conditions
Pros and Cons
When to Use Comprehensions vs. For Loops

Hi guys, For some reason Initially I never understood comprehensions in python, I tried to avoid using that and mostly used for loop in its place, I thought that comprehensions are just fancy way of writing the same thing we do in loop(actually it is sort of), when I started writing more code in python slowly I was also tired of writing the complete loops for every small operations so I started using comprehensions to be honest I only used them mostly for lists, but I still used to had one doubt is there any other advantage of using the comprehensions instead of traditional loops. after getting answer to it I thought I have to write about it and share it so here we Go

1. Introduction to Python Comprehensions

Comprehensions in Python provide a short and readable way to generate sequences of data. They are a single-line loop that creates a new list, dictionary, set, or generator.

well this above line is definition according to AI but in simple terms we use comprehensions to create a list, dictionary, sets or generator from a iterable data

Some of the benefits of using the Comprehensions include easier to read, write and cleaner code with most important on more EFFICIENT and FASTER than traditional loops

Python supports four types of comprehensions: list, dictionary, set, and generator comprehensions.

2. Syntax of Comprehensions

The general syntax of a comprehension is: [expression for item in iterable]. This will create a new list resulting from the expression for each item in the iterable.

Examples of each type of comprehension

Here are examples of each type of comprehension:

List comprehension: [x ** 2 for x in range(10)]
Dictionary comprehension: {x: x ** 2 for x in range(10)}
Set comprehension: {x **2 for x in range(10)}
Generator comprehension: (x ** 2 for x in range(10))

3. Adding Extra Conditions

You can add conditions to the comprehensions to filter the results. The syntax is: [expression for item in iterable if condition].

For example, [x ** 2 for x in range(10) if x % 2 == 0] creates a list of squares for even numbers only.

two small question if you want to solve

assume you have a list of words and a string representing a set of letters, create a function that generates an iterable containing only the words from the list that start with any of the letters in the provided string.

create a list which contains all the common items between two lists

4. Pros and Cons

the main advantages of using Comprehensions are they are faster, readable and more efficient than traditional loops

But there is also a small drawback for comprehension if the logic is complex then it will get harder to read and understand in these situations it might be better to use traditional loops you can check the example in next section for reference

5. When to Use Comprehensions vs. For Loops

While comprehensions are more concise, traditional loops still are more flexible and can handle more complex tasks.

so in the cases where task is complex, involves using of nested loops or any other complex logic then Explicit For loops are more appropriate in this kind of situations

A small example to show case this

nested_list = [[1, 2, 3], [4, 6, 8], [9, 10, 12], [13, 14, 15]]
flattened = [num for sublist in nested_list if any(num % 2 != 0 for num in sublist) for num in sublist]
print(flattened)

nested_list = [[1, 2, 3], [4, 6, 8], [9, 10, 12], [13, 14, 15]]
flattened = []

for sublist in nested_list:
    if any(num % 2 != 0 for num in sublist):
        for num in sublist:
            flattened.append(num)

print(flattened)

from this example I am sure you can see the difference between using Comprehensions and traditional loops, actually both are doing the same but check the readability it will take more time for you to simply understand whats happening when you check that comprehensions

So with this small article I hope it clears any doubts or confusions you have on comprehensions and you will be fully comfortable with any situation where you need to use comprehensions.If you have any questions feel free to ask regarding it in comments