weisjohn

jumping through hoops

A wonderfully warm winter day. Everything was perfect. Lofty visions of CSS3 animations dazzled my eyes. Nay, what's this? A browser from years ago appears. What's that you say? It doesn't support keyframes? Ghast. Make an animated gif! Oh, wait, we need transparency? Make an animated png!

This is the final outcome (sans history) of half a day spent to ensure experience parity on a super old (Opera 9.8) browser that we absolutely have to support.

It took hours, and it wasn't probably worth it, but I learned so much, and in the end it works pretty well.

technique

weisjohn

Keybase proof

I hereby claim:

• I am weisjohn on github.
• I am weisjohn (https://keybase.io/weisjohn) on keybase.
• I have a public key whose fingerprint is 0D82 1A64 9177 3831 5AD6 A57A 5013 D03D 7310 E3E2

To claim this, I am signing this object:

weisjohn

/*!
 * froala_editor v2.6.1 (https://www.froala.com/wysiwyg-editor)
 * License https://froala.com/wysiwyg-editor/terms/
 * Copyright 2014-2017 Froala Labs
 */

! function(a) {
  "function" == typeof define && define.amd ? define(["jquery"], a) : "object" == typeof module && module.exports ? module.exports = function(b, c) {
    return void 0 === c && (c = "undefined" != typeof window ? require("jquery") : require("jquery")(b)), a(c)
  } : a(window.jQuery)

weisjohn

# Frontend Masters - Complete Intro to React v2 - March 20th, 2017

## JSX

 - SoC smashed together
 - `{}` - output the value of this js expression
 - `webpack --watch`
 - `npm run-script foo -- ` then after `--` is sent to command

## JSX vs. createElement

weisjohn

Frontend Masters - Complete Intro to React v2 - March 27th, 2017

Routing in React

• react-router@v4-alpha

HashRouter Configuration

• HashRouter - higher-order component
• Match elements with a component passed in via prop

weisjohn

Frontend Masters - Complete Intro to React v2 - March 13th, 2017

• updated slides http://btholt.github.io/complete-intro-to-react/all.html
• updated repo https://github.com/btholt/complete-intro-to-react/tree/start

Intro

• It is possible to learn the entire surface area of React.
• This class will teach you React + tools: webpack, babel, etc.
• Tools introduce complexity but help get around pain-points, more complex, but easier to work on

weisjohn

var gaussian = require('gaussian');

// mean is the center of the distritubion
var mean = 34.5;
var variance = 300;

var distribution = gaussian(mean, variance);

// number of samples

weisjohn

const http = require('http');
const https = require('https');

const server = http.createServer();

const host = 'example.com';

server.on('request', (req, res) => {

  // set cors on the response

weisjohn

function get(url, cb) {
    // use jQuery if you can, if not, XHR, or try to node
    if (typeof $ !== "undefined" && !!$().jquery) {
        $.ajax(url).then(function(data) {
            cb(null, data);
        }, function(j, t, e) {
            cb(e);
        });
    } else if (typeof XMLHttpRequest !== "undefined") {
        // simple XHR attempt

weisjohn

###
#Step 1 - Generate server certificates etc...  (most of this code is horribly ripped off from nodejs docs currently -> http://nodejs.org/docs/latest/api/tls.html)
###

#Assuming your starting from a clean directory

mkdir server
cd server

#generate private key