ryankshaw

require 'net/http'
require 'uri'
require 'digest'

TEMP_DIR = '/tmp/customer_js_that_uses_require'

UNIQUE_JS_FILES = {}
def collect_js_urls
  Account.active.joins(:brand_config).find_each do |acct|
    url = acct.brand_config.try(:js_overrides)

ryankshaw

// this is just one-time setup that we'd need to do in a project.

import styleMaps from 'react-bootstrap/lib/styleMaps'

// see: https://github.com/react-bootstrap/react-bootstrap/blob/master/src/styleMaps.js#L4
styleMaps.CLASSES.button = 'Button'
styleMaps.SIZES = {
  'large': 'large',
  'small': 'small',
  'mini': 'mini'

ryankshaw

When a beginner asks you "when do I use semi-colons?" would you rather say this?

// what people who say "use semicolons!!" say
class Foo {
  prop = {
  }; // yes

ryankshaw

DAY 3 OF JOB PREP Week: 

Day 3 is for interview prep. We don’t want the students first experience having to answer technical questions to be in an interview. Throughout the course the students have been doing ‘toy problem’ type questions every morning. However, they need to be able to talk intelligently about certain aspects of programming too. Think of this day as helping students pass initial phone screens. Before you ever touch code, you need to be able to explain certain principles to someone clearly.
 
Split the students up into pairs of two. Go over this list of questions (and any other questions that you’ve been asked in a phone screen / interview or you have asked someone). Spend about 6 minutes on each question and have the students alternate who asks and answers the question. For example. Student 1 will ask ‘What is semantic HTML’ and Student 2 will answer. Then Student 2 will ask Student 1 the same question. Then, on question two, Student 2 will ask the first question. Etc. After each question, te

ryankshaw

// 'const' just prevents reassigning a new value to an identifier.
const foo = [1,2,3]

foo.push(4)
// this is perfectly valid and foo is now [1,2,3,4]

foo = "something else"
// this is a syntax error. if you're using babel transpiler, it should fail generating the file.
// However, while latest node and iojs will let you use "const", they do not throw a syntax error here
// (but also do not reassign it). So if you ran this in a node repl (without first passing it through babel) 

ryankshaw

It only means that your component is not "pure". as in, the same "state" and "props" can result in different html since render "reads data from store". I try to have as many components "pure" as possible, meaning their entire interface to the outside world is props & state--easier to reason about, cleaner, easier to test.

could you have something higher up--either a "higher order component" (if you've never heard that term, see: google.com/search?q=react+higher+order+components) or some non-component glue code--do the subscribing and pass the data you need down to you as "props".

but yeah, sometimes you gotta do what you gotta do. maybe this is that higher order component. I wouldn't have a whole lot of components doing this but if this is the one that has to, I'd have it up as high as possible in herarchy and have it do something like store.onChange(this.forceUpdate)

ryankshaw

  MyComponent = React.createClass
    # give your component a DisplayName that is equal to it's file name.
    # it is helpful so you dont just see <<anonymous>> when react prints
    # warnings in the console or <Undefined> in the react inspector.
    displayName: 'MyComponent'

    # propTypes should be the second thing, after your DisplayName
    propTypes:

    # then put the rest of the react specific properties, in this order

ryankshaw

diff --git a/public/javascripts/tinymce.editor_box.js b/public/javascripts/tinymce.editor_box.js
index dea8ef1..fa6289a 100644
--- a/public/javascripts/tinymce.editor_box.js
+++ b/public/javascripts/tinymce.editor_box.js
@@ -167,7 +167,7 @@ define([
       theme_advanced_resizing : true,
       theme_advanced_blockformats : "p,h2,h3,h4,pre",
       theme_advanced_more_colors: false,
-      extended_valid_elements : "iframe[src|width|height|name|align|style|class|sandbox]",
+      extended_valid_elements : "iframe[src|width|height|name|align|style|class|sandbox],+i[class]",

ryankshaw

Removing .pkg for people that installed it on their mac

if you installed the .pkg version of nodejs from their website, and you don't want to have to sudo when you npm install things, you can try this, it was just the first result I found from googling: http://stackoverflow.com/questions/9044788/how-do-i-uninstall-nodejs-installed-from-pkg-mac-os-x

Installing dependencies

On a mac, the way I recommend installing node is via homebrew. do what it says at http://brew.sh/ to install homebrew then do brew install node. On windows, just do whatever the nodejs website says.

Install global npm tools

once you have node running, you'll want to install the tools we use globally on your computer. to do that you'll do npm install -g grunt-cli bower yo generator-angular (the "-g" means install these npm packages globally on my system, not just in the "node_modules folder of the directory I am in)

ryankshaw

Pete (or anyone else that knows React and wants to weigh in),

I'm a huge fan of React and have been loving it thus far but I'm wondering if there is something that might make it even better. I'm wondering if you could just re-render the whole app after any javacript has run and not make the developer ever have to worry about saying "ok, now re-render".

The idea is to use something like https://github.com/btford/zone.js/ (which monkey-patches all cases of starting js execution: ( setTimeout, setInterval, requestAnimationFrame, xhr.onReadyStateChange, addEventListener, etc and lets you run something before and after) and after any chunck of javascript runs, ensure a forceUpate is called on the top-level component.

So then you wouldn't need to explicitly .setState and more of your code can be completely react-unaware and agnostic. I think this is basically what Om does. It's kind of like this example: https://gist.github.com/jlongster/3f32b2c7dce588f24c92#file-a-increment-js but rather than doin