Today I Learned
Things I pick up through the hairy journey of development.
Tag Cloud
The Latest 100 Posts
-
TIL what is npm Script 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.
-
TIL Netflix's System Design 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.
-
TIL the Waluigi Effect in LLMs 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'.
-
TIL defining your video game in hooks 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.
-
TIL fancy methods to transform Javascript Objects objects javascript mdn
You can use Object.entries(), Object.keys(), Object.fromEntries()...
-
TIL how to hide your JS code 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.
-
TIL how build tools work webpack ast buildtools minifying compiling bundling
There's 4 steps. Compiling -> Minifying -> Bundling -> Code-splitting
-
TIL how to build a chrome extension that steals everything security extension pii keystroke
There's 3 components that will be used - background Service worker, Content script, and popup.
-
TIL minimal responsive image component 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.
-
TIL executing a xss using a SVG image image svg security xss
This user was able to upload a '.svg', that then executed a xss attack to steal local storage data.
-
TIL How to steal localData using an XSS attack security xss mdn
But that's just a red flag that opens the door to bigger issues.
-
TIL Dwarf Fortress Game Design gamedev gamedesign
'Do not design for your experienced players' and some more tips from one of the most complicated games ever
-
TIL the alternate keyword 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.
-
TIL Clear-Site-Data 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.
-
TIL not obsessively trying to be DRY 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.
-
TIL the cost of spaces on TypeScript compile 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.
-
TIL a bunch of new functional programming words patterns functionalprogramming image
It's so funny seeing developers re-invent functional programming paradigms. We really need to teach this stuff better.
-
TIL Indirection and Swallowing the error programming utilities
Op shared a tryCatch util that is problematic.
-
TIL Why is TextEncoder a class oop javascript
My assumed answer - it was for extension. What does reddit commenters have to say about it?
-
TIL Logical Properties css Internationalization
For that sweet sweet Internationalization you want to avoid directional words like 'left', 'right', 'top', and 'bottom'.
-
TIL Evil code 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.
-
TIL Static Blocks vs Dynamic Blocks 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.
-
TIL how to convert a shortcode to a WP block 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.
-
TIL Play music in a bash script music bash fun
On Macs, you have the afplay command. to play some sweet tunes.
-
TIL Google Sheets has named functions function spreadsheet
It's a way for you to make functions using built-in formulas.
-
TIL how to JUICE up your UI 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.
-
TIL why google recommends you avoid document.write() 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).
-
TIL Using pseudo-classes in your querySelector! css javascript
let notTuna = document.querySelectorAll('.sandwich:not(.tuna)')
-
TIL using abortController to removing events mdn javascript
Trying to unhook a eventListener? Don't use `removeEventListener`, instead use AbortController.
-
TIL detecting if a user is online with JS fingerprint javascript mdn
You can use the navigator.onLine api.
-
TIL prioritizing Javascript 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.
-
TIL problem with AJAX 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.
-
TIL why jpeg vs jpg 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.
-
TIL Container Queries are live! 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.
-
TIL the history of fonts and COLRv1 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.
-
TIL ":has" selector 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)
-
TIL Harmful language 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.
-
TIL ways to organize eventListeners 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.
-
TIL a helper to make things uppercase 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.
-
TIL the core-js spam trolling 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
-
TIL how Error correction works in HTML error html table browser
You never get an 'Invalid Syntax' error on an HTML page. Browsers fix any invalid content and go on.
-
TIL Legend of Zelda course corrects movement 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.
-
TIL what DOCTYPE means 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.
-
TIL how Levels.fyi used Google Sheets database google quickanddirty image
Our philosophy to scaling is simple, avoid premature optimization.
-
TIL How many Fucks there are in Linux 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
-
TIL Dirty bit systems in browsers 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.
-
TIL Web Performance with Javascript 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.
-
TIL how QR codes work barcode qr image
The Quick Response code was invented by a subsidiary of Toyota to track parts across the manufacturing process.
-
TIL Shape-Outside to wrap text 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.
-
TIL keywords in package.json 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.
-
TIL Tagged Templates 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.
-
TIL Find Command search terminal commands
I wanted to look for files with a specific extension. You can do that with ls *.(mp3|exe|mp4)
-
TIL Multiple Fetch Requests 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:
-
TIL Forever Seinfeld 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.
-
TIL wanting to use the latest thing 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).
-
TIL why you should always use textContent 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.
-
TIL critical 14kb 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)
-
TIL no global styles opinion css
Global styles is the largest **anti-pattern** in CSS --- strong DISAGREE.
-
TIL types of malicious npm attacks 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.
-
TIL malware in node_modules 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.
-
TIL Infinite State Machines in Doom 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.
-
TIL Land in Virtual Games 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.
-
TIL Scoping with Cypress 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.
-
TIL the first webcam 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.
-
TIL SolidJS reactivity javascript reactivity
SolidJS is a JavaScript framework that supports binding data to elements that it then syncs and displays on web pages.
-
TIL a mod dedicated to his fiance 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.
-
TIL porting Zelda Classic from a Windows App to the browser 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.
-
TIL Computed Properties in Javascript naming javascript mdn
Today I learned about Computed Property names.
-
TIL outputting objects in Node logging node
In your Node projects -- sometimes you just need to output the object. Stringify it.
-
TIL if TypeScript is worth it 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!)
-
TIL Very Efficient Code 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.
-
TIL delta time 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.
-
TIL finding the browser being used javascript browser
How to detect the browser you're using, with javascript.
-
TIL ChatGPT prompts 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.
-
TIL Libuv 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.
-
TIL brackets breaking elements in JavaScript javascript linter
The 'automatic semicolon insertion' it does is an error correction process
-
TIL obscure search engines 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?
-
TIL IndexNow 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.
-
TIL all the different security roles 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.
-
TIL Trovald's Magic Numbers 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
-
TIL node modules fs and os node streams os
with fs - you can access files, read files, make directories, chmod. With os - get stats, machine, version, hosts.
-
TIL Node Streams 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.
-
TIL Websockets 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.
-
TIL Node.js Event Emitter node javascript
This is kinda like the addEventListener() for browser javascript.
-
TIL Double Exclamation shorthand for booleans javascript booleans
JavaScript (and TypeScript) lets you convert a non-Boolean value to Boolean using the double exclamation shorthand. '!!'
-
TIL how to delete all cookies with Javascript 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.
-
TIL Content sectioning html webdev browser
Content sectioning or landmarks, like sidebar, content, footer. You know, like better names.
-
TIL the Description List element 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
-
TIL MSW for mocking 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.
-
TIL Sparse Arrays array javascript
The ['Batman', , 'Bane'] array is a sparse array. See how it there is a blank?
-
TIL accessing different data attributes 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.
-
TIL aspect ratios 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.
-
TIL Performance tests performance javascript optimization
While doing performance tests, I was curious how long a loop was running. I used the performance.now() trick.
-
TIL playing Tetris inside Zsh 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.