Behind the Blog

For a long time, the idea of creating a blog had been in my mind, and the name had lived there even longer. I envisioned a space where I could express my thoughts and share my work. I wanted more than just another WordPress site, I’m a developer right? I aimed to build something myself. So, on the 15th of April 2024, I registered a domain and started building.

The following paragraphs will describe my journey up till publishing the first blog post. (and maybe why you shouldn’t do it)

Something new: Svelte and Firebase

I wanted to challenge myself and learn new techniques. So, I decided to build my blog using Svelte for the frontend and * *Firebase** as BaaS (backend-as-a-service) solution. This choice allowed me to explore modern web development practices and create a faster, more interactive experience, both for the readers and for me, the developer. However, learning new techniques come with some drawbacks: The learning curve.

Svelte

Svelte is a fun little framework, lightweight, simple and readable. Making it an ideal framework to learn and understand. Definitely a recommendation for those looking to explore something new.

<!-- Posts.svelte -->
<script lang="ts">let posts = [];
posts = await getPostsPreviews();
</script>

<section class="posts">
  {#each posts as post}
  <Link to={post.slug}>
  <PostTile post={post}/>
    </Link>
    {/each}
</section>

<style>
  .posts {
    column-count: 4;
    column-gap: 1em;
    padding: 1em;
    overflow: hidden;
  }
</style>

Codeblock 1: Svelte component showing blog posts overview.

As you can see above (Codeblock 1), a Svelte component has high readability and is simple to understand. The advantage of single-file-components is that it encapsulates all logic, styles, and markup for a component within a single .svelte file. The CSS within the component is scoped to that component. This is beneficial for developers like me who lack to invest time in proper css classes (pun intended).

Firebase

When you’re developing a web or mobile app, managing your backend can often be a time-consuming challenge. That’s where Firebase comes in. Firebase, a Backend-as-a-Service (BaaS), simplifies backend management, enabling me and other developers to focus more on building features and less on infrastructure.

These are the key benefits I found:

Real-Time Database (Firestore): When writing a new blog post, it’s stored in Firestore. Once deployed, users can immediately see it live without any delays.
Simple Authentication: Firebase Authentication makes it easy to offer sign-in options like Google or email/password, without worrying about complex security setups.
Hosting: Firebase makes deploying new changes super easy. Every time I update or add content, I just run firebase deploy, and the new code is live.
Storage: Firebase Storage is perfect for managing media files like images or markdown files. And the Firebase Storage Rules provide control over who can upload, download, or modify files.

service firebase.storage {
  match /b/{bucket}/o {
  
    match /markdown/{allPaths=**} {
      allow read;
      allow create, update, delete: if request.auth != null && request.auth.uid == 'Zu4A89s3hjfRMp2kGjP0SvxBMWt2';
    }
    
    match /images/{allPaths=**} {
      allow read;
      allow create, update, delete: if request.auth != null && request.auth.uid == 'Zu4A89s3hjfRMp2kGjP0SvxBMWt2';
    }
    
  }
}

Codeblock 2: Defining Firebase Storage Rules for blog assets.

Trying to CSS from scratch

Nowadays, I can’t imagine a web development project without a CSS framework like Bootstrap or Tailwind. These frameworks simplify so much of the design process, especially for developers who might, like me, still occasionally struggle to center a simple div. Choosing a framework would have been the easy choice, but again this time I didn’t want to take the easy road.

The design I had in mind turned out great for desktops. Even though I took a responsive approach, I realized too late that I neglected the Mobile-First approach. Resulting in a site that looked polished on large screens but broke down on smaller ones.

Column-count

I am well aware of the existence of CSS layout techniques like flex and grid, and they’ve been my go-to tools for structuring responsive layouts. But for this project, they weren’t quite sufficient for the layout I had in mind. Both flex and grid tend to organize content in rows, which works well in many cases but wasn’t the right fit here.

What I wanted was a design where the tiles are independent of rows, similar to the dynamic grid layout you see on Pinterest. This design allows for more fluidity, where items can vary in size and still fit together seamlessly, without breaking the overall flow.

However, the column-count comes with some issues Image 1: Issues with column-count…

Experimenting with CSS Animations

One of my goals was to make the blog visually engaging, so I dove into experimenting with CSS animations. I wanted to create a fluid and dynamic user experience, showcasing how even small animations can enhance the overall feel of the site.

One of the features of CSS is the ability to use keyframes to create animations. These allow you to define an animation’s start, middle, and end states, giving you full control over how elements move and change over time.

For example, here’s a simple animation that fades in a blog post tile and scales it slightly to make it feel more dynamic when it appears:


@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.post-tile {
  opacity: 0;
  animation: fadeInScale 0.8s ease-in-out forwards;
}

.post-tile:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

Codeblock 3: CSS Animations using keyframes.

The Challenges: Why It Took So Long

Building this blog came with its own set of challenges. What started as a simple blog page quickly evolved into a fully functional content management system (CMS). Since it’s a hobby project, I’ve only had time to work on it in my free moments, which made progress slower than if I had chosen an existing framework or CMS. A lot of the features that come out-of-the-box with established frameworks or libraries were missing, meaning I had to build many things from scratch. Along the way, my opinions on several topics shifted, and I often found myself questioning whether it was worth the effort.

However, looking back, I’m proud of the process and what I’ve accomplished. Despite the challenges, seeing the blog come together has been rewarding.

Lessons Learned and the Downsides

One downside of taking on a project like this is that most of the features you typically get for free with a platform like WordPress need to be built from scratch. Here are some of the challenges I faced and the things that crossed my mind along the way:

SEO: Since the website is client-side rendered, SEO doesn’t work as effectively out of the box.
Design/Layout: Unlike a pre-built theme or template, I didn’t have a polished layout or design to start with. I had to create and tweak the styling from scratch, which took time and experimentation.
Comments and Likes: Features like allowing visitors to leave comments or give likes, which are readily available in platforms like WordPress, had to be custom-built. But left out for now.
Authentication and Authorization: While Firebase handles a lot of these features, I still had to configure and integrate it into my app manually, which wouldn’t have been necessary with a CMS.
Accessibility: Ensuring the site is accessible and free from usability issues is something that often comes pre-built in themes. I had to actively check for and resolve accessibility problems myself.
Other Issues: From optimizing performance to managing image storage and caching, many other considerations came up that I hadn’t anticipated in the beginning.
And other Issues:

Lighthouse diagnostics errors Image 2: Lighthouse diagnostics report.

The project took 29 commits to complete, which, considering the complexity, isn’t that bad!

Conclusion: The Journey Continues

With my blog now live, I am excited to share my experiences and insights. This journey has only just begun, and I look forward to the stories and lessons that lie ahead. Stay tuned for more posts as I continue to explore the world of web development and blogging!

My Blogging Journey: From Idea to First Post