Skip to content

Instantly share code, notes, and snippets.

View brentvatne's full-sized avatar
😴
☕️⚛️🏃‍♂️🐶

Brent Vatne brentvatne

😴
☕️⚛️🏃‍♂️🐶
View GitHub Profile
#import "RCTTextField.h"
@interface RCTTextField (ToolTipMenu)
- (void)tappedMenuItem:(NSString *)text;
@end
@dglazkov
dglazkov / gist:fee1dcb9690baf73dff0
Last active April 13, 2016 03:15
Multiple-actor Problem

Definition of the Multiple-actor Problem

The Multiple-actor Problem (MAP) occurs in a web application that contains multiple bits of code, each assuming that they are the only actor in the document. The problem manifests when these assumptions conflict with each other.

Some examples:

  • A web app is written in framework A, then later an analytics script B is added. A makes assumptions about lifetime of elements and handling of events. B is not aware of these assumptions and subtly violates them, causing jank (example)
  • A web app is written using framework A. Attempting to introduce a widgets built using framework B results in weird errors, because B is violating A's assumptions about control of document state (examples 1, [2](http://stackoverflow.com/questions/254
this.watchID = navigator.geolocation.watchPosition((lastPosition) => {
var native = require('NativeModules').Native;
native.locationFromLatitude(lastPosition.coords.latitude, lastPosition.coords.longitude)
});
var subscription = require('RCTDeviceEventEmitter').addListener(
'LocationInfo',
(location) => console.log(location.cityName)
);
//
// native.m
// yolo
//
// Created by Soheil Yasrebi on 4/1/15.
// Copyright (c) 2015 Facebook. All rights reserved.
//
#import "RCTBridge.h"
#import "RCTBridgeModule.h"
@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
@danharper
danharper / BorderedInput.js
Last active May 16, 2016 20:31
BorderedInput, with Material design style focus animation. Preview: https://i.imgur.com/Fek7rXF.gif
// note there may be a better way to abuse flexbox than this :)
var React = require('react-native')
var { View, TextInput } = React
var BorderedInput = React.createClass({
getInitialState() {
return { i: 0 }
},
@panurge-ws
panurge-ws / gist:525caef640784a487aa2
Last active May 20, 2016 10:38
A Videgular plugin to emulate background-size CSS property for video (see comment below).
/*
* vg-bkg-size
* A Videogular plugin to emulate background-size CSS property for video: "cover" or "contain"
*
* Use:
* <videogular vg-bkg-size="cover" center="true"></videogular>
* vg-bkg-size => "cover" or "contain"
* center => true or false
*
* Copyright (c) 2014 Panurge Web Studio
@john2x
john2x / 00_destructuring.md
Last active April 23, 2024 13:18
Clojure Destructuring Tutorial and Cheat Sheet

Clojure Destructuring Tutorial and Cheat Sheet

(Related blog post)

Simply put, destructuring in Clojure is a way extract values from a datastructure and bind them to symbols, without having to explicitly traverse the datstructure. It allows for elegant and concise Clojure code.

Vectors and Sequences

@ptaoussanis
ptaoussanis / reagent-component.cljs
Created February 3, 2014 10:49
Reagent component util
(defn component
"Experimental! A Reagent 'component' is a (fn [& [props children this]]) that:
* May have special metadata for React lifecycle methods.
* Returns either Hiccup data, or a nested (usu. post-setup) component[1].
This util makes writing Reagent components a little more convenient:
(component
:render (fn [node_ & cmpt-args]) -> Hiccup data, or nested component[1].
;; Additional methods optional:
:did-mount (fn [node])
@manikrathee
manikrathee / Intro
Last active May 17, 2020 13:22
Common UI pattern problem with a simple solution: Space elements without having an extra set of padding at the bottom of a container.
- Div has 10px padding on all sides.
- P or LI's have margin-bottom to space out the next element.
- What you're left with is a giant space at the bottom of the div from the combined properties: padding-bottom: 10px on the Div and margin-bottom: 15px on the last child element. So, instead of using :last-child to try and un-do the styles set on each element, why not set it differently in the first place?