DEV Community: Preethi⚡

React 19.2 introduces a new component

Preethi⚡ — Tue, 07 Oct 2025 10:47:16 +0000

If you’ve ever built a tab system, modal, or multi-step form, you’ve probably faced this dilemma:

Conditional rendering ({show && <Comp />}) destroys the component when hidden → you lose state.
Keeping everything mounted (<Comp style={{ display: 'none' }}>) preserves state, but effects and updates keep running in the background → wasted work.

The new <Activity /> component sits in between: it keeps state alive, but pauses effects and defers updates when hidden.

How `<Activity />` Works

Think of <Activity /> as React’s pause button for components.

When mode="visible" (active):
- Component runs normally
- Effects execute (e.g. API calls, event listeners)
- State updates trigger re-renders
- DOM is visible
When mode="hidden" (paused):
- Effects are cleaned up (no API calls, intervals, subscriptions)
- State updates are remembered, but don’t trigger re-render immediately
- DOM is hidden, but not destroyed
- When made visible again → React flushes updates + resumes effects

Example 1: Tabs with Preserved State

Without <Activity /> (conditional rendering)

function App() {
  const [tab, setTab] = useState("home");

  return (
    <>
      <button onClick={() => setTab("home")}>Home</button>
      <button onClick={() => setTab("settings")}>Settings</button>

      {tab === "home" && <Home />}
      {tab === "settings" && <Settings />}
    </>
  );
}

👉 Problem: when you switch tabs, the inactive component is destroyed. If you typed something in “Settings”, it resets every time.

With <Activity />

function App() {
  const [tab, setTab] = useState("home");

  return (
    <>
      <button onClick={() => setTab("home")}>Home</button>
      <button onClick={() => setTab("settings")}>Settings</button>

      <Activity mode={tab === "home" ? "visible" : "hidden"}>
        <Home />
      </Activity>

      <Activity mode={tab === "settings" ? "visible" : "hidden"}>
        <Settings />
      </Activity>
    </>
  );
}

👉 Now:

Switching tabs is instant (state preserved).
Hidden tab doesn’t keep running effects.
State updates in hidden tab are stored → when visible, UI is up to date.

Example 2: Notifications Component

function Notifications() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("🔔 Fetching notifications...");
    const id = setInterval(() => {
      setCount(c => c + 1);
    }, 2000);

    return () => clearInterval(id);
  }, []);

  return <p>You have {count} notifications.</p>;
}

function App() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(o => !o)}>Toggle Notifications</button>

      <Activity mode={open ? "visible" : "hidden"}>
        <Notifications />
      </Activity>
    </>
  );
}

Visible → interval runs, fetching every 2s
Hidden → interval cleaned up (no fetch while hidden)
Re-open → notifications count resumes with latest state

Advantages

Preserves state (no reset on tab switch)
Preloads modules → user sees screen instantly when switching
Pauses background work → no wasted API calls or event listeners
Better UX → smooth transitions without heavy remounting

Disadvantages

Memory cost → components stay mounted in memory
Extra complexity if overused → e.g. keeping dozens of activities hidden may bloat memory

In Simple terms, you can think of it like: as minimizing an app:
Not visible, but memory and state are kept.
CPU work is paused until you “maximize” it again.

🚀 This is just one of the new features in React 19.2. In the next article of this series, we’ll explore useEffectEvent — a new hook that helps you avoid stale closures in event handlers.

👋 Hey, I’m Preethi!

I’m that frontend engineer who gets way too excited about pixel-perfect UIs, funky CSS tricks, and the newest React toys (yup, including React 19.2 ✨). When I’m not squashing bugs, I’m probably writing about them—or building design systems that behave better than my coffee machine ☕.

If you enjoyed this read, stick around—I’ve got more React 19.2 goodness coming your way. Let’s learn, laugh, and ship cool stuff together 🚀.

25 Extremely Modern Layouts Using CSS Grid✨

Preethi⚡ — Wed, 20 Jul 2022 11:45:00 +0000

Hey There👋🏽, it's really after a long time writing an article. I spent more than a couple of months on intense research of CSS Grid. More advanced techniques are added in CSS Specification which makes our life easier.

I developed 25 extremely modern layouts made on CSS Grid and Flexbox.

Do yo Know??

✅ Every Layout following Mobile First Approach.

✅ Responsive to all breakpoints.

❌ No Absolute or Relative positioning used.

✅ Only use CSS Grid techniques.

Not Showcasing Only, For Practicing also

Hey, This 25 layout make a best practice for modern layouts from beginner to advanced level.

For Every layout, I list GitHub link🔗 and Preview Link🔗.

Design Credits to Marko Jotic and get it on Gumroad

3 steps to practice this modern layout

✅Step 01 - Fork the repo.
✅Step 02 - Understand the HTML Grouping and CSS Layout technique used.
✅Step 03 - ReCreate the layout on your own .

Layout 01

| GitHub Link | Preview Link |

Layout 02

| GitHub Link | Preview Link |

Layout 03

| GitHub Link | Preview Link |

Layout 04

| GitHub Link | Preview Link |

Layout 05

| GitHub Link | Preview Link |

Layout 06

| GitHub Link | Preview Link |

Layout 07

| GitHub Link | Preview Link |

Layout 08

| GitHub Link | Preview Link |

Layout 09

| GitHub Link | Preview Link |

Layout 10

| GitHub Link | Preview Link |

Layout 11

| GitHub Link | Preview Link |

Layout 12

| GitHub Link | Preview Link |

Layout 13

| GitHub Link | Preview Link |

Layout 14

| GitHub Link | Preview Link |

Layout 15

| GitHub Link | Preview Link |

Layout 16

| GitHub Link | Preview Link |

Layout 17

| GitHub Link | Preview Link |

Layout 18

| GitHub Link | Preview Link |

Layout 19

| GitHub Link | Preview Link |

Layout 20

| GitHub Link | Preview Link |

Layout 21

| GitHub Link | Preview Link |

Layout 22

| GitHub Link | Preview Link |

Layout 23

| GitHub Link | Preview Link |

Layout 24

| GitHub Link | Preview Link |

Layout 25

| GitHub Link | Preview Link |

Practice make a perfect layout!!

Find Me on GitHub Twitter

My brand new GitHub Profile - Did you💖it?

Preethi⚡ — Wed, 09 Mar 2022 14:03:33 +0000

Hey dev👋🏻👋🏻,

Hope you are doing well. Days of old I planned to customize my GitHub profile.

Before that, started to explore on

Markdown
GitHub actions
Third-party services

While the learning journey, Sometimes feel scary😨. But, It's not much complicated as I think. The course
How to customise your GitHub Profile really helped in this journey.

You seems curious to see my brand new GitHub portfolio. So, Don't want to waste your time.

Click to see my brand new GitHub portfolio✨

Hey Dev, Don't forgot to share your 💖 and thoughts as regard of my GitHub portfolio✨ which really aid me lot

By
Preethi

Cosmic burden behind "The Title-Winning of my 1st hackathon👩🏻‍💻"

Preethi⚡ — Tue, 01 Mar 2022 15:28:01 +0000

Hey there, Feel cheerful to see you in my blog and it's my pleasure to disclosing my experience for International women's day and for #shecoded.

I'm sure after reading the blog, You will get to know how much burden the word "burden" is.

A twist that breaks my patience

I stand by 4 years, For get an opportunity to participate in the Smart India hackathon. Smart India hackathon is a world's biggest innovation model and can participate in academic periods only. My final proposal also get rejected in my final year of engineering. Hope you may sense how I downhearted.

In the COVID 19 pandemic, SIH2020 was conducted in online mode. Some team members started to way out from their selected team due to some personal Cause and enough members not there. Oh my goodness, At the moment I got a chance to join the team in spite of left person. Hey, You didn't expect that twist right. Even I am also having the same feel😍.

Did you know🧐🧐??

I have not joined the team as solitarily. I joined as duplet👩🏻‍💻👩🏻‍💻. She is also exactly like me. she is not my friend, not my junior, not my senior. Haha, you seems like,

Uh, She is my twin sister and I am twins. I am developer and she is a designer. So, changing the term "I" to "we"😉.

Around 16 - 18 days to the end

While we joining the team, There is around 16 - 20 days only left for grand final. There is nothing in our hand except problem statement and proposal. We take 1 - 2 days for understanding the problem statement. Unfortunately, Necessary to upgrade our skills to more advanced because of project complexity. Our mentor have not in good health condition and situation be like no one there.

Things getting more and more complex. If we delayed for an hour which really makes the best way to risk. You may feel how it make nervousness. Finally, we made a decision.

A merciless decision

Yes, We made a merciless decision because need to upgrade our skills within 7 days and Now you know why I use the word "merciless" because after 7 days, we take 1hour rest per day till grand final.

In simple words, The sleepless coding.

Yaa I get your thought that how it's possible?? If anyone of us getting health serious cause of sleepless. Another one take their responsibility also. Many nights, I write coding with shed tears behind there is a single reason "If I also take rest which means I take my team to knock the door of failure".

A bottle of lemon juice🍋

The new burden started we can't take our food even we are in hungry because stomach starts to reject the foods due to sleepless. If we take a small fruit, which make heavy vomiting sensation and can't breathe normally. If we start taking foods, which stop our coding. Can you imagine how painful it is. The days turns be like Burden made burden.

Every day, we take a bottle of lemon juice only. There are so much of physical burden started.

Climbed the grand final

At the end of the burdens, We done with our projects. We step into the grand final with full of hope. It was a three days of Grand final.

Did you guess what the panel members told?? They said "we can see from your project how much of hard work you did". The three days spent with reviews and changes.

Didn't expect final pain

In 3rd day of morning session, Panel member said that " There is no more alteration or no need of feature" which really going good. Before final session of final day, need to submit our project. During process, accidentally some part of the project get deleted. Can you imagine how the heart beat getting start to beat.

There is few minutes for code submission. At the same moment, The final evaluation will start soon. I need to demo the whole project, If it start to break the flow of project. Can't even imagine the result. At that moment, We really understand the word of "depression".

I said my team, Again retrieve the code from backup and try to submit it without loosing your hope. I started to fix the breaks how much I can. There is only 10min for final evaluation. After 5min, I left out the room for disclosing my emotion loudly. But I stopped myself before disclosing my emotion. I said myself " don't getting nervous, Relax Preethi relax relax relax relax Preethi. You can, you can, you can, you can."

Before entering the meeting, That 16 - 20 days efforts and pain getting rewind. If I getting emotion which made a stone and forced to break my success glass. Consequently, I presented my project with full of hope.

Tear with smile

All of our efforts are done. The day we are awaited for, They announced our team as winner and we also titled as "Smart India Hackathon 2020 Title Winner". While I hearing the word "winner", I forgot my head pain, hungry and my physical burden and tears with smile".

We did it. Yes, We did it😌

Treasure made with our pain.

After reading this blog. If You feel how much burden the word "burden" is. Give your heart💖 and write your comment💌 from your heart. Feel really proud to disclosing my experience for #shecoded.

By
Preethi

Write a single line😮 for tinting your brand color

Preethi⚡ — Tue, 25 Jan 2022 14:45:56 +0000

Hey There, Feel afresh to see you again and we may think sometimes as can I change default colors of form elements🤔?? or can I at least change the color while focusing state or while selection state🤔??. The answer is YES.

Haha, which is possible by two ways, By customization of default style by lines & lines of code or By writing a single line of code(exactly a property or a pseudo class or a pseudo element). Hey you seems getting very curated😍. So, wish to save your time and Let's get this ride on the road🎉.

Possible ways to reach on

Changing color on form elements by accent-color🌈
Changing color while focusing by :focus-visible🧐
Changing color while selection by ::selection🔍

Changing color on form elements by `accent-color`🌈

accent-color saving you from customization efforts by providing a way to bring your brand into elements.

Still, Can't get my point. It's completely fine and you will grasp the point by a unambiguous example.

<input type="checkbox" checked />
<input type="checkbox" class="custom" checked />

input{
  accent-color: auto;
}
input.custom {
  accent-color: deeppink;
}

Recommended to practice on codepen

Currently, accent-color property supported on four elements only.

checkbox
radio
range
progress

The accent-color property also do their job with color-scheme effectively, allowing to tint both the light and dark elements.

If you not aware of color-scheme. Don't start to suffer and explore now.

For Instance,

<div color-scheme="light">
    <label>
      Default
      <input type="radio" checked>
      <input type="radio">
      <input type="radio">
    </label>
    <label class="accented">
      Brand
      <input type="radio" checked>
      <input type="radio">
      <input type="radio">
    </label>
</div>
<div color-scheme="dark">
    <label>
      Default
      <input type="radio" checked>
      <input type="radio">
      <input type="radio">
    </label>
    <label class="accented">
      Brand
      <input type="radio" checked>
      <input type="radio">
      <input type="radio">
    </label>
</div>

:root {
  --brand-color: deeppink;
}
.accented {
  accent-color: var(--brand-color);
}
[color-scheme="dark"] .accented {
  accent-color: hsl(328 100% 80%);
}

See the magic✨ below,

I can get your thought😁, "hey for practice this, I need a new file or a codepen. So, give me a sample codepen". Hm ok, I appended the codepen and start to play around on it.

Browser Support for `accent-color`

accent-color supported on modern web browsers.

Changing color while focusing by `:focus-visible`🧐

Simply, means change the outline style of focus ring by using :focus-visible pseudo class.

For instance,

:focus-visible {
  outline-color: var(--brand-color);
}

Recommended to play on the codepen and it's a good practice to make a way for familiar with new thing✨.

Changing color while selection by `::selection`🔍

The CSS pseudo-element ::selection changes the styling that is highlighted by the user (means allows you to style how selected text looks), such as when you highlight the text using a mouse or another pointing device.

Seems interesting right. So early I did a dedicated article on ::selection

It's really a subtle work for maintain the brand and I am sure which definitely impress your client. If you loved this subtle blog, Then give a endearing heart💝 which really lot to me. I love the discussion with you.

Thanks for Reading!!
Preethi
- Make your CSS life easier

Emmet for forms - drive too fast 🚀

Preethi⚡ — Wed, 19 Jan 2022 08:41:59 +0000

Well hello there👋🏻👋🏻, Emmet syntax's produce 2X coding speed. Often usage of forms in websites for login, signup, surveys and the like. So, Try to adapt for maximum possible form fields by Emmet short syntax.

I will make it as series since care about keep you away from overwhelmed and make a way to slurred your brain. Let's get this ride on the road🎉.

Generate Common text fields

Generate Text box
Generate email💌 field
Generate password field
Generate Search🔎 field
Generate URL🔗 field
Generate Number🔢 field
Color picker🌈
File uploader📁
Login form Generation➡️

Generate Text box

Just type input and hit enter or Tab which auto generate,

Type inp or input:text or input:t and hit enter or Tab which auto generate like below,

Generate email💌 field

Type input:email and hit enter or Tab which auto generate like below,

Generate password field

Type input:password or input:p and hit enter or Tab which auto generate like below👇🏻,

Generate Search🔎 field

Type input:search and hit enter or Tab which auto generate like below,

Generate URL🔗 field

Type input:url and hit enter or Tab which auto generate like below,

Generate Number🔢 field

Type input:number and hit enter or Tab which auto generate like below,

Color picker🌈

Type input:color and hit enter or Tab. See the magic👇🏻,

File uploader📁

Type input:file or input:f and hit enter or Tab. See the magic,

In simple words, You just remember like input:text_field_type. Make sense right😉

Login form Generation➡️

Hope you grasped the idea behind the text field generation. Start to generate login form which completely Derived from learned concepts.

Recommended to generate login form(like below) on your own pace by Emmet syntax. If can't generate similarly, completely fine😉 which means expect more practice on Emmet syntax.



<form action="" class="login">
    <input type="text" placeholder="enter name.." name="username">
    <input type="text" placeholder="enter password" name="password">
    <input type="submit" value="submit">
</form>

Note: use [] for custom attributes like [name="username"]. If more than one custom attribute give space between two attribute within bracket like [placeholder="enter name.." name="username"]

Below Emmet syntax generate login form in a seconds⏱️. Seems interesting right💖.

If you loved this blog, Then give an endearing heart💝and drop your thought about this blog😍 which really a lot to me. I love the discussion with you, If you feel not comfortable at styling concepts or have any doubts.

Hope we will meet on upcoming series😊 and If you not experiment with CSS BEM Naming Convention, Start to explore now.

Thanks for Reading!!
Preethi
- Make your CSS life easier

Emmet Series2💰 - Uplift your productivity

Preethi⚡ — Wed, 12 Jan 2022 15:10:16 +0000

Hey There, Series1 make your writing code faster in 2X speed right. I swear to you that contiguous series will change your current speed will be doubling😊. Now, Looking for little tricky Emmet syntax. Though, which does not make you feel freaky. Let's get this ride on the road🎉.

Class and id generator
climb-up the elements
Generating text
Numbering the item
Lorem ipsum generator🎉
Bonus Secret info😉😉

Class and id generator

Hope you know in CSS, Use . for class and Use # for id right. The same mechanism followed in Emmet world because try to avoid making you fatigue.

If you want to generate class, Use .

a.button>span.button__prepend+span.button__body

If you want to generate id, Use #

a#button>span#button__prepend+span#button__body

You can also combine class and id

form#search.wide

Climb-up the elements

sometime we need to uplift the element to one or two or more levels. By that situation, Just use ^ for uplift to one level or need to uplift for 2 levels then use ^^.

If you cant find the symbol^, Chill which is in number 6 button. press shift + 6

If you can't get the concept, Don't get stressed. You will grasped the point by example below.

div.container>p^div.containerTwo

If you want div.containerTwo to uplift for one level (use ^) which is sibling to div.container. Really interesting right😲😲.

In simple words, how many level you want to uplift, increase the ^.

For another instance,

div.container>div.sub-container>p+span^^div.containerTwo

If you want div.containerTwo to uplift for two levels (use ^^) which is sibling to div.container.

Generating Text

Often need to gave plenty of text inside the elements and that plenty of text render in the browser. We can generate that text using {}.

For instance,

ul>li{item name}*5

Use this feature like

ul>li{item$}*5

Numbering the item

You can numbering the item in single or more digit by Emmet syntax. you know numbering the item by using $. Which is fine to single digit. If you need 2 digit numbering, how to do??.

Simple, use $$ for 2-digit numbering which means how many digit you want, increase the $.

For instance,

ul>li.item$$*5

Lorem ipsum generator

This is the most stunning feature which make painless effort to searching dummy content before the copy we received from the concern team. Seems cheerful feature right😍.

Just type lorem followed by number which convey how many words need to be generated,

p>lorem10

Bonus Secret info😉😉

Before leak the secret, let me ask a question "How to create div with container class??🤔". I get your answer from your brain secretly😁 which is div.container right. Nothing wrong with your answer which is 💯 right.

But, There is another way to do that. Just type .container and hit enter or tab, Emmet guy have auto-sense which generate

if you may use this feature like,

ul>.item$*4

observe the output closely, li generated automatically. Can't believe the feature like magic🪄.

Hope we will meet on upcoming series😊

If you not experiment with A new two-value syntax for display property, Start to explore now.

Thanks for Reading!!
Preethi
- Make your CSS life easier

Emmet Series1🎉- Boost your productivity

Preethi⚡ — Mon, 10 Jan 2022 13:37:19 +0000

Hey There, Header seems weird right😵. Don't panic it's not heavy handed. Sometimes feel getting infuriated to structuring our markup😩 and we have plenty of styles waiting to make website look pretty neat. Start to take advantage of emmet which bring off what they promise, you can use short expressions to generate HTML markup, CSS. So, Get this show on the road🎉.

📝Note: I hold on to series. Desire to take you from overwhelmed and make feel consistent. We just Start uncomplicated to little complicated level.

Generating HTML Skeleton
Generating Child Element
Generating Sibling Element
Grouping the elements
Replicate the elements
Bonus info🎉🎉

Generating HTML Skeleton

Often need to create new .html file, Every time we can't write the starter code. At that frustrating level, can't explain in words😵.

Uh, we are in emmet world which changed the pain points by just type ! or doc and hit enter or tab. Hurray🎉, which grant starter code in a seconds.

Generating Child Element

In Markup, All are in parent-child relationship. In simple words, Building nested elements By using > symbol.

Hope you grasped the idea💡behind the >.

For instance,

nav>ul>li>a

After typing in IDE (In the fullness of time, I love Visual Studio Code💖), hit enter or tab. whoopee, Emmet guy done their job in a light speed.

I can get your question. Incase of child or parent have sibling then how can I do in Emmet. Uh, That's also possible which means we can generating sibling element also.

Generating Sibling Element

Simply, Use + symbol for sibling guys.

header+main+footer

Grouping the elements.

Grouping idea is outstanding and really handy in plenty of places.
Just group the element by using () irrespective of relationships.

(header>nav>ul>li>a)+main+footer

Replicate the elements

In some situations, Requirement to duplicate the elements by the time, Often press ctrl + c then ctrl + v or shift+alt+down-arrow.

Just chill, Not a big deal. Emmet guy already grant the multiplication * symbol which multiply the elements like the way you want.

nav>ul>(li>a)*5

Just hit enter or tab. whoopee, Emmet guy done their job already, you didn't noticed it below😉.

Wow, Still with me which proof again and again that's you are big fan of learning new things. Proud of you man👏🏻👏🏻. Then It's my pleasure to give you a bonus info(keep it secret😉).

Bonus Info🎉🎉

We can order that duplicated items which is really costly💰. Haha, Just use $ to order.

Note: $ is only applicable when multiplication * implemented in end

Before see the instance. One more info, use . for class and # for id

ul>li.link$*5

Results really make painless feel.

If you order in decreasing order, that also possible😎 by using @- beside the $. Seems weird, You will get my point by instance below.

 ul>li.link$@-*5

See the magic🪄

Hope we will meet on upcoming series😊

If you not experiment with A new two-value syntax for display property, Start to explore now.

Thanks for Reading!!
Preethi
- Make your CSS life easier

A new Two-value syntax for display property🪄

Preethi⚡ — Sat, 08 Jan 2022 14:14:01 +0000

Hey There, Plenty of CSS updates try to drain our infuriating level. Likewise, we aware of inline, block,inline-block ,flex, flex values of display property and a brand new way syntax helps to make new combinations. For instance, inline-flexor inline flex which seems little bit weird right. Uh, Don't worry which is not much complicated as you think about it😉.

Disclaimer: Recommended to use FireFox Developer Browser.

So, Hope continue reading and after you feel like,

Before move directly into two-value syntax. First, We need to mastering on outer and inner value. Then we make the undisturbed road to Two-value syntax.

Outer and Inner value

Outer value describe whether the parent is block-level or inline-level.

(Outer value technically call as Box Value).

Inner value describe how the children of that box behave (which means determine the formatting context of children).

I can get your thought. what is formatting context🤔??So, Just pause the inner and outer value topic for few seconds⏱️.

Formatting context means??. In simple terms, How they behave and there are several types of formatting context, including block formatting contexts, inline formatting contexts, flex formatting contexts.

For instance,

<p>Before that night—<strong>a memorable night</strong>, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”</p>

strong {
    margin: 20px;
    padding: 20px;
    border: 5px solid rebeccapurple;
}

The above example illustrate the inline formatting context. Just try to understand the behaviour of inline formatting context from above instance,

The box model does not fully apply to items participating in an inline formatting context(which means margin above and below the element will not be applied).
Horizontal padding, border and margin will be applied to the element and push the text away left and right.
Vertical padding and borders will be applied but may overlap content above and below.

Hope you grasped the inline formatting context. Just like that, other formatting context guys behave their own way. Make sense right💡.

Let's rebound to Outer and Inner value, if we declare as

.parent-container {
display: flex;
}

or we can rewrite as,

.parent-container {
display: block flex;
}

Actually Both are same. Haha, feels like

Nothing wrong with this display: block flex;. Because If we declare as display: flex which default outer value as block and inner value as flex.

Exactly means, when we use display: flex we create a block-level container (that is parent container will hold other element are stack on each other), with flex children (children participating in flex formatting contect).

For instance,

Observe carefully, The text "I can't join with them🥺" after the flex container reside like stack on each other pattern (not next to each other pattern).

If we want parent container behave as next to each other pattern, Just change the outer value. Can you guess what's that?? means change to inline??🤔.

If you guessed inline, You are right👏🏻👏🏻. Otherwise, not a giant problem. display: inline-flex or display: inline flex which convey the parent container behave as next to each other pattern.

For instance,

Now you get a clear impression with outer and inner value. So, Then what is two-value syntax??. Actually you already learned just before few seconds.

Single Value	Two Value
flex	block flex
inline-flex	inline flex
grid	block grid
inline-grid	inline grid
block	block flow
inline	inline flow

Two value syntax = explicitly define outer value and inner value

By this way, you can create more new combination values for display property.

Browser Support

Not 100% work on all browser. Which is in experimental mode, Expect to change the future CSS life😍.

If you loved this blog, Then give an endearing heart💝and drop your thought about this blog😍 which really a lot to me. I love the discussion with you, If you feel not comfortable at styling concepts or have any doubts.

If you not experiment with Auto Enabling dark mode(CSS only), Start to explore now.

Thanks for Reading!!
Preethi
- Make your CSS life easier

Auto Enabling dark mode(CSS only)🎉🎉

Preethi⚡ — Tue, 04 Jan 2022 15:05:37 +0000

Hey There, Most of the users(specially developers) are the huge fan of dark mode and try to use it on all apps and software. They will definitely expect enabling dark mode on web content also. So, we can get their theme preference by their OS(In this blog, technically call as "UA" means User Agent) without need to toggle😲😲.

Dark mode is better for your eyes in low-light environments and is better for your device battery.

We can achieve these without asking help to JavaScript🎉 which really sounds good (Disclaimer: I'm not mean JS is complicated, But we enable these feature as simple as possible). Seems be like,

NO, I'm not kidding😅. Seriously possible.

A magical media query🪄

Using @media (prefers-color-scheme: dark) media query, We can detect if the user has requested a light or dark color theme by User Agent(based on OS settings).

For instance,



@media (prefers-color-scheme: dark) {
  :root {
    --main-bg-color: #040404;
    --card-bg-color: #3a3a38;
    --icon-bg-color: #f7d1a2;
    --main-light-onColor: #aeb4bd;
    --main-dark-onColor: #777676;
  }
}

/* we can also style for light mode*/
@media (prefers-color-scheme: dark) {
}

Above instance illustrate that,

If OS theme preference is dark, Then it will be changed to dark mode. Otherwise, It will stuck with light mode.

If OS theme preference is light, Then it will be changed to light mode. :root Selects the root element of the document: in the case of HTML and defined the custom property inside :root means which can be declared and used globally in document. Use Custom property is a best practice which save our loads of time like Life saver.

If you not aware of Custom property, Not a big issue. I will explain, else you just skip this fold and pass on to next fold.

CSS Custom Property(Variables)

Declaring a custom property is done using a custom property name that begins with a double hyphen (--), and a property value that can be any valid CSS value.

A common best practice is to define custom properties on the :root pseudo-class, so that it can be applied globally across your HTML document.



:root {
  --main-bg-color: brown;
}

Uh, Creating a custom property is pretty easy right. Likewise, Use this custom property is painless process😉. Just you use the custom property value by specifying your custom property name inside the var() function, in place of a regular property value.

For instance,



header{
background-color: var(--main-bg-color);
}

Hope you grasped the concept and let's get a ride on next..

Hey still with me, Proud to see your curiosity about learning new things✨. It's my pleasure to give you a bonus info and some additional resource for practice.

`color-scheme` - Must include

We need to add styles for even form controls, scrollbars and so on. It's may be painful process. So, Using color-scheme changes the default text and background colors of the page to match the current system appearance, standard form controls, scrollbars and other named system colors also change their look automatically.



:root {
  color-scheme: dark light;
}



/* possible property values */
color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark;

color-scheme specifying the values light and dark on the root element. let's the rendering engine known both modes are supported by the document.

I recommend you to practice on codepen or fork my repository🎁 and practice on you own pace.

If you not experiment with Claymorphism, Start to explore now.

Thanks for Reading!!
Preethi
- Make your CSS life easier

Claymorphism on 2022🎁 (CSS only)

Preethi⚡ — Sun, 02 Jan 2022 13:54:37 +0000

Hey There, Hope this new year✨ give you a fabulous moments. There are some trends for every year like Skeuomorphism ➡️ Neumorphism ➡️Glassmorphism ➡️Now, The brand new trend is Claymorphism🎉.

Due to accessibility issues, Some trends can't be hero of the year in real-time😥. Uh, Don't worry guys Claymorphism didn't make any accessibility issues.

Why Claymorphism🤔

Really getting bored with flat designs and world excited for changing UI to 3D. From 2022, we introduce that 3D feel in web world. Sounds amazing right✨ and we can introduce this Claymorphism from pages to atom components. I care to save developer time and let's get this show on the road🎉.

Claymorphism made by 4 styles

Light, pastel, and vivid colors
Big rounded corners
Double inner shadow
Outer shadow

In-depth on box-shadow

box-shadow is the main guy for that magical shadow effect. So, we need aware of that.

Specify a single box-shadow using:

Two, three, or four values. If only two values are given, they are interpreted as offset-x and offset-y values. If a third value is given, it is interpreted as a blur-radius. If a fourth value is given, it is interpreted as a spread- radius.

To specify multiple shadows, provide a comma-separated list of shadows.

Optionally, the inset keyword.
Optionally, a color value.

Note: Claymorphism is made up of inner shadow and outer shadow

How do we create inner shadows

It’s actually effortless😍. We need to add special value inset before our shadow. This will inform our browser that this particular shadow is an inner shadow. By default, we create outer shadows. Below code snippet, illustrate the claymorphism made by one outer shadow and at least two inner shadows.

box-shadow: 24px 24px 48px rgba(174, 210, 236, 0.4),
    inset 12px 12px 24px #e7f2f9, inset -24px -24px 48px #b8d8ee;

Now I thought, you are be like😉

Hey still with me. You really curious about trends like trend lovers💖. So, it's my pleasure to give you the live experience and you will playing with that magical shadows🪄.

Or you just fork my repository🎁 and practice in your own pace.

Thanks for Reading!!
Preethi
- Make your CSS life easier

Mastering on flex-basis behaviour

Preethi⚡ — Fri, 31 Dec 2021 06:25:57 +0000

Hey Gang, Feel lucky to see you again. when start to learning on flexbox, feel like the least well-explained property in Flexbox tutorials. start to getting confused😥 like what exactly flex-basis behavior?? what's the difference between width and flex-basis?? etc.,

Uh, increase our frustartion rate right. After reading lots of blog and did some exprimentation. Finally grasped the answer for all question🎉🎉. Then I'm get ready to make you mastering on flex-basis behaviour and let's get this show on the road. So, Be feel like

Before understanding of flex-basis. Need to aware of

Main axis of flexbox.
Flex items formula

Main axis of flexbox

If flex-direction: row or flex-direction: row-reverse, your main-axis will run left to right or right to left of the page in the inline direction (horizontally).
If flex-direction: column or flex-direction: column-reverse, your main-axis will run top to bottom or bottom to top of the page in the block direction (vertically).

Flex item formula

Flex item(which means elements inside the flex container) following specific formula,

Which conveys that,

If no flex-basis is specified, then the flex-basis falls back to the item's width property.
If no width is specified, then the flex-basis falls back to the computed width of the item's contents.

flex-basis

The default value of flex-basis is auto. flex-basis take an element’s size across the main axis. which means,

if flex-direction will be row and flex-basis is 250px, then main axis is in inline direction(horizontally) and it take 250px in width.
if flex-direction will be column and flex-basis is 250px, then main axis is in block direction(vertically) and it take 250px in height.

Hope you get my point😍. If can't, don't worry. You can understood through below example,

if flex-direction will be row and flex-basis is 160px, then main axis is in inline direction(horizontally) and it take 160px in width. If we change the flex direction to column, then main axis is in block direction(vertically) and it take 160px in height.

Flex-basis thus alternately determines width or height, depending on flex-direction. Seems like dynamic in nature.

I recommend you to practice in codpen like just swtich the flex-direction and see the effect lively..

Hey, Still with me🥳. I can understood, You are getting very curious about flex-basis behaviour. So, It's my pleasure to show you 4 key behaviours of flex-basis.

4 key behaviours of flex-basis

Flex-basis controls either “width” or “height” based on the flex-direction.
Flex-basis will override any other width or height properties if specifically declared anything other than flex-basis: auto;.
flex-basis will still obey min-width and max-width or height settings, which is based on flex-direction.
When flex-basis is set to auto, it first checks for a width or height property (based on direction) if none, it uses the elements content sizing.(just remember that flex-item formula content <- width <- flex-basis)

Note: flex-basis is: the size of flex items before they are placed into a flex container(which means before the flex-shrink or flex-grow getting applied). It's the ideal or hypothetical size of the items. After placing the flex item in flex container, things may getting changed based on flex container size. Because flex container won't have enough space(flex-shrink start to shrinking the items), or will have extra space(flex-grow start to growing the items).

uh😅, flex-basis guy have so much of behaviour and Congratulations,You reached the destination.

Please execuse me, I will end up with a bonus info.

A best practice is to just use flex-basis instead of width or height. Especially since Safari still has an old flexbox bug where it won't apply flex-shrink properly to items that use height instead of flex-basis.

If i continue now, which make you feel overwhelmed😥. So, If you feel need live example for key behaviours of flex-basis and just drop a comment which make a way to know about your thought and I will start to build part-2.

Thanks for Reading!!
Preethi
- Make your CSS life easier

DEV Community: Preethi⚡

React 19.2 introduces a new component

How <Activity /> Works

Example 1: Tabs with Preserved State

Example 2: Notifications Component

25 Extremely Modern Layouts Using CSS Grid✨

Do yo Know??

Not Showcasing Only, For Practicing also

3 steps to practice this modern layout

Layout 01

Layout 02

Layout 03

Layout 04

Layout 05

Layout 06

Layout 07

Layout 08

Layout 09

Layout 10

Layout 11

Layout 12

Layout 13

Layout 14

Layout 15

Layout 16

Layout 17

Layout 18

Layout 19

Layout 20

Layout 21

Layout 22

Layout 23

Layout 24

Layout 25

Find Me on GitHub Twitter

My brand new GitHub Profile - Did you💖it?

Click to see my brand new GitHub portfolio✨

Cosmic burden behind "The Title-Winning of my 1st hackathon👩🏻‍💻"

A twist that breaks my patience

Did you know🧐🧐??

Around 16 - 18 days to the end

A merciless decision

A bottle of lemon juice🍋

Climbed the grand final

Didn't expect final pain

Tear with smile

We did it. Yes, We did it😌

Write a single line😮 for tinting your brand color

Possible ways to reach on

Changing color on form elements by accent-color🌈

Browser Support for accent-color

Changing color while focusing by :focus-visible🧐

Changing color while selection by ::selection🔍

Emmet for forms - drive too fast 🚀

Generate Common text fields

Generate Text box

Generate email💌 field

Generate password field

Generate Search🔎 field

Generate URL🔗 field

Generate Number🔢 field

Color picker🌈

File uploader📁

Login form Generation➡️

Emmet Series2💰 - Uplift your productivity

Table Of Contents

Class and id generator

Climb-up the elements

Generating Text

Numbering the item

Lorem ipsum generator

Bonus Secret info😉😉

Emmet Series1🎉- Boost your productivity

Table Of Contents

Generating HTML Skeleton

Generating Child Element

Generating Sibling Element

Grouping the elements.

Replicate the elements

Bonus Info🎉🎉

How `<Activity />` Works

Changing color on form elements by `accent-color`🌈

Browser Support for `accent-color`

Changing color while focusing by `:focus-visible`🧐

Changing color while selection by `::selection`🔍

`color-scheme` - Must include