You want to put inline style to an element.
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 */
/* 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) { |
# 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}>" |
function timeSort(array) { | |
array.forEach(function(item) { | |
setTimeout(function() { | |
console.log(item); | |
}, item); | |
}); | |
} | |
timeSort([10,4,6,2,3,5]); |
// 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); | |
}; |
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
.
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
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
for assets too.require
./** @jsx React.DOM */ | |
'use strict'; | |
var Group = React.addons.TransitionGroup; | |
var Item = React.createClass({ | |
componentWillEnter: function(done) { | |
this.props.componentWillEnter(); | |
done(); |
Interesting part (unmounting & API) is at the end if you're not interested in the rest =).
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.
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.
Typing letters and let them fly in concurrently. This tests concurrency, coordination of an array of ch