Welcome to my new personal website and blog. I decided to write this blog as a way to collect notes and articles on things I've learned, stuff that I found useful, projects I've been working on and thoughts on hot topics. If you are here, I hope you find something useful too.
About the site
Since this is the first article, I want to talk about how I built this site and the tools that I used and that I found useful to get this blog up and running.
I started with designing the layout for this site in Figma, which in my opinion is a very capable (beside being free) alternative to Sketch. The main advantage comes from it being browser based, meaning, you can design on any system and any OS without needing an install.
JAMStack is the jam
Ever since I had the idea of creating this site, I was clear about one thing and that was to build it with JAMStack. You might already know JAMStack is all the hype these days because of how easy it makes for a developer to build and deploy static and CMS based websites. If you haven't read about JAMStack, head over to https://jamstack.wtf/ page which explains why should one use JAMStack and what problems it solves.
Static site generators makes it super easy to leverage the power of JAMStack and the good thing is that there is a vast variety of them available, so much so that there is a dedicated site https://staticgen.com/ to keep track of them.
My choice for this website is Gatsby particularly because of its vast and mature ecosystem of well-written plugins for almost everything that you could possibly need. My second choice was Gridsome which itself draws its inspiration from Gatsby but is built with Vue whereas Gatsby utilises React. Other reason to choose Gatsby was exactly this - React, which is what I wanted to learn more about since Vue is something that I use almost on a daily basis at work. Gridsome is awesome as well and you can't go wrong either way.
Gatsby’s powerful plugins and starters repository means you can spin up a full-featured blog site that has full offline with web worker support, automatic image optimisation and “SEO ready” in a matter of minutes without breaking a sweat. Have a look at the Lighthouse scores of this site for yourself.
When Adam Wathan and team announced their new CSS framework - Tailwind CSS, I was not yet convinced about the new utility-first CSS approach that it employs and I actually wanted to try it out in a real-world project before forming my opinion on it.
At work, we usually deal with building admin panels and Bootstrap has served us well in that regards with its pre-made components and its SASS mixins that allows us to customise them as needed. So that meant, this website was my first chance to try out Tailwind and having done so, I am now convinced that this is a very valid approach that you should definitely consider for your next project.
If you are not convinced yourself, like I wasn't a while back, give it a test-ride and have a look at this article that addresses the usual concerns of going utility-first.
And Gatsby's awesome plugin repository, that I mentioned earlier, made it super easy to integrate Tailwind with it. You just have to install this plugin and you are all set to go. Additionally, installing this Purge CSS plugin will remove all unused CSS classes generated by Tailwind bringing the file size to the minimum.
If you follow articles, podcasts, etc. related to Web Development, you've probably heard of Netlify and if you haven't, in a nutshell, Netlify is a web host with particular support static sites (like Gatsby.js, Next.js, Gridsome, etc.) as well as other incredible features like serverless (lambda) functions, free https certs, and more!
Netlify's feature page does a good job at telling all of its features. The rundown is:
- Hosting (free and fast!)
- Continuous deployment from a git repo
- Serverless functions
- Identity and Auth
And in my opinion if JAMstack is the new hotness, Netlify is the place to be for hosting. Give it a shot, and I am sure you will know what I am talking about.