Skip to content

Instantly share code, notes, and snippets.

View TyrealGray's full-sized avatar

Tianrui Guo TyrealGray

View GitHub Profile
@TyrealGray
TyrealGray / Dynamic React Component library.md
Last active April 11, 2019 14:33
Dynamic React Component library

//index.js

import Loadable from 'react-loadable';

export const funcClass = async function() {
    const {funcClass} = await import('./funcClass');
    return new funcClass();
};
@TyrealGray
TyrealGray / SW.md
Created April 6, 2019 21:31
service-worker.js example
'use strict';

const CACHE_VERSION = 1;
let CURRENT_CACHES = {
	offline: 'hiddout-v' + CACHE_VERSION,
};

self.addEventListener('install', (event) => {
	console.log('The service worker is being installed.');
@TyrealGray
TyrealGray / UKVISA.md
Created December 20, 2018 05:59
2018 年底离岸申请英国 T2 签证避坑指南

首先可以参考一篇知乎2016年底的文章

https://zhuanlan.zhihu.com/p/24537759

这篇文章列出了比较完备的信息,但是楼主发现有一些重要的东西还是和其他类似文章一样没有点到 (也可能是过时了而最新的签证申请变了吧)

T2工签申请人材料准备

官方目前要求只需要offer letter,存款证明,护照,TB测试结果,雅思UKVI成绩单 (如果是英国认可的英语授课学历可以不需要雅思证明,这个具体怎么操作的楼主不太清楚),在线申请的时候会填基本信息(以及最重要的CoS号码)然后缴费(用支付宝就好,信用卡也行)。缴费后只需要打印checklist的那份表格就行了,然后带上它和材料一并去签证中心即可。

PBS Dependant陪工签申请人

官方要求更简单,只需要A marriage certificate, or a reasonable equivalent, for XXX and XXX,护照,存款证明,TB测试结果即可。在线申请填完表格付款后打印checklist一并带着前往签证中心即可。

@TyrealGray
TyrealGray / How Color Matrix Wroks.md
Last active September 13, 2018 15:55
How color matrix works

Normally a color matrix is a 5x5 matrix. Here are 5x5 color matrix as a example:

Brightness Matrix    Contrast Matrix  
 
     R G B A W           R G B A W    
 
 R  [1 0 0 0 b]      R  [c 0 0 0 t]   
 G  [0 1 0 0 b]      G  [0 c 0 0 t]   
 B  [0 0 1 0 b]      B  [0 0 c 0 t]   
 A [0 0 0 1 0] A [0 0 0 1 0] 
declare module '*.json';

declare module 'fabric' {

	interface StaticCanvas {
		new (name: string): StaticCanvas;
		setHeight(height: number): void;
		setWidth(width: number): void;
 loadFromJSON(image: any, callback: ()=> any): void;
@TyrealGray
TyrealGray / prng.js
Created April 8, 2018 16:22 — forked from blixt/prng.js
A very simple, seedable JavaScript PRNG.
/**
* Creates a pseudo-random value generator. The seed must be an integer.
*
* Uses an optimized version of the Park-Miller PRNG.
* http://www.firstpr.com.au/dsp/rand31/
*/
function Random(seed) {
this._seed = seed % 2147483647;
if (this._seed <= 0) this._seed += 2147483646;
}

To update an array in Redux store

Because the principle of the Redux state, the state always is read-only. And if we want to update some variable, we always have to return a new value. The problem is javascript always pass object by reference, and redux store could not recognize Array element 's data changes because Array reference is not changed. The right way to update

For example, let's assume we have an array in our state name "events" and contains many event objects.

E.g. the right way to update:

function updateEvnet(state, ID, data ) {
  let events = [...state.events];
 for (let index = 0; index &lt; events.length; ++index) {

react navigation custom tab bar using react-navigation

export default class SectionTabView extends React.Component {

	static propTypes = {
		navigation: PropTypes.object
	};

	constructor(props) {
		super(props);
@TyrealGray
TyrealGray / Lifecycle in React Native Component.md
Last active November 12, 2018 17:18
Lifecycle in React Native Component

Lifecycle in React Native Component

When we are developing our app, there are some features we always need to add, e.g. ListView components only refresh when the data in listItem is changed, initializing data before render function but not in the constructor function…

React Native component has already been implemented with many native optimization for us, but those features above are not. To do that, we need to override lifecycle function in React Native component.

The Component Lifecycle API

First of all, this is the official site docs about the API we could use:https://facebook.github.io/react/docs/react-component.html#the-component-lifecycle

The order of lifecycle should be: constructor() -> componentWillMount() -> render() -> componentDidMount() -> [ runtime loop ] -> componentWillUnmount()

@TyrealGray
TyrealGray / 100 Stupid Questions for React Native.md
Last active August 31, 2022 14:31
100 Stupid Questions for React Native

100 Stupid Questions for React Native

What is React Native? Is it same as React?

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

https://facebook.github.io/react-native/

Is React Native easy to learn?

It depends on what project you are going to build. As for front-end developer, you nearly need to learn nothing, only a new way to write javascript (Redux, JSX).

Do I must learn Redux?