Mortgage calculations in JS: annuity and fixed principal
Published on in JavaScript
Instead of spending 5 minutes to look for and use an existing mortgage calculator, I wasted time figuring out how to do the calculations from scratch.
JavaScript
Sorting a read-only array is OK if it has only 1 or 0 items
Published on in JavaScript and TypeScript
Huh. But if the array has 2+ items, attempting to sort it will cause a TypeError.
Toggleable React state with a 1-line useReducer
Published on in JavaScript and React
Say goodbye to useState
and a silly toggler function calling the state setter.
Be cool and use a tiny reducer instead.
1 line of code to animate element additions, removals and moves
Published on in JavaScript, Mithril.js and React
AutoAnimate is a JS library that provides simple animations with no effort. Works with Mithril.js, React and any other JS app.
Your Button component should default to type="button"
Published on in JavaScript, React and TypeScript
A <button> element defaults to type="submit"
which can cause accidental form submissions.
Make type="button" the default in your Button component
to make your life easier.
Client-side navigation and React's dangerouslySetInnerHTML
Published on in JavaScript, React and TypeScript
Last updated on
To handle internal link clicks when using dangerouslySetInnerHTML,
attach click event listeners to the rendered links.
In the listener, push the link to the browser history.
Joi: checking against multiple values in conditional()
Published on in JavaScript
Last updated on
Use { is: Joi.any().valid(...values) }
to check if a value is included in an array.
.mts is a cool file extension (TypeScript ES modules)
Published on in JavaScript, Node.js and TypeScript
What's that, a file extension named after me?! Or a file extension for TypeScript files that are always ES modules?
Why compose() is right-to-left
Published on in JavaScript
Functions composed together with compose()
are called from right to left.
It feels unintuitive at first,
but it's conventional
and kind of makes sense.
React's ecosystem is a dumb necessity
Published on in JavaScript, Mithril.js, Rant and React
Last updated on
React's ecosystem is large, which is a good thing: lot's of great libraries to use. But it's also a bad thing: most of those libraries are compatible only with React.
JSX vs HTM (Hyperscript Tagged Markup)
Published on in JavaScript and React
Last updated on
HTM provides a transpiler-free alternative to JSX via tagged templates. HTM has some limitations, but can be used in browsers and can be good for smaller projects.
FizzBuzz in JavaScript with infinite arrays and multimapping
Published on in JavaScript
Fun way to solve the simple puzzle.
Infinitely repeating arrays
and mapping over multiple arrays
almost makes the remainder/modulo operator (%) unnecessary.
Memoized Fibonacci function in 1 line of JavaScript
Published on in JavaScript and TypeScript
Using recursion,
logical OR assignment operator (||=),
BigInts
and more!
How to render Optimizely Content Recommendations using React
Published on in Episerver, JavaScript and React
Last updated on
Also known as Episerver/Idio Content Recommendations. The usual way of using a Mustache template can be circumvented by using a JavaScript proxy.
JavaScript functions have a length property
Published on in JavaScript
Last updated on
A bit exotic, but can be useful for currying.
Cool way to check for leap years in JavaScript
Published on in JavaScript
Spoiler:
new Date(year, 1, 29).getDate() === 29.
How to get component's HTML without mounting in Mithril.js
Published on in JavaScript and Mithril.js
Last updated on
Create a DocumentFragment
and render the component to it.
Then there's no need to mount the component to the DOM.
How to debounce events in Mithril.js
Published on in JavaScript and Mithril.js
Last updated on
Disable auto-redraw with event.redraw = false
and use a timeout.
How to nest selectors in Mithril.js for extra brevity
Published on in JavaScript and Mithril.js
Last updated on
m.nest('ul > li', 'Item')
can be achieved with reduceRight().
Formatting lists with JavaScript's Intl.ListFormat
Published on in JavaScript
Last updated on
Pass an array of strings and get back a string with the array items separated by commas, except with the last comma replaced with the word "and" or "or." Like "item 1, item 2 and item 3."
How to pretty print JSON in JavaScript
Published on in JavaScript
Last updated on
Run JSON.stringify(object, null, 2).
Adjust the number for a different level of indentation.
3 ways to convert a path into cumulative segments in JavaScript
Published on in JavaScript and Regular expressions
Last updated on
How to convert
'/foo/bar/baz/'
into an array of
'/', '/foo/', '/foo/bar/', and '/foo/bar/baz/'.
Example use case: building breadcrumb navigations.
JavaScript's Date() constructor is bad at parsing dates
Published on in JavaScript
Last updated on
And Date.parse() too.
They are strongly discouraged
due to browser differences and inconsistencies.
Use only proper date time formats
or use a library for parsing fancy formats.
"Illegal invocation" errors in JavaScript
Published on in JavaScript
Last updated on
The error is thrown when calling a function
whose this keyword isn't referring to the object where it originally did,
i.e. when the "context" of the function is lost.
Mnemonic for array.shift() vs array.unshift() in JavaScript
Published on in JavaScript and Mnemonics
Last updated on
shift() removes the first array item,
and unshift() prepends items to the array.
But how to remember which is which?
Using non-default locales with toLocaleString() in Node.js
Published on in JavaScript, Node.js and npm
Last updated on
With Node.js 13+,
it should just work.
With earlier Node.js versions,
you need to install and use the full-icu package.
Calculating week numbers in JS is surprisingly complex
Published on in JavaScript
JavaScript doesn't provide a native way to get the week number of a date. Just use a library instead.
How to do overlapping matches with regular expressions
Published on in JavaScript and Regular expressions
Last updated on
E.g. how to capture overlapping pairs of letters from the string 'abcde',
i.e. 'ab', 'bc', 'cd' and 'de'.
Spoiler: with lookahead and lookbehind assertions.
fn.apply() vs fn.call() in JavaScript + better alternative
Published on in JavaScript and Mnemonics
Last updated on
Mnemonic:
"a" (apply()) for an array,
"c" (call()) for commas.
But Reflect.apply() is better.
Uncontrolled form inputs in React
Published on in JavaScript and React
Last updated on
If you need form input values only at the time of form submission, uncontrolled inputs can be nice to work with.
Notes on Tail Call Optimization: The Musical!
Published on in JavaScript
Last updated on
My quick notes on a funny but informative video (11:27) that explains how tail call optimization (TCO) works. Bonus: does JS support TCO? Spoiler: yes but no.
How to chunk an array in JavaScript
Published on in JavaScript
Last updated on
A simple reducer to chunk (split) an array into smaller arrays.
How to bypass Episerver's Content Delivery API when doing Ajax requests
Published on in C#, Episerver and JavaScript
Requests with the Accept header set to application/json
are automatically routed to Content Delivery API.
Here's how to bypass it
and make the request go to a page controller instead.
Hyperscript: hyperior alternative to JSX
Published on in JavaScript, Mithril.js and React
Last updated on
JSX is just JS under the hood.
Hyperscript is like that JS,
but better.
Example:
h('a.link', { href }, 'Click me')
is nicer than
<a className="link" href={href}>Click me</a>,
right? Right?!