Simen Brekken simenbrekken

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {

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).

Reactjs conf 2015 Notes

react native announced
- Allows you to use react style javascript to target native ios and android, native views, live reloading
- intro pt1
- intro pt2
- facebook groups app uses react native with graphql and relay
realtime page tweaking
- rethink best practices and workflows
inmutability is a good idea

Experimental Relay Implementation

Features:

Relay.fetch(graphqlQuery) returns subscribtion that could change over time by mutation queries.
Relay.update(m: UpdateMutation) optimistically updates resource in all previous queries that contains updated resource.
Relay.update(m: DeleteMutation) optimistically deletes resource from all previous queries that contains deleted resource.
Relay.update(m: CreateMutation) pessimistically creates resource and executes again all previous queries.
All objects with id key in graphql response explained as resources. Arrays, objects without id and scalars explained as static properties.

	/**
	* Does an AJAX load of the specified URL
	*
	* @param {String} url URL to load
	* @param {Object} data Hash of data to send in querystring
	* @param {Function} callback Function to call once request returns
	*/
	function load(url, data, callback) {
	if (data) {
	var params = Object.keys(data)


	<html>
	<head>
	<title>Test</title>
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
	<script src="http://fb.me/react-0.5.1.js"></script>
	<script src="http://fb.me/JSXTransformer-0.5.1.js"></script>
	</head>

	/*

	gulpfile from one of my React applications which has a gulp --production build
	set up.

	Assumptions:

	1. All your own .js/.jsx modules are somewhere under ./src, have unique
	filenames and use Node.js-style requires WITHOUT any path information, just
	the name of another module somewhere under ./src

	The MIT License (MIT)

	Copyright (c) 2014 Tomas Kafka

	Permission is hereby granted, free of charge, to any person obtaining a copy
	of this software and associated documentation files (the "Software"), to deal
	in the Software without restriction, including without limitation the rights
	to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
	copies of the Software, and to permit persons to whom the Software is
	furnished to do so, subject to the following conditions:

	var AWS = require('aws-sdk');

	AWS.config.update({
	accessKeyId: '{AWS_KEY}',
	secretAccessKey: '{AWS_SECRET}',
	region: '{SNS_REGION}'
	});

	var sns = new AWS.SNS();

	// Have some complicated non-React widgets that manipulate DOM?
	// Do they manage a list of DOM elements? Here's how to wrap it
	// into a React component so you can "constantly rerender" it.

	// A dumb non-react widget that manually manage some DOM node that
	// represent a list of items
	function NonReactWidget(node) {
	this.node = node;
	}