JackChan jack5241027

Note:

When this guide is more complete, the plan is to move it into Prepack documentation.
For now I put it out as a gist to gather initial feedback.

A Gentle Introduction to Prepack (Part 1)

If you're building JavaScript apps, you might already be familiar with some tools that compile JavaScript code to equivalent JavaScript code:

Babel lets you use newer JavaScript language features, and outputs equivalent code that targets older JavaScript engines.

Proposal for a simpler React application architecture

This is a design document for a minimalist React application architecture. Anecdotally, this design is proving to work well for smaller-to-medium scale projects, but it has not been proven to work for large-scale projects because it has not been tested against those yet.

This design is modeled around the official Intro To React guide put out by the React team. In fact, it does not diverge in any significant way from that guide; it simply adds a few explicit constraints to promote simpler implementations.

Examples of this architecture in use:

https://github.com/jeremyckahn/rekapi-timeline
https://github.com/jeremyckahn/merkaba (still early in development)

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

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

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

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 />

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).


	# Overview

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

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

	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')
	};

	var gulp = require('gulp');
	var sourcemaps = require('gulp-sourcemaps');
	var source = require('vinyl-source-stream');
	var buffer = require('vinyl-buffer');
	var browserify = require('browserify');
	var watchify = require('watchify');
	var babel = require('babelify');

	function compile(watch) {
	var bundler = watchify(browserify('./src/index.js', { debug: true }).transform(babel));