This is post 1 of 3 in the series "Blog Website"

• Blog Website - Part 1: Website
• Blog Website - Part 2: Web Component Library
• Blog Webiste - Part 3: Deployment & Hosting

The beginning of the website

At first, I was writing articles on platforms such as Medium. It was a great time. I remember reading different literature about the posts and how to improve their quality. With time, I started noticing that many developers have their own blogs. And that's where everything started. I made a decision to create my blog post. The blog was looking awkward at the very beginning. However, with effort and hard work, the blog grew and improved. Now, it has many different features, which I'll split into a few posts. In this post, I'll describe the angular features of this blog. Part two will include a web component library description specifically implemented for this blog. And in the last part, I'll share the server, host, and deployment details.

I built the website mainly using Angular and Rxjs. I haven't used any UI library such as Material, Bootstrap, PrimeNg, or any other. Important to mention that the website is fully responsive and and has a mobile version.

Cards

Each card consists of a name, publish date, current status, and tags.

The current state tells the user whether the article is finished or under construction. If the article is in progress you'll see the label on it saying Coming soon.

Tags allow users to understand what technologies are mainly present in the current article. In other words what this all is about. If the user clicks the tag, the list will be filtered by this tag, and he'll see all the similar articles.

The card can have different types. As of now, there are three types of cards, Tech Articles, Cheatsheets, and Environment.

Multiple card views

The first page that was implemented was the card view. Since some people might prefer to view it as a list, I've added a list view apart from the existing card view. In the right-top corner, next to search, you can find the card view toggler element that switches between the different views.

Usability

To make the dashboard even more usable, I added a search that helps users find exactly what they are looking for. The search has hotkeys that can be used instead of a mouse.

Right to the articles, we have the list of filters. Namely, type filter, sorting, and a tag filter. Type filter allows you to find the article by type; for instance, if you're more interested in different environment improvements, then you choose Environment. With the sorting widget, you can sort by name or description in ascending or descending order. For the tag filtering, we have a tag filter, which is the most below of the filters.

Icon loading

Since the website has many icons, especially when the dashboard is loading, I had to implement the icon-loading component. So when the website wants to load an icon, the spinner is shown with the same size as the icon to reserve a place for the icon and to prevent the CLS (Cumulative layout shifts) issue.

Loading performance

In the beginning, I implemented the project with Angular 15. Once Angular 17 was released, important features were delivered, such as preloading strategies. Once I finished the migration to Angular 17, I used PreloadAllModules. Which drastically improved the website's performance. How it works? First, I load all necessary scripts to display the required elements on the page, and once everything is loaded, I start loading the rest of the website. So when user wants to navigate somewhere else nothing is loaded since everything was loaded with a secondary priority, thus the website does the navigation with high speed.

Apart from that, I used Nginx compression. In other words, I gzip static files. I significantly reduced the sizes of transmitted data with Nginx compression.

Server Side Rendering (SSR)

At first, I used Angular 15 without SSR. However, this type of website only works for internal usage in cases when you do not need to index your pages with Google Search Console. The first option was adding meta tags, but the results and expectations differed. Therefore, I had no other option but to implement the SSR.

Markdown instead of HTML

Writing article content in a markdown is easier than writing an HTML file. Moreover, since I'm passionate about learning new technologies and programming languages, I'll need syntax parsers to highlight syntax for different languages. The best option, in my opinion, was at that time (and is now) ngx-markdown. It provides a wide range of features that can improve the blog view. Later on, I implemented my own web component that parses and highlights the code, but more about this in part 2.

Markdowns Git Submodule

To me, it's it's better to have small pieces. All the articles and pet projects markdown files reside in a separate project. I have a blog-markdowns project that only includes the markdowns files. This project is included as a git submodule. There are others, but I'll talk about them in further parts.

Blog code snippets (written in Lua)

Since I have been writing a lot lately and there are still repeating code pieces, I decided to write code snippets specifically for myself and this blog. Some of the snippets took me some time. Without any doubt, it was worth it. As I'm using Neovim for the development, the code snippets were written in Lua.

Pet Projects

Because my free time was usually devoted to writing new pet projects and learning new technologies and programming languages, the list of such projects was growing. So, it became hard to keep in mind what I was doing in which project. Therefore, I came to the conclusion that it would be nice to share the experience I gained during these projects' implementation on my website. This is how the "Pet Projects" tab appeared on my website. Within this section, you can find all the pet projects I have been doing all this time. If you're interested in my commercial experience, you can find more on my LinkedIn.

Favorites

Sometimes, it's very convenient to have a favorite list. I thought it would be great if users could add their favorite articles to the favorites and later come back to them. So, if the user doesn't want to lose the article he was reading, he can click on the star icon and find it later in the favorite section. Another case is when a user comes across some interesting article, but he doesn't have time to read it now, so he can add it to his favorites to read it later on.

Article configuration

With time, I've noticed that some parts of the markdown files are frequently repetitive, like the "Table of contents" or "Table" components. Moreover, writing HTML for such components takes a lot of time. I've decided to supply each markdown file along with a configuration object, which will provide additional details about the page. So, I wrote a functionality that would allow the reading of additional data from markdown and apply it before the markdown render. All I had to do was to add a script tag with the type application/json where I kept the configuration object to the markdown file. Starting from this point I could do with the page whatever I wanted to.

Article suggestions & last read

When you open an article, you'll see three sections.

Last read. This section is the story of your views. It shows the last five articles you were viewing.

You might be interested in. This section will suggest the articles to read based on the current article topics.

Latest. This section simply suggests the latest published articles to the user.

Share to social media and Open Graph

To make it easier to share with others on social media I've added the share button group. It includes Facebook, LinkedIn, and X (previously Twitter). At the time I implemented the share buttons, I noticed that other sites had better views when I was passing the link. So, I decided to implement the Open Graph protocol on my website as well.

Print version

If you found the article interesting and want to print it out, there version for printing. Each article has a print icon at the top of the article close the the header. Once you hit this button, you'll be able to download a printable version.

About

The About section consists of three sections.

Commercial experience. Here I briefly describe my commercial experience in development. The companies where I worked, what I was doing at these companies etc.

Environment & Tools. Oh..., that's one of my favorite sections because here I can tell how I love Vim, Bash, Python etc. In this section, I describe the environment I've set up for the development.

Hobbies & Interests. This section tells more about me, what I like, and what I do when I have a free minute.