Coffee of the week

New Functionality Added to JavaScript Sets

Recently, JavaScript introduced new methods for Set objects. These new methods could replace some libraries previously used for the same purpose. This evolution is advantageous because, in addition to reducing dependence on third-party libraries, these new functionalities are now supported by JavaScript interpreters in major browsers. These methods can also provide significant performance gains compared to using external libraries for the same effect, as users won't need to download additional code to perform these operations, as they are now natively present in their browser. The two most relevant methods introduced are intersection and union.

The intersection returns the elements common to both sets:

const setA = new Set([ 1, 2, 3, 4, 5, 6 ]);
const setB = new Set([ 2, 4, 6, 8, 10 ]);

const intersectionSet = setA.intersection(setB);
// Set {2, 4, 6}
console.log(intersectionSet);

The union returns all elements from both sets, without duplication:

const setA = new Set([ 1, 2, 3, 4, 5, 6 ]);
const setB = new Set([ 2, 4, 6, 8, 10 ]);

const unionSet = setA.union(setB);
// Set {1, 2, 3, 4, 5, 6, 8, 10}
console.log(unionSet);

Nikita Prokopov's no Bloat de Javascript

Nikita Prokopov's blog post highlights JavaScript sizes on various websites and applications in 2024. For example, simple pages like Wikipedia use 0.2 MB of JavaScript code, while more complex pages like Slack can reach 55 MB. In comparison, the original version of Doom was only 2.32 MB, and currently, according to the author, a web page has an average of 3 MB of JavaScript. In my opinion, this is due to a common development paradigm nowadays, which assumes that modern computers have a lot of performance and, therefore, we can write less efficient code without the end user feeling the difference. I agree with this premise when we need to launch a product quickly to test in the market, but from the moment the market validates the product and signals through its purchase that it wants us to continue developing it, we need to adopt programming that is more conscious of performance consequences. It's super common when developing in JavaScript to use methods like forEach and for...of to iterate collections, but these methods can significantly increase the iteration time of this data compared to a traditional for loop if we iterate large numbers of data. In specific cases, we should analyze whether the code's eligibility is really that much more difficult compared to these methods, and whether the performance gain compensates for this change. Another common practice is to use libraries when we only need a specific function. This may be acceptable if the library implements a tree-shake mechanism, but if we only want to use a simple functionality, couldn't we develop it ourselves? Often, when using libraries, we need to learn to work with the abstraction they impose, and sometimes we can spend more time learning to work with the libraries' abstraction than implementing the functionality we want. I think all of this contributes to a JavaScript bundle having much more code than strictly necessary for the application, resulting in the end user having to download a larger JavaScript bundle, increasing the latency of a website when loading and consequently providing a worse user experience. Adopting more performance-conscious development practices is essential to mitigate excessive bundle sizes and improve our users' experience.

Developing New Products with a "Radically Simple" Approach

The "Radical Simplicity in Technology" approach, proposed by Schmidt (2024), advocates for minimizing components and reusing technologies to streamline product development. This methodology aims to enhance developer onboarding and productivity by focusing on solving core problems rather than adopting new technologies for their own sake. While beneficial for startups seeking rapid market validation, the approach may be less suitable for established companies facing scalability challenges. The strategy emphasizes delivering features quickly and improving user experience, but its implementation should be carefully considered based on a company's specific needs and market position.

Administrator Key for Python's Official Repository Found in a Binary

This week, the company JFrog, while analyzing Python's binary code, discovered an administrator authorization key for Python's official GitHub repository. Although this key wasn't directly present in the source code, it was found in the compiled code. This discovery highlights how a simple human error can lead to serious security flaws. Currently, a large part of the world's software runs on Python, and if a malicious agent had discovered this key, the consequences could have been catastrophic. With this key, an intruder could inject malicious code into Python's official repository, which would later be included in new versions of Python downloaded by users worldwide. This incident should alert us to the importance of detecting authorization keys not only in the source code but also in binaries. Human error is common and can lead to disastrous consequences if exploited by malicious agents. Therefore, it's crucial to adopt robust security measures that include checking both the source code and the binaries that will be distributed to our users.

The Love/Hate Relationship with CSS

CSS often sparks diverse opinions among developers. Some find writing CSS tedious, others use it only out of necessity to render something visually attractive, and few truly love it. We recently discussed internally an article by Li (2024) that highlights the advantages of CSS. One of the main advantages presented is the ability to see the changes made rendered in seconds. This allows for rapid incremental development of the application. This continuous feedback cycle is one of CSS's greatest advantages, facilitating immediate adjustments and improvements. Despite this, CSS is a vast and complex language, with a wide range of keywords, properties, and values. When working on large-scale applications, this complexity can be exacerbated. Managing this complexity to ensure design consistency and avoid conflicts can become an arduous task. However, I consider CSS to be a language generally underestimated by developers. Consequently, many don't dedicate the necessary time to learn it properly. This results in frustrations, as developers can't get the desired results as quickly as expected. However, like any language, the more time we dedicate to learning CSS, the more sense it makes. Over time, we start to quickly iterate interfaces in CSS that wouldn't be possible without this universal styling language for the Web. Dedication to studying CSS reveals its true potential, transforming initial frustration into a powerful tool for creating rich and consistent visual experiences on the web.

Sources:

1. JFrog. (2024, July 17). Leaked PyPI Secret Token Revealed in Binary Preventing Supply Chain Attack. JFrog. https://jfrog.com/blog/leaked-pypi-secret-token-revealed-in-binary-preventing-suppy-chain-attack/
2. Mursal. (2024, July 20). What's new in web dev this month. DEV Community. https://dev.to/mursalfk/whats-new-in-web-dev-this-month-1al8
3. Li, M. (2024, July 19). 3 Reasons I Love CSS. Atomic Object. https://spin.atomicobject.com/3-reasons-i-love-css/?ref=dailydev
4. Prokopov, N. (2024, July 18). JavaScript Bloat. https://tonsky.me/blog/js-bloat/
5. Schmidt, S. (2024). Radical Simplicity. https://www.radicalsimpli.city/
6. Siddiqui, S. (2022, July 21). Which for-loop is the fastest in JavaScript? DEV Community. https://dev.to/siddiqus/which-for-loop-is-the-fastest-in-javascript-4hdf
7. Faishal, M. (2023, July 22). Benchmarking for, while, for...of, and array.forEach using performance.now. DEV Community. https://dev.to/maafaishal/benchmarking-for-while-forof-and-arrayforeach-using-performancenow-1jjg