I just finished recently coding yahi, a simple tool with a lot of work in having a single web page multi view output that have no external depencies on assets or javascript.
I am kind of proud.
I packaged it, because, no software exists without packaging, and not only a software package MUST install (QA), but it MUST in my standard have an alluring very short documentation stating in few words the use case.
It is not coding, still, I like it.
Tests, at least local (and I do them partly locally), must be done before pushing. Still it happend I have « big finger » syndrome and sometimes release some defects.
And I must be all the more careful I lost my pypi OTP.
Then, there is evengelisation : it is about trying to « sell » your software. But, not all platforms are equally accessible nor welcoming.
Selling free software is a major pain in the ass, however a software without users is shit.
We have nowadays only « fame » based social network, giving an unfair advantage to those with social capital, capital that weighs more than rationality.
Also modern social network don't have memory, they are like a constant flow of news which for avoiding needless costs get erased ... when they don't reach a certain fame level.
Leaving you two choices: being forgotten fast, or spamming often to exist in the noise of news. And being put in the position of spamming feels, dirty.
Even though I have at best some welcomed views, some positive feedbacks, it doesn't really is as pleasant as meeting real life persons and showing your project (even though it doesn't give a large exposure).
Evengelisation of software, is the most brutal part of writing a software the one that requires an abnormal ego and resistance to feeling insecure.
I hate it. But, on the other hand a software without users is like a book without readers : useless.
As a conclusion, I admit it's the part I'm the less cumfortable with, but any free software coder must go through this when he works alone.
PS : Speaking of books without a reader, I am also a free writer as in free software and my books in french are available for reading:
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.
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.
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 ».
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.
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.
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.
Doing more with less is more than trolling it is also questioning :
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.
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.
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 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.
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
[délire] La sociothermodynamique quantique
La sociothermodynamique quantique
Texte délirant écrit sous l’influence de la douleur, du manque de sommeil, et d’opium à cause d’une névralgie bien enquiquinante, mais qui me paraît fun.
Quand je m’ennuie en tant qu’informaticien, j’aime modéliser, et pour que ce soit plus drôle j’aime en faire des simulations.
Mais, des fois, je rêve d’une théorie qui me permettrait de valider mes simulations et qui évidemment serait analogue à mes simulations pour faciliter le travail.
Mon premier projet python était une simulation où à chaque tour, par hasard je prend un agent, je lui fait prendre une décision en fonction de ce qu’il « sait », une variable globale peut être, l’état de l’autre agent avec lequel il interagit. J’appelle ça une transition.
Cette méthode dite de monté carlo est pratique car elle se rapproche de la thermodynamique sur la gestion du temps qui devient l’accident des accidents.
On appelle ça pompeusement une simulation multi agent ou chaque agent donné un vecteur d’état, a une fonction de transition (action) qui mute ou pas son état.
Une deuxième étape où je fais souvent intervenir le hasard est dans la transition. Quand il s’agit de choisir, j’intégre toujours en élément de hasard qui dans ma tête modélise notre absence de savoir, soit parce qu’on a foiré le modèle, soit parce que de l’erreur s’est introduite dans la mesure j’appelle ça la température.
C’est la différence entre exact et précis (je sais ce que je ne sais pas donc j’introduis du hasard à hauteur en amplitude de mon manque de savoir).
Après l’approche bottom up (on part de ce que je code pour aller au formalisme compatible qui m’arrange), faisons une approche bottom down.
Partons de la quantique pour aller vers la sociologie.
Appelons chaque chose qui donne une observation mesurable un observable.
Et prenons des dimensions liées à un vocabulaire partagé X.
Prenons un éxemple sociologique indéniable dans notre société c’est l’existence de pauvres et de riches.
Et intéressons nous à la Bible, non pas en tant que référence spirituelle, morale ou religieuse, mais en tant que référence littéraire connotée. En tant que propositions d’observable quantique. C’est de la bonne came qui laisse des avis tranchés bien pratiques pour une analyse différentielle.
Prenons une analyse de sentiment pour le mot riche ; dans la Bible être riche est-ce une bonne chose ?
En fait ça dépend. Et, je vais ouvrir le catéchisme de ma grand mère : la Bible est en deux parties.
Une avec un Dieu de colère, de violence (dont contre les femmes) masculiniste qui aime les Hommes plus fort (David), plus sages (Salomon), plus patriarches (Abraham) et leur donne le droit de piller, violer et tuer.
De l’autre un livre ou Dieu n’est présent que dans la parole d’un Jésus, pauvre, qui lui même est fils adoptif de Joseph (un woke donc), qui prêche la compréhension « sauf à l’égard des marchands du temples et des pharisiens qui profitent de la religion ».
Le coup de chauffe de Jésus contre les marchands du temple peut être vu comme anticlérical. Et ce qui détonne par rapport à son histoire est que c’est son seul moment de colère et qu’il n’exprime aucun regret.
Il est à noter que riches et hypocrites se recouvrent.
Mère grand m’disait : tu vois Jésus arrive sur terre pour racheter les pêchés d’une religion corrompue et devenue violente.
Ainsi on peut distinguer dans la bible deux observations possibles à partir de la richesse : soit le doigt de Dieu qui explique la réussite miraculeuse d’individu élus (méritocratie) de l’ancien testament, soit une dénonciation de l’exploitation de la masse pauvres par diverses populations supposées riches (il est un peu raciste Jésus) dans le nouveau testament.
Et, dans un principe qui est chère à la mécanique quantique on peut s’amuser à regarder si les opérateurs commutent en appliquant à une même situation d’abord l’application de règles de l’ancien testament, puis du nouveau et en inversant ensuite et si l’on garde les mêmes conclusions.
Prenons par exemple les opérateurs
- A « Tu ne voleras point »
- B « Dieu a donné la Nature à tout les Hommes »
- C « les riches sont les élus »
En combinant B A C on obtient un résultat différent de C A B
B A C légitime la propriété privée. C A B enjoint les riches à ne pas voler les pauvres par le truchement de la propriété.
Yep, j’ai été le premier surpris en lisant Müntzer (le chef religieux qui s’est opposé à Luther jugé trop proches des tyrans pendant la guerre des pauvres) de trouver une justification appuyée par une démonstration appuyée sur la Bible d’un truc que je croyais Marxiste qui est : « la propriété c’est le vol ».
À partir du moment où les commandements de Moïse s’appliquent soit aux riches soit aux pauvres on a une vision sociale différente.
Il est à noter que les concepts bibliques montrent une ambiguïté. Ambiguïtés qui fait qu’il est dur pour des lecteurs de tirer une interprétation univoque du livre comme le prouve Müntzer qui fait dire à la Bible l’opposé de comment elle était interprétée à l’époque comme la justification de la tyrannie pareille au doigt de Dieu.
Actuellement, quand je dis que Jésus est pauvre, c’est uniquement parce qu’il les défend. Comment définit-on qui est pauvre qui est riche dans la Bible ? Pour moi c’est pauvre comme Job, celui qui subit l’injustice du riche, qui reste pieux malgré la peine.
Ce qui en terme d’observable est assez flou.
Alors prenons un observable moins flou : le rapport au cléricalisme et à la loi séculaire selon l’interprétation de la Bible selon 3 points de vue :
- les catholiques ;
- les luthériens ;
- les anabaptistes.
Si on en croit un filtre interprosé au milieu (donc un 4é point de vue) qui s’appelle Engels alors on a 3 interprétations concernant 2 points en opposition :
- le respect de la loi séculaire (que l’on dira du tyran) ;
- le respect de l’ordre établi.
On définira le clergé comme « ceux qui se font du pognon sur la religion et qui fricote avec les tyrans. » autrement dit comme des opposants naturels au changement à l’Ordre Établi.
Évidemment vu d’Engels dans la guerre des pauvres : les cathos sont les réacs (ordre et loi inchangés), les luthériens les socs dems (on respecte la loi, mais on rêve de changer l’ordre établi) et les anabaptistes les révolutionnaires (ON RENVERSE LES TABLES DES MARCHANDS DU TEMPLE ET ON ARRÊTE DE RESPECTER LES LOIS INJUSTES ! On refait le monde (par morceaux de communautés de tailles humaines), et BASTA !).
Pour certains c’est anarchiste.
Le point de vue d’Engels est sympa en ceci qu’il nous permet de revenir à la quantique et à la notion d’observables avec des valeurs exclusives et des bons vecteurs propres associés à des valeurs propres.
Mais aussi on se rend compte que le point de vue est un opérateur qui modifie l’observation. Je suis pas con au point de pas voir qu’Engels était un peu biaisé autant que Marx contre la religion.
Ouvrons une parenthèse sur l’utilisation de la Bible (ce qui est non neutre et polémique) pour discuter science. Elle a l’avantage d’avoir été (sur) étudiée par des fans des mots et de la sémiologie.
En plus, elle repompe un max. Deukalion et Noë ne font qu’un.
Enfin, les conciles apportent une lumière amusante sur la formalisation des valeurs propres, vecteurs propres associés à des observables et aux différences que cela entraîne.
Et de même que l’empreinte pythagoricienne dans l’ecclésiastisme est visible et orthogonale au texte lui même, on peut supposer sans se fouler que Müntzer n’était pas le premier des chrétiens à prôner de vivre radicalement sans clergé parmi les nombreuses sectes chrétiennes, et non chrétiennes pré-existantes.
Vu ma culture relativement pauvre dans le sujet, je prends la première référence que j’ai sous la main qui est une ancre.
Bref, revenons à mon assertion : ce qu’il y a de bien avec la Bible, c’est qu’elle a donné lieu à des interprétations qui ne commutent pas simplement en mutant un observable.
Genre de qui Jésus était il le fils ?
Dieu ? Un menuisier woke qui adopte un enfant qui n’est pas le sien sans poser de questions ? De sa mère ? De deux parmi trois, ou de la trinité (mais laquelle) ?
Quand Jésus est fils de Dieu, par exemple, cela veut dire qu’il est soumis à l’Ancien Testament (il faut opérer évangile puis ancien testament pour interpréter). Quand Jésus est fils de l’Homme, son point de vue prime sur l’ancien testament, créant une relation d’ordre différente.
Prenons un cas simple : deux mamans arrivent en pleurs disant qu’un même enfant est le leur, que ferait le fils de Dieu, que ferait le fils de l’Homme ?
Le fils de Dieu va au chapître jugement de Salomon et reproduit le jugement.
Ça manque un peu d’empathie et c’est brutal. Jésus ne chercherait-il pas à comprendre le trauma de l’une des mères et solutionner son problème sans jugement de valeurs ?
St Mathieu le dit bien, on te jugera comme tu juges les autres. (Évangile). Montrer de la compassion lors du jugement est au cœur du message du nouveau testament.
Et les Réformes (Luther, Calvin, Müntzer et les autres) sont justement un différentiel sur la commutation d’observation du monde quand on fait primer la valeur propre : « Jésus fils du woke ».
Et on voit ainsi que la Religion n’est pas une base d’observateur quantique car elle ne forme pas un ensemble complet d’observables qui commutent. Le bordel de couplage qui naît de la surdéfinition d’observable crée des ambiguïtés d’observation qui sont résolues par l’ajout de règles d’arbitrage (les conciles).
Régles d’arbitrage qui peuvent être vu comme des transformations de matrices.
Perso, je trouve l’idée que les communautés aient le droit d’amender leur bible pour en faire un texte acceptable par tous proposé par Müntzer totalement fendard. Ça résoudrait bien des problèmes pour en faire un bousin cohérent. Si l’idée est d’en faire un fatras d’entrailles de poulet pour lire ce que l’on veut y lire, mais selon une vérité locale élaborée entre (presqu’) égaux.
Je dis bien entre presqu’égaux, car la figure du patriarche y semble importante.
Discutons de ce qu’il y a de chiant avec la Bible : c’est un poil raciste et antisémite. Et moi ça me gêne un peu beaucoup.
Conclusion avortée
Voir ce que son cerveau à peine plus délirant que celui de Giordana Bruno avec ses monades peut générer est une expérience de vie qui vaut le coup.
Aussi, pour résumer l’idée, il faut comprendre que l’idée serait à observables (hypothèses) fixes de regarder les opérateurs (lectures) d’un même texte.
D’en isoler les sous opérateurs (ex : ancien et nouveau testament), de voir si ils commutent et de faire une analyse différentielle.
On notera que dans le bousin j’introduis sans l’expliciter la notion de valeurs propres, ni même la notion de dégénérescence de valeurs ex l’opérateur est-y riche ? peut donner deux observables exclusifs (fermions) pauvre ou riche (bible), prolétaire ou bourgeois (bible marxiste).
Ce qui donne en modélisation des envies d’utiliser des distributions de Maxwell/Fermi-Dirac pour sous tendre les valeurs d’utilités (énergie/motivations à agir) dans les modèles économiques.
Bref, c’est un de mes textes les plus délirants écrit dans des conditions proches de la perte de rationalité paisible ^_^
Cependant, observer la mutabilité des opérateurs (lectures) au lieu de celles des observables (axiomes/hypothèses) me paraît l’idée intéressante.
Subscribe to:
Posts (Atom)