Poetry with Yahi : amish coding and trolling with code

ποιητής, in greek means « to do », from this word derives the word « poetry ».

Poetry, in its radical meaning means : showing the stuff you do.

The « Art » and the « way » so dear to greek meant that not all ways of doing are equal : sometimes you can « inspire » by showing a path of lesser pain.

The « way » may be seen as a reference to the common way of doing things : the one best way, and the Art another way of doing more with less.

Yahi : coding as fractal poetry

Being jobless and thus a one man army kind of dev having to code everything alone, to ensure having a result at the end requires a lot of « poetry » and « Art » diverging from the one best way.

It is poetry in its goals, in its documentation, in its python code and naming and javascript code.

I will stress that basically poetry is meant to be perturbing, it is basically for some a synonym of trolling. It is fine for me, and I embrace it.

Poetry in python

It is a one line trick Basically, you transform a log thanks to a named regexp capture into a dict and then you use an addition to aggregate your data.

End of the story.

This is possible thanks to another « poetry » which are python dict (actually Mutable Mappings to be generic) that can add (and substract, divide, multiplied) thanks to the usage of traits.

Here, the God of (mis)fortune made me do a bad decision a long time ago ; try to make a metaphore based on trait.

Dict CAN be made to support linear algebrae in a non surprising way.

Some said : you invented a new algebraic data structure the tree-tor. A fractal-like vector that propagates the operation to the values.
I beg to differ since with a little trick you can restate that an intricated dict is no more than a one level dict, hence ... a Keep It Simple and Simpler algebraic Vector.

Suffice to pose the convention that any intricated dict { a : { b : 1 } } is the same as { ( a , b ) : 1 }.

Hence since you can transform a tree-tor in a vector without loss of information, a treetor is a vector with an expected behaviour of vector.

I actually proposed this to python-ideas as an inclusion to the stdlib, but core devs were less than willing to handle a code without a use that could fail in unexpected ways. And I do understand them.

So yahi, is a troll demo of using dicts to prove that (intricated) dicts that quacks like an algebraic vector, only using ONE operation (__add__) is already neat convenience. This single line is a TROLL by doing.

As a reader of poetry, when poetry is along the cliché, the expected way, it annoys me. I expect surprise, disturbance, perturbation from poetry.

Hence, when I do code poetry I expect to be perturbing, disrupting the « norm ».

Poetry in the naming

Well, trait is a trait, but it collides with the world « trait » meaning an arrow. Hence I decided to be metaphoric in the naming.

Archery based on traits, provides concrete classes of dicts that actually support linear algebrae: it's calleds bows.
I have been living on the american continent, curious of the culture of the native americans that was nowhere to be seen in the museum.

But when I was giving cigarettes away to squidjies on boulevard St Laurent in Montréal, they would tell me awesome stories that were nowhere to be seen.

So, when I read that there used to be a tribe of first nations specialized in archery : the Yahi which existence was wiped away from the surface of earth in the name of gold rush, I decided to use this name as both a reference to archery and the golden rush to the cloud. It is also a way to say fuck to the actual sorry state of the USA regarding the treatment of Native Americans that have my empathy.

It explains why my two main functions are notch to prepare the aggregation and shoot to aggregate. Using traits one line at a time fast to aggregate.

Maybe it is not smart since I may have trouble at the border, but anyway : I am too broke to buy myself a plan ticket to leave my country.

Poetry in design : being amish

I have implemented for companies numerous statistic in « real time » for web applications. It always struck me as overkill to use a multi tiers infrastructure some of which in the cloud to get frequentation data of a website at the second.

Sometimes, as a salaryman this excess of infrastructure was infuriating.

What if, we can simply parse log and make them available with the minimum « OPEX » ? (Operational Expanses).

What is less than using the cloud ? Deploying a local dynamic web server to serve all views required.

What is less than having a flask server ? A single all in one web page.

People in this case expect the full amish solution of static web pages, me I chose a all in one web page in the fashion of javascript driven à la single page app.

Breaking the purity of being actually statique, but not the security promise for people hosting the files as a static assets : no security holes comes from serving the result.

The result being standalone (JS/CSS/assets/HTML) it can even be sent by email as an archive/vizualisation format.

Poetry in javascript

I made to blog post to elaborate how I designed a « single page app behaviour with chained routing ».

The non poetic way to do this is to embedd virtual routing framework and not care how it is done. The one best way is to bloat your HTML page with shitloads of dependance.

I did not care less, I rewrote a full all in one view generator based on the included raw JSON I parse to build and graph everything.

The choice of using D3js (bar charts), and google jsapi (geo chart) instead of matplotlib was obvious to me : they produce great results with less investment in time than by using tools such as matplotlib that are a huge dependance.

Hence by chosing to graph views on the fly with JS libraries, I had already tainted my choice. It was a matter of time to put all the views in one page.

Conclusion

Doing more with less is more than trolling it is also questioning :

• our best practices/one best way;
• since doing without a result is not poetry but intellectual wanking, I worked my ass off that I fixed all the bugs I could before releasing (I need beta testers at this level)
• poetry itself, long boring piece of words don't move me, I think poetry should questions what it has become and focus back on REALISATIONS that DO SOMETHING in a way that raises questions
• while the world is burning, this code aiming at trolling grafana based stacks of data gathering, is also a question about where we go as a profession, with more useless CO2 being generated by our usage by having more and more bloated solutions

And most by not following rules, like PEP8, naming convention, and shit, it is poetry in the brutal way that questions the supremacy of form over intentions.

And at the end, releasing code that WORKS, DOING as a loser in my lonely dark room is a troll of all these projects coming to realm of free software without evangelists task force, public relations, marketing, famous rocks star developers. It feels great to go on the ring of free software (almost*) alone proving the strength of the ones seen as weak.
It is my poetry to show off what I can do from code to packaging and doc. Poetry is pride, pride is poetry.

Thanks

This project would not have had a refreshing without the help of @19emtuck that wanted to have fun on a project, and @be1 I begged logs to since I don't have a server anymore anywhere. And trust me, it's ridiculously hard to make this kind of project without millions of line of logs to test the robustness of the solution.

A virtual routing table in (almost) vanilla javacsript with two level of routing in 70 lines

The code

Since the code is small, before detailing it:

<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<style>
.content { visibility: none }
</style>
<script>
$(document).ready(() => {
    var query = new URLSearchParams(window.location.search )
    route = query.get("route")
    anchor = document.URL.match(/#[^\?]+/)

    $(".router").each( (i,e) => {
        var query = new URLSearchParams( e.attributes.href.value )
        $(e).addClass(query.get("route"))
    })
    $(".selector").each((i,e) => $(e).addClass($(e).attr("href").substr(1)))
    $(".selector").click( function(e) {
        e.preventDefault()
        history.pushState({} ,"", "" + $(this).attr("href"));
        anchor = $(this).attr("href").replace(/\?.*/,"");
        ({
            "#subroute1" : console.log,
            "#subroute2":  (e) => alert(e),
            "#subroute3" : console.log,
            "#subroute4":  (e) => alert(e)  })[anchor](anchor)
        console.log("subroute called:" + anchor)
        return true
    })
    $(".router").click( (e) => {
        e.preventDefault()
        var href=$(e.target)[0].attributes.href
        url = href.value
        if (anchor)
            url += anchor
        history.pushState({}, null, url)
        var query = new URLSearchParams( href.value )
        var route = query.get("route");
        ({
            "route1": () => { $(".content").hide(); $("." + route).show() },
            "route2": () => { $(".content").hide(); $("." + route).show() },
            "route3": () => { $(".content").hide(); $("." + route).show() },
        })[route]()
        console.log("route called:" + route)
        return true
    })
    if (route == undefined ) {
        console.log("default route")
        $(".router.route1").click()
    } else {
        console.log('dealing with: ' +route +':'+ anchor)
        $(".router" + "." + route).click()
    }
    anchor = document.URL.match(/#[^\?]+/)
    if (anchor) {
        console.log("anchor detected in URL:" + anchor[0] + "route:" + route)
        $("." + route +"  ." + anchor[0].substr(1)).click()
        console.log("sub route called:" +anchor[0])
    }
    console.log("ready")
})
</script>
<ul>
    <li><a class="router" href=?route=route1>route1</a></li>
    <ul class="content route1">
        <li><a class="selector" href=#subroute1 >sub menu 1</a></li>
        <li><a class="selector" href=#subroute2 >sub menu 2</a></li>
    </ul>
    <li><a class="router" href=?route=route2>route2</a></li>
    <ul class="content route2" >
        <li><a class=selector href=#subroute3 >sub menu 3</a></li>
        <li><a class=selector href=#subroute4 >sub menu 4</a></li>
    </ul>
    <li><a class="router" href=?route=route3>route3</a></li>
</ul>
<div class='content route1'>route 1</div>
<div class='content route2'>route 2</div>
<div class='content route3'>no subroute</div>

The need

In a project named yahi, for log parsing I am putting in a single HTML page all the data, and the views to avoid using a dynamic server, so I have to do the routing for calling the right javascript either :

• when clicking on the a element I chose for displaying data
• when loading an URL so that not only pages are available but also sharable.

So came the need for a level 2 router. Route layer 1 are gonna be stored in the GET key route, and subroute are gonna be called by clicking on the anchor of their names.

The how of the code

We being with the HTML:

<ul>
    <li><a class="router" href=?route=route1>route1</a></li>
    <ul class="content route1">
        <li><a class="selector" href=#subroute1 >sub menu 1</a></li>
        <li><a class="selector" href=#subroute2 >sub menu 2</a></li>
    </ul>
    <li><a class="router" href=?route=route2>route2</a></li>
    <ul class="content route2" >
        <li><a class=selector href=#subroute3 >sub menu 3</a></li>
        <li><a class=selector href=#subroute4 >sub menu 4</a></li>
    </ul>
    <li><a class="router" href=?route=route3>route3</a></li>
</ul>
<div class='content route1'>route 1</div>
<div class='content route2'>route 2</div>
<div class='content route3'>no subroute</div>

We tie the router to the HTML router class and the route is on one place the href value of the a element.
We tie the sub route to the HTML selector class and the route is on one place the href value of the a element.

When the document is loaded ($(document).ready) :

    var query = new URLSearchParams(window.location.search )
    route = query.get("route")
    anchor = document.URL.match(/#[^\?]+/)

we get the route from URL GET parameters, and anchor from the document.URL

    $(".router").each( (i,e) => {
        var query = new URLSearchParams( e.attributes.href.value )
        $(e).addClass(query.get("route"))
    })
    $(".selector").each((i,e) => $(e).addClass($(e).attr("href").substr(1)))

We tag the links of class selector and route with their respective subroute and route as a class for being to later able to target them with their CSS selector.

    $(".selector").click( function(e) {
        e.preventDefault()
        history.pushState({} ,"", "" + $(this).attr("href"));
        anchor = $(this).attr("href").replace(/\?.*/,"");
        ({
            "#subroute1" : console.log,
            "#subroute2":  (e) => alert(e),
            "#subroute3" : console.log,
            "#subroute4":  (e) => alert(e)  })[anchor](anchor)
        console.log("subroute called:" + anchor)
        return true
    })

We are gonna emulate a legitimate click on an a element, so first we disable it.
Then, we push in the history like a legitimate click does the URL that has been click making sure our subroute is the one specified.
I do cleanup that may be dead code of the anchor according to garbage that could be there.

and then I call with a dispatch table the subroute available.

And for eviting hogs, I don't know why, I have to return something.

    $(".router").click( (e) => {
        e.preventDefault()
        var href=$(e.target)[0].attributes.href
        url = href.value
        if (anchor)
            url += anchor
        history.pushState({}, null, url)
        var query = new URLSearchParams( href.value )
        var route = query.get("route");
        ({
            "route1": () => { $(".content").hide(); $("." + route).show() },
            "route2": () => { $(".content").hide(); $("." + route).show() },
            "route3": () => { $(".content").hide(); $("." + route).show() },
        })[route]()
        console.log("route called:" + route)
        return true
    })

We are gonna emulate a legitimate click on an a element, so first we disable it.
We get the wanted url from looking at the source of truth : our own href.
anchor variable is a reference to the one parsed from the URL. If it exists we append it to the url that we push in the history.
We get the truth of the wanted route by parsing the href value of clicked element, and with a dispatch table we call the route. Then, we push in the history like a legitimate click does the URL that has been click making sure our subroute is the one specified.
I do cleanup that may be dead code of the anchor according to garbage that could be there.

and then I call with a dispatch table the subroute available.

And for eviting hogs, I don't know why, I have to return something.

    if (route == undefined ) {
        console.log("default route")
        $(".router.route1").click()
    } else {
        console.log('dealing with: ' +route +':'+ anchor)
        $(".router" + "." + route).click()
    }

Here we look that route called in the URL, if none is specified we decide a default route

    anchor = document.URL.match(/#[^\?]+/)
    if (anchor) {
        console.log("anchor detected in URL:" + anchor[0] + "route:" + route)
        $("." + route +"  ." + anchor[0].substr(1)).click()
        console.log("sub route called:" +anchor[0])
    }
    console.log("ready")

Just in case someone JUST modified the URL in a click action we check the information from the document.URL. And, if so we emulate a click on the subroute if an only if it is in a div of the correct route so people cannot mess by specifying a wrong route for a subroute in the URL.

And that's the all in one page with the trick.

Code reading : a PoC of virtual router in less of 100 lines of JavaScript

Foreword

This is all about what the codes does, and how to read and (try to) write about code.
As such, first is the code in all its brutality, then, I am gonna try to help through the code and understand it.

What is a PoC ?

Nowadays : it is PLAIN BULLSHIT.

Normally a PoC is a proof of concept. Which in its own word could have been anything.

However in the context of the craftman ship of software, where the salarymen do actual code, it used to have more precise meaning.

It used to be a way for someone caught having a bug because of a design bug, proposing a new design change, to illustrate it to fellow coders, managers and sysadmin in a way that proved MINIMILASTICALLY that your design ideas where implementable. Minimilastically is important there. If as a coder you are annoyed by let's say a an inconsistent concurrent access to a database you can either decide to enforce concurrency on the database side or design of code side. Both are costly, so you'd rather invovle the minimum teams in the process.

It also implies that no Proof Of Concept without identifying a problem TO SOLVE.

Scratching an itch : self embedded multi route HTML

You see it is important to give context to reading. To be minimalistic to solve a code problem with a new design you have to say which problem it solves befoire commenting the HOW it does it (the code).
And context is broader minimizing dependances in another project. Why ? Because the less line, the less code I do on my non salaryman time, I want it to be über simple. It is my Beruf, not my WORK.
My pride lies in always minimizing, and not caring about the other craftsmen, bosses, or king.

My motto is KISS : Keet it Simpler and Simpler.

I don't like the Keep it Simple, Stupid acronym, I see it as a writer a useless gross attitude towards the reader by adding an unworhty insulting information.

Why would I fucking call you Stupid, dear reader ?

So my point -if you were shocked you made the point- is that you should be nice to your reader, at least as much as you intend to be unnice...

And with this code, I expect a lot of fellow coders being pissed but what you are gonna see.

So I hate useless requirements, dependencies, I am poor, with few stuffs, including time. So my interest as an amateur it to do well and be clean. Why, when I have a dynamic server in flask that does everything I need to serve the pages would I want to merge them in one and do it abusing javascript, the DOM and the limit of support ?

Because, above all, I want one asset, and my concept I want to prove the html side with javascript is a hell of a good concept to get rid of flask.

You see I am also a sysadmin, and having a dynamic web server exposes me to nightmares because a new attack vector came out.

But as a sysadmin I know that a freaking static web page for something that is vanity (yes looking at your logs is vanity most of the time, and else, you are troubleshooting a complex trouble and would like less annoyance of requirements to read the freaking stats) is bullet proof to security risks.

If I have the choice between a good enough solution that works from a crontab generating a stupid HTML page every let's each say 10 minutes, and a dynamic website accurate to the nanosecond using grafana and costing me an arm and exposing me to useless risks for a vanity stuff, I will choose the static web page with a sigh of relief.

That is the itch that scratches me, the minimum solution for showing more than one web page in one.

Spoileur alert I use it in one of my project to build this more complete example. An exemple I invite you to download (save as) and to open the exemple in chromium or firefox as a file, because complexity is increased a lot. And you see how much real code and proof of concepts both differs in a lot of lines but are the exacte same in the technique employed.

Wihtout further ado ...

The expected result

You have two links and when you click on them two different contents are shown AND the URL is expected to change because YOU OBVIOUSLY CLICKED a link, and thus history to work and that if you share the URL everybody has got the same result :

When you click ou route2, you see the content «route 2». Easy peasy. Giving the impression you have more than one page in a single page.

The code

<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<style>
.content { visibility: none }
</style>
<script>
$(document).ready(() => {
    $(".router").each( (i,e) => {
        var query = new URLSearchParams( e.attributes.href.value )
        $(e).addClass("a" + query.get("route"))
    })
    $(".router").click( (e) => {
        e.preventDefault()
        var href=$(e.target)[0].attributes.href
        history.pushState({}, null,  href.value)
        var query = new URLSearchParams( href.value )
        var route = query.get("route");
        ({
            "route1": () => { $(".content").hide(); $("." + route).show() },
            "route2": () => { $(".content").hide(); $("." + route).show() },
        })[route]()
    })
    var query = new URLSearchParams(window.location.search )
    route = query.get("route")
    if (route == undefined ) {
        console.log("default route")
        $(".aroute1").click()
    } else {
        $(".a" + route).click()
    }
    console.log("ready")
})
</script>
<ul>
    <li><a class="router" href=?route=route1>route1</a></li>
    <li><a class="router" href=?route=route2>route2</a></li>
</ul>
<div class='content route1'>route 1</div>
<div class='content route2'>route 2</div>

The how to read the code

The UGLY

So, normally here I have 100% of fully seasoned salarymen raging and drooling, because that's not how you do it, and I contradict myself.

I am contradicting myself in this that I introduced a useless requirements on jquery. I also use a non valid HTML page to show code that must work in very web browser and should be in perfect, valid idiot proof way.

Well, I hear, but I dare say it's the opposite, and I will come back to my reliance on the « quirk » mode very lax interpretation of the DOM later.

A proof of concept should work in all case, isn't it ?

I write the proof of concept trying as a writer to discard useless noise, and I use the indentation to show the 2 important piece of information : the document ready part, and something about route, and 2 element li. I went as far as making sure they were on the same level so that you cannot miss them.
And what I like with jquery is the small terse mode of adressing all elements by complex css selector.

I use the quirk mode of firefox and chromium (sacrificing a lot of users) because I rely on this browsers to add the missing information in a way I am used to.

I also sacrifice w3m Users.

My way of reading/writing code

So indentation matters, you understood.

Brievety matters so that you are not overwhelmed by memory pollution.

You eyes are catching the « ready » normally easily. That's where to begin reading from.

What comes before ?

Me clicking on what seems to be a route ? O_o

Where are you gonna follow then ?

It depends both below and above you have an answer.

Below the 6 lines of the HTML body (where it matters to look with css selector : THERE IS NO element with a class of ".a" + name of a route, so there is dynamic magic involved.

But ... they are contents that are two li related to the name of the route. Nice. Simple. I see what you are gonna do. CSS class name almost used as a comment.
If your bet was at the beginning, you already have the answers : some magic takes all the html elements of class route wich have an href element and create dynmically the class used to click on the element. In which purpose ?

Strange, but, ok, question answered, next.

I hijack and disable the onclick event of all element a of CSS class route.

Hinting that the route and the element a of classe route are the same. It's called semantic CSS :D like using the class content so that you know where the content is even if I don't use it.



Here, first thing first I claim we emulate the a href on click default behaviour which normally is, modify the URL, the history (so back can work) and load the content. When you click on a it fills the history with its incomplete href betting the navigator will fill the blank information. Next.

Then I use the native fonction to get the GET paremeter of the URL to unveil the content pointed at in my own href (introspection is better than being explicit).

Then, I put ";", and "()" to avoid syntax errors due to also I rely on a non conservative quirky javascript that is making the code look inconsistent.

And then instead of using a switch case structure I dislike I use a good old dispatch table based on dict. I emulate the on load event of executing javascript when a page is called. Next. But before ...

Some say it is snobism, some say it is geeky, most say stupid (and worse) and finally it is not the way I am used to see it done.

Why don't you respect your readers and write in a clear usual VERBOSE way. And in javsacript we call it an object not a dict, dict is coming from python .... bla bla

I keep it intentionnally short to mean : DONT READ IT. so people just shudder and pass their eyes somewhere else, and yes I am a noob in languages and geek jargon and I don't care, because what I love is to show something that can work, I know nothing of the name of everything because, well I prefer spending less of my precious spare time of assumed noob in JS to code in python or bash. I like your language when I can solve problems elsewhere by adding 20 lines of your vanilla (or almost) to make magic. It maybe obvious to you seasoned developers on how to do it. If it was an easy knowledge, believe me, I would have copy pasted it from stack overflow and not TOUCHED javascript. But I had the intuition it was doable, so I tried and yes, I must admit, javascript is sometimes also pleasant to work with.

I know it is perturbing for the grammar nazis of the one best way that confuses the form of the code without it's intentions when it is about respecting norms of clericals. But, when WE human beings are CODING by hand, what matters maybe to offer a visual help by removing useless semi colons, double quotes (like in my html), NOISE.

Tersity matters in a proof of concept, and you may want to convey what should be clear by sometimes using obfuscated shortest code where it doesn't matter.

Stack overflow greatest answers have all proof of concept made in an extremely terse writing. I love stackoverflow way more than stuff like ChatGPT, because people works their ass off doing non « business code », but minimalistic, at the point I stole the use of quirk mode in PoC from some of my read of stack overflow answers. Sometime the best trick is the code not being syntaxically correct.

So basically when you click on a a element ... it calls a function named route2 or route1 that hides everyhing but element with the CSS selector of the route.

Repeating the function is also made for the reader that calling the fonction doesn't matter, it's what the function does (so if nothing different than what is in the function : DONT USE A DISPATCH TABLE IF YOU DON'T NEED IT IT'S OVERKILL.

In my final needs I knew I needed to embedd different path of JS execution per page. To replace scriptsections. And that's it's also an expected behaviour of loading a page : loading the javascript in it if required. So for my selfish needs ; it matters.


Now that we finished the onclick event of the links respecting the moral contract of the original element, let's look at the remaining piece of this small puzzle : we parse the location of the current page in the address bar for the query to see if there is a route keyword in the asked window location.

Yep, we have the information, there, why not pick it ?

If no route is given in the route= GET parameter, I pick up any route as the default route. Since, you want to route, I guess, there is at least one route, so I pick up 0 by lazyness.

And then I click on WUT ? 0_o

Ah I remember ... the class dynimcally tagged with the css column ".a" + route by creating « an introspection » between the a.href HTML and the link that clicked it. Putting the same information of the route clicked in the DOM this time.

This double bijection being the minimum base of this great con, for minimal virtual routing is to create and idclass in the DOM from which I can go biredctionnaly with the route name in JS and maybe in the addressbar ^^



And that's finished. When I see that this was seriously given me as a must have framework of Javascript needed on top of react, I get angry sometimes.

So, because coding is sometimes a way of mocking, I do have some violence directed towards some of my fellow coders who are trying to impress me with framework for doing excatly this.

My code is terse, in a brooken insulting way for a lot of those whose job is at writing fucking uselessly bloated web pages that are killing kittens by the thousands because of the global warming it generates in useless stuffs dedicated to vanity.

This code reflect the vanity of doing as much as looking at your stats. And I embrace the critic I give to the others.

I spent hours on an internet that does not read me to make a point to someone that does exists only in my fantasies, and will never read me.



Vanity, all is vanity : stats, code, texts, HTML, javascript and all. But, I like it :D