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.

I'm currently on paternal leave for the rest of 2021. Updates might not happen that often.

2021-06-22

Tech is full of jargon which can be hard for everyone to understand. Some languages might not even have a name for a certain topic. Here are a few ways that can help make things easier to understand
Use cartoons or illustrations instead of writing text
Limit slang in issues/[[PR]]s. [[Explain in plain words]]
Work with native speakers of other languages to create better documentation
I keep forgetting the official names for each part of the structure of CSS. Hopefully writing it down will help future me in remembering it - [[Structure of CSS]].

2021-06-21

I hadn't kept up with what the latest was in the newly announced [[React]] 18 but decided that it was the perfect thing to start this Monday off with. [[What's new in React 18]]
If you use a correct [[Meta viewport for mobile devices]] you'll never see the 300-350 ms tap delay that browsers add to wait for a double tap. If you for some reason can't add the meta tag, there's also a [[CSS]] property that does the same thing. It's not supported by [[Firefox]], so the meta tag is preferred.
Neither of the solutions affect the [[Accessibility]] on the page since pinch-to-zoom will still work.
/* Set the property on the entire page or on specific
elements like a or button */

html {
touch-action: manipulation;
}
Linked references
AbortController can be used to cancel multiple request

2021-06-18

I haven't thought about using my sidebar/file explorer to the right in [[Neovim]] (or in any other [[IDE]] I've ever used for that matter). After reading through the answers in this Twitter question I found it interesting that with the sidebar to the right, the code won't shift when toggling it. I think a lot of people keep the file explorer open while developing and don't experience this, but I always close it when I don't use it. I'm going to try using the sidebar to the right for a while and see if it sticks.
I'm using [[NERDTree]] as my file explorer and the setting to display the sidebar to the right is
let g:NERDTreeWinPos = "right"

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]]
Linked references
What's new in React 18

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