2021 week 37, 10th weekly post.

And what I haven't learned.

Items of the week

  1. JavaScript: we can create proxies for objects using const targetProxy = new Proxy(target, handler) which allows us to control how existing target can be interacted through targetProxy. It could be useful for things like validation or even encapsulation. More details can be found on MDN Web Docs.

  2. Design: a good self-reminder from Scott Berkun, author of How Design Makes the World - software developers sometime love building things that are performant and reliable but care less about whether it's something that people can actually use. Got that from the DesignBetter podcast.

  3. Code editors: default VS Code shortcuts to select words and lines are Cmd/Ctrl + D and Cmd/Ctrl + L respectively, the same shortcuts are for duplicating lines and going to specific line/column in IntelliJ IDEA, use Option + ↑/Ctrl + W and Cmd/Ctrl + C for their counterparts in IntelliJ IDEA instead.

Some other notes

Changing the format starting with this 10th weekly post, not having links at the end of post might be against the original idea of not contributing to new tabs before the post ends, but I imagine most people would read only the items that they are interested in, so the end of an item is as good as the end of a post. Plus there is Gestalt's law of grouping - things that are near to one another tend to be grouped together.

A little introspection on this habit of publishing weekly posts shows that I don't have the answers for questions like what have I learned from this and who would find value in these posts? Maybe it's just to practice my writing and an excuse to doodle for the cover images for now. That's why I want to tweak the format a bit now and then to see where it goes. Thank you for reading, if you have got any questions or feedback, let me know by leaving a comment. Have a nice day.

2021 week 36, mathematically incorrect JS.

Plus numbers about the Malaysian Flag.

It’s 2021 week 36, I recently had a bit of fun with JavaScript number data type and Malaysia Day is around the corner (16th September) - that’s how I arrive at this week’s topics. Here are some interesting facts about numbers in JavaScript and numbers related to the Malaysian flag.

  • JavaScript number: the primitive data type number is based on the IEEE 754 standard, which means floating-point arithmetic applies. The classic example is 0.1 + 0.2 returns 0.30000000000000004, the result also shows the decimal precision limit of 17.

  • JavaScript bigint: the bigint primitive type was introduced in ES2020, it can safely represent integers bigger than Number.MAX_SAFE_INTEGER, e.g. 9007199254740992 === 9007199254740993 returns true which is wrong but with BigInt, 9007199254740992n === 9007199254740993n returns false as expected. Note that as of current, the Math object doesn't work with bigint.

  • The Malaysian flag: before the formation of Malaysia in year 1963, the flag for Federation of Malaya had 11 stripes and the star had 11 points as opposed to 14 for both now. The original submission of the design had a five-pointed star.

This is my 9th weekly post, thank you for reading and if you have got any feedback, do let me know!

Related Links

2021 week 35, CSS stacking and HTML parsing.

Plus letter casing.

Stepping into September, 30% time left in 2021 and it's been a little difficult to find a common theme from these items I've just revisited or learned weekly, please bear with me. Three items this week, first two are about CSS stacking context and parsing HTML with regex respectively while the last one will compare sentence case to title case.

  • CSS: stacking context is like an imaginary z-axis for HTML elements. z-index can be used to control the stacking order within the same parent stacking context and isolation: isolate; can be used to create new stacking context.

  • HTML: best not to parse HTML with regex else you might risk summoning Cthulhu. Jokes aside, it's generally regarded as a bad practice although as most things, there might be suitable specific use cases. There are a couple of reasons behind this (e.g. HTML validity, nesting) but to put it simply, HTML is too complex for regex, use a library designed for that instead.

  • Letter casing: Sentence case is generally regarded as more friendly, allow proper nouns to stand out while title case is perceived as more serious and more prominent. Regardless of preference between the two, being consistent will help readability.

This is my 8th weekly post, thank you for reading and do let me know if you have any feedback by leaving a comment.

Related Links

2021 week 34, JS array & Base64 encoding.

Plus Malaysian national anthem.

It's the time of the year in Malaysia where the national flag can be seen everywhere, so I included a tiny history piece as the third item. The other two items are both JavaScript - one on array and another on Base64, the latter seems like it can become a whole article of its own but I kept it short.

  • JavaScript - array[...x] will result in an array if x is iterable. Likewise, Array.from(potatoes, (potato) => potato)will also result in an array if potatoes is iterable, but potatoes can also be an array-like object, e.g. {0: small, length: 1}, that allows us to create a transformed array out of an array-like object, e.g. const dinner = Array.from(potatoes, (potato) => cook(potato)).

  • JavaScript - Base64: while btoa() and atob() can be used in a browser environment to convert between binary data and Base64 encoded string, they have recently made their way to Node.js as well but use them wisely because character encoding can be tricky and Base64 encoding can easily increase the data size by a third.

  • History - Malaysia: the founding father - Tunku Abdul Rahman was part of the panel of judges that contributed to the Malaysian national anthem. "We're not going to War. We don't need this. We need a love song.", and surely enough, now the national anthem has its root in the melody of a love song.

This is my 7th weekly post since July 2021, thank you for reading and do let me know if you have any feedback by leaving a comment.

Related Links

2021 week 33, Hungry Ghost edition.

Ghost-themed OSS and optical illusion.

It is currently the Hungry Ghost month for those who follow the Chinese folk religion and there will be ceremonies to pay respect to the departed souls. That inspired the ghost theme for this week's post with three open source projects whose names befit the Ghost Festival, and another two items still picked from my weekly journal.

  • Ghostwriter: a distraction-free writer app with some nice features like a focus mode to highlight the current sentence, show document outlines, writing stats, quick markdown references, etc.

  • Ghost: the Node.js blogging platform that seems to gear toward the creator economy now, it has a default theme named Casper and the organisation is a registered non-profit in Singapore - one of the countries where Hungry Ghost Festival is observed.

  • Haunted: React Hook API but for standard web components instead of React components, the hooks have the same names in hope that some existing code can be made compatible easily.

  • Firefox: Service Worker API will ghost out on you in Firefox Private Browsing mode, i.e. 'serviceWorker' in navigator will return false. It seems to be currently disabled intentionally.

  • Pepper's Ghost: it's an optical illustration using an angled, partially reflective screen to catch a reflection from a brightly lit actor so that the actor will appear like a ghost on stage, popularised by John Henry Pepper in the 1860s.

This is my 6th weekly post since July 2021, thank you for reading and do let me know if you have any feedback by leaving a comment.

Related Links

Loading more posts…