DEV Community: Omsai Desai

Made a Hindi meme-based Resume Roaster 🔥 Upload your resume & get roasted instantly 😂

Omsai Desai — Tue, 09 Dec 2025 04:26:20 +0000

Namaste devs!
I built a small web app called Resume Roaster — upload your resume and it roasts you in pure Hindi with memes.
I wanted to mix tech + humour because resume feedback is usually boring.

👉 https://resume-roaster-five.vercel.app/

Would love your feedback:

How’s the roast quality?

UI smooth enough?

What improvements should I work on?

Built this for fun — open to all suggestions!

𝐒𝐭𝐨𝐩 𝐩𝐫𝐞𝐭𝐞𝐧𝐝𝐢𝐧𝐠 𝐂𝐒𝐒 𝐜𝐚𝐧’𝐭 𝐦𝐚𝐤𝐞 𝐝𝐞𝐜𝐢𝐬𝐢𝐨𝐧𝐬 - 𝐛𝐞𝐜𝐚𝐮𝐬𝐞 𝐧𝐨𝐰 𝐢𝐭 𝐜𝐚𝐧. 🚀

Omsai Desai — Tue, 04 Nov 2025 02:25:36 +0000

If you’re a front-end developer like me, you’ve probably hacked around via extra classes, JavaScript, or pre-processing just to get styles to behave differently in certain contexts. Well, wave goodbye to that extra overhead, because the introduction of the 𝐢𝐟() function in CSS brings true inline conditional logic to stylesheets.

Here’s the long-form takeaway:

We’ve historically treated CSS as purely declarative - “this class means this style” - without letting it make decisions based on context, environment or state. The new 𝐢𝐟() function changes that. You can now write something like:

𝐛𝐮𝐭𝐭𝐨𝐧 {
𝐰𝐢𝐝𝐭𝐡: 𝐢𝐟(𝐦𝐞𝐝𝐢𝐚(𝐚𝐧𝐲-𝐩𝐨𝐢𝐧𝐭𝐞𝐫: 𝐟𝐢𝐧𝐞): 𝟑𝟎𝐩𝐱; 𝐞𝐥𝐬𝐞: 𝟒𝟒𝐩𝐱);
}

Which means: “If the input device has a fine pointer (like a mouse), width is 30px; otherwise (touch devices) go 44px.” All inside a single rule, no separate media query required.

Why this matters:

1️⃣ Cleaner code. One rule, one spot - less duplication and easier maintenance.
2️⃣ Smarter styling. CSS itself can respond to user preferences, device capabilities, theme states or custom properties right inside the stylesheet.
3️⃣ Less JavaScript for UI logic. The more you can offload into CSS, the more performant and predictable your UI becomes.

Of course, it’s not perfect yet. Browser support is still in progress - early adopters only so far.

But that simply means the savvy teams will start planning for it now and gain ahead of the curve.

If you’re working on performance-sensitive applications, or building rich interactive UIs, think about how this could simplify your architecture. Could you move some logic out of your script files and into CSS? Could your dashboards or components become more maintainable because styles themselves adapt?

In my world (where accessibility, animations, web performance are core), this means more expressive CSS, fewer workarounds, less state-drift between JS and style layers. It’s another step toward “design logic” living closer to its natural home.

Let your CSS do the thinking - even if just a little.

🚀Master the Basics of Git in Minutes!

Omsai Desai — Sat, 01 Nov 2025 03:57:40 +0000

Whether you're just starting your development journey or working on team projects, Git commands are your best friend for managing code effectively.

Here are 12 essential Git commands every developer should know — from initializing a repo to branching, merging, and resetting. 🧠💻

✅ Perfect for beginners

✅ Useful as a quick reference for pros

✅ Boosts collaboration and productivity

📌 Save this post for future reference and keep your workflow smooth!

🧠 Mastering JavaScript: A Layer-by-Layer Roadmap for Beginners

Omsai Desai — Fri, 10 Oct 2025 10:03:24 +0000

Learning JavaScript can feel overwhelming at first. With so many frameworks, libraries, and buzzwords floating around, it’s easy to skip the fundamentals and jump straight into React, Vue, or Next.js.
But here’s the truth:

🚀 A strong foundation in core JavaScript makes everything else easier — debugging, building real projects, and understanding how frameworks actually work under the hood.

Recently, I came across this great visual that perfectly captures the learning layers of JavaScript 👇

Image Source: d-libro.com

This diagram breaks JavaScript learning into progressive layers. Let’s explore each one and understand why it’s important.

🧱 1. Basic Syntax — The Foundation

Everything in JavaScript is built on its syntax — the language’s grammar and vocabulary. Before diving into frameworks, get comfortable with:

✅ Variables (let, const, var)
🧠 Data types (string, number, boolean, null, undefined, symbol)
📝 Statements vs Expressions
🧮 Operators (arithmetic, comparison, logical, assignment)
🧰 Brackets & punctuation — {}, (), [], ;
✍️ Template literals using backticks `Hello ${name}`
💬 Comments for clarity

💡 Pro Tip: Use the browser console or Node.js REPL to experiment with small snippets every day.

🧠 2. Core Constructs — Thinking in Code

Once syntax feels natural, level up by learning how JavaScript actually controls logic and behavior.

🧠 Functions — declarations, expressions, arrow functions
🔁 Loops & Control Flow — if, else, for, while, switch
🧭 Scope & Hoisting — how and where variables “live”
🧍 Objects & Classes — structure your data and behavior

Example:

function greet(name) {
  if (name) {
    console.log(`Hello, ${name}!`);
  } else {
    console.log("Hello, stranger!");
  }
}

greet("JavaScript Learner");

Understanding these fundamentals will make asynchronous concepts, APIs, and frameworks much less intimidating later on.

🌐 3. Browser APIs, Modules & Frameworks — Building Real Apps

With a solid grasp of the language, it’s time to explore how JavaScript interacts with the web:

🌍 DOM Manipulation — changing HTML/CSS using JS (document.querySelector, addEventListener, etc.)
📡 Web APIs — Fetch API for HTTP requests, LocalStorage, Geolocation, etc.
⏳ Asynchronous JavaScript — Promises, async/await, event loops
📦 Modules & Imports — organizing code across files
⚡ Frameworks — React, Vue, Angular, Next.js, Svelte...

But remember: frameworks should come last, not first. Mastering the language will make learning any framework 10× faster.

📝 How to Practice Effectively

Here’s a simple strategy:

Pick one layer at a time. Don’t rush through syntax to get to React.
Build mini projects at each stage — calculator, to-do list, digital clock, quiz app, etc.
Refactor & improve old code as you learn new concepts.
Read other people’s code to understand different styles and patterns.

✨ Consistency beats intensity. A few minutes of focused practice daily goes a long way.

🧭 Recommended Resources

MDN Web Docs — The official go-to documentation
JavaScript.info — Beginner-friendly tutorials
FreeCodeCamp — Hands-on exercises and certifications
Eloquent JavaScript — Deep dive into concepts

🏁 Final Thoughts

Learning JavaScript isn’t about memorizing everything — it’s about building layers of understanding step by step.

Start with the basics. Get comfortable. Then move up. And before you know it, you’ll be confidently working with APIs and frameworks like a pro.

🏗️ Think of JavaScript learning like building a skyscraper. The stronger the foundation, the higher you can go.

✍️ If you found this roadmap helpful, give it a ❤️ / clap and share it with someone starting their JavaScript journey!