TIL: Today I learned...

Today I learned about Chain-of-Thought Prompting which is a technique to get potentially better results from an LLM where you craft your prompt with an example of the chain of thought or steps in reasoning to solve a complex problem. This gives a good explanation: https://www.promptingguide.ai/techniques/cot

Today I learned about .http files that you can use to make/test requests to any api endpoint from within most IDEs/editors. This started with the Rest client vscode extension and then Visual Studio 2022 added support somewhat recently. It kinda acts like an alternative to something like Postman but without leaving your editor, but for me the nice thing is it can act like a runnable form of documentation for your api that you can commit alongside your code.

Today I learned there are two configuration values that determine how large of a file can be uploaded. maxRequestLength is specified in Kilobytes and it’s used by the ASP.NET framework. If the file is larger than this value then the application will throw “content length exceed” exception so it just comes back as a 500 which isn’t that helpful. The default is about 4mb. maxAllowedContentLength is used by IIS and is specified in bytes not kilobytes and if the file is larger then it will return 413 error status which we can handle appropriately. The default is about 28mb. ...

Today I learned that there are 8 versions of UUID! I was vaguely aware that there were some older versions that aren’t recommended but just this past May the RFC was approved that added versions 6, 7, and 8. Basically, v4 is a good default if you just need a good unguessable random ID. For javascript, this is now built into browsers via crypto.randomUUID() — or in dotnet with Guid.NewGuid(). But v7 is an exciting new option because it’s time-based so the UUIDs are sortable based on when it was created and you can even extract the timestamp if you want. This also apparently makes it better as a database key. ...

This is a simple thing but I just discovered that with a simple regex and find/replace in most editors, you can quickly add text to the end of every line. For instance, if you want to add a , to every line, all you need is $: Or if you want to replace whatever the last character then you can use .$ instead. Of course, I use vscode-neovim so I just type :%s/$/,/ 😁

Today I learned that you can cancel fetch requests using the AbortController. This used to be a major shortcomming of fetch but apparently it’s been part of the web platform since 2019. This post also explains some additional use cases for the AbortController.

Today I learned that creating a nice drag-and-drop file component using vanilla javascript and the built web APIs is actually fairly easy. Smashing Magazine has an easy-to-follow example. The gist of it is that the browser gives you 'dragenter', 'dragover', 'dragleave' events that you can use to style your “dropzone” however you want and the drop event allows you to handle the files themselves: dropArea.addEventListener('drop', handleDrop, false) function handleDrop(e) { let dt = e.dataTransfer let files = dt.files // implement with your preferred upload method uploadFiles(files) } The dragevent and dataTransfer interface have been supported in modern browsers for some time so they are pretty safe to use. ...

Today I learned that iOS changed the way it handles the inputmode="numeric" attribute on HTML input elements. It used to display the full number keyboard as shown here: I couldn’t find it documented anywhere but, after testing various versions on BrowserStack, I found that starting with iOS 14 the numeric keyboard is the same as decimal but without the decimal key: ...

Today I learned about the new :has() selector in CSS. It’s also referred to as the “parent” selector and that’s probably the most straightforward use case but this post shows several cool use cases. I used it today when I needed to apply a style to a shared root element but only on a specific page, but all of the styles are bundled into a single CSS file that’s loaded on every page: ...

Today I learned that the matchMedia() javascript method lets you match against media queries and respond accordingly with javascript. That could look something like this: const mediaQuery = window.matchMedia('(min-width: 768px)') // Check if the media query is true if (mediaQuery.matches) { // Then trigger an alert alert('Media Query Matched!') } You can also add an event listener to the mediaQuery which you’ll want to do to respond to the user changing the size of the window — see this post for details on how to do that. ...