Today I Learned

Things I pick up through the hairy journey of development.

The Latest 100 Posts

1. TIL what is npm Script Mar 31, 2023 javascript node

   Despite their high usage they are not particularly well optimized and add about 400ms of overhead. In this article we were able to bring that down to ~22ms.

2. TIL Netflix's System Design Mar 30, 2023 systemdesign netflix aws database image

   Netflix operates in two clouds: Everything that happens after you hit play is handled by Open Connect. Open Connect stores Netflix video in different locations throughout the world. Anything that doesn’t involve serving video is handled in AWS.

3. TIL the Waluigi Effect in LLMs Mar 29, 2023 chatgpt ai

   The Waluigi Effect: After you train an LLM to satisfy a desirable property 'P', then it's easier to elicit the chatbot into satisfying the exact opposite of property 'P'.

4. TIL using the find command Mar 28, 2023 terminal search command

   find [path] -user [username] [options]

5. TIL defining your video game in hooks Mar 27, 2023 videogame postmordem

   I like to think of a game’s potential in terms of 'hooks.' By this, I’m referring to the inherent momentum within a title to hook a buyer. I was just looking at the data on Steam, and there were 10,963 new game titles released in 2022. My strong suspicion is that most of them never generated a dime in revenue. Without some hook for your game, no one will ever play it, much less buy it.

6. TIL fancy methods to transform Javascript Objects Mar 26, 2023 objects javascript mdn

   You can use Object.entries(), Object.keys(), Object.fromEntries()...

7. TIL how to hide your JS code Mar 25, 2023 obscurity javascript encryption

   ONE THING TO NOTE: Encrypting a script is stronger than obfuscation, both methods are still not adequate to protect secret content. Honestly, I don't think it's worth it on a production site, and instead just go with pure server-side if you want security. But it's fascinating.

8. TIL how build tools work Mar 24, 2023 webpack ast buildtools minifying compiling bundling

   There's 4 steps. Compiling -> Minifying -> Bundling -> Code-splitting

9. TIL how to build a chrome extension that steals everything Mar 23, 2023 security extension pii keystroke

   There's 3 components that will be used - background Service worker, Content script, and popup.

10. TIL minimal responsive image component Mar 22, 2023 component image browser

    So when I saw that JS frameworks made image wrapper components (like Nuxt was with nuxt-img), I was blown away and wanted this power at work.

11. TIL executing a xss using a SVG image Mar 21, 2023 image svg security xss

    This user was able to upload a '.svg', that then executed a xss attack to steal local storage data.

12. TIL How to steal localData using an XSS attack Mar 20, 2023 security xss mdn

    But that's just a red flag that opens the door to bigger issues.

13. TIL Dwarf Fortress Game Design Mar 19, 2023 gamedev gamedesign

    'Do not design for your experienced players' and some more tips from one of the most complicated games ever

14. TIL the alternate keyword Mar 18, 2023 stylesheet css darkmode image

    If 'alternate' appears along with the stylesheet keyword, the linked file is an alternative stylesheet. It won’t be applied to the document, but it will be ready for when we need it.

15. TIL Clear-Site-Data Mar 17, 2023 mdn cache

    The Clear-Site-Data header clears browsing data (cookies, storage, cache) associated with the requesting website. It allows web developers to have more control over the data stored by a client browser for their origins.

16. TIL not obsessively trying to be DRY Mar 16, 2023 cleancode dry

    Quite often, DRY is applied to any duplication, rather than specifically to the duplication of business rules and knowledge. This is often made worse by automated code analysis tools, which will often highlight any duplication as a code smell.

17. TIL the cost of spaces on TypeScript compile Mar 15, 2023 prematureoptimization typescript

    One nice surprise we found from using esbuild was that on-disk size was reduced by more than we expected. It turns out that a big reason for this is that esbuild uses 2 spaces for indentation in output instead of the 4 spaces that TypeScript uses. When gzipping, the difference is very small; but on disk, we saved a considerable amount.

18. TIL a bunch of new functional programming words Mar 14, 2023 patterns functionalprogramming image

    It's so funny seeing developers re-invent functional programming paradigms. We really need to teach this stuff better.

19. TIL Indirection and Swallowing the error Mar 13, 2023 programming utilities

    Op shared a tryCatch util that is problematic.

20. TIL Why is TextEncoder a class Mar 12, 2023 oop javascript

    My assumed answer - it was for extension. What does reddit commenters have to say about it?

21. TIL Logical Properties Mar 11, 2023 css Internationalization

    For that sweet sweet Internationalization you want to avoid directional words like 'left', 'right', 'top', and 'bottom'.

22. TIL Evil code Mar 10, 2023 bash malicious

    These examples are unethical, and can even be criminal. You can get jailtime. You have been warned and I cannot be held liable for your dumb-assery.

23. TIL Static Blocks vs Dynamic Blocks Mar 09, 2023 blocks wordpress

    A static block is a piece of content whose markup is known when the page is saved. The block saves its content and markup directly in the post content. A dynamic block is a piece of content whose markup and exact content are not known when the page is saved.

24. TIL how to convert a shortcode to a WP block Mar 08, 2023 block wordpress

    Traditionally, shortcodes were a way that plugin developers could provide users the ability to add specific plugin functionality anwhere on their site. But shortcodes are not very user friendly, nor was hunting down the relevant data you needed to render the correct data for the shortcode. Converting existing shortcodes to blocks provides a much greater user experience in all aspects.

25. TIL Play music in a bash script Mar 07, 2023 music bash fun

    On Macs, you have the afplay command. to play some sweet tunes.

26. TIL Google Sheets has named functions Mar 06, 2023 function spreadsheet

    It's a way for you to make functions using built-in formulas.

27. TIL Gmail has a 102KB size-limit for HTML Mar 05, 2023 email html

    PLACEHOLDER

28. TIL how to JUICE up your UI Mar 04, 2023 videogame image

    The delightful chimes sound that plays when Mario collects a mushroom. The 1UP text that appears is essential. Communicating the player gained an extra life. The sound is the Juice.

29. TIL why google recommends you avoid document.write() Mar 03, 2023 performance javascript browser corewebvital

    By injecting it with code, it bypasses the preload scanner. This means that the browser can’t request this file until it’s actually run the '<script>' block that inserts it, which is very much just-in-time (and too late).

30. TIL Using pseudo-classes in your querySelector! Mar 02, 2023 css javascript

    let notTuna = document.querySelectorAll('.sandwich:not(.tuna)')

31. TIL using abortController to removing events Mar 01, 2023 mdn javascript

    Trying to unhook a eventListener? Don't use `removeEventListener`, instead use AbortController.

32. TIL detecting if a user is online with JS Feb 28, 2023 fingerprint javascript mdn

    You can use the navigator.onLine api.

33. TIL prioritizing Javascript Feb 27, 2023 performance javascript corewebvitals

    ... async and defer attributes should be used where possible to avoid render blocking of the DOM. Render blocking is when the browser must halt all rendering of the page in order to process a resource that the page depends on.

34. TIL problem with AJAX Feb 26, 2023 fetch javascript performance

    Synchronous XHR is harmful for performance because the event loop and main thread is blocked until the request is finished, resulting in the page hanging until the data becomes available. fetch is a much more effective and efficient alternative with a simpler API, and has no support for synchronous fetching of data.

35. TIL why jpeg vs jpg Feb 25, 2023 image extension history

    In DOS systems, a filename extension was a different part of the name stored in a different field that can only be 3 characters. You still see this legacy today in Microsoft's .NET software, where most system calls that use the word 'filename' in their name don't really mean the whole filename. They mean just the part without the extension.

36. TIL Container Queries are live! Feb 24, 2023 container css

    After @container, elements can respond to a parent container size or style! The only caveat is the containers must declare themselves as possible query targets, which is a small requirement for a large benefit.

37. TIL the history of fonts and COLRv1 Feb 23, 2023 image browser font

    COLRv1 fonts, have a smaller footprint, vector-scalable, reposition-able, gradient-featuring, and blend-mode powered fonts that accept parameters to customize the font per use case or to match a brand.

38. TIL ":has" selector Feb 22, 2023 css organization

    Before :has(), the subject of a selector was always at the end. Like 'ul > li:hover' or 'ul > li:not(.selected)'. Now we can do ul:has(> li)

39. TIL Harmful language Feb 21, 2023 words speaking

    We’ve talked before, we’ve used that phrase “words matter” because words matter, words are the way we communicate with one another, it is how we perceive our self value in our own head.

40. TIL ways to organize eventListeners Feb 20, 2023 cleancode naming

    Some code spaghetti I made recently was creating a lot of eventListeners for multiple buttons, and then forgot what they all connected to.

41. TIL a helper to make things uppercase Feb 19, 2023 javascript helper string

    ucWords function converts the first character of each word in a string to uppercase. This function is the same as PHP’s ucWords function.

42. TIL the core-js spam trolling Feb 18, 2023 image javascript git

    This entire repo is a hilarious rabbit-hole when you combine this with everyone complaining about the console spam that the dev added to it asking if anyone can find him a job. One of my favorite PRs

43. TIL how Error correction works in HTML Feb 17, 2023 error html table browser

    You never get an 'Invalid Syntax' error on an HTML page. Browsers fix any invalid content and go on.

44. TIL Legend of Zelda course corrects movement Feb 16, 2023 movement videogames pixel

    If you play The Legend of Zelda for a while, you’ll notice that Link doesn’t ever get hung up on obstacles due to unexpected collisions, nor do you ever just miss a bad guy by a pixel or two when attacking him.

45. TIL what DOCTYPE means Feb 15, 2023 moderndevelopment html

    tl;dr: DOCTYPE declaration in the first line of the HTML file, to instruct the browser to run the code in Standard mode.

46. TIL how Levels.fyi used Google Sheets Feb 14, 2023 database google quickanddirty image

    Our philosophy to scaling is simple, avoid premature optimization.

47. TIL How many Fucks there are in Linux Feb 13, 2023 comments git image

    As of today, in the Linux Repo, there are comments that contains the following mentions: 1,651 for hacks, 2,863 for workarounds, and 4,102 for fixme

48. TIL Dirty bit systems in browsers Feb 12, 2023 browser dom webpage

    In order not to do a full layout for every small change, browsers use a 'dirty bit' system. A renderer that is changed or added marks itself and its children as 'dirty': needing layout. There are two flags: 'dirty', and 'children are dirty' which means that although the renderer itself may be OK, it has at least one child that needs a layout.

49. TIL individual transform CSS Feb 11, 2023 transform css

    We now have individual transform CSS!

50. TIL Web Performance with Javascript Feb 10, 2023 javascript webworker performance criticaljs image

    Overall, we should be loading the most important JS first to get the website working. Then load all your third-party scripts onto your web worker, which then responds with 'Success' once it loads, so you can then interact with it.

51. TIL how QR codes work Feb 09, 2023 barcode qr image

    The Quick Response code was invented by a subsidiary of Toyota to track parts across the manufacturing process.

52. TIL Shape-Outside to wrap text Feb 08, 2023 css shapes codepen

    Shape-outside provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes.

53. TIL keywords in package.json Feb 07, 2023 node keywords

    Today I learned what keywords are in a package.json file! It's a collection of keywords about a module. Keywords can help identify a package, related modules and software, and concepts.

54. TIL functional async/await Feb 06, 2023 promises javascript node

    PLACEHOLDER

55. TIL Tagged Templates Feb 05, 2023 mdn javascript image

    Tags allow you to parse template literals with a function. The first argument of a tag function contains an array of string values. The remaining arguments are related to the expressions.

56. TIL Find Command Feb 04, 2023 search terminal commands

    I wanted to look for files with a specific extension. You can do that with ls *.(mp3|exe|mp4)

57. TIL Multiple Fetch Requests Feb 03, 2023 javascript api

    I've been frequently dealing with this scenario in the past few weeks. I wanted to make multiple fetch requests, and then merge everything together when it's all done. To make multiple/parallel fetch requests:

58. TIL Forever Seinfeld Feb 02, 2023 fun ai

    Nothing, Forever is a parody of '90s sitcoms, done in the style of '90s point-and-click PC games (but, you know, in 3D). We set out to build something weird, new, and novel, and this is what we ended up with.

59. TIL wanting to use the latest thing Feb 01, 2023 mdn latest jquery github

    In evaluating a solution, be sure to consider the library dying out or becoming a maintenance burden after 5 years (e.g., everyone trying to get off jQuery onto Web Components).

60. TIL why you should always use textContent Jan 31, 2023 js text

    Today I learned the difference between 'Node.textContent'. It handles all elements, even hidden ones. It also prevents XSS attacks since it strips tags.

61. TIL critical 14kb Jan 30, 2023 critical osimodel webpage

    On the OSI Model -- the physical layer, we send data in 14kb packets. And servers respond to HTTP requests in 14kb chunks. (Note: It can be set to different sizes, but by default... 14kb is the standard/magic number)

62. TIL no global styles Jan 29, 2023 opinion css

    Global styles is the largest **anti-pattern** in CSS --- strong DISAGREE.

63. TIL types of malicious npm attacks Jan 28, 2023 security npm malware

    In the case of ionicons, the miscreants published 18 versions containing malicious form-stealing code; for example, icon-package (according to NPM download stats) has over 17,000 downloads. Other typo-squatting examples include umbrellaks instead of umbrellajs and so on.

64. TIL malware in node_modules Jan 27, 2023 malware npm security hacking

    The very first line fetches the victim's country code using their IP address. If the victim is from Russia, Ukraine, Belarus, or Kazakhstan, then the malware exits early.

65. TIL Infinite State Machines in Doom Jan 26, 2023 fsm videogames ai doom

    The actual core logic of the enemies is a Finite State Machines: a simple but effective mechanism to state that a character executes a specific behaviour when in a given state, and what the conditions are that will force it to change.

66. TIL Land in Virtual Games Jan 25, 2023 mmo videogames economy

    in [Star Wars] Galaxies … there was ample room for everyone to own a house if they chose – but people did things like build player cities atop the entrances to dungeons to monopolize access to resources.

67. TIL Scoping with Cypress Jan 24, 2023 javascript testing cypress

    So you wanted to find a specific element called `heading`. But you have a BUNCH of elements called `heading`. By using `within()` helper, you can force it to only look inside `main` elements.

68. TIL the first webcam Jan 23, 2023 history webcam coffee

    The Trojan Room coffee pot was a coffee machine located in the Computer Laboratory of the University of Cambridge, England. Created in 1991 by Quentin Stafford-Fraser and Paul Jardetzky, it was migrated from their laboratory network to the web in 1993 becoming the world's first webcam.

69. TIL SolidJS reactivity Jan 22, 2023 javascript reactivity

    SolidJS is a JavaScript framework that supports binding data to elements that it then syncs and displays on web pages.

70. TIL a mod dedicated to his fiance Jan 21, 2023 readme sad

    The best way to avoid DVT is simple: Save your game, stand up, and walk around for 2-3 minutes every 3 or 4 hours. Go to the fridge, pee, look out the window, play with your pet...anything, just MOVE. That simple action would have saved her life: it could save yours.

71. TIL porting Zelda Classic from a Windows App to the browser Jan 20, 2023 videogames assembly compiling

    He learned about each layer of the codebase, and how to transpile it down to the next layer until finally hitting Web APIs.

72. TIL Computed Properties in Javascript Jan 19, 2023 naming javascript mdn

    Today I learned about Computed Property names.

73. TIL outputting objects in Node Jan 18, 2023 logging node

    In your Node projects -- sometimes you just need to output the object. Stringify it.

74. TIL if TypeScript is worth it Jan 17, 2023 typescript javascript

    The answer: No, according to HackerNews. But HackerNews audience aren't exactly representative of average developers? From my perspective, they're the 'startup' and 'ship fast and break things' folks. (I mean, I am too!)

75. TIL Very Efficient Code Jan 16, 2023 cleancode bigo

    This is a great solution. Easy to understand. Executes really fast. No real-time string concatenation. No over-engineering. String appearance is easily customized.

76. TIL delta time Jan 15, 2023 time javascript

    Delta time, also known as 'time delta,' refers to the difference between the 'current time' and the 'last time' a piece of code was executed. In JavaScript, delta time can be calculated using the Date object or by using the performance.now() method.

77. TIL finding the browser being used Jan 14, 2023 javascript browser

    How to detect the browser you're using, with javascript.

78. TIL ChatGPT prompts Jan 13, 2023 ai chatgpt machinelearning

    Don’t ask it to write an essay about how human error causes catastrophes. The AI will come up with a boring and straightforward piece that does the minimum possible to satisfy your simple demand.

79. TIL Libuv Jan 12, 2023 javascript node

    Libuv also implements two extremely important features of Nodejs which are the event loop and the thread pool and in simple terms, the event loop is responsible for handling easy tasks like executing callbacks and network I/O while the thread pool deals with heavy work like file access or compression.

80. TIL brackets breaking elements in JavaScript Jan 11, 2023 javascript linter

    The 'automatic semicolon insertion' it does is an error correction process

81. TIL obscure search engines Jan 10, 2023 search index

    We all know the big ones like Google and Bing that have massive Indexes. THen we know about Wolfram Alpha and DuckDuckGo. But have you heard of Thunderstone?

82. TIL IndexNow Jan 09, 2023 seo search

    IndexNow is an open-source protocol that allows website publishers to instantly index across participating search engines, updating results based upon the latest content changes.

83. TIL the fix everything script Jan 08, 2023 bash script

    A script that fixes everything for end-users

84. TIL RXJchess and how it was built Jan 07, 2023 javascript chess

    How was this chess engine made?

85. TIL all the different security roles Jan 06, 2023 roles security certifications

    In appsec most notably offense vs defense. They are complimentary of course but the skills differ. For offense you need specific tools, need to get used to testing applications sometimes without source code access.

86. TIL Trovald's Magic Numbers Jan 05, 2023 magic linux

    These magic numbers are intended to safeguard against a typo or potential bit flips in the syscall number. Since reboot is a destructive and non-syncing operation, it's important to make absolutely sure that it isn't called accidentally due to a typo, a misbehaving program, or memory error

87. TIL node modules fs and os Jan 04, 2023 node streams os

    with fs - you can access files, read files, make directories, chmod. With os - get stats, machine, version, hosts.

88. TIL Node Streams Jan 03, 2023 node streams promise

    Imagine if you did some data-extensive fetch request getting a 1 gig file. 1 gig can take a while, and it's fetching it in memory.

89. TIL Websockets Jan 02, 2023 node communication

    They offer a long lived, bidirectional communication channel between client and server. Once established, the channel is kept open, offering a very fast connection with low latency and overhead.

90. TIL Node.js Event Emitter Jan 01, 2023 node javascript

    This is kinda like the addEventListener() for browser javascript.

91. TIL Double Exclamation shorthand for booleans Dec 31, 2022 javascript booleans

    JavaScript (and TypeScript) lets you convert a non-Boolean value to Boolean using the double exclamation shorthand. '!!'

92. TIL how to delete all cookies with Javascript Dec 30, 2022 javascript cookies

    If someone selects 'Reject', you want to remove all the tracking cookies. You can easily clear all cookies stored in a web page by accessing the cookie using document.cookie and clearing it.

93. TIL Content sectioning Dec 29, 2022 html webdev browser

    Content sectioning or landmarks, like sidebar, content, footer. You know, like better names.

94. TIL the Description List element Dec 28, 2022 html semantic tables

    Lists of name–value pairs (or, in some cases, name–value groups) are a common pattern across the web, in part due to their versatility. HTML lets us mark up these lists with a combination of three elements

95. TIL MSW for mocking Dec 27, 2022 testing website

    MSW is a API mocking tool. Mock by intercepting requests on the network level. Seamlessly reuse the same mock definition for testing, development, and debugging.

96. TIL Sparse Arrays Dec 26, 2022 array javascript

    The ['Batman', , 'Bane'] array is a sparse array. See how it there is a blank?

97. TIL accessing different data attributes Dec 25, 2022 javascript data html

    You can access it in javascript using element.getAttribute('data-sandwich'). A better way is to go with the Element.dataset property.

98. TIL aspect ratios Dec 24, 2022 css iframe

    We can target iframe elements directly with a few lines of CSS to preserve their dimensions in responsive layouts, without the need for a wrapper element.

99. TIL Performance tests Dec 23, 2022 performance javascript optimization

    While doing performance tests, I was curious how long a loop was running. I used the performance.now() trick.

100. TIL playing Tetris inside Zsh Dec 22, 2022 terminal easteregg

     If you're using a Mac, you're probably using iTerm. 1. Load iTerm 2. launch emacs. 3. Launch Tetris.

More posts can be found in the archive.