22 posts tagged with "javascript"

Consider this array of names:

const names = [
	"Filip",
	"Anna",
	"Jennifer",
	"Anna",
	"Robert",
	"Emma",
	"Filip",
	"Anna",
]

In this array, Filip occurs two times and Anna three times. What if we want to filter out the duplicates and get an array with the unique names?

Use this counter if you want to count words, characters or a sequence of characters in a text!

Number of words: 0

Number of characters: 0

Let's look at how to perform operations on immutable objects in JavaScript, just like we did for arrays in this post.

We start with an object representing a person:

const person = {
	name: "Filip",
	age: 26,
	city: "Uppsala",
}

As mentioned many times before, I always try to keep my variables immutable when developing. Let's take a closer look at how we accomplish immutable arrays in JavaScript when adding, replacing or removing elements. We start with an array of birds:

const birds = ["Great tit", "Blue tit", "Pine grosbeak", "Stock dove"]

Let's say we have this array of cities:

const cities = ["Uppsala", "Stockholm", "Lycksele", "Lund"]

And let's say we want to write the cities from the array in a sentence like this:

Uppsala, Stockholm, Lycksele and Lund are 4 nice cities in Sweden.

How?!

I recently added support for filtering blog posts by categories. (I've since replaced that with category and author pages, so this functionality is no longer used.) Next to each category in the filter view, the number of posts in that category was also shown. In this post I'll walk through what I was trying to accomplish and how I solved it.

Have you ever copied something and immediately forgotten what it was?

TL;DR​

• navigator.clipboard.readText() returns a Promise<string> with the current clipboard text.
• It is only available in a secure context (HTTPS or localhost), and the read has to happen during a user activation — that's why it's wired up to a button click rather than running on mount.
• The call can reject (permission denied, document not focused, no clipboard support, …), so it always belongs in a try/catch.

Finding the index of the largest value in an array is one of those tasks that looks trivial but has a few different shapes — each with its own trade-offs around readability, performance and pitfalls.

TL;DR​

• A for-loop works but requires several mutable variables.
• A reduce can do the job in a single pass, but it isn't very readable.
• In practice years.indexOf(Math.max(...years)) is usually the best choice — readable and compact, even though it walks the array three times under the hood.

Have you ever wondered how old you are…in milliseconds? Or exactly how many weeks there are between two moments in time? Don't worry, in this post you can get the answer to all your "How many [unit] is it between [moment] and [moment]?" questions!

TL;DR​

• Milliseconds, seconds, minutes, hours, days and weeks between two moments are trivial to compute — just divide the millisecond difference by the right constant.
• Months and years are trickier because their length varies. The trick is to count full periods forward from the start date and add the fraction of the next period we've reached — the same anchor-based model the Temporal API uses.
• If you just want the answer, call Temporal.Duration.prototype.total directly instead of writing the math yourself.

Robber language (Swedish: rövarspråket) is said to have been invented by Sture Lindgren — husband of the author Astrid Lindgren — when he played with his friends as a child. Astrid Lindgren's books about Kalle Blomkvist made the language popular in Sweden.

Robber language is a spoken code where every consonant is replaced by the consonant + "o" + the consonant again. From that simple rule, building a robber language generator should be dead easy. When it comes to written robber language, however, there are a few more aspects to consider. So this post is really about a written robber language generator.

TL;DR​

• The simple spoken rule (consonant + "o" + consonant) needs a few additions to work in writing — mainly handling "x" and uppercase.
• This post walks through two strategies for building a generator in JavaScript: looping over the consonants, and looping over the text to translate.
• A regex with a callback can collapse the whole thing into two lines, shown as the final alternative.