Skip to content

Instantly share code, notes, and snippets.

View jsdf's full-sized avatar

James Friend jsdf

388 followers · 9 following
View GitHub Profile
@jsdf
jsdf / shallowRender.js
Created September 7, 2015 06:44
React Shallow Rendering helper
import React from 'react/addons';
export default function shallowRender(element) {
const shallowRenderer = React.addons.TestUtils.createRenderer();
shallowRenderer.render(element);
return shallowRenderer.getRenderOutput();
}
@jsdf
jsdf / this.js
Created August 7, 2015 03:24
Understanding 'this' in Javascript
// A useful way of thinking about how the value of 'this' is bound in Javascript
// functions is to imagine that Function.prototype.call is being used
// implicitly at the call site to set the 'context' (the 'this' value). eg.
// assuming in each case
var o = {}
var o2 = {}
var fn = function(){}
// 1. bare function call
@jsdf
jsdf / UsernameField.js
Created August 2, 2015 22:57
Private state in React Components
let UsernameField = (() => {
const _username = Symbol();
const _handleNameChange = Symbol();
return class UsernameField extends React.Component {
state = {
[_username]: 'DefaultUser',
}
[_handleNameChange] = (e) => {
@jsdf
jsdf / hn-collapse.js
Last active August 29, 2015 14:25
hacker news collapsible comments
(function() {
// attach all comment disclosers
$('.comment').forEach(function(comment) {
var commentRoot = closest(comment, '.athing')
CommentDiscloser(commentRoot)
})
function CommentDiscloser(root) {
// initial state
var state = {open: true}
@jsdf
jsdf / coffee-react-browser-script-tag.html
Last active August 29, 2015 14:20
Run CJSX script tags in the browser
<!DOCTYPE html>
<html>
<head>
<title>CJSX in a script tag</title>
<script src="https://fb.me/react-0.13.2.js"></script>
<script type="text/javascript" src="https://wzrd.in/standalone/coffee-react-browser"></script>
<script type="text/cjsx">
# defining a component
class Clock extends React.Component
@defaultProps = interval: 2000
@jsdf
jsdf / ReactNativeRefreshableListView.js
Last active September 15, 2023 07:29
React Native pull down to refresh ListView
// for an updated version see https://github.com/jsdf/react-native-refreshable-listview
var React = require('react-native')
var {
ListView,
ActivityIndicatorIOS,
StyleSheet,
View,
Text,
} = React
@jsdf
jsdf / ReactNativeFaye.js
Created March 31, 2015 10:06
Use Faye pubsub with React Native
// make sure you npm install 'url' (the browserify port of the node api url module)
var url = require('url')
var Faye = require('faye/browser/faye-browser')
var API_URL = 'http://localhost:8000/faye'
// initialise fake window.location - same origin as api host
// required to use some faye transports which expect to deal with same-origin policy.
// url.parse return value looks kind of like window.location, if you squint just right
window.location = url.parse(API_URL)
@jsdf
jsdf / ReactNativeHTML.js
Last active July 11, 2024 00:06
Rendering HTML rich text as React Native <Text> elements
var React = require('react-native')
var {
View,
Text,
LinkingIOS,
StyleSheet,
} = React
// you might want to compile these two as standalone umd bundles
// using `browserify --standalone` and `derequire`
@jsdf
jsdf / Isomorphic React.md
Last active August 29, 2015 14:16
Isomorphic React notes

Isomorphic React

What is it

  • same code on the client and server
  • usable by non-JS clients (crawlers etc)
  • initially render app on the server, then run client side
  • 'portable' Javascript

Why do it

  • SEO
@jsdf
jsdf / node-sprockets
Created February 2, 2015 15:44
poor man's sprockets (asset digest + manifest)
#!/usr/bin/env node
var crypto = require('crypto')
var path = require('path')
var fs = require('fs')
function hash(input, algorithm, encoding) {
return crypto
.createHash(algorithm || 'md5')
.update(input, 'utf8')