Javascript

UI Algorithms: A Tiny Undo Stack A pretty clever little implementation of an undo/redo data structure in JavaScript.

JavaScript Fatigue Strikes Back I think is a nice very high overview of the current state of the Javascript ecosystem. I also like this potential explanation for why there tends to be more churn than with backend frameworks: The problem was that, unlike Ruby, PHP, or Python, most JavaScript needs to run in the browser. Historically, this put an evolutionary pressure on JavaScript frameworks to be small and bereft of legacy code, rather than expansive and featureful. ...

Today I learned about the classList.toggle() method in JavaScript, which makes it trivial to add or remove a class from an element dynamically: const button = document.querySelector("button"); button.addEventListener("click", () => { button.classList.toggle("active"); }); This is has been widely supported in browsers since 2015 with the addition of classList and makes it a lot easier to manipulate the classes on an element instead of having to manipulate the className string which is why people used to reach for jQuery for that. ...

Today I learned that there is a newish javascript array method toSorted() which is the “copying” or non-mutating version of sort(). This means you can easily sort an array by getting back a new copy instead of mutating the original: const months = ["Mar", "Jan", "Feb", "Dec"]; const sortedMonths = months.toSorted(); console.log(sortedMonths); // ['Dec', 'Feb', 'Jan', 'Mar'] console.log(months); // ['Mar', 'Jan', 'Feb', 'Dec'] It’s pretty cool to see javascript moving more towards immutability. I mentioned the with() method before and now there is also toReversed() and toSpliced(). ...

I just came across this cool site that let’s you compare a bunch of javascript UI frameworks with just code snippets for doing various tasks. Component Party This is also a convenient way to compare the changes in the “Angular Renaissance” with the previous versions of Angular.

Today I learned that javascript has a handy built-in function called URLSearchParams() that you can use to build a url query string from an object. const petfinderData = { key: "12345", shelterID: "abc00", count: 20, animals: ["dogs", "cats"], }; const query = new URLSearchParams(petfinderData); // returns "key=12345&shelterID=abc00&count=20&animals=dogs%2Ccats" const queryString = query.toString(); Read more: https://gomakethings.com/how-to-build-a-query-string-from-an-object-of-data-with-vanilla-js/ You’ll want to be careful with complex object list arrays since it serializes to a form like animals=dogs,cats, which not be the format the server expects. Asp.net model-binding for instance, by default expects a format like animals=dogs&animals=cats (and some other variations). ...

Today I learned about console.trace() when I needed to find out where a global function was being overridden: Object.defineProperty(window, 'setErrorMessage', { set(value) { console.trace('Global variable set:', value); } }); This little snippet outputs a stack trace anywhere code was trying to define this global function and let me right to the culprit. See more about .trace()

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

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