React advanced topics debouncing, performance
6/13/2024As React applications grow, the challenges you face change. Early on, the focus is on getting components to render and state to update…
Tag: css
16 posts
React advanced topics part two pizza refactoring
6/13/2024Refactor 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
6/13/2024Refactor 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
5/16/2024Context, 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
8/13/2023Hacks for dealing with specificity Rules are the children of principles. CSS specificity is the set of rules browsers use to determine which…
Selectors css
7/23/2023CSS 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
7/21/2023CSS inheritance is one of the most fundamental and most misunderstood concepts in styling the web. At first glance, it feels almost…
Unraveling the mystery of percentage-based heights in CSS
8/20/2022Today, my thoughts were wandering through the curious world of CSS heights, and I found myself fascinated by one of front-end development’s…
CSS Selectors CheatSheet 🤓
1/24/2021In 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 - How to use z-index property 🚀
1/11/2021The 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…
CSS - How to animate 🚀
1/11/2021How 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 🤖
1/10/2021How the Box Model Works Every element is a rectangular box, and there are several properties that determine the size of that box. The core…
Usage of Pseudo-class selector :root
8/3/2020The CSS :root pseudo-class selector is used to select the highest-level parent of a given specification. In the HTML specification, the…
FlexBox Model
8/3/2020The Flexbox Model still contains the major elements of the Box Model (margin, padding, border and content), but offers flexibility to best…
CSS Selectors & Specificity
8/11/2019CSS 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
6/13/2018React Advanced Topics: State and Context Architecture React has revolutionized the way we build UIs, making component-based development the…
