Joe Critchley joecritch

With styled-components into the future

Preprocessing is dead, long live preprocessing!

This is a CFP for ReactiveConf 2017's open call for Lightning talks. If you'd like to see this talk become a reality, please ⭐ star this gist. #ReactiveConf

Backpack criteria.todo

All black, no tacky logos
Laptop sleeve
Not too officey for hiking or cycling; not too outdoorsy for commuting
Waterproofish
External water bottle pocket (negates GoRucks etc)
~20-25L
- small enough to be a personal item on a plane
- big enough for day-to-day use
Doesn't make you look like an accountant

Better Jasmine Tests With `this`

On the Refinery29 Mobile Web Team, codenamed "Bicycle", all of our unit tests are written using Jasmine, an awesome BDD library written by Pivotal Labs. We recently switched how we set up data for tests from declaring and assigning to closures, to assigning properties to each test case's this object, and we've seen some awesome benefits from doing such.

The old way

Up until recently, a typical unit test for us looked something like this:

describe('views.Card', function() {

Share Counts

I have always struggled with getting all the various share buttons from Facebook, Twitter, Google Plus, Pinterest, etc to align correctly and to not look like a tacky explosion of buttons. Seeing a number of sites rolling their own share buttons with counts, for example The Next Web I decided to look into the various APIs on how to simply return the share count.

If you want to roll up all of these into a single jQuery plugin check out Sharrre

Many of these API calls and methods are undocumented, so anticipate that they will change in the future. Also, if you are planning on rolling these out across a site I would recommend creating a simple endpoint that periodically caches results from all of the APIs so that you are not overloading the services will requests.

Twitter

	<body>
	<div id="⚛️"></div>
	<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
	<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
	<script src="https://unpkg.com/[email protected]/babel.js"></script>
	<script type="text/babel">
	ReactDOM.render(<div>Hello World!</div>, document.getElementById('⚛️'))
	</script>
	</body>

	(function() {
	// Do not use this library. This is just a fun example to prove a
	// point.

	var Bloop = window.Bloop = {};

	var mountId = 0;
	function newMountId() {
	return mountId++;
	}

	function Config() {
	this.useFoo = false;
	this.log = 'infoo;
	}


	@Inject(Config)
	class SomeService{
	constructor(config) {
	// ...

	///////////////////////
	// Example of how to use this mixin....
	// - Think of UI components that can

	define(
	['flight/lib/component', 'mixins/with_set_cache'],
	function(defineComponent, withSetCache, _) {
	return defineComponent(myComponent, withSetCache);
	function myComponent() {

	//Customise Backbone.sync to work with Titanium rather than jQuery
	Backbone.sync = (function() {
	var methodMap = {
	'create': 'POST',
	'read' : 'GET',
	'update': 'PUT',
	'delete': 'DELETE'
	};

	var xhr = Ti.Network.createHTTPClient({ timeout: 5000 });

	// from https://twitter.com/#!/LeaVerou/status/16613276313980929


	// this pattern below is common for using an incoming value otherwise using some default.

	/* Bad: */ x = x ? x : y; // simple ternary.
	// if x is truthy lets use it.

	/* Better: */ x = x \|\| y; // logical OR.
	// you could string a bunch of these easily to grab the first non-falsy value: