Miscellaneous Shadows

I remember reading once, and I don’t remember where, something someone said about the nature of terror movies. “Terror movies” it went, “they don’t explicitly show you something scary, they imply it. They give you an empty box, and they tell you that there’s something awful, terrible, dreadful inside that box. That box, it holds the most awful things in the world they say, and THEN, your mind does the rest of the work. It’s your mind that fills the box with something you absolutely despise and dread, something that makes you miserable, something born from the deepest pits of your subconscious”. It’s pretty clever, they use the power of your own mind against you, they let you come up with your on dreadful creation in the most masochistic way for you to torture yourself

Now, why did I open with that in a blog entry titled “on the nature of happiness”? it’s really hard to define something as abstract as happines, but it’s easy to tell what it’s not. A life of terror, dread, a sense of hopelessness that something bad will happen is not happiness, it’s the opposite of that. Maybe if we know what happiness is absolutely not, we can define it, at least in part, as the opposite of that. When something bad happens, it’s natural to feel unhappy. However, for us to remain unhappy for long, that can’t happen without our own help. For that to happen, we need to fill the boxes of our life with our own dark expectations, we come to expect misery, terror, dread, rejection, and just like in a terror movie, we suffer in our own minds, torturing ourselves with ideas born from our own psyche, which more than likely, a big amount of times do not end up reflecting the real world, but they do become our world nonetheless, for the suffering they make us feel is very real

I’m going to talk now about the one time the vast majority of people remember as happy days, that is, the early days of their childhood. We don’t need to be rich, famous or live in a mansion to be happy as kids for the most part, what marks the difference, at least as far as I believe, is our expectations. Every new experience sounds awesome, the prospect of knowing someone new or going to a new place has your mind overflowing with exciting ideas about the things we might encounter, and so we fill the boxes of the unknown with happy thoughts, expectations, and we experience happiness in our minds. The place we end up visiting could have turned out to be boring, but we were experienced happiness instead of suffering prior to getting to the place (I know that personal experiences can vary wildly, but I expect most people to have experienced this, at least)

This is probably the natural state of any child, to fill the empty boxes of their lives (the idea of experiences that are yet to be lived) with good things that make them experience happiness, rather than bad ones that make them experience dread and despair in their minds (and we are attached to our minds every minute of every day, so that matters a lot). However, as we grow up, bad things happen sometime, it’s natural, and sometimes, a bunch of them happen in a row over relatively not that short periods of time. Then, during those dark times, we start filling the empty mental boxes with bad things, things that make us suffer before we actual experience things, and like that, we turn our lives into a horror movie, something that can grow into a habbit, one that might keep living on even long after it stops reflecting our physical reality, however it remains our mental reality, and that might be the same as just outright saying that it stays being our reality, for we experience everything through our minds. Our reality then remains a terror movie, even long after the dark times have passed

At least to an extent (a significant one I’d say), wether we are happy or unhappy depends on the sort of things we fill the mysterious empty boxes of our lives, those that represent experiences yet to live, our future, both the big things and the small ones, and our entire future is comprised of them. Every new day is an empty box, so is every new person you meet, every place you go to, every conversation you have, every choice you make. It’s not easy sometimes to fill those boxes with good expectatives and thoughts, and maybe it’s not good for our own sake, since even though being as happy as a child sounds good, it also exposes you to danger when you have to take care of your own safety. Maybe growing up is all about finding the balance of the sort of things you fill the empty boxes of your life with, don’t make it a seen-through-rose-tinted-glasses cartoonish movie (although doing this sometimes can’t hurt, I’d say), but also don’t make it a terror movie by telling yourself that the boxes will be filled with dark, dreadful things. Bad things will happen sometimes, but also good things, and if you suffer before the bad ones happen due to expecting them, you will also suffer when they do happen, so you will have suffered twice, whereas if they doesn’t even actually happen, you will have suffered for free, when you could have instead spent that time being happy

Guided tour to help picture what percentages mean tangibly and visually

Whole percentages (e.g. 30%)

First, imagine we have red balls and blue balls, which we can have in different proportions

If I say that red balls make up 30% of the ball population, that means that for every 70 blue balls, there are 30 red balls, so, I can split the entire ball population in groups of 100 balls each, and have each group contain 30 red balls (because out of every 100 balls, 30 are red)

So far so good, probably

Decimal percentages (e.g. 0.3%)

Now, if I say red balls make up 0.3% of the ball population, what does that mean? It means that if I split all of the ball population into groups of 100 balls each, then, out of every 10 of those groups, 3 of them will contain 1 red ball, everything else in those 10 groups will be blue balls. So, per every 10 groups of 100 balls each, I will have 997 blue balls and 3 red balls, or to put it in another way, per every 1,000 balls (regardless of color) in the ball populatiom, there will be 3 red balls and 997 blue balls

If I make it 0.5%, it means that 5 out of every 10 groups of 100 balls each will contain 1 red ball, so 5 red balls per every 995 blue balls, or 5 red balls and 995 blue balls per every 1,000 balls in general

Let’s go deeper down, what about 0.03%? it means that out of every 100 groups comprised of 100 balls each, 3 groups will contain 1 red ball (so in those 100 groups, there will be 3 red balls and 9997 blue balls).

What about 0.003%? it’s the same, but this time, out of every 1,000 groups of 100 balls each, 3 of those 1,000 groups will contain 1 red ball. 

The pattern repeats for every additional decimal 0 you add to the percentage.

Percentages over 100 (e.g. 130%)

If I say there’s a percentage of 130% red balls, that means that for every group of 100 balls, they all will be red, and you will have 30 extra red balls

Key idea

The key point for visualizing percentages is to visualize everything in groups of 100, and filling them up in different ways (the name is a clear clue, “per cent”, per every hundred). It works exactly the same for parts per thousand (you use groups of 1,000 instead of groups of 100 here to aid the visualization) and parts per million (using groups of 1,000,000 ofc)... or parts per whatever you can think of, they’re all just the same core concept, a proportionality value or ratio, amplified to a different higher or lower magnitude

I will add pictures later, to ease in the visualization, since this can be a bit tricky to visualize

The only purpose of this webpack configuration, is to be able to bundle up javascript module files (which should be linked appropiately using ES6 import/export statements) and allow you to modularize your javascript code, nothing more complex than that (so no babel transpiling or anything, maybe I will write a blogpost later explaining how to do that)

This code has to go in a config file in the root folder of the project, the config file is normally named “webpack.config.js”, so that if you run a node script such as “compile-js”: “webpack --watch”, the config filename doesn’t need to be specified since it’s the default filename that works with webpack, but if the name is different, you need to specify it (i.e. “webpack --config <filename>”)

The code that goes in the file:

const path = require("path");

module.exports = {    

    mode:"development",    

    devtool:”source-map”,

    entry:{         arbitraryName:"path/to/file.js", //relative path from the config file folder         arbitraryName2...         arbitraryNameNth...     },    

    output:{         path: path.resolve(__dirname,"./"),         filename:"[name].js”     }

}

It’s basically one big object that will be exported using commonjs node export mechanisms, since it can’t use ES6 import/export statements yet afaik (as of july 2021). Every key of the main object will be explained next

mode:

This key can take as its value the strings “development” or “production” (among others), and depending on which one it receives, it will apply different optimizations or not at bundling time. Basically use “development” mode until the project is ready to be delivered, then switch this value to “production” so it applies a bunch of optimizations (which make the bundling process slower in theory, or in practice at times)

devtool:

This key can take a really big number of values, it’s purpose is to create a mechanism to make it easier to debug code using the development tools of the browsers. Why? because without this, you will have to deal with the mangled bundled files, but wih the source map, it lets you see everything as it was before the bundling process. “source-map” value makes it so there’s a generated “.map” file as result of the bundling process, other options (”inline source map” ones) don’t create this extra file, they rather add the mechanism directly in the bundle file, but from my experience, the result is not as good and makes debugging harder. This “.map” file should probably not be delivered alongside the rest of the files in production

entry:

Is an object where every key is an arbitrary string that will be used later to name the output files, and the value is the path to an entry point js file from  which a trace will be followed from every chain of import statements recursively into every imported file to bundle them all in one file for each key-value pair in the entry object

output:

Is an object that specifies the folder where the output files will be delivered into, and the names of those output files, using the two following key-value pairs: - path: It specifies the output folder by concatenating “__dirname”, which takes the value of the absolute path of the directory in which the webpack config files resides, and a second argument which will be a path relative to the absolute path specified by “__dirname”, and it does it this way so that it gets backslashes or forward slashes right, for whichever case that this config file happens to be used in linux or windows

The ResizeObserver API lets you create an object that will watch dimension changes to the content box of any specified element node

To use it you need, in the following order, to do as proceeds:

1) Design the callback:

A callback function that will be called every time one of the observed elements’ size changes, it receives an array of “entry” objects as its argument, where every entry object has a “target” property (i.e. entry.target) that returns the element that underwent the size change

   e.g.:

let observerCallback = function (arrayOfEntries) {     arrayOfEntries.forEach(         entry => {             let oneElementWhoseSizeChanged = entry.target             //do stuff with target         }     ) }

//(this function can also be defined on the spot in step 2), but it’s more //convenient to define it beforehand for easier code management

2) Create instance of ResizeObserver

To create an instance of ResiseObserver and pass to it the previous callback as its argument (i.e. let instance = new ResizeObserver(callback)

   e.g.:

let observerInstance = new ResizeObserver (observerCallback)

3) Tell the instance what element nodes to observe

To call the “observe” method of the ResizeObserver instance created, and pass to it as an argument the html element whose size you want to watch (i-e- instance.observe(ElementNode)

   e.g.: