View index.js
import ReactDom from "react-dom"
import Progress from "react-progress-2";
ReactDom.render(<Progress.Component>, document.getElementById("progress-container"));
// render routes here.
View index.html
<div id="progress-container"></div>
<div id="app-container"></div>
View main.js
class Page1 {
componentDidMount() {
load() {;
View gist:cf740e0b3627fed377c6
import cls from "classnames";
class Grid {
render() {
return (
<div className="d-grid" ref="element">
View layout.jsx
import React from "react";
export default React.createClass({
getInitialState: function() {
return {}
render: function() {
return (
<div className="layout"></div>
View gist:3322c198b0104042ee6b
presets: ['react']
var React = require('react'),
ReactDOMServer = require('react-dom/server'),
Layout = require('../js/layout.jsx');
var layoutComponent = React.createFactory(Layout);
View blur
##Cross-browser blur-effect (Chrome, Firefox, Safari, IE10+)
In this post I will show a technique that we use to make cross-browser blur-effect. You can use this solution with any framework as it's completely library-independent and it actually uses 1 line of JS code.
With the latest versions of top notch browsers like Google Chrome, Firefox and Safari, you can always achieve blur-effect using CSS3 "filter"-property:
.cover-image {
filter: blur(12px);
View gist:630a91a5f7ab1c538961
#Sencha Touch: Avoiding memory leaks.
Dear readers, in this post I will highlight few places where people usually make mistakes, that cause memory leaks in Search Touch/ExtJS application.
### Be careful with Ext.Element.
Ext.Element has 2 "dangerous" methods: "up" and "down". The reason why they are "dangerous", is because resulting DOM-element, will be wrapped in Ext.Element instance, which will not be destroyed.
When ST/ExtJS creates new instance of Ext.Element, it "registers" that instance in a global Ext.Element.cache (Ext.elements) object. So, whenever you want to use these methods, don't forget to delete your implicitly created Ext.Element(s) from that object, to allow JS to free used memory. For instance:
Ext.define("MyComponent", {
extend: "Ext.Component",
View gist:4f80189a4554f69fea85
Potentially unhandled rejection [2] TypeError: Can't add property context, object is not extensible
at ReactCompositeComponentMixin.mountComponent (http://localhost:3000/jspm_packages/npm/react@0.13.3/lib/ReactCompositeComponent.js:60:20)
at ReactPerf.measure.wrapper [as mountComponent] (http://localhost:3000/jspm_packages/npm/react@0.13.3/lib/ReactPerf.js:27:23)
at Object.ReactReconciler.mountComponent (http://localhost:3000/jspm_packages/npm/react@0.13.3/lib/ReactReconciler.js:11:37)
at ReactCompositeComponentMixin.mountComponent (http://localhost:3000/jspm_packages/npm/react@0.13.3/lib/ReactCompositeComponent.js:99:36)
at ReactPerf.measure.wrapper [as mountComponent] (http://localhost:3000/jspm_packages/npm/react@0.13.3/lib/ReactPerf.js:27:23)
at Object.ReactReconciler.mountComponent (http://localhost:3000/jspm_packages/npm/react@0.13.3/lib/ReactReconciler.js:11:37)
at mountComponentIntoNode (http://localhost:3000/jspm_packages/npm/react@0.13.3/lib/ReactMount.js:121:34)
at R
View gist:f3ee2eb372b5049e4ec7
import React from "react";
import mui from "material-ui";
var ThemeManager = new mui.Styles.ThemeManager(),
Avatar = mui.Avatar;
var Page = React.createClass({
childContextTypes: {
muiTheme: React.PropTypes.object