🎯 Archive of Thoughts, Tips & Teachings Overview 👩🏻‍💻

Containerizing React Apps: A Docker Deep Dive

Why containerize a React app Containerization solves a common problem in frontend teams: "works on my machine". A container bundles the app…

React Impact Scope: Tracking Gatsby Change Impact at Scale

React Impact Scope: Tracking Gatsby Change Impact The tool I am building is designed to make complex systems predictable. When the surface…

How Docker Works: A Deep Dive Into the Local Workflow

The Docker workflow, end‑to‑end Docker feels simple when you run docker build and docker run, but the workflow underneath is a disciplined…

Docker Compose: Tradeoffs, Failure Modes, and Production Caveats

Compose in the architecture: what it is and what it is not Docker Compose is a local and single‑host orchestration tool, not a production…

Docker Architecture: A Deep Dive

What Is a Container? You can think of a software container as a container in the real world. The idea is to put your application and its…

Docker Essentials: Managing Dependencies With Ease

The problem Docker quietly solves The most common developer pain I see isn’t “how do I write the code?” It’s “how do I run the code the same…

Testing My Blog with Docker and Kind

Why I did this My blog already builds on push, but I wanted a repeatable, production‑like workflow I can test locally. Docker and Kubernetes…

Containerizing Gatsby: A CI-Friendly DevOps Path

Why containerize a Gatsby blog? A Gatsby site is fast and portable, but the workflow around it can drift between machines. Containerizing…

React without the Magic Mysticism

React without the Magic Mysticism React has a weird reputation. Some people treat it like magic. Others treat it like a nightmare. Most…

Understanding React’s Data Flow

Understanding React’s Data Flow: A Mental Model That Scales How props, hooks, and context actually work together ReasonReact Hook Recipes…

React Props & Data Flow the Way It Works

React props look simple — until your app grows. At first, props feel like HTML attributes. Then suddenly you're passing data through five…

React’s Data Flow

React Data Flow How props, hooks, and context actually work together 🍕 Think of Pizza React Data Flow Explained with Pizza 🍕 Think of a…

Props Mental Model: React vs Vue Data flow

Props Mental Model: React vs Vue As a React developer, I wanted to dive into Vue to learn how it approached building JavaScript UI. How do…

Personal Development

Coding as Brain Development Coding isn't just a job skill, it's cognitive rocket fuel. Every line of JavaScript, every React component…

Docker vs Podman: Which One Should You Use in Production?

The real question behind “Docker vs Podman” Most teams don’t actually care about the logo on the CLI. They care about operational posture…

Vue Methods used for Data Binding 🤔

Vue Methods for Data Binding In this article, we'll explore how to use Vue methods to efficiently handle data binding in your applications…

Docker vs Docker Compose: What’s the Difference and Why You Need Both

The short version (for people who ship software) When teams ask “Docker vs Docker Compose, what’s the difference?”, they are really asking…

Containers and Volumes: A Deep Dive

Why this matters at a senior level Most Docker issues in production trace back to misunderstandings about container mutability and state…

Advanced React Patterns and Performance

Introduction As your React applications grow, simple component patterns and local state management can quickly become insufficient…

React hooks practice

React is built around a unidirectional data flow, which makes component interactions predictable and easier to debug. Understanding how data…

Neural Networks and algorythms

Neural Networks: How Machines Learned to Learn Neural networks are often presented as a sudden breakthrough—a mysterious leap that…

History of Artificial Inteligence

The Poetical Science: When Mathematics Meets Imagination Observing recent developments in machine learning and neural networks prompted me…

History of Algorythms

Deep dive in Algorithms: How Human Thought Became Machine Logic Algorithms did not begin with computers. They began with a far older…

History of Algorythms

React component architecture

React's component architecture revolves around data flow and state management. Understanding how data travels from parent to child…

Setting Default Props Values in React

Introduction In React, props are the primary way components receive data from their parents. They allow components to remain flexible and…

How to use user input

User input is at the heart of every interactive application. From simple text fields to complex multi-step forms, the way an application…

React advanced topics debouncing, performance

As React applications grow, the challenges you face change. Early on, the focus is on getting components to render and state to update…

React advanced topics part two pizza refactoring

Refactor Part 1: Split Read and Write Concerns A small but important improvement is to split context into separate concerns. One simple…

React advanced topics part two Co-locate State

Refactor Part 2: Co-locate State and Use Multiple Contexts In many real apps, the biggest win comes from not putting everything in a single…

React advanced state management

Context, state, and re-renders are where a “simple” React app quietly turns into a pizza kitchen with too many cooks shouting orders at each…

Specificity in css

Hacks for dealing with specificity Rules are the children of principles. CSS specificity is the set of rules browsers use to determine which…

Selectors css

CSS selectors target and select the HTML elements you want to style. They are often treated as a solved problem, something we learn once and…

Inheritance in css

CSS inheritance is one of the most fundamental and most misunderstood concepts in styling the web. At first glance, it feels almost…

Deep Dive in Advanced React Patterns

React has revolutionized the way we build user interfaces, making component-based architecture the standard for modern web development. But…

CSS positioning Properties 🤔

What You See Is What You Get – is a competing model for authoring documents. These applications constantly update a final form presentation…

Unraveling the mystery of percentage-based heights in CSS

Today, my thoughts were wandering through the curious world of CSS heights, and I found myself fascinated by one of front-end development’s…

Different React Props Patterns🤖

Different React Props patterns and how to manage Data Understanding React’s approach to data manipulation takes time. React has a different…

Rendering Lists of Data in React🤖

Rendering Lists of Data 🤔 How to show a simple list item, a list of objects, Nesting Lists in React, and lastly, we will have a look at how…

Vue Methods used for Data Binding 🤔

Methods in Vue used for data Binding What is Data binding? There are different Data Bindings in Vue. Data binding is a technique used to…

JavaScript Merge sort function 🤖

What is an algorithm? 🤔 An algorithm is a procedure for solving a problem in computer science. Some problems that algorithms are well…

JavaScript closures 🚀

Closures Closures are functions that close over their lexical environment or their scope. This allows us to access an outer function scope…

Flutter Widgets🚀

Flutter and Dart Widget Sheet Init Healthcheck Hello World Stateless Widget Required and default props Stateful Widget Combining props and…

Gatsby - How to setup a blog 🚀

What Is Gatsby? Gatsby or GatsbyJS is a framework based on React library and GraphQL that makes it easy to create both website and web…

Flutter Basics🚀

Core Basics Flutter includes a modern react-style framework, a 2D rendering engine, ready-made widgets, and development tools. These…

React-Native views&text🚀

views&text There is no DOM on mobile. Where we previously used <div />, we need to use <View /> and where we used <span />, the component we…

How to install ZSH on Fedora🚀

Terminal Setup - Terminator + ZSH + Powerlevel10k terminal is more than just a black screen to type in. It usually runs a shell, so called…

How to FLEX in React 🤖

: Using Flexbox in React components to create flexible layouts. How to Flex in React? 🤔 Flexbox helps to organize the blocks of code as…

Using Express validator 🤔

Validating input in Express using express-validator understand how to use express-validator module to make the input validation from the…

CSS Selectors CheatSheet 🤓

In CSS, selectors are patterns used to select DOM elements Here is an example of using selectors. In the following code, a and h1 are…

CSS - Selectors 🤓

Basic Selectors index.html style.css :enabled The :enabledpseudo-class in CSS selects focusable elements that are not disabled, and…

Express - Dynamic Views 🤓

ExpressJS - the differences Static vs Dynamic page The learning Goals of this article are as follows: create views in Express understanding…

CSS - How to use z-index property 🚀

The hassle around the Z-index Z-Index is one of the most confusing and unintuitive properties in CSS, but it’s actually pretty simple once…

What is props drilling in React 🤖

Props drilling 🤔 Everything runs on a different thread except our code. We need to share data with different components when working with…

CSS - How to animate 🚀

How to bring life in a webpage ? 🤔 “Animation is about creating the illusion of life.” Brad Bird By animating information onto the page, we…

CSS - Working with the BoxModel 🤖

How the Box Model Works Every element is a rectangular box, and there are several properties that determine the size of that box. The core…

Manage state with useReducer Hook 🤔

Managing State with useReducer useReducer Hook An alternative to useState. Accepts a reducer of type (state, action) => newState, and…

Conditional Rendering

Conditional Rendering 🤔 Conditional rendering in React isn't difficult. In JSX - the syntax extension used for React - you can use plain…

How to Life Cycling 🚲 in React? 🤔

Life Cycle Methods in React When developing in React, every Component follows a cycle from when it’s created and mounted on the DOM to when…

Array methods in React

Array Methods in React 🤔 Let’s consider what is an array method. Simply put, an array method is a method that can be called on an array to…

JavaScript Variables, Scope and Hoisting

Variables, Scope and Hoisting in JavaScript Introduction We must understand how variable scope and variable hoisting work in JavaScript, if…

React Hooks 🤔🎣

Hooks 🎣 API 👉 The additional API that lets you use state and other features in React without writing a class is called Hooks. What Are…

Modules in JavaScript 🤔

What are Modules in JavaScript? 🤔 The Module Pattern is one of the important patterns in JavaScript. It is a commonly used Design Pattern…

Node/Express App

Authentication in Express.js - simple app Introduction In this article, we are going to make a simple app to demonstrate how you can handle…

Conditionals & Loops

JavaScriptS | Conditionals and Loops 🤔 👉 Learning Goals You will be able to: 👉 Understand what statements are 👉 Understand why…

DataBase - MongoDB

What is MongoDB ? 🤔🔨 MongoDB is a popular NoSQL database management system that stores data as BSON (binary JSON) documents. It's…

Increment & Decrement in JavaScript

Overview of Increment and Decrement Operators in JavaScript The Increment and Decrement Operators are used to increase or decrease the value…

Intro to Python

Python Keywords Keywords are the reserved words in Python. We cannot use a keyword as a variable name, function name or any other identifier…

React Context APIs

Context Apis React's Context API has become the state management tool of choice for many, often replacing Redux altogether. React Context…

Usage of Pseudo-class selector :root

The CSS :root pseudo-class selector is used to select the highest-level parent of a given specification. In the HTML specification, the…

FlexBox Model

The Flexbox Model still contains the major elements of the Box Model (margin, padding, border and content), but offers flexibility to best…

Express 🤔 🛠

Overview and practice Express.js is the best choice when it comes to building web applications with Node.js. However, when saying web…

GitHub

What is GitHub ? 🤔 GitHub is a code-hosting platform. It lets you and others work together on projects from anywhere. 👉 Before anything…

What is recursion

What is recursion? Recursion is a process of calling itself. A function that calls itself is called a recursive function. The syntax for…

Git-Version Control System

Git is not GitHub. Git is the system, and GitHub is a repository hosting service (the most popular of many). 👉 After this lesson you will…

Functional & Class in React

Functional & class components in React 🤔 🤓 React is a framework that allows us to encapsulate code so to make it more reusable. These…

Arrow Functions in JavaScript

Arrow functions (also called “fat arrow functions”) are undoubtedly one of the more popular features of ES6. They introduced a new way of…

How to install and use Node - npm

Goals 👉Learn what Node.js and npm are; 👉 Set up Node.js and npm on Linux and Mac What is npm? npm doesn't stand for Node Package Manager…

CSS Selectors & Specificity

CSS Selector Overview There are multiple ways to select the elements you’re trying to style in CSS. Let’s start by reviewing all the options…

React advanced topics state and context architectur

React Advanced Topics: State and Context Architecture React has revolutionized the way we build UIs, making component-based development the…

Taming Prop Drilling in React: Advanced State and Context Patterns

Taming Prop Drilling in React: Advanced State and Context Patterns If you've been building React apps for a while, you know that one of the…

Learn Bash Scripting

Introduction to Bash Bash (or shell) scripting is a great way to automate repetitive tasks and can save you a ton of time as a developer…