Skip to content

Instantly share code, notes, and snippets.

View chenglou's full-sized avatar
💫

Cheng Lou chenglou

💫
View GitHub Profile
@chenglou
chenglou / fibPrimeGenerators.js
Last active February 18, 2022 04:14
JavaScript generators: fibonacci, natural numbers and sieve of Erasthosthenes for primes.
/* Infinite stream of numbers!
Format: `[number, suspendedStream]` where suspendedStream is really just a
function that, upon calling, returns another `[number, suspendedStream]`.
*/
function head(a) {
return a[0];
}
function tail(a) {
@chenglou
chenglou / smallestTemplateEngineEver.coffee
Created June 20, 2013 02:21
It actually works perfectly, can you believe it? Inspired by coffeekup.
# 21 lines, gutter at 80, for a fully functional coffeescript templater.
global.compiledHTML = ''
makeTagFunc = (tagName, isSelfClosing) ->
(args...) ->
selfEndingTag = if isSelfClosing then ' /' else ''
attrs = args.filter((i) -> typeof i is 'object').reduce(((i, j) ->
i + ("#{key}='#{val}'" for key, val of j).join ' '), '')
inner = args.filter((i) ->
typeof i != 'function' and typeof i != 'object').map((i) -> i).join ' '
global.compiledHTML += "<#{(tagName + ' ' + attrs).trim()}#{selfEndingTag}>"
@chenglou
chenglou / smartestSortEver.js
Created July 7, 2013 23:36
Based on the idea of a random person on the web, comes the best sort the world has, and will, ever know.
function timeSort(array) {
array.forEach(function(item) {
setTimeout(function() {
console.log(item);
}, item);
});
}
timeSort([10,4,6,2,3,5]);
@chenglou
chenglou / csx.js
Created July 11, 2013 04:41
React coffeescript templater
// globalize everything
for (var tag in React.DOM) {
if ({}.hasOwnProperty.call(React.DOM, tag) && tag !== 'injection') {
window[tag] = (function(tag) {
return function(attrs, rest) {
if (arguments.length === 1) {
return React.DOM[tag](null, attrs);
}
return React.DOM[tag](attrs, rest);
};

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 / gist:8701065
Last active August 29, 2015 13:55
CommonJS-style Asset Bundling

The rough underlying implementation is more or less done. Right now we're deciding betwen two forms, require('a.png') vs. requireStatic('a.png').

require('a.png')

  • Pros: more familiar. One single require for assets too.
  • Cons: Doesn't follow the CommonJS specs. Overloads require.

requireStatic('a.png')

  • Pros: isn't tied to CommonJS.
  • Cons: another thing to learn.
/** @jsx React.DOM */
'use strict';
var Group = React.addons.TransitionGroup;
var Item = React.createClass({
componentWillEnter: function(done) {
this.props.componentWillEnter();
done();
@chenglou
chenglou / gist:40b75d820123a9ed53d8
Last active March 13, 2024 12:14
Thoughts on Animation

Interesting part (unmounting & API) is at the end if you're not interested in the rest =).

Stress Tests

This animation proposal is just an attempt. In case it doesn't work out, I've gathered a few examples that can test the power of a future animation system.

  1. Parent is an infinitely spinning ball, and has a child ball that is also spinning. Clicking on the parent causes child to reverse spinning direction. This tests the ability of the animation system to compose animation, not in the sense of applying multiple interpolations to one or more variables passed onto the child (this should be trivial), but in the sense that the parent's constantly updating at the same time as the child, and has to ensure that it passes the animation commands correctly to it. This also tests that we can still intercept these animations (the clicking) and immediately change their configuration instead of queueing them.

  2. Typing letters and let them fly in concurrently. This tests concurrency, coordination of an array of ch