Jfokus 2020!
Broken chain

During the days of 4th and 5th February 2020 I participated at the Jfokus conference in Stockholm.

This blog post will be quite packed with information. I plan to maybe later collect all the links spread out down below should be collected together somehow for easy overview/access...

For this article I installed Markdown to save some HTML typing, and I use Visual Studio Code to get a preview page. Some new tools where used in the creation of this article (new to me; some tools were in fact getting rather "old" I later discovered). I can mention md2html, Harp and Jade (see far below).

One comforting realization after the conference was that finally the JavaScript (Ecmascript) world seems to have stablized on a few major frameworks/"toolkits":

Current three leaders of frameworks/web toolkits

  • React Vue
  • Angular Vue
  • Vue (or VueJS... Vue.js ?) Vue

Just this week version 9 of Angular entered the scene, oops...

At the top of the list is React. The trend is pretty clear, React have obviously more job opportunities than Angular which is the clear no 2 (full) framework.

I looked in retrorespect at the jFokus video, https://www.youtube.com/watch?v=iAcyMzw9ORI&t=30597s , where there was stated that there was a) a certain trend that Angular are stagnating, and b) there seemed to be a more pronounced uninterest to continue to use Angular for the "sheer joy" of it. Both React and especially Vue seemed way more embraced by its current devlopers.

Angular 9 (not detailed at jFokus)

Perhaps Angular 9 (A9) can put some concerns to rest... https://blog.angular.io/version-9-of-angular-now-available-project-ivy-has-arrived-23c97b63cfa3. I am not initiated about the current state of debugging in Angular 8, the Angular team claims to have addressed some difficulties what relates to debugging in A9. Better build errors, and type checking should also help. Smaller bundle size, faster testing, ...

Frontend development for backend Java developers

Matt Raible made a well done walkthrough on this wide subject. Ecmascript, known commonly as JavaScript were described in its different releases. Latest version is Ecmascript 2019, see git.io/esfeatures.

Also TypeScript ( www.typescriptlang.org ), a "type understanding JavaScript" was described in some detail. The latest version is 3.7, this should be matched with what the framwork(s) that are installed can support. Angular 6 demands that you have TypeScript 3.7.

Node.js ( https://nodejs.org/en/ ) have also become a major player in the web development are, almost mandatory. The level of support it gives when creating new React-, Angular- or Vue apps is really great. This, https://scotch.io/@chiefoleka/how-to-use-nodejs-for-absolute-beginners942, can also be a good starting point, link tip received at jFokus 2020.

A little funny list of "Old School", "New school" and "Hip" was presented:

Frontend build tools:

  • Old scool, Gulp
  • New School: SystemJS
  • Hip: Webpack !

Web dependencies:

  • Old scool: Bower
  • New scool: npm
  • Hip: yarn

I would myself focus on Webpack and npm... I have not heard of SystemJS before, did however see Webpack in repository list at the work. I do however need to investigate these products more.

Webpack can shortly be described as a build system with many features for the more demanding audience.

Gulp seems to be a system that started very small but may have become somewhat "overgrown" for it's initial purpose of appliance. I almost accidently used "Harp" for dynamically generating some parts of the contents here, liked it very much as a preprocessor for Markdown, but Ooops, it is preceeding Gump, quite unsupported...

I also tested something called Jade, a "HTML templating engine". It is mostly used for modular composition of web code, powerful if mastered. But: it's yet another "language" that, like Markdown, must be studied only for at a later time be converted into regular HTML code.

The Great Demos
Japan, Orange walk
So I took on a programming challenge at work: To fix a good looking, well working GUI with interconnected dependencies for advanced search options. For a specific part of the GUI, I used 11 hours in one day working at home to stamp out the code, slowly making improvements until it was release ready for the first demo. I showed it beforehand to someone in authority who could give a statement about the matter. She seemed to like it, and gave an OK.

However, during the follwing demo the time was somewhat limited, so none of the "beautiful" error handling was ever showed, they just demoed the plain OK case walkthrough steps. the following weeks afterwards I got busy with other problems to solve, though some rumours circulated that the part of the carefully tailored GUI area could become scrapped! I could not see any change requests about it, so I thought it was just a stupid rumour.

Fast forward to the second demo. The GUI was indeed changed, and none of the hard work remained!

Now it's Saturday and I wonder why no one told me anything, maybe I would just not notice or be interested...? The most easy solution to "handle" an employee I would think to be "You now, the users have completely changed their mind about the GUI detail, and we need to back-paddle a bit...". At least I learned some new programming tricks, and enjoyed the day of concentrated coding, but the project management around all this felt somehow unsound.
Broken chain
SSH key for Git: How to get started again after "The Big Deletion" event...

I will try in the Programming section to summarize how I did get the Git connection working so that I could perform the necessary SSH communication towards the Github site master backup. There were some underlaying "plumbing maneuvers" that were necessay, not quite sure that I got the activity fully covered... But almost everything, I am sure :-) ...
What's going on?
2019-08-31 Under surface once again...

  • Cleaning out old Wordpress photo galleries,
  • taking an external backup of the photos,
  • upgraded the PHP engine for the web domain, and
  • upgraded the PHP engine for the web domain
  • and experimented with creating a "variable" within the
    template HTML file to have easy access to a specific path
This implementation of an "inline varable" don't feel like the most effective way to go forward for handling paths, it mostly probably became an exercise in Python programming; I am often surprised by how easy things are do the first time in Python, especially compared to Perl...

I also looked at the file Programming.html file how to template it for other leading HTML under future underlaying layers of the immediate root level directory; like programming, "Arduino-info"...

Also done was comparing the leading CSS- and JS -included code for root vs sub directories, some irregularities there that needs to be corrected in the future.
Japan, Phussadee
HTML4 vs 5
Some talk about HTML5
2019-09-21 It's hard to find the exact date when the new tags for HTML5 were introduced. Shortly after 2010 there were mentioning of the various new principles and tags that could be utilized by a HTML5 compliant browser. At the time there were no browsers that could manage the full set of tags.

The DOCTYPE header was greatly simplified, and XHTML (a more strict version of HTML) was essentially dropped. The frameworks and HTML toolkit libraries previously used a complicated mix of DIVs and tables to enable a higher level of HTML development, while at the same time hiding the differencies of browser "quirks" underneath.

Now with HTML5 came a full range of built in tags that in one big swipe replaced a lot of code lines, replacing all those lines with one simple standardized tag. Usage of HTML5 tags had to wait until the various browser engine software caught up. IE11 and older versions of the Internet Explorer have almost fully disappeared, and the Microsoft Edge browser is soon to be replaced by a Chrome based version. We only need to fear of a "chrome lockin" instead of an Internext Explorer lockin...

But HTML5 is not only about saving code lines or promoting usage of a single, less bug prone tag that is the goal, it's also about creating semantic, "meaning" in the code. If you see the tag <article> tag, you'll know that this block is meant to contain an article. While using a <div> tag gives less guidance of what the purpose of following code is.

The older frameworks and toolkit libraries produce mountains of <div>, <span> and <p> code, often combined with an ID or class to (hopefully) convey the purpose, like <div class="article">. Also the <table> tag and it's <tr>, <td> were used to visually give layout structure on the web page. CSS have also evolved and given the developer more powerful built in layout capabilities.
Commmon smartphone screen resolutions
2019-09-14 Very often, i find myself asking the question: What is the most commonly used resolution in todays smartphones? It actually turns out that i.e. in Thailand smartphone users typically use higher resolutions than swedes do...

Walking around and comparing those countries it's hard to estimate the degree of smartphone usage, but Ive got the impression thai people don't have the same access to computers and pads. More commonly thai people (on average) have solely access to a mobile.

The ratio (width vs height) of the smartphone screen is a recurring frustration when developing a "mobile first" web site, as many full screen photos become surrounded by two black areas, the photos often don't follow the screen ratio.

The bigger the screen, the more you can appreciate the details, though I would say that a computer screen offer a superior experience. Bus this luxury of using a computer isn't always available.

At the dinner party you most likely have to make do with a mobile screen :-( ...

Most used smartphone screen resolutions in 2019
Japan, Orange walk
Under the surface
2019-09-07 So I finally took the step to use my Python code that put tiles together acting on a template HTML file as base.

The result you can see on this very front page. The index.html file was quickly getting oversized, and I really wanted the articles presented to be more easiy managed by compact tiles of code. This I felt would greatly increase the future maintenability. Also the header and footer files, I felt needed to be more uniformly included into any necessary main template file. The site is currently fully static generated (possibly a small exception of Bootstrap 4 activity going on in Javascript), and also very fast!

In the future I will likely need to add some kind of "side modules" in order to being able to interact more with the viewers. The easiest way I can think of is to remake previous Wordpress site into specifically taking care of such user activities.

I also plan to move some photos from the galleries witin the old Wordpress content. I believe that by now Bootstrap 4 or even just HTML5 + Javascript are fully capable of creating simple galleries by their own. Speed and smoothness is outermost important when you want to use a photo gallery, and I feel that Wordpress can't provide this anymore.
What's going on?
2019-08-31 During the last weeks I have been exploring how to make the code behind this site more trackable, editable, testable... A Python script to include html blocks is now called from an external Bash script, which makes some further processing and also starts a web browser page for visual inspection.

I have also put some mandatory html blocks in files named as TEMPLATE_xxx. Overall even a huge HTML file can now be more easily overviewed. My next step will now be to check validation of links and files present in the code, later also package tools into a Python GUI interface.

This site is constantly under construction as an exercise of programming an tool for web publishing/management and I expect the build up of some reasonable web content to take at least one/two years.

As stated earlier I quit using Wordpress because of the many "glitches" that I experienced with the environment and its modules/plugins. Also I found the lack of freedom and precision highly disturbing, especially when showing code and photos exactly as I wanted. By mostly having to do the underlining of the web infrastructure myself (with the current exception of Bootstrap 4), I feel that I get valuable experience as a bonus 😄 .
Japan, Phussadee
2019-08-11 I just found a very nice site that teaches Python, www.python-course.eu...

As long as you are able to read english on an average level, this site seems really thorough in the content (I better write that script soon as planned, the one scan my site after used URL's and that warns me when they aren't working any more :-) .

Perhaps the tutorial site is a bit crammed with text. Some people might appreciate a more clean style webpage for their studies. As for me, I find the writing itself excellent.

Some examples are given in the Linux environment, might be slightly disconcerting for some "programmer padwans"... I am perhaps the perfect audience, programmed before and used to see the Linux commands being used. Oh, now I see "This chapter can be skipped by Windows users" x-) ! I recently installed the free Linux version of PyCharm, an integrated GUI tool to help development Especially refactoring, for example changing variable names are difficult to do safely in a basic text editor.
Bootstrap 4
As a frontend framework for my web site I decided to use Bootstrap 4. The previous version of Bootstrap (3) supported (nowadays) outdated web browsers, and I felt that the newest version really contained some new strong worthwhile improvements. The framework offers ease of basic web styling and smooths over differences between the various web browsers that are commonly in use.

By using Bootstrap 4 (BS4) you don't need to worry about browser compatibility, especially CSS can causlobe inconsistencies between different browsers that are surprisingly hard to debug yourself. With BS4, you can trust the framework to overcome such obstacles. Later I need to fix a "bug" on this very page, the Bootstrap image stretches very peculiarly what comes to width/height ratio...
Following are some of the news for Bootstrap 4:
Bootstrap 4 is "Mobile first", which means: "increasing tendency to design their products for mobile phones or devices before making correlate designs for traditional desktop and laptop computers."
Card image
About the new site
At the bottom is the link to the "old" Wordpress site. Some articles were quite well written, though sometimes in haste and also keep in mind that english isn't my primary language. Previously I made the attempt to cover subjects in both swedish and english, but now I feel it's more reasonable to focus on purely english content. Possibly I might take a look back and reuse some articles, as sometimes good articles
over the course of time have become "buried" deep in the hierarchy of the site. Maybe you might wonder sometimes "Nothing much is happening", looking at the site. Under the surface and at the side of site I will be experimenting with open source, own tools for maintaing the content.

Upon returning to my Wordpress controlled content, I was amazed by the slowness; it was initally nice to get "help" to order the content but some gallery plugins were really painstakeingly buggy, suddenly stopped working. I changed photo plugin, but same thing happened after a while, the plugin suddenly couldn't find the third uploaded gallery... I now have to handle more content "by hand".

One big advantage are that you then really have to consider the technical architecture and think about tools to keep the site content in order. Using Wordpress leads to the developer getting detouched from the basic web technologies and having to learn Wordpress specific details, learn plugins that might at any moment become unsupported.

During the years past since I had much more regular contact with web technology, I have forgotten much of the purely basic web coding. Nowadays, many good framworks and tools have been created, at the same time browsers, HTML5 and Javascript has matured.

The web development feels much more interesting now that you can expect similar look and behavior over the common browsers. Microsoft are also finally giving up Internet Explorer as well as the Edge browser.

Only worry though is that Chrome have the dominant position. Firefox has greatly improved concerning speed, previously it was very "mono threaded"... The plugins for Firefox are still fantastic. No one wants a new web browser "monopoly", I think...