You've found my devlog! Here I'm trying to collect ideas and thoughts, new findings, and reminders regarding software development. I see it as a second brain for all things related to development. It's also also a way for me to practice [[Learning in public]].

The content is created in Logseq, exported to JSON and then generated as static HTML.

2021-06-15

Here's an example of a bug I found recently. It was a list of users that occasionally displayed the wrong name with the wrong image. The data was stored as a JSON file and was using a .sort() operation before looping over each item. .sort() is a mutating method and by adding a .slice() before sorting we can create a shallow copy of the array to not alter the original data.
A great way of finding out whether an array method is mutating or not is by using https://doesitmutate.xyz/
// React app

const data = [{ name: 'Test Testsson' }, { name: 'Aaron Aaronson' }];

// Incorrect
// The sorting operation that was used didn't really work as expected
// and since the sort method is mutating the original data
// we got some unexpected results
data.sort((a, b) => a.name > b.name).map((user) => <div>{user.name}</div>);

// Correct
// Use the slice method to create a copy of the array
// to not mutate the original data.
// Update the sorting operation to use localeCompare for better results
data
.slice()
.sort((a, b) => a.name.localeCompare(b.name))
.map((user) => <div>{user.name}</div>);

2021-06-10

I'll keep this here for future reference when I eventually forget what the meta tag should be and have to look it up again [[Meta viewport for mobile devices]]
Since I always forget it I've created a snippet for it. Below is a version for [[UltiSnips]] and it's also available as a [[VS Code]] snippet on my snippets page.
# Make the viewport scale correctly on mobile devices
snippet metav "Meta viewport"
<meta name="viewport" content="width=device-width, initial-scale=1" />
endsnippet
An example of how to use grid columns as "padding" [[CSS Grid tricks]]

2021-06-09

In [[TypeScript]] there are two syntaxes (are there more?) for defining a type of an object, either [[Index signature]] or the [[Record utility]]. In my opinion, the Record syntax looks more readable.
type Server = 'dev' | 'stage' | 'production'

// Index signature
const serversIndex: { [key in Server]: string } = {
dev: 'url-dev',
stage: 'url-stage',
production: 'url-production'
} as const

// Using the Record utility
const serversRecord: Record<Server, string> = {
dev: 'url-dev',
stage: 'url-stage',
production: 'url-production'
} as const