Skip to content

Instantly share code, notes, and snippets.

View irvinebroque's full-sized avatar

Brendan Irvine-Broque irvinebroque

View GitHub Profile
@bvaughn
bvaughn / profiling-a-chrome-extension.md
Last active February 21, 2024 05:46
Profiling a custom Chrome extension

Chrome's profiler ("Performance tab) is very useful for measuring JavaScript performance, but what if you want to measure the performance of a custom extension?

For example, what if I would like to profile the following interaction:


The interaction we want to profile


import React, { Component } from 'react'
import { Block, Flex } from 'jsxstyle'
const Row = Flex
const Col = (props) => <Flex {...props} flexDirection="column"/>
var history = {
redo_list: [],
undo_list: [],
// @flow
/* eslint-disable */
declare module 'react-router' {
declare type RenderArgs = {
params: Object,
location: Location,
}
declare type RenderFn = (args: RenderArgs) => React$Element<*>
import { Match, Redirect } from 'react-router'
// With the way we use Redirect in this demo, the word "AddressBar" probably
// makes more sense!
const AddressBar = ({ url }) => (
<Redirect to={url}/>
)
class InfniteArticleHomePage extends React.Component {
@gaearon
gaearon / connect.js
Last active April 11, 2024 06:46
connect.js explained
// connect() is a function that injects Redux-related props into your component.
// You can inject data and callbacks that change that data by dispatching actions.
function connect(mapStateToProps, mapDispatchToProps) {
// It lets us inject component as the last step so people can use it as a decorator.
// Generally you don't need to worry about it.
return function (WrappedComponent) {
// It returns a component
return class extends React.Component {
render() {
return (

React-Core Meeting Notes 2015-03-20

Note: This is the first time we're sharing meeting notes publicly. The primary reason we haven't shared these is because we often mix public discussions with matters that are Facebook specific and should not be public. We're really trying to be more open about our development process and what's happening inside the project so moving forward, we'll be sharing meeting notes. While most of us do work at Facebook, we're committed to this being an open project - for now we'll filter out the private notes from the public notes. Hopefully we can make it possible for these meetings to be open to any who wish to attend.

Attendees:

  • @zpao
  • @sebmarkbage
  • @spicyj
  • @jeffmo

2015-01-29 Unofficial Relay FAQ

Compilation of questions and answers about Relay from React.js Conf.

Disclaimer: I work on Relay at Facebook. Relay is a complex system on which we're iterating aggressively. I'll do my best here to provide accurate, useful answers, but the details are subject to change. I may also be wrong. Feedback and additional questions are welcome.

What is Relay?

Relay is a new framework from Facebook that provides data-fetching functionality for React applications. It was announced at React.js Conf (January 2015).

var React = require('react');
var warning = require('react/lib/warning');
var INTERACTIVE = {
'button': true
};
var isInteractive = (tagName) => {
return INTERACTIVE[tagName.tagName];
};
.
├── actions
├── stores
├── views
│   ├── Anonymous
│   │   ├── __tests__
│   │   ├── views
│   │   │   ├── Home
│   │   │   │   ├── __tests__
│   │   │   │   └── Handler.js
function makeStyle(defaults, tagName) {
tagName = tagName || 'div';
var Style = React.createClass({
getDefaultProps: function() {
return assign({}, defaults);
},
render: function() {
var style = assign({}, this.props);
delete style.children;