126 TILs and counting...

HTTP files

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....

September 13, 2024 · 1 min · Brandon Pugh

ASP.NET max upload file size

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....

August 30, 2024 · 2 min · Brandon Pugh

UUID v7

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()....

August 21, 2024 · 1 min · Brandon Pugh

Quickly change the end of a line

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/$/,/ 😁

August 20, 2024 · 1 min · Brandon Pugh

Abort controller

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.

July 24, 2024 · 1 min · Brandon Pugh

Drag and drop upload

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....

July 24, 2024 · 1 min · Brandon Pugh

Input modes

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: This is overall an improvement in usability I think except if you need to allow the user to enter negative numbers....

July 17, 2024 · 1 min · Brandon Pugh

:has selector

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:...

July 12, 2024 · 1 min · Brandon Pugh

Use media queries in javascript with the matchMedia() method

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....

July 10, 2024 · 1 min · Brandon Pugh

Numeric separators

Today I learned about numeric separators in javascript. They are a small bit of syntactic sugar to make large numeric literals easier to read by letting you insert underscores anywhere in the number. For example, if you need to specify 10mb in byes, instead of 10485760, you can write it as: const maxUploadSize = 10_485_760; They were added in ECMAScript 2021 and in C# 7.

July 2, 2024 · 1 min · Brandon Pugh