Transfer [[Good documentation is written by and for humans]] by [[Jason Etcovich]]

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

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

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"

Today I held a workshop in testing for my team at [[Hemnet]]. All the descriptions, code, and explanations are available on the page [[Frontend testing workshop]]

Make many small commits instead of a few large ones. This will make the PR read more as a story of what happened which is a good compliment to a good description.

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

The act utility in [[React]] makes your tests run closer to how React works in the browser. If you're using [[Testing Library]] you won't need it that often since the library already wraps the code in act when necessary.

The correct pronunciation for .png is ping according to its inventor [[Thomas Boutell]], although he states that pronouncing the acronym can never be considered wrong. #TIL

A coworker asked for tips on how to get more advanced [[React]] knowledge. This got me thinking about how I do learning.

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

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

Write out all the test cases – that you can think of – as TODOs before you start writing the code. [[Jest]] will display these tests as a separate metric in the interactive runner and in the test summary. It's as simple as using test.todo('description') #Testing