DEV Community: Sourav Yadav

Day 05 - Rewriting my Blog in Svelte + Stuck in adding Images

Sourav Yadav — Wed, 04 Jun 2025 10:17:07 +0000

Hey devs! 👋

Today was about rewriting parts of my original HTML blog using Svelte and trying to build a simple CLI to convert Markdown to HTML — ran into a few snags but learned a lot.

🎯 What's my Goal today?

Start rewriting my blog using Svelte.
Make reusable components like Navbar, ContentBox, Header, and Footer.
Build a basic Markdown-to-HTML CLI tool in JavaScript.

🧩 Problems I Faced

Got stuck trying to add images when converting markdown. For some reason, the paths break and they don’t show up in the generated HTML. Still need to debug that.
Routing in Svelte only works with use:link. If I directly go to /post/day05, it gives a 404. Guess I need to configure the dev server or use hash routing properly.

💡 What I Learned

Using <slot /> and reusable Svelte components makes everything cleaner and modular.
Started building a small CLI in Node.js to turn .md files into HTML pages — super handy for my blog posts.
CLI tools feel like mini magic — even a simple one is exciting to build and see work.

📸 Sneak Peek

Still fixing images and routing — but overall, good progress today!

Let’s connect if you're building your blog or experimenting with Svelte too:

Day 4: Again Svelte Routing + Reading

Sourav Yadav — Mon, 02 Jun 2025 14:06:48 +0000

Hey devs! 👋

Big win today! I finally got svelte-spa-router working after struggling with it yesterday. Routing now works, and I'm feeling hyped 🔥

🧠 Goal for Today

Fix the client-side routing issue with svelte-spa-router.
Make modular pages render correctly like /home, /about, and /post/day04.
Learn a bit more about how routing works in Svelte.

🧩 The Problem (and the Fix!)

So yesterday, I installed the router package using:

bun add svelte-spa-router

…but nothing was rendering. No error either — just a blank page. Turns out, I wasn't setting up the route map properly.

✅ Created a router.js file

import Home from './pages/Home.svelte';
import About from './pages/About.svelte';
import Day04 from './pages/Day04.svelte';

const routes = {
    '/home': Home,
    '/about': About,
    '/post/day04': Day04,
};

export default routes;

✅ Updated App.svelte to use the routes

<script>
  import Router from "svelte-spa-router";
  import NavBar from "./pages/NavBar.svelte";
  import routes from './router.js';

  console.log('Active route:', routes);
</script>

<NavBar />

<main class="main-body">
  <Router {routes} />
</main>

And boom — routing started working as expected! 🎉

💡 What I Learned

svelte-spa-router needs a properly defined route object — that was the missing link.
Having a separate router.js file makes managing routes way cleaner.
Svelte's simplicity is starting to make a lot of sense now. Loving it!

Also read an awesome article: The Programmer’s Brain — if you struggle with reading other people’s code, this one is for you. Highly recommend.

Every time you fix a bug or break through a blocker — it builds dev confidence. Feels good. 🚀

live site: https://codingtheself.github.io/webdevblog/posts/day04.html

If you're also learning full-stack, exploring new tools like Svelte, or just building cool stuff — let's connect:

🐦 x.com/coding_theself

💼 linkedin.com/in/sourav-yadav-self

📚 dev.to/coding_self

Day 03: Trying Svelte and Breaking the Blog (almost 😅)

Sourav Yadav — Sun, 01 Jun 2025 10:02:26 +0000

Hey devs! 👋

Today was all about Svelte, components, and my first real attempt at client-side routing — and wow, things got tricky fast!

🧠 Goal for Today

Integrate Svelte into my existing blog structure.
Break repetitive HTML into modular components like Navbar.svelte, Post.svelte.
Try using svelte-spa-router for page routing.

🧩 The Problems I Faced

I used bun create vite svelteapp --template svelte to set things up.

Moved my old index.html, about.html, and posts.html into the public/ folder — Svelte was rendering fine.

Created components, and even App.svelte was showing up nicely.

But then…

Routing broke everything. ☠️

I added svelte-spa-router using:

bun add svelte-spa-router

…but couldn’t get the components to load on navigation. I think it has to do with the URL hash (#) not being detected. Still debugging this.

💡 What I Learned

Svelte is super clean. Definitely loving the syntax and reactivity.
I’m using bunx live-server to serve files. It installs into ~/.bun/install/cache/ — a good thing to clean up later!
Learned to separate components properly, though I still need to figure out how to handle per-post pages (day01.html, etc.).
Vite + Bun combo is fast and neat!

Still hacking at this. Routing is tricky — but I’m getting there!

Follow my dev journey — if you're also learning, feel free to reach out! 🙌

x.com/coding_theself

linkedin.com/in/sourav-yadav-self

Also, Special Thanks to @csm18 for suggesting me to use svelte

Check out the Live Blog: https://codingtheself.github.io/webdevblog/posts/day03.html

📸 Sneak Peek

Day 02 - Making My Blog More Modular with CSS & Learning Git Merge

Sourav Yadav — Sat, 31 May 2025 07:38:59 +0000

Hey folks 👋

Welcome back to Day 02 of my “Escape Tutorial Hell” dev journey!

Today was all about organizing my code, getting better with version control, and discovering how powerful browser DevTools can be.

🛠️ What I Did Today

Added a new blog post page: day02.html
Created an external CSS file (assets/style.css) to clean up inline styles
Styled my navigation bar using basic CSS — looks much cleaner now!
Learned how to use git merge to combine my stylize branch into main
Spent time exploring DevTools (box model, layout debugging, color picker)

🤔 What I’m Still Figuring Out

I’ve heard from one awesome dev about using Svelte for templating HTML components like navbars. Sounds cool, but I’m yet to figure it out. If you’ve got some resources or advice, please share!

🧠 Today’s Learning

Using Git branches is like time-travel for code — git merge helped me combine styling changes smoothly.

DevTools is a game-changer! I now understand how layout and spacing actually work — not just in theory.

🎯 What’s Next?

Improve the design of the site with a minimal theme
Explore templating options like Svelte or maybe try out something else
Keep building, learning, and documenting here and soon get to the point of implementing MERN stack or Next.JS

💬 Your feedback means a lot!

If you’re a fellow dev, beginner or experienced — I’d love your thoughts on:

Minimal design suggestions (colors, fonts, spacing)
HTML templating tools you recommend
How you tackled layout issues early in your journey

Let's build and grow together! 🌱

🖥️ Live Blog: https://codingtheself.github.io/webdevblog

Until tomorrow,
Sourav Yadav

Escaping Tutorial Hell: I’m Building My Own Blog from Scratch This Summer - Join Me!

Sourav Yadav — Fri, 30 May 2025 07:41:50 +0000

Hey folks 👋

This summer, I’ve challenged myself to finally escape tutorial hell and start building real websites — learning by doing, not just watching.

🚀 What’s the Challenge?

I'm building and maintaining a personal blog from scratch. As I learn web development, I’ll continuously improve this blog and post updates about:

What I learned today
Challenges I faced
Resources I used
Thoughts and reflections

To kick it off, I created a static site using plain HTML and inline CSS, and hosted it using GitHub Pages. It’s simple, but it’s live — and that’s what matters.

Now I can push updates with Git, learn as I go, and have a real site to show progress.

I’ve already published a Day 01 post — written in plain HTML. And my first real struggle? Templating.

I wanted a shared navbar across pages, but ended up copy-pasting the same code to every file. It works... but it’s messy and not scalable.

If you know any good ways to handle templating in static sites, I’d love to hear your suggestions!

🖼️ Here's a peek:

🌐 Check out the live blog:

👉 https://codingtheself.github.io/webdevblog/

I'd really love your feedback — ideas, suggestions, or even if you want to join me on this journey, reach out! Let's grow and build together.

See you tomorrow!
Sourav Yadav