TClark1011

Bridge Mobile Problems

This file lists some common problems you may run into when developing Homescreens for IOS and Android

bridge.readFile Fails

bridge.readFile will often fail on IOS. This seems to be caused by a quirk with the way the IOS bridge handles downloading files. Luckily, it will often work on repeated attempts, so you can create a dedicated readFile function that uses some kind of promise retry logic:

export const promiseWait = (ms: number) =>

TClark1011

Writing Tailwind Plugins in Typescript

If you are writing a tailwind plugin in typescript tailwind file (tailwind.config.ts), you have to use the plugin() function. At time of writing, there seems to be a bug where if you try to use your IDEs auto import to get this function, it imports as the default export of the tailwindcss package:

import plugin from "tailwindcss";

This is wrong, and if you try to write a plugin with this import you will get type errors, since you have not in fact plugin function. To fix this, you just need to import it from tailwindcss/plugin:

TClark1011

• Isometric: Isometric vectors that are totally free to use
• Loading.CSS: CSS loading animations that are easily applied with classes

TClark1011

Starting a New Resume Project

For all new versions of my resume going forward I should stick to using the current GraphCMS setup for storing content and only create new frontends for the resume. This is a guide on getting setup to sue the GraphCMS stuff.

Initial Setup

• Initialise a new project
• Add the codegen.yml and graphql.schema.json files in this gist to your project's root
• Create a src/graphql folder and move all of the .graphql files in this gist into it
• Run the following:

TClark1011

import {
	PropsWithChildren,
	createContext,
	useCallback,
	useContext,
	useEffect,
	useMemo,
	useReducer,
} from "react";

TClark1011

button,
input[type="checkbox"] {
	cursor: pointer;
}

li {
	display: flex;
	align-items: center;
}

TClark1011

module.exports = {
	root: true,
	parser: "@typescript-eslint/parser",
	extends: [
		"eslint:recommended",
		"plugin:@typescript-eslint/recommended",
		"airbnb-base",
		"airbnb-typescript/base",
		"plugin:jest/recommended",
		"plugin:sonarjs/recommended",

TClark1011

1. Run yarn add cypress --dev
2. Add cypress.json to root
3. Run yarn run cypress open.
4. Close the window
5. Rename cypress/plugins/index.js to index.cjs
6. Create a new tsconfig.json inside the cypress folder and copy the contents from this gist
7. Add the following to your .gitignore:

cypress/videos
cypress/screenshots

TClark1011

name: check
on: pull_request
jobs:
  test-and-build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: "14"

TClark1011

Auto Versioning/Release CI Workflow

This workflow uses standard-version to automatically handle version bumping and changelog generation.

Installation

• Put release.yaml inside .github/workflows/
• (Optional) If you want to be able to manually set what type of release will be performed create the following labels (as in the labels that can be applied to issues and PRs) in your repo:
  • force-release:patch
• force-release:minor