1.13.2025
Wow, first blog post. Cool.
i am learning a lot about. Um. Computers i think. About what order a webpage loads in and why browsers can even run things like JavaScript to begin with. i think js and jQuery and i have come to an understanding. The other day i implemented simple audio objects into a page on my site so when you click on something it makes sounds. Very simple in concept, and its implementation is similar to something I have done 1000 times, yet there are just enough differences in how JS works and the syntax it requires that I find myself floundering, hunting for places where its already been executed. This is how i troubleshoot—I look for examples and see how others have set things up, and then I try my best to replicate those results. I can be too impatient to set up a proper sterile environment for trying new things, but the benefit of keeping things modular is that I can slap an experiment right into the middle of a project and see how it works just about as well.
I am trying to figure out if i can have an array of objects (you can) but i have a misconception about what the word "object" refers to in JS so ive been reading about js structures. I know data structures, it was a concept as fundamental to me when learning to program in high school as a variable, but its hard for me to untangle Data Structures as a concept from Code Without Objects... Its like if someone handed you a salsa and asked what types of tomatoes are in it... I know there are different types of tomatoes but i dont know what a salsa with only one type tastes like and how its different from this one yet. And it's very difficult to know what "baseline" tomato salsa to start with. They're all in comparison to each other, so any starting point is in the middle, so you will have to start learning by missing out on context no matter what u do.
Here are a few JS things I have learned/understood better
- Document Fragments: a sort of compartmentalised document that is seperate from the main document. You can act on a fragment without it affecting the main document. Fragments can be changed, added to, and altered at will. At the end, you can append a fragment to the main document. The alternative, changing the main document itself, causes the render system to remake the entire document, which can be slow. If you need to append 30 paragraphs at once, consider adding them in to a fragment, and then appending the fragment to the main doc when you are done.
- Cached lengths in loops: running a line like for ( let i = 0; i < array.length; i++) {...} means that array.length is recalculated every time the loop runs. using a variable instead avoides redundant recalculations. try const len = array.length; for ( let i = 0; i < len; i++) {...} instead. remember that these dot operations are functions. They dont refere to a property of an object, they run a built-in JS function that returns a calcuation.
- Array Methods: something I need to spend more time with. I have done a lot of things to arrays by hand, but JS is such a modern language. Here's an example of how one would load an array:
const doubled = [];
for (let i = 0; i < numbers.length; i++) { doubled.push(numbers.[i] * 2); }
It reads the numbers in the array called "numbers" and makes a new array called "doubled", which is a clone of numbers with the values doubled. To me, this is readable and simple. And readability is very, VERY important to me. I should be able to come back to a project a long time down the line and not get confused about old syntax, but the above is straight forward enough that, to me, it reads as plain language.
Here is a more optimised version of the above:
const doubled = numbers.map(num =< num*2);
This does the same act using array methods, without the need for recalculating or saving any new variables in memory. It is less readable, but is this because it is more unfamiliar? In the first example, I understand that there is an unseen, previously defined array called "numbers". In the second, that was less clear to me. I have a tendency to understand the theory and the structure, but not necesarilly how the shorthand works. In fact, it's been a problem of mine for a while that I cannot understand the shortcuts without first understanding the original, long route, and why the shortcut is so much better.
- Lazy loading: very important for good website efficiency. I need to spend more time understanding how a lazy file loads different from a regular file, and what the triggers are for loading an asset lazily.
Here are things I will try to spend more time learning soon:
- Web Workers, and avoiding locking up JS with long-running loops or operations (like a loop of 10,000)
- Practice with recursive functions, which are fun, but always take me a while to understand what they do (I, myself, run on a single thread!)
- V8, the Javascript engine that powers Chromium browsers... and Node.js?
- Reverse Engineering, Decompilers, software cracking, and getting back into Assembly.
Wish me luck. :)