DEV Community: Jithesh

From Box Shadows to Dashed Borders: How I Hit 63 Characters on CSSBattle's Daily Target 🎯

Jithesh — Wed, 18 Mar 2026 02:55:31 +0000

Score: 819.42 | Characters: 63 | Platform: CSSBattle Daily Target

I want to talk about a small win. Not a viral project, not a shipped product, not a promotion. Just 63 characters of CSS that made me genuinely happy.

If you've never heard of CSSBattle, the idea is simple and slightly addictive: recreate a target image using the smallest amount of CSS you can write. Every character counts — literally. Your score goes up as your character count goes down.

I've been doing the daily targets consistently. Not always solving them. Not always topping the leaderboard. But showing up, trying, checking yesterday's top solutions (often not fully understanding them), and slowly getting better.

Today was different.

The Journey to 63 Characters

Let me walk you through how my solution evolved — because the process is the interesting part.

Attempt 1 — The Brute Force (box-shadow era)

*{
  background:#FFF;
  *{
    border:70px solid#328FC1;
    margin:70;
    color:323138;
    box-shadow:190px 110px,-190px 110px,190px -110px,-190px -110px
  }
}

I was thinking: four squares, four box-shadow offsets. It worked visually but the character count was rough. Box shadows for positional tricks are a classic CSSBattle technique — but not the right tool here.

Attempt 2 — Switching to Dashed Border

Then it hit me. The target had a dashed border pattern. What if I just… used dashed?

*{
  background:#FFF;
  *{
    border:70px dashed#328FC1;
    margin:0;
  }
}
  &{
    border:70px dashed#323138;
  }

The outer element gets one color, the inner gets another. Fewer lines, cleaner logic.

Attempt 3 — Collapsing Both Into One Rule

Wait — what if both borders share the same properties and I handle colors differently?

*{
  background:#FFF;
  color:323138;
  border:75q dashed;
  *{
    color:328FC1;
    margin:0;
  }
}

Getting shorter. color instead of explicit border-color. 75q instead of 70px (CSS q units are quarter-millimeters — smaller to type, can achieve similar visual results with the right value). The background white was still there though.

Attempt 4 — The "Wait, Do I Even Need That?" Moment

*{
  color:323138;
  border:75q dashed;
  *{
    color:328FC1;
    margin:0
  }
}

63 characters. Score: 819.42.

The background:#FFF was completely unnecessary. The default background was already white. I'd been carrying dead weight the entire time.

That moment of reviewing and asking "does this line actually do anything?" — that's where the real characters were hiding.

What I Actually Learned

1. The technique you reach for first is rarely the most efficient.
I started with box-shadows because that's what I knew. Dashed borders were the right tool, and I only found them by staying curious.

2. Every property you add is a character cost. Question everything.
background:#FFF felt safe and explicit. But it wasn't needed. The discipline of asking "is this line earning its place?" applies beyond CSSBattle too.

3. q units exist and they are criminally underused.
CSS has quarter-millimeter units. I love this language.

4. Daily practice compounds quietly.
I didn't solve this in one sitting or one day. I built up pattern recognition over many days of attempts, many top solutions I barely understood, many "oh that's clever" moments that slowly sank in.

5. Small achievements are worth celebrating.
When the character count hit 80, I was happy. When I realized I could remove the background and drop to 63, I was very happy. Neither of these are world records. I don't care. It felt earned.

Should You Try CSSBattle?

If you write CSS at all — yes. It will:

Force you to learn obscure but real CSS properties
Make you think about why properties work, not just what they do
Introduce you to units, tricks, and shorthands you'd never encounter in normal work
Give you a tiny dopamine hit when the character count drops by 2

You'll also check the top solutions and feel humbled. That's fine. That's the point. Understanding 20% of what the #1 solution is doing still teaches you something.

Final Thought

I never thought I'd get a double-digit character count on a daily target. For a long time I was happy just getting close to the target image. Then happy getting on the board. Then happy breaking 100 characters. Then 80. Then 63.

The leaderboard always has someone smarter. Their solutions will still teach me something tomorrow.

But today, 63 characters felt like a lot.

Have you played CSSBattle? What's your favorite CSS trick you learned from it? Drop a comment — I genuinely want to know.

Building a Process Scheduling Simulator: Relearning TypeScript and Reducing AI Dependence

Jithesh — Sat, 14 Mar 2026 02:49:19 +0000

For several weeks, I hadn’t written any real Next.js or TypeScript code without relying heavily on AI tools.

During one of my Operating Systems classes, we were studying CPU scheduling algorithms. While going through the theory, a thought came to mind: why not build a visualizer for these algorithms?

It seemed like the perfect project. It would help me understand scheduling concepts more deeply, and it would also force me to start writing Next.js and TypeScript code manually again.

So I started the project.

That’s when reality hit.

The Reality Check

I quickly realized I couldn’t write much beyond the basic Next.js boilerplate.

When I tried to create a simple dummy data object, I hesitated on the syntax. When I needed to sort an array of processes by arrival time, my mind went blank. Because most of my recent coursework had focused on C++ and Java, I even caught myself typing int instead of number in TypeScript.

This was an uncomfortable but important realization:

skills fade when you stop practicing them.

Over time, I had started letting AI handle a lot of the small details like syntax, structure, boilerplate. Tools like ChatGPT and Claude were helpful, but I had slowly offloaded too much of the basic thinking to them.

Eventually, I noticed something worrying: I had begun to lose the ability to write those things independently.

This project became my reset.

I decided on a simple rule: no AI for core logic.

If I forgot how something worked, I would check documentation, Stack Overflow, or official references the traditional way.

At first it felt slow and frustrating. But gradually things came back; TypeScript types, array methods, language quirks. It was like loosening a rusted bolt: difficult at first, but easier once it started moving.

One thing that came back quickly was my comfort with designing TypeScript interfaces. That kind of structural thinking tends to stick longer than syntax details.

Finding the Right Balance with AI

At first, I thought the solution was simple: no AI at all.

But that isn’t realistic either.

Modern software development involves tools, and AI is increasingly one of them. Completely rejecting it would be just as extreme as depending on it for everything.

Instead, I changed how I used AI.

Rather than asking it to generate the application, I used it to:

Discuss component structure and interface design.
Review code I had already written.
Question naming choices and architecture decisions.
Suggest clearer variable, type, and function names.
Explore design tradeoffs before committing to an approach.

In other words:

I wrote the code. AI reviewed the work.

That distinction mattered.

The result was cleaner code, better naming, and a more organized folder structure without losing the actual learning process.

What I Built

The result is an interactive Process Scheduling Simulator.

Users can:

Enter a list of processes with arrival times, burst times, and optional priorities.
Run multiple scheduling algorithms.
View results instantly through Gantt charts and detailed metrics tables.

The simulator currently supports six classic CPU scheduling algorithms:

FCFS - First Come First Serve
SJF - Shortest Job First (non-preemptive)
SRTF - Shortest Remaining Time First (preemptive)
Priority Scheduling - both preemptive and non-preemptive
Round Robin - with configurable time quantum

For each algorithm, the system calculates:

Completion Time
Turnaround Time
Waiting Time
Response Time

It also calculates averages across processes.

One small but important detail the simulator handles correctly is CPU idle time, which is easy to overlook when first learning scheduling algorithms.

Tech Stack and Architecture

Framework: Next.js (App Router)
Language: TypeScript 5
UI Components: shadcn/ui + Radix UI
Styling: Tailwind CSS v4
Forms & Validation: React Hook Form + Zod
Icons & Theming: Lucide React, next-themes

The architecture intentionally separates algorithm logic from the UI layer.

This made the scheduling logic easier to test and reason about independently from the interface.

Using Zod with React Hook Form made validation surprisingly clean, especially with dynamic numbers of processes and constraints between fields.

TypeScript’s strict typing also helped ensure that scheduling logic stayed consistent across different algorithms.

The Decision Not to Over Abstract

At one point, I considered creating shared abstractions for the scheduling algorithms to reduce duplication.

In the end, I decided not to do that.

The entire purpose of this project was to understand the algorithms themselves.

FCFS is extremely simple.

SRTF requires tracking remaining burst time at each time step.

Round Robin requires maintaining a ready queue and time quantum.

These algorithms work differently enough that forcing them into a common abstraction would actually hide the differences I wanted to understand.

Sometimes explicit code is better than clever abstractions, especially when the code itself is part of the learning process.

Type Safety

To avoid fragile string comparisons, algorithm identifiers are stored as constants (fcfs, sjf, srtf, etc.).

This eliminates magic strings and gives strong TypeScript autocomplete and type safety across the scheduling logic.

Small decisions like this make the codebase easier to maintain as new algorithms are added.

What I Actually Learned

The obvious takeaway is that I now understand scheduling algorithms much more clearly; especially concepts like:

Preemption
Context switching
Starvation in SJF
The impact of time quantum in Round Robin

But the more interesting lesson was about my relationship with AI tools.

There are two extreme approaches:

Ask an AI to generate the entire project in minutes.

You get working code, but you learn very little.
Refuse to use AI at all out of principle.

This is noble, but not realistic in modern development.

The approach that worked best for me was the middle ground:

Write the logic yourself. Let AI help refine it.

This kept the thinking process mine, while still benefiting from an additional pair of eyes.

Try It

The project is open source on GitHub:

🔗 https://github.com/jithesh-poojari/process-scheduling-visualization

Live demo:

🔗 https://process-scheduling-simulator-nine.vercel.app/

If you're studying Operating Systems and want to see how scheduling algorithms behave in practice, this tool may help.

Upcoming ideas include:

Multilevel Queue Scheduling
Multilevel Feedback Queue Scheduling
Timeline animations
Automated tests
CSV import of inputs and export of results
Step-by-step execution with explanations

The best learning projects are the ones that feel slightly too difficult at the start. If everything feels comfortable from line one, you're probably not growing.

Climbing the Ranks: My CSSBattle #37 Journey 🏁

Jithesh — Sun, 02 Nov 2025 13:03:21 +0000

CSSBattle’s Battle #37 – Height has officially wrapped up, and this round felt special.

After four weeks, eight black-and-white themed challenges, and over a thousand players worldwide,

I managed to finish at Rank #22 — up from Rank #45 in the previous battle.

It’s not just a number; it’s proof that consistent, focused practice pays off.

From #45 → #22: What Changed

This time, I took a more analytical and minimal approach.

Instead of jumping straight into shapes, I spent more time understanding layouts — how the reference was built, where symmetry existed, and how it could be reused.

Every target became a small puzzle in efficiency.

Here’s what made the difference:

Refactoring over restarting: I stopped rewriting solutions and started refining them for brevity after hitting 100%.
Creative CSS tricks: border, box-shadow, clip-path, -webkit-reflect, and layered gradients became second nature.
Reusability: In some cases, instead of relying solely on pseudo-elements or shadows, I reused the same styled element multiple times — cleaner and often shorter.
Focus and speed: Most challenges were solved within 30–40 minutes, with many hitting 100% match on the first submission — a huge step up from before, where few battles still fell short of that perfect score.

The Code Golf Mindset

CSSBattle isn’t just a design game — it’s a mental gym for front-end developers.

You’re not just drawing shapes; you’re optimizing every line, every space, every property.

It teaches you to see geometry in code:

Circles hiding inside borders
Triangles emerging from clip-path
Shadows doubling as new elements

It’s addictive in the best way — a balance of logic, creativity, and compression.

What I Learned

Every battle reinforces one truth:

Simplicity is power.

Validation matters — a 100% match doesn’t always mean an efficient solution.
Repetition builds intuition — layouts start to “click” faster over time.
Creativity comes from constraint — the tighter the rules, the smarter your solutions become.
Iteration refines mastery — I created multiple versions for some challenges just to test which felt most elegant.

The best solutions often look effortless — but getting there takes effort.

My Solutions

All my solutions for Battle #37 – Height are available on GitHub:
👉 CSSBattle Solutions Repository

Each includes:

The full HTML + CSS code
A preview image of the recreated target
A link to the original CSSBattle challenge
My performance metrics — match %, score, and character count

Looking Ahead

Next goal: Top 10 in Battle #38.

I’m focusing on refining my compression techniques, mastering symmetry, and finding new creative layout shortcuts.

But more than rankings, CSSBattle has become a creative habit — a space where logic meets art and constraint sparks innovation.

Final Thoughts

Climbing from Rank 45 → 22 wasn’t just about numbers.

It’s about compounding improvement — in precision, patience, and pattern recognition.

CSSBattle has taught me to write less, think more, and appreciate elegance in code.

If you enjoy creative coding or front-end problem-solving, give it a try — it’ll reshape how you think about CSS.

🎨 CSS isn’t just styling. It’s structure, math, and art — all in one.

Glyph Catalog Launches on Product Hunt 🚀

Jithesh — Sun, 02 Nov 2025 12:59:32 +0000

GlyphCatalog is going live on Product Hunt — a big step toward putting this project in front of a wider audience of designers, developers, and curious minds who love clean, useful tools.

This isn’t just another update — it’s the moment where GlyphCatalog moves from being “a side project” to something ready to be discovered, used, and shared by the world.

🧩 What GlyphCatalog Is About

GlyphCatalog started as a simple, structured database of Unicode symbols — cleanly organized by category and format.
Over time, it grew into something more: a visual, searchable, and reference-friendly catalog built for clarity.

It helps users quickly find symbol details like:

Unicode, HTML, ALT, and HEX codes
Copy-ready formats
Categorized and referenced listings

Whether you’re designing an interface, coding an app, or just exploring typography, GlyphCatalog keeps symbol data accessible and beautiful.

🎯 Why Launch on Product Hunt

Product Hunt is a space where ideas meet visibility — where genuine, useful tools get discovered.
For GlyphCatalog, this launch is about three things:

Feedback — hearing from people who care about design and data clarity.
Validation — seeing if the idea resonates beyond a niche developer audience.
Reach — helping more users find a simple solution for symbol reference.

I’ve spent months refining the UX, cleaning the data model, and ensuring the site feels smooth — now it’s time to see how the world responds.

💬 How You Can Help

If you’ve been following the project or used GlyphCatalog before — your support means everything.
Here’s how you can make a difference:

Visit the Product Hunt page and leave a review or comment
Share your honest thoughts — what you liked, what can be improved
Spread the word if you find it useful

Your feedback will directly shape the next version.

🔮 What Comes Next

The Product Hunt launch is not the finish line — it’s the start of public growth.
After this launch, I plan to:

Expand code format support (binary, octal, markdown-ready codes)
Improve symbol search accuracy
Add cross-referencing and tagging for faster navigation

Every bit of feedback from Product Hunt will help guide these improvements.

❤️ A Note from Me

I built GlyphCatalog because I wanted a better way to browse, learn, and copy symbols — without clutter or confusion.
Seeing it reach this stage feels like a quiet milestone.

If you’ve ever supported, tested, or just appreciated this work — thank you.
You’re part of why this project made it this far.

👉 Check it out on Product Hunt: producthunt.com
👉 Explore the site: glyphcatalog.com

Building DreamSpace: A Modern Interior Design Website 🏠

Jithesh — Sun, 26 Oct 2025 07:23:28 +0000

DreamSpace is a responsive, accessible, and feature-rich interior design website that I and my team built as part of our MCA Web Technology project.

It’s not just another academic project — it’s a showcase of how design, usability, and code discipline can come together to create something that feels real-world ready.

🎯 The Idea Behind DreamSpace

The core idea was simple:

Build a website that feels like a genuine interior design brand — warm, modern, and user-focused.

We wanted DreamSpace to represent a professional studio’s digital presence: displaying services, showcasing projects, and allowing clients to book consultations or leave feedback.

At its core, this project tested how far we could push HTML, CSS, and JavaScript without relying on any frameworks — focusing purely on clean code, accessibility, and design consistency.

🧩 Features We Built

The site includes a complete set of modules you'd expect in a real brand website:

Home Page with hero banner, featured projects, process overview, testimonials, FAQs, and newsletter form.
Services Page highlighting our six core design services with iconography and hover animations.
Projects Showcase — filterable project cards (residential, commercial, renovation).
Booking Module — guided consultation form with date/time pickers and validation.
Contact & Feedback Pages — clear validation, ratings, and feedback form.
Authentication System — login/signup with password strength check and “Remember Me.”
Wishlist Module — save favorites using localStorage.
Dark/Light Theme — user preference saved across sessions.
Products Page — searchable, filterable catalog with quick-view modal.
About Page — team info, story timeline, and brand milestones.

🎨 Design Language

The visual design followed a warm and minimal aesthetic, staying true to interior design sensibilities:

Colors: Beige, brown, and gray — creating a cozy yet elegant tone.
Typography:
- Playwrite Modern for headings.
- Inter for body text.
Layout: Spacious, card-based design with clean grids.
Icons: Lucide icons for consistent visuals.
Animations: Smooth transitions and hover effects for subtle motion.

💻 Tech Stack

Frontend : HTML5, CSS3 (Flexbox, Grid, Media Queries), JavaScript (ES6) :
UI/UX : Semantic HTML, ARIA roles, responsive design principles :
Icons & Fonts : Lucide Icons, Google Fonts (Playwrite Modern, Inter) :
Performance : Deferred JS, image compression, CSS optimization :

⚙️ Challenges & What I Learned

Every project teaches something new — and this one definitely did.

Here are a few highlights from my personal learning curve:

🧠 1. Fixing FOUT (Flash of Unstyled Text)

At first, I noticed a flicker when loading custom fonts from Google Fonts — that “flash” before the text renders properly (FOUT).

I fixed this by self-hosting the fonts locally and using @font-face in my CSS.

Additionally, I used <link rel="preload"> for critical fonts, which made the text render instantly and consistently — a small but significant UX improvement.

⚙️ 2. Understanding `defer` in External Scripts

When I moved internal JavaScript to an external .js file, the scripts started executing before the DOM loaded — breaking some interactions.
That’s when I learned to use the defer attribute in the <script> tag (inside <head>), ensuring the scripts load only after the HTML is parsed.
It’s such a simple thing, but it made a huge difference in performance and maintainability.

🎨 3. Building a Theming System with CSS Variables

Instead of repeating color codes everywhere, I set up CSS variables (--background, --text-color, --primary, etc.) for both light and dark themes.
This not only simplified theme toggling but also made spacing, color, and typography more maintainable and scalable.

🤝 4. Merging Code and Maintaining Consistency

Our team worked on different modules, which meant I had to merge multiple design styles and make them consistent.
I standardized margins, paddings, and color usage across all pages — turning a collection of independent pages into a cohesive website.
This part taught me the importance of design systems and UI consistency, even in small projects.

🌗 Dark/Light Theme

This was one of my favorite parts.
Users can toggle between dark and light modes, and the choice is saved using localStorage, so it stays the same on the next visit.
Smooth transitions (transition: background-color 0.3s ease) made it feel natural — not abrupt.

🤖 AI as a Design & Development Assistant

We used AI tools like ChatGPT during development to:

Generate UI ideas and layout structure.
Get accessibility recommendations (ARIA roles, color contrast checks).
Refine code snippets and error handling.
Improve documentation tone and structure.

Instead of replacing our work, AI acted as an assistant and collaborator — helping us stay efficient, consistent, and technically correct.

🧑‍💻 My Key Takeaways

This project wasn’t just about building pages — it was about understanding the workflow of a real web project:

From semantic markup to responsive layouts,
From performance optimization to team collaboration,
From aesthetic design to technical problem solving.

Every small improvement — like deferring scripts, hosting fonts locally, or syncing design styles — made me realize that good websites are built by attention to detail.

🔗 Explore the Project

🌍 Live Website: dreamspaceinterior.vercel.app
💻 Source Code: GitHub Repository

👥 Team Members

📜 License

The project is open-sourced under the MIT License — free to use, modify, and learn from.

🪶 Final Thoughts

DreamSpace turned out to be more than just a submission — it became a learning experience in structure, collaboration, and refinement.

Every adjustment — from fixing font flickers to aligning grid spacing — taught me something real about web craftsmanship.

Building DreamSpace showed me how front-end design is not about decoration — it’s about communication, consistency, and care.

Behind the Scenes: Refactoring Glyph Catalog 🛠️

Jithesh — Sun, 28 Sep 2025 04:39:38 +0000

If you’ve checked out the recent update to Glyph Catalog, you already know it’s now faster, cleaner, and better organized. But behind that smooth release was a major refactoring effort. In this post, I’ll share what changed, why I changed it, and what I learned along the way.

This is less of a “what’s new” announcement and more of a developer’s journal.

The Problems With the Old Setup

When I first built Glyph Catalog, the goal was simple: display symbols with their Unicode and HTML codes in a table format. That worked fine at first, but as the collection grew, cracks started showing:

Nested Table Structure → I originally used a Category → Major → Minor structure but displayed everything in one large table. The Table of Contents jumped around between categories instead of having dedicated pages. It quickly became messy and hard to maintain.
Catch-All Routing → I used Next.js catch-all segments to handle categories, majors, and minors in a single file. It worked, but the codebase became bloated and unmanageable.
No Dedicated Symbol Pages → Each symbol only appeared inside a table row. There was no detailed page showing usage, examples, or reference links.
Messy Data Management → I stored data as multiple TypeScript objects across different folders. This made updates painful, categories inconsistent, and adding new codes difficult.
Search Limitations → Search was built into a dialog, showing all results at once. It couldn’t store state, was buggy when jumping to results, and didn’t scale.
Database Growth Issues → Seeding had no validation. Data was stored across multiple sources before being seeded, with little metadata and no logs. Adding more codes or fixing errors became frustrating.

The Refactoring Journey

Here’s how I tackled it step by step:

1. Data Validation

I added a validation layer to check for:

Empty fields.
Duplicate code points (allowed if they appear in different categories).
Corrupted or invalid characters.

Now, every symbol in the database is clean, consistent, and reliable.

2. Route Structure

I replaced the messy catch-all route with dynamic pages:
[category] → [major] → [minor] → [symbol].

Each symbol now has its own dedicated page with usage, examples, and reference links.
Tables were removed. Instead, I use cards for categories, majors, and minors, which improves readability and navigation.
Logic is split across multiple pages with minimal redundancy.

3. Database Restructure

I rewrote the seeding script to:

Load data from a single JSON source.
Validate, categorize, and assign metadata automatically.
Store metadata and reference links separately for flexibility.

This way, adding new formats (like binary) won’t break the schema, and maintaining data is much easier.

4. Search Improvements

Search now has its own dedicated page.
State is stored in the URL for persistence.
Added filters for refining results.
Results display more items with clearer context.
Supports searching by both description (“arrow”) and code (“U+2192” or →).

It’s still evolving, but it’s already far better than the old buggy dialog.

5. SEO & Accessibility

Each symbol now has its own page → better indexing and navigation.
Over 1,800 symbols are now available (up from under 200).
Metadata and accessibility have been improved.
Added a blog module (adapted from my portfolio site).

Design & UX Changes

Cleaner Layout: Minimal design, more spacing, and better visual hierarchy.
More Code Formats: Unicode, Alt Code, HTML Hex, HTML Dec, Binary (with usage examples). More coming soon.
Scalable Design: The layout supports adding new formats without clutter.

👉 On top of these big updates, there were many minor but meaningful tweaks: dark mode was changed from a dropdown to a toggle, the primary color was slightly adjusted, theme and wording polished, and small UI details refined. These might seem minor, but together they make the whole experience smoother.

The goal: make Glyph Catalog equally useful for developers, designers, and casual users.

What I Learned

Validation is everything → Without strict checks, bad data spreads fast.
Single source of truth → A central JSON file makes updates manageable.
Scalability requires early choices → Small structural fixes now save major headaches later.
Minimal design works best → Less clutter makes symbols easier to explore.
SEO matters → Dedicated pages and metadata significantly improve reach.
Audience is key → Features should be guided by real usage and demand.
Content is important → A blog isn’t just extra — it helps visibility and builds credibility.

What’s Next

Add support for more code formats and symbol metadata.
Introduce advanced search (intent-based, smarter results, character selection).
Improve accessibility guidelines.
Explore ways to make Glyph Catalog more community-driven.
Focus on growing traffic through blogs, SEO, and consistent improvements.
Optimize data handling → Currently, all symbols are stored in a single file, which causes noticeable load during opening, searching, and replacements (in local only). This needs to be restructured for smoother performance.

Final Thoughts

Refactoring wasn’t glamorous — it was a lot of rethinking and rewriting — but the result is a far more solid foundation for Glyph Catalog.

If you use it regularly, I’d love to hear what you think. And if you’re a developer, maybe this behind-the-scenes look gives you some ideas for your own projects.

👉 Try the updated Glyph Catalog and let me know your feedback!

What’s New in Glyph Catalog 🚀

Jithesh — Fri, 22 Aug 2025 16:53:52 +0000

Glyph Catalog has just received a major update to make exploring symbols easier, faster, and more organized. If you’ve been using it to look up Unicode, HTML codes, or other character references, here’s what’s new:

🔑 Key Updates

New Category Structure → Symbols are now neatly organized into major and minor categories, so finding what you need is much simpler.
Improved Search → Faster, more accurate search to quickly locate characters by code or description.
Expanded Symbol Data → Each symbol includes multiple code formats (Unicode, Alt Code, HTML Hex, HTML Dec), with more to come like binary.
Cleaner Design → Pages are easier to navigate with a more structured layout.
Scalability → Behind the scenes, the database has been restructured for smoother growth and future updates.

Why This Matters

Whether you’re a developer, designer, or just curious about symbols, Glyph Catalog is now more reliable for everyday lookups. From copy-pasting symbols into your work to learning their code points, this update makes the process seamless.

Try It Out

👉 Visit Glyph Catalog and explore the updated collection of characters.

I’d love to hear your feedback—feel free to reach out and let me know what features you’d like to see next!

CSS Battle #36 – Transform (July 2025) Challenge – Full Solutions with Code + Video

Jithesh — Mon, 04 Aug 2025 16:18:20 +0000

✍️ Introduction

I participated in the CSS Battle Monthly Challenge – July 2025, tackling all 8 challenges from Battle #36: Transform using clean, character-efficient HTML+CSS.

This post is a complete breakdown of my solutions, each paired with videos and direct links to the live challenges.

💡 Quick Note:
I finished at Rank #45 globally in this challenge.

🧾 What You'll Find Here:

🎥 Solution videos for each challenge
💡 Optimized HTML+CSS code snippets
🔗 Direct links to play challenges on CSSBattle.dev
📊 Match percentage and score for each challenge

📌 Table of Contents

#235 – Website
#236 – Concentrate
#237 – Round castle
#238 – Rising sun
#239 – Waves
#240 – Snapshot
#241 – Mint Typewriter
#242 – Orbital Tiles

CSS Battle #235 – Website

🎯 Play Challenge

📺 Watch Solution Video

🔢 Stats

Match: ✅ 100%
Score: 🟢 624.04
Characters: 295

💡 Code

<p><a><b>
<style>
*{
  background:#FDFFE9;
  +*{
    background:#ADB274;
    margin:20;
    *{
      position:fixed
    }
  }
}
p{
  padding:5+200;
  margin:30 0;
  color:FDFFE9;
  box-shadow:0 201q,95q 53q,95q 127q
}
a{
  padding:95+5;
  margin:0-120
}
b{
  padding:10;
  background:#555A2A;
  margin:105 85;
  color:555A2A;
  box-shadow:32q 0,-32q 0,-175q -244q,175q -244q
}
</style>

CSS Battle #236 – Concentrate

🎯 Play Challenge

📺 Watch Solution Video

🔢 Stats

Match: ✅ 100%
Score: 🟢 615.36
Characters: 342

💡 Code

<p><a><b><c>
<style>
*{
  background:#F8B140;
  *:not(c){
    border:32q solid;
    border-radius:50%;
    margin:45 95;
    color:CF6939;
    box-shadow:106q 0,-106q 0;
    *{
      position:fixed
    }
  }
}
p{
  padding:45;
  margin:0;
  color:2F434E
}
a,c{
  padding:15;
  margin:-45;
  color:F8B140
}
b{
  border:16q solid;
  margin:-15
}
c{
  padding:100+10;
  margin:-100 40;
  box-shadow:148q 0 0 42q;
  -webkit-box-reflect:left 80px
}
</style>

CSS Battle #237 - Round castle

🎯 Play Challenge

📺 Watch Solution Video

🔢 Stats

Match: ✅ 100%
Score: 🟢 640.23
Characters: 241

✅ Code

<p>
<style>
*{
  background:#3F4869;
  +*{
    background:linear-gradient(to left,#F4DA64 50%,#E25C57 0);
    margin:43 90;
    border-radius:2in 2in 0 0
  }
}
  p{
    position:fixed;
    padding:44+19.5;
    margin:174 90.5;
    box-shadow:-83px -56px 0 8px#F4DA64,83px -56px 0 8px#E25C57
  }
</style>

CSS Battle #238 - Rising sun

🎯 Play Challenge

📺 Watch Solution Video

🔢 Stats

Match: ✅ 100%
Score: 🟢 634.54
Characters: 257

✅ Code

<p><a><b>
<style>
*{
  background:#FEFF58;
  +*{
    background:#D2F8FF;
    margin:40 50;
    border:11q solid;
    *{
      position:fixed
    }
  }
}
  P{
    padding:70+140;
    background:#CF6939;
    margin:60 0;
    border-radius:2in 2in 0 0
  }
  a,b{
    background:#000;
    padding:100+5;
    margin:-130-5
  }
  b{
    padding:5+140;
    margin:-5-140
  }
</style>

CSS Battle #239 - Waves

🎯 Play Challenge

📺 Watch Solution Video

🔢 Stats

Match: ✅ 100%
Score: 🟢 632.93
Characters: 262

✅ Code

<p><a><b><c>
<style>
*{
  background:#CEEDFF;
  position:fixed;
  color:48BF7D
}
  p,a,b{
    padding:50+120;
    margin:162-3;
    border-style:solid;
    border-width:0 0 30 30;
    border-radius:0 0 0 2in
  }
  a,b{
    margin:-50-20
  }
  c{
    border:16q solid;
    margin:-65-410;
    border-radius:50%;
    box-shadow:138q 0,275q 0
  }
</style>

CSS Battle #240 - Snapshot

🎯 Play Challenge

📺 Watch Solution Video

🔢 Stats

Match: ✅ 100%
Score: 🟢 622.92
Characters: 300

✅ Code

<p><a>
<style>
*{
  background:#558C90;
  +*{
    background:#325853;
    margin:50 110;
    border-radius:42q;
    *{
      position:fixed;
      -webkit-box-reflect:left 22q
    }
  }
}
  p{
    padding:10;
    margin:90 100;
    color:325853;
    box-shadow:0 21q,0-21q,11q -21q 0 11q#F4DA64,11q 21q 0 11q#F4DA64,53q 0 0 11q#558C90
  }
  a{
    padding:10+60;
    margin:60-80;
    rotate:90deg
  }
</style>

CSS Battle #241 - Mint Typewriter

🎯 Play Challenge

📺 Watch Solution Video

🔢 Stats

Match: ✅ 100%
Score: 🟢 626.96
Characters: 283

✅ Code

<p><a><b>
<style>
*{
  background:#3D3824;
  position:fixed;
  border-radius:11q
}
  p{
    background:#F7FFCF;
    padding:55+140;
    margin:117 52
  }
  a{
    margin:-95-120;
    padding:55+120;
    background:linear-gradient(#F7FFCF 36%,#86C78D 0)
  }
  b{
    padding:20+100;
    margin:-75-100;
    background:linear-gradient(#86C78D 50%,#3D3824 0)
  }
</style>

CSS Battle #242 - Orbital Tiles

🎯 Play Challenge

📺 Watch Solution Video

🔢 Stats

Match: ✅ 99.9%
Score: 🟢 597.67
Characters: 266

✅ Code

<p>
<style>
*{
  background:#FDFFE9;
  +*{
    margin:75 125;
    border-radius:50%;
    color:2D3464;
    box-shadow:-159q 0,0 159q,159q 0,0-159q,-159q -159q#D95362,-159q 159q#D95362,159q 159q#D95362,159q -159q#D95362;
    *{
      padding:75;
      background:#D95362;
      outline:22q solid#FDFFE9;
      outline-offset:59q
    }
  }
}
</style>

🙌 Support & Subscribe

If you found this post helpful:

🔔 Subscribe on YouTube for more CSS Battle content
💬 Share your feedback or questions in the comments
💡 Try tweaking my solutions and let me know your improvements!

You can also connect with me on LinkedIn, GitHub, or Twitter.

From <15 WPM to 100 WPM @ 100% Accuracy — A Year of Typing Discipline

Jithesh — Sat, 02 Aug 2025 17:25:24 +0000

In August 2024, I started touch typing from scratch — just lowercase alphabets on Keybr, struggling at <15 WPM.

Back then, I set a quiet goal:

🎯 Hit 100% accuracy on a typing test within one year.

It felt ambitious. But yesterday — just before hitting the one-year mark — I did it:

💯 100 WPM @ 100% accuracy (10-word MonkeyType test)
📆 48-day streak
⌨️ 9,712 tests completed
🕒 18+ hours of focused typing

🔗 My MonkeyType Profile

🧱 The Foundation: Keybr

I started with 52 hours on Keybr to build the fundamentals:

Top Speed: 59.9 WPM
Avg Speed: 36.3 WPM
Avg Accuracy: 95.22%

Staying focused on accuracy over speed helped me develop the right muscle memory early on.

Then came MonkeyType — XP, leaderboards, and test variety kept things engaging and pushed consistency.

🙏 A Simple Push from My Brother

This journey began with one comment from my brother:

“15 WPM might hold you back, especially in interviews.”

Just an honest nudge. That quiet spark lit the fire. The rest was just showing up daily.

🧭 What’s Next?

This milestone isn’t the end — just a checkpoint.

Now I’m focusing on:

Practicing with caps, numbers, and symbols
Typing without looking, even outside of tests
Bringing touch typing into real workflows

💡 What This Taught Me

Progress is boring — until it isn’t
Accuracy builds confidence; confidence unlocks speed
Discipline > motivation, every time

It’s not about typing alone — it’s about deliberate practice, compounding effort, and quiet consistency.

📣 Your Turn

If you're showing up every day — whether it’s typing, coding, designing, or any small habit — you’re on the right path.

Celebrate it. Share it.

Let’s normalize work in progress.

🧠 What are you quietly building every day?

🎓 From Work Life to MCA — Why I Chose to Return to Learning

Jithesh — Mon, 30 Jun 2025 05:28:11 +0000

🧭 When I first stepped into the professional world, I was filled with curiosity and ambition — eager to work, learn, and grow.

While the role I joined didn’t match the initial expectations in terms of coding or development, it offered something just as powerful: real-world exposure to how things actually work.

✅ Key Learnings from the Journey

🏢 Corporate Operations & Culture

Gained insight into how various processes — from requirement analysis and development to QA, documentation, delivery, dispatch, and handling of Change Requests (CRs) — come together to complete and maintain the product lifecycle
Learned to work with multiple sub-products under a single deliverable, ensuring smooth coordination even as new logic, documents, or changes were introduced during development
Discovered the true value of Excel in daily workflows — from simple representations to reporting and tracking
Understood how work flows across teams, how responsibilities are assigned, and why it’s essential to define ownership clearly
Saw firsthand how client requirements are translated into production-ready deliverables

🧠 Communication, Tools & Smart Work

Learned that networking and strong connections often make work smoother and more efficient
Recognized that automation matters — and that sometimes building internal tools to make your job easier is more impactful than seeking external validation
Saw that real contribution comes from thinking through the entire lifecycle of a task — understanding who manages it, who executes it, and how it can scale
Developed a strong appreciation for clear communication, well-written emails, and detailed documentation
Understood the importance of Standard Operating Procedures (SOPs) for process consistency and clarity

🧩 Soft Skills & Personal Growth

Realized how important healthy boundaries are — no overworking, no staying late without reason
Learned that mental and physical health come first, and how to protect them in high-pressure environments
Understood the difference between taking initiative and being loaded with responsibilities outside your scope
Gained awareness of team dynamics, internal politics, and how to communicate thoughtfully
Became familiar with different employment structures — from FTC and contract roles to permanent positions

🎓 Why I Chose to Pursue MCA

While I hadn’t planned for higher studies originally, my time in the field made it clear:

👉 There’s still so much more to learn.

Whether it’s about software architecture, scalable systems, or technical leadership — I want to build the skills that allow me not just to do the work, but to improve how it’s done.

That clarity led me to pursue a Master of Computer Applications (MCA).

🤝 Final Thoughts

Not every job teaches you what you expect — some teach you what truly matters.

Grateful to the colleagues who helped me grow, the messy workflows that sharpened my thinking, and the path that reminded me that learning never ends.

On to the next chapter: MCA and beyond. 🚀

Have you ever made a leap because of what a job didn’t offer? Sometimes that’s what pushes us in the right direction.

🎨 UI Polish & SEO Boost for My Friend’s Website — A Collaborative Refresh

Jithesh — Sun, 29 Jun 2025 05:12:12 +0000

🚀 Just wrapped up a UI and SEO revamp for a clean, functional website originally built by my friend Mayura Patkar — shreshtsystems.com.

He had created the initial site with great structure and purpose. I stepped in to elevate the experience further using modern frontend best practices.

✅ What I Contributed

🎨 UI / UX Enhancements

Improved spacing, alignment, and overall layout consistency
Made oversized images responsive and optimized for performance
Enriched content in various sections like Services, Features, and Appliances

🗂️ Project Page Revamp

Previously, the Projects page had no actual content
I added detailed project cards with:
- ✅ Titles and descriptions
- 🖼️ Images
- 📍 Locations with working map links

🔍 SEO & Structural Improvements

Added sitemap.xml for search engine indexing
Created robots.txt to guide search engine bots
Refined heading hierarchy and image alt text for accessibility and better crawlability

🤝 Collaboration Outcome

Both pull requests were merged, and all changes are now live on the production site.

Big shoutout to Mayura for being open to improvements and merging the updates smoothly.

🔗 Check it out

👉 shreshtsystems.com

🧩 Stack Used

HTML + Tailwind CSS
GitHub PR workflow
SEO fundamentals (sitemap, robots.txt, metadata, semantic tags)

Sometimes a fresh set of eyes and a little polish can take a good website to the next level.

It was a fulfilling collaboration that mixed both design discipline and technical SEO awareness.

Have you ever revisited an old project or contributed to a friend’s site? It’s incredibly rewarding to leave things better than you found them. 🙌

🔡From Clumsy Keys to Confident Streaks — My Touch Typing Journey

Jithesh — Thu, 24 Apr 2025 16:51:57 +0000

📎 Check out my Keybr profile: here

On August 22, 2024, I began a challenge to teach myself touch typing—typing without looking at the keyboard.

I started with just lowercase alphabets, using Keybr to build muscle memory from the ground up.

I chose Keybr because of its intelligent progression system—it introduces new characters only after you've consistently mastered the current ones. That structure helped me focus on accuracy first, and let speed follow.

📉 My starting point:

Speed: <15 WPM
Accuracy: <50%

⏩ After just over 52 hours of practice:

⏱️ Time Spent: 52:02:27
🧠 Lessons Completed: 4,622
🚀 Top Speed: 59.9 WPM
📊 Average Speed: 36.3 WPM
✅ Top Accuracy: 100%
📈 Average Accuracy: 95.22%

✨ Today’s Session:

Time: 31 minutes
Avg Speed: 43.8 WPM
Avg Accuracy: 96.04%
Top Speed: 59.9 WPM

Now, I’m transitioning to MonkeyType—not just to level up my skillset, but also to keep myself motivated with:

🔁 XP system – to track consistent progress

🏆 Leaderboards – for that extra push to improve

🛠️ More practice modes – to sharpen both speed and accuracy

⚙️ Advanced settings – to personalize the experience as I grow

I haven’t yet started training on capital letters, numbers, or special characters, but that’s next on the horizon.

Still deciding whether to stick with MonkeyType or revisit Keybr for those. Either way, the path forward is clear.

💡 What I’ve learned:

Progress is slow at first, but it compounds
Accuracy builds confidence, and confidence builds speed
Discipline > motivation

This may seem like a niche skill, but it's been a great reminder that practice really can make anything possible.

🧠 What skill are you working on quietly every day?

Let’s normalize showing up consistently and being proud of the process.

DEV Community: Jithesh

From Box Shadows to Dashed Borders: How I Hit 63 Characters on CSSBattle's Daily Target 🎯

The Journey to 63 Characters

Attempt 1 — The Brute Force (box-shadow era)

Attempt 2 — Switching to Dashed Border

Attempt 3 — Collapsing Both Into One Rule

Attempt 4 — The "Wait, Do I Even Need That?" Moment

What I Actually Learned

Should You Try CSSBattle?

Final Thought

Building a Process Scheduling Simulator: Relearning TypeScript and Reducing AI Dependence

The Reality Check

Finding the Right Balance with AI

What I Built

Tech Stack and Architecture

The Decision Not to Over Abstract

Type Safety

What I Actually Learned

Try It

Climbing the Ranks: My CSSBattle #37 Journey 🏁

From #45 → #22: What Changed

The Code Golf Mindset

What I Learned

My Solutions

Looking Ahead

Final Thoughts

Glyph Catalog Launches on Product Hunt 🚀

🧩 What GlyphCatalog Is About

🎯 Why Launch on Product Hunt

💬 How You Can Help

🔮 What Comes Next

❤️ A Note from Me

Building DreamSpace: A Modern Interior Design Website 🏠

🎯 The Idea Behind DreamSpace

🧩 Features We Built

🎨 Design Language

💻 Tech Stack

⚙️ Challenges & What I Learned

🧠 1. Fixing FOUT (Flash of Unstyled Text)

⚙️ 2. Understanding defer in External Scripts

🎨 3. Building a Theming System with CSS Variables

🤝 4. Merging Code and Maintaining Consistency

🌗 Dark/Light Theme

🤖 AI as a Design & Development Assistant

🧑‍💻 My Key Takeaways

🔗 Explore the Project

👥 Team Members

📜 License

🪶 Final Thoughts

Behind the Scenes: Refactoring Glyph Catalog 🛠️

The Problems With the Old Setup

The Refactoring Journey

1. Data Validation

2. Route Structure

3. Database Restructure

4. Search Improvements

5. SEO & Accessibility

Design & UX Changes

What I Learned

What’s Next

Final Thoughts

What’s New in Glyph Catalog 🚀

🔑 Key Updates

Why This Matters

Try It Out

CSS Battle #36 – Transform (July 2025) Challenge – Full Solutions with Code + Video

✍️ Introduction

🧾 What You'll Find Here:

📌 Table of Contents

CSS Battle #235 – Website

🔢 Stats

💡 Code

CSS Battle #236 – Concentrate

🔢 Stats

💡 Code

CSS Battle #237 - Round castle

🔢 Stats

✅ Code

CSS Battle #238 - Rising sun

🔢 Stats

⚙️ 2. Understanding `defer` in External Scripts