Skip to content

Instantly share code, notes, and snippets.

Irae Carvalho irae

Block or report user

Report or block irae

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@irae
irae / mapDispatch_ownProps.js
Created Mar 14, 2017
I love how mapDispatchToProps avoids a bound method on render
View mapDispatch_ownProps.js
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 Aug 17, 2016
Common React Mistake: Derivative State
View common_react_mistake.jsx
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 Mar 4, 2017
Is including react-dom/server in your bundle a bad idea?
View _react-dom-server-browser.md

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 Mar 9, 2016
require('react') and Browsefiry versus CDN React sizes
View react-cdn-browserify.sh
# you might need to:
# npm install -g browserify
# npm install envify uglifyify react@0.14.7 react-dom@0.14.7
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
View flexible-router-disc.html
<!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 Aug 29, 2015
UI is blocked while any animation/transitions, taps and swipes are ignored
View radar_sent_jun_22_2015.md

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 / touch_steps.js
Created Mar 11, 2014
Touch Simulation with steps
View touch_steps.js
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 Mar 6, 2014
React + PHP perf
View app.js
/** @jsx React.DOM */
/* global cardData, CardStack */
"use_strict";
if (window.performance) {
window.performance.mark('beforeReactRender');
} else if (console && console.time) {
console.time('reactRenderTime');
}
View __MyTemplates_114bca0f494f001129103063fc737167.php
<?php
class __MyTemplates_114bca0f494f001129103063fc737167 extends Mustache_Template
{
protected $strictCallables = true;
public function renderInternal(Mustache_Context $context, $indent = '')
{
$buffer = '';
$buffer .= $indent . '<div class="test">
You can’t perform that action at this time.