chourobin

Bridging Native & React for iOS & Android

js -> native

• Simple Example
• Callbacks
• Promises
• Properties

native -> js

IvanSanchez

if ('serviceWorker' in navigator && !this.hasOwnProperty('ServiceWorkerGlobalScope')) {
	var ownUrl = new URL(document.currentScript.src);


	// Before the worker inits, keep tileserver URLs temporarily here
	var oldTileLayerProto = L.extend({}, L.TileLayer.prototype);

	L.TileLayer._urlsToWatch = [];
	L.TileLayer.prototype.initialize = function(url, options) {

paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

protrolium

ffmpeg

Converting Audio into Different Formats / Sample Rates

Minimal example: transcode from MP3 to WMA:
ffmpeg -i input.mp3 output.wma

You can get the list of supported formats with:
ffmpeg -formats

You can get the list of installed codecs with:

paulirish

/* bling.js */
window.$ = document.querySelector.bind(document);
window.$$ = document.querySelectorAll.bind(document);
Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); };
NodeList.prototype.__proto__ = Array.prototype;
NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); };

rsim

Get the current Unix timestamp (seconds from 1970-01-01T00:00:00Z) in SQL.

• MySQL: UNIX_TIMESTAMP()
• PostgreSQL: CAST(EXTRACT(epoch FROM NOW()) AS INT)
• MS SQL: DATEDIFF(s, '1970-01-01', GETUTCDATE())
• Oracle: (CAST(SYS_EXTRACT_UTC(SYSTIMESTAMP) AS DATE) - DATE'1970-01-01') * 86400

alexhawkins

var HashTable = function() {
  this._storage = [];
  this._count = 0;
  this._limit = 8;
}


HashTable.prototype.insert = function(key, value) {
  //create an index for our storage location by passing it through our hashing function
  var index = this.hashFunc(key, this._limit);

spoike

ReactJS Component Cheatsheet

To create a ReactComponent:

ReactComponent React.createClass(object proto)

Basic JSX example:

var TitleComponent = React.createClass({

// REQUIRED

yangshun

function parseVideo (url) {
    // - Supported YouTube URL formats:
    //   - http://www.youtube.com/watch?v=My2FRPA3Gf8
    //   - http://youtu.be/My2FRPA3Gf8
    //   - https://youtube.googleapis.com/v/My2FRPA3Gf8
    // - Supported Vimeo URL formats:
    //   - http://vimeo.com/25451551
    //   - http://player.vimeo.com/video/25451551
    // - Also supports relative URLs:
    //   - //player.vimeo.com/video/25451551

cowboy

{
  # this is a comment
  "a": "hello", 
  # this is another comment
  "b": -1, 
  "c": [
    true,
    "test",
    null
  ],