TIL: Today I learned...

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

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

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

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

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

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.

protip: if you need to clear out some saved data (like cookies) for a particular site, Chrome dev tools has a handy “Clear site data” function. You can get to it from the “Application” tab: or from the command palette which you can invoke with ctrl+shift+p: To me this is much more convenient than trying to go through the normal user settings for clearing There is also chrome://settings/content/siteDetails?site=https%3A%2F%2Flocalhost