Qia Favored Markdown with qia HTML Custom Elements

UUID: b3d13226-ec22-43aa-9e81-f5962efdcdfc
Timestamps
- 20231208.Started this article
- 20231212.Wrote most part of this article

Recently, I have published quite a few articles about qia- prefixed HTML custom elements, a.k.a. web components. They have been in a context of my own need of better information management. I majored in Information Management and Information Systems at university and since then quite interested in the theries, methodologies, techniques as well as practices in information management and information systems. The digital revolution has made information management much easier in digital information systems, and there has come a lot of information systems made by the bigs or smalls. The years of COVID-19 are also the years of digital information management awakening years. Several great new information management software systems have been made during this time, viz., Notion, Obsidian, Zettlr and so on.

These information systems are great in my opinion also with a relationship to the support of Markdown files. Notion is an online information system, that is different to Obsidian and Zettlr which are local Markdown file-based information systems. Notion's support to Markdown files is the possibility to export as Markdown files in a reusable manner (even without Notion). (File-based is very important. Worthy another article in my opinion: Computers and OS's are also good information management systems. Although with drawbacks, but applications on top help - the file-based applications.)

What is special about Markdown?

Markdown means freedom and accessibility. Markdown is not a by-vendor-locked format. It is a specialized plain-text format. As a result of the open standard, there are a lot of editors supporting Markdown editing. Information taken in an application can also be consumed in another application. Worth mentioning, macOS QuickLook can also support Markdown by using plugins such as QLMarkdown which makes disk file browing much easier when trying to find a certain Markdown file.

Markdown is HTML-compatible therefore works well in the full cycle of information management. I haven't thought well about the name for this cycle, so let me describe it in longer text. Information management starts with input. One reads or hears something from outside like on the Internet, from a book or newpaper. Then one notes down the excerpts or thoughts around what received down. It is the collection step. One thinks more about collected information, then to modify, re-organize, restructure, and compose or recompose another piece of information. It is the creation step. One would like to collection feedback and review about the composed new piece of information, therefore publish it to an audience. Because of the popularity and universal adoption of HTML (web technologies) such as in E-mail client software, published in the format of HTML (the default compiled format of Markdown) would makes most sense. Just like I am publishing on this JH-Articles website. It is the sharing/distribution step. One gets feedbacks from the audience and read or hear them as the input of a new cycle. Cycles help leveling up the quality of information in the systems. Worth mentioning, because of the universal adoption of web technologies, like also for ePub ebooks, one would commonly reads things published in HTML formats, like you are reading this article. Noting down HTML content to Markdown is just natural as Markdown itself is HTML-compatible/native.

Markdown is not HTML. In good ways as well as unsatisfied ways.

Goodies of Markdown

The goodies include especially the ease of input and human consuming and the extended support for bi-directional linking by certain editors. HTML is very expressive and can present information in various appearances. However, writing HTML tags manually is cumbersome/tiresome and reading HTML raw text is hard for human. The need of an interpreter for HTML files adds up the difficulty of consuming it. The best thing about HTML, here, i.e., web technologies is the links or hyperlinks. It allows creating a relationship between different pieces of information. Markdown inherits this great design. And even more. In the Markdown community, bi-directional linking was the biggest vibe/hype in the Markdown awakening epidemic years. (Also as the result of the extra goodie, Markdown has a big ecosystem with a lot of contributors.) This is a new favo around Markdown since my adoption of Markdown in 2015 (as far as I can recall or even earlier) for my personal information management.

What is bi-directional linking?

It means when Markdown file A has a link (refers) to Markdown file B, in the viewing of Markdown file B, there is also information showing that there is a referrer as Markdown file A. It is mainly a feature of Markdown editors. But many Markdown editors adopt the same Markdown syntax for bi-directional linking, which is the so-call wikilink-style reference syntax [[...]]. It is an extension to the minimal or standard common set of Markdown syntax. And you may have noticed in this website, I also have my own invention/extension of Markdown syntax of links, which is [... (...)] for the support of multiple workspaces such as JH-Articles and JH-Blog, as the wikilink-style [[...]] is for one workspace/vault only.

What could be better of Markdown

Markdown is not HTML but rather a very limited set of HTML when rendered, so there is only a very limited set of information representation structures or styles of HTML gets supported by Markdown. In other words, there is a lot of information representation strucutures or styles that are supported by HTML are not supported by Markdown.

I like the neat/clean/compact nature of Markdown without HTML tags which enables easy input and consuming, but I feel unsatisfied with the limited ways of information representation especially when sharing. So I have started making my own HTML custom elements (web components) to extend the information representation structures and styles. This is the main reason why I have made elements including qia-audio-clip, qia-image-gallery and qia-accordion.

qia HTML Custom Elements (Web Components)

There has already several HTML custom elements in use by this JH-Articles website as listed aboved.

Briefly,

qia-accordion collapses multi-sectional contents to avoid making a page too long,
qia-gif enables viewers to pause a GIF image at certain frames decided by the mouse pointer,
qia-image-compare-pair enables comparing two images on top of each other,
qia-image-gallery groups multiple images into a gallery to save space and sets up a relationship among multiple images,
qia-image helps to limit the height of super high images to save page length,
qia-audio-clip enables visual audio experience with waveform and lyrics visualization,
qia-audio extends the native HTML audio element with visualization.

For more about these elements. Just search in this website to find their separate articles.

Using qia Elements in Markdown

Markdown is HTML-native, so using HTML tags is naturally okay.

Essentially, avoiding HTML tags in Markdown is preferred. Therefore, I had my extensions to Markdown again.

Qia Flavored Markdown

NOTICE:

I am writing it here to make it public. Possibly, some other software developers would also think I had great ideas and would like to copy to there software. Well, it is Internet, once an idea is out, it cannot be un-out. But if some one who adopts my idea here can give me an attribution, that would be great. Let me make it Creative Commons Attribution (CC-BY), although I know it could be ignored by certain group of people. (Keeping as secret is not some thing better. And applying patent is of course no no, as I also adopt and base on open things. - So for all who get the idea here, do not occupy good ideas with patent.) Sharing enriches the community which in return benifits the sharer. Like if more Markdown editors support my extensions, I also have more tools available to use.

So what are my extensions besides the aforementioned link extension [... (...)].

Some parts are optional (such as the {...} and "tagTitleAttributeValue" parts) and some spaces also work with line breaks.

What are the beaties of QFM

non-breaking or ensured minial-common-set Markdown forward-compatibility
- !tag-name{"tagAttributeName": "tagAttributeValue"}[innerHTML](src "tagTitleAttributeValue") is !tag-name{"tagAttributeName": "tagAttributeValue"} and link [innerHTML](src "tagTitleAttributeValue")
with regards to anther Markdown extension of tag
- #REGION and #ENDREGION can also be considered as tags
following good litteral interpretations
- {} > [] > ()
- ! as embedded or inserted
as upgraded version or with respect to []() and ![]()
- ![]() as the default for !img[]() when alt is considered as innerHTML
  - leaves space to translate ![]() into !qia-image[]()

Afterword (Remarks)

I am commonly afraid of waisting a good topic by not having good enough context to write about it, with such a worry of wasting a topic by not being able to write it well, I delayed a lot of writing. After the introduction of canonical URL and the revamp of Qia-Articles and Qia-Blog, I finally feel comfortable to start writing even though the first version appears as very rough.

Important aspects in terms of Qia-Articles versus Qia-Blog. One is timestamped as indicated by the wording of log in Blog (web log) while the other is more time-independed. Logs typically come with timestamps, and it would be just a one shot. Articles has no indication of time, therefore, a just-so-so article can be updated to be great in the future. And it always has a stable URL as the canonical URL.

With the right information publishing system at hand, I am no publishing this article with the good topic but maybe not so well written text.

In case you wonder, in fact, again, worthy another article. Why Qia-Articles? Just like Markdown, it is also has something to do with Freedom and Independence. I also used solutions such as WordPress, Jekyll, and alike before I started to make my own in 2016 (I guess). What are absent in other information publishing systems and what I need and implemented in Qia-Articles include

the RSS feed I can defined
the permenent link which makes sense
the structure of articles which is flexible (can change)
the canonical URL which also works after article structure change
the URL with information about the content
- such as the URL for this article has "Qia-Flavored-Markdown" in it

And making my own tools gives me more freedom.

I have a new idea, I just make it.
I make my own product design and I make it real beyond just prototype.

* cached version, generated at 2024-01-08 01:12:26 UTC.