Blog

16 March Monday

Today I woke up standard time 9am, and was then working on finishing off introducing ÀLaMode JSX syntax shortcuts for Bootstrap and Bulma. I created a script to generate types definitions to extend JSX scope annotations for HTMLAttributes interface, as experimented yesterday.

At some point I realised it worked for React but not Preact and it made me pretty anxious as I was really hoping to get it working with the latter, and invested a lot of time, effort and hope into it. If it couldn't work, I'd make me disappointed in Preact, but in the end I managed to get it done, as Preact declares JSX in the global namespace.

There's a bug in VSCode that prevents it from picking up property names with hyphens like container-fluid which is so annoying. If not for it, everything would be absolutely perfect.

For lunch, I went out to KFC and was doing some more thinking on the way back about work. It's pretty useful to think work-related stuff ;) as it distracts from problems and also enables to come up with solutions for the company. Instead of "why can't I", I'm practising to ask "how can I". It's not even that I might answer this question, but that my subconscious starts to actively direct me towards understanding.

After lunch, I decided to start the website for depack, and did some designs on paper, which was then marked up. I found a video on pexels with an explosion and used it for the section that says that there's no more Babel :) By the end of the day, some initial work was done on the website. There was a problem with @artdeco/snapsvganimator package where a method wasn't compiled properly, as it used an eval

class MovieClip {
  executeFrameScript(s) {
    eval(`(function(){${s}}).call(this)`)
  }
}

And because the compiler didn't see the reference to this (as it's inside the string), it took out the method out of the class scope and made it pure which means this wasn't accessible. This was fixed, and animation played fine.

TODO

• Move animation component into Splendid, or a separate @artdeco/animation component. It's a shame splendid namespace is taken on NPM and I don't know how to publish components that are not in the core of Splendid.
• Add [] markdown tickbox.

7 March to 15 March

7th was a Saturday and I went out in the evening. The 8th was a Sunday and I had a hangover for being rude to the cloakroom attendant who kept telling me off for taking a coat out to smoke and at the end of the night I lost my ticket, had to pay so I got agitated with him as he distracted me from thinking about where I'm putting it.

On the 7th I found this meditation "I am Not the Body, I am Not even the Mind" which is quite good. It's supposed to be repeated 2ce a day for 30+ days :P But by the end of that week it was clear that listening to all that positive "vortexy" stuff really made me feel better than anything for the last year. It's actually the only thing that works.

Monday was spent recording a bit more videos to finish off the Youtube film. Tuesday editing, and so is Wednesday. Got really lazy with the blog and don't even know what's been happening whole week, but the main focus is that at first I wanted to fund raise for Irio as a product, but then I realised I needed to switch attention to Depack as a bundler, since it could reach more people and is just more logical. The hot reload that I was writing about thus isn't part of Idio, but of Depack, because front-end developers and designers wouldn't want to get into intricacies of setting up Idio server's middleware. Therefore it must be abstracted into a bundler, that is, depack.

Sunday the 15th was the most intense day when I was adding planned JSX features into ÀLaMode, like class names into properties etc, and integrating Closure Stylesheets. A few bug fixes had to be done on the latter, like recursive calc(calc()), and :not(.A.B) syntax which for some reason was said to be outside of grammar.

TODO

• Simplify calc in calc in Closure Stylesheets.
• Provide a development server for Closure Stylesheets so that Java doesn't have to be restarted again and again.

6 March Fri

Slept long even though I went to bed at 3am, only woke up by 3.30 as well because of sleep debt from yesterday. I wanted to get access to the logs from ElasticSearch, but via Kibana, so the question was, how to setup Kibana. I used to have an older image with stripped dependencies, but for version 6, so I started working on updating to version 7, using the same method with install-deps that tries to start the server and listens for errors.

I got to the stage where I could run the install-deps script that install dependencies that are missing. A couple of more internal node_modules were added, like analytics and ui-shared-deps. The Interpreter plugin now requires babel runtime as prod dependency... Ui plugin requires Webpack as prod dependency... kbn-i18n requires react as prod dependency... I've abandoned trying to remove webpack as it seems like the ui is tightly coupled to it. It seems crazy to me that you need to run webpack to run a UI server. Usually people build their UI, not serve it with a build tool. Although I was initially upset about loosing an hour on this and not being able to achieve the same result as before, it actually proved my point about the Open Source vendor lock, how Webpack is so integrated into systems that you have to run it for your project to work.

After not succeeding with the upgrade, I left things where they were and moved on to implement my own UI for the admin panel in artdeco.tech that would query hits data from ElasticSearch using its API. I got experience in querying data records from the ES and also learned to use pagination, implementing the "LOAD MORE" button in the admin UI.

Working on the system made me think more about the Irio framework that could work as a unified solution for full-stack apps where types are kept as XML so that they can be compiled with Closure.

5 March Thu

So I woke up at 6 am today, and then slept at 5pm until 7.30pm. In the morning I was rereading the idio article about hot reload, and thought about the links shortener for the website, so that I can track clicks. Alibaba gives a .tech domain for 1 year for free, so I used that opportunity to register artdeco.tech. It was perfect for setting up the link system.

To deploy this app, I also needed to update the idio template on MNP, because last time I copied some improvements across, the template stopped working because the API usage was incorrect. I addressed this issue and update the Dokku question, which was only adding a remote git host for deployments to dokku. But I wanted to make more possible, such as creating an app automatically, calling letsencrypt on it, and connecting a database to it (this one in future).

The problem is that when you try to establish an ssh connection to a new host for the fist time, SSH client will actually ask for confirmation to add to the list of known hosts:

The authenticity of host 'akashic.page (8.108.77.44)' can't be established.
ECDSA key fingerprint is SHA256:FGxDgulqxG8ReCdMguJRUvSn2M2OaBdYg7+B0+8VU8Q.
Are you sure you want to continue connecting (yes/no)?

I tried to use my forkfeed package to automatically pass YES to this question but it wasn't working. Having spent about 30+ minutes on this, and thinking that I've found a bug in Node.JS when forks' options are being ignored when a CWD is passed, it actually turned out that the SSH client is writing directly to the terminal:

ssh opens the controlling terminal directly via /dev/tty and that's where it's writing that message. unix.stackexchange.com

That's why the message wasn't written by the fork itself, but by the terminal, so I couldn't feed the yes answer to it. That means that users have to manually type in yes which is OK. It just was very confusing as to why the fork wasn't writing the message I saw in the terminal.

I then also added logarithm middleware to Idio server, since it was present in the idio template via middleware constructor, so I wanted it to be part of the server, for quick access. During the documentation stage, I gave an example of how an error would be logged, and... it wasn't actually logged as an error. My assumption when writing src for logarithm was that Koa will catch an error and set the response status automatically but it doesn't do it. Instead, it waits for ALL middleware to execute, including logarithm, and only then catches errors and calls ctx.onerror which sets the status code. Therefore, any faulty requests weren't actually logged properly with their status code, but with 200 instead. Moreover, the request method wasn't logged. So I fixed those problems and merged the middleware into Idio.

When I felt tired I read Alexander who's one of the coolest people ever lived, Constructive Conscious Control. It's about how people subconsciously learn to do something wrong and then repeat it for the rest of their lives. Yet when shown how to do things correctly, they perceive it as wrong and can't adjust. Through not doing first and listening to the instructions of the teacher instead, who then adjusts their posture/position manually, they can gradually unlearn their incorrect sensory appreciation and learn again.

I keep opening the book on random pages and rereading chapters at random. This time it was a good one, about complexities of civilised life:

"Life is too complex" — what they fail to recognise is that this condition is the result of their own, or others' ill-considered, end-gaining attempts to surmount the difficulties encountered during the progress of civilisation.

This is all too applicable for the state of JS programming. The tools have become so complex through the evolution of the language in the last 5 years, and people seek to gain the ends of adhering to standards and inventing new ones, that when they see something simple, they're going to reject it subconsciously as they're so used to complexity.

---

After waking up, I went on youtube and typed something for search, and this video came up:

The thing that is being said is that why we're so sure about the materialistic nature of the world, and then we've been conditioned to ignore consciousness. The whole universe is permeated with consciousness that is aware of our experience yet we never think about it or question its nature. The most interesting question, is what is it that thinks and is aware of our thoughts, it's impossible to answer but if we start asking, we can start discovering something beyond our daily conditioning.

His theory is basically reverse-reality hypothesis, that we don't perceive the single world, but there are many different private worlds for each individual, yet what we share is consciousness that is the one underlying everything. The reality is projected onto our sensual and mind experiences as a hologram and we think that we see objects yet objects are just expressions of the __ (what, something that can't be spoken of for the lack of words?).

It had really soothing effect just to know that something is aware of my experiences. It's very nice and calming, just to get outside that materialistic box for a second and connect with the source. Need to stop thinking and listen for a second. It's true it's aware and if stop with thoughts it gives us clues. It's aligned with McKenna and all that better world beyond our habitual thinking. It's good to reverse polarity and made me relax as I found something I liked and related to. I like how he put it that something is aware of our experience.

The next one was this amazing woman, so energetic and positive.

You've gotta learn vibration. you must get conscious control and awareness of what you're vibrational broadcasting because that's equals your life. a lot of pessimists are accurately predicting outcome. a lot of pessimists are accurately predicting outcome. your thoughts matter.

It's pure therapy, about focusing on good thoughts. With trauma we get focused on the problem and think that, but her method is to actively think good things. We will always be thinking it's no point to be like "i'm not going to think", just do positive thinking. With mediation, we can just tell our bodies, like to an animal, "stay put", to avoid the habitual negative thinking. "I can practice optimism until it becomes the way of life." Take your attention from problems and they will cease to exist.

Both of this things really relaxed me and made me feel less stressed. It's how I want to feel always but what can I do when a real criminal has ruined my life? There's this hypothetical "positive attraction" mode, and there's reality when psychopaths ruin you (am i complaining? yeah yeah). If I wasn't doing all the work that I'm doing, there would be nothing that could save me, so positive thinking is a good addition and mental gymnastics to achieving success, but there must be hard work behind it.

After that, worked on MNP to update the API with removeBlocks and keepBlocks functions. Also published types for the API so that they can be used in the configuration file and tested it against the package. Created a Preact UI for artdeco.tech to add new links with redirect.

4 March Wed

Since I finished at 8 AM yesterday, today I woke up by 6 PM. Had to write a blog post and then was doing housekeeping. Had time enough to implement parsing of <ul></ul> blocks in Splendid, and fixing the video tag in the Idio website. Now this blog can catch up with proper dates, let's see if I can catch up with sleeping at night. There's no rest for the wicked maybe. There's no question about sleeping less but maybe waking up 6 AM and going sleep 8PM is better than the other way around.

Dot sucks replied to me on twitter with a like. Still thinking about that Open Source Sucks guess article if they let me publish it. The point I want to add there is that even if something sucks, it doesn't mean that we have to be very emotional about it, we can act responsibly and work together on fixing it. But sometimes people and brands just don't listen and want to get away with it, and look what happened to the Labour party in the UK last elections, because people thought they didn't listen. OK we can cooperate but the work is a competitive place. How to reconcile the two?

TODO

• Reverse Splendid: reverse section breaks also, otherwise they keep changing in diffs which doesn't happen normally.

3 March Tue

When will I ever wake up happy? Although I'm accepting it as reality of life to wake up with really heavy head, stressed out and thinking about all the same thing. I don't almost identify myself with it, it's because of stress hormones due to hunger and also it's because the thoughts and consciousness are so contrasted to the blissful happy sleep.

Been working on the article the whole day. As I was saying yesterday, getting annoyed with stuff was just a way to express emotions it's not really that necessary in an informational post. When you're in that state you feel like it's important to say those words but people reading it won't necessarily be in the same frame of mind and because there's no usefulness of information and only some rambling, although meaningful, it can set readers against you.

I realised that when I actually installed Webpack and it took about a minute to install, which wasn't that bad. I was portraying it as complete insanity but I always had quite warm feelings towards Webpack as I used it at work and it helped to build software. So I calmed down and started taking aggressive stuff out. One interesting thing is that I picked up that EMPHASISING points in capital letters from Kazchinski and the majority of times it was these things: you can expect RESPECT and feel like VALUED user, etc. Most of that had to go, but I left a few points about being a user vs being a developer, although gave praise to Webpack also, because it did solve the bundling problem.

Created an animation for the article also and some graphics regarding scientific approach in programming. What I realise, it's not hard to actually be polite and respectful towards other people and there's no problem with that, I'm not an idiot. It's when certain others behave like total children yet they have no feedback as to their own behaviour and think they're correct while being extremely arrogant — this is the most annoying thing. But a responsible man can handle that?

As usual, when not knowing how to do animation, a bit of anxiety and leaving the workplace for food/tea etc. But in the end, you're just, let's get on with it, and draw a line. I know I want it the prettiest very well designed line in the world, but let's just press N and draw the line / a circle. I wish I could draw properly, but we have to work with what there is.

By the end of the day (or night, or start of the new day as it was 8 am), I was testing frontend middleware on photo-uploader, and it didn't work as I didn't write code in Idio to hook up the hot reload config properly. Also when overriding methods of the class's prototype, if it's a getter, it will actually be called:

class A {
  get test() {
    console.log('hello')
    return 'test'
  }
}
A.prototype['test'] // -> this calls getter and
                    // produces side effects
                    // such as console logging

Instead, I'll have to use getOwnPropertyDescriptor for updating prototypes. Moreover, I realised I have to not only update those methods that changed, but ALL methods of the prototype, because the code in the file might have changed that is referenced by the method, therefore even if its code didn't change, it might be calling a function that was updated.

class A {
  test() {
    return example('test')
  }
}

// this can change so the whole of prototype must change
// on updates, since we don't know which method used it
const example = (s) => {
  return s + '!'
}

Stack overflow is addictive AF. They're worse than facebook because you're generating quite a bit of interaction and you always want to go back to check responses / whether your answers were accepted. I don't like that it's triggering the part of the brain that's compulsive. Plus their badges... Visit on 600 consecutive days, keep getting 200 rep, etc. It's really annoying.

Finally, when experimenting with hot-reload in React, I had to install it and try updates. It was good to understand how their, and Webpack's reload works in details. This type of information is much more useful for a blog post instead of talking about how we're all hostage to their technology. Abramov's reload does have disadvantages: when stepping into a method, you have to click multiple times to go through proxy. Same with Webpack's modules, you have to click "step in" thrice to end up in the function that you want. Therefore my reload is even better than these heavy solutions.

Also a bound function won't be updated in React-hot-reload, since it was bound in the prototype, so we're equal here. One way to fix this, is to override the constructor method of a class which will only be called once, and apply a proxy to any function that is being bound. This should only need to be done for bound functions as all other times we can simply override the prototype.

TODO

• Parse stuff like class A; export default A for hot reload as it's used quite often.
• Hot reload bound functions (experimental).
• Update Splendid to parse list blocks (to avoid writing <ul></ul> every time).
• Move animation component to Splendid.
• Check what happens when a method is added to a class — will it be available to the proxy in react-hot-loader?

2 March Mon

Working on the content for the website. In the morning, I started answering StackOverflow questions. I think a little bit of time in the morning is good for a warm up, and helping somebody is definitely a way to keep positive as it can really mean a difference to others who can benefit from your experience.

Program-wise, I wanted to implement a gif-video component for www.idio.cc, so that a large 400kb can be converted into a movie automatically with ffmpeg, and lazy-loaded. Chrome lazy-loads videos by itself, but other browsers might not do it, so we first load a placeholder, and then a video on top of it when the component is scrolled into view.

After doing this, I needed an API from Splendid to extract image width and height, which was implemented by but as a private function before, so I made it available. A few more bugs with paragraphs were fixed. The width of webp images isn't increasing above original width as was happening before, because the "sizes" attribute could include width even larger that the original image. Web components are now published in a separate package because they don't update as often as source code, yet are 500KB in size so each time I republished, it was taking up unnecessary space.

• webp = web picture
• webm = web movie

I've been writing the article about pure hot reload. Went on talking about new "open source" vendor lock since webpack is now COMPULSORY, yet it's made of 350 dependencies which is mind-blowing under normal circumstances, but because of transvalued principle of software, it's absolutely ok and nobody is noticing. So I was a bit negative about it. For some tests, looked up Zoroaster quotes. It brought quite mixed feelings. On the one hand, he's about good thoughts / words/ deeds:

Turn yourself not away from three best things: Good Thought, Good Word, and Good Deed.

Always meet petulance with gentleness and perverseness with kindness. A gentle hand can lead even en elephant by a hair. Reply to thine enemy with gentleness.

Which is good as it's making you operate from the rational part of the brain, rather than emotional and the one that's fighting for survival (hate, anger).

On the other hand,

War and courage have done more great things than charity. Not your sympathy, but your bravery has saved the unfotunate.

You shall love peace as a means to new wars - and the short peace more than the long.

I feel like those are not by Zoroaster actually, but from Nietzschean Zarathustra 😄 There's a lot of courage and war waging in Nietzsche, which seems to be opposite of peaceful Zoroaster, although I might not know enough about the latter. Still what I'm trying to figure out if it's OK to talk about things I don't like in a way that I want to, or not and I should be more chilled out about it.

"When we are in doubt whether an action is good or bad, abstain from it." Zeus's mother taught him not to make enemies but friends instead. Tao is about helping others in a way that in the end they say, "we did it ourselves" and not making anyone upset as it's going to bring imbalance. On the other hand, it's all philology. Real world is rock-solid and if people weren't taking enough responsibility why they're not expecting to be told off? That's where right wing comes in, to be able to ask hard questions and express oneself in a way that is appropriate to the level of feelings that I have if they're justified. Have I taken enough responsibility?

1 March Sun

A lot of sleeping today. Listening to Zoroastrian prayers on iPhone, it's pretty chilled. One of the main principles of Tao is Pu: a Chinese word meaning "unworked wood". The mind is the one that discriminates while in reality things are unworked. But if I can just listen to beautiful Avestian while not getting my head stuffed with other shit prevalent in religion, others take it too seriously. This is to the point, if I like Avestian, don't others who are passionate about other stuff, deserve to listen to what they like? One thing is to just listen to some calming speech you don't understand, another one is to get stuck around fake concepts. But to each his own, isn't.

Worked more on frontend and enabled hot reload for CSS and standard JS files. Integrated it into Idio with documentation. Moreover, Idio now also receives JSON Body middleware to parse incoming JSON requests easily. Started to make idio website. Found a bug on GitHub that prevents you from adding a WWW domain if you've set up an apex domain already (e.g., I had idio.cc so I couldn't set up www.idio.cc). The website doesn't work from Canada because cc domain doesn't get resolved which isn't great.

Updated Splendid template for Idio, as well as made changes to Splendid itself to include closure-stylesheets as STDLIB. Fixed paragraphs extraction which wasn't forking properly before. An interesting point is that regexes are sticky, which prevents matching multiple consecutive paragraphs

We want to match

-- start

Paragraph 1: Hello world

Paragraph 2: Foo Bar

-- end

// regex to match this:
const regex = /\n\n[^\s<][\s\S]+\n\n/

The regex makes sense, but because the first match will end with \n\n, they won't be included for the next match which means the paragraph won't be detected. The example is simplified, but it conveys the point. The work around is

To simply run the regex twice :) Because we don't want to match tags ([^<]), the first pass will create a paragraph tag <p>Hello World</p>, but the second time it will remain unmatched, so that the next paragraph can be detected. It's good it's working properly now.