Skip to content

Instantly share code, notes, and snippets.

View starandtina's full-sized avatar

Xin(Khalil) Zhang starandtina

69 followers · 57 following
  • Chengdu, China
View GitHub Profile
@starandtina
starandtina / blog-webpack-2.md
Created April 6, 2016 04:42 — forked from xjamundx/blog-webpack-2.md
From Require.js to Webpack - Part 2 (the how)

This is the follow up to a post I wrote recently called From Require.js to Webpack - Party 1 (the why) which was published in my personal blog.

In that post I talked about 3 main reasons for moving from require.js to webpack:

  1. Common JS support
  2. NPM support
  3. a healthy loader/plugin ecosystem.

Here I'll instead talk about some of the technical challenges that we faced during the migration. Despite the clear benefits in developer experience (DX) the setup was fairly difficult and I'd like to cover some of the challanges we faced to make the transition a bit easier.

@starandtina
starandtina / pr.md
Created March 22, 2016 07:41 — forked from piscisaureus/pr.md
Checkout github pull requests locally

Locate the section for your github remote in the .git/config file. It looks like this:

[remote "origin"]
	fetch = +refs/heads/*:refs/remotes/origin/*
	url = git@github.com:joyent/node.git

Now add the line fetch = +refs/pull/*/head:refs/remotes/origin/pr/* to this section. Obviously, change the github url to match your project's URL. It ends up looking like this:

@starandtina
starandtina / findAnItemByProperty.js
Created March 7, 2016 14:40
Find an item by property in an array
var roomId = ... // get the room id you want to find
var foundRoom;
var length = roomList.length;
var idx = 0;
// regular for loop
for (idx; idx <= length; idx++) {
// get the room and make the comparison
@starandtina
starandtina / gist:0d7d82c2a38c2a9a4836
Created February 29, 2016 01:41 — forked from tmaslen/gist:9409894
IE compatibility and document modes

In BBC News Visual Journalism we have to test 13 different setups of IE.

Test page:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-language" content="<%= translations[vocab_dir].lang %>" />
@starandtina
starandtina / what-forces-layout.md
Created February 19, 2016 04:47 — forked from paulirish/what-forces-layout.md
What forces layout/reflow. The comprehensive list.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Element

Box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
  • elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
  • elem.getClientRects(), elem.getBoundingClientRect()
@starandtina
starandtina / git-serve.md
Created January 29, 2016 09:16 — forked from datagrok/git-serve.md
How to easily launch a temporary one-off git server from any local repository, to enable a peer-to-peer git workflow.

Launch a one-off git server from any local repository.

I [tweeted this already][1] but I thought it could use some expansion:

Enable decentralized git workflow: git config alias.serve "daemon --verbose --export-all --base-path=.git --reuseaddr --strict-paths .git/"

Say you use a git workflow that involves working with a core "official" repository that you pull and push your changes from and into. I'm sure many companies do this, as do many users of git hosting services like Github.

Say that server, or Github, goes down for a bit.

@starandtina
starandtina / wechat-useragent.js
Created December 21, 2015 14:20 — forked from GiaoGiaoCat/wechat-useragent.js
微信内置浏览器UserAgent的判断
// 检测浏览器的 User Agent 应该是非常简单的事情
// 微信在 Android 下的 User Agent
mozilla/5.0 (linux; u; android 4.1.2; zh-cn; mi-one plus build/jzo54k) applewebkit/534.30 (khtml, like gecko) version/4.0 mobile safari/534.30 micromessenger/5.0.1.352
// 微信在 iPhone 下的 User Agent
mozilla/5.0 (iphone; cpu iphone os 5_1_1 like mac os x) applewebkit/534.46 (khtml, like gecko) mobile/9b206 micromessenger/5.0
// 通过javascript判断
// 很容易看出来，微信的 User Agent 都有‘micromessenger’字符串标示，我们判断是否含有这些字符串就OK了
function isWeixinBrowser(){
@starandtina
starandtina / Polyfill for matches method
Created December 11, 2015 05:42
matches
function matches(elm, selector) {
var matches = (elm.document || elm.ownerDocument).querySelectorAll(selector),
i = matches.length;
while (--i >= 0 && matches.item(i) !== elm) ;
return i > -1;
}
@starandtina
starandtina / reflux.js
Created November 20, 2015 08:28 — forked from spoike/reflux.js
A simpler implementation of React.JS's Flux
var EventEmitter = require('events').EventEmitter,
_ = require('lodash');
/**
* Creates an action functor object
*/
exports.createAction = function() {
var action = new EventEmitter(),
eventLabel = "action",
@starandtina
starandtina / trello-css-guide.md
Created November 17, 2015 05:04 — forked from bobbygrace/trello-css-guide.md
Trello CSS Guide

Trello CSS Guide

“I perfectly understand our CSS. I never have any issues with cascading rules. I never have to use !important or inline styles. Even though somebody else wrote this bit of CSS, I know exactly how it works and how to extend it. Fixes are easy! I have a hard time breaking our CSS. I know exactly where to put new CSS. We use all of our CSS and it’s pretty small overall. When I delete a template, I know the exact corresponding CSS file and I can delete it all at once. Nothing gets left behind.”

You often hear updog saying stuff like this. Who’s updog? Not much, who is up with you?

This is where any fun you might have been having ends. Now it’s time to get serious and talk about rules.

Writing CSS is hard. Even if you know all the intricacies of position and float and overflow and z-index, it’s easy to end up with spaghetti code where you need inline styles, !important rules, unused cruft, and general confusion. This guide provides some architecture for writing CSS so it stays clean and ma