Finally there’s a new post (and a new design) after 4 years of silence on this site! I have spent quite a lot of time developing the new site trying to make it as “perfect” as possible, and in this post I would like to discuss new things on the new site as well as some technical stuff.
Changes to older posts
Before talking about the nitty-gritty technical details of the site I would like to mention real quick about changes I did to the previous posts on the blog. The most visible change is that I removed the (previously) second post called “Second Post” (duh) because, well, it didn’t really contain anything substantial anyway. I also did a few minor tweaks to a couple of posts mainly just to make things load faster or look better, there’s not much to say actually.
Made from scratch (pretty much)
The new site is pretty much made from scratch using the Tailwind CSS framework and jekyll-starter-tailwind as the base to set up the development environment. The layout and design of the pages is made by me without using any templates whatsoever.
Generated locally
Contrary to the previous version of the site which relies on Github to build the site, the new site is built locally first on my machine and then the generated result is pushed to Github. Generating the page locally without using Github allows me to have a greater control and customization on the tools and plugins I can use for the site, for example it allows me to use a couple of npm packages such as autoprefixer, purgecss, etc. (mainly for the Tailwind framework itself) as well as the jekyll-target-blank plugin.
Tailwind CSS
As stated before, the new site is made using the Tailwind CSS framework with its utility-class approach thing (you can read more about the approach on this section of the framework documentation or on this blog post written by the framework’s creator). At first this approach might seem to be quite insane (look at all those classes just for a single element!), but actually after using the approach for some time I find it to be more comfortable than the traditional approach where I need to name every single element that I want to style.
Even though in theory using the framework means that I should only need to write little to none CSS, but in reality for this site I actually still need to write quite a lot of custom CSS to style things like selection colors, scrollbar colors, and most importantly to style elements in a blog post (what you’re seeing right now) because blog posts on this site are written in markdown. I’m well aware that I might have made some mistakes implementing the approach (aka not following it 100% accurately) thus some changes might still need to be done in the future.
Inter font
The Inter font family is used for almost every text you see on the site, and in my opinion it is a very good-looking font. Even though the font currently is “not suitable for very large sizes because of some small-scale glyph optimizations”1, I still use the font for the huge text on the homepage as well as on the 404 page anyway because it still looks good and because I don’t want to include any more fonts to prevent the site from loading slower. The best thing about the font family is that it is also free and open source!
Night mode
Night mode seems to be something that is more and more trending in the recent years. That’s why the new site also has one which is implemented with the help of the tailwindcss-dark-mode plugin. The night mode on this site has been implemented so that if your OS is set to use a dark theme then this site should automatically use the night mode as the default theme as well (you can still manually turn it on/off using the switch on the top right corner of the page regardless of your OS theme). Also, if you have this site open in multiple tabs/windows and if you decide to switch the theme on one tab, the theme on other already opened tabs change automatically as well!
The only downside regarding the night mode feature is that when the Disqus comments section has loaded on a page and the theme is switched, the Disqus comments section won’t automatically change its colors to match the new theme meaning you need to reload the page first in order for Disqus to detect the theme change.
Other miscellaneous stuff
- Now heading texts on blog posts have anchor links just in case if you want to link to a specific section of a blog post, you can access the link by hovering over the heading text and a hash ‘#’ symbol should appear beside it.
- The site is designed to be responsive and accessibility friendly.
- The HTML and CSS of the site is compressed to make the site load faster.
- I tried to make sure that the HTML is as semantic as possible.
Before ending this post, I also would like to mention that I initially wanted to use barba.js for the new site to turn it into some sort of single page application. However, I decided not to use the library (at least for now) because there are some issues that I need to take care of if the library is used (UPDATE: this site now uses the library, and in the future I might write a blog post discussing the issues that I needed to take care of when using the library).
That’s all for now, if you have any questions regarding how some things are implemented on the new site feel free to ask in the comments section!