Forem: Risa

4 Design Challenges as an Indie App Developer and Helpful Tools: Color Schemes, App Screenshots, etc.

Risa — Sun, 22 Aug 2021 08:57:12 +0000

I recently released an iOS/Android app called Warikani. It's an intuitive, simple-to-use expense tracker for couples, built on React Native. Creating the app involved a lot of non-programming tasks, from designing the UI to writing the app store descriptions.

In this post, I will talk about 4 challenges related to design that I faced along the way, and tools that I found essential in solving them.

Disclaimer: I am not discounting the work of designers. If you are a professional designer, or you can ask one to design your app, that is undoubtedly better. This is an article for developers who want to/have to design everything themselves.

1. How should I decide the color scheme for my app?
2. How do I design the app UI?
3. How do I make app icons for each size?
4. How do I create tasteful App Store screenshots?

1. How should I decide the color scheme for my app?

Solution: Use Eva Design System's deep learning color generator

I had a primary theme color that I wanted to use, but I didn't know what colors would go well with it. Eva Design System's color generator is great because it recommends colors for each situation (like success or error) that would go well with your main color. If you don't like their suggestions, you can also hit regenerate until you see a color scheme that you like.

Another perk is that it supports multiple export methods, including JPEG and JSON.

Try it here: https://colors.eva.design

2. How do I design the app UI?

Solution: Learn the fundamentals of UI design from YouTube. Also, consider using a component library.

If you're an engineer with no professional design experience (like me), you would probably benefit from learning the fundamentals of UI design. I recommend these videos by the Youtube channel DesignCourse:

Some of the topics covered in these videos may seem obvious (e.g. use enough color contrast, provide adequate whitespace). But it was useful to understand why you should or shouldn't do something.

Another piece of advice is to consider using a UI component library. Initially, I was creating most of my components like buttons and text inputs by styling the base React Native components. I didn't want to use a component library, because:

It's one more dependency that you have to manage
It adds a layer of complexity and makes it harder to fine-tune your components
What if the library stops being maintained?

I was also concerned that using a library would make my app look "generic", for lack of a better term. But after a while, I changed my mind. I wanted to incorporate the look of Material Design text inputs in my app - specifically, how they change color and display a label when focused.

So I installed react-native-paper, which is a Material Design component library, and replaced some of my components. It's a subtle change, but the screen feels more polished overall.

Before	After

As for the concern that the app could look more generic somehow, I don't think it's worth worrying about most of the time. After all, users prefer UI that looks familiar (Jakob's Law).

3. How do I make app icons for each size?

Solution: Use an online app icon generator

I didn't know this until I became an app developer, but you have to provide your app icon in 10+ different sizes. This would be extremely tedious to do by hand, but thankfully, there are online app icon generators where you can drop an image and they will resize it for you. I can't remember the exact service I used, but just google "online app icon generator".

4. How do I create tasteful App Store screenshots?

Solution: Bite the bullet, learn a bit of Figma. There are some helpful templates out there.

(Okay, I won't pretend like my screenshots are perfect - there's still room for improvement. Advice from designers is welcome.)

When you submit your app on the App Store or Google Play Store, you're required to upload screenshots in specific sizes. The easiest solution is to take screenshots on your device emulator, and upload them as-is... but that's not exactly eye-catching. You'll notice that the screenshots for well-known apps aren't plain screenshots taken from the emulator (examples).

I initially tried to improve my screenshots by using a tool like this one. It's straightforward - drop in an image, select a background color, and write some text. But I couldn't find a template that allowed for enough customization and provided all the dimensions I needed. I eventually ended up creating the files on Figma.

While doing so, I found these drag-and-drop tools that let you wrap the device screenshots in device frames to be useful:

For Android screenshots, use the official device art generator: https://developer.android.com/distribute/marketing-tools/device-art-generator
For iOS screenshots, use community-provided Figma templates like this one: https://www.figma.com/community/file/882254519102673494

Good luck to the indie app developers out there, and let me know about any helpful tools that you found. Thanks for reading!

P.S. Have a partner? Use Warikani!

How to set up ESLint with StandardJS for a new React Native/TypeScript project

Risa — Sun, 31 Jan 2021 12:36:53 +0000

If you have a situation like below, this walkthrough is for you!

✔ You have a React Native project
✔ It uses TypeScript
✔ You want to set up ESLint
✔ You want to use Standard JS

NOTE: If you don't know about Standard JS, check out their rules here. Notable rules include using two spaces for indentation and not using semicolons at the end of lines.

This tutorial walks you through installing and configuring ESLint, and setting up Github Actions so ESLint runs every time you push your code.

Step-by-step commit list:

Add ESLint #1

risafj posted on Jan 06, 2021

StandardJS
Remove prettier (not compatible)
Modify tsconfig
Github actions to run ESLint and TypeScript checks

View on GitHub

Steps

1. Install ESLint, and its plugins for React and React Native

Simply run below!

yarn add -D eslint eslint-plugin-react eslint-plugin-react

Docs: https://github.com/intellicode/eslint-plugin-react-native#installation

2. Install ESLint plugins for Standard and TypeScript

Now run this:

yarn add -D eslint@7 eslint-plugin-promise@4 eslint-plugin-import@2 eslint-plugin-node@11 @typescript-eslint/eslint-plugin@4 eslint-config-standard-with-typescript

Why do we need so many dependencies? Good question, the docs mention why.

Docs: https://github.com/standard/eslint-config-standard-with-typescript#usage

This long list of dependencies includes:

ESLint

Peer dependencies of eslint-config-standard

@typescript-eslint/eslint-plugin; ESLint rules for TypeScript.

3. Disable Prettier's rules that conflict with ESLint

If you tried configuring and running ESLint at this point, you will probably find that some of its rules conflict with Prettier (which comes pre-installed in React Native projects). We can use a package called eslint-config-prettier to turn off conflicting Prettier rules (I found this solution in this helpful Github comment).

Install as below:

yarn add -D eslint-config-prettier

We will configure ESLint to use this package in step 5. Ok, we're finally done installing the necessary packages!

4. Configure .eslintignore

Create a file called .eslintignore in your project root. This file is like .gitignore for ESLint - you should list anything that you don't want checked by ESLint. As an example, here is my .eslintignore:

node_modules/
babel.config.js
metro.config.js

5. Configure .eslintrc.js

There are a few file extensions that you can use for ESLint config, like .js and .json. We will go with .js here.
Find or create a file called .eslintrc.js in your project root. Then, configure as below (minus the comments):

module.exports = {
  root: true,
  extends: [
    '@react-native-community/eslint-config', // Default RN config
    'standard-with-typescript', // Installed in step 2
    'eslint-config-prettier' // Installed in step 3
  ],
  parser: '@typescript-eslint/parser', // Installed in step 2
  plugins: [
    '@typescript-eslint', // Installed in step 2
    'react', // Installed in step 1
    'react-native' // Installed in step 1
  ],
  'parserOptions': {
    'ecmaFeatures': {
      'jsx': true
    },
    'project': './tsconfig.json' // Required for Standard plugin
  },
  'env': {
    'react-native/react-native': true
  },
  'rules': {
    'prettier/prettier': 'off', // Turn off prettier
    // These are the rules that I use
    'react-native/no-unused-styles': 'warn',
    'react-native/no-inline-styles': 'error',
    'react-native/no-raw-text': ['warn', {
      skip: ['CustomText']
    }],
    'react-native/no-single-element-style-arrays': 'warn',
    'object-curly-spacing': 'error',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/strict-boolean-expressions': 'off',
    '@typescript-eslint/no-floating-promises': 'off',
    '@typescript-eslint/no-unused-vars': 'off',
    '@typescript-eslint/require-array-sort-compare': ['error', {
      ignoreStringArrays: true
    }],
    'react/jsx-curly-spacing': ['error', {
      when: 'always',
      allowMultiline: true,
      children: true
    }],
    'eol-last': ['error', 'always'],
    'no-multiple-empty-lines': 'error',
    semi: ['error', 'never'],
    // Indent with 2 spaces
    indent: ['error', 2],
    // Indent JSX with 2 spaces
    'react/jsx-indent': ['error', 2],
    // Indent props with 2 spaces
    'react/jsx-indent-props': ['error', 2]
  }
  }
}

As for specific ESLint rules, it depends on personal preference so I'll leave it up to you. If you want to see my config as a reference, you can find it here:
https://github.com/risafj/StorybookExampleReactNativeTS/blob/main/.eslintrc.js

6. Edit tsconfig.json

If you tried running ESLint at this point, you will probably get an error like this:

/Users/risa/projects/project-name/.eslintrc.js
  0:0  error  Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
The file does not match your project config: .eslintrc.js.
The file must be included in at least one of the projects provided

You can find a discussion about this error in this Github issue. Basically, you have to include the files you want to lint in tsconfig.json. Create a file like this if it doesn't exist yet, or add the lines below if it does.

// tsconfig.json

{
  "compilerOptions": {
    // Various options...
  },
  // Add the "include" array below
  // Inside the array, specify files you want ESLint to check
  "include": [
    "./**/*",
    "./*",
    ".eslintrc.js"
  ]
}

7. Add npm scripts

At this point, you're ready to run ESLint! But before that, let's add some npm scripts to your package.json to save you a few keystrokes.

// package.json

{
  "scripts": {
    // Add the two scripts below
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "lint:fix": "eslint . --fix --ext .js,.jsx,.ts,.tsx",
  }
}

Now, you can run ESLint with yarn lint or yarn lint:fix (for auto-correcting errors).

8. [Optional] Run ESLint in Github Actions

You can configure Github Actions to run ESLint every time you push your code. This is convenient because it's easy to forget to run lint locally. Setup is simple - just copy the configuration below.

# .github/workflows/lint.yml

name: Lint
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Install modules
        run: yarn
      - name: Run ESLint
        run: yarn lint

That's all! Thanks for reading, and I'd like to hear if it worked :)

Setting up Storybook for React Native/TypeScript (server, loader, iOS, Android)

Risa — Sun, 10 Jan 2021 12:59:34 +0000

I recently set up Storybook for a React Native/TypeScript project. It wasn't so different from using Storybook for web dev, but there were a few catches. I found their official tutorial to be outdated sometimes, and their Github README was up-to-date but didn't have all the information I wanted.

This is a step-by-step walkthrough of how to set up Storybook for React Native, complete with the the web UI (@storybook/react-native-server), dynamic story loading (react-native-storybook-loader), and TypeScript.

Finished repo:

risafj / StorybookExampleReactNativeTS

Example repo for setting up Storybook for a React Native/TypeScript project.

Storybook Example React Native TypeScript

This repo showcases some components that I made for a personal React Native project (contained in a separate private repo).

I wrote a blog post about the Storybook setup process here:

https://dev.to/risafj/setting-up-storybook-for-react-native-typescript-server-loader-ios-android-3b0i

Technical stack

React Native
TypeScript
Storybook
- @storybook/react-native-server for using the web interface
- react-native-storybook-loader for dynamic story loading
Lint: ESLint (Standard JS format)
CI: Github Actions

How to use

Clone this repo
yarn install
If you're using an iOS emulator, npx pod-install
Create an .env file
Copy the contents of .env.sample
yarn storybook to start the Storybook Server (localhost:7007)
yarn ios or yarn android to start Storybook in the emulator

NOTE: In order to boot up Storybook, it's necessary to set the environment variable LOAD_STORYBOOK to true (steps 4 and 5 above). Otherwise, it will boot up the default app created by React Native CLI.

View on GitHub

Prerequisites

Since you're reading this post, I'm going to assume you already have a project set up using the React Native CLI.

NOTE: I can't guarantee that the same steps will work for Expo projects.

Step 1: Install Storybook

Run the command below from your project root. This will install the necessary packages and add boilerplate code for you.

npx -p @storybook/cli sb init --type react_native

When it prompts you whether to install @storybook/react-native-server, hit yes.
Basically, the Storybook Server package lets you use the web interface for switching between components and manipulating knobs, instead of having to do everything from your emulator (it's the same UI as Storybook for other frameworks).

This is what it will look like with the web interface:

If you're developing for iOS, you should also run a pod install from the ios/ directory.

Step 2: Conditionally render Storybook

Now, let's add the enviroment variable LOAD_STORYBOOK, and use this flag to determine whether we should load your actual app or Storybook.

NOTE: This is one of the ways recommended in Storybook's README.

Add `LOAD_STORYBOOK` flag

There are a few ways to use environment variables in React Native, but I used react-native-config.
Setup is very simple:

yarn add react-native-config, then pod install
If you're developing for Android, add an import line as described here
In your project root, create an .env file
Any environment variables you add to .env can be accessed as Config.YOUR_ENVIRONMENT_VARIABLE

Now, add the environment variable LOAD_STORYBOOK=true to .env.

Render Storybook if `LOAD_STORYBOOK=true`

In App.tsx, change your code like below so that Storybook is rendered conditionally.

import StorybookUI from './storybook'
import Config from 'react-native-config'

const App = () => {
  return (
    // Your actual app
  )
}

export default Config.LOAD_STORYBOOK === 'true' ? StorybookUI : App

Step 3: Boot Storybook

There are a some other things to configure, but at this point, you should be able to boot Storybook and make sure it works.

First, boot Storybook Server (the web interface) with this command:

yarn storybook

When it's done booting, a browser window should open that looks like this (if not, you can just access localhost:7007):

At this point, the sidebar menu should show a loading animation.

Next, run yarn ios or yarn android. Since we set LOAD_STORYBOOK=true, this runs Storybook instead of your actual app.

Once it boots, the Storybook Server's sidebar should be populated with the stories you have, allowing you to navigate via the web UI (like the GIF from step 1).

Steps to take if Storybook Server doesn't work with the Android emulator

For Android, you may find that the sidebar doesn't get populated even when Storybook has booted in your emulator. There were some Github issues (like this one) discussing this phenomenon. The advice I found online was to run adb reverse tcp:7007 tcp:7007, but ultimately, what solved it for me was to specify the host parameter to be the Android localhost.

// storybook/index.js

const StorybookUIRoot = getStorybookUI({
  // Add the line below
  host: Platform.OS === 'android' ? '10.0.2.2' : '0.0.0.0'
});

Step 4: Take care of asyncStorage warning

You'll probably see a warning in the metro server logs that looks like this:

WARN Starting Storybook v5.3.0, we require to manually pass an asyncStorage prop. Pass null to disable or use one from @react-native-community or react-native itself.

According to the docs:

The benefit of using Async Storage is so that when users refresh the app, Storybook can open their last visited story.

Configuring this is simple; just pass it in as below.

NOTE: If you don't have the @react-native-community/async-storage package, you'll have to install it first.

// storybook/index.js

const StorybookUIRoot = getStorybookUI({
  host: Platform.OS === 'android' ? '10.0.2.2' : '0.0.0.0',
  // Add the line below
  asyncStorage: require('@react-native-community/async-storage').default
});

Step 5: Add Storybook Loader

React Native Storybook Loader is technically not necessary for using Storybook, but it's a convenient package that frees you from the task of having to write an import statement for every story file. Storybook Loader executes a script when you boot up Storybook, which auto-generates a file with the necessary import statemnents.

Their official README's quick start section covers everything you need, so I will link it here: https://github.com/elderfo/react-native-storybook-loader#quick-start

Step 6: Write your own stories (in TypeScript!)

Now, all that's left is to add your own stories (and remove unnecessary boilerplate code). You don't have to add any packages or configuration for writing your stories in TypeScript; just use the .stories.tsx extension.
Here is an example:

// src/components/atoms/CustomButton.stories.tsx

import { storiesOf } from '@storybook/react-native'
import { CenterView } from '../../../storybook/stories/CenterView'
import React from 'react'
import { CustomButton } from './CustomButton'

storiesOf('Atoms/CustomButton', module)
  .addDecorator((getStory) => <CenterView>{ getStory() }</CenterView>)
  .add('confirm', () => (
    <CustomButton text="Confirm" colorModifier="confirm" />
  ))

Caveat

If you plan to reuse CenterView, the boilerplate component that places your story code at the center of the emulator screen, you need to rewrite it in TypeScript or you will encounter some type errors. This is fairly straightforward - just rewrite it like so (the exact changes can be seen in this commit):

// storybook/stories/CenterView/index.tsx

import React from 'react'
import { StyleSheet, View } from 'react-native'

interface Props {
  children: any
}

export const CenterView = (props: Props) => {
  return (
    <View style={ styles.main }>
      { props.children }
    </View>
  )
}

const styles = StyleSheet.create({
  main: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
})

Thank you for reading!

Credits:
Many thanks to @rob117, who helped with the solution to the compatibility issue between the Storybook Server and Android emulator.

The Basics of Rails I18n - Translate errors, models, and attributes

Risa — Tue, 05 Jan 2021 06:02:57 +0000

Header photo by @joaosilas

This post has also been translated into Spanish by Ibidem Group. Traducción a Español aquí: https://www.ibidemgroup.com/edu/traducir-rails-i18n/

The i18n (internationalization) API is the standard way to support localization in Rails. The official guide has all the information you need, but it's also very long. This post is based on the notes I took when I was first learning how to set up i18n, and my goal here is to provide a more approachable walkthrough. This post covers the YAML file setup for error messages and model names/attribute names, and lookup using the I18n.t method.

Why I wrote this post

My first exposure to i18n was the rails-i18n gem, which provides default translations for commonly used error messages, days of the week, etc. While you can install this gem and call it a day, knowing how to set up i18n yourself is necessary if:

you want to use translations that are different from those provided by rails-i18n
you want to include languages not covered by rails-i18n
you only need translations for a few languages, and don't want to install the whole gem including dozens of languages

In my case, it was the third reason - I only needed translations for Japanese.

0. Setting your default locale
1. Translating model and attribute names
- 1.1 Defining your translations
- 1.2 Accessing model and attribute translations
2. Translating ActiveRecord errors
- 2.1 Error message breakdown
- 2.2 Defining your translations

0. Setting your default locale

I set mine to Japanese.

# config/application.rb
config.i18n.default_locale = :ja

1. Translating model and attribute names

Docs: https://guides.rubyonrails.org/i18n.html#translations-for-active-record-models

1.1 Defining your translations

First, define translations for your model names and attributes in a YAML file like below. This example is for a User model with two attributes.

# config/locales/ja.yml
ja:
  activerecord:
    models:
      user: 'ユーザ' # <locale>.activerecord.models.<model name>
    attributes:
      user:
        name: '名前' # <locale>.activerecord.attributes.<model name>.<attribute name>
        password: 'パスワード'

1.2 Accessing model and attribute translations

# How to look up translations for model names
User.model_name.human
=> "ユーザ"

# How to look up translations for attributes (you can use symbols or strings)
User.human_attribute_name('name')
=> "名前"

User.human_attribute_name(:name)
=> "名前"

2. Translating ActiveRecord errors

Docs: https://guides.rubyonrails.org/i18n.html#error-message-scopes

2.1 Error message breakdown

Translating error messages is a bit more complicated than models. Let's talk about the error message structure first. ActiveRecord has some built-in validation errors that are raised if your record is invalid. Consider this example:

class User < ApplicationRecord
  validates :name, presence: true
end

If your locale is :en, this error message is returned when you try to create an invalid record.

User.create!(name: '')
=> ActiveRecord::RecordInvalid: Validation failed: Name can't be blank

This message actually consists of a few parts.

1. `ActiveRecord::RecordInvalid:`

The error type, which is the same regardless of your locale. No translation is required.

2. `Validation failed:`

The description for this RecordInvalid error in English, defined in the Rails gem's en.yml (source code). Translation is required for your locale(s).

3. `Name can't be blank`

This is the error message for records that violate presence: true. It consists of two parts - the attribute Name and message can't be blank (source code). It turns out, the default error message format is an interpolation of two elements: "%{attribute} %{message}" (source code). Translation is required for your locale(s).

Note: The translation for attribute will be taken from the model attribute translations defined in Section 1. If there's no translation, Rails will print the attribute name in English.

What happens if you change the locale from :en to :ja without defining the corresponding translations? The error message is returned as translation missing.

User.create!(name: '')
# => ActiveRecord::RecordInvalid: translation missing: ja.activerecord.errors.messages.record_invalid

So let's look at how to provide translations next.

2.2 Defining your translations

According to the official guide, there are a few places that Rails will look in order to find a translation for your error, in this order.

activerecord.errors.models.[model_name].attributes.[attribute_name]

activerecord.errors.models.[model_name]

activerecord.errors.messages

errors.attributes.[attribute_name]

errors.messages

This means that if you want to set model-specific or attribute-specific error messages, you can do so too. But in this case, let's say we want the record_invalid and blank to be translated the same way regardless of the model. Here is a sample configuration:

# config/locales/ja.yml

ja:
  activerecord:
    errors:
      messages:
        record_invalid: 'バリデーションに失敗しました: %{errors}'
  errors:
    format: '%{attribute}%{message}'
    messages:
      # You should also include translations for other ActiveRecord errors such as "empty", "taken", etc.
      blank: 'を入力してください'

About the `rails-i18n` gem

The configuration above is taken from the ja.yml file in the rails-i18n gem which I mentioned in the intro. Installing this gem is a quick way to set up default translations. It does not come pre-installed in your Rails project, so check the documentation for more details on installation and usage.

2.3 Accessing your translations with `I18n.t`

Now that you've provided translations for error messages, Rails will actually print the error messages instead of translation missing.

The next question is, how can you look up the translations you defined? For example, what if you want to assert that some message is being raised in a test?

test 'user is invalid if name is blank' do
  invalid_user = User.new(name: '')
  assert invalid_user.errors.messages[:name].include?(<cannot be blank message>)
end

This is where the very convenient I18n.t method comes in. The t stands for "translate", and it allows you to access any translation defined in your YAML files. For this example, we want to access the errors.messages.blank message (refer to 2.2 for the YAML file). There are two ways to do this.

I18n.t('errors.messages.blank')
# => "を入力してください"

I18n.t('blank', scope: ['errors', 'messages'])
# => "を入力してください"

Just like that, you can look up any translation you've defined!

Note: You can look up model names and attribute names without using the human method too, like I18n.t('activerecord.models.user').

test 'user is invalid if name is blank' do
  invalid_user = User.create(name: '')
  expected_error = I18n.t('errors.messages.blank')
  assert invalid_user.errors.messages[:name].include?(expected_error)
end

2.4 Looking up errors with string interpolation

https://guides.rubyonrails.org/i18n.html#error-message-interpolation

If you take a look at any of the YAML files in the rails-i18n gem, you may notice that some messages use string interpolation. For example, if your validation error message is for greater_than, you would want to say must be greater than %{count}, and fill in the number for count. Rails will fill it in for you when the actual error is raised, but how can we fill in the count when you look up the error message using I18n.t?

I18n.t('errors.messages.greater_than')
# => "は%{count}より大きい値にしてください"

You can just pass it in as an argument:

I18n.t('errors.messages.greater_than', count: 5)
# => "は5より大きい値にしてください"

I know this doesn't come close to covering everything you can do with i18n in Rails, but I hope it provides a useful introduction. Thanks for reading!

Running RuboCop only on modified files, in a project with no RuboCop

Risa — Thu, 22 Oct 2020 09:39:30 +0000

I like using RuboCop. I think using a linter is a good idea, especially for team projects.

However, I ran into a situation where the people I was working with had opinions against installing RuboCop in the Rails project, and asked me to use it locally for my own code if I wanted.

I couldn't run RuboCop on the entire project, because it would try to fix a mountain of errors for existing unlinted code. So I ended up installing the relevant gems into my system, and running a command that only checks modified files. Here are the steps involved.

1. Install gems with `gem install`

Since we can't add the gems to the Gemfile, install the necessary gems into your system with gem install instead.

gem install rubocop rubocop-performance rubocop-rails

2. Create `.rubocop.yml` in the home directory

Usually, the config file is placed in the project root folder to be shared by everyone in the dev team. In our case, we can create one in the home directory instead: ~/.rubocop.yml.

Docs: https://docs.rubocop.org/rubocop/configuration.html

The behavior of RuboCop can be controlled via the .rubocop.yml configuration file. It makes it possible to enable/disable certain cops (checks) and to alter their behavior if they accept any parameters. The file can be placed in your home directory, XDG config directory, or in some project directory.

Go ahead and configure the YML file as you normally would. Configuration instructions can be found in the docs linked above.

3. Run RuboCop on modified files

We can run the following command to run RuboCop on unstaged changes.

git add -N .; git diff --name-only | xargs rubocop

git add -N . is necessary for including new files that are not tracked by git
git diff --name-only gives you a list of files with changes
xargs rubocop runs RuboCop on those files

[Optional]
Since the line above is a lot to type, I added it to my git aliases. Now, I can just run cop in my command line.

# ~/.gitconfig
alias cop="git add -N .; git diff --name-only | xargs rubocop"

Thank you for reading!

Why I recommend Harvard's CS50x online course to every self-taught developer

Risa — Mon, 04 May 2020 06:32:54 +0000

CS50's Introduction to Computer Science is a free online course based on one of the most popular on-campus courses at Harvard University. In this course, you can learn about core computer science concepts, such as:

Algorithms - binary search, bubble sort, merge sort etc.
Data structures - linked lists, hash tables, etc.
Memory - stack and heap

The languages used are C, Python, SQL, plus some others based on what you choose for the final track (UPDATE: It seems like they got rid of tracks for the 2021 version). There are a myriad of free CS courses available online, but this is the most enjoyable and engaging one I've found so far.

I wrote "self-taught developer" in the title because I figured that those with no formal CS education are less likely to have had a chance to be exposed to these topics in depth. But of course, I would recommend it to anyone who's interested in these topics.

Here are three points that I love about this course, and two potential cons.

Pros

Their philosophy
The lectures are a joy to watch
The assignments are creative

(Potential) Cons

May not be useful for your day-to-day work
You don't get to see staff-implemented solutions to assignments

Pros

1. Their philosophy

This course is geared towards people of all programming levels. They tell you in the first week:

what ultimately matters in this course is not so much where you end up relative to your classmates but where you end up relative to yourself when you began.

Just for reference, I have 1 year of professional experience, though none in C or Python. Some of the assignments were still very tough for me, and one week's worth of coursework would take me about 10 hours to complete, depending on the material (As a Ruby dev, the Python stuff was a lot more intuitive than C!).

The course does a great job of being beginner-friendly and challenging at the same time, because the lectures walk you through the content well but the assignments require you to really think and do more research. Also, often they give you a choice of two assignments, depending on whether you're "more comfortable" or "less comfortable".

2. The lectures are a joy to watch

In addition to being informative, Professor David Malan's lectures are well-paced, animated, and creative. Watch any of them, and you'll probably agree (available on Youtube too).

3. The assignments are creative

Rather than boring tasks like "iterate over this array in C", you get to implement programs like photo filters, spell checkers, voting systems, and Hogwarts student databases, using concepts that you learned along the way.

Another thing I like is their testing system called Check50, which gives you instant feedback when you submit your code. It's gratifying when you finally get all the tests to return a green smiley face :)

Example:

(Potential) Cons

1. May not be useful for your day-to-day work

For better or for worse, this is not a crash course. If you want to learn a specific topic quickly, like React for example, there are better tutorials online (complete digression, but I highly recommend Scrimba for learning front-end languages/frameworks including React).

That being said, I think learning these core concepts of computer science will be beneficial to any developer in some way.
For example, I'd been using Ruby hashes (dictionaries) for a long time, and I knew that finding a value from a hash by its key was much faster than finding a value from an array. But before I took this course, I didn't understand how hashes were implemented under the hood. Learning about hash tables and actually implementing one allowed me to also understand Ruby hashes better.

2. You don't get to see staff-implemented solutions to assignments

As I mentioned, when you submit an assignment online, your code gets tested via a system called Check50. You don't get to see the solution that the staff had in mind or do a side-by-side comparison with yours.

This wasn't always a problem and I understand their reasons, but there was one particular occasion when I wished I could see staff-implemented solutions: when I was writing SQL queries. My queries worked, and passed the Check50 tests, but there was no way to tell if they could've been optimized further. Seeing staff-implemented answers would've helped there.

If this course sounds interesting to you, I highly recommend that you check it out on edX. And if you do decide to take it, best of luck to you.

I'm also still enrolled, about to start the iOS track. Wish me luck!

Update - 2020-12-28

The final project took me some time, but I've completed the course :)

How to use MySQL on Docker for Rails local development (switching MySQL versions made easy!)

Risa — Wed, 22 Apr 2020 12:42:37 +0000

Header image by Noah Boyer on Unsplash

Recently, I joined a Rails project that requires MySQL 5.6. But I'd already been using MySQL 8 (the latest version as of this writing) for a different project, installed locally via Homebrew.

Installing both versions using Homebrew and doing brew switch mysql@<version> turned out to be a nightmare, so I decided to use MySQL on Docker.
I am no Docker expert, and it took some time to figure out. But it's actually very straightforward and easy to use, so I highly recommend it if you need multiple versions of MySQL.

This guide walks you through setting up Docker containers for different versions of MySQL, and the necessary Rails configuration (only the last part is Rails-specific). Also, no worries if you're not familiar with Docker commands :) I provided explanations for the command options to make this as beginner-friendly as I could.

Note: This guide is for MacOS.

Steps

For the purpose of this guide, let's say you're trying to use the latest version of MySQL and version 5.6. Here are the steps:

Install Docker Desktop
Start a Docker container (MySQL version: latest)
Stop the container to free up port 3306
Start another Docker container (MySQL version: 5.6)
Configure Rails to use MySQL on Docker

1. Install Docker Desktop

Install Docker Desktop if you haven't yet. After it's installed, you can find it under ~/Applications.

2. Start a Docker container (MySQL version: latest)

Let's boot up a container with the latest version of MySQL first.
For any Docker beginners out there, docker run creates a new container with the specified image (mysql:latest in this case) and runs it.

docker run \
-p 3306:3306 \ # Maps the container's port 3306 (default port for MySQL) to your machine's port 3306.
--name test-mysql-8 \ # Name your container whatever you like, as long as it's unique.
-e MYSQL_ROOT_PASSWORD=password \ # MySQL requires that you set this. Will error out otherwise.
-d \ # Stands for "detach"; keeps the container running in the background.
mysql:latest

Warning: docker run requires that you enter any options before the image name. For example, docker run mysql:latest -p 3306:3306 ... does not work.

Next, let's check that it's actually running with docker ps.

$ docker ps
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                               NAMES
f89e544f49d5        mysql:latest        "docker-entrypoint.s…"   5 minutes ago      Up 5 minutes       0.0.0.0:3306->3306/tcp, 33060/tcp   test-mysql-8

You can also check from the Docker Desktop dashboard:

3. Stop the container to free up port 3306

Using the command in step 2, now you can boot up any other MySQL containers you need. But you can't run two containers mapped to port 3306 at the same time. So first, let's stop the currently running container to free up the port (you can restart this container later).

There are two ways to do this.

From the command line: docker stop <container name> (use the name you specified under --name)
From the Docker Desktop dashboard: Click the stop button

Note: If you try to start another container mapped to port 3306 without stopping the current one, you will get this error: Bind for 0.0.0.0:3306 failed: port is already allocated.

4. Start another Docker container (MySQL version: 5.6)

You can use the same command as step 2 to boot up containers for other versions of MySQL. Just make sure to specify:

The tag (version) you need, like mysql:5.6 (list of available tags here)
A different name under --name

And voila! You have two versions of MySQL now (you can check via docker ps/dashboard).

Whenever you need to switch versions, you can just stop the running container as shown in step 3, and start the necessary container by docker start <container name> or the start button in the dashboard.

5. Configure Rails to use MySQL on Docker

When you try to create the MySQL databases for your Rails project by running commands like rails db:setup, you may still get an error like this: Mysql2::Error: Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2).

It turns out, MySQL has a unique definition of localhost (docs).

On Unix, MySQL programs treat the host name localhost specially, in a way that is likely different from what you expect compared to other network-based programs: the client connects using a Unix socket file. The --socket option or the MYSQL_UNIX_PORT environment variable may be used to specify the socket name.

Long story short, 127.0.0.1 and localhost are not the same thing for MySQL. So you need to specify in the database settings that you're using 127.0.0.1 (not localhost). There are two ways to do this:

Configure config/database.yml

default: &default
  adapter: mysql2
  # Other settings...
  username: root
  password: password # The MYSQL_ROOT_PASSWORD you specified
  host: 127.0.0.1 # <- Specify the host

Configure DATABASE_URL
- export DATABASE_URL=mysql2://root:@127.0.0.1

Either of these should do the trick. The second option is useful if you're joining a team project and can't edit config/database.yml as you please.

Thank you for reading and please let me know if I missed anything!

References

Get DynamoDB Local up and running in 3 minutes with Docker

Risa — Tue, 25 Feb 2020 04:49:43 +0000

While using DynamoDB for a side project, I was surprised to learn that there's a version you can run locally. I was doubly pleasantly surprised to find it useful and easy to set up! There's even a GUI available, so you don't have to do everything from the command line. Here is a quick guide for setup and usage.

Note: Guide is for MacOS.

Advantages of using DynamoDB Local
Setup
GUI
Creating tables and items from the command line
Accessing DynamoDB Local from the SAM CLI

1. Advantages of using DynamoDB Local

Using a local instance means you don't have to hit the actual DynamoDB tied to your AWS account, which in turn means:

Your production DB can be kept clean for actual production data
Your AWS costs will probably be cheaper
You don't need an internet connection (except for initial setup)

2. Setup

Prerequisites

Launch Docker image

From the command line:

$ docker run -p 8000:8000 amazon/dynamodb-local

# You should see something like this:
Initializing DynamoDB Local with the following configuration:
Port:   8000
InMemory:   true
DbPath: null
SharedDb:   false
shouldDelayTransientStatuses:   false
CorsParams: *

...And that's it! You can now create tables and put data inside!
Reference: docs

Gotchas

All data in the local database(s) are cleared every time the container is shut down. If you want the data to persist, it looks like you can use the sharedDB option. So far I've found it easy to simply create tables/data from the command line each time (I don't have much initial data).

GUI

There's an unofficial but user-friendly GUI for DynamoDB Local, called dynamodb-admin (check the link for more detailed instructions).

Install: npm install -g dynamodb-admin
Use:
1. Open a new terminal window, and execute dynamodb-admin
2. Go to localhost:8001

Using it is very straightforward so I won’t walk you through it here, but to give you an idea, here are what the screens look like.

Create a new item in a table

See items inside a table

4. Creating tables and items from the command line

If you're like me, and you want to create data by copy/pasting code in the command line instead of doing it manually from the GUI, here are some examples.

Create table

aws dynamodb create-table \
--endpoint-url http://localhost:8000 \
--table-name 'Beverages' \
--attribute-definitions AttributeName=Name,AttributeType=S \
--key-schema AttributeName=Name,KeyType=HASH \
--provisioned-throughput ReadCapacityUnits=5,WriteCapacityUnits=5

Gotchas

Make sure the endpoint-url points to localhost:8000, or it will try to create a table in your actual (remote) DynamoDB.
Notice how I'm only creating the Name column, which is my primary key, and not the Pros or Cons columns. This is because the only options for AttributeType when creating a table are S/N/B (String, Number or Binary). You can create other types of columns later when you populate the table with data (further explanation).

Reference: docs

Create item

aws dynamodb put-item \
--endpoint-url http://localhost:8000 \
--table-name 'Beverages' \
--item '{
  "Name": {"S": "Green tea"},
  "Pros": {"SS": ["Delicious", "Supposedly healthy"]},
  "Cons": {"SS": ["Sometimes too bitter"]}
}'

Gotchas

SS here means “string set”, or in other words, an array of strings. You can read about the data types allowed for DynamoDB attributes here.

Reference: docs

You can also perform other actions using the CLI like deleting items or tables, but I’ll leave it here for now.

5. Accessing DynamoDB Local from the SAM CLI

If you’re not using the AWS SAM CLI, you can skip this section entirely. But if you are using the SAM CLI to develop an AWS lambda and want to access your local instance of DynamoDB from it (like me!), this is for you.
When you execute the lambda with a command like sam local invoke, you’ll want to configure the endpoint so it accesses the local instance. Here’s what you can do:

const AWS = require('aws-sdk')

// Use the local Docker endpoint if executed locally
if (process.env.AWS_SAM_LOCAL) {
  options.endpoint = 'http://docker.for.mac.localhost:8000'
}

const dynamo = new AWS.DynamoDB.DocumentClient(options)

If the configuration above doesn't work for you, or you want to know what's happening, check out this Stack Overflow thread. The accepted answer is for Linux, and it's more involved - you set up a local network to get SAM and DynamoDB to connect. But thankfully there is an easier solution for Mac, which is the code snippet I wrote above.

Thank you for reading! Please let me know if you have any tips to make DynamoDB Local even easier to use :)

Evaluate all values in an array in Javascript

Risa — Sat, 19 Oct 2019 11:08:56 +0000

This post summarizes a neat solution to a problem I ran into recently. Hope you find this useful!

Problem

&& is a well-known, convenient operator for checking if all conditions are true. For example, imagine we're trying to perform validations on a input form before saving a user profile:

function saveProfileIfValid() {
  if(firstNameIsValid('Jerry') && lastNameIsValid('Smith') && emailIsValid('js@email.com')) {
    saveProfile(); // save only if all validations pass
  }
}

The problem was, the code above would stop executing once it found a condition that returned false. I didn't want that, because my validations would add error messages to be displayed on the screen like below. How can we make all validations run regardless of the results?

let errorMessages = [];

function firstNameIsValid(firstName) {
  if(firstName && firstName.length <= 10) {
    return true;
  } else {
    // add error messages, if any
    errorMessages.push('First name must be 1-10 characters');
    return false;
  }
}

Solution

The solution I found is below - it took some time and googling to get to it, so I'm leaving this for future reference.

function validInput() {
    return [firstNameIsValid('Jerry'), lastNameIsValid('Smith'), emailIsValid('js@email.com')].every(Boolean);
}

function saveProfileIfValid() {
  if(validInput()) {
    saveProfile(); // save only if all validations pass
  }
}

What's happening here?

.every is a method that tests every element in an array against a condition and returns a boolean. It returns true only if all elements pass the test. (Update: I had a misconception about .every - please see the update below for details.)

function isTen(value) {
  return value === 10;
}
const array = [10, 5, 10]

array.every(isTen) // returns false

Boolean is a function that converts a value into a boolean, like the double bang (!!). Examples below:

> Boolean(true)
true
> Boolean(false)
false
> Boolean('test')
true
> Boolean('')
false

As a result, all validations in the array get executed, and then finally a boolean value is returned based on whether all validations returned true or not.

UPDATE

According to a helpful comment I received, .every actually exits once it finds a falsy value, just like &&. The reason why the code above works is because all the items in the array get evaluated before .every is executed. This can also be achieved by the code below, in a simpler manner. (Thank you Kevin!)

function saveProfileIfValid() {
  const isValid = {
    firstName: firstNameIsValid('Jerry'), // <- executes before if( ... )
    lastName: lastNameIsValid('Smith'),   // <- executes before if( ... )
    email: emailIsValid('js@email.com')   // <- executes before if( ... )
  }
// all the validations have already happened
  if(isValid.firstName && isValid.lastName && isValid.email) { 
    saveProfile(); // save only if all validations pass
  }
}

Thank you for reading, and please let me know if you have a better solution!

References:

Beginner’s guide to OAuth: Understanding access tokens and authorization codes using Google API

Risa — Fri, 16 Aug 2019 04:13:35 +0000

As a user, it’s easy and convenient to use your Google account (or Facebook, Twitter, etc.) to sign into other services.

You click the "Sign in with Google" button
You get redirected to a consent screen
You click "Allow"
The page redirects to the actual application

But there's actually a lot going on under the hood, and it can be useful as a developer to understand it. When I implemented OAuth in Rails for the first time, I was using an external library (the sorcery gem’s external module), which made it easy for me to gloss over the process. Yet as soon as I wanted to customize something, I realized it was necessary to have a better understanding of it. I decided to re-implement the flow without the help of any authentication helper gems.

Based on what I learned, I wrote this basic explanation of the OAuth flow and what authorization codes and access/refresh tokens are. I’m using Google as the OAuth provider.

This post is meant for people who are not very familiar with OAuth. In other words, if you already know how it works and can understand Google's OAuth guide, this post may be too elementary for you.

What are authorization codes and access tokens?

In the OAuth flow, your app needs to send two requests to Google. The first request is to get an authorization code, the second is to get an access token. They both take the form of long strings, but have different purposes.
This kind of similar terminology can be tricky at first, so let's first briefly cover what they are.

I bet this screen looks familiar. The authorization code is a code that Google sends back to your app once the user consents on this screen.

This code can be used to get an access token. Once you've received the authorization code, you put it in the params and send a second request to Google, essentially saying "Give me an access token so I can send requests on behalf of this user?"
Google's response to that should include an access token. By putting this token in your request headers, you can do things like create a new event in the user's Google Calendar or access a user’s Gmail.

Key things to note:

Authorization Code

Only valid for one-time use, since its only usage is to exchange it for an access token
Expires very quickly (according to this article, the OAuth protocol's recommended maximum is 10 minutes, and many services' authorization codes expire even earlier)

Access Token

Can be obtained using the authorization code
Put in the headers of any API requests to Google on behalf of the user
Expires after one hour (the expiration time may vary if you're using something besides Google)

What do you do after an hour when the access token expires? Do you have to make the user re-login to get a new one?
No. You can get something called a refresh token, which allows you to get new access tokens. More on this in the last section of this article.

OAuth step-by-step

Let's go over the basic OAuth flow again, except this time, we're looking at it from the developer's point of view, not the user. I've included Ruby code snippets as well.

Note: I am skipping over the very first configuration you have to do, which is to create your client_id and client_secret in the Google API Console. This guide walks you through the steps.

Step 1. User clicks the "Sign In With Google" button in your app

Step 2. Redirect to the Google consent screen

In my case, clicking the button calls the oauths_controller's oauth method, which then redirects the page.

# oauths_controller.rb
def oauth
  args = {
    client_id: ENV['GOOGLE_CLIENT_ID'],
    response_type: 'code',
    scope: 'https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/calendar',
    redirect_uri: 'http://my-app.com/oauth/callback?provider=google',
    access_type: 'offline'
  }
  redirect_to 'https://accounts.google.com/o/oauth2/v2/auth?' + args.to_query
end

A quick explanation of the query parameters:

client_id is the one you created in the Google API Console. I’ve just stored it in an environment variable.
response_type: 'code' signals that you'd like an authorization code for obtaining an access token.
scope defines what kinds of permissions you need. I needed access to the user's Google Calendar in addition to the user's name and email address, which is why I have the three scopes above. The full list of scopes can be found in the docs.
redirect_uri is the URI that Google redirects to once the user hits "Allow". You can't put any random URI here; it needs to match one of the URIs you added in the Google API Console.
access_type: 'offline' has to do with the refresh tokens I mentioned above, and we will cover this later.

Step 3. The user clicks "Allow" on the consent screen

Step 4. The page redirects to your `callback_uri`

Google handles this part. In my case, the oauths_controller's callback method gets called.

# routes.rb
get 'oauth/callback', to: 'oauths#callback'

The parameters of this incoming request from Google includes an authorization code (in params[:code]).

Step 5. Exchange the authorization code for an access token

Next, you need to make an HTTP POST request to Google's token endpoint (/oauth2/v4/token) to get an access token in exchange for the authorization code you just received.

Note: I’m using the HTTParty gem to make HTTP requests, but of course this isn’t mandatory.

# oauths_controller.rb
def callback
  # Exchange the authorization code for an access token (step 5)
  query = {
    code: params[:code],
    client_id: ENV['GOOGLE_CLIENT_ID'],
    client_secret: ENV['GOOGLE_CLIENT_SECRET'],
    redirect_uri: 'http://my-app.com/oauth/callback?provider=google',
    grant_type: 'authorization_code'
  }
  response = HTTParty.post('https://www.googleapis.com/oauth2/v4/token', query: query)

  # Save the access token (step 6)
  session[:access_token] = response['access_token']
end

As for the params in this POST request, this article provides a good explanation if you're interested.

Step 6. Save the access token

As seen in the final part of the snippet above, I'm saving the returned access_token in the session. Now, whenever I want to make a request to the Google API on behalf of the user, I can do so using this token.

For example, to get a list of the user's Google Calendar events:

headers = {
  'Content-Type': 'application/json',
  'Authorization': "Bearer #{session[:access_token]}"
}
HTTParty.get(
  'https://www.googleapis.com/calendar/v3/calendars/primary/events',
  headers: headers
)

There we go! Now we've successfully implemented the OAuth flow using authorization tokens.

Use refresh tokens to get new access tokens

As mentioned above, access tokens expire after a certain amount of time (e.g. 1 hour). If your app's login also expires at the same time or earlier, you have nothing to worry about - the user would have to re-login anyway.

But what if your app allowed users to be logged in for longer (after all, in many cases, being kicked out of an app after an hour could be obnoxious)? Google's access token would still expire, so any requests to the Google API would be rejected.

That’s where refresh tokens come in. You can get one in the same response as the one that returns an access token (Step 5), as long as you specified access_type: 'offline' in the initial redirect (Step 2).

Unlike access tokens, refresh tokens have no set expiration time. If your access token has expired, you can get a new one using a refresh token with an HTTP POST request like below:

query = {
  'client_id': ENV['GOOGLE_CLIENT_ID'],
  'client_secret': ENV['GOOGLE_CLIENT_SECRET'],
  # Assuming we've saved the refresh_token in the DB along with the user info
  'refresh_token': current_user.refresh_token,
  'grant_type': 'refresh_token',
}
response = HTTParty.post(
  'https://www.googleapis.com/oauth2/v4/token',
  query: query
)

session[:access_token] = response['access_token']

Refresh tokens gotchas

1. You should reuse them

You’re generally expected to keep using the same refresh token each time you request a new access token. For this reason, Google only gives you a refresh token the first time the user consents and logs in to your app (docs on offline access):

This value instructs the Google authorization server to return a refresh token and an access token the first time that your application exchanges an authorization code for tokens.

This means that it’s important to store refresh tokens in long-term storage, like the DB.

Note: If you really need to get a new refresh token every time the user logs in, you can add prompt=consent to the parameters in the authorization request in Step 2. This will require the user to consent every time they log in, but the response will always include a new refresh token.

2. They can become invalid too

While refresh tokens don’t expire after a set amount of time, they can become invalid in some cases (docs):

You must write your code to anticipate the possibility that a granted refresh token might no longer work. A refresh token might stop working for one of these reasons:

The user has revoked your app's access.

The refresh token has not been used for six months.

The user changed passwords and the refresh token contains Gmail scopes.

The user account has exceeded a maximum number of granted (live) refresh tokens. There is currently a limit of 50 refresh tokens per user account per client. If the limit is reached, creating a new refresh token automatically invalidates the oldest refresh token without warning.

For example, if the user revoked your app’s access, any requests to obtain a new access token using the existing refresh token would cease to work. In such cases, you would need to get the user to log out and re-login in order to get a new refresh token.

In this post, I handled everything manually without relying on gems like devise, sorcery or omniauth-google-oauth2. I'm not saying that's the best approach here; realistically, it might be easier to use those gems. The goal of this post was to walk through what is actually happening, in order not to blindly let the gems handle everything. Thanks for reading!

SSH Key Authentication for Absolute Beginners (in Plain English!)

Risa — Wed, 19 Jun 2019 14:23:30 +0000

There are so many articles on SSH online, but when I was learning it felt like very few were beginner-friendly. My goals here are to provide you with a basic understanding of SSH, and enough information to create your SSH keys and connect to a server. I've tried to keep technical terms to a minimum and stick to the basics.

What exactly is SSH?

According to Techopedia:

Secure Shell (SSH) is a cryptographic protocol and interface for executing network services, shell services and secure network communication with a remote computer. Secure Shell enables two remotely connected users to perform network communication and other services on top of an unsecured network.

But what is it really?
Basically, SSH is a way to connect your computer to different computers or services. There are a wide range of authentication methods (source), but usually, when people talk about connecting to something via SSH, they're referring to public key authentication.

Using SSH's public key authentication is like using a username and password to log in and connect to some service, but more convenient (no need to enter your credentials every time) and secure.
For example, if you register your credentials (called SSH keys) with a remote computer, you can access that computer from yours using the terminal. When you connect, you can use the terminal as if you're using the terminal in that remote computer, and execute the same commands (like cd or ls).

So what are SSH keys, and how do they work?

What are SSH Keys?

SSH keys consist of a pair of keys, called a public and private key.
This article has the most intuitive explanation on this topic that I've seen, so I highly recommend it.

Think of a public key as being the lock. It’s not actually a key, it’s a padlock you can make lots of copies of and distribute wherever you want. For example, if you want to put your ‘padlock’ on an ssh account on another machine, you would copy it to ‘authorized_keys’ in the ~/.ssh folder. You’ve setup the padlock.

Think of a private key as being the actual key. This is what you use to open the padlock that is stored on the other machine. Just like a regular key you keep it secret, safe, and out of the wrong hands.

The most important takeaway here is: NEVER share your private key.
If you do, anyone can pretend to be you.

One common usage of SSH is to connect to Github. Most people probably run into this situation when they're starting out. Until you add your SSH key to Github, you have to enter your username and password each time you want to push some code. But once you add your public key (the padlock) to Github, and have your private key (the key) registered in the ssh-agent (basically a key manager that tries each of your keys one by one), you're authenticated automatically and no longer have to enter your credentials.
If you haven't done this yet, Github's guide walks you through it.

How do the keys actually work? We won't go into details here, but I think this article explains it well (the "client" is your computer and the "server" is the remote computer/service):

When a client attempts to authenticate using SSH keys, the server can test the client on whether they are in possession of the private key. If the client can prove that it owns the private key, a shell session is spawned or the requested command is executed.

Generating your keys

Computers don't come with auto-generated keys; you have to make them using a command called ssh-keygen. For details, you can refer to Github's guide that I mentioned earlier.

A few questions that come to mind regarding key generation:

Q. Do I need to ssh-keygen a different key pair for each server/service, or can I use the same keys everywhere?
A. You can use the same keys. Having separate keys for separate destinations doesn't make it safer from an authentication perspective. (source)
Q. I have a multiple computers. Should I copy the keys from one device to another and share them, or generate new ones for each computer?
A. Technically you can do either, but I recommend the latter approach, and it also seems to be the more common one (source). I have a work computer and a personal one, but they have different keys.
- Sharing the same keys:
  - [Pro] More convenient because you only have to register one key for all your devices to access a service.
  - [Con] If one of your devices gets stolen and the key gets compromised, the keys for all your devices would be compromised.
- Using different keys for each computer:
  - [Pros] Even if one of your devices gets stolen, you can simply delete that particular key from the list of authorized keys and your other devices would stay safe. Also, you can control which of your computers have access to what.
  - [Con] You have to manually register multiple SSH keys if you want multiple devices to be able to connect to a service.
Q. Where are my keys stored and how can I see them?
A. If you've used the default settings, your keys are probably saved in ~/.ssh. Try the first line of the commands below in your terminal and see if the result is a long string that starts with ssh-rsa. If so, that file, called id_rsa.pub, is your public key. Your private key should be saved in the same directory as id_rsa.

cat ~/.ssh/id_rsa.pub # public key
cat ~/.ssh/id_rsa # private key

How to connect to a server via SSH

Once you've generated your SSH keys, you need to copy your public key to the server(s) you want to access. This can be done with a command called ssh-copy-id, which looks like below. If you need more details, SSH's official guide covers the specifics.

ssh-copy-id -i ~/.ssh/id_rsa.pub user@server.address.com

Afterwards, if you want to access the remote server, you can do so with this command from the terminal.

ssh user@server.address.com

For example, my company has a server. Let's say it's called companyserver.com. And my username is risa. Then, the command would look like this: ssh risa@companyserver.com

If you're connecting to that server for the first time, you will most likely see a prompt like The authenticity of host 'companyserver.com' can't be established. ECDSA key fingerprint is <long string>. Are you sure you want to continue connecting (yes/no)? Enter yes to continue connecting.

The default port for SSH is 22. If you need to connect to a different port, you can do so by adding the -p option, like -p 1234.

Copy files between your computer and remote server using `scp`

Let me tell you about a handy command that uses SSH. You may be familiar with the terminal's cp command, which lets you copy a file inside your computer and rename it.

cp original_folder/file_name new_folder/new_file_name

scp is a similar command that lets you do this to/from a remote server. In other words, it lets you upload and download files remotely.

scp file user@server.address.com:path # upload to remote server
scp user@server.address.com:file path # download from remote server

For example, if I wanted to upload a file to my company server, it would look like this:
scp file_to_upload.txt risa@companyserver.com:
If no path is specified after the colon, the file should be uploaded to the home directory with the same name. Do remember to include the colon though!
On the flip side, if I wanted to download a file from my company server, it should look like this:
scp risa@companyserver.com:file_to_download.txt local_path

Remember, the order is always original_location then new_location.

Hopefully this post has served as a starting point for anyone learning about SSH. Thank you for reading!

Rails Seeds Made Simple with Seed-Fu: A Step-by-Step Guide

Risa — Thu, 23 May 2019 23:54:05 +0000

I was seeding some default data in a Rails app, but finding it increasingly difficult to maintain the data without generating duplicates or failing to delete some unnecessary records.
Then I learned about the seed-fu gem, which helped me avoid such pitfalls and make the syntax look clean.

In this post, I'll describe the issue I had with my original seeds, and walk you through how to use seed-fu. If you're using lots of find_or_intialize_by / find_or_create_by in your seeds, or finding it difficult to maintain your data integrity, this might be for you.

The Problem

Let me give you a rough idea of what I was doing.
I wanted to seed data for product_types and products. Each product belongs to a product_type. My seeds.rb looked like this (just longer and not as silly):

# db/seeds.rb
# Seed product types
[
  {name: 'fruit', description: 'Juicy'}
  {name: 'vegetable', description: 'Get your vitamins'}
  {name: 'snack', description: 'Cheat day!'}
].each do |attributes|
  ProductType.find_or_initialize_by(name: attributes[:name]).update!(attributes)
end

# Seed products
[
  {product_type: ProductType.find_by(name: 'fruit'), name: 'apple'},
  {product_type: ProductType.find_by(name: 'fruit'), name: 'ooorange'},
  {product_type: ProductType.find_by(name: 'vegetable'), name: 'tomato'},
  {product_type: ProductType.find_by(name: 'snack'), name: 'chocolate'}
].each do |attributes|
  Product.find_or_create_by(attributes)
end

I'm using find_or_initialize_by for product_types in order to overwrite the record if I'm just updating a description. For example, if I changed the description of fruit from 'Juicy' to 'Scrumptious' and ran rails db:seed, Rails would update the description for the existing fruit record, instead of creating a new one. So far, so good.

But then, I noticed an issue with products. One product_type can have multiple products, which means I can't tell Rails to overwrite the name if there's an existing record with the same product_type.
Notice how orange is misspelled? If you corrected the spelling and reloaded the seeds, the product called ooorange would remain while another one called orange would be created. In order to clean this up, you would have to manually go into the console and delete the unnecessary product, or reset your DB - both unideal.

Note: I later realised that you could designate the id for each record and update your records with the id as the key, without using this gem at all. But I'll focus on the solution using seed-fu in this post.

Manage your seeds with `seed-fu`

1. Installation

Add the gem to your Gemfile and run bundle.

gem 'seed-fu'

2. Create your seed folder

Choose where to put your files from the two options below; seed-fu will know to read from them. Or you can set a custom path if you like (check the docs).

#{Rails.root}/db/fixtures
#{Rails.root}/db/fixtures/#{Rails.env}

3. Create your seed data files

Now for the actual data - this is what our seeds look like if rewritten seed-fu-style.

# db/fixtures/product_types.rb
ProductType.seed(:name,
  {name: 'fruit', description: 'Juicy'}
  {name: 'vegetable', description: 'Get your vitamins'}
  {name: 'snack', description: 'Cheat day!'})

# db/fixtures/product_types.rb
Product.seed(:id,
  {id: 1, product_type: ProductType.find_by(name: 'fruit'), name: 'apple'},
  {id: 2, product_type: ProductType.find_by(name: 'fruit'), name: 'ooorange'},
  {id: 3, product_type: ProductType.find_by(name: 'vegetable'), name: 'tomato'},
  {id: 4, product_type: ProductType.find_by(name: 'snack'), name: 'chocolate'})

Let me briefly explain what's happening.

For product_types, we don't want multiple records with the same name being created, so we use :name as the key (or "constraint"). If a product_type with that name already exists, the description would be updated, instead of a whole new product_type being created.

As for products, we designated the id for each one. We use this :id as the constraint, and create/update accordingly. So if we corrected the spelling from ooorange to orange and reloaded the seeds, the name for the product whose id is 2 would be updated. Like this, we can avoid the pitfalls of leaving incorrect records or accidentally creating ones.

The docs have more on using these constraints. I personally think it's much more reader-friendly than the original seeds.

4. Load your `seed-fu` data automatically

If you want to load your seed-fu data manually from the command line, you can do so with rails db:seed_fu. But it would be more convenient if the data could be automatically loaded in situations where you'd normally expect your seeds to be loaded (like rails db:reset).

This couldn't be simpler. Just add this line to your seeds.rb:

# db/seeds.rb
SeedFu.seed

You can also pass it two parameters (docs):

fixture path: in case you're not using the default path
filter: in case you only want to load certain files

Hope this has been helpful. Thanks for reading!

Forem: Risa

4 Design Challenges as an Indie App Developer and Helpful Tools: Color Schemes, App Screenshots, etc.

Table of Contents

1. How should I decide the color scheme for my app?

2. How do I design the app UI?

3. How do I make app icons for each size?

4. How do I create tasteful App Store screenshots?

How to set up ESLint with StandardJS for a new React Native/TypeScript project

Add ESLint #1

Steps

1. Install ESLint, and its plugins for React and React Native

2. Install ESLint plugins for Standard and TypeScript

3. Disable Prettier's rules that conflict with ESLint

4. Configure .eslintignore

5. Configure .eslintrc.js

6. Edit tsconfig.json

7. Add npm scripts

8. [Optional] Run ESLint in Github Actions

Setting up Storybook for React Native/TypeScript (server, loader, iOS, Android)

risafj / StorybookExampleReactNativeTS

Example repo for setting up Storybook for a React Native/TypeScript project.

Storybook Example React Native TypeScript

Technical stack

How to use

Prerequisites

Step 1: Install Storybook

Step 2: Conditionally render Storybook

Add LOAD_STORYBOOK flag

Render Storybook if LOAD_STORYBOOK=true

Step 3: Boot Storybook

Steps to take if Storybook Server doesn't work with the Android emulator

Step 4: Take care of asyncStorage warning

Step 5: Add Storybook Loader

Step 6: Write your own stories (in TypeScript!)

Caveat

The Basics of Rails I18n - Translate errors, models, and attributes

Why I wrote this post

Table of Contents

0. Setting your default locale

1. Translating model and attribute names

1.1 Defining your translations

1.2 Accessing model and attribute translations

2. Translating ActiveRecord errors

2.1 Error message breakdown

1. ActiveRecord::RecordInvalid:

2. Validation failed:

3. Name can't be blank

2.2 Defining your translations

About the rails-i18n gem

2.3 Accessing your translations with I18n.t

2.4 Looking up errors with string interpolation

Running RuboCop only on modified files, in a project with no RuboCop

1. Install gems with gem install

2. Create .rubocop.yml in the home directory

3. Run RuboCop on modified files

Why I recommend Harvard's CS50x online course to every self-taught developer

Pros

1. Their philosophy

2. The lectures are a joy to watch

3. The assignments are creative

(Potential) Cons

1. May not be useful for your day-to-day work

2. You don't get to see staff-implemented solutions to assignments

Update - 2020-12-28

How to use MySQL on Docker for Rails local development (switching MySQL versions made easy!)

Steps

1. Install Docker Desktop

2. Start a Docker container (MySQL version: latest)

3. Stop the container to free up port 3306

4. Start another Docker container (MySQL version: 5.6)

5. Configure Rails to use MySQL on Docker

References

Get DynamoDB Local up and running in 3 minutes with Docker

Table of Contents

1. Advantages of using DynamoDB Local

2. Setup

Prerequisites

Launch Docker image

GUI

Create a new item in a table

Add `LOAD_STORYBOOK` flag

Render Storybook if `LOAD_STORYBOOK=true`

1. `ActiveRecord::RecordInvalid:`

2. `Validation failed:`

3. `Name can't be blank`

About the `rails-i18n` gem

2.3 Accessing your translations with `I18n.t`

1. Install gems with `gem install`

2. Create `.rubocop.yml` in the home directory

Step 4. The page redirects to your `callback_uri`

Copy files between your computer and remote server using `scp`

Manage your seeds with `seed-fu`

4. Load your `seed-fu` data automatically