Β β€”Β By Yasin

For quite a long time, I always had this notion of blogging about what I learn every day. But for some reason, I've always backed down doing that. One of the main reasons is that whenever I try to write something on blogging platforms, knowing that I'm limited to a basic WYSIWYG editor quickly puts me off πŸ˜•.

When I think of "writing," I think of figures, expressions, footnotes, references, snippets, reasoning, and analogies. Lol, perhaps I am being too metaphorical here, but I tend to have academic writing styles, and you get where I come from. But the point that I'm trying to make is that pushing content through dedicated blogging platforms looks pretty odd. They don't have all the features that I want.

And there's this thing called "Paywalls." Honestly, I don't like it. I understand that if you're making a living out of writing, it ultimately makes sense to do that. But lots of devs out there don't sail with subscriptions. Don't you think? Well, please don't get me wrong, though, and I don't want to be the judge of it. I think every platform has its quirks and features, and on the other hand, there are platforms like hashnode, dev.to, and HackerNoon, which are fantastic! I plan to cross-post on these platforms πŸ‘€.

I created this "blogfolio" to show the world what I learn, build, and enjoy. But it's supercharged with my own set of features to write things the way I want. I have to say that I got inspired by many bloggers out there. They are not just random bloggers or developers. They are the ones who do things differently, the ones who inspire other people in unimaginable ways.

So, before actually telling you the β€œhow?” part, I'll mention those wonderful hoomans first. In my book of ethics, I'll never forget to mention the ones whose been a part of my journey all along.

Professionals have standards

Standing on the shoulders of giants

I'm a huge fan of Josh Comeau's work, and his site is one of the most interesting blogs I have found on this journey. One has to be lucky to land on his blog because that is one rare masterpiece you'll ever find on the entire internet.

While building my site, one resource that I found was Josh's Effective Portfolio free e-book. I think that's one of the best resources if you want to kick-start one of your portfolios. A lot of his articles directly contributed to my knowledge.

Along the way, I have discovered many other devs and leaders whose passionate about what they are doing. They, too, implicitly or explicitly, helped me build this site. And they are:-

  • πŸ¦„

    Lee RobinsonΒ β€”Β In his blog, you'll find an ample amount of content on NextJS. And they are on the next level. Those articles helped me a lot in understanding the overall framework.

  • πŸ¦„

    Pedro DuarteΒ β€”Β Pedro is one of the brightest minds behind Stitches JS and RadixUI. Stitches JS is heavily used in my website, and I learned many best practices from his blog.

  • πŸ¦„

    Delba OliveiraΒ β€”Β Delba has an excellent explanation of how to create a delightful like button. I made a unique one with a twist by following her tutorial.

  • πŸ¦„

    Kent C DoddsΒ β€”Β He's the brain behind mdx-bundler. It's a great open-source library I use to parse my MDX content. His blogs, discussions, & comments helped me a lot when working with the library.

  • πŸ¦„

    Adam LaycockΒ β€”Β He's one of the core contributors to mdx-bundler. When using MDX with NextJS, you need to organize and read your content dynamically. And I learned those stuff from his blog. He's a very active fella on Github.

  • πŸ¦„

    TitusΒ β€”Β He's the brain behind xdm. And his discussions and comments on GitHub are more than helpful when working with the ecosystem.

  • πŸ¦„

    Monica LentΒ β€”Β I subscribed to Monica's Blogging for Devs newsletter. And sure, I can confirm it's a rare gem indeed. Her tips and tricks helped to push my blog faster than I anticipated.

  • πŸ¦„

    Steve RuizΒ β€”Β In his blog, he explained how to create a rotating icon button. It was conducive, and by following that tutorial, I made a minimal-looking theme switcher icon button .

  • πŸ¦„

    Paco CourseyΒ β€”Β I found Paco's website from Rude's blog post. Paco is the brain behind the next-themes module. I use that library to toggle between color schemes. Tbh Rude's post and Paco's site source tree helped me implement it more elegantly.

  • πŸ¦„

    Nanda SyahrasyadΒ β€”Β Nanda is one of the brightest fellows on visualizing algorithms. In his articles, I like how he reaches a problem statement methodically (i.e., see this cool article). I borrowed the idea of embedding problem statements inside flow content. I think it's a great way to jump sections of the article thematically without additional hocus pocus.

  • πŸ¦„

    Maxime HeckelΒ β€”Β I discovered Maxime's blog via Jeff's video. Maxime has excellent content on SEO optimizations and Framer Motion animations.

Quick Update

Hey there πŸ‘‹, recently I have revamped few things in my blog and decided to remove some functionalities such as: like and view count endpoints and theme switcher. Also, I have applied the third iteration of my styles. Trying to keep things as minimal as possible.

Their work helped immensely while creating my blog. They all have unique strategies for pushing content. And I closely follow some other great devs/leaders out there. I will leave the list here, so you can check them out. Max Stoiber, Adam Collier, Cassidy Williams, Ela Moscicka, Anthony Fu, Agustinus Kristiadi, Yann Le Vaguerès, Dan Abramov, LydiaHallie, Aisha Codes, Cassie, Sarah Drasner, Amelia Wattenberger, Ahmad Awais, Thein Htut, Gift Egwuenu, Agney Menon, Vlad Mihalcea, Laurie Barth, Zach Leatherman, Hossein Kazemi, and John Otander.

Phew! I know that's a long list, huh?! πŸ˜…. But not enough. I'll make sure to update this article if I find more. I'll be honest; my blog is an application with collective ideas, snippets, and design decisions that came from many minds out there. On top of it, I created my own from the ground up and sprinkled my creativity and personality to compile it into an application that I truly wanted. So, I want to say...

Thank You GIF
Thank You πŸ’œΒ β€”Β  Source

Finally, be sure to check them out. Follow them. They are wonderful. Now I'll tell you about the tech stack that I've used.

The Tech Stack

When I started drafting my blog, I spent quite a bit of time exploring the different stacks. I created two prototype applications using GatsbyJS and NextJS. Both are great options, but I plan to push dynamic content in this blog. So, after some good research, I wanted to use technologies that create less friction in my writing experience. And I've decided to settle with the following stack in the long run.

NextJS

NextJS has batteries included for everything. I see it as a higher abstraction of React (but with ultra superpowers ️). And most importantly, it is less opinionated. In conception, it has zero-config Webpack, Typescript, ESLint, Babel, and even native optimizations for your assets. I just delegate all the hard stuff to the framework and focus on my writing. It's just a seamless experience.

NextJS has performance out of the box. And it is one heck of a framework that can utilize multiple prerendering methods like server-side rendering (SSR) and static site generation (SSG) on a per-page basis. Therefore, I think the developer experience is second to none. It maintains simplicity from development to deployment.

Typescript

I use Typescript to write my components and API routes. I have quite a bit of experience in writing TS code. But I still think it is an overkilled feature for my portfolio. Nonetheless, types are great when debugging. But I keep them to a minimum and mostly try to rely on my IDE inference features whenever I can.

Fauna

Fauna is a flexible NoSQL transactional database. I use Fauna to persist all my post likes, and view counts. Using Fauna's core FQL is a breeze compared to other NoSQL query languages. Getting up and running with Fauna is extremely easy for a functional programming enthusiast. And it integrates well with NextJS. And to quickly get started, they have dedicated free hosted databases too!

MDX

MDX is the star of the show. I use Kent C Dodds' mdx-bundler package, which uses esbuild and xdm underneath. Several other options are available, but mdx-bundler is a bundler and a compiler that offers features like imports in mdx, native file loaders, etc.

Design & Components

To be honest, β€œDesign” is not one of my strong instincts, and in any way, I don't consider myself a true designer. But I do like to develop minimalistic-looking components. If you understand design systems, you'd know that they are a marriage between your style guide and component library. You will see some weird elements (such as buttons & tables) slightly off with other components in my blog. That's because initially, I didn't consider them when building my theme.

I'm currently focused on the research and development of my own design system. Maxime has showcased his design system, and I think it's so cool to have something that truly represents you.

Alright, now I'll keep the talk aside; I use a CSS-in-JS library to style all my components. My design and components are a mix of the following technologies: -

CSS-in-JS

Stitches JS is a solid CSS-in-JS library. I've been using it for quite a long time now. So, primarily chose it because I have prior experience working with it, and recently v1 got rolled out, and now everything is just smooth as butter. It has excellent features, and it doesn't compromise developer experience. The best thing about stitches is that it is framework-agnostic, and you can scale up as you go.

There are other options such as goober and styled-components. You can couple it with tools like Twin Macro to truly unleash the power of design systems like tailwindcss. In my blog I use StitchesJS with RadixUI primitives to write components.

Styles

I don't use any CSS framework πŸ˜„. The components you see in my blog are crafted with pure CSS rules. And one of the main reasons to go all in pure CSS was to challenge me. I wanted to learn CSS from the ground up. You see, some component styles genuinely resonate with me. But they aren't perfect. As of now, there's still a lot of things I'm doing wrong. I think I have overused borders and corners πŸ˜….

Animation

I use Framer Motion as my primary animation library. It's specifically developed for React, and It's easy to implement declarative animations effortlessly. It has built-in layout transitions, gestures. It comes with all HTML and SVG semantics, and it seamlessly blends in with Stitches JS.

Vercel

I primarily choose Vercel because of its simplicity in handling the complex hosting and continuous deployment process that goes into any frontend & backend development. With Vercel in place, I don't have to worry about my development lifecycle. Everything just works!

Heroku and Netlify are great alternatives too. But most of the time, Vercel is just too good for everything.

Analytics

Recently*, I integrated Fathom Analytics to track views of the site. So far so good. I referred this resource as a guide.

What About the Source Code?

At the time of writing this article, my site is not open source. But I do have a near-term plan on making it open-source*, but not right now. Until that, I promise I will write articles for selected component in this blog. So stay tuned.

What's Next?

I have a long-term plan to roll out high-quality content on this blog. And I believe NextJS will allow me to do that for quite a long time. Until that, I will keep on writing and adding features to bring delightful experiences for my readers using my existing stack.

Remix is out now ! Kent C Dodds rewrote his entire site using Remix. And it looks amazing already. You can read his blog for more details.

Thanks for reading .

Published Β β€”Β