Forem: Takuya Matsuyama

How to specify pre-processor flags to the JSI-based React Native libraries

Takuya Matsuyama — Thu, 29 Sep 2022 05:07:07 +0000

Hi, it's Takuya.
I'm building a note-taking app called Inkdrop for mobile using React Native.

The app uses react-native-quick-sqlite, a fast wrapper of SQLite:

ospfranco / react-native-quick-sqlite

Fast SQLite for react-native.

New package op-sqlite. It is a lot faster and consumes much less memory.

It embeds the latest version of SQLite in C/C++.
That means that you build SQLite from source in your RN project on Xcode and Android Studio (CMake).

It doesn't enable any compile-time options by default, and I needed to enable FTS5 for full-text search in my app.
It can be enabled by specifying a SQLITE_ENABLE_FTS5 pre-processor flag when compiling.

I've managed to enable FTS5 and I'd like to share how to do that in your project.
For Android, the library needs to make some changes. So, it'd be helpful for library maintainers who would support accepting custom build flags.

iOS

Fortunately, CocoaPods allows you to customize the pods project settings via Podfile:

https://guides.cocoapods.org/syntax/podfile.html

Add a post_install block to your <PROJECT_ROOT>/ios/Podfile like so:

post_install do |installer|
  installer.pods_project.targets.each do |target|
    if target.name == "react-native-quick-sqlite" then
      target.build_configurations.each do |config|
        config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= ['$(inherited)', '<SQLITE_FLAGS>']
      end
    end
  end
end

Replace the <SQLITE_FLAGS> part with flags you want to add.
For example, you could add SQLITE_ENABLE_FTS5=1 to GCC_PREPROCESSOR_DEFINITIONS to enable FTS5 in the iOS project.

Android

The native modules are compiled with CMake that reads CMakeLists.txt.

CMake supports adding flags with add_definitions command.

Add the following lines in the library's CMakeLists.txt:

add_definitions(
  ${SQLITE_FLAGS}
)

It specifies flags via the variable SQLITE_FLAGS, which needs to be specified in react-native-quick-sqlite/android/build.gradle like so:

def SQLITE_FLAGS = rootProject.properties['quickSqliteFlags']

android {
  defaultConfig {
    externalNativeBuild {
        cmake {
            arguments '-DANDROID_STL=c++_shared',
              "-DREACT_NATIVE_VERSION=${REACT_NATIVE_VERSION}",
              "-DNODE_MODULES_DIR=${nodeModules}",
              "-DSQLITE_FLAGS='${SQLITE_FLAGS ? SQLITE_FLAGS : ''}'"
        }
    }

Now, you can define the flags in your <PROJECT_ROOT>/android/gradle.properties like so:

quickSqliteFlags="<SQLITE_FLAGS>"

That's it!
I've sent a pull request to the quick sqlite repository:

feat(ios&android): Support specifying pre-processor flags to sqlite #86

craftzdog posted on Sep 29, 2022

I've managed to enable FTS5 on both iOS and Android by specifying pre-processor flags.

On Android, we need to accept a setting from the parent project. This PR makes it possible to specify SQLite flags via android/gradle.properties.

Also, I've added instructions on how to do that for iOS and Android. Maybe the grammar could be improved tho.

fix #37

View on GitHub

Hope that helps.

Follow me online

Check out my app called Inkdrop — A Markdown note-taking app
Twitter https://twitter.com/inkdrop_app
Blog https://blog.inkdrop.app/
YouTube https://www.youtube.com/devaslife
Instagram https://instagram.com/craftzdog

My Neovim setup for React, TypeScript, Tailwind CSS, etc

Takuya Matsuyama — Tue, 09 Aug 2022 10:35:56 +0000

Hi, it's Takuya here.
As you may know, I mainly use Neovim to code my app called Inkdrop, a cross-platform Markdown note-taking app.
It's built with Electron for desktop and React Native for mobile platforms.
It's been 1 year since I last posted my Neovim setup.
Neovim and its plugins have been evolved so well.
So, I'd like to share my latest setup for coding React and TypeScript based apps.
The main difference is that the config files are now written in Lua.
I switched from vim-plug to Packer.
I also made a tutorial video on how to set up Neovim from scratch on a new M2 MacBook Air.
If you have your own dotfiles already, you can cherry-pick my config.
I hope you enjoy it!

Ingredients

Here is a quick summary of my set up:

Neovim >= 0.7
wbthomason/packer.nvim - A plugin manager for Neovim
svrana/neosolarized.nvim - A truecolor, solarized dark colorscheme
nvim-lualine/lualine.nvim - A blazing fast and easy to configure Neovim statusline written in Lua
onsails/lspkind-nvim - VSCode-like pictograms
L3MON4D3/LuaSnip - Snippet Engine for Neovim written in Lua
hrsh7th/cmp-nvim-lsp - nvim-cmp source for neovim's built-in LSP
hrsh7th/cmp-buffer - nvim-cmp source for buffer words
hrsh7th/nvim-cmp - A completion engine plugin for neovim written in Lua
neovim/nvim-lspconfig - A collection of configurations for Neovim's built-in LSP
jose-elias-alvarez/null-ls.nvim - Use Neovim as a language server to inject LSP diagnostics, code actions, and more via Lua.
MunifTanjim/prettier.nvim - Prettier plugin for Neovim's built-in LSP client
williamboman/mason.nvim - Portable package manager for Neovim that runs everywhere Neovim runs. Easily install and manage LSP servers, DAP servers, linters, and formatters
williamboman/mason-lspconfig.nvim - Extension to mason.nvim that makes it easier to use lspconfig with mason.nvim
glepnir/lspsaga.nvim - A light-weight lsp plugin based on neovim's built-in lsp with a highly performant UI
nvim-treesitter/nvim-treesitter - Treesitter configurations and abstraction layer for Neovim
kyazdani42/nvim-web-devicons - Lua fork of vim-web-devicons for neovim
nvim-telescope/telescope.nvim - A highly extendable fuzzy finder over lists
nvim-telescope/telescope-file-browser.nvim - File Browser extension for telescope.nvim
windwp/nvim-autopairs - Autopairs
windwp/nvim-ts-autotag - Use treesitter to auto close and auto rename html tag
norcalli/nvim-colorizer.lua - A high-performance color highlighter
akinsho/nvim-bufferline.lua - A snazzy bufferline
lewis6991/gitsigns.nvim - Git integration for buffers
dinhhuy258/git.nvim - A simple clone of the plugin vim-fugitive
folke/zen-mode.nvim - Distraction-free mode
iamcco/markdown-preview.nvim - Markdown live preview

And here is my dotfiles repository:

craftzdog / dotfiles-public

My personal dotfiles

Takuya's dotfiles

Warning: Don’t blindly use my settings unless you know what that entails. Use at your own risk!

Looking for a Markdown note-taking app?

Check out my app called Inkdrop

vim (Neovim) config
tmux config
git config
fish config
PowerShell config

Neovim setup

Requirements

Neovim >= 0.9.0 (needs to be built with LuaJIT)
Git >= 2.19.0 (for partial clones support)
LazyVim
a Nerd Font(v3.0 or greater) (optional, but needed to display some icons)
lazygit (optional)
a C compiler for nvim-treesitter. See here
for telescope.nvim (optional)
- live grep: ripgrep
- find files: fd
a terminal that support true color and undercurl:
- kitty (Linux & Macos)
- wezterm (Linux, Macos & Windows)
- alacritty (Linux, Macos & Windows)
- iterm2 (Macos)
Solarized Osaka

Shell setup (macOS & Linux)

Fish shell
Fisher - Plugin manager
Tide - Shell theme
Nerd fonts - Patched fonts for development-use. I use…

View on GitHub

A tutorial video:

Prerequisites — iTerm2 and Patched Nerd Font

iTerm2 is a fast terminal emulator for macOS.
Install one of Nerd Fonts for displaying fancy glyphs on your terminal.
My current choice is Hack.
And use it on your terminal app. For example, on iTerm2:

Install Neovim via Homebrew



brew install neovim

Directory structure

Neovim conforms XDG Base Directory structure. Here is my config file structure:



📂 ~/.config/nvim
├── 📁 after
│  └── 📁 plugin
├── 📂 lua
│  └── 🌑 base.lua
├── 📁 plugin
└── 🇻 init.lua

Neovim loads $HOME/.config/nvim/init.vim or init.lua first instead of $HOME/.vimrc.
Check out the quickstart guide for more detail:

https://github.com/nanotee/nvim-lua-guide

Install plugin manager: Packer

Install Packer by running the below command:



git clone --depth 1 https://github.com/wbthomason/packer.nvim \
 ~/.local/share/nvim/site/pack/packer/start/packer.nvim

Then, make ./.config/nvim/lua/plugins.lua like so:



local status, packer = pcall(require, "packer")
if (not status) then
  print("Packer is not installed")
  return
end

vim.cmd [[packadd packer.nvim]]

packer.startup(function(use)
  use 'wbthomason/packer.nvim'
  -- Your plugins go here
end)

Then, require it from init.lua like so:



require('plugins')

Color scheme: Neosolarized

I use svrana/neosolarized.nvim with some customizations.



local status, n = pcall(require, "neosolarized")
if (not status) then return end

n.setup({
  comment_italics = true,
})

local cb = require('colorbuddy.init')
local Color = cb.Color
local colors = cb.colors
local Group = cb.Group
local groups = cb.groups
local styles = cb.styles

Color.new('black', '#000000')
Group.new('CursorLine', colors.none, colors.base03, styles.NONE, colors.base1)
Group.new('CursorLineNr', colors.yellow, colors.black, styles.NONE, colors.base1)
Group.new('Visual', colors.none, colors.base03, styles.reverse)

local cError = groups.Error.fg
local cInfo = groups.Information.fg
local cWarn = groups.Warning.fg
local cHint = groups.Hint.fg

Group.new("DiagnosticVirtualTextError", cError, cError:dark():dark():dark():dark(), styles.NONE)
Group.new("DiagnosticVirtualTextInfo", cInfo, cInfo:dark():dark():dark(), styles.NONE)
Group.new("DiagnosticVirtualTextWarn", cWarn, cWarn:dark():dark():dark(), styles.NONE)
Group.new("DiagnosticVirtualTextHint", cHint, cHint:dark():dark():dark(), styles.NONE)
Group.new("DiagnosticUnderlineError", colors.none, colors.none, styles.undercurl, cError)
Group.new("DiagnosticUnderlineWarn", colors.none, colors.none, styles.undercurl, cWarn)
Group.new("DiagnosticUnderlineInfo", colors.none, colors.none, styles.undercurl, cInfo)
Group.new("DiagnosticUnderlineHint", colors.none, colors.none, styles.undercurl, cHint)

Status line: Lualine

nvim-lualine/lualine.nvim provides a flexible way to configure statusline.



local status, lualine = pcall(require, "lualine")
if (not status) then return end

lualine.setup {
  options = {
    icons_enabled = true,
    theme = 'solarized_dark',
    section_separators = { left = '', right = '' },
    component_separators = { left = '', right = '' },
    disabled_filetypes = {}
  },
  sections = {
    lualine_a = { 'mode' },
    lualine_b = { 'branch' },
    lualine_c = { {
      'filename',
      file_status = true, -- displays file status (readonly status, modified status)
      path = 0 -- 0 = just filename, 1 = relative path, 2 = absolute path
    } },
    lualine_x = {
      { 'diagnostics', sources = { "nvim_diagnostic" }, symbols = { error = ' ', warn = ' ', info = ' ',
        hint = ' ' } },
      'encoding',
      'filetype'
    },
    lualine_y = { 'progress' },
    lualine_z = { 'location' }
  },
  inactive_sections = {
    lualine_a = {},
    lualine_b = {},
    lualine_c = { {
      'filename',
      file_status = true, -- displays file status (readonly status, modified status)
      path = 1 -- 0 = just filename, 1 = relative path, 2 = absolute path
    } },
    lualine_x = { 'location' },
    lualine_y = {},
    lualine_z = {}
  },
  tabline = {},
  extensions = { 'fugitive' }
}

Lspconfig

Neovim has a built-in LSP support.
You can easily configure it by using neovim/nvim-lspconfig.
For example, to enable typescript language server on Neovim:



local status, nvim_lsp = pcall(require, "lspconfig")
if (not status) then return end

local protocol = require('vim.lsp.protocol')

local on_attach = function(client, bufnr)
  -- format on save
  if client.server_capabilities.documentFormattingProvider then
    vim.api.nvim_create_autocmd("BufWritePre", {
      group = vim.api.nvim_create_augroup("Format", { clear = true }),
      buffer = bufnr,
      callback = function() vim.lsp.buf.formatting_seq_sync() end
    })
  end
end

-- TypeScript
nvim_lsp.tsserver.setup {
  on_attach = on_attach,
  filetypes = { "typescript", "typescriptreact", "typescript.tsx" },
  cmd = { "typescript-language-server", "--stdio" }
}

Don't forget to install typescript language server itself:



npm i -g typescript-language-server

Auto-completion: Lspkind and cmp

To get LSP-aware auto-completion feature with fancy pictograms, I use the following plugins:

onsails/lspkind-nvim - VSCode-like pictograms
L3MON4D3/LuaSnip - Snippet engine
hrsh7th/cmp-nvim-lsp - nvim-cmp source for neovim's built-in LSP
hrsh7th/cmp-buffer - nvim-cmp source for buffer words
hrsh7th/nvim-cmp - A completion engine plugin for neovim

Configure it like so:



local status, cmp = pcall(require, "cmp")
if (not status) then return end
local lspkind = require 'lspkind'

cmp.setup({
  snippet = {
    expand = function(args)
      require('luasnip').lsp_expand(args.body)
    end,
  },
  mapping = cmp.mapping.preset.insert({
    ['<C-d>'] = cmp.mapping.scroll_docs(-4),
    ['<C-f>'] = cmp.mapping.scroll_docs(4),
    ['<C-Space>'] = cmp.mapping.complete(),
    ['<C-e>'] = cmp.mapping.close(),
    ['<CR>'] = cmp.mapping.confirm({
      behavior = cmp.ConfirmBehavior.Replace,
      select = true
    }),
  }),
  sources = cmp.config.sources({
    { name = 'nvim_lsp' },
    { name = 'buffer' },
  }),
  formatting = {
    format = lspkind.cmp_format({ with_text = false, maxwidth = 50 })
  }
})

vim.cmd [[
  set completeopt=menuone,noinsert,noselect
  highlight! default link CmpItemKind CmpItemMenuDefault
]]

Syntax highlightings: Treesitter

Treesitter is a popular language parser for syntax highlightings.
First, install it:



brew install tree-sitter

Install nvim-treesitter/nvim-treesitter with Packer and configure it like so:



local status, ts = pcall(require, "nvim-treesitter.configs")
if (not status) then return end

ts.setup {
  highlight = {
    enable = true,
    disable = {},
  },
  indent = {
    enable = true,
    disable = {},
  },
  ensure_installed = {
    "tsx",
    "toml",
    "fish",
    "php",
    "json",
    "yaml",
    "swift",
    "css",
    "html",
    "lua"
  },
  autotag = {
    enable = true,
  },
}

local parser_config = require "nvim-treesitter.parsers".get_parser_configs()
parser_config.tsx.filetype_to_parsername = { "javascript", "typescript.tsx" }

Autotag and Autopair

For React apps, you often want to close tags quickly.
windwp/nvim-ts-autotag is exactly what you want.



local status, autotag = pcall(require, "nvim-ts-autotag")
if (not status) then return end

autotag.setup({})

windwp/nvim-autopairs is for closing brackets.



local status, autopairs = pcall(require, "nvim-autopairs")
if (not status) then return end

autopairs.setup({
  disable_filetype = { "TelescopePrompt" , "vim" },
})

Fuzz finder: Telescope

telescope.nvim provides an interactive fuzzy finder over lists, built on top of the latest Neovim features.
I also use telescope-file-browser.nvim as a filer.

It’s so useful because you can search files while viewing the content of the files without actually opening them. It supports various sources like Vim, files, Git, LSP, and Treesitter. Check out the showcase of Telescope.

Install kyazdani42/nvim-web-devicons to get file icons on Telescope, statusline, and other supported plugins.

The configuration would look like so:



local status, telescope = pcall(require, "telescope")
if (not status) then return end
local actions = require('telescope.actions')
local builtin = require("telescope.builtin")

local function telescope_buffer_dir()
  return vim.fn.expand('%:p:h')
end

local fb_actions = require "telescope".extensions.file_browser.actions

telescope.setup {
  defaults = {
    mappings = {
      n = {
        ["q"] = actions.close
      },
    },
  },
}

-- keymaps
vim.keymap.set('n', ';f',
  function()
    builtin.find_files({
      no_ignore = false,
      hidden = true
    })
  end)
vim.keymap.set('n', ';r', function()
  builtin.live_grep()
end)
vim.keymap.set('n', '\\\\', function()
  builtin.buffers()
end)
vim.keymap.set('n', ';t', function()
  builtin.help_tags()
end)
vim.keymap.set('n', ';;', function()
  builtin.resume()
end)
vim.keymap.set('n', ';e', function()
  builtin.diagnostics()
end)

Use the telescope browser extension:



telescope.setup {
  defaults = {
    mappings = {
      n = {
        ["q"] = actions.close
      },
    },
  },
  extensions = {
    file_browser = {
      theme = "dropdown",
      -- disables netrw and use telescope-file-browser in its place
      hijack_netrw = true,
      mappings = {
        -- your custom insert mode mappings
        ["i"] = {
          ["<C-w>"] = function() vim.cmd('normal vbd') end,
        },
        ["n"] = {
          -- your custom normal mode mappings
          ["N"] = fb_actions.create,
          ["h"] = fb_actions.goto_parent_dir,
          ["/"] = function()
            vim.cmd('startinsert')
          end
        },
      },
    },
  },
}
telescope.load_extension("file_browser")

vim.keymap.set("n", "sf", function()
  telescope.extensions.file_browser.file_browser({
    path = "%:p:h",
    cwd = telescope_buffer_dir(),
    respect_gitignore = false,
    hidden = true,
    grouped = true,
    previewer = false,
    initial_mode = "normal",
    layout_config = { height = 40 }
  })
end)

Tabs: Bufferline

I use akinsho/nvim-bufferline.lua to get better looking of tabs.
Make some customizations to make it look better with Solarized theme:



local status, bufferline = pcall(require, "bufferline")
if (not status) then return end

bufferline.setup({
  options = {
    mode = "tabs",
    separator_style = 'slant',
    always_show_bufferline = false,
    show_buffer_close_icons = false,
    show_close_icon = false,
    color_icons = true
  },
  highlights = {
    separator = {
      guifg = '#073642',
      guibg = '#002b36',
    },
    separator_selected = {
      guifg = '#073642',
    },
    background = {
      guifg = '#657b83',
      guibg = '#002b36'
    },
    buffer_selected = {
      guifg = '#fdf6e3',
      gui = "bold",
    },
    fill = {
      guibg = '#073642'
    }
  },
})

vim.keymap.set('n', '<Tab>', '<Cmd>BufferLineCycleNext<CR>', {})
vim.keymap.set('n', '<S-Tab>', '<Cmd>BufferLineCyclePrev<CR>', {})

LSP Uls: Lspsaga

glepnir/lspsaga.nvim is one of my favorite LSP plugins.
It provides beautiful UIs for various LSP-related features like hover doc, definition preview, and rename actions.
My configuration is simple:



local status, saga = pcall(require, "lspsaga")
if (not status) then return end

saga.init_lsp_saga {
  server_filetype_map = {
    typescript = 'typescript'
  }
}

local opts = { noremap = true, silent = true }
vim.keymap.set('n', '<C-j>', '<Cmd>Lspsaga diagnostic_jump_next<CR>', opts)
vim.keymap.set('n', 'K', '<Cmd>Lspsaga hover_doc<CR>', opts)
vim.keymap.set('n', 'gd', '<Cmd>Lspsaga lsp_finder<CR>', opts)
vim.keymap.set('i', '<C-k>', '<Cmd>Lspsaga signature_help<CR>', opts)
vim.keymap.set('n', 'gp', '<Cmd>Lspsaga preview_definition<CR>', opts)
vim.keymap.set('n', 'gr', '<Cmd>Lspsaga rename<CR>', opts)

Code formatter: Prettier and null-ls

I heavily rely on Prettier to format TypeScript/JavaScript/CSS files.
Use jose-elias-alvarez/null-ls.nvim and MunifTanjim/prettier.nvim to accomplish that.

First, you need prettierd:



brew install prettierd

Then, configure null-ls as following:



local status, null_ls = pcall(require, "null-ls")
if (not status) then return end

null_ls.setup({
  sources = {
    null_ls.builtins.diagnostics.eslint_d.with({
      diagnostics_format = '[eslint] #{m}\n(#{c})'
    }),
    null_ls.builtins.diagnostics.fish
  }
})

Prettier:



local status, prettier = pcall(require, "prettier")
if (not status) then return end

prettier.setup {
  bin = 'prettierd',
  filetypes = {
    "css",
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "json",
    "scss",
    "less"
  }
}

Git markers: gitsigns

lewis6991/gitsigns.nvim provides git decorations for current buffers.
It helps you know which lines are currently changed.
It works out of the box.



require('gitsigns').setup {}

git

I often view the code on GitHub.
dinhhuy258/git.nvim helps open GitHub right from Neovim, and provides git blame view in split view, which are super handy.



local status, git = pcall(require, "git")
if (not status) then return end

git.setup({
  keymaps = {
    -- Open blame window
    blame = "<Leader>gb",
    -- Open file/folder in git repository
    browse = "<Leader>go",
  }
})

LSP tool: mason

If you need additional LSP support for specific libraries, you may need williamboman/mason.nvim and williamboman/mason-lspconfig.nvim.
I use them for getting Tailwind CSS language server to work on Neovim.



local status, mason = pcall(require, "mason")
if (not status) then return end
local status2, lspconfig = pcall(require, "mason-lspconfig")
if (not status2) then return end

mason.setup({

})

lspconfig.setup {
  ensure_installed = { "sumneko_lua", "tailwindcss" },
}

Add lspconfig:



local nvim_lsp = require "lspconfig"
nvim_lsp.tailwindcss.setup {}

That’s pretty much it!
I hope it’s helpful for improving your Neovim environment.

Follow me online

Check out my app called Inkdrop — A Markdown note-taking app
Twitter https://twitter.com/inkdrop_app
Blog https://blog.inkdrop.app/
YouTube https://www.youtube.com/devaslife
Instagram https://instagram.com/craftzdog

A performant way to use PouchDB@7 on React Native in 2022

Takuya Matsuyama — Sun, 01 May 2022 01:13:49 +0000

Hi, it's Takuya here.
I've been developing a React Native app which syncs user data with CouchDB. The app is called Inkdrop.

I've published several posts on how to use PouchDB on React Native in the past:

This article is an update for using PouchDB on RN.

Fortunately, PouchDB is still maintained, and recently they've shipped v7.3.0 🎉. Much appreciated the community effort.

TL;DR

2~5x speed improvement!
Less library tweaks & simpler setup
Attachments are no longer supported
How to use

Use a JSI-based SQLite driver

Oscar Franco created a great SQLite driver react-native-quick-sqlite, which provides a low-level API to execute SQL queries, fast bindings via JSI. JSI has a smaller overhead than the traditional RN bridge's.
So, this is much faster than react-native-sqlite-2, which I made to get PouchDB to work on RN before.

I wanted to use it in my project, so I made react-native-quick-websql, which is a thin wrapper to make quick-sqlite compatible with WebSQL. It works flawlessly!

I'll discuss how it improves the performance later.

Tackling the NULL character issue (again)

There is still an issue in React Native - It can't store string data with \u0000.

JavaScript strings with NULL character are not handled properly when passed to Native Modules · Issue #12731 · facebook/react-native

To avoid the issue, the NULL characters are escaped/unescaped in react-native-sqlite-2 like so:



function escapeBlob(data: any) {
  if (typeof data === 'string') {
    return data
      .replace(/\u0002/g, '\u0002\u0002')
      .replace(/\u0001/g, '\u0001\u0002')
      .replace(/\u0000/g, '\u0001\u0001')
  } else {
    return data
  }
}

But it's not ideal because it would affect the performance.

PouchDB internally uses \u0000 for indexing documents with MapReduce in pouchdb-collate:



/ convert the given key to a string that would be appropriate
// for lexical sorting, e.g. within a database, where the
// sorting is the same given by the collate() function.
function toIndexableString(key) {
  var zero = '\u0000';
  key = normalizeKey(key);
  return collationIndex(key) + SEP + indexify(key) + zero;
}

I didn't see why it should be \u0000, so I've changed the zero marker to \u0003:

https://github.com/craftzdog/pouchdb-react-native/commit/228f68220fe31236f6630b71c030eef29ae6e7a8

And it turns out that it works!
Now the overhead of escaping NULL characters has been removed.

It's 2~5x faster 💨

I've tested it on my Google Pixel 5 and it turns out it's blazing fast. Here is a quick benchmark:

	sqlite-2	quick-sqlite + quick-websql
Non-cached query for 38 docs	4,510 ms	984 ms
Cached query for 38 docs	275 ms	75 ms
Cached query for 1422 docs	636 ms	206 ms

PouchDB performs MapReduce to index the documents based on design documents.
That's why the first query takes a long time.
But thanks to the small overheads, it's now about 4~5x faster.

I can't wait to release the new version of my app.

Attachments are no longer supported

In the past work, the main focus was to get PouchDB able to store attachments. But I no longer store them in PouchDB, so that requirement has been dropped.
But that allows you to simply use the official PouchDB packages except for pouchdb-collate as I mentioned above.

How to use

Install

Install dev package:



yarn add -D babel-plugin-module-resolver

Install polyfill packages:



yarn add events react-native-get-random-values react-native-quick-base64

Install pouchdb packages:



yarn add pouchdb-core pouchdb-replication pouchdb-mapreduce pouchdb-adapter-http

Install the patched package:



yarn add @craftzdog/pouchdb-collate-react-native

Install storage adapter packages:



yarn add pouchdb-adapter-react-native-sqlite react-native-quick-sqlite react-native-quick-websql

react-native-quick-sqlite - A fast bindings via JSI for SQLite
react-native-quick-websql - WebSQL wrapper for quick-sqlite
pouchdb-adapter-react-native-sqlite - PouchDB adapter for SQLite with those two modules

Install CocoaPods:



npx pod-install

Configure

Make a shim.js:



import {shim} from 'react-native-quick-base64'

shim()

// Avoid using node dependent modules
process.browser = true

then, require it at the beginning of your index.js.

Edit your babel.config.js like so:



module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        alias: {
          'pouchdb-collate': '@craftzdog/pouchdb-collate-react-native',
        },
      },
    ],
  ],
}

Initialize

Create pouchdb.ts like so:



import 'react-native-get-random-values'
import PouchDB from 'pouchdb-core'
import HttpPouch from 'pouchdb-adapter-http'
import replication from 'pouchdb-replication'
import mapreduce from 'pouchdb-mapreduce'
import SQLiteAdapterFactory from 'pouchdb-adapter-react-native-sqlite'
import WebSQLite from 'react-native-quick-websql'

const SQLiteAdapter = SQLiteAdapterFactory(WebSQLite)

export default PouchDB.plugin(HttpPouch)
  .plugin(replication)
  .plugin(mapreduce)
  .plugin(SQLiteAdapter)

Then, import and use it as usual:



import PouchDB from './pouchdb'

const db = new PouchDB('mydb.db', {
  adapter: 'react-native-sqlite'
})

That's it!

Limitations & Debugging

As the libraries use JSI for synchronous native methods access, remote debugging (e.g. with Chrome) is no longer possible.
Instead, you should use Flipper.

Hope you find it useful and helpful.

Follow me on Twitter & Instagram
Inkdrop — Markdown note-taking app

Getting side-by-side preview in a terminal app Hyper

Takuya Matsuyama — Mon, 04 Oct 2021 11:16:06 +0000

Hi, it's Takuya.
I'm publishing YouTube content, sharing my dev workflows.

Want a side-by-side preview in a terminal app

For web coding tutorials, it'd be great to show your coding and output side-by-side.
Typically, you would do that by simply arranging two windows: An editor and a browser.
But that's annoying because every time you make a tutorial, you have to align the windows side-by-side.

Hyper, a terminal app built with web standards, once had a built-in webview feature:

As you can see above, it displays a preview on the right side of the terminal window.
It looks pretty neat.
So, you can make tutorials without having a separate window for preview.

But it looks like the feature has been removed for security reasons:

built-in hyperlinks alternative not working properly · Issue #2748 · vercel/hyper

It was 3 years ago, a quite old issue.
I understand the risk of loading web pages in Electron apps.
However, webview of the recent Electron prohibits NodeJS integration by default. So, I think it's safe to embed in Hyper, especially when you understand what you do.

Hacking Hyper to get back the built-in webview feature

So, I decided to get that feature back to Hyper, and successfully did it.
Here is how it looks like:

Demo video:

// Detect dark theme var iframe = document.getElementById('tweet-1444952485177683969-303'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1444952485177683969&theme=dark" }

How to build

I've made built-in-webview branch for the hack:

https://github.com/craftzdog/hyper/tree/built-in-webview

Clone this repo and built it yourself as following.

npm i
npm run dev
# On another terminal session
npm run app

How to use

Split the window right by pressing Cmd-D.
Then, type echo <URL-to-open> and hit Return.
Click the URL in the terminal.
Then, the pane becomes a webview that loads the URL.

How I hacked Hyper

Check out the diffs

First, you have to allow webview tags in app/ui/window.ts:

   const winOpts: BrowserWindowConstructorOptions = {
     minWidth: 370,
     minHeight: 190,
     backgroundColor: toElectronBackgroundColor(cfg.backgroundColor || '#000'),
     titleBarStyle: 'hiddenInset',
     title: 'Hyper.app',
     // we want to go frameless on Windows and Linux
     frame: process.platform === 'darwin',
     transparent: process.platform === 'darwin',
     icon,
     show: Boolean(process.env.HYPER_DEBUG || process.env.HYPERTERM_DEBUG || isDev),
     acceptFirstMouse: true,
     webPreferences: {
       nodeIntegration: true,
       navigateOnDragDrop: true,
       enableRemoteModule: true,
-      contextIsolation: false
+      contextIsolation: false,
+      webviewTag: true
     },
     ...options_
   };

Hyper partially remains the old implementations. You can reuse them.
The terminal component already has url prop.
You can display webview when the component has url prop.

In lib/components/term.tsx, change the terminal component class like so:

@@ -430,18 +436,35 @@ export default class Term extends React.PureComponent<TermProps> {
         style={{padding: this.props.padding}}
         onMouseUp={this.onMouseUp}
       >
-        {this.props.customChildrenBefore}
-        <div ref={this.onTermWrapperRef} className="term_fit term_wrapper" />
-        {this.props.customChildren}
-        {this.props.search ? (
-          <SearchBox
-            search={this.search}
-            next={this.searchNext}
-            prev={this.searchPrevious}
-            close={this.closeSearchBox}
+        {this.props.url ? (
+          <webview
+            src={this.props.url}
+            style={{
+              background: '#fff',
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              display: 'inline-flex',
+              width: '100%',
+              height: '100%'
+            }}
           />
         ) : (
-          ''
+          <>
+            {this.props.customChildrenBefore}
+            <div ref={this.onTermWrapperRef} className="term_fit term_wrapper" />
+            {this.props.customChildren}
+            {this.props.search ? (
+              <SearchBox
+                search={this.search}
+                next={this.searchNext}
+                prev={this.searchPrevious}
+                close={this.closeSearchBox}
+              />
+            ) : (
+              ''
+            )}
+          </>
         )}

         <style jsx global>{`

And, change the URL click handler to dispatch an action instead of opening up the page in an external browser:

@@ -160,7 +160,13 @@ export default class Term extends React.PureComponent<TermProps> {
       this.term.loadAddon(
         new WebLinksAddon(
           (event: MouseEvent | undefined, uri: string) => {
-            if (shallActivateWebLink(event)) void shell.openExternal(uri);
+            // if (shallActivateWebLink(event)) void shell.openExternal(uri);
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+            store.dispatch({
+              type: 'SESSION_URL_SET',
+              uid: props.uid,
+              url: uri
+            });
           },
           {
             // prevent default electron link handling to allow selection, e.g. via double-click

In lib/reducers/sessions.ts, add the reducer for SESSION_URL_SET like so:

@@ -11,7 +11,8 @@ import {
   SESSION_SET_XTERM_TITLE,
   SESSION_SET_CWD,
   SESSION_SEARCH,
-  SESSION_SEARCH_CLOSE
+  SESSION_SEARCH_CLOSE,
+  SESSION_URL_SET
 } from '../constants/sessions';
 import {sessionState, session, Mutable, ISessionReducer} from '../hyper';

@@ -129,6 +130,9 @@ const reducer: ISessionReducer = (state = initialState, action) => {
       }
       return state;

+    case SESSION_URL_SET:
+      return state.setIn(['sessions', action.uid, 'url'], action.url);
+
     default:
       return state;
   }

It works like a charm!

Follow me online

Check out my app called Inkdrop - A Markdown note-taking app
Subscribe Newsletter http://eepurl.com/dNgJo6
Twitter https://twitter.com/inkdrop_app
YouTube channel https://youtube.com/c/devaslife
Blog https://blog.inkdrop.app/
Discord community https://discord.gg/QfsG5Kj
Instagram https://instagram.com/craftzdog

How to use Neovim 0.5 on iSH on iPadOS

Takuya Matsuyama — Thu, 05 Aug 2021 02:19:01 +0000

I have an iPad. I love Neovim. Can I use it on my iPad? -- Let's try it.

Use iSH as a terminal emulator

https://ish.app/

iSH is a Linux shell built for iOS & iPadOS, using usermode x86 emulation and syscall translation. It's not a SSH client. You can actually have a terminal locally on your device.
It runs Alpine Linux, so you can install packages with apk command. Pretty neat!

Couldn't build Neovim from source

Apparently, the official iSH package repository currently provides only Neovim 0.4.
Looks like you need to build the latest Neovim from its source.

https://github.com/neovim/neovim/wiki/Building-Neovim

Install prerequisites:



apk update
apk add git build-base cmake automake autoconf libtool pkgconf coreutils curl unzip gettext-tiny-dev

Clone the reopsitory:



git clone https://github.com/neovim/neovim.git
cd neovim

Build it:



make -j4 CMAKE_BUILD_TYPE=Release

But got an error:



Install the project...
-- Install configuration: "Release"
-- Installing: /root/neovim/.deps/usr/lib/libluv_a.a
-- Installing: /root/neovim/.deps/usr/include/luv/luv.h
-- Installing: /root/neovim/.deps/usr/include/luv/util.h
-- Installing: /root/neovim/.deps/usr/include/luv/lhandle.h
-- Installing: /root/neovim/.deps/usr/include/luv/lreq.h
make[4]: Leaving directory '/root/neovim/.deps/build/src/luv-static-build'
[ 94%] Completed 'luv-static'
make[3]: Leaving directory '/root/neovim/.deps'
[ 94%] Built target luv-static
make[2]: Leaving directory '/root/neovim/.deps'
make[1]: *** [Makefile:104: all] Error 2
make[1]: Leaving directory '/root/neovim/.deps'
make: *** [Makefile:105: deps] Error 2

I don't understand what's going wrong from this error log.
iSH is quite unstable on doing those things.

I decided to go another way.

Try Alpine's edge repository

The iSH's default package repository is kind of outdated.
So, I tried to use the Alpine's official edge repository.
Because neovim-0.5.0 is available there:

https://pkgs.alpinelinux.org/package/edge/community/x86/neovim



echo https://dl-cdn.alpinelinux.org/alpine/edge/main > /etc/apk/repositories
echo https://dl-cdn.alpinelinux.org/alpine/edge/community >> /etc/apk/repositories
apk update
apk upgrade
apk add neovim

Boom. It worked!

You can't use all the edge packages

I found that git or nodejs won't work if I installed it from the edge repos due to "Bad system call".
So, you basically should be on the default package repos.

I hope iSH gets more stable. Kudos to tbodt for the awesome work!

I've made a tutorial video on how to set up Neovim on macOS:

How I integrated 3D secure for recurring payments with Stripe

Takuya Matsuyama — Mon, 31 May 2021 04:00:40 +0000

Hi, it's Takuya from Japan.

I'm running a SaaS app called Inkdrop which is a subscription-based service.
I use Stripe to accept payments with credit cards around the world.
Recently, I've got an email from Stripe that users can't renew their subscriptions under RBI regulations in India if your website doesn't support 3D secure:

https://support.stripe.com/questions/important-updates-to-rbi-regulations-on-recurring-card-payments-in-india

That's going to affect my service since I have customers from India.
So, I decided to support 3D secure authentication on my website.

In terms of implementation, there are several ways to implement a card form for recurring payments.
If you are already using Stripe Checkout, it's easy. All you have to do is enable 3D Secure in your Billing settings. Then, Stripe basically does all nicely for you.
However, I was using Stripe Elements and Sources API to provide a credit card form. While it provides highly customizable form components, it requires an additional complicated implementation for 3D secure authentication. Besides, the Sources API is no longer recommended.
Looks like my code is old since I've implemented it several years ago.
I thought it's time to switch my payment logic from Stripe Elements to Stripe Checkout.

In this article, I'll share how I migrated from Stripe Elements to Stripe Checkout. It'd be also helpful for those who are planning to adopt Stripe Checkout for your website. Let's get started.

Understand a new way to set up future payments

I was so confused when reading Stripe's documentation because my knowledge was outdated.
There are several new APIs you have to understand:

I try to explain them as simple as possible:
You've been able to use card tokens retrieved via the Sources API for recurring payments.
But the Sources are now replaced with Payment methods and Setup intents.
You can think like the Sources API has been subdivided into the Payment Methods API and Setup Intents API.
Valid payment methods are attached to customers.
You can use a payment method to charge a customer for recurring payments.
The Setup Intents API allows you to set up a payment method for future payments.
Stripe Checkout creates a Checkout Session for the customer. A setup intent is issued and managed by the checkout session. It attaches a payment method to the customer once successfully finished the session.

Enable 3D Secure

As the latest Stripe API supports 3D Secure out of the box, you can enable it from Settings -> Subscriptions and emails -> Manage payments that require 3D Secure:

Then, check your Radar rules from Settings -> Radar rules:

With this configuration, 3D secure will be requested when it is required for card. I don't know which is the best practice, so I try this rule for now.

Now, you are ready to integrate it!

4 pathways users input their card information

In Stripe, each user has a Customer object, and a Subscription object is associated with each customer, which allows you to manage his/her subscription status.
Inkdrop doesn't require card information when signing up because it provides free trials. Customers have the following 3 account statuses:

trial - In free-trial
active - Has an active subscription
deactivated - The subscription has been cancelled 15 days after a payment failure

That completely depends on your business design but I guess it'd be one of the common design patterns. Note that they are my application-specific statuses stored in my server.
With those statuses, the Inkdrop users may input their card information when:

The user adds/changes/updates the card detail
The user starts paying it before the trial expires
The trial has been expired
The account has been deactivated

I'll explain how to deal with those cases with Stripe Checkout.

1. User adds/changes/updates card detail

This is the simplest case.
Users can do it anytime from the website.
Here is the billing page of Inkdrop:

You can update the billing details on this page. Nothing special.
And when a user clicked 'Change / update card' button, it shows:

In this page, the website initiates a new Checkout Session by calling stripe.checkout.sessions.create on the server-side like so:

const session = await stripe.checkout.sessions.create({
  payment_method_types: ['card'],
  mode: 'setup',
  customer: customerId,
  success_url: redirectSuccessUrl,
  cancel_url: config.app.baseUrl + cancel_url,
  billing_address_collection: needsBillingAddress ? 'required' : 'auto'
})

payment_method_types - Inkdrop only accepts credit cards, so it should be always ['card'].
mode - It specifies mode as 'setup' so that you can use the payment method for future payments.
success_url & cancel_url - You can specify redirection URLs where Stripe will navigate the user after the session.
billing_address_collection - If you need to collect the customer's billing address, you can do that on the Checkout page by specifying it as 'required'

On the website, it retrieves the Session data from the server when opened the above page. When the user pressed 'Input Card' button, it redirects to the Checkout page like so:

stripe.redirectToCheckout({ sessionId: session.id })

Then, the user should see a page something like:

Test 3D Secure

Use the test cards listed in this page to test 3D secure.
You should get a popup iframe during a Checkout session as following:

Pretty neat.

Process new payment method

After the user input the card information, the Checkout redirects to success_url. While Stripe automatically attaches the new card to the Customer object, it doesn't anything else for you.

So, on the success_url, the Inkdrop server does the following processes:

Check the card brand is supported
Use the new card as the default payment method
Retry payment if necessary

While Stripe accepts JCB cards through the Checkout but Inkdrop doesn't support them, it needs to verify the card brand manually like so:

export async function checkValidPaymentMethod(
  paymentMethod: Object
): Promise<?string> {
  const { card } = paymentMethod
  if (card && card.brand.toLowerCase() === 'jcb') {
    await stripe.paymentMethods.detach(paymentMethod.id)
    return 'jcb'
  }
  return null
}

It's necessary to set the new card as the default payment method manually on your server since Stripe only adds it to the customer:

await stripe.customers.update(paymentMethod.customer, {
  invoice_settings: {
    default_payment_method: paymentMethod.id
  }
})

It's optional if your website provides a UI to select a default card for users.

If the user has a past-due invoice, Inkdrop retries to charge it:

const customer = await stripe.customers.retrieve(customerId, {
  expand: ['subscriptions']
})
const subscription = customer.subscriptions.data[0]
if (subscription.latest_invoice) {
  const latestInvoice = await stripe.invoices.retrieve(
    subscription.latest_invoice
  )
  if (latestInvoice && latestInvoice.status === 'open') {
    await stripe.invoices.pay(latestInvoice.id)
  }
}

2. User starts paying before the trial expires

Some users may want to finish their free trials and start subscribing to Inkdrop. Users under the free trial would see this:

To provide a way to manually finish their free trials, you have to create another subscription instead of updating the existing subscription.
Actually you can do so during the redirection hook but you shouldn't because there is a UX issue where the price won't be displayed in the Checkout session if you don't specify any line_items just as you saw in pattern 1.
For example, you will see it tries to charge $0 (¥0) for the subscription when you use Apple Pay, which is kind of weird:

I hope Stripe will support updating the existing subscriptions with Checkout, but it isn't supported at the moment.
So, you have to create another subscription without a free trial and remove the old subscription to accomplish that.

In this case, create a Checkout session like so:

const session = await stripe.checkout.sessions.create({
  payment_method_types: ['card'],
  mode: 'subscription',
  customer: customerId,
  success_url: redirectSuccessUrl,
  cancel_url: config.app.baseUrl + cancel_url,
  billing_address_collection: needsBillingAddress ? 'required' : 'auto',
  line_items: [
    {
      price: plan,
      quantity: 1,
      tax_rates: [
        customer.metadata.country === 'japan' ? taxRateJpn : taxRateZero
      ]
    }
  ]
})

mode - It must be subscription
line_items - A product to newly subscribe

As Stripe doesn't support dynamic tax rates in Japan, I had to implement it myself (Please support it!). People from outside Japan are exempt from payment of a consumption tax if your business is based in Japan.

By doing so, users can see the price like this:

After a successful checkout, you can cancel the old subscription during the redirection hook:

export async function removeOldSubscriptions(
  customerId: string,
  newSubscription: string
) {
  const { data: subscriptions } = await stripe.subscriptions.list({
    customer: customerId
  })
  const activeStatus = new Set(['trialing', 'active', 'past_due'])
  for (const sub of subscriptions) {
    if (sub.id !== newSubscription) {
      await stripe.subscriptions.del(sub.id)
    }
  }
}

3. Trial has been expired

This is similar to the pattern 2. Again, Checkout doesn't allow to update the existing subscription directly, you have to re-create a subscription for better UX. For that reason, you can't charge immediately from the trial expiration date. The subscription starts just on a day when the user input the card information.

Notify users of the trial expiration with webhook

It'd be nice to kindly notify users that their trial has been expired.

Do not send payment failure notifications because they will be surprised and get angry! In the early days, I got some complaints, screaming like "It's a scam! 😡" because they haven't intended to buy or inputted card information (yet). You need to kindly notify their trial expired instead.
I couldn't find that Stripe supports it, so I implemented it myself.

To accomplish that: When the trial expired and the user hasn't inputted a card, the first payment fails and an event invoice.payment_failed fires.
You can know the event through webhook.
In your webhook, check if the user has any cards attached like so:

export async function checkCustomerHasPaymentMethod(
  customerId: string
): Promise<boolean> {
  const { data: paymentMethods } = await stripe.paymentMethods.list({
    customer: customerId,
    type: 'card'
  })
  return paymentMethods.length > 0
}

If the user doesn't have a card, then check the number of charge attempts. If it was the first attempt, lock the account like so:

const { object: invoice } = event.data // invoice.payment_failed
const customer = await stripe.customers.retrieve(invoice.customer)
// first attempt
if (invoice.attempt_count === 1) {
  // do things you need
  notifyTrialExpired(customer)
}

I also display the notification about the expiration on the website like this:

4. Account has been deactivated

A customer's subscription is canceled when all charge retries for a payment failed as I configured Stripe like this from Settings -> Subscriptions and emails -> Manage failed payments for subscriptions:

On the website, it displays the account has been deactivated:

To reactivate the account, you can simply create a new subscription via the Checkout. Then, process the account to reactivate in your server.

Changing the plan (Monthly ⇄ Yearly)

Inkdrop provides monthly and annual plans.
Users can change it anytime.
To change the existing subscription:

const { subscription, customer } = await getSubscription(userId, {
  ignoreNoSubscriptions: false
})
const item = subscription.items.data[0]
const params: Object = {
  cancel_at_period_end: false,
  // avoid double-charge
  proration_behavior: 'create_prorations',
  items: [
    {
      id: item.id, // do not forget!
      price: plan
    }
  ]
}
// If the free trial remains, specify the same `trial_end` value
if (subscription.trial_end > +new Date() / 1000) {
  params.trial_end = subscription.trial_end
}
const newSubscription = await stripe.subscriptions.update(
  subscription.id,
  params
)

When required 3D secure for renewing the subscription

Stripe supports an option "Send a Stripe-hosted link for cardholders to authenticate when required".
So, Stripe will automatically send a notification email to your users when required an additional action to complete the payment.
But, it'd be also nice to display the notification on the website like so:

You can determine if the payment needs 3D secure authentication like so:

subscription.status === 'past_due'
const { latest_invoice: latestInvoice } = subscription
const { payment_intent: paymentIntent } = latestInvoice

if (
  typeof paymentIntent === 'object' &&
  (paymentIntent.status === 'requires_source_action' ||
    paymentIntent.status === 'requires_action') &&
  paymentIntent.next_action &&
  paymentIntent.client_secret
) {
  console.log('Action required')
}

Then, proceed to 3D secure authentication by calling confirmCardPayment:

const res = await stripe.confirmCardPayment(paymentIntent.client_secret)

Upgrade the API version

When everything is ready to roll out, it's time to upgrade the API version.
If you are using the old API version, you have to upgrade it to the latest version from Developers -> API version. You should see the upgrade button if you are on the old one.
Be careful to do this because it immediately affects your production environment!

I hope Stripe will allow testing the new API before upgrading it because I had many unexpected errors when switching it, which I left a sour taste in my mouth:

It's never been such simple without Stripe

I've implemented credit card payments with PayPal in the past but it was so complicated and hard. The documentation was not clear to understand.
Stripe is so easy to integrate compared to that.
I still have some small issues as I mentioned in the article, but I'm basically happy with Stripe.
Besides, Stripe's website, dashboard, and mobile app are so beautiful and I've got a lot of inspiration from them.
You will learn their good UX practices while building your product with Stripe.

That's it! I hope it's helpful for building your SaaS business.

Follow me online

Check out my app called Inkdrop - A Markdown note-taking app
Subscribe Newsletter http://eepurl.com/dNgJo6
Twitter https://twitter.com/inkdrop_app
Blog https://blog.inkdrop.info/
Discord community https://discord.gg/QfsG5Kj
Instagram https://instagram.com/craftzdog

Running a React Native app on Android Emulator in M1 Mac

Takuya Matsuyama — Fri, 14 May 2021 09:49:02 +0000

Hi. I have an M1 MacBook Air and have been waiting for Android Studio to support M1 macs so that I can use it for developing my React Native project.
It's been about a half year since an Android Emulator developer tweeted that he managed to run it:

// Detect dark theme var iframe = document.getElementById('tweet-1332474914398322689-848'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1332474914398322689&theme=dark" }

It had a performance issue though, I heard that the recent Android Studio Preview has supported M1 chips pretty well. So I tried it.
I've got several issues to make it work, but thanks to Yacine, I managed to solve them.
I'm gonna share how to get your RN project to work on Android Emulator on your M1 mac.

Install Android Studio Preview (Canary build)

Android Emulator for M1 is not available on stable releases yet. You have to use Android Studio Preview.
I'm using Arctic Fox (2020.3.1) Canary 15.

Android Studio Preview | Android Developers

Setup M1 Android Emulator

Go to Tools → AVD Manager, then click +Create Virtual Device....
Pick a device definition you like, e.g., Pixel 5. Click Next.
Pick a system image whose ABI is arm64-v8a. If you can't find any of them, check out the 'Other Images' tab.

Download the 'S' or 'R (30)' API level.
Now you can run the Android Emulator natively. Congrats!

Build errors you may get

If you are lucky enough, your project will be built just fine without any errors. Enjoy a cup of coffee.
However, you may get some build errors like so:

The Jdk installation is invalid.
Selected Jdk location is /Applications/Android Studio Preview.app/Contents/jre/jdk/Contents/Home.

Gradle sync failed: Could not install Gradle distribution from 'https://services.gradle.org/distributions/gradle-6.0.1-all.zip'

Because Android Studio Preview is not a stable version, they can happen for unknown reasons, even if the configurations looked correct.

Clear caches

There are several ways to clear project caches.

First, try File → Invalidate Caches / Restart....

Next, remove the following file:

~/Library/Application\ Support/Google/AndroidStudioPreview2020.3/options/jdk.table.xml

Note that the path can be different based on the preview version (In this case, it's 2020.3).
Then, launch Android Studio.

Completely uninstall Android Studio Preview and try again

If you still have the compile error, try reinstalling Android Studio Preview.
First, uninstall it completely. Be careful to do them, or you may lose the important files:

rm -Rf /Applications/Android\ Studio\ Preview.app
rm ~/Library/Preferences/com.google.android.studio-EAP.plist  ~/Library/Preferences/com.google.android.studio.plist
rm /Users/nora/Library/Preferences/com.android.Emulator.plist
rm -rf '~/Library/Application Support/Google/AndroidStudioPreview2020.3'
rm -rf ~/Library/Logs/Google/AndroidStudioPreview2020.3
rm -rf .gradle

Then, install it again.
That worked for me.

Now, my RN project works smoothly on my M1 MacBook Air!
I'm pretty happy.

// Detect dark theme var iframe = document.getElementById('tweet-1393120068184121350-256'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1393120068184121350&theme=dark" }

Follow me online

Check out my app called Inkdrop - A Markdown note-taking app
Subscribe Newsletter http://eepurl.com/dNgJo6
Twitter https://twitter.com/inkdrop_app
YouTube channel https://youtube.com/c/devaslife
Blog https://blog.inkdrop.info/
Discord community https://discord.gg/QfsG5Kj
Instagram https://instagram.com/craftzdog

Fixing gradle errors of C++ JSI native modules

Takuya Matsuyama — Fri, 14 May 2021 02:53:14 +0000

I have a React Native project with some JSI native modules implemented in C++ like react-native-quick-base64.
Today I upgraded Android Studio to 4.2.1, and it failed to build my project with the following CMake error:

/Users/***/Library/Android/sdk/cmake/3.6.4111459/bin/cmake -H/Users/***/Developments/inkdrop/inkdrop-mobile/node_modules/react-native-quick-base64/android -B/Users/***/Developments/inkdrop/inkdrop-mobile/node_modules/react-native-quick-base64/android/.cxx/cmake/release/armeabi-v7a
CMake Error at .cxx/cmake/release/armeabi-v7a/CMakeFiles/3.6.0-rc2/CMakeSystem.cmake:6 (include):
  include could not find load file:

    /Users/***/Library/Android/sdk/ndk/23.0.7123448/build/cmake/android.toolchain.cmake
Call Stack (most recent call first):
  CMakeLists.txt


-- The C compiler identification is AppleClang 12.0.5.12050022
-- The CXX compiler identification is AppleClang 12.0.5.12050022
-- Check for working C compiler: /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/cc
CMake Error at /Users/***/Developments/inkdrop/inkdrop-mobile/node_modules/react-native-quick-base64/android/.cxx/cmake/release/armeabi-v7a/CMakeFiles/3.6.0-rc2/CMakeSystem.cmake:6 (include):
  include could not find load file:

    /Users/***/Library/Android/sdk/ndk/23.0.7123448/build/cmake/android.toolchain.cmake
Call Stack (most recent call first):
  /Users/***/Developments/inkdrop/inkdrop-mobile/node_modules/react-native-quick-base64/android/.cxx/cmake/release/armeabi-v7a/CMakeFiles/CMakeTmp/CMakeLists.txt:2 (project)


CMake Error: Internal CMake error, TryCompile configure of cmake failed
-- Check for working C compiler: /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/cc -- broken
CMake Error at /Users/***/Library/Android/sdk/cmake/3.6.4111459/share/cmake-3.6/Modules/CMakeTestCCompiler.cmake:61 (message):
  The C compiler
  "/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/cc"
  is not able to compile a simple test program.

  It fails with the following output:





  CMake will not be able to correctly generate this project.
Call Stack (most recent call first):
  CMakeLists.txt


-- Configuring incomplete, errors occurred!
See also "/Users/***/Developments/inkdrop/inkdrop-mobile/node_modules/react-native-quick-base64/android/.cxx/cmake/release/armeabi-v7a/CMakeFiles/CMakeOutput.log".
See also "/Users/***/Developments/inkdrop/inkdrop-mobile/node_modules/react-native-quick-base64/android/.cxx/cmake/release/armeabi-v7a/CMakeFiles/CMakeError.log".

It looks like that's because the NDK path has been changed, so /Users/***/Library/Android/sdk/ndk/23.0.7123448/build/cmake/android.toolchain.cmake does not exist anymore.

Running ./gradlew clean in android folder didn't clean them up.
So, I manually removed build/ and .cxx/ directories from the module directory:

rm -rf ./node_modules/react-native-quick-md5/android/.cxx ./node_modules/react-native-quick-base64/android/.cxx

Then, I got another error like so:

$ ./gradlew :react-native-quick-base64:externalNativeBuildRelease

> Configure project :app

The Kotlin Gradle plugin was loaded multiple times in different subprojects, which is not supported and may break the build.
This might happen in subprojects that apply the Kotlin plugins with the Gradle 'plugins { ... }' DSL if they specify explicit versions, even if the versions are equal.
Please add the Kotlin plugin to the common parent project or the root project, then remove the versions in the subprojects.
If the parent project does not need the plugin, add 'apply false' to the plugin line.
See: https://docs.gradle.org/current/userguide/plugins.html#sec:subprojects_plugins_dsl
The Kotlin plugin was loaded in the following projects: ':react-native-aes-gcm-crypto', ':react-native-webview'

> Task :react-native-quick-base64:externalNativeBuildRelease FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':react-native-quick-base64:externalNativeBuildRelease'.
> java.io.FileNotFoundException: /Users/***/Developments/inkdrop/inkdrop-mobile/node_modules/react-native-quick-base64/android/.cxx/cmake/release/armeabi-v7a/android_gradle_build.json (No such file or directory)

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/6.0.1/userguide/command_line_interface.html#sec:command_line_warnings

BUILD FAILED in 4s
2 actionable tasks: 1 executed, 1 up-to-date

Well, the following file does not exist:

/Users/***/Developments/inkdrop/inkdrop-mobile/node_modules/react-native-quick-base64/android/.cxx/cmake/release/armeabi-v7a/android_gradle_build.json

That means that gradle doesn't recompile the C++ sources.

Run gradle with `--rerun-tasks`

Just running the gradle task does not recompile the C code.
You have to add --rerun-tasks option to do that.

./gradlew :react-native-quick-base64:externalNativeBuildRelease --rerun-tasks

It solved the issue.

Follow me online

Check out my app called Inkdrop - A Markdown note-taking app
Subscribe Newsletter http://eepurl.com/dNgJo6
Twitter https://twitter.com/inkdrop_app
Blog https://blog.inkdrop.info/
Discord community https://discord.gg/QfsG5Kj
Instagram https://instagram.com/craftzdog

How to build an air quality monitor using Raspberry Pi Zero W

Takuya Matsuyama — Thu, 13 May 2021 02:32:15 +0000

Hi, it's Takuya.

Knowing the air quality is useful to keep yourself productive because the bad air quality would affect your brain performance more than you'd think.
So, I built a room air quality monitor that displays the temperature, humidity, CO2 density, and barometric pressure of my home office.
It notifies with sound when the CO2 level gets more than 1,000 ppm - So, I can know when to refresh the air.
I'm gonna show you a walkthrough of how to build it.

Let's get started.

Architecture

This is the architecture overview.
It is made with a Raspberry Pi Zero W, which runs Nginx and has an ANAVI Infrared pHAT with some sensors attached.
And you can view it from a browser on any device.

Write a Raspberry Pi OS to the SD Card

Configure your Wi-Fi network

To get your Rasberry Pi to connect your Wi-Fi network, create wpa_supplicant.conf file in the root directory of the SD card memory.

ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev
update_config=1
country=<Insert 2 letter ISO 3166-1 country code here>

network={
 ssid="<Name of your wireless LAN>"
 psk="<Password for your wireless LAN>"
}

https://www.raspberrypi.org/documentation/configuration/wireless/headless.md

Enable SSH server

You have to enable SSH server to connect through the network.
Create an empty file named "ssh" in the root directory by touch command.

Boot the Raspberry Pi

Check if connected to the Wi-Fi network

ping raspberrypi.local

Log in to the Raspberry Pi via SSH

ssh pi@raspberrypi.local

user: pi
pass: raspberry

Unbox an ANAVI Infrared pHAT

https://www.crowdsupply.com/anavi-technology/infrared-phat

ANAVI Infrared pHAT is an add-on for the Raspberry Pi family, which adds an ability to control your old consumer electronic devices like air conditioning with infrared signals.
On top of that, it supports sensor modules.
With the advanced kit, you can get these sensor modules for the air quality:

HTU21D - temperature & humidity
BMP180 - temperature & barometric
BH1750 - light

Install the ANAVI Infrared pHAT to the Raspberry Pi Zero

Connect the sensors to the I2C slots

MH-Z19 - CO2 density sensor

https://amzn.to/3uCcIbo

MH-Z19 is a low-cost CO2 density sensor.

Connect MH-Z19 to the UART slot

Check if MH-Z19 is working

Update Raspberry Pi packages

sudo apt update
sudo apt upgrade -y

Install git & build tools

sudo apt install git build-essential

Install python-smbus and i2c-tools

sudo apt install python-smbus i2c-tools

Enable I2C interface

sudo raspi-config

Choose 'Interface Options' -> 'I2C' -> 'Yes'.
Then, reboot.

Check the I2C interface working

sudo i2cdetect -y 1

Get the example code for testing the sensors

https://github.com/AnaviTechnology/anavi-examples

git clone https://github.com/AnaviTechnology/anavi-examples.git
cd anavi-examples

Install wiringpi

sudo apt install wiringpi

Build the example code

cd ./sensors/HTU21D/c
make
./HTU21D

Enable Serial interface

sudo raspi-config

Choose 'Interface Options' -> 'Serial Port' -> 'No' -> 'Yes'.

Install python-pip

sudo apt install python-pip

Install a Python module for mh-z19

sudo pip install mh-z19

Test it:

sudo python -m mh_z19
# -> {"co2": 5000}

Put MH-Z19 outside for a while for calibration

Run ZERO point calibration

While the device is put outside, run ZERO point calibration to calibrate the CO2 sensor:

sudo python -m mh_z19 --zero_point_calibration

After a while:

sudo python -m mh_z19
# -> {"co2": 400}

Install nginx web server

sudo apt install nginx

Clone a web UI

I published my web UI for displaying the sensor data on GitHub here:

https://github.com/craftzdog/anavi-phat-sensors-ui

You can reuse it by cloning the repository.

cd ~
git clone https://github.com/craftzdog/anavi-phat-sensors-ui
cd anavi-phat-sensors-ui

Build C programs for the sensors

cd sensors/BH1750
make
cd ../HTU21D
make
cd ../BMP180
make

Prepare test data

cd ~/anavi-phat-sensors-ui
mkdir data
./sensors/HTU21D/HTU21D > ./data/HTU21D.json
./sensors/BMP180/BMP180 > ./data/BMP180.json
./sensors/BH1750/BH1750 > ./data/BH1750.json
sudo python -m mh_z19 > ./data/MH_Z19.json

Configure nginx

sudo vi /etc/nginx/sites-available/default

Replace the line:

root /var/www/html;

with:

root /home/pi/anavi-phat-sensors-ui;

Then, restart nginx.

sudo /etc/init.d/nginx restart

Open the web interface from browser

Boom!

Configure root's crontab to update data every 5 minutes

sudo crontab -e

Edit it like so:

*/5 * * * * /usr/bin/python -m mh_z19                > /home/pi/anavi-phat-sensors-ui/data/MH_Z19.json
*/5 * * * * /home/pi/anavi-phat-sensors-ui/sensors/HTU21D/HTU21D > /home/pi/anavi-phat-sensors-ui/data/HTU21D.json
*/5 * * * * /home/pi/anavi-phat-sensors-ui/sensors/BMP180/BMP180 > /home/pi/anavi-phat-sensors-ui/data/BMP180.json
*/5 * * * * /home/pi/anavi-phat-sensors-ui/sensors/BH1750/BH1750 > /home/pi/anavi-phat-sensors-ui/data/BH1750.json

Put the Raspberry Pi in a cable box

That's it.
I hope you found it helpful.
Enjoy hacking.

Follow me online

Check out my app called Inkdrop - A Markdown note-taking app
Subscribe Newsletter http://eepurl.com/dNgJo6
Twitter https://twitter.com/inkdrop_app
Blog https://blog.inkdrop.info/
Discord community https://discord.gg/QfsG5Kj
Instagram https://instagram.com/craftzdog

A batch-JS for downloading invoice PDFs from Stripe

Takuya Matsuyama — Wed, 07 Apr 2021 11:33:31 +0000

I'm running a small business that uses Stripe for accepting payments from users.
While the Stripe dashboard is quite useful, it doesn't provide a quick way to download invoice PDF files for accounting purposes.
So, I wrote a batch script to do so:

import initStripe from 'stripe'
import path from 'path'
import fs from 'fs'
import { exec } from 'child_process'
import moment from 'moment'

const stripe = initStripe('sk_live_****************')

function log(...args) {
  const datetime = moment().format('YYYY-MM-DDTHH:mm:ss')
  console.log.apply(console, [datetime, ...args])
}

async function run() {
  let starting_after = undefined
  let res

  do {
    res = await stripe.invoices.list({
      created: {
        gte: new Date('2020-01-01T00:00:00'),
        lt: new Date('2020-12-31T23:59:59')
      },
      starting_after,
      limit: 10
    })
    const items = res.data
    log('got', items.length, 'items', { starting_after })
    await Promise.all(
      items.map(async (invoice) => {
        try {
          if (invoice.amount_paid <= 0) return
          if (invoice.status !== 'paid') {
            log('Invoice is not paid:', invoice.id, invoice.status)
            return
          }

          log('Processing invoice:', invoice.id)

          const paidAt = new Date(invoice.status_transitions.paid_at * 1000)
          const dest = path.resolve(
            __dirname,
            'invoices',
            '2020',
            moment(paidAt).format('YYYYMMDD-') + invoice.id + '.pdf'
          )
          if (fs.existsSync(dest)) return
          const res = await new Promise((resolve, reject) =>
            exec(
              `/usr/local/bin/wget '${invoice.invoice_pdf}' -O '${dest}'`,
              (err, stdout, _stderr) => {
                err ? reject(err) : resolve(stdout)
              }
            )
          )
          log('Downloaded:', dest, res)
        } catch (e) {
          log(e.stack)
          log('Failed to process invoice:', invoice)
          throw e
        }
      })
    )
    starting_after = items[items.length - 1].id
  } while (res.has_more)
}

run().then(
  function () {
    log('DONE')
  },
  function (err) {
    log('ERROR:', err.stack || err)
    if (err.response) {
      log(err.response)
    }
  }
)

How it works

It retrieves a list of the invoices of the given term by specifying created.gte and created.lt parameters:

    res = await stripe.invoices.list({
      created: {
        gte: new Date('2020-01-01T00:00:00'),
        lt: new Date('2020-12-31T23:59:59')
      },
      starting_after,
      limit: 10
    })

In this example, it retrieves all the invoices issued in 2020.
It only processes the invoices with paid status by checking invoice.status and invoice.amount_paid.
An invoice data has invoice_pdf field, which is a URL to the invoice PDF.
Since downloading a PDF takes time because Stripe generates it on-demand, the script processes up to 10 items at once.
Then, it downloads to ./invoices/2020/. You can change it.

Hope that helps!

How to get next.js and vercel to work on M1 mac

Takuya Matsuyama — Mon, 22 Mar 2021 02:12:32 +0000

Use `next@canary`

I'm building my blog website using next.js and vercel.
Today, I was working on an M1 MacBook Air and I got the following error when installing the dependency packages:

warning Error running install script for optional dependency: "/***/blog/node_modules/sharp: Command failed.
Exit code: 1
Command: (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)
Arguments:
Directory: /***/blog/node_modules/sharp
Output:
info sharp Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.10.0/libvips-8.10.0-darwin-arm64v8.tar.br
ERR! sharp Prebuilt libvips 8.10.0 binaries are not yet available for darwin-arm64v8
info sharp Attempting to build from source via node-gyp but this may fail due to the above error
info sharp Please see https://sharp.pixelplumbing.com/install for required dependencies
gyp info it worked if it ends with ok
gyp info using node-gyp@7.1.2
gyp info using node@15.5.0 | darwin | arm64
gyp info find Python using Python version 3.9.1 found at \"/opt/homebrew/opt/python@3.9/bin/python3.9\"
gyp info spawn /opt/homebrew/opt/python@3.9/bin/python3.9
gyp info spawn args [
gyp info spawn args   '/opt/homebrew/Cellar/node/15.5.0/libexec/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py',
gyp info spawn args   'binding.gyp',
gyp info spawn args   '-f',
gyp info spawn args   'make',
gyp info spawn args   '-I',
gyp info spawn args   '/***/blog/node_modules/sharp/build/config.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/opt/homebrew/Cellar/node/15.5.0/libexec/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/Users/***/Library/Caches/node-gyp/15.5.0/include/node/common.gypi',
gyp info spawn args   '-Dlibrary=shared_library',
gyp info spawn args   '-Dvisibility=default',
gyp info spawn args   '-Dnode_root_dir=/Users/***/Library/Caches/node-gyp/15.5.0',
gyp info spawn args   '-Dnode_gyp_dir=/opt/homebrew/Cellar/node/15.5.0/libexec/lib/node_modules/npm/node_modules/node-gyp',
gyp info spawn args   '-Dnode_lib_file=/Users/***/Library/Caches/node-gyp/15.5.0/<(target_arch)/node.lib',
gyp info spawn args   '-Dmodule_root_dir=/***/blog/node_modules/sharp',
gyp info spawn args   '-Dnode_engine=v8',
gyp info spawn args   '--depth=.',
gyp info spawn args   '--no-parallel',
gyp info spawn args   '--generator-output',
gyp info spawn args   'build',
gyp info spawn args   '-Goutput_dir=.'
gyp info spawn args ]
gyp info spawn make
gyp info spawn args [ 'BUILDTYPE=Release', '-C', 'build' ]
  CC(target) Release/obj.target/nothing/../node-addon-api/nothing.o
  LIBTOOL-STATIC Release/nothing.a
warning: /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/libtool: archive library: Release/nothing.a the table of contents is empty (no object file members in the library define global symbols)
  TOUCH Release/obj.target/libvips-cpp.stamp
  CXX(target) Release/obj.target/sharp/src/common.o
../src/common.cc:24:10: fatal error: 'vips/vips8' file not found
#include <vips/vips8>
         ^~~~~~~~~~~~
1 error generated.
make: *** [Release/obj.target/sharp/src/common.o] Error 1
gyp ERR! build error
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/opt/homebrew/Cellar/node/15.5.0/libexec/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:194:23)
gyp ERR! stack     at ChildProcess.emit (node:events:376:20)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:284:12)
gyp ERR! System Darwin 20.3.0
gyp ERR! command \"/opt/homebrew/Cellar/node/15.5.0/bin/node\" \"/opt/homebrew/Cellar/node/15.5.0/libexec/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js\" \"rebuild\"
gyp ERR! cwd /***/blog/node_modules/sharp

Well, it looks like the error came from sharp.
I found the related issue on GitHub:

Can't compile under Apple Silicon M1 arm64 · Issue #2460 · lovell/sharp

And I checked nextjs and found this commit:

feat(next/image): remove sharp for wasm variant (#22253) · vercel/next.js@99a4ea6

This pull request removes the native sharp dependency (which doesn't work on some Linux variants, nor M1 Mac) and replaces it with a wasm equivalent.

So, nextjs dropped the dependency on sharp as of v10.0.10-canary.6.
Installing next@canary solved it.

Use `node@15.8.0`

Next, I ran vercel dev and got this error:

#
# Fatal error in , line 0
# Check failed: allocator->SetPermissions(reinterpret_cast<void*>(region.begin()), region.size(), PageAllocator::kNoAccess).
#
#
#
#FailureMessage Object: 0x173e61c98
 1: 0x100eaf8a8 node::NodePlatform::GetStackTracePrinter()::$_3::__invoke() [/opt/homebrew/bin/node]
 2: 0x1018317d4 V8_Fatal(char const*, ...) [/opt/homebrew/bin/node]
 3: 0x10141c6bc v8::internal::wasm::WasmCodeAllocator::GetNumCodeSpaces() const [/opt/homebrew/bin/node]
 4: 0x10141c55c v8::internal::wasm::WasmCodeAllocator::FreeCode(v8::internal::Vector<v8::internal::wasm::WasmCode* const>) [/opt/homebrew/bin/node]
 5: 0x10141f3ac v8::internal::wasm::NativeModule::FreeCode(v8::internal::Vector<v8::internal::wasm::WasmCode* const>) [/opt/homebrew/bin/node]
 6: 0x10142cf30 v8::internal::wasm::WasmEngine::FreeDeadCodeLocked(std::__1::unordered_map<v8::internal::wasm::NativeModule*, std::__1::vector<v8::internal::wasm::WasmCode*, std::__1::allocator<v8::internal::wasm::WasmCode*> >, std::__1::hash<v8::internal::wasm::NativeModule*>, std::__1::equal_to<v8::internal::wasm::NativeModule*>, std::__1::allocator<std::__1::pair<v8::internal::wasm::NativeModule* const, std::__1::vector<v8::internal::wasm::WasmCode*, std::__1::allocator<v8::internal::wasm::WasmCode*> > > > > const&) [/opt/homebrew/bin/node]
 7: 0x10142af50 v8::internal::wasm::WasmEngine::PotentiallyFinishCurrentGC() [/opt/homebrew/bin/node]
 8: 0x10142c18c v8::internal::wasm::WasmEngine::ReportLiveCodeForGC(v8::internal::Isolate*, v8::internal::Vector<v8::internal::wasm::WasmCode*>) [/opt/homebrew/bin/node]
 9: 0x10142e8ac v8::internal::wasm::(anonymous namespace)::WasmGCForegroundTask::RunInternal() [/opt/homebrew/bin/node]
10: 0x100eae364 node::PerIsolatePlatformData::RunForegroundTask(std::__1::unique_ptr<v8::Task, std::__1::default_delete<v8::Task> >) [/opt/homebrew/bin/node]
11: 0x100ead458 node::PerIsolatePlatformData::FlushForegroundTasksInternal() [/opt/homebrew/bin/node]
12: 0x101521508 uv__async_io [/opt/homebrew/bin/node]
13: 0x10153107c uv__io_poll [/opt/homebrew/bin/node]
14: 0x101521928 uv_run [/opt/homebrew/bin/node]
15: 0x100dbea88 node::SpinEventLoop(node::Environment*) [/opt/homebrew/bin/node]
16: 0x100edafd4 node::worker::Worker::Run() [/opt/homebrew/bin/node]
17: 0x100edda18 node::worker::Worker::StartThread(v8::FunctionCallbackInfo<v8::Value> const&)::$_3::__invoke(void*) [/opt/homebrew/bin/node]
18: 0x18864606c _pthread_start [/usr/lib/system/libsystem_pthread.dylib]
19: 0x188640da0 thread_start [/usr/lib/system/libsystem_pthread.dylib]
Error! Failed to complete request to /_next/image?url=%2Fimages%2Ffootprint.png&w=48&q=75: Error: socket hang up

So, there is something wrong with v8.
Found the issue related to the error:

macOS 11.2: Fatal error Check failed: allocator->SetPermissions · Issue #37061 · nodejs/node

I was on v15.5.0 and it looks like v15.8.0 solved it.
Installing the latest nodejs solved it.

Hope that helps!

How I thrived as an introverted developer

Takuya Matsuyama — Wed, 10 Mar 2021 01:54:54 +0000

Hi, it's Takuya here.
I'm a software developer, an introvert, and happy.
You don't have to become an extrovert person in order to become a successful developer.

TL;DR

I’m fine with being introverted
Introverts’ trait is their reflecting thoughts
How I joined Yahoo! Japan — Showed what I built
Keep publishing your work to make and retain connections with people
How to work remotely with few meetings

I'm fine with being introverted

I hate telephones. I have never made a sales call to get a freelance job. I have a fragile temperament. I don't have so many friends. I can't be always friendly to everyone.
And I don't like parties.
Every time, I need to consider for more than 24 hours if I should join a party. I'm extremely nervous when I talk with unfamiliar people. I can hardly make eye contact when talking to people.

On the other hand, being extroverted looks great.
They look enjoying every day among a lot of their friends.
They can get great opportunities because they can express themselves very well.
So, you might think extroverts are always better than introverts.

But, no, that's a bad stereotype and the black and whitening of psychology.
I'm not anti-social. I love people. But I just can't behave like extroverts.
What I want to say is that you can grow in a developer career despite being introverted.
Being introverted is a trait rather than a disadvantage.
In this video, I'm gonna talk about how I thrived as an introverted developer.
It's totally fine to be an introvert if you want to become a successful developer.

In my daily life, I rarely talk with people except for my wife.
And, I am about to forget Japanese vocabularies.
But, as you can see, I'm doing good.
I'm spending a comfortable life, doing what I love, and building apps that I want to use.
In the previous video, I've shared my experience on how I earned $17,000 in a month as a freelancer.
So, it's possible.
And currently, I'm running my own software-as-a-service called Inkdrop, which is a simple Markdown note-taking app.
And it makes enough profit, so I don't need to make sales calls or send cold emails to get freelance jobs.

Introverts' trait is their reflecting thoughts

When I was young, I was so sad that I can't make "good friendships".
I tried hard to go along with people but soon I got exhausted.
My energy to hang out with friends is extremely low.
My interests usually didn't match with other people's.
I really really envied those who are active with close friends.

But I found myself happy when reading books, drawing pictures, shooting photos, playing rock music with guitar and drums, and coding software.
Creating things was so much fun for me.
I could sit at a PC for a long extended time, through the night.
My mom couldn't understand that and asked me like "Why do you need to do such a thing for a long time?"
That's just because it was fun to do.
It was fun to play music, it was fun to draw illustrations, and it was so fun to build things with programming.
I couldn't stop doing them because I didn't get exhausted unlike being with friends.
I think this is the ability of introverts that extroverts don't have.

Extroverts often find joy in socializing and interacting with the outside world.
They can thrive best when there are action and movement.
But they don't like sitting at a PC for a long time or focusing on a lot of tasks alone.

Introvert dominant people thrive in spaces where they can reflect, act and then reflect again.
Something like, how do I feel, what is this feeling, what did happen exactly, why doesn't it work, why is it so beautiful, how to improve this, how can I express this idea....
They do those reflectings even while being with their friends.
So, that's why they tend to be soon exhausted.
They need the mental space in order to pause and re-energize themselves.
But people usually don't care that or wait for you.

But this habit gives you great creativity later, even if it's currently painful for you.
Trust me, you are ok.

Olympic gold medalist David Hemery reports that almost nine out of ten top athletes identify as introverts:

A remarkably distinguishing feature is that a large proportion, 89 percent of these sports achievers, classed themselves as introverts - David Hemery

And author Eric Barker says:

The superpower of introverts is that they are far more likely to become experts in their field.

-- Barking Up the Wrong Tree: The Surprising Science Behind Why Everything You Know About Success Is (Mostly) Wrong - Eric Barker

And Paul Graham says:

The most important thing is to be able to think what you want, not to say what you want.

-- Hackers & Painters

So, you don't have to be fluent to express yourself.
To become a great hacker, just think and build what you want.
Inside your head, anything is allowed.

Tips to thrive

Well, let's talk about the strategy to thrive as an introverted developer.
The key is just to keep building things and publishing them.
You don't need to make a ground-shaking thing from the beginning.
You can start out by making something tiny and simple.

How I joined Yahoo! Japan

I joined Yahoo! Japan about 10 years ago as a new college graduate.
Companies want to know you are competent to solve real-world problems by coding.
And showing what you built is the best way to prove that through a job interview.
Because many people don't have such the public works and they just tell what they learned in the college instead of what they built.
So, showing your works would be impressive for the interviewers.

I explained what I built during the interview. I talked about:

What problem I solved
What was the challenge
How I tackled it
What I learned

from my projects.
For example, I made a Twitter client for iPhone Safari in 2010.
I made it because there wasn't a solid browser client for Twitter yet on the internet.
It was challenging for me to build an AJAX-based web app.
Since HTML5 APIs or ReactJS isn't available yet at that time, manipulating DOMs based on the server response with jQuery was a cool way to build a product.
I used LAMP stack, which is a server-side stack with Linux, Apache, MySQL, and PHP.
And it successfully got traction and attracted 1,000 people in Japan.
I've learned how to build a web app for small touch screens.
With this work, I proved my competence to build an attractive web app from scratch.

So, just following some tutorials is not enough.
You should build your own things yourself.

Keep publishing your work

When I'm freelancing, I kept publishing my personal works on the internet.
It's important to appeal to people that you make interesting things.
Because your friends are actually checking them.

I've got all the past freelance jobs through referrals via my friends.
I said my friends, but they are not my close friends.
Actually, I rarely contacted them, but we were aware of each other indirectly on social media.
Then, they remember you, and once they've got a job to ask you, they will send a message to you. Or, they will introduce another person who is interested in working with you.

So, no matter how small your achievement is, publish it!

You don't have to make a lot of connections like thousands.
I have only 300 friends on facebook.
You should connect with people who tell you they love your works.
I very occasionally join a meetup and make some friends.
Joining a hackathon would be a great way to make friends as well.
And also, giving a talk at a conference attracts some people.

Then, your friend will introduce someone who is looking for a software developer.

Jow to work remotely with few meetings

As you may know, remote work is a great work-style for introverts.
You don't have to meet people every day, which is great.
I have some tips for doing remote work.

Most of my clients were startups.
So, my job was basically to build a service from scratch.
For example, building a new mobile app, including UI design and server-side program.
Or, building a web service using Ruby on Rails with Slim and AngularJS.

As I talked in the previous video, I only had contract jobs with project-based fees instead of hourly fees.
First, I hold a meeting and hear what the client wants to make.
After that, I have meetings with the client only once or twice a month.
I use a voice chat or a video chat if I thought it doesn't need to talk face-to-face with them.

The point is that I frequently reported my work progress in order not to let the client be worried about me abandoning the work.
When I'm making a prototype, I often send the screenshots via Slack or Email.
Then, I deploy it somewhere so that the client can try it anytime.
If it were a mobile app, I use TestFlight to show the progress.
Once they trusted me, those frequent reports are no longer necessary.

Writing documentation significantly helps you reduce the communication cost because it answers questions on your behalf.
So, I write documentation in as much detail as possible so it'll be still ok even if I quit the project.
The amount of the documentation would be like 20~30 pages of Keynote.
And I send it to the client a week before the meeting and let them read it.
So, I only need to clarify some points in the meeting and I can avoid explain them over and over again.

So, that's how I thrived as an introverted developer.
Hope that's helpful!

Follow me on Twitter & Instagram
Solo developer's Discord community

Forem: Takuya Matsuyama

How to specify pre-processor flags to the JSI-based React Native libraries

ospfranco / react-native-quick-sqlite

Fast SQLite for react-native.

iOS

Android

feat(ios&android): Support specifying pre-processor flags to sqlite #86

Follow me online

My Neovim setup for React, TypeScript, Tailwind CSS, etc

Ingredients

craftzdog / dotfiles-public

My personal dotfiles

Takuya's dotfiles

Looking for a Markdown note-taking app?

Contents

Neovim setup

Requirements

Shell setup (macOS & Linux)

Prerequisites — iTerm2 and Patched Nerd Font

Install Neovim via Homebrew

Directory structure

Install plugin manager: Packer

Color scheme: Neosolarized

Status line: Lualine

Lspconfig

Auto-completion: Lspkind and cmp

Syntax highlightings: Treesitter

Autotag and Autopair

Fuzz finder: Telescope

Tabs: Bufferline

LSP Uls: Lspsaga

Code formatter: Prettier and null-ls

Git markers: gitsigns

git

LSP tool: mason

Follow me online

A performant way to use PouchDB@7 on React Native in 2022

TL;DR

Use a JSI-based SQLite driver

Tackling the NULL character issue (again)

It's 2~5x faster 💨

Attachments are no longer supported

How to use

Install

Configure

Initialize

Limitations & Debugging

Getting side-by-side preview in a terminal app Hyper

Want a side-by-side preview in a terminal app

Hacking Hyper to get back the built-in webview feature

How to build

How to use

How I hacked Hyper

Follow me online

How to use Neovim 0.5 on iSH on iPadOS

Use iSH as a terminal emulator

Couldn't build Neovim from source

Try Alpine's edge repository

You can't use all the edge packages

Related

How I integrated 3D secure for recurring payments with Stripe

Understand a new way to set up future payments

Enable 3D Secure

4 pathways users input their card information

1. User adds/changes/updates card detail

Test 3D Secure

Process new payment method

2. User starts paying before the trial expires

3. Trial has been expired

Notify users of the trial expiration with webhook

4. Account has been deactivated

Changing the plan (Monthly ⇄ Yearly)

When required 3D secure for renewing the subscription

Upgrade the API version

It's never been such simple without Stripe

Follow me online

Running a React Native app on Android Emulator in M1 Mac

Install Android Studio Preview (Canary build)

Setup M1 Android Emulator

Build errors you may get

Run gradle with `--rerun-tasks`

Use `next@canary`

Use `node@15.8.0`