JH-Articles
!JH-Opinions !JH-Websites !Qia-Software Data-Analysis Information-Management Information-Technology Software-Development

JH-Vita as Up-to-Date Vitals

  • UUID: 7126f301-fb8b-4bf7-a328-5fbe9937c5fa
  • Timestamps
    • 20231101, added this articles

It comes again at a time when I should update my JH-Vita page.

This time, I would also like to look back a bit and compose an article to introduce the JH-Vita (https://www.johannhuang.com/vita/) website better to the world.

As a software developer, I would feel ashamed if I do not have my own unique personal portal website. Things you make or just things you choose to use should represent you in some aspects.

I like simplicity. Minimal but not lacking. I like more essentials and care less about superficials (façades). Plain instead of fancy. But the world appreciates fancier things more.

With such an idea, the JH-Vita is created as an supplement to the by me thought classical JH-Portal or JH-Home (https://www.johannhuang.com/) which is powered by classical web technologies including jquery.js (indicatiing DOM manipulation era of web development, therefore also telling the story that I am experienced).

Modern web UI development has long no longer DOM oriented, but instead more about reactive programming. Angular is one very good example, although with the drawback that it doesn't support web browsers which has no JavaScript enabled. I live on today, and I am also not old. So something modern and cloorful should be meaningful. Therefore, JH-Vita was made. (I forget when I started to make JH-Vita, but it should no later than 20210709 which is one timestamp I can retrieve from my dev notes.)

What are the modern aspects or more dimensions of JH-Vita comparing to JH-Portal?

  • It is a reactive web application instead of static HTML document with JavaScript to modify DOM
  • ~~It is also a Progressive Web Apps which can be installed similar to platform native apps~~
    • The PWA related implementation is removed considering
      • the use case of PWA is not really suitable for this app
      • the PWA caching issue could result in outdated contents
  • It has a modern design style
  • It uses more colors as another dimension of addressing contents
  • It uses emojis and animations as attention attractor
  • It separates data and representation structure
    • data comes as JSON data files
    • New from today's update
    • It has curated dark mode (to be honest, only a quick implementation, style values are not that curated)

It shows more aspects/preferences of me - in the context of both JH-Vita (https://www.johannhuang.com/vita/) and JH-Portal (https://www.johannhuang.com/) are my makings and both represents me.

The trigger of this article is the need to update this JH-Vita. So what's the news?

What's Updated on 20231101

Take the chance, it also makes sense to improve the implementation besides just updating the contents.

Starting from Where It Is

JH-Vita was implemented as an Angular application with a package.json as the following.

{
  "name": "jh-vita",
  "version": "0.0.0",
  "scripts": {
    "start": "ng serve"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.1.1",
    "@angular/common": "~12.1.1",
    "@angular/compiler": "~12.1.1",
    "@angular/core": "~12.1.1",
    "@angular/forms": "~12.1.1",
    "@angular/platform-browser": "~12.1.1",
    "@angular/platform-browser-dynamic": "~12.1.1",
    "@angular/router": "~12.1.1",
    "@angular/service-worker": "^12.1.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.2.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.1.1",
    "@angular/cli": "~12.1.1",
    "@angular/compiler-cli": "~12.1.1",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.8.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "typescript": "~4.3.2"
  }
}

Which also indicates that JH-Vita had nothing much than a default setting of ng 12.1.1.

With resepect to what oudated

Content-wise, thereare several parts which were outdated before the update.

As of 01.11.2023, twitter.com has changed from an open platform to a rather closed platform in many aspects, therefore I decided to move on to another platform viz. mastodon.social and need to replace the icon and link for twitter.com with the ones for mastodon.social; I have moved from Munich to Frankfurt, which also requires an update; And I have changed my plans on several of my creations (personal projects), so the corresponding parts should also get updated; last but most importantly, I have shifted my career focus, therefore, I need to reflect it on the vita page.

The update of contents can be as easy as simply replacing some of the texts I had in the HTML files as the following.

However, having contents directly in the HTML has a drawback which requires me to make a build of the Angular project each time when I need to update the contents. Therefore, with more time for myself now, it makes sense that I take some time to make more parts of JH-Vita use the JSON data file as the source of contents. (It is this time when I wrote up to this paragraph that I finally realized I have already implemented the procedure of using JSON data file as the content source.)

Still worth a bit explanantion, changing direct texts in HTML tags to JSON data file sourced involes some foundamental changes of thinking as well as implementation.

Having contents directly inside HTML is synchronous as the contents come together with the HTML files downloaded by the browsers but using JSON as content source is different as it involves a procedure of asyncrhonously fetching the JSON data file first and then inserting the contents into the HTML tags. It also means the whole representation rendering process is different.

But the implementation is not cumbersome as web pages after the advent of Angular.js followed by React.js and Angular have been largely non-static but reactive. So I just need to take care a bit on the data which then will be automatically propogated to the representation with my definitions of mapping.

...to Where It Should Be

Contents Sourced from JSON

So how to model the contents?

After some rounds of iteration, I ended up with the following structure for the parts I hadn't moved into JSON data file.

{
    "introduction": {
        "greetingWord": "Hallo",
        "focusKeywords": [
            "Data Analysis 📊💹",
            "Software Development 💻📱"
        ],
        "briefLines": [
            "I talk to people in German, English and Chinese;",
            "I talk to computers in Python, JavaScript, TypeScript, C# and many others;",
            "I currently live in Frankfurt, Germany 🇩🇪 and would also like to have opportunities which allow me to experience life in other metropolises in EU 🇪🇺."
        ],
        "contacts": [
            {
                "name": "Mastodon",
                "aHref": "https://mastodon.social/@johannhuang",
                "imgSrc": "assets/icons/mastodon.2023.svg"
            },
            {
                "name": "E-mail",
                "aHref": "mailto:[email protected]",
                "imgSrc": "assets/icons/gmail.2020.svg"
            }
        ]
    }
}

As an example, the corresponding HTML parts are as the following.

I <span aria-hidden="true" class="heartbeat">❤️</span>
<span class="keywords">
    <span *ngFor="let keyword of introduction.focusKeywords; let first = first; let last = last">
        {{ first ? '' : last ? ' and ' : ', '}}<span class="keyword">{{keyword}}</span>
    </span>
</span>
<br>
<span class="brief-lines">
    <span *ngFor="let line of introduction.briefLines">
        <br>{{line}}
    </span>
</span>

And the final result is as the following.

Dark Mode

It is already the November of 2023, which is also more than 5 years later than when Apple first introduced the dark mode in macOS Mojave. I have been rather reluctant to implement a separate dark color scheme for my web pages as I think the browser should have enough data to make a dark mode for my light mode web pages. (And in fact, there are indeed several plugins that can make dark mode for web page which have no dark mode built-in.) However, the world is not perfect. And most mobile browsers still have no support for web browser plugins, especially because of the control of Apple. As a result, browsing light mode website at night when all room lights are turned is still a very unpleasant experience, especially when a previous web page supports dark mode and the linked page to visit has no dark mode - sudden change of light makes eyes even painful.

So also taking the chance of my already wet hands on this project, dark mode is now here.

Remarks

To be honest, I feel this article is not well composed as I started it as a changelog which is more proper to be published on time indexed JH-Blog (https://www.johannhuang.com/blog/) which unfortunitely needs an update before I can publish more contents there because of a chance of my methodology of information managment. I want to publish this article today and the only other okay place to publish is this JH-Articles website which, however shouldn't be a place with stong relation to time, therefore, this article was made a mixture of introducing the making JH-Vita and the time related updates on today.

Neverthless, making it out today to mark a timestamp is much better than not.


* cached version, generated at 2024-01-10 19:51:20 UTC.

Subscribe by RSS