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