View a.jsx
let overlay = (
<Popover id='popover-left-0' title="Popover left">
<strong><FormattedMessage id='overlay-title' /></strong><FormattedMessage id='overlay-message' />
<OverlayTrigger trigger="hover" placement="right" overlay={overlay}>
<i className={'fa fa-question-circle-o'} aria-hidden='true'>
View info.json
"tmsId": "MV008202030000",
"rootId": "12286538",
"subType": "Feature Film",
"title": "A Beautiful Planet",
"releaseYear": 2016,
"releaseDate": "2016-04-29",
"titleLang": "en",
"descriptionLang": "en",
"entityType": "Movie",
View binary_gap.js
function solution(n) {
let size = 0
n.toString(2).replace(/1([0]+)1/g, (a, b) => {
if(b.length > size) size = b.length
return size
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);