natterstefan

Password Autofill on a React Native Expo app

Developing an app to accompany our website, worried that we would lose people in the transition if they couldn't remember their password, we were looking to make our app do Password AutoFill, a feature in iOS.

A talk from WWDC introducing the feature: https://developer.apple.com/videos/play/wwdc2017/206/

It works well, but there were a few bumps in the road making it work for React Native on Expo, so here are some notes to help out.

Apple's docs are here: https://developer.apple.com/documentation/security/password_autofill and they say something like this:

natterstefan

/**
* Works in Next.js 10.x
*/
import React from 'react'
import parse, {
  domToReact,
  attributesToProps,
  Element,
  HTMLReactParserOptions,
} from 'html-react-parser'

natterstefan

Jest - mock useState

When using import React, { useState } from 'react' in your components, this is how you can mock useState with jest.

natterstefan

// function to generate a random number within a range
function getRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

// function to generate a random mouse coordinate within the viewport
function getRandomCoordinate() {
  const x = getRandomNumber(0, window.innerWidth);
  const y = getRandomNumber(0, window.innerHeight);
  return { x, y };

natterstefan

Research | macOS fix node-gyp

Node

Update asdf

asdf plugin-update --all

natterstefan

Next.js | Catch-All route including index

natterstefan

#!/bin/bash
# gdrive client: https://github.com/gdrive-org/gdrive
# inspired by https://github.com/gdrive-org/gdrive/issues/205#issuecomment-423759052

# Create directory ~/backups (must be empty at the beginning)
rm -rf ~/backups && mkdir ~/backups

# upload it the first time into a parent directory
# 1234 => id of the parent directory on google drive
# eg. https://drive.google.com/drive/u/0/folders/1234

natterstefan

#!/bin/bash

# create backup folders (if they do not exist yet)
mkdir -p ~/backups
mkdir -p ~/backups/unifi
mkdir -p ~/backups/pihole

# backup pi-hole
(cd ~/backups/pihole && pihole -a teleporter)

natterstefan

Infer Types from PropTypes

Result

Limitations

natterstefan

Storybook | Tailwind in Next.js App with Webpack@5

Installation

# install storybook dependencies
yarn add @storybook/addon-actions @storybook/addon-essentials @storybook/react -D
yarn add @storybook/addon-postcss@latest -D

# install webpack5 dependency