Update #1 for kabanashvili.com

Happy New Year!

It's a good time to summarize the progress made for my personal website and plan coming changes, and features. So I present Update #1.

Since the project started in September 2019 I made the following amount of commits: 

• Frontend - 98
• API - 28
• Manager - 14

As statistics say Frontend will be the main subject of this post. API and Manager haven't changed a lot after initial development. Mainly because I still use simple CRUD operations from API and never came to the point of developing complex analytics or management operations. The main addition since the start of API is K. BOT, described in the previous blog post. For the Manager, an explanation is even simpler. At the moment I use it only to manage blog posts. To create, edit, hide, or delete them. And for this functionality, not much code is needed. Plus I think about migrating Manager from EJS to React JS during the process of learning the latest. I think the Manager will be the perfect app for this. It's my plan for 2020.

Frontend

1. K. Theme

kabanashvili.com got a unique theme I called K. Theme. After failing to find any templates suited to my taste I decided to develop it on my own. This gave me the motivation to learn more about CSS and adding custom styles to Bootstrap. You can observe the result right now.

Hacky Theme aims to be a minimalist, dark, terminal-like theme and is inspired by the Terminator console theme, which I discovered many years ago and can't find its name anymore. Since style is still a messy line of CSS code under development I don't provide it separately. Once I finalize it, I will decouple it as a separate project.

2. Font

Besides colors is a font that makes Hacky truly hackish. I doubt if someone will recognize it by looking. It's Magda Clean Mono used in the TV Show Person of Interest by Jonathan Nolan. I always liked the battle portrayed there between two AIs: The Machine and Samaritan. Magda font is used by Samaritan by the way. So it's my small tribute to this amazing TV series. Video with Samaritan UI.

3. SEO

kabanashvili.com supports Google, Bing, and Yandex search. I did the setup for the first two by adding verification meta tags, sitemap.xml, and robots.txt. Everyone knows that most searches come from Google, but I wanted to learn the difference between Giant and Microsoft products. After some time, when data will be more diverse, I will try to compare them. In comparison, Yandex doesn't provide a webmaster dashboard at the moment and crawled my website on its own. As did DuckDuckGo, but as I understand it uses other search engines' metadata and crawls only favicons. Developing websites is one thing, and popularizing is another. I aim to learn more about SEO by analyzing the progress and data I receive from this site.

4. Code Highlighting

The blog now has code highlighting. First I went for Prism JS, but after failing to find how to break lines in code I switched to Highlight JS. It just works fine out of the box and the theme used is Solarized Dark.

5. Contact Page

A simple contact page was added under the navbar item Contact. The form asks for your name, email, and message. Data is sent to my email.

Additionally, the Email Client of OS can be opened by pressing the anchor below the send button.

6. Projects Page Draft

I've started developing a separate page for projects. The current version can be browsed under /projects route, but it's unfinished yet. The idea of this page is to have one place to display all my projects.

Functionally it will support Isotope JS to interactively sort projects by different categories.

7. Footer

The footer was fully redesigned and now is displayed everywhere except the landing page. It contains buttons leading to my social networks and years. The second year is now dynamic and is calculated on page load.

8. Icons

First I chose FontAwesome as my icon provider. A change came when I found out that it misses some required icons and their addition isn't coming very soon. The perfect solution for this problem turned out a project called Icomoon. It allows you to generate icon fonts with FontAwesome or other providers plus your custom icons. Additional icons can be found on icons8 or flaticon.

Note 25.07.2024: Virginia suggested me over email to mention another tool which allows you to create favicons from pictures that are up to 5 MB from either JPG, PNG or GIF or even from gallery. You can find it on WebsitePlanet.

9. Post Stats

Posts now have a statistics panel. It consists of three elements and shows:

1. N min read - minutes needed to read given post
2. Date - Publish date
3. Views - How many times this post was viewed

10. Share Buttons and Cards

Every post has share buttons for Facebook and Twitter. I did it with plain Javascript to not overhead my website with provided SDKs. As it turns out redirecting a client to a specific link per platform does the same job and I don't fully understand why companies provide such heavy js files. Maybe for tracking?

Additionally, every page on the website has social cards to be nicely displayed once shared. This functionality will not be required any time soon, but I was just curious to implement them.

11. Post Navigation

Posts have navigation buttons under the sharing section. It's simple previous and next buttons to go to appropriate pages. I read a lot online and follow several interesting blogs. And always thought this kind of control would help readers engage easier. Instead of pressing the back button and scrolling to the next catchy post user easily plays posts, like a music playlist, until he or she finds an interesting one.

12. Posts Pagination

API now supports pagination so it was logical to implement different pages and navigation on Frontend as well. Unfortunately, it's not displayed yet. I coded it to display 10 posts per page and to see navigation I need to write more posts. Until then Hands Up Emoji will entertain readers with information.

13. 404 Page

There is no website without 404 pages. So I added my own as well. If you are curious you can check it out at /404 or be imaginative in your URL bar. I promise you will see it.

14. landing page buttons for easier navigation

The last candidate in the update series is the Landing page. Now it has two buttons to easily navigate to the Contact or Resume page. They are the most used ones. This makes navigation easier on mobile devices where you need to press a Toggler button first.

Conclusion

Regarding the coming plans, the top priority for a website is the Project's page. After that front end will be almost ready.  For Manager migration to React JS is the way to go. Since it's time to focus on content I need more functionality from the Manager and there is no reason to spend time coding it first for EJS and then React. The last API must be unified and I aim to simplify the routes I have currently. I already compiled the list of coming blogs and the first few months will be spent on writing them.

That's it for now. Maybe I missed some points, but they are not so crucial. Frontend development, especially design, turned out to be easier than I originally thought. The lesson learned: If you want to do something well do it yourself.