Skip to content

Fresh Look of azzamsa.com 2022. Cleaner, faster and snappier.

Looks

All the colors are now stripped from the content. Including the links, quotes, and callout. I hope this makes reading more pleasant and avoid seeing color as a reward. Resulting in distraction-free reading.

There are only two colors used on the whole website, in addition to black and white. I enforce this rule by specifying the color directly in the TailwindCSS configuration. Not extending them. Any use of other colors will result in an error.

All the padding and margin for each layout also now reside in the parent element. So each page with the same layout will look exactly the same.

The article now uses TailwindCSS typography instead of homegrown style. Creating a more consistent and nicer-looking page.

The code block also now use a white background for consistency purpose. The color of syntax highlighting is also softened to match the website's simplicity.

The new website should look similar to the previous version, the minor difference is just a couple of pixels for margin and padding. Otherwise, it is considered a bug. However, there are two major changes: 1) New divider below the header 2) The year in the archive list is placed at the top of the list on the small screen device. Thus the title can span longer than before.

I see that "Webmention" is a foreign term for some readers. So it was renamed "Comment". The comment directly button is also added. This brings the reader to the tweet related to the article.

Currently, I don't add a dark theme for the website. In meantime, you can use Dark Reader.

Performance

Most of the complicated grid layouts are replaced with simple flexbox equivalent. With the same spirit, I use a simple inline-block whenever possible rather than a flexbox.

Development

Templating

I am having a hard time finding a CLI formatter that supports nunjucks files. I don't find any. I find one Prettier plugin, but it seems never finished. There is a VSCode extension but sometimes it is buggy. So, I just use web-mode to indent my nunjucks files. It works above my expectations.

Duplicate templates such as Webmention replies, like, and reposts are now simplified using macro. Resulting in less code.

The unused tag is also removed. Decreasing the template nested depth.

Duplicate class across template is moved into one place. Making future refactoring a breeze.

Styling

I love using Prettier. But it seems many of my lovely public figures use standalone ESLint. I need a CLI tool to sort TailwindCSS classes because I don't want to switch back and forth from Emacs to VSCode just to use Headwind. One day, I find autoloading function from lsp-tailwind, called RustyWind. Turns out, this is the tool that I have been looking for for a couple of weeks. Now, I can use standalone ESLint without Prettier.

I also introduce stylelint to lint the CSS files. It helps a lot. At the same time, all styles in the standalone CSS file are now moved inline. A couple of them remains, as they can't be inlined.

Tips: Whenever I see a complex CSS selector. There must be something wrong with my templating logic. All the heavy work should be handled by the template.

TailwindCSS is less powerful than a standalone CSS file. Whenever I see a complex CSS selector. There must be something wrong with my templating logic. All the heavy work should be handled by the template.

For the custom class, I put them in the id instead of class. So whenever I come to this project a year later, I can make sure that all the classes in class come from a TailwindCSS. On the other side, I use id as a comment for the section of my template.

I see that the usage of SASS mixin and variable is overkill for this website. I use them in the first place because of my lack of CSS knowledge. Now, I migrate to CSS with PostCSS nested plugin.

To make a uniform entry point, I change main.css to index.css to match the Javascript and HTML counterparts.

Bundler

Vite calls my attention, as I use it in my Vue apps. But looking at its configuration to build a simple Eleventy blog. Make me stick with the magical no configuration Parcel bundler.

Test

For testing purposes, I use a demo page that is only generated in development mode. The content is taken from TailwindCC typography demo with additional post featured images, excerpt, toc, tags, and so on.


Comments