Skip to content

Instantly share code, notes, and snippets.

@fkchang
fkchang / rails_apps_composer_cmd
Created April 26, 2012 23:08
rails_apps_composer command for "How to build a Rails app knowing almost nothing"
rails_apps_composer new blog -r haml rspec cucumber guard mongoid seed_database omniauth home_page home_page_users html5 simple_form users_page omniauth_email cleanup extras
@fkchang
fkchang / gist:3956417
Created October 26, 2012 01:07
rails gem file for opal_test - used in OCRuby presentation on opal 10/25/2012
# prerequisites: Ruby 1.9.3, Rails 3.2.something recent
###
### Setup rails app w/haml and opal
###
# create app
rails new opal_test
# add to Gemfile below rails
@fkchang
fkchang / 100%
Created February 28, 2013 19:03
<!DOCTYPE html>
<html>
<head>
<title>jQuery Scrollz</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
@fkchang
fkchang / gist:6639077
Created September 20, 2013 15:17
seamless bridging broken
@editor = %x|
editor = CodeMirror.fromTextArea(document.getElementById("multi_line_input"),
{mode: "ruby",
lineNumbers: true,
matchBrackets: true,
extraKeys: {
"Ctrl-Enter": function(cm) { $(".ui-dialog-buttonset").find("button:eq(0)").trigger("click"); } // submit on ctrl-enter
},
keyMap: "emacs",
theme: "default"
@fkchang
fkchang / gist:8117373
Created December 24, 2013 20:09
Link for rock scissors paper translation for std_io on irc
http://fkchang.github.io/opal-irb/index-embeddable.html#code:def%20prompt%20str%0A%20%20%60prompt(%23%7Bstr%7D)%20%7C%7C%20nil%60%0Aend%0A%0Adef%20game%0A%20%20prompt_val%20%3D%20prompt%20%22Please%20choose%20one%20of%20the%20following%20numbers%3A%5Cn1.%20Rock%5Cn2.%20Paper%5Cn3.%20Scissors%22%0A%20%20choice%20%3D%20case%20prompt_val%0A%20%20%20%20%20%20%20%20%20%20%20when%20%221%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%22rock%22%0A%20%20%20%20%20%20%20%20%20%20%20when%20%222%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%22paper%22%0A%20%20%20%20%20%20%20%20%20%20%20when%20%223%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%22scissors%22%0A%20%20%20%20%20%20%20%20%20%20%20end%0A%0A%20%20return%20unless%20choice%0A%0A%20%20ai_decision%20%3D%20%60Math.round(Math.random()%20*%202)%60%0A%0A%20%20ai_choice%20%3D%20case%20ai_decision%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20when%200%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22rock%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20when%201%0A%20%20%20%20%
@fkchang
fkchang / gist:8303383
Last active February 23, 2016 20:00
An off the top of my head idea for a high level opal framework to write web apps in. The idea is that at the level of application development, you want to stick at the level, i.e. what you see, and what it does. They way it is now, is you have to constantly do deep rabbit hole dives into markup, css, front end vs backend languages etc. The simpl…
require 'opal-tk'
app = App.new
app.main { |main|
main.vbox { |vbox|# vertical box container, auto lays out things vertically
vbox.hbox { |hbox|
hbox.header("Welcome to Opal-Tk").pack # pack means tell my parent to manage me
hbox.separator.pack
http://fkchang.github.io/opal-irb/index-embeddable.html#code:%24classes%20%3D%20%5B%5D%0A%24opal_js_object%20%3D%20Native(%60Opal%60)%20%20%20%20%23%20have%20to%20make%20this%20global%20right%20now%20coz%20not%20seen%20in%20the%20each%20closure%20w%2Fcurrent%20opal%0A%24opal_js_object.each%20%7B%7Ck%7C%0A%20%20attr%20%3D%20%24opal_js_object%5Bk%5D%0A%20%20%24classes%20%3C%3C%20attr%20if%20attr.is_a%3F(Class)%0A%20%20%7D%0A%24classes.uniq.sort_by%20%26%3Aname
source 'https://rubygems.org'
gem 'opal', :git => "git://github.com/opal/opal.git"
gem 'opal-jquery', :git => "git://github.com/opal/opal-jquery.git"
gem 'opal-browser', :git => "git://github.com/opal/opal-browser.git"
gem 'lissio', github: 'meh/lissio'
gem 'paggio', github: 'meh/paggio'
gem 'opal-rspec', :git => "git://github.com/opal/opal-rspec.git"
# extracted from the tracker_api gem
require 'rubygems'
require 'faraday'
require 'faraday_middleware'
if ARGV.size != 2
puts "usage: project_id pivotal_token"
return
end

Rubyfying Javascript: Avoiding jQuery Spaghetti

Intro

One of the joys of Opal is how it produces, better code. Opal accomplishes this in large part by addressing a number Opal JavaScript Anti Patterns, henceforth OJSAPs. In this episode we examine a real life example of how it addresses OJSAP I call “jQuery spaghetti.”

Desired Result