Skip to content

Instantly share code, notes, and snippets.

View chenglou's full-sized avatar
💫

Cheng Lou chenglou

💫
View GitHub Profile

Q&A format

Problem

You want to put inline style to an element.

Solution

Instead of writing a string, create an object whose key is the camelCased version of the style name, and whose value is the style's value, in string:

/** @jsx React.DOM */

petehunt: about react-bootstrap!

First, if you forget everything about passing a transformer through browserify or some "cssx" compilation, the thing's still working great. The bootstrap less code was rather easy to convert into js objects with a few regex replaces.

I was planning to go on until I realized the whole less parsing library was big. But every functionality in that library can be translated into regular js methods.

In fact I think it's a viable idea to have a react companion library (or independent one) that, say, contains css utility methods such as darken(0.2) or hsl(bla). At the same time this avoids the awkwardness of manipulating strings for css props. Mixins are natural: just a merge method. Cascading comes for free like I said, due to the order of merge(require('button'), require('customButton')).

Variables and loops and other "incredible" preprocessors functionalities come for free without any learning curve. Best of all, scoped css since it's just an ordinary object require.

@chenglou
chenglou / gist:7530735
Last active December 28, 2015 16:39
Something's Dying at a Pace of 10% per Month

This is a dramatic and overly pessimistic estimation. The next WWDC is about ten months away and, if everything goes according to the general plan, in ten months there'll be no way of establishing the web as a premium platform anymore.

Context is king. It's the holy grail of UX development. What we now call "mobile computing" is really just the beginning of this idea. The true benefits of mobile computing hasn't shown itself much until now; I believe we will be experiencing it soon.

Call me slow on this one, but I've only started to feel alarmed since the introduction of the M7 co-processor in iPhone 5S. On hindsight, this is a clear test bed for what will soon materialize as the iWatch. With yesterday's acquisition of PrimeSense, I felt like someone slapped me on the face and prompted me to write this.

The iWatch will not be a standalone device; it will be the landscape-changing companion device to existing iOS devices. In that regard, the web will stay alive as an alternative to native apps. An alterna

@chenglou
chenglou / anagram.cljs
Last active January 20, 2016 05:31
ClojureScript anagram implementation
; (group-by f list): call f on each item in list. The return value becomes a key
; of the resulting map, whose keys map to the list of items for which f returned
; that key.
; (vals map): returns a list of the values of the map.
(defn anagram [words] (vals (group-by sort words)))
(= (anagram ["star" "rats" "car" "arc" "stars"])
[["star" "rats"] ["car" "arc"] ["stars"]]) ; true
["path","add","source", ["/Users/chenglou/Desktop/test/hello.ml", "/Users/chenglou/Desktop/test/goodbye.ml"]]
["path","list","source"]
{
"query": ["tell","start","end","let f x = x let () = ()"],
"context": [
"auto",
"/Users/chenglou/Desktop/test/hello.ml"
]
}
echo "open C\n let a = InC.x" > Main.ml
echo "module InC = struct let x = 5 end" > C.ml
ocamldep -I ./ -modules Main.ml
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule bsPlatformBuffer
* @flow
* @whateverPragmaHere
*/
'use strict';
❯ npm uninstall --save-dev webpack
- acorn@3.3.0 node_modules/acorn
- amdefine@1.0.1 node_modules/amdefine
- arr-flatten@1.0.1 node_modules/arr-flatten
- arr-diff@2.0.0 node_modules/arr-diff
- array-unique@0.2.1 node_modules/array-unique
- arrify@1.0.1 node_modules/arrify
- async@1.5.2 node_modules/async
- async-each@1.0.1 node_modules/async-each
- balanced-match@0.4.2 node_modules/balanced-match
[@@bs.module "Run"] external onUnload : (unit => unit) => unit = "";
[@@bs.module "MyBootConfig"] external globalDelete : bool = "RickyGlobalDeleteGK";
[@@bs.module] external jordanRTCCallButton : ReactRe.reactClass = "RickyRTCCallButton.react";
[@@bs.module] [@@bs.splice] external cxRe : array string => string = "cx";
[@@bs.module] [@@bs.splice] external pureStoreBasedStateMixin : array RickyStoreRe.t => 'a =
"PureStoreBasedStateMixin";
let bumpCount a=> {
print_endline "Bumping the number!";
a+1;
};
/* refmt --in-place theFile.re */
let bumpCount a => {
print_endline "Bumping the number!";
a + 1