View profile

The tech stack behind my new website

The tech stack behind my new website
By Manolo Recio Sjögren • Issue #4 • View online

Hello friends 👋
I am redesigning my personal website with the main goal of having a platform to write and share my thoughts online.
The real challenge will of course come once I try to write and publish content consistently. For now, I will simply share the tech stack behind the new version of
Here is my choice of designer friendly web technology
Please find below the three pillars on which my new site is built:
  1. Next.js 👉 A framework built on top of React that generates HTML at build time.
  2. Tailwindcss 👉 A utility-based CSS framework that is disrupting how we used to style pages/components.
  3. Vercel 👉 A framework integrated with Github for frictionless deployments.
1. Next JS
Next.js is the React framework that I am using to build the website. It provides a great ‘developer experience’ and comes with a set of built-in features that make the lives of newbies like me easier. Here are my top 4 features 👇
  • Zero config → I don’t need to worry about code compilation and bundling. This is done automatically with Webpack and babel.
  • Fast refresh → Also known as ‘hot reloading’. It gives me instantaneous feedback on edits made to the React components.
  • Production-ready code → This is a killer 🙂. Any Next.js application is ready for production from the start.
  • Static-generation → The HTML is generated at build time and will be reused on each request. Aka, incredibly fast.
2. Tailwind CSS
Tailwindcss is a utility-first CSS framework intended to ease up styling web applications. I have been playing with Tailwind on a project that I am building with a programmer friend of mine for the past couple of months and I’m all in. Here is a nice quote from the CEO of Vercel, Guillermo Rauch:
If I had to recommend a way of getting into programming today, it would be HTML + CSS with Tailwind CSS.— Guillermo Rauch
Some people call it a “utility bundle” and I like that. Instead of providing predefined UI components, Tailwindcss comes with a set of utility classes (constraint primitives) that you then use to build your components.
This approach comes with some downsides (your HTML pages will get cluttered) but I feel that the benefits of styling your web app without the need to write custom CSS or leaving the comfort zone of your HTML code outweighs its drawbacks.
3. Vercel
And finally, I will be using Vercel to take care of deployments and hosting. Deploying and hosting websites is a breeze nowadays compared to days of FTPing your files over to servers.
There are a number of services playing in this space. They integrate seamlessly to version control systems like GitHub and will kickstart their deployment process every single change the master branch. As I read somewhere yesterday, today deployments are just a git push away.
I was using Netlify on my previous site but as Next.js was created by the team behind Vercel, I have decided to give them a go 👋
This post is also available on my website:
Thanks for reading,Manolo
Did you enjoy this issue?
Manolo Recio Sjögren

Thoughts and principles on product development straight to your inbox. Subscribe to improve your product skills!

In order to unsubscribe, click here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Powered by Revue