davidnormo

JSX Explored

It is very common to see JSX and React together and you'd (almost) be forgiven for thinking they were part of the same library. That is, until you came to use React and found that you had to compile any JSX before being able to run your code.

JSX is completely separate to React. Take a look: https://facebook.github.io/jsx. JSX is an ECMAscript syntax extension specification. It is intended as a declarative, Domain Specific Language (DSL) that can be compiled to Javascript.

In essence, the React JSX transpiler takes this:

<MyComponent />;

davidnormo

let asAttrs = (strings, value) => {
  let attrs = [];
  for (let prop in value) {
    let val = value[prop];
    if (typeof val === 'boolean'){
      attrs.push(`${prop}` + (val ? '' : '=false'));
    } else {
      attrs.push(`${prop}="${val}"`);
    }
  }

davidnormo

/**
 * Be careful of closure behaviour, it might not give you values you expect!
 * For example when you have timeouts or event listeners. 
 */
(function(){
  var i = 0,
      arr = ['a','b','c','d'],
      doSomething = function(localKey){
        console.log('i:', i);
        console.log('localKey:', localKey);

davidnormo

var pdf = new jsPDF();
pdf.text(0, 0, 'Hello World!');
var pdfBase64 = pdf.output('datauristring');

window.plugin.email.open({
  to: ['to@email.com'],
  subject: 'New PDF!',
  body: 'Hi there, here is that new PDF you wanted!',
  isHTML: false,
  attachments: [pdfBase64]

davidnormo

#!/bin/sh
#accept stdin input
exec < /dev/tty

#prompt user
read -p "Have you prayed? " -n 1 -r

#complete on new line
echo 

davidnormo

// Media Queries in Sass 3.2
//
// These mixins make media queries a breeze with Sass.
// The media queries from mobile up until desktop all 
// trigger at different points along the way
//
// And important point to remember is that and width
// over the portrait width is considered to be part of the
// landscape width. This allows us to capture widths of devices
// that might not fit the dimensions exactly. This means the break

davidnormo

/**
 * Pixels to Twips conversion
 * @param {Int} pixels
 * @return {Int}
 * /
var pixelsToTwips = function(pixels){
        return pixels * 15;
};

/**