Hung Doan hungdoansy

Code is clean if it can be understood easily – by everyone on the team. Clean code can be read and enhanced by a developer other than its original author. With understandability comes readability, changeability, extensibility and maintainability.

General rules

Follow standard conventions.
Keep it simple stupid. Simpler is always better. Reduce complexity as much as possible.
Boy scout rule. Leave the campground cleaner than you found it.
Always find root cause. Always look for the root cause of a problem.

Design rules

	Relay	Apollo
Built by	Facebook (Check out the project on GitHub)	Meteor (Check out the project on GitHub)
Frontend Technologies	Requires React / React Native and configuration of Babel plugin	Framework and platform agnostic (works with any JS framework such as React, Angular or Vue as well as on the native mobile platforms)
GraphQL API	Requires a certain structure in the GraphQL schema	Works with any GraphQL schema
Complexity	Slow learning curve: Lots of powerful magic happening behind the scenes	Low entrance barrier: Let's you get started quickly and involves more manual work for certain features
Flexibility	Almost no flexibility, strict rules how to

The Rules of React

All libraries have subtle rules that you have to follow for them to work well. Often these are implied and undocumented rules that you have to learn as you go. This is an attempt to document the rules of React renders. Ideally a type system could enforce it.

What Functions Are "Pure"?

A number of methods in React are assumed to be "pure".

On classes that's the constructor, getDerivedStateFromProps, shouldComponentUpdate and render.

Password Autofill on a React Native Expo app

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

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

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

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

Renew GPG key

Given that your key has expired.

$ gpg --list-keys
$ gpg --edit-key KEYID

Use the expire command to set a new expire date:

Example Git Branching Diagram

You can use this diagram as a template to create your own git branching diagrams. Here's how:

Create a new diagram with diagrams.net (formerly draw.io)
Go to File > Open From > URL
Insert this url (it points to the xml data below): https://gist.githubusercontent.com/bryanbraun/8c93e154a93a08794291df1fcdce6918/raw/bf563eb36c3623bb9e7e1faae349c5da802f9fed/template-data.xml
Customize as needed for your team.

	import React from 'react'
	import axios, { post } from 'axios';

	class SimpleReactFileUpload extends React.Component {

	constructor(props) {
	super(props);
	this.state ={
	file:null
	}

	package main

	import (
	"fmt"
	)

	// Use map[string]interface{} to pair functions to name
	// Could maybe use anonymous functions instead. Might be clean
	// in certain cases
	var funcMap = map[string]interface{}{

	// Future versions of Hyper may add additional config options,
	// which will not automatically be merged into this file.
	// See https://hyper.is#cfg for all currently supported options.

	module.exports = {
	config: {
	// Choose either "stable" for receiving highly polished,
	// or "canary" for less polished but more frequent updates
	updateChannel: 'stable',

	// create a bookmark and use this code as the URL, you can now toggle the css on/off
	// thanks+credit: https://dev.to/gajus/my-favorite-css-hack-32g3
	javascript: (function() {
	var elements = document.body.getElementsByTagName('*');
	var items = [];
	for (var i = 0; i < elements.length; i++) {
	if (elements[i].innerHTML.indexOf('* { background:#000!important;color:#0f0!important;outline:solid #f00 1px!important; background-color: rgba(255,0,0,.2) !important; }') != -1) {
	items.push(elements[i]);
	}
	}