Skip to content

Instantly share code, notes, and snippets.

View irae's full-sized avatar

Irae Carvalho irae

118 followers · 22 following
View GitHub Profile
@irae
irae / mapDispatch_ownProps.js
Created March 14, 2017 18:20
I love how mapDispatchToProps avoids a bound method on render
const {saveProfile, deleteProfile} = require('../actions/saved-profiles');
function mapDispatchToProps(dispatch, ownProps) {
const {profile, savedId} = ownProps;
return {
saveProfile: () => {
dispatch(saveProfile(profile));
},
deleteProfile: () => {
dispatch(deleteProfile(savedId));
},
@irae
irae / common_react_mistake.jsx
Created August 17, 2016 02:10
Common React Mistake: Derivative State
var MyClassProps = React.createComponent({
propTypes: {
email: React.PropTypes.string
},
shouldComponentUpdate: function(nextProps) {
return this.props.email !== nextProps.email;
},
render: function() {
@irae
irae / _react-dom-server-browser.md
Last active March 4, 2017 18:23
Is including react-dom/server in your bundle a bad idea?

Here at work, a colleague asked if we were doing a mistake by using the ReactDOM.renderToStaticMarkup on the client side. The idea was to use that for a rich text editor that needs some raw HTML inside.

Here is how the code looks like:

import React from 'react';
import ReactDOM from 'react-dom';
import ReactDOMServer from 'react-dom/server';
// the whole class
var markupToInsert = ReactDOMServer.renderToStaticMarkup(someReactElements);
@irae
irae / react-cdn-browserify.sh
Created March 9, 2016 21:23
require('react') and Browsefiry versus CDN React sizes
# you might need to:
# npm install -g browserify
# npm install envify uglifyify [email protected] [email protected]
REACT=$(curl -L --silent https://fb.me/react-0.14.7.min.js)
REACTDOM=$(curl -L --silent https://fb.me/react-dom-0.14.7.min.js)
echo "React from CDN not gziped"
echo "$REACT $REACTDOM" | wc -c
@irae
irae / flexible-router-disc.html
Created November 7, 2015 02:42
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400|Source+Code+Pro:300,500' rel='stylesheet' type='text/css'>
<style>body,html{font-family:'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:100;position:relative;background:#6A4A3C;margin:0;padding:0;color:#fff;-webkit-animation:background 2s;animation:background 2s}body{overflow-x:hidden;width:100%}.content{-webkit-animation:content 4s;animation:content 4s}.content img{display:none}h1,h2,h3,h4,h5,h6{font-weight:200}h1{font-weight:200;font-size:2.82em;text-align:center;margin:0 auto 1em;width:600px;padding-bottom:.5em;letter-spacing:.075em;border-bottom:1px dotted rgba(255,255,255,.75);padding-top:.775em}h1,h2{box-shadow:0 11px 10px -10px rgba(0,0,0,.25)}h2{border-bottom:1px dotted rgba(255,255,255,.75);padding-bottom:.25em;padding-top:1em}.chart{margin:0 auto}.chart,.modes,.palette-wrap{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:non
@irae
irae / radar_sent_jun_22_2015.md
Last active August 29, 2015 14:23
UI is blocked while any animation/transitions, taps and swipes are ignored

UI is blocked while any animation/transitions, taps and swipes are ignored

This is present overall in many interactions on the whole OS. While some animation is happening, even if I can already see the end result or if I know where I am navigating to, and I start swiping on tapping on the screen, the OS won't recognize until animation ends. At many times this "trows away" my input.

I will describe the whole flow in the "Steps to reproduce" but this two minute video will explain even better: https://www.youtube.com/watch?t=52&v=5Ti0KdXrgSE

Although the video is comparing iOS 8 to iOS 3, this is still true and reproducible on iOS 9 beta. The video also talks about multi-tasking and switching apps, but this issue is not asking to address this particular interaction, as it's out of scope (although is fair to assume that improvements can be made as a separate issue).

I can observe two groups of OSs that I can reproduce:

@irae
irae / .gitignore
Last active August 29, 2015 13:57
*.js
react
@irae
irae / touch_steps.js
Created March 11, 2014 19:02
Touch Simulation with steps
function touchSequence(params) {
var step = 0,
config = {
target: params.target || document,
startX: params.startX || 300,
startY: params.startY || 300,
endX: params.endX || 300,
endY: params.endY || 300,
steps: params.steps || 4,
interval: params.interval || 25
@irae
irae / app.js
Created March 6, 2014 01:48
React + PHP perf
/** @jsx React.DOM */
/* global cardData, CardStack */
"use_strict";
if (window.performance) {
window.performance.mark('beforeReactRender');
} else if (console && console.time) {
console.time('reactRenderTime');
}
@irae
irae / __MyTemplates_114bca0f494f001129103063fc737167.php
Last active January 3, 2016 10:09
Output generated by mustache cache benchmark https://github.com/irae/mustache-benchmark/blob/cached/mustache-cached/mustache.php
<?php
class __MyTemplates_114bca0f494f001129103063fc737167 extends Mustache_Template
{
protected $strictCallables = true;
public function renderInternal(Mustache_Context $context, $indent = '')
{
$buffer = '';
$buffer .= $indent . '<div class="test">