| export function ComponentWithMixins( ...mixins) { | |
| class MixedComponent extends React.Component { } | |
| for( let mixin of mixins) { | |
| // TODO: Would need to handle mixin collisions... | |
| for( let name of Object.keys( mixin)) { | |
| MixedComponent.prototype[ name]= mixin[ name] | |
| } | |
| } |
Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.
video::webkit-media-controls-timeline {
background-color: lime;
}
video /deep/ input[type=range] {| // ************** | |
| // framework code | |
| function sync(gen) { | |
| var iterable, resume; | |
| resume = function(err, retVal) { | |
| if (err) iterable.raise(err); | |
| iterable.next(retVal); // resume! | |
| }; |
| //If you need to spy or stub the global require function in node.js, don't try to spy on the require function itself..you aren't going //to be successful. | |
| //Instead, spy on the require.extensions object like so: | |
| var spies = {}; | |
| spies.require = sinon.spy(require.extensions, '.js'); | |
| //Then when you need to assert you can do stuff like: | |
| spies.require.firstCall.args[1].should.include("path/to/some/module"); |
| <!-- using the truncate filter --> | |
| {% for post in site.posts limit:10 %} | |
| <h2><a href="{{ post.url }}">{{ post.title }}</a></h2> | |
| <span class="post-date">{{ post.date | date: "%B %d, %Y" }}</span> | |
| {% if post.content.size > 2000 %} | |
| {{ post.content | truncatewords: 300 }} <!-- bad! content gives you rendered html and you will truncate in the middle of a node --> | |
| <a href="{{ post.url }}">read more</a> | |
| {% else %} | |
| {{ post.content }} | |
| {% endif %} |
| $sprites: sprite-map("sprites/*.png"); | |
| $sprites-retina: sprite-map("sprites-retina/*.png"); | |
| @mixin sprite-background($name) { | |
| background-image: sprite-url($sprites); | |
| background-position: sprite-position($sprites, $name); | |
| background-repeat: no-repeat; | |
| display: block; | |
| height: image-height(sprite-file($sprites, $name)); | |
| width: image-width(sprite-file($sprites, $name)); |
| /* | |
| why is it not 100% perfect? | |
| - because if you wanna override the parent's method to get the private variable and use | |
| my way to extend, you can not get the right value. in this code, a example can be found | |
| to demonstrate the right way to use extend method, in this example, is you change the 'title' | |
| variable like this way 'var title' not 'this.title', finally you just get the undefined value | |
| after invoking the getTitle on Child class instance. | |
| - any question, contact me through http://sheldonw.sinaapp.com | |
| */ |
| // http://paulirish.com/2011/requestanimationframe-for-smart-animating/ | |
| // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating | |
| // requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel | |
| // MIT license | |
| (function() { | |
| var lastTime = 0; | |
| var vendors = ['ms', 'moz', 'webkit', 'o']; |
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <title>My Web Page</title> | |
| <meta charset="utf-8"> | |
| <link href="/stylesheets/main.css" rel="stylesheet"> | |
| </head> | |
| <body> | |
| </body> | |
| </html> |
| var currentModule, defaultCompile = module.constructor.prototype._compile; | |
| module.constructor.prototype._compile = function(content, filename){ | |
| currentModule = this; | |
| try{ | |
| return defaultCompile.call(this, content, filename); | |
| } | |
| finally { | |
| currentModule = null; | |
| } | |
| }; |
