DEV Community: Himanshu

Tangible India - A journey through numbers

Himanshu — Sun, 28 Sep 2025 22:21:33 +0000

This is a submission for the KendoReact Free Components Challenge.

What I Built

I built Tangible India – A journey through numbers, an interactive web app that blends facts about India with numbers in a fun and engaging way.

The idea is simple yet impactful:

Numbers (0, 1, 2, 3, 1947, …) are the foundation of computer science and daily life.
For each number, the app presents a fascinating fact related to India — ranging from history, culture, geography, science, to modern-day achievements.
As an additional category, memes have been added as categories since a lot of the knowledge movement and news is propagated through such measures.

This turns abstract digits into tangible insights, helping users learn something new about India while exploring numbers sequentially or randomly.

It’s a learning + curiosity app designed for students, educators, trivia lovers, and anyone interested in India.

Demo

🔗 Live Project: https://himanshuc3.github.io/tangible-india/

💻 Source Code: Tangible India - repository

Screenshots:

Title/Remarks	Screenshot
Homepage (light theme)
Homepage (dark theme)
Icons & tabbed navigation

KendoReact Components Used

I leveraged KendoReact's components as atomic components for creating the layout for Tangible India from scratch. The usage was restricted to the following components due to a lack of

Button – Used across the whole website for actions of triggering search, random fact generation etc.
SVG Icons (plusOutlineIcon, minusOutlineIcon, etc.) – The icon set offers a wide selection of custom icons along with the flexibilty to modify style according to the theme. Used in conjunction with buttons for accessibility and improving UX
Card — This acts as a fundamental building block or a Poster in layman terms, for showing the Facts linked to each number.
Input – Used for getting user input for searching/filtering through available list of facts.
Default Theme – Used for importing the base theme used as design system and styles for each of the imported components.
TabStrip, TabStripTab - Useful for displaying multiple facts across linked to the same number.
AppBar, AppBarSection, AppBarSpacer – The header used in the website is using this component as a building block for layout.
Popover – Showing keyboard shortcuts via popover
Slider, SliderLabel – The slider is a critical component giving a bird's eye view of the progression of number based facts.
Tooltip – Used in defining unknown behavior, like "Want to contribute?" button in header
ChipList, Chip - Categories displayed like "historical", "cultural" etc. are leveraging Chips and Chiplist
Switch - Used as a theme toggle switch

AI Coding Assistant Usage

I used an AI assistant to:

Suggest initial draft UI layouts to help avoid referencing API and start from 20-30% setup instead of 0%.
- Generating the header using AppBar.
- The code for generating Slider for showing number progression.
Exploration for best component fit for the UI and UX required.
- Describing the UX for: functionality to select among different categories and getting relevant components present under the free tier of KendoReact and going ahead with ChipList.

Challenges Faced using the AI Assistant

While KendoReact AI Assistant (MCP server) does help in a couple of scenarios described above, it still feels in a nascent stage with retaining and differentiating between contexts. As an example, consider the following progression of events:

Creating Header using AppBar component with relevant context for the features and how the UX should look like.
Improving a Search button component in Filter Component with an appropriate icon.
Add a tabbed navigation to facts card for multiple facts linked to the same number. MCP hallucination — While all of these prompts are given as different chats and make modifications to different components, the code suggested by the Coding Assistant merges all of them to outputs a single component which is an aggregation of all the previous request outputs + the most recent code suggestion.

Components like Animation don't work very intuitively and infact, I skipped using it since the API is consuming and using it out of the box with the help of examples wasn't working.

✨ With Tangible India, I wanted to show how numbers can tell stories — and how React + KendoReact makes it easy to turn that vision into reality.

Guide to svelte state for react dummies

Himanshu — Mon, 07 Jul 2025 16:27:50 +0000

Are you a legacy React developer?

Have you heard of the chronicles of a once-mystical creature 👾 known as class based components in React?

After spending so long exclusively in the React ecosystem — with only brief forays into Vue.js and Angular — I almost feel confined, as if under house arrest. It's as if React has become a pandemic and developers its captive patients. Attempting to leave this ecosystem — which has admittedly served me well in terms of developer satisfaction and community standards reminiscent of Golang — feels like swimming against the current of global popularity trends.

Wait, let's pause for a moment… we're drifting from the topic. This isn't an angry rant about why you should abandon React and sail off to svelte land—I'll save those opinions for another day. While I'm not a svelte advocate (having barely dipped my toes in it), there is some evidence in svelte's blog and a single Hacker News thread about the modest runtime performance benefits of svelte over React —though a 95% decrease in bundle size is nothing to laugh at.

The purpose of this article is to provide an exhaustive guide on the dos, don'ts, and gotchas of local component-level state management in svelte. I was recently influenced by the yellow house — while the column explores Van Gogh's artwork and its psychological implications — my takeaways from it gave me the notion (also, the editor of choice for writing this article) that drawing parallels from our experiences is the most effective way of learning and moving forward.

Defining the scope

As much as I'd like to cover the intricacies of event handling, idiomatic design patterns, and dive into the internals of svelte, these topics are already well-documented in svelte's docs for those willing to take a deep dive. Instead, we'll focus our exploration on answering these key questions:

How does state management work 💪 and what are runes?
❓ How does reactivity work?
What causes dependencies of state to update?
🪝 How to make custom react-like hooks in svelte?

Let's get started 🚀

Let’s Rune your day

Runes constitute the primary tools for state management in svelte. To quote from the official svelte docs:

If you think of svelte as a language, runes are part of the syntax — they are keywords.

Our exploration will be limited to the following set of runes: $state, $derived and $effect. Starting with a snippet of code, we have the same functionality implemented in svelte and React. The annotations highlight the 1:1 mapping between syntax in the two libraries (Even though svelte is a framework, we’ll refer to it as a library for the purposes of this article).

We’ll break down the code piece by piece to highlight the key differences and potential gotchas, so you’re not caught off guard at work.

Runes were introduced in v5 — the latest major version at the time of writing this article. All
state can be safely migrated to use runes, with the added benefit of improved performance. The
official migration guide is available here.

State reactivity using proxies

In Fig. 1, we declare and initialize a local store using $state(0). Under the hood, svelte sets up a proxy to enable reactivity. In simple terms, proxy intercepts any read or write operations on the state object. The state is consumed in a way that feels similar to React, although updating state in svelte often requires a slight mental shift to get used to.

In svelte, state is mutable, irrespective of it's value being a primitive or an object. This is demonstrated in Fig. 1 (Point 3) using upvotes++. This mutation updates the state and triggers a UI re-render in the next animation frame — similar to React’s setState(upvotes + 1).

Sweet! Let’s move on to other syntax features.

Deprecating `$:` in favor of `$derived` & `$effect`

In svelte, any variables or functions defined outside of runes are declared and run exactly once when the component is initialized.

const upvotes = $state({
  count: 0,
  completed: false,
});
let derivedDoubled = $derived(upvotes.count * 2);
let doubled = upvotes.count;

$effect(() => {
  let timeout = setInterval(() => {
    console.log(upvotes.count);
  });
  return () => clearInterval(timeout);
});

There are a few points to note from the snippet:

$effect — acts as a drop-in replacement for useEffect, with runtime fine-grained dependency tracking.
derivedDoubled uses $derived — it automatically updates based on variables referenced in the expression upvotes.count * 2. According to the svelte docs, it updates synchronously using push-pull reactivity, ensuring that any function accessing derived state receives consistent values in sync with its dependencies.
doubled — remains unchanged when upvotes.count updates, behaving similarly to React’s useRef.

ℹ️ Use derived.by(fn) for more complex
logic instead of the shorthand derived(expression).

Reactivity is fine-grained

const upvotes = $state({
    count: 0,
    completed: false
})

$effect(() => {
    console.log(upvotes.completed ? `Voting has completed`: 'Voting not completed')
})

<button onclick={() => upvotes.count++}>
  clicks: {upvotes.count}
</button>

In the example above, we’ve modified the upvotes $state from number to object . To follow :

We’re incrementing the count property.
Using $effect to log whether the voting has completed — similar to useEffect in react.

Since only upvotes.completed is consumed in the $effect block, it is not executed if upvotes.count is updated. This check is dynamically done at runtime, similar to useEffect. This is called key level granularity.

useEffect(() => {
  console.log(upvotes.completed ? `Voting has completed` : 'Voting not completed');
}, [upvotes.completed]);

Key Takeaways:

$effect observes the reactive signals ($state, $derived, etc.) while executing its expression. That means dependencies are dynamically detected during the function call—not inferred during build.
Prevent unncessary re-renders — The child components consuming upvotes.completed will not be re-rendered due to shallow comparison of props.

React offers better visibility into reactive statement while svelte works for the user with
cleaner syntax and implicitly takes care of the dependencies.

ℹ️ Svelte optimizes away redundant assignments such as upvotes.count = upvotes.count or
upvotes.count += 0 will invalidate state updates.

Synchronous state updates

Task — We want to execute fetchCountLogs immediately on update of upvotes.counts . In React, we couldn’t directly use the next state due to asynchronous updates. Therefore, we are bound to create a new variable called newUpvotes which needs to be referenced everywhere if we were to use the updated value of upvotes.count.

svelte takes a different approach, decoupling state updates from batched DOM re-renders. This allows fetchCountLogs to run immediately after incrementing the value of upvotes.count , consuming the latest value of the state.

Overriding immutable reactivity in `$derived`

Coming to the fourth point mentioned in Fig. 1, derived state is rarely mutated manually and therefore declared as a const in 99% of usecases. A rare case, mentioned in svelte docs, displays the case of optimistic UI updates, where we want to override $derived manually, hence declaring it as let.

While it helps make the website feel snappy, it should be used in rare instances and in features which aren’t critical to write failures. For Example, liking a video on youtube can have optimistic updates, since the count is an estimate to begin with while commenting on the post could only be shown as sent when the server request is marked completed.

An alternative to custom `react-like` hooks

By now, we already have all the tools required for creating custom hooks using runes. It’s a straightforward vanilla solution with an uncanny resemblance to react hooks syntax. I’ve implemented a usePrevious hook which tracks the previous value of the state variable using runes.

Working version for the above example is present here. There’s a bunch of commonly used hooks implemented on this website in both javascript & typescript . Happy hunting :)

It is worth noticing that runes can only be used in files with extension svelte.{(ts, js)} .

What lies ahead?

Despite having discussed exhaustively about the properties of component state management and reactivity, there’s certain topics necessary to make your life easier working with svelte:

Managing global state using svelte stores (next part in the series, hopefully)
Updating parent state from child components leveraging $props & $bindable
Bypassing deep reactivity using $state.raw & $state.snapshot
Handling direct DOM mutations based on state updates using tick
Resetting component and it’s state using key blocks

I hope this article helped you understand the basics of runes and state management—and instilled some confidence to support your journey toward becoming a svelte wizard.

Feel free to comment on what you liked, disliked or hated. Or reach out directly on Twitter.

Footnotes

Vladimir Klepov Highly recommend his deep dive into svelte reactivity
Svelte Docs to get lost in the rabit hole of the framework
MDN Docs It's more than just documentation
XKCD Comics While Empericism was more apt for the article, one of my favorites is a take on the fragile nature of proprietary projects
Shymanta D, Dyutimitra S. The Yellow House is one of numerous psychological case studies, distinguished by its clean and concise presentation
UseRunes - Explore custom hooks

💸 Anti-Salesman - My personal Smart Purchase Advisor & Deal Forecaster

Himanshu — Tue, 24 Jun 2025 20:03:38 +0000

This is a submission for the Runner H "AI Agent Prompting" Challenge

What I Built

An autonomous AI agent that helps users plan smart purchases for any product by:

🧐 Researching historical pricing trends
🏷️ Identifying upcoming sales
🤑 Estimating price drop forecasts and potential savings
⏳ Suggesting the best time to buy
👉 Recommend relevant alternatives for the product enquired about

Demo

Video Demo

https://drive.google.com/file/d/1qzpWBunXu7eqQ2O0JvRGaPVpm86lYUEC/view?usp=sharing

Runner-H Prompt

Screenshots

Title/Description	Screenshot
Sample Prompt
Document created in Runner-H
Output generated with Google Docs integration
Mail integration used to recieve the generated Google Docs

Prompt generation

The below prompt is slightly different than the one used in the video. It is improved, more detailed and gives better results compared to the one used for recording the video.

I’m considering buying Iphone 15 [product to buy] and want to make a financially smart decision. Your role is to act as my Smart Purchase Advisor. I live in India [location for context]. Here’s what I want you to do step-by-step for any product I give you (either by name or link):

🔍 1. Research Current Prices
Search for the product across major Indian e-commerce platforms (Amazon, Flipkart, Croma, Reliance Digital, etc.) and return:
- Product name
- Platform
- Current selling price
- Link to listing
- Seller name (if available)
Present this data in a clean table or list.

📈 2. Analyze Historical Price Trends
- Use public sources like Keepa (Amazon), price tracker APIs, or summaries from past sales to answer:
- What was the lowest recorded price in the past 6–12 months?
- How much did it drop during past major sales (e.g., Diwali, Amazon Great Indian Festival, Prime Day)?
- What has been the average price fluctuation in recent months?
- Include clear pricing insights (e.g., “Price usually drops by 12–18% during Diwali sales.”).

📅 3. Detect Upcoming Sales
- Based on the product category and current month, identify the next relevant sales or discounts.
- For India, focus on: Amazon/Flipkart sales (e.g., Big Billion Days, Prime Day, Independence Day)
- Festival discounts (Diwali, Raksha Bandhan, Republic Day)
- Global deals (Black Friday, Cyber Monday, if international delivery is relevant)
- Mention: Sale Name, Approximate Dates, Product types typically discounted in that sale

💸 4. Forecast Expected Price & Recommend
- Based on the price trend and upcoming sales:
- Predict a likely sale price during the next event
- Estimate how much I could save
- Make a recommendation: “Buy Now”, “Wait for [Sale Name]”, or “No major discounts expected, safe to buy now.”

Provide a one-line summary like:
“Waiting 3 weeks for the Diwali sale could save you ₹4,500 (~15%) on this product.”

📤 5. Export Results to Google Sheet
Update the following columns in a sheet titled Smart Purchase Tracker (create it if not already present):
- Product Name
- Platform
- Current Price
- Estimated Sale Price
- Savings Amount
- Best Time to Buy
- Recommendation

📧 6. Send Me a Summary
Send a short summary (3–4 bullet points + recommendation) via email or Slack, formatted like:

How I Used Runner H

Use Case & Impact

The Smart Purchase Advisor & Deal Forecaster addresses a common pain point for millions of online shoppers — not knowing the best time to buy a product and often missing out on significant discounts during major sales.

👤 Who Benefits:

Everyday consumers who want to save money while shopping online.
Students and budget-conscious buyers who carefully time purchases (e.g., laptops, smartphones, books).
Deal hunters and e-commerce enthusiasts who track prices across multiple platforms.
Personal finance advocates who encourage mindful spending.

💡 Real-World Applications:

Tracks historical pricing patterns using data sources like Keepa or CamelCamelCamel.
Identifies region-specific sale events (like Diwali, Black Friday, Prime Day, etc.).
Forecasts potential savings and makes a clear “Buy Now or Wait” recommendation.
Sends updates via Slack or email and maintains a log in Google Sheets for multi-product tracking.

🚀 Impact:

Saves users time by automating comparison shopping and research.
Increases purchase confidence with data-backed forecasts.
Reduces impulse buying by encouraging smarter, strategic purchases.
Adds financial literacy by showing price trends and historical savings patterns.

Instead of manually checking 3+ sites and waiting for unpredictable discounts, users can now rely on an autonomous agent to handle all the research and notify them exactly when to act — making online shopping both smarter and stress-free.

Social Love

Save your money by visiting my AI agent workflow powered by Runner-H: https://t.co/CEu5w7qRPf
P.S. Don't be shy sharing your opinions, improvements and potential savings on and from the workflow 😉 pic.twitter.com/E4hTZoHohD
— Himanshu (@_himanshuc3) June 24, 2025

Switch over to X and see what folks are creating using Runner-H
Want to collaborate? Visit my portfolio

🌲 Git better at ignore-ing

Himanshu — Sun, 08 Jun 2025 19:36:39 +0000

Let’s consider a relatable (albeit slightly exaggerated) scenario.
It’s been a long, chaotic day—packed with code reviews, endless brainstorming sessions, and a CI pipeline that seems determined to sabotage your simple one-line bug fix for an entire week. If only this were fiction.

Amidst the madness, you finally get a notification—someone reviewed your PR. But to your dismay, it’s just one comment. And not even a meaningful one. It’s about a rogue change in a shared config file—env, config.js, playwright.config.js, or the dreaded package.json—one of those files that sneaked into your commit unnoticed.

🥁 Enters update-index

The git update-index command updates the index - staging area - entries for one or more files. In simpler terms, it helps you git ignore files valid only to your local index - unlike .gitignore, which ignores files for every user commiting to that repo.

🧠 What this does:

🛑 Git stops tracking changes to package.json (locally).
⏳ You can still pull updates from the repo without needing to stash your changes.
🙌 Your local changes won’t show up in git status, and you won’t accidentally commit them.
🛟 Persists across branch changes on your local.

There’s an alternative flag called --assume-unchanged which achieves a similar function, they defer slightly in how they work in git internals.

While in 90% of your use cases, you’ll make do with skip-worktree, here’s a general brief of they differ:

Flag	Purpose
`--assume-unchanged`	Hint to Git: "I won’t change this file"
`--skip-worktree`	Directive to Git: "Ignore my local edits"

📝 Note. If the file shouldn’t be tracked at all (for everyone), use .gitignore instead.

⚡️ MEAN vs MERN

Himanshu — Thu, 31 May 2018 07:54:31 +0000

I think the graphic should have been the other way around 😜, as facebook has been busting google's open source community thrive since it has wanted to try its hand at OSS. Couldn't find one on giphy 👀, happy to have suggestions in comments.

The infamous topic

This escalated quickly. See what I did there.

MERN / MEAN = R / A.

So, it all boils down to the number of people using React/angular or wanting to learn React/Angular.

Note: For In-depth comparison: Angular-React faceoff

Please give a ♥️ and a 🦄 to Livetable

if you like this post. And hopefully you could have a unicorn one day ( I'm skeptical about it. Like I'm skeptical about deadpool ever making it into a X-men movie. But I'm hopeful. And so should you be)

Showdown

React is on the rise but angular has stuck around and proven its worth. Both are fantastic as everyone would expect coming from top tech industries. Both have technical advantages over each other. React though having easier learning curve than angular. Both have jobs in industry. So, coming to the end of this useless post, I think it should be the users of this tech and future front-end entusiasts who decide the fate of who's gonna be more popular.

You guys can vote right on this post with a ♥️ for this post suggesting you favor React and a 🦄 suggesting Angular is the way to go.

Leave your comments down below for some explanation for whomsoever you are supporting. I would love to hear them out as much as would be the people confused in choosing between them.

Livetable

Himanshu — Tue, 15 May 2018 07:28:41 +0000

What I built

This is a common room timetable building PWA in which people who have common problems to solve can decide how to allocate time synchronously. For example, suppose a tuition group have a group of students with different schedules trying to set the optimal time to take their common tuition classes. They can go to this app, make there own room and then arrange their timetable. I intend to build a ton of more features in it but right now due to end term exams I'm afraid this is my entry.

Demo Link

Project is deployed on heroku: https://mysterious-beach-92009.herokuapp.com/

Note: Features like responsive design, UI design, loading animations, custom features related to timetable manipulation have not been added till now.

Link to Code

himanshuc3 / LiveTable

Realtime Timetable scheduling. Could be used by freelancers :)

LiveTable

Realtime Timetable scheduling. Could be used by freelancers.

Deployed on: https://mysterious-beach-92009.herokuapp.com/

How to Contribute

Fork and Clone the project.
Install the dependencies. There are 2 package.json files - 1 for node/express server and 1 for react app. npm i in root folder. Then cd into client and again npm i packages.
Run npm run dev on cmd to run express server and react server concurrently - proxy implied.

NOTE: react server runs on localhost:3000 and express server runs on http://localhost:5000.

Tech Stack

React, Express.

Redux, cors, redux-thunk etc.

View on GitHub

Note: Ton of refactoring left to be done!!!

How I built it (what's the stack? did I run into issues or discover something new along the way?)

MERN Stack:

Front End - React
Front End libraries - moment, cleave.js, nuka carousel, rodal, react-timetable-events
Back End - Node, Express
Realtime Communication achieved through - pusher😍

Note: Mongo not integrated right now as right now its a demo app and I didn't have much time too. But surely OAuth will come into play and so will mongo.

Issues I came across:

Setting up MERN stack: I've worked with React and Express before. But not combined. Managing two different servers, 1 for react and 1 for Express was a little tricky and challenging at the started, but I conquered it. Thanks to this challenge for that.
Research: I first tried building my own scheduler. Failed. Tried another one quickly. Failed. And 3 more tries later found the correct library. Lesson: Research saves a ton of time.
Pusher: It was really hard..... Nah, I was kidding. Pusher integrated smoothly. Hardly wrote 5-6 lines for integration.

Additional Resources/Info

Additional Resources:

Found the website undraw.co during development. There were some pretty sweet illustrations there.
Bootstrapping an idea is easier than I thought. Some hickups, but I take them with both hands open.

DEV Community: Himanshu

Tangible India - A journey through numbers

What I Built

Demo

KendoReact Components Used

AI Coding Assistant Usage

Challenges Faced using the AI Assistant

Guide to svelte state for react dummies

Defining the scope

Let’s Rune your day

State reactivity using proxies

Deprecating $: in favor of $derived & $effect

Reactivity is fine-grained

Synchronous state updates

Overriding immutable reactivity in $derived

An alternative to custom react-like hooks

What lies ahead?

Footnotes

💸 Anti-Salesman - My personal Smart Purchase Advisor & Deal Forecaster

What I Built

Demo

Video Demo

Screenshots

Prompt generation

How I Used Runner H

Use Case & Impact

👤 Who Benefits:

💡 Real-World Applications:

🚀 Impact:

Social Love

🌲 Git better at ignore-ing

🥁 Enters update-index

⚡️ MEAN vs MERN

The infamous topic

Please give a ♥️ and a 🦄 to Livetable

Showdown

Livetable

What I built

Demo Link

Link to Code

himanshuc3 / LiveTable

Realtime Timetable scheduling. Could be used by freelancers :)

LiveTable

Realtime Timetable scheduling. Could be used by freelancers.

Deployed on: https://mysterious-beach-92009.herokuapp.com/

How to Contribute

Tech Stack

React, Express.

Redux, cors, redux-thunk etc.

How I built it (what's the stack? did I run into issues or discover something new along the way?)

Issues I came across:

Additional Resources/Info

Deprecating `$:` in favor of `$derived` & `$effect`

Overriding immutable reactivity in `$derived`

An alternative to custom `react-like` hooks