Forem: Tabassum Khanum

Day 0/30 — My Journey from Developer to Product Management (and learning AI along the way)

Tabassum Khanum — Sat, 14 Mar 2026 20:28:26 +0000

For the past few years, I’ve been working as an Application Developer.

While building software and working on different systems, I started noticing something interesting — AI is slowly becoming part of almost every product we use today.

From recommendation systems to chatbots and automation, AI is no longer something futuristic. It’s already shaping the products people interact with daily.

At the same time, I’ve been exploring a transition into Product Management.

And during this process, I realized something important: if I want to work on building meaningful products in the future, I need to understand how AI actually works, not just use the tools.

So I decided to start a small learning experiment.

For the next 30 days, I’ll document what I’m learning about:

Artificial Intelligence
Machine Learning
Large Language Models (LLMs)
How AI-powered features are built into products
How technical knowledge can help in Product Management

I’m not writing this as an expert.

I’m writing this as someone who is learning step by step and trying to simplify these concepts so others can understand them too.

My goal is simple:
to break down AI concepts in a way that makes sense even if you’re new to the topic.

If you're also curious about AI, product management, or transitioning roles in tech, maybe this series will be useful for you as well.

This is Day 0 of a 30-day journey.

Next topic:
What exactly is Artificial Intelligence?

If you’re also learning AI or transitioning into product roles, I’d love to hear about your journey as well.

Thrashing - One Byte Explainer

Tabassum Khanum — Fri, 14 Jun 2024 11:32:29 +0000

This is a submission for DEV Computer Science Challenge v24.06.12: One Byte Explainer.

Explainer

Thrashing happens when too many processes are sent to the CPU, causing high utilization at first. However, as more processes keep coming, the CPU gets overwhelmed, and its efficiency drops sharply, sometimes even down to zero.

Additional Context

References - https://takeuforward.org/operating-system/why-does-thrashing-occur/
https://stackoverflow.com/questions/19031902/what-is-thrashing-why-does-it-occur

June Frontend Challenge: Birthday Month

Tabassum Khanum — Sat, 08 Jun 2024 18:19:39 +0000

This is a submission for Frontend Challenge v24.04.17, CSS Art: June.

Inspiration

June brings memories of my baby brother’s birthday; he turns 25 this year, no longer the little one he used to be.

Demo

Journey

Creating this CSS animation was a rewarding challenge that required a detailed understanding of various CSS properties and techniques. The process involved layering multiple elements to simulate a birthday cake with intricate shadow effects and a gift box animation.

Process:

Setup and Layout:

Used flex for centering the main elements on the screen.
Defined the base structure for the cake and the gift using basic CSS properties.

Cake Design:

Utilized the box-shadow property creatively to add multiple layers to the cake.
Applied pseudo-elements (::before and ::after) to add decorative parts like the white shadow and the number on the cake.

Gift Box Animation:

Implemented a checkbox hack to control the animation state.
Positioned the gift box and designed the ribbon using ::before and ::after.
Used transition and transform properties to animate the gift opening effect.

Sparkles Animation:

Created sparkles using small, circular elements with animated @keyframes to simulate a burst effect.
Combined opacity, transform, and color animations for dynamic visual effects.

WebRTC in Just One Byte

Tabassum Khanum — Mon, 01 Apr 2024 18:20:13 +0000

This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature.

Explainer

WebRTC is a web technology that allows browsers to communicate directly with each other in real-time, enabling features like video chat and file sharing without needing plugins or external software. It provides APIs for developers to easily integrate these capabilities into their web applications.

Additional Context

Check out these links for a deeper explanation - https://webrtc.org/

https://www.techtarget.com/searchunifiedcommunications/definition/WebRTC-Web-Real-Time-Communications#:~:text=WebRTC%20provides%20software%20developers%20with,%2D%20or%20text%2Dbased%20content.

https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API

https://www.geeksforgeeks.org/introduction-to-webrtc/

She Coded, He Coded, We Coded - Celebrating Diversity in Tech!

Tabassum Khanum — Thu, 28 Mar 2024 20:03:01 +0000

How can we actively embrace equality in the tech industry?

To make the tech industry fairer, companies should welcome everyone and celebrate differences. They should have fair rules and include people from all backgrounds, genders, and age groups. Offering good policies, being open to diverse ideas, and making sure everyone is represented properly can help a lot. Also, teaching people about equality, hosting events, and being careful not to let biases affect hiring can make a big difference. By doing these things, the tech world can become a better place for everyone.

What do you perceive as the primary obstacles to achieving gender equity in tech?

Gender equality in tech is hindered by biases in hiring and promotions, male-dominated cultures, and few women in leadership roles. Women, especially mothers, struggle to balance work and family due to societal expectations and stereotypes. Society often undervalues working mothers and wives, viewing them as less committed to family. Even if they work, they're still expected to manage household chores. To address these issues, we must challenge societal norms, support working mothers, promote shared responsibilities at home, and create work environments that accommodate family needs. This will help create a more equitable and supportive tech industry for all genders.

Reflect on a moment at work that affirmed the importance of gender equity to you.

Looking ahead, what are your hopes and aspirations for gender equity in tech?

I hope that the future of tech will be better for women. They're getting stronger and speaking up against unfair treatment. More women are joining the industry, which is great. We need to stop discrimination and harassment. Everyone should have the chance to do well in tech, no matter their gender. My dream is for tech to be a place where everyone feels welcome and respected, and where we can all work together to make cool stuff for the world.

What effective strategies do you employ to advocate for gender equity and diversity in your workplace or community?

In advocating for gender equity and diversity, I support more female representation by mentoring and uplifting women in my workplace and community. I believe empathy goes a long way in understanding others' experiences and fostering inclusivity. Always encourage others to never stay silent against harassment or discrimination, speaking up for fairness and respect.

Have you faced instances of bias or discrimination at work? If so, what was the experience like?

Yes, I've faced bias at work. Women still get paid less than men for the same job. Some people say things that make women feel like they're only good at certain jobs, like designing or managing, not developing. They also make jokes that are mean and make the workplace uncomfortable. When hiring, questions are asked like if you're married or planning to have kids, which can be hard to answer sometimes. These experiences can make you feel bad and affect how you feel about your job.

Frontend CSS Art Challenge- Orange Candy Ice Cream

Tabassum Khanum — Thu, 28 Mar 2024 17:00:03 +0000

This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack.

Inspiration

Orange Candy holds a special place in our hearts as a nostalgic snack, often enjoyed after a hot day at school during summer. Its sweet and tangy flavor, coupled with the refreshing chill of the ice, brings back memories of carefree childhood days. To pay homage to this beloved treat, I've transformed it into a minimalist CSS art piece, capturing the essence of those cherished moments.

Demo

Journey

My CSS Art inspiration image :

Planning the Layout: I started by planning the layout using flexbox to center the candy vertically and horizontally within the browser window.
Creating the Candy Shape: I created the main orange candy shape using CSS, applying border-radius to give it a rounded appearance and setting the background color to orange (#FF9800).
Adding Details: To add depth and realism, I used pseudo-elements :before and :after to create the curved ends of the candy, styling them with appropriate colors and box-shadows.
Designing the Stick: For the stick, I created another div inside the candy div and styled it to resemble a stick, using a lighter shade of brown (#decba0) and inset box-shadows to create a 3D effect.
Final Touches: Lastly, I adjusted positioning and dimensions to ensure everything looked cohesive and used margin and positioning properties to fine-tune the placement of each element within the candy wrapper.

Day 5: Apni Canteen-Food Delivery App Using React Native And Sanity

Tabassum Khanum — Wed, 15 Nov 2023 08:15:02 +0000

👋 Today, I am excited to share my progress on my #100daysofcodechallenge journey.

⏳ On day 5, I started building ApniCanteen a Food Delivery App Using React Native And Sanity. Here are the steps I got done today:

✅ Used React Native Expo to start building the UI
✅ Configured Tailwind CSS to the project by using NativeWind
✅ Implemented navigation using React Native Navigation
✅ Created the SearchBar and Categories component
✅ Using React Native Feather Icons for icons

⚛️ Tech Stack: React Native, Tailwind CSS, MapView, Redux Toolkit, Sanity.io
⚛️ Github: https://github.com/tabassum2507/Apni_Canteen

🔥Doing the #100daysofcodechallenge to brush up on my coding skills and build confidence in coding publicly! Join me on this journey! Share your feedback, suggestions, and experiences in the comments. Let's code, learn, and grow together! 💻🌱

100DaysOfCode #CodingCommunity 🚀

reactnative #react #reduxtoolkit #redux #tailwindcss

Day 4: React Native Onboarding UI using Lottie Animations

Tabassum Khanum — Mon, 13 Nov 2023 11:00:34 +0000

👋 Today, I am excited to share my progress on my

100daysofcodechallenge journey.

⏳ On day 4, I solved 2 DSA questions and made this React Native Onboarding UI by completing the following steps:

✅ Used React Native Expo to build the Onboarding UI
✅ For slider used - react-native-onboarding-swiper library
✅ Implemented Lottie Animations to enhance the look of the app
✅ Implemented Async Storage to maintain the state of onboarding

⚛️ Tech Stack: React Native, Lottie Animations
⚛️ Github: https://github.com/tabassum2507/Onbaording_React_Native_UI

Day 3: Wrote an Article on Computer Networking

Tabassum Khanum — Sat, 11 Nov 2023 22:06:54 +0000

👋 Today, I am excited to share my progress on my #100daysofcodechallenge journey.

⏳ On day 3, I solved 2 array problems on Leetcode to begin practicing data structures and algorithms in JavaScript. I learned more about computer networks by studying the OSI model, TCP/IP models, and protocols.

⚛️ I shared what I learned today on my blog. Feel free to take a look! - https://dev.to/codewithtee/understanding-computer-networking-part-1-the-osi-model-25m0

100DaysOfCode

CodingCommunity 🚀

Understanding Computer Networking: Part 1 - The OSI Model✨

Tabassum Khanum — Sat, 11 Nov 2023 19:01:29 +0000

Hey Coders!
In this article, we're diving into a super important topic in Computer Science and programming - the OSI model. When I say it's important, I really mean it! Understanding this model is like unlocking the secrets of how data moves between computers and how networking actually works. Plus, it's a hot topic in interviews.

I remember struggling with this concept back in High School, and it even came up in my college viva and interviews. I asked questions, tried to grasp it, and finally got why it's so important.

So, let's get ready to unravel the mysteries of the OSI model together! 🚀

Understanding the OSI Model

OSI stands for Open Systems Interconnection. It's like a blueprint for how computers talk to each other. Imagine it as a tower with seven floors. Each floor, or layer, has its own job, working together to make sure information travels between computers smoothly and reliably. This way, the whole communication process becomes organized and efficient.

The OSI model has defined the common terminology used in networking discussions and documentation. The model is important as :

It makes fixing problems easier and lets us find potential issues in all parts of the communication process.
The OSI model encourages companies that make computer parts to create products that can easily communicate to each other on a network.
It's like having a guidebook that breaks down a big job into smaller, manageable tasks.

The Seven Layers

All 7 layer plays a distinct role, contributing to the overall efficiency and reliability of data transfer.

The Host Layers or Upper Layer

The upper layers, also known as host layers, in the OSI model, are responsible for managing tasks related to software, applications, and user interactions. These layers focus on how data is presented to users and how communication is established between different software applications. There are three upper layers in the OSI model:

1. Application Layer (Layer 7):

This is the only layer that directly interacts with data from the user. Software applications like web browsers and email clients rely on the application layer to initiate communication.

Provides services directly to end-users or applications
Deals with application-specific protocols such as HTTP, SMTP, FTP, Telnet, etc.
Provides services such as file transfer
Ensures an application can effectively communicate with other applications on different computer systems and networks
Specifies the shared communications protocols and interface methods used by hosts in a communications network
Defines the format of the data on the network
Provides reliable and efficient communication between two or more devices
Is mainly responsible for the unique identification of each device that resides on a local network.

2. Presentation Layer (Layer 6):

The Presentation layer is involved in translating data between the application layer and the lower layers. It handles tasks such as data encryption, compression, and formatting. Its goal is to ensure that data sent from one system can be understood by the application layer of another system.

Translates one data format into another data format
Establishes context between application-layer entities
Formats data so that data representation in the application layer and across the system is acceptable and compatible
Ensures that communications that pass through it are in the appropriate form for the recipient application
Serializes complex data structures into flat byte-strings

The presentation layer's functions include:

Translation
Encryption & decryption
Compression & decompression
Structure representation

Two common examples of the presentation layer are:

Objects in object-oriented programming
The exact way that streaming video is transmitted

3. Session Layer (Layer 5):

The Session layer manages the establishment, maintenance, and termination of communication sessions between different applications. It coordinates the communication exchange between devices, making sure that data is exchanged smoothly. This layer is particularly important in scenarios involving multiple communication channels.

Establishing, maintaining, synchronizing, and terminating sessions between end-user applications
Controlling and maintaining connections between systems to share data
Allowing the systems to communicate in either half-duplex or full-duplex mode of communication
Helping a protocol to be more consistent and reliable

The Lower Layers or Media Layers

The lower layers, also known as the media layers, in the OSI model, handle the more fundamental aspects of network communication, primarily focusing on the physical transmission of data and the reliable transfer of information between adjacent nodes. These layers ensure that data can be sent and received accurately across the physical network infrastructure. There are four lower layers in the OSI model:

1. Transport Layer (Layer 4):

The Transport layer ensures end-to-end communication reliability. It manages issues like segmentation and reassembly of data, flow control, and error recovery. Protocols like TCP (Transmission Control Protocol) operate at this layer, providing reliable and ordered delivery of data.

Managing network traffic between hosts and end systems
Ensuring complete data transfers
Controlling the volume of data, where it is sent, and at what rate
Providing reliable data transfer services to the upper layers
Controlling the reliability of a given link through flow control, segmentation and desegmentation, and error control
Ensuring that the data packets arrive accurately and reliably between sender and receiver
Delivering an entire message from an application program on the source device to a similar application program on the destination device

2. Network Layer (Layer 3):

The Network layer is responsible for routing and forwarding data across interconnected networks. It deals with logical addressing, such as IP addresses, and determines the best path for data to travel from the source to the destination. Routers operate at this layer, making decisions about the most efficient route for data transmission.

The network layer handles service requests from the transport layer and forwards them to the data link layer.
The network layer translates logical addresses into physical addresses.
The network layer breaks down data segments into data packets and reassembles them on the receiver side.
The network layer delivers packets from source to destination across multiple links (networks).
The network layer finds destinations by using logical addresses, such as IP (internet protocol).

The network layer is composed of two parts:

Logical Link Control (LLC)
Identifies network protocols, performs error checking, and synchronizes frames.
Media Access Control (MAC)
Uses MAC addresses to connect devices and define permissions to transmit and receive data.

The network layer uses several protocols, including:

Internet Protocol (IP)
Routing
Testing
Encryption

3. Data Link Layer (Layer 2):

The Data Link layer creates a reliable link between adjacent nodes in a network. It handles tasks such as framing, error detection, and flow control. Devices like switches and network interface cards operate at this layer, ensuring that data is efficiently and accurately transferred between connected devices.

Encoding, decoding, and organizing data bits
Hiding the details of underlying hardware
Detecting errors in transmitted data
Correcting errors using error detection and correction techniques
Splitting data into chunks called frames
Handling each frame separately

4. Physical Layer (Layer 1):

The Physical layer deals with the physical connection between devices. It includes aspects such as cables, connectors, and the transmission of raw bits over a physical medium like copper wires or optical fibers. This layer is concerned with the actual hardware that enables data transmission.

The setup of physical connection to the network
Transmission and reception of signals
Transporting data using electrical, mechanical, or procedural interfaces

The physical layer consists of various network components such as: Power plugs, Connectors, Receivers, Cable types.

The physical layer is also responsible for:

Maintaining the data quality by applying necessary protocols
Maintaining the bit rate through the data transfer using wired and wireless medium
Converting frames received from the data link layer into bits

Wrapping Up

I hope you've learned at least a couple of things from this article, thank you for reading till the end! And let me know if I should change or add anything to this article.
For daily web development threads, updates, and content follow me on Twitter.
Happy Coding🌼

Day 1-2: React Image Search Application

Tabassum Khanum — Fri, 10 Nov 2023 10:25:09 +0000

👋 Today, I am excited to share my progress on my #100daysofcodechallenge journey.

⏳ On day 1-2, I have made this React Image Search application by completing the following steps:

✅ Used Unsplash API for getting Images in the application
✅ Made API Calls in different scenarios
✅ Used ESLint to fix application issues
✅ Implemented Pagination in React

⚛️ Tech Stack: React.js
⚛️ Github: https://github.com/tabassum2507/ImageSearch_ReactVite_Project
⚛️ URL: https://image-search-react-vite-project.vercel.app/

JavaScript DOM Manipulation Cheatsheet✨

Tabassum Khanum — Wed, 01 Mar 2023 17:54:41 +0000

Hey Coders!☃

In this article, we are going to learn about one of the most important topic- DOM Manipulation that newbie JavaScript learners may find overwhelming at the start. It's an important topic in web development because the DOM serves as the initial use of JavaScript in the browser. I’ve tried to put together a super helpful cheat sheet to give you a complete overview of the DOM manipulation methods. So if you are ready, let's jump in!

Hello DOM!

One of the most unique and useful abilities of Javascript is to manipulate the DOM. So what exactly is DOM and why is everyone in the industry throwing its term everywhere?

Definition in plain English -

"The DOM(or Document Object Model) is a tree-like representation of the web page that gets loaded into the browser.
It represents the web page using a‌‌ series of objects. The main object is the document object, which in turn houses other objects which also house their own objects, and so on."

The DOM is a tree-like representation of the contents of a webpage - a tree of “nodes” with different relationships depending on how they’re arranged in the HTML document.

It has properties and methods which you can use to get information about the document using a rule known as dot notation.

DOM Tree Analogy

One of the main reasons for developing the DOM is to maintain a standard programming interface for HTML. Setting and maintaining this standard enables programmers to create or navigate these types of documents and modify their elements predictably, using any type of language or development environment.

The individual elements in an HTML document are called "nodes" in DOM terms. The relationship between elements in a document is "tree-like", meaning that like a tree has a main trunk, from which stem certain main branches, which in turn branch off into finer branches and so on, so does an HTML document contain certain "key" elements, like the <head> and <body>, which in turn contain other elements, like <div>'s, <p>'s and others.

<div id="container">
  <div class="display"></div>
  <div class="controls"></div>
</div>

In the above example, the <div class="display"></div> is a “child” of <div id="container"></div> and a sibling to <div class="controls"></div>. Think of it like a family tree. <div id="container"></div> is a parent, with its children on the next level, each on their own “branch”.

Uses of DOM

first of all, locating elements in the document by their ID, class, tag name (div, p, etc.), and other characteristics
adding, removing, or modifying the HTML elements themselves
modifying any attribute of an HTML element, such as their class, style attributes, and others

Selecting Element in the DOM

JavaScript provides six methods to select an element from the document.

getElementById

– search element by element_id

The Document method getElementById() returns an Element an object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.

function changeColor(newColor) {
  const elem = document.getElementById("para");
  elem.style.color = newColor;
}

getElementsByTagName

– search element by tag name (e.g., span, div)

The Element.getElementsByTagName() method turns a live HTMLCollection of elements with the given tag name.

When called on an HTML element in an HTML document, getElementsByTagName lower-case the argument before searching for it. This is undesirable when trying to match camel-cased SVG elements (such as <linearGradient>) in an HTML document. Instead, use Element.getElementsByTagNameNS(), which preserves the capitalization of the tag name.


const table = document.getElementById("forecast-table");
const cells = table.getElementsByTagName("td");

getElementsByClassName

– search element by class name

The Element method getElementsByClassName() returns a live HTMLCollection which contains every descendant element which has the specified class name or names.


element.getElementsByClassName("test");

getElementsByName

– search element by the name attribute

The getElementsByName() method of the Document object returns a NodeList Collection of elements with a given name attribute in the document.

const up_names = document.getElementsByName("up");

querySelector

– returns the first element that matches the specified selector

The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.


const el = document.querySelector(".myclass");

querySelectorAll

– returns elements that match the specified selector

The Document method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors.


const container = document.querySelector("#test");
const matches = container.querySelectorAll("div.highlighted > p");

Styling an Element

You can directly change each CSS property of an element by using the style property, which references the element's inline styles.

For example, you can change an element color using:


element.style.color = '#fff'

You can alter the border:

element.style.border = '1px solid black'

Creating Elements

The Document object provides a method createElement() to create an element and appendChild() method to add it to the HTML DOM.

The document.createElement() method creates the HTML element specified by tagName.

createElement(tagName)
createElement(tagName, options)

const newDiv = document.createElement("div");

The appendChild() method of the Node interface adds a node to the end of the list of children of a specified parent node. If the given child is a reference to an existing node in the document, appendChild() moves it from its current position to the new position.

// Create a new paragraph element, and append it to the end of the document body
const p = document.createElement("p");
document.body.appendChild(p);

Modify Text

The easiest way to modify the content of an HTML element is by using the innerHTML property.

const element = document.getElementById("id01");

element.innerHTML = "New Heading";

Modifying Element Classes and IDs

The id property sets or returns the value of an element's id attribute.

document.getElementById("demo").id = "newid";

The className is used as a selector in HTML which helps to give some value to the element attributes. The document.getElementById() method is used to return the element in the document with the “id” attribute and the “className” attribute can be used to change/append the class of the element.

document.getElementById('myElement').className = "myclass";

Remove an Element

ES6 provides an easier, simpler way to achieve the same tax: remove(). Call the remove() method on the element you want to remove.

var elem = document.querySelector('#some-element');
elem.remove();

Traversing the DOM

Read this article to get to know about DOM traversing - https://medium.com/codex/how-to-traverse-the-dom-in-javascript-7fece4a7751c

Event Listeners

The JavaScript addEventListener() method allows you to set up functions to be called when a specified event happens, such as when a user clicks a button.


target.addEventListener(event, function, useCapture)

target: the HTML element you wish to add your event handler to. This element exists as part of the Document Object Model (DOM).
event: a string that specifies the name of the event. We already mentioned load and click events.
function: specifies the function to run when the event is detected. This is the magic that can allow your web pages to change dynamically.
useCapture: an optional Boolean value (true or false) that specifies whether the event should be executed in the capturing or bubbling phase.

button.addEventListener('click', (e)=>{
  console.log(e.target.id)
})

Removing Event Handlers

If for some reason you no longer want an event handler to activate, here's how to remove it:


target.removeEventListener(event, function, useCapture);

Wrapping Up

I hope you've learned at least a couple of things from this article, thank you for reading till the end! And let me know if I should change or add anything to this article.
For daily web development threads, updates and content follow me on Twitter.
Happy Coding🌼