javascript

I recently discovered Mock Service Worker, a clever javascript utility that let’s you mock your API by intercepting network requests. I’ve started using it in my frontend tests after reading Kent’s article Stop Mocking Fetch and it’s a nice way to test a component is handling network requests appropriately without actually hitting an API. The novel aspect is that it can install itself as a service worker (which can intercept network requests for caching) in your app during development and reuse the same mock requests that you’ve setup during testing....

Today I learned about a key difference between how javascript handles null values in interpolated strings compared to a language like C# In C#: var param1 = null; var queryString = $"param1={param1}"; // => param1= In Javascript var param1 = null; var queryString = `param1=${param1}`; // => param1=null the latter is probably not what you want since your api will likely set param1 to a string value of “null”.

Today I learned about Object.fromEntries() in javascript which essentially lets you convert a list of key/value pairs into an object (this is the same as the lodash function fromPairs). This came in handy when I needed to convert a list of entities into a lookup object like: Object.fromEntries( users.map((user) => { return [user.id, user.isSelected]; }) ); // => { '1': true, '2': false, '3': false }

I just discovered the with() method which takes an index value and a value to insert at that index and returns a new array with the value inserted at the index. const arr = [1, 2, 3, 4, 5]; const newArr = arr.with(2, 'a'); console.log(newArr); // [1, 2, 'a', 4, 5] You could do this before with something like arr[2] = 'a' but that would modify the original array. The with() method became widely supported in 2021....

You can get pretty good type checking in Javascript with just JSDoc comments and an editor like VS code or Visual Studio. You’ll get most of the same intellisense and warnings in your editor as you would with Typescript. Combine this with a library like Zod which can infer validation schemas from your types and you’ll have runtime checking also! See: https://blog.jim-nielsen.com/2023/types-in-jsdoc-with-zod/ https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html

I’ve gone through the setup and daily use of a number of editors over the years including most current popular ones for front end development (i.e. sublime, atom, and vs code) and for me VS code is the best choice for front end development at the moment. The team has put a lot of effort into making it a great javascript experience out of the box and it shows (VS code itself is written in typescript and the team uses vs code to build vs code) and with some additional work you can have the best experience while writing javascript....

One of the most used features of jQuery is the easy methods it provides to to attach event handlers to dom elements like this simple example: $('.submitButton').click(function() { validateForm(); }); It doesn’t get much easier than that. However, a lot of times we’ll want to attach events to elements that were loaded after the initial page load such as from the result of an ajax request. This is where the ....

You may have noticed before that if you try to paste more than one line of text into a textbox in Internet explorer it will on only paste in the first line and disregard the rest. Firefox and Chrome on the other hand will automatically paste all lines of the text onto the one line of the textbox. This issue came up in one of the projects I’m currently working on where we wanted users to be able to paste in a list of ID numbers they wanted to run a search on....