jack5241027

Deploying a subfolder to GitHub Pages

Sometimes you want to have a subdirectory on the master branch be the root directory of a repository’s gh-pages branch. This is useful for things like sites developed with Yeoman, or if you have a Jekyll site contained in the master branch alongside the rest of your code.

For the sake of this example, let’s pretend the subfolder containing your site is named dist.

Step 1

Remove the dist directory from the project’s .gitignore file (it’s ignored by default by Yeoman).

jack5241027

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var folders = {
    APP: path.resolve(__dirname, '../app'),
    BUILD: path.resolve(__dirname, '../build'),
    BOWER: path.resolve(__dirname, '../bower_components'),
    NPM: path.resolve(__dirname, '../node_modules')
};

jack5241027

凍仁的讀書清單

編號. 書名 / 進度：

待讀書單

1. DevOps 實戰：VMware 管理員運維方法、工具及最佳實踐 / 0%
2. Docker 即學即用 / 23%
3. Docker 錦囊妙計 / 0%

jack5241027

createElement.js

createElement.js lets document.createElement use CSS selectors.

This is a pretty useful library for building out DOM elements. The whole thing runs on one regex and a for loop, so it’s plenty fast. The script is 300 bytes when compressed and gzipped. For 524 bytes (advanced), it includes nesting support and can generate entire DOM hierarchies, including text nodes.

Usage

document.createElement(); // generates <div />

jack5241027

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

---

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

---

jack5241027

前端工程師面試問題集

@版本 2.0.0

譯注：此翻譯版，主要給不能流利的讀英文的人看，相關專有名詞還是保留原文。翻譯不好地方請協助pull request.

此repository包含了一些前端開發的面試問題，來審查一個有潛力的面試者。這並不是建議你對同一個面試者問上所有的問 (那會花費好幾小時)。從列表中挑幾個題目，應該就夠幫助你審查面試者是否擁有你需要的技能。

Rebecca Murphey 的 Baseline For Front-End Developers 也是一篇很棒且值得讀的文章在你開始面試之前。

jack5241027

function * gen() {
	console.log('start');
	var got = yield 'called';
	console.log(got);
}
var g = gen();
var a = g.next();
//顯示start
var b = g.next('hello generator');
//顯示hello generator

jack5241027

CSS 命名 / 架構規範上的幾個大方向

參考: OOCSS, SMACSS, BEM, AMCSS, SUITCSS, ACSS

1. 分類 (smacss) base - 基本元件, like, a, b, img, 最基礎的屬性, 可能在任何場合被使用 layout - 整個網站的大架構 module - 功能性元件, 比方說選單 state - 狀態指示, 像是 打開 / 關上 / 等待中

jack5241027

import { Component } from "React";

export var Enhance = ComposedComponent => class extends Component {
  constructor() {
    this.state = { data: null };
  }
  componentDidMount() {
    this.setState({ data: 'Hello' });
  }
  render() {

jack5241027

# Overview

	- GraphQL
		- 是 query language
		- 也是一份規格

	- GraphQL engine
		- spec 的實作
		- 已有多種語言版本的實作(FB 官方提供 js 實作)