Putting the fun into Funkworks

PSA: Getting Microsoft Outlook (or any other Applescript-able app)'s dictionary

2023-10-13T16:01:00.001-07:00

So you’re on a Mac and you need to use Microsoft Outlook. Maybe it’s not the best, but luckily, Outlook is scriptable via OSX automation (AppleScript/Javascript/Objective C). Unfortunately, you may have discovered that there are hardly any resources on the internet for AppleScript and Outlook. Sure, there are some examples out there (old ones) and some questions on Stack Overflow and similar sites, but you might find that they don’t cover the things you want to do. In my case, I just wanted to set the importance of an outgoing email I already constructed with AppleScript to high.

If only there were some sort of reference. Once upon a time, there was an official Microsoft Office 2004 (yes, that old) Reference, but that is nowhere to be found. You’ll find a number of posts of people failing to get that reference, in many cases reaching out to Microsoft support, who also cannot provide any answers.

This was me, for years. Every now and then, I would look again, hoping to find the right magic keywords to finally get an answer. I’ve also tried various AI chatbots, like Bard, Bing, ChatGPT, but they have all failed to give me the answer to my questions or references that still exist. Yes, even the mighty “Generative AI that will change everything” failed me here.

Luckily, today I stumbled upon this article [where is the official documentation applescript commands for powerpoint], which finally gave me what I was looking for. Gotta give credit where credit is due!

I learned that you can add the application and then get access to its AppleScript reference via the Script Editor library. Search has in the past pointed me to the Script Editor’s library, but if you open it up, you’ll find it only has entries for Apple-made software.

Let me save you a few years of looking and get you on your way to automating Outlook (or any other application not made by Apple that can be scripted)

Open Script Editor
Go to Window > Library
Click the + button on the Library
Navigate to your app (e.g., /Applications/Microsoft Outlook in my case) and Open it
Open the reference from the library

That’s it! Now you can explore the AppleScript reference for Outlook and automate your tasks with ease. I hope this saves you some time and frustration. Happy scripting!

P.S. The answer to my question is set priority to priority high that's how you set the priority to high in Microsoft Outlook!

PSA: Require login for access to uploaded files in refinerycms

2020-02-27T14:44:00.001-08:00

So you're using refinery cms and devise together in your Rails app and you have a before_filter in ApplicationController that requires login to access pages on your site, yet your uploaded resources do not require login and are publically accessible. What gives?

The simple answer is that Dragonfly, which is used by refinerycms works as Rack middleware. As such, it ignores your before_filter. So a solution is to insert warden authentication via the before_serve mechanism in Dragonfly, which I learned to do from https://github.com/markevans/dragonfly/wiki/Example:-Authentication. Conveniently, refinerycms-dragonfly, the plugin that adds Dragonfly support to refinerycms, allows one to configure a dragonfly_before_serve callback to do such a thing.
You will need 2 things

refinerycms-dragonfly version 1.0.2, which at the time of writing is not available in rubygems, You can access it via git until that happens with the following line in your Gemfile

gem 'refinerycms-dragonfly', '1.0.2', 
  git: 'https://github.com/refinery/refinerycms', 
  branch: 'master', ref: 'c3879931612d8cdceb2a635d5b9f8fcfd56e09b6'

overriding the dragonfly_before_serve in your config (for example config/initializers/refinery/resources.rb - depending on how you have Dragonfly/S3 configured)

config.dragonfly_before_serve = lambda { |job, env| 
  user = env['warden'].user :user # get devise user from scope 'user'
  throw :halt, [401, {"Content-Type" => "text/plain"}, ["Unauthorized"]] unless user
}

And that's it! Happy private file-ing.

PSA: Using Pro display monitors with the Macbook Exec, er Pro

2019-02-11T15:17:00.000-08:00

Possibly the best computing accessory I have is the wonderful Dell U3415W it's a 34 inch curved widescreen monitor that sports a whopping 3440x1440 resolution. One can lay 3 screens ( browser, editor, console side by side, which is invaluable for a Web developer. It also has crisp clean text and images. It's a joy to work with and forced me to buy a similarly spec'd monitor at home because I found I could not live without it.

Getting a new computer should also be a joyous occasion. We just got brand new Macbook ~~Execs~~ Pros** and the necessary "Eff you, Dongle!"*** to connect our various pro equipment to them. Unfortunately, to my dismay, the Macbook was unable recognize the Dell's full resolution and gave us half the resolution.

Fortunately, the aforementioned "Eff you, Dongle" supports HDMI, so we tried that. Success, except, it only supports 30HZ and 50HZ and not the full 60HZ. Hmm, we kind of like it when our fairly decked out (has to last for years) nearly $4000 laptops "Just work." That used to be Apple's motto, but has not been for a while. Ironically the 2013 Macbook Pro that is getting replaced handles this monitor fine, without a dongle. I guess that's just a feature of the Macbook Execs - we get the privilege to pay extra to get parity the old hardware. Unfortunately, it still didn't work.

After a bit of research and experimenting apparently there are 2 solutions to get this working with the Dell.

Usb-c to displayport cables are purported to work
One can turn off DP 1.2 on the Dell. This gives us the full resolution at 60HZ but loses the ability to daisy chain monitors via displayport which the Dell supports. The way you do this in the Dell U3415W is: Menu -> Input Source -> DP -> Hold check for 8 sec -> Disable.

I chose option 2 as I had the dongle already.

TLDR; If you're expensive widescreen monitor is not working on your Macbook Pro (cough) through a mini display port dongle, turning off DP 1.2 may solve this for you. Interestingly my LG 3440x1440 monitor does work - I'll have to check if it supports daisy chaining.

** Macbook Exec: is what I'm calling the Macbook Pros made starting with the touch bars. As a pro, I want the most powerful/capable/best hardware I can buy, which Apple used to provide. The latest Macbook Pros seem to be targeting NOT the pro market, but more of an "Exec" - someone who wants something expensive, thin and good looking - a prestige type item to go along the the C that's starts the initials of the job title. It's not how it works, but how it looks, and Dahling, it looks mahvelous!

(Photo from Dreamstime.com)

** Eff you, Dongle!: Is what I've named Apple's development policy for a good number of years. It started with removing the headphone jacks on iPhones, which unfortunately has contaminated the Android market now too, but goes hand in hand with the Macbook Exec philosophy. If you want to do anything with your laptop that's requires more than a keyboard, trackpad, microphone and camera you need a dongle. It's infuriating to me because it totally ignores the investment that the user put in, that already works with their older products. One is forced to buy dongles, or new equipment. It's a money grab move that ignores what the users actually want.

Real life "Eff you, Dongle!" scenarios

Pro user: I want to use my laptop to make music. I already have expensive, non USB C equipment that work fine with my old MBP.

Apple: Eff you, Dongle!

Pro User: I want to do photography on my MBP. I have expensive cameras, can plug in my cable, or SD cards into my old MBP!

Apple: Eff you, Dongle!

Pro User: I use my laptop as a workstation and am on it all day. I have high quality, often ergonomic keyboard and pointing devices as well as super large expensive monitors, that all can work without a dongle on my old MBP

Apple: Eff you, Dongle!

Pro User: I have $400 headphones and I'd like to use it with phone, and since I listen a lot I'd like to use my nice headphones and charge at the same time.

Apple: Eff you, Dongle! Or buy new headphones.

PSA - Restarting your MacbookPro camera without rebooting

2018-08-28T08:54:00.003-07:00

I've been encountering this issue lately where my camera would stop working. I regularly do a lot of video meetings, so this is a hindrance. I had been rebooting my machine, but that's a bit of a diversion, esp. when one is busy and/or has a lot of things in progress. I discovered today one only needs to kill VDCAssistant (it will restart) and your camera functionality will be restored.

Update: I found today killing it once didn't work, but killing it a 2nd time (though I had photobooth up to test the camera - that might've had something to do with it) worked. Still better than a reboot.

PSA - Fixing Omniauth Rails app with Twitter Oauth started failing - OAuth::Unauthorized 403 Forbidden Error

2018-06-18T13:49:00.002-07:00

Just a a PSA for those with Rails apps using Omniauth-Twitter who may have noticed that Sign in with Twitter authentication now fails with a 403. I found the answer via this stackoverflow post. For my app in particular it was due to Twitter's decision to only allow apps to whitelist callback URLs. If one follows many typical omniauth-twitter tutorials, one leverages the ability of the apps to override the callback URL - i.e you can test with localhost:3000 but deploy to whatever real URL and the app override's the callback URL. Per the stackoverflow post, I supplied 2 URLs, the base app URL and the /auth/twitter/callback both with https. I also noticed that the callback locking and allow application to be used with Sign in with Twitter checkboxes were unchecked and checked those.

PSA: TIL how to stop Salesforce from truncating your debug logs

2018-01-30T16:05:00.001-08:00

A tip for anyone who might need it. Those who have used the System.debug() call will have noticed that it truncates the output. A workaround is to convert the data to JSON with a JSON.serialize() call.

So instead of

System.debug(haccIdList);

Do this

System.debug(JSON.serialize(haccIdList));

Answer found here.

Additional Search words: salesforce trucates logs, full salesforce output, System.debug

UPDATED:

As of the Spring 2019 update this no longer works and the debug log is truncated. The solution is to open the raw log file to see it was original found here but is mentioned in the release notes.

RejectConf, Saving Ruby, JDD

2017-10-06T13:03:00.001-07:00

The 1st ever RejectConf

So at RubyConf 2006 in Denver Colorado, Ryan Davis organized the first RejectConf - an opportunity to present for people whose conference proposals were rejected. I think there a few more RejectConfs were organized at various Ruby related conferences. RejectConfs got renamed as Lightning Talks, becaming an official conference slot at many Ruby related conferences. In my experience, Lightning Talks an opportunity to see talks that got rejected by the conference commitee. Very often there's really good talks. Capped at a short time (generally 5 minutes), it allows one to sample many different topics. Definitely worthwhile attending one when at a conference

Reevaluating the ROI on writing proposals

I write a number of conference proposals a year. I spend a fair amount of time on writing proposals. At least an hour, frequently a good amount more - because I do want them to be accepted. I propose a number of different topics with a lot of frequency and have been doing so since 2006, but I don't really have good success ratio. (See my email screenshot below). While versions of some of the these talks do get presented at OCRuby, the local Ruby Users Group that I run, I find myself reevaluating the ROI in writing proposals. Apparently I'm not good at writing them.

The Overlying Theme - Saving Ruby and JDD

A few years ago, I realized the underlying theme of nearly all presentations I make - conference, meetup, is along the lines of "Ongoing Joy Driven Development (JDD) for someone who loves Ruby." I love to code, I love Ruby and I want to keep on doing it for a long time. To support this theme I've explored a lot of "less than mainstream" Ruby and/Ruby-esque technology to aid me in continuinge to be a "Happily employed Rubyist" indefinitely. Being a Happy Programmer is the Ruby Way. As someone who is a passionate about being a happy programmer I want to give back - spread the joy - thus ongoing efforts to do so. Part of that story is the notion - "Save Ruby" - Mainstream Ruby isn't hotbed of growth and innovation it once was. In many areas hot and up and coming areas of technology Ruby isn't applicable or even considered - that's bad for people who want to keep doing Ruby professionally. I want to help address that.
As a person of limited resources, I have to evaluate the best use my time, and I'm thinking perhaps I should blog more instead of submitting proposals. Hopefully blogging, maybe some screencasts help help me spread the word compared to all the hours that go into proposals that never get seen by many people. So I thought I'd just include my 3 proposals for RubyConf this year in their entirety, with hopes of spreading the message. Please tell if any of topics are of interest and I'll write more on them.

Proposals

Title - COMPS - The All Ruby Isomorphic Application Architecture

Abstract

Building big apps is a big problem. There's complexity on the frontend, complexity on backend, and one has to link the 2 together.
As popluar as React is, which has several comprehensive solutions for the frontend, there still no integrated front/backend framework (think Meteor) for React for JS.
COMPS - Components, Operations, Models, Policies, Stores is not only the 1st integrated front/backend architecture for React, but is also an all Ruby solution.
Build your big apps with the best that React and Rails have to offer in an integrated all Ruby architecture. For the Rubyist Joy, Productivity, Familiarity in 1 package
front backend, on front end many options flux, redux, mobx
A solution, ALl ruby
Hinging both front and back

Details

When webapps were primarily server rendered pages will small amounts of AJAX, Rails was a sublime solution. It still is. Rails is omokase, a carefully selected package that was designed to fit together, with a beautiful, programmer happiness inducing Ruby DSL. One thing that continues to bring, joy, productivity, and maintainability to Rails application is that "there's a place for everything."
Fast forward to today, where SPAs (Single Page Applications) are common place and Javascript rules the heap with a vibrantly expanding, but ever chaotic ecosystem that promises things such as Isomorphic code (running on both ends), Rails and thus Ruby is less relevant. One can integrate React.js with Ruby on Rails, but it's still largely duct taped together, there's no built integration. On top of that there 2 languates, 2 paradigms, 2 tool sets - a costly integration.
COMPS is the architecture that is offered by ruby-hyperloop, a framework that integrates React.js on the frontend with Ruby on Rails on the backend via a single Ruby DSL. Like Rails, there's a place for everything. Components deliver interactive user experiences, Operations encapsulate business logic, Models magically synchronize data between clients and servers, Policies govern authorization and Stores hold local state.
Also like Rails, it is unified in a single Ruby DSL. Ruby is used to write front end logic, backend logic, logic that is shared by both front and backend and even markup via the React.rb DSL that can be rendered on both server and client side. As a Ruby framework, the toolset is that of Ruby, so there's a single, stable toolset which Rubyists already know.
For Ruby web developers, it is a route to continued relevance and employability in a world where server rendered Ruby webapps are having less and less relevance.

Pitch

In a technology landscape where SPAs, speed, scaleability, concurrency, etc. are the hot topics, Ruby and Rails are less and less relevant. COMPS provides an all Ruby path for Ruby based web developers to stay relevant, productive, employable while continuing to enjoy the Joy of Ruby.
I am a core committer and contributor to aforementioned and related technologies and a would be evangelist for keeping Rubyist happy and future employable.

Title - Is Ruby dying? What's a Rubyist to do?

Abstract

The language we love is fading, reduced #s of: conferences, projects, commits, job positions. It's dropped out of the IEEE Spectrum top 10, and is being dropped by numerous code schools,
While reports of Ruby's demise are greatly exaggerated, where there's smoke, there's fire. What's Ruby's relevance in these hot areas in tech:

Front end web frameworks

Isomorphic code

Mobile

Scaling, speed, size, paralleism/concurrency

The typical answer is that Ruby is not. It's little known that Ruby or Ruby-esque solutions exist in these categories. There is a future off the beaten path!

Details

This talk will go over not typically known Ruby and/or Ruby-esque solutions to the tech areas in which the world at large feels Ruby has little to no relevance. The desired outcome is to educate Rubyists on paths that can lead to their future happiness and employability.

Pitch

I love Ruby the language, it's library and community. It's given me years of joyful employment and I've been trying to give back at every opportunity. While I've been trying to explore, create, spread, and evangelize the "Future of Ruby" for a while now, seeing this year that Ruby has dropped out of the IEEE Spectrum top 10 and that code schools are dropping Ruby has convince me that it is still worth trying to show the Ruby community that there is a future for Ruby and Ruby-esque solutions. Hopefully the message can be heard, else we all switch to being Javascript programmers.

Title - The Web is better in Ruby

Abstract

Look at where web tech has evolved towards.
HTML: HTML is a bad programming language, thus: erb, haml, JSX. Rails introduced partials coz there's no extract method for HTML.
CSS: SASS, LESS were invented to make CSS a real programming language: inheritance, reuse, variables, etc.
Javascript: Many made their own JS classes, then ES6 made classes official.
All 3 technologies are evolving to be OO programming languages. What if they could all be modeled by a single language. One can do all 3 as JS, but it's not a great OO language. Did you know you can already do them all as Ruby, & it's good?

Details

Web technology is a jumble of different languages that somehow manages to work together. It is unlikey that Tim Berners-Lee would have imagined how web technology would've evolved from what he initially invented.
As web programming approaches and tools have evolved they are reaching more towards becoming Object Oriented programming languages.
Markup: The web world has re-learned what the Java world learned decades ago, that XML is a bad as programming language (i.e. Ant). Libraries like erb, haml, slim etc, try to add programming to HTML, and a such are popular. Libraries like markaby, paggio, builder bring the full power of Ruby to markup, leveraging on Ruby's DSL abilities to make Ruby look something like haml or slim.
Rails added partials to solve cut and paste of HTML. If HTML were a real programming language, one could refactor.
Css: SASS and LESS were invented to make Css a real programming language. SASS brings variables, nesting, partials, imports, mixins, inheritance, operators. As such it's used very widely. It should be no surprise that SASS's creator was a Rubyist.
Javascript: Many libraries implemented classes, then ES6 made those classes official. Unfortunately the Javascript world is divided classes and Object Oriend, some love ES6 classes, others think it's the worst addition. As such, Javascript isn't a particularly good Object Oriented language.
Since the 3 main web technologies are evolving towards being Object Oriented programming languages, it would be nice to have a single language to express them. This trend has been happening in the Javascript world, where esp. the React.js folk are trying to express everything in Javascript.
However, Ruby is both a better Object Oriented language, fulling embracing the Object Oriented paradigm, and a has stronger DSL capabilities than Javascript. JSX was likely invented in part because Javascript cannot provide a DSL that looks like markup, Ruby can.
A Ruby based approach to modeling all 3 could be both more expressive and more beautiful. Similarly, Ruby being a very Object Oriented programming language, perhaps second only to Smalltalk, lends to Object Oriented solutions, not commonly done in Javascript simply because Javascript is not as Object Oriented a language.
This talk will explore how that would look and would be better and then show how the capability already exists and is being used.

Pitch

The web is better in Ruby, which should make Rubyists happier and more productive. Combined with some other technologies, an all Ruby approach could allow Ruby based web developers to stay relevant and employable as server rendered webapps become less relevant.

BJJ diary 9/12/17

2017-09-14T15:08:00.002-07:00

Class

Clock choke

Setup

On left of turtle
Left hand over, seat belt grip

Action

Right hand guides opponent's right lapel to sink left hand in deep
Right arm chicken wing opponent's OR grab opponent's left lapel w/right hand
cinch tight, walk clockwise
I found the other lapel tighter
Can't really tell if choke is in until guy taps

Turn into guard against clock choke

Setup

turtled with opponent on top, with clock choke grep

Action

turn into him to guard, or half guard
If he stays connected he gets rolled

Specific Training

Setup

One guy in turtle, one guy on back

Action

Guy on bottom tries to get to guard
Guy on top takes back or submits

Insights

Turning into guard works well

Sparring

Bobby's knee shield hard to pass, unable to get around fast enough, or get pulled back in to 1/2 guard before finishing pass
Got a feel of what electric chair feels like, able to pull leg out before too late

BJJ Diary 9/11/17

2017-09-12T13:59:00.000-07:00

Instead of just taking notes for myself, I decided to put these notes in a blog in case they are of any use to anyone else.

YIL (yesterday I learned)

Class

Gravity Throw

Setup

Left hand grips elbow
Right hand grabs same side collar

Action

Circle left
Drop, left foot can block is right foot
Right leg butterfly hook throws
Come to mount or kesa gatame

Turtle Escape 1

Setup

Opponent on top, North/South style, with seat belt grip
Stays in position

Action

Sit to guard
Head up, guard choke
- Head down gives guillotine
If can, can put fist in throat to pry head out if he doen't let go of heads

Turtle Escape 2

Setup

like above but circling to your right side

Action

Fall to left shoulder, shoulder needs to be low to have space
Get knee or foot in
Turn to guard

Sparring

Don't let heavier guard passer secure belt

Gives him grips
Makes it hard to to use legs as frames
Happened when I pulled a closer guard on Matt

Technical standup is an option to stopping guard pass

In response to above, I had a hard time keeping him at correct distance until I stood up

Protect face when going for armbar

Got backfisted in the eye by Alex when hitting the armbar
If going for opponents right arm, left hand in front of face ad right grabs his arm, if hand comes loose, left hand catches

PSA: Logitech Remotes and Cox Contour 2 boxes

2017-08-03T17:59:00.001-07:00

It took me a while to find a solution, so I thought I'd make this hopefully a little more easier to find so others in the same boat can find it. I did find the solution from this forum article. I recently upgraded from the old Cox Contour boxes to the new improved, and pretty spiffy w/voice control Cox Contour 2. The new system is good, though the experience was terrible and I eventually hope find a way to give Cox the boot for their terrible practices. I have among other universal remotes, the Logitech Harmony 650 remote and I wanted to set it up to be able to control the cable box/DVR. The model number on the box is a Cisco 9865HDC which the Logitech supported, so I plugged that in, but it didn't work. So then I tried to learn the remote keys, which the Logitech can also do, but nothing happened. From that I learned that the Cox remote works on RF - which is more efficient on the battery. I, as did some others thought that we were SOL as the Logitech is an IR universal remote, but it turns out that the Contour box can in fact be controlled by IR, but just not the generic (?) Cisco 9865HDC code. Apparently the code that works is the Comcast Xfinity XiD-P (vs the Cox XiD-P which doesn't work). Apparently Cox are using the same cable box technology.

So now I'm happily using my Logitech Harmony 650 to control my Contour 2 box. I also used my Logitech to IR program my Broadlink RM Pro (which also doesn't recognize the cable box as Cisco) so I can control it from my Echo Dot along with my TV.

Hope this helps somebody!

Search keywords (just repeated to hopefully give higher search index): Logitech, Harmony, 650, Cox Contour 2, Cisco 9856HDC, IR, RF, Universal remote

PSA: fixing nokogiri compile errors after upgrading to Sierra

2017-06-27T10:25:00.003-07:00

Hopefully bumping this up in the search to make it easier for others to find

Long story short, I had to recompile nokogiri after upgrading to Sierra and I got errors like this


warning: cast from 'unsigned char *' to 'unsigned short *' increases required alignment from 1 to 2 [-Wcast-align]

It took a while to find the right answer for my situation, to include some false starts, ultimate the advice here solved it for me.

https://stackoverflow.com/questions/39671424/gemloaderror-in-rails-application-due-to-nokogiri-gem

In short: I needed to reinstall nokogiri and link it to libxml2 in the appropriate MacOSX SDK directory.

gem install nokogiri -- --with-xml2-include=/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.12.sdk/usr/include/libxml2/ --use-system-libraries

PSA: ftp default modes, linux and OSX

2017-06-01T15:38:00.001-07:00

If you've encountered the error 500 Illegal PORT command on something that worked on OSX (i.e. development environment), but failed on Linux (staging/production environments), I may have a fix for you. Linux FTP defaults to active mode, so you need to switch to passive mode for it to work as it did in development. It would seem that FTP defaults to passive mode on OSX (might be a BSD thing). If for example you were using Ruby's Net::FTP.

Net::FTP.open(ENV['FTP_HOSTNAME']) do |ftp|
  ftp.login(ENV['FTP_USERNAME'], ENV['FTP_PASSWORD'])
  ftp.chdir('incoming')
  ftp.list('*.csv')
end

Would fail on 500 Illegal PORT command, but it's e

Net::FTP.open(ENV['FTP_HOSTNAME']) do |ftp|
  ftp.login(ENV['FTP_USERNAME'], ENV['FTP_PASSWORD'])
  ftp.chdir('incoming')
  ftp.passive = true
  ftp.list('*.csv')
end

Make the corresponding switch to passive as appropriate to your system.

Have a good day!

Opening up the node ecosystem for Ruby - http example

2017-05-27T03:26:00.003-07:00

Non browser use of npm modules from Ruby

In my last article, I teased of the capability of `require('nodejs')` to open up the entire node.js ecosystem to the Rubyist. While using npm modules from Opal in the browser via Webpack has been written about, no one has written about using npm modules from Opal on node.js.

Node module as a Javascript object

When using `require()` in node, you will get back either a Javascript object or a function. Since handling a Javascript object from Opal is the easier situation, we'll start with an example of such

Hello World with the http module

For the example, we will use the built in node module - http. The code:

http = require('http')
var port = process.env.port || 1337;
http.createServer(function(req, res) {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Hello World\n');
}).listen(port);

This example simply requires the http module and then uses http.createServer() to create an http server that returns "Hello World" on port 1337.

Compiling Ruby to Javascript

Before we get started, we'll need to transpile the Ruby code into Javascript. While one can use opal to compile and run a ruby file on node (the default runner) i.e. like this:

opal hello_world.rb

with the current Opal verision (v0.11.0.rc1), it is better to compile to Javascript 1st and then run with node for these reasons:

You get a Javascript file that you can inspect - helpful for debugging. opal hello_world.rb doesn't persist the compiled Javascript
The NODE_PATH is set and not modifiable, so you won't be able to npm install packages. I may submit a pull request to fix this in the future.
Because node is event driven, you need to to pass a -E if you DON'T want node to exit after the Javascript is evaluated. This would be the case for applications that need to stay and respond to input

To automate the process to keep the developer happy, I suggest a Rakefile. As a project setup to explore this capability, I planned to make a number of experiments, each in their own files in the src directory. My Rakefile dynamically creates a "compile and run" Rake task for every ruby file in the src directory.

require 'opal'

Dir['src/*.rb'].each { |rb_file|
  desc "Build and run #{rb_file}"
  basename = File.basename(rb_file, '.rb') 
  task basename do
    puts "Building #{basename}"
    system "opal -rconsole -Ec #{rb_file} > #{basename}.js"
    puts "\trunning"
    system 'say running'
    system "node #{basename}.js"
  end
}

I put some debugging info to know what state the process was, to include an audio clue that the web server has started "running."

Baby steps

To get started, let's require the module and examine the object. Since I require console in the opal compile line in the Rakefile, I have access to the console via $console. In Ruby (and with Opal as well), one typically uses the p() method which calls the inspect() method of the object. Being that we will deal with a plain Javascript object which doesn't have a $inspect() method like all Opal objects, we can't call that and want must use $console.log() instead.

require 'nodejs'

http = node_require('http')

$console.log http

Running that file will print out the contents of the http object, which looks like this on my system.

$ rake http_ex
Building http_ex
        running
{ IncomingMessage:
   { [Function: IncomingMessage]
     super_:
      { [Function: Readable]
        ReadableState: [Function: ReadableState],
        super_: [Object],
        _fromList: [Function: fromList] } },
  OutgoingMessage:
   { [Function: OutgoingMessage]
     super_:
      { [Function: Stream]
        super_: [Object],
        Readable: [Object],
        Writable: [Object],
        Duplex: [Object],
        Transform: [Object],
        PassThrough: [Object],
        Stream: [Circular] } },
  METHODS:
   [ 'ACL',
     'BIND',
     'CHECKOUT',
     'CONNECT',
     'COPY',
     'DELETE',
     'GET',
     'HEAD',
     'LINK',
     'LOCK',
     'M-SEARCH',
     'MERGE',
     'MKACTIVITY',
     'MKCALENDAR',
     'MKCOL',
     'MOVE',
     'NOTIFY',
     'OPTIONS',
     'PATCH',
     'POST',
     'PROPFIND',
     'PROPPATCH',
     'PURGE',
     'PUT',
     'REBIND',
     'REPORT',
     'SEARCH',
     'SUBSCRIBE',
     'TRACE',
     'UNBIND',
     'UNLINK',
     'UNLOCK',
     'UNSUBSCRIBE' ],
  Agent:
   { [Function: Agent]
     super_:
      { [Function: EventEmitter]
        EventEmitter: [Circular],
        usingDomains: false,
        defaultMaxListeners: [Getter/Setter],
        init: [Function],
        listenerCount: [Function] },
     defaultMaxSockets: Infinity },
  globalAgent:
   Agent {
     domain: null,
     _events: { free: [Function] },
     _eventsCount: 1,
     _maxListeners: undefined,
     defaultPort: 80,
     protocol: 'http:',
     options: { path: null },
     requests: {},
     sockets: {},
     freeSockets: {},
     keepAliveMsecs: 1000,
     keepAlive: false,
     maxSockets: Infinity,
     maxFreeSockets: 256 },
  ServerResponse: { [Function: ServerResponse] super_: { [Function: OutgoingMessage] super_: [Object] } },
  STATUS_CODES:
   { '100': 'Continue',
     '101': 'Switching Protocols',
     '102': 'Processing',
     '200': 'OK',
     '201': 'Created',
     '202': 'Accepted',
     '203': 'Non-Authoritative Information',
     '204': 'No Content',
     '205': 'Reset Content',
     '206': 'Partial Content',
     '207': 'Multi-Status',
     '208': 'Already Reported',
     '226': 'IM Used',
     '300': 'Multiple Choices',
     '301': 'Moved Permanently',
     '302': 'Found',
     '303': 'See Other',
     '304': 'Not Modified',
     '305': 'Use Proxy',
     '307': 'Temporary Redirect',
     '308': 'Permanent Redirect',
     '400': 'Bad Request',
     '401': 'Unauthorized',
     '402': 'Payment Required',
     '403': 'Forbidden',
     '404': 'Not Found',
     '405': 'Method Not Allowed',
     '406': 'Not Acceptable',
     '407': 'Proxy Authentication Required',
     '408': 'Request Timeout',
     '409': 'Conflict',
     '410': 'Gone',
     '411': 'Length Required',
     '412': 'Precondition Failed',
     '413': 'Payload Too Large',
     '414': 'URI Too Long',
     '415': 'Unsupported Media Type',
     '416': 'Range Not Satisfiable',
     '417': 'Expectation Failed',
     '418': 'I\'m a teapot',
     '421': 'Misdirected Request',
     '422': 'Unprocessable Entity',
     '423': 'Locked',
     '424': 'Failed Dependency',
     '425': 'Unordered Collection',
     '426': 'Upgrade Required',
     '428': 'Precondition Required',
     '429': 'Too Many Requests',
     '431': 'Request Header Fields Too Large',
     '451': 'Unavailable For Legal Reasons',
     '500': 'Internal Server Error',
     '501': 'Not Implemented',
     '502': 'Bad Gateway',
     '503': 'Service Unavailable',
     '504': 'Gateway Timeout',
     '505': 'HTTP Version Not Supported',
     '506': 'Variant Also Negotiates',
     '507': 'Insufficient Storage',
     '508': 'Loop Detected',
     '509': 'Bandwidth Limit Exceeded',
     '510': 'Not Extended',
     '511': 'Network Authentication Required' },
  _connectionListener: [Function: connectionListener],
  Server: { [Function: Server] super_: { [Function: Server] super_: [Object] } },
  createServer: [Function: createServer],
  ClientRequest: { [Function: ClientRequest] super_: { [Function: OutgoingMessage] super_: [Object] } },
  request: [Function: request],
  get: [Function: get] }

So now that we've confirmed that we have a way to require node modules into Opal, we just need to manipulate the Javascript objects. The basic techniques of accessing Javascript from Opal that we will be using have been written about here.

Simplest thing that could possibly work

To duplicate the original in the simplest way possible, we could call the original javascript via x-strings (the Opal mechanism for invoking arbitrary Javascript), like such.

require 'nodejs'

http = node_require('http')

port = 1337
`
http.createServer(function(req, res) {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Hello World\n');
}).listen(port);
`

Run the Rake task and then visit http://localhost:1337/ with your browser and you'll get back "Hello World."

Making it all Ruby

Now while that works, that's not particularly satisfying. In some cases it may be totally appropriate you invoke Javascript from Opal, but let's go beyond that and keep all the code in Ruby. We can use Opal's JS mechanism to call functions and attributes on the Javascript object without resorting to x-strings. As explained in the aforementioned document methods in Opal when compiled to Javascript are prefixed with $ to maintain a non colliding namespace w/existing methods on Javascript objects. The JS mechanism allows us to call the methods on the Javascript objects without prepending a $,

require 'nodejs'

http = node_require('http')
port = 1337

http.JS.createServer(lambda { |req, res|
                       res.JS.writeHead(200, { 'Content-Type': 'text/plain' }.to_n)
                       res.JS.end("Hello World\n")
                     }).JS.listen(port)

So now it's all Ruby, but it's is somewhat annoying. We have to use the .JS feature 4 times, and we have to call to_n() on the Hash so that res.writeHead() can handle it properly. While String, Numeric, and Array objects in Opal are implemented directly with the corresponding Javascript types, Hash requires more to support all the features of Ruby's Hash thus we need to use to_n() to convert it back to a plan Javascript objects when passing to native Javascript functions. Needing to track this level of detail feels un Ruby like. What's a solution? One option is to use Native()call to wrap the Javascript object so that we can just call methods and attributes like it was a Ruby object (also described in the aforementioned document).

require 'nodejs'
require 'native'

http = Native(node_require('http'))

port = 1337
http.createServer(lambda { |req, res|
                    opal_res = Native(res)
                    opal_res.writeHead(200, { 'Content-Type': 'text/plain' }.to_n)
                    opal_res.end("Hello World\n")
                  }).listen(port)

Wrapping Javascript code instead of calling it directly

That's somewhat better, no more uses of .JS, though we had to wrap the res object with Native() to avoid using JS on on res. We also still have to convert the headers Hash. Again, it's decidedly un Ruby like to make one have to remember when to do things and when not. Uniformity of interfaces is something that Rubyists strive towards. It'd be nicer if we didn't have to wrap or convert objects.
Let's Ruby-fy this code a bit more. Let's imagine a simpler interface. It would be nice to be able write something like this:

port = 1337

HTTP::Server.listen(port) { |req, res|
  res.writeHead(200, {'Content-Type': 'text/plain'})
  res.end "Hello World\n"
}

To implement such an interface we could do something like this

require 'nodejs'
require 'native'

module HTTP
  HTTP_JS = Native(node_require('http'))
  class Server
    def self.listen(port, &block)
      HTTP_JS.createServer(lambda { |req_js, res_js|
                             block.call(Native(req_js), Native(res_js))
                           }).listen(port)

    end
  end
end

port = 1337
HTTP::Server.listen(port) { |req, res|
  res.writeHead(200, {'Content-Type': 'text/plain'}.to_n )
  res.end "Hello World\n"
}

Taking a cue from Rack

Close, but no cigar, I still have to call a to_n() on the headers. Let's step back a bit. The problems is that we are dealing come from trying to exactly parallel the original Javascript code: exposing additional Javascript objects from our initial method call, needing converting to matching data types to pass back to Javascript, etc.
Separating boiler plate from content, what do we actually care about in a web response? Primarily just return code, headers, and body. Let's take a cue from Rack's interface which focuses just on those values.
If rewrite the HTTP::Server.listen() API to be more Rack like, it could look like this.

HTTP::Server.listen(port) { |req, res|
  [200, {'Content-Type': 'text/plain'}, "Hello World\n"]
}

So here's one way of making that happen.

require 'nodejs'
require 'native'

module HTTP
  HTTP_JS = Native(node_require('http'))
  class Server
    def self.listen(port, &block)
      HTTP_JS.createServer(lambda { |req_js, res_js|
                             req_opal = Native(req_js)
                             res_opal = Native(res_js)
                             status, headers, body = block.call(req_opal,  res_opal)
                             res_opal.writeHead(status, headers.to_n)
                             res_opal.end(body)
                           }).listen(port)

    end
  end
end

port = 1337
HTTP::Server.listen(port) { |req, res|
  [200, {'Content-Type': 'text/plain'}, "Hello World\n"]
}

Much nicer. Direct, to the point and all in Ruby. It's the Ruby and the Rails way to let us focus on the problem we want solve and to leave the boiler plate up to the system to handle.

Thus endeth the chapter

Admittedly this example is both simplistic and unrealistic. One could do better than to wrapping the `http` module to use from Opal, but it shows some mechanisms and an approach. Future articles will cover

Less simplistic/more practical examples

When node_require returns a Javascript function

Until then enjoy!

require 'nodejs' - opening the entire server side node.js to Rubyist - in Ruby

2017-05-05T15:40:00.001-07:00

I preface this with the Roderick Disclaimer (scroll to the end)

I'm going to spill the current "best kept secret in Opal." The two words

require 'nodejs'

has the ability open the entire server side Node.js ecosystem to Rubyists, in Ruby. For Rubyists, think about that.

It's a little known fact webpack with Opal has opened up the npm ecosystem to Rubyists in Ruby on the browser. This fact is known and leveraged heavily by ruby-hyperloop.io allowing one to transparently use React.js npm modules as Ruby object.

require 'nodejs' on the other hand is not documented. You'll only find out about if you know where in the opal source code to look, or if you ask the right person the right question.

I'm going to document this with a series articles showing the wrapping of a npm module to be used via Ruby DSL. I'll show techniques and approaches to enable it. Enjoy the journey.

Rubyists can now enjoy the benefits of the juggernaut Javascript phenomenon outside the browser, happily via Ruby. Npm, prepare to be assimilated!

Taking Andrzej's blogging challenge of sorts - and you should too

2017-05-05T14:36:00.002-07:00

The best tech person I follow on Snapchat is Andrzej Krzywda. His efforts to make Snapchat for programmers really changed my opinion on what Snapchat could be - that is it's own post. Long story short, Snapchat is not longer just entertainment for me. Today he snapped about blogging and programmer, and in participating in you Snap question, we discussed a number of things privately.

I fit the profile of someone who blogs, but not as frequent as I want to. On Snapchat Andrzej talked a brought up a topic that struck a strong chord with me. There's substantial knowledge out there that never goes anywhere because some one doesn't write/blog about it. In our private discussion he asked me:

how many blogposts did you write in 2017? could it be that you want to cover a topic really well and this limits you?

His question is really on the spot. I definitely want to write an article well, and usually don't have the time time get it done at that level I would like. I might start, but I don't finish. Consequently, I have a huge backlog of topics I want or wanted to write about that grows all the time. Aside from this perfectionist type issue, I believe the other part of the problem is that things I want to write about are deep. Andrezj asked me what I meant by deep, and I gave him a couple of examples topics and he was very interested in those topics. This took me back to the point I noticed in his Snap, that this knowledge, which at least is of interest to him, is going no where unless it gets persisted outside my head.

An a programmer who works with and contributes to open source, this is especially important to me. So much has been shared to me via code, blog posts, videos, etc., it's only fitting that I give back. I have the desire to do so, and hopefully have experiences worth sharing, so time to do something about it.

Take the challenge!

Another other topic from Andrzej's Snap storm, was about getting the content out there. Blogging doesn't have to a the novel level effort. He presented an anecdote about someone he worked with who would put out timely blogs before and after lunch, showing what is possible. This was revisited when Andrzej gave me this advice

open your blog editor and this there and publish :) timebox to 10 mninutes, just your toughts. won't be perfect but 15 minutes from now more people will be able to read it :)

It struck me that I should do just that. Time boxing helps w/so many types of paralysis. 10 minutes, I could afford 10 minutes. So I'll do it

Take the challenge!

So this is not the topic he was asking about, but the first post by me in accepting that challenge. If your in the same boat as me, blogs, but much less than you would like to, you should too.

Take the challenge!

The Roderick Disclaimer

I should add a "I want to get this info out there, so please excuse any mistakes made in haste" disclaimer going forward. This disclaimer needs a name. I shall call it Roderick, because I have no better name and the time box is up

2017-03-20T12:18:00.000-07:00

A Positive note - I'm on Team Hanna

This is not my usual faire, but I think in world that seems to be more and more divided and negative, a positive note is warranted. So let reaffirm my view of the future is not completely bleak. Also, I want to much deserved kudos, cuz that's just the kind of thing more people should do.

My kids' piano teacher, also my oldest sons' former classmate Hanna Eyre got onto "Team Adam" on The Voice last week.

The Blind Audition

Here's her blind audition video:

Hanna did well - 3 out of 4 judges turned around. The judges were also impressed that Hanna is only 15 years old.

So before she gets famous, let me take the opportunity to tell you a few "Things about Hanna you didn't know"

Talent

Ok, so musical talent is something you probably DID know her. Adam Levine (I realize the pic has Blake, but I can't control when the subtitles show) called her "miraculously talented" just from listening to one song. Besides singing well, Hanna also plays and teaches piano. She is a student at the Orange County School of the Arts (OCSA) - an audition based arts school where she eagerly soaking as much as the music program as she can. I remember her telling me about looking forward to composition classes and learning other instruments. So she is ever expanding here palette. Her sheer excitement over her opportunities is uplifting. She has been writing songs since she was 11, one of which won her 1st place in the Music category and 1st place overall at Mind the Gap, the 2013 TEDx Bommer Canyon competition.

Anyways, she's not just a good singer, more on this. Oh, and a reminder - only 15, she's just getting started

Smart

Aside musically talented, she's smart cookie. She was in the all the "smart kids classes" along w/my son, so if she didn't take the musical route via OCSA, I have no doubt she'd be tearing through honors and AP classes in high school, outside of her various musical pursuits.
Talented and smart? What else could you ask for?

Sweet

She and my oldest son went to school together up until high school. Before I learned how musically talented she is, I remember a sweet, petite girl was who helped my son carry back large percussion pieces (remember the petite part?) back from the bus after an away performance. I was impressed at how helpful she was at a time most kids couldn't wait to go home after a long day out. She is genuinely a sweet soul.

Gwen Stefani mentioned "sparkly" - I think that's a good word.

That Smile

Blake Shelton mentioned when she smiles "the room lights up" when she smiles, and later references her smile again "stand there and do that and I'll buy your record." Hanna smiles a lot. It is an honest, joyous smile that is pretty infectious.

Music lessons and my kids

As mentioned before, Hanna teaches my kids piano. While I may some coincidental semblance the "Asian Tiger parent", I'm interested in music lessons NOT to get them into Juilliard, NOR as typical Asian "piano and/or violin" Tiger level training, because that's something some of us do. I love music, and I want them to have the opportunity to enjoy it. I have a friend who's mother taught piano, but he didn't want to learn it. He regretted setting the foundation younger in life as he tried to learn in his adulthood. I want to put that foundation in early, while's it's easier and they have the time build that skill. But most importantly, I want them to enjoy it.

Talented teacher

While she clearly has talent as performer she is also a gifted teacher. My kids have had another teacher, but Hanna is a better fit for my musical goals. Firstly, Hanna loves music, it should be obvious, but I'll restate it. That comes through in her teaching, along with her normal "sparkly" enthusiasm. She loves music, and she wants you love music.

Secondly, she's good at teaching kids (my kids range from 6-15 a pretty wide range). To start, she has seemingly unlimited patience, at least with my kids. I'm told that might not be true for her siblings, but hey, she's human. I have recollection of less patient music teachers. Arguably anyone with longer attention spans should also benefit from her patience.She's also a kid herself, so there's a relate-ability there that maybe a 50 year old virtuoso might not have with kids. Her approach is non traditional in that she quickly makes the jump to songs the kids want to play after establishing a certain level of basics. This differs from a typical classical music based curriculum where the songs are often not what the children want to play

What she did with my kids was to find a song they liked and then teach them to play it. My kids being very into computer games picked themes to various games that Hanna never heard before. Hanna would find them on YouTube with her iPhone and after a few listens turnaround and teach them. It's impressive to see how quickly she's able to learn the song and then make a suitable level piano arrangement on the fly. Getting quickly to a song they like is a rewarding and motivating way to teach. Some of her students take the more traditional classical music approach, as I noted from classical pieces in their recitals, so she can also teach that route, if desired. I know from talking with her, her approach to teaching mirrors her own progression from classical music to the contemporary music that she loved.

I think an approach that explicitly follows the direction of "music you like" needs to be more prevalent. Like any skill, when music lessons become a chore, it's harder for most people to progress. A related anecdote, my wife, who loves music and singing, took piano lessons for several years, but pretty much forgot it all. Reason: she never learned songs she liked so she didn't stick with it. When I asked her why she didn't to go to a store like (the long defunct) Sam Goody and just buy the sheet music to songs she liked, her reply was she didn't know that was even a possibility. I'm fortunate enough that I knew at a young age, that one could just learn to play songs they liked regardless of what they were being taught, but apparently it is not common knowledge.

Deserving

So I think I've been a #TeamHanna member before there was such a thing. I've known for a long time that she would do well in whatever she pursued. she pursued. For those who don't know Hanna, if the video gives you the impression that she's awesome, know that it's true. Hard to think of someone more deserving of the success she's currently experiences. I wish her the best on the Voice and everything else she pursues. Hanna, if you read this, I hope this makes your day, because you deserve it. Keep living the dream and realize that this is the tip of the iceberg and it will all just keep going up. Don't listen to any haters that might come your way. May you inspire many other young people. Stay sparkly!

Random Aside

So I'm plenty backlogged on desired blog posts, but I just wanted to get a positive word out in a timely manner.

A clever use of social media by @24fox

2017-02-02T14:07:00.000-08:00

So I’m a 24 (the show) fan. I see this in my tweet stream:

Join the CTU — Tweet @24fox + ⏰ + #24Legacy to receive your badge! pic.twitter.com/I2ADUR4p4b
— 24: Legacy (@24fox) February 2, 2017

So of course, I’m in. I tweet (trying to be slightly clever w/my wording) and 2 min later I get my badge.

@fkchang2000 The CTU could use someone like you. Catch the series premiere of #24Legacy, February 5 on @FOXTV. ⏰ pic.twitter.com/CeDAJJx9ut
— 24: Legacy (@24fox) February 2, 2017

So I think this is brilliant.

I’m already a fan, and thus I follow @24fox.
Though I already know the new 24 reboot is airing right after Superbowl, I won’t be forgetting, make no doubt.
I get to be immersed a bit more in the 24 “fantasy”. I can get a CTU badge simply by tweeting

So of course, I do it. ROI guaranteed.

24 legacy gets advertised to my (paltry) twitter follower base, non 24 fans get some advertising that I happily buy into.
I love my badge, it’s taped on the whiteboard to my left.
Win win, I’m happy, they get more exposure
If they choose to look, they can see which one of the fanbase will respond and follow directions - include 3 specific words in their reply. This might be useful data.

Technology wise , it looks pretty simple. It's almost certainly done with a twitter bot that looks for the specific 3 words tweeted to @24fox. When it gets such a tweet, it slaps the tweeter’s avatar and user name onto a CTU badge template, and then tweets the image with a random selection of canned response.Very nice, hats of the 24 Legacy social media team

WEWLJCIO - Working Effectively with Legacy Javascript Code in Opal

2016-06-02T17:58:00.000-07:00

Background

I've been working on opal-hot-reloader, a hot reloader for Opal applications including built in react.rb support. I merged a pull request (thanks Brock!) that added hot css reloading. The code worked, but it was implemented primarily in Javascript and did not have tests. To make the code easier to read, maintain and extend, I wanted to both add tests and convert it to Ruby/Opal. In particular, I plan to extend the code to handle css served by the Ruby on Rails pipeline so I want to shape the code to be more amenable to extension.
Now if this situation sounds a bit like Working Effectively With Legacy Code by Michael Feathers, it should, and thus the title of this post. This particular situation does present a slightly different set of conditions than many refactorings, i.e.:

The desire to convert languages - Javascript to Ruby (or transpiled Ruby via Opal). The interface between those Javascript and Opal objects in the browser affects how things need to proceed.
The predefined browser API and test doubles

Hopefully, this article can bring some different insights for Opal developers.

Where to start?

Let's look at the code. An additional if clause was added to OpalHotReloader#reload() that performs the css hot reloading on the client side. The functionality is implemented in Javascript via an Opal x-string.

def reload(e)
  # original code
  reload_request = JSON.parse(`e.data`)
  if reload_request[:type] == "ruby"
    puts "Reloading ruby #{reload_request[:filename]}"
    eval reload_request[:source_code]
    if @reload_post_callback
      @reload_post_callback.call
    else
      puts "not reloading code"
    end
  end
  # the new css hot reloading code
  if reload_request[:type] == "css"
    url = reload_request[:url]
    puts "Reloading CSS: #{url}"
    # Work outsources Javascript via x-string
    %x{
      var toAppend = "t_hot_reload=" + (new Date()).getTime();
      var links = document.getElementsByTagName("link");
      for (var i = 0; i < links.length; i++) {
        var link = links[i];
        if (link.rel === "stylesheet" && link.href.indexOf(#{url}) >= 0) {
          if (link.href.indexOf("?") === -1) {
            link.href += "?" + toAppend;
          } else {
            if (link.href.indexOf("t_hot_reload") === -1) {
              link.href += "&" + toAppend;
            } else {
              link.href = link.href.replace(/t_hot_reload=\d{13}/, toAppend)
            }
          }
        }
      }
    }

  endx
end

First steps

The first thing I noticed was the formerly smallish reload() method had tripled in size and gained a new responsibilty - css hot reloading. I'll want to refactor that code out the body of the reload() method as a method of a new class,OpalHotReloader::CssReloader dedicated to just css hot reloading (SRP). We'll instantiate this class instance as@css_reloader in the initializer for OpalHotReloader and then delegate css hot reloading to that instance inOpalHotReloader::CssReloader::reload().

def reload(e)
  reload_request = JSON.parse(`e.data`)
  if reload_request[:type] == "ruby"
    puts "Reloading ruby #{reload_request[:filename]}"
    eval reload_request[:source_code]
    if @reload_post_callback
      @reload_post_callback.call
    else
      puts "not reloading code"
    end
  end
  if reload_request[:type] == "css"
    @css_reloader.reload(reload_request) # extracted method called here
  end
end

CssReloader

For our combination of Extract Method and Extract Class, we simply relocated the code to a reload() method of the new class. We don't have tests yet, so we test it manually. The code still works! Here is the code for the new class.

class OpalHotReloader
  class CssReloader

    def reload(reload_request)
      url = reload_request[:url]
      %x{
        var toAppend = "t_hot_reload=" + (new Date()).getTime();
        var links = document.getElementsByTagName("link");
        for (var i = 0; i < links.length; i++) {
          var link = links[i];
          if (link.rel === "stylesheet" && link.href.indexOf(#{url}) >= 0) {
            if (link.href.indexOf("?") === -1) {
              link.href += "?" + toAppend;
            } else {
              if (link.href.indexOf("t_hot_reload") === -1) {
                link.href += "&" + toAppend;
              } else {
                link.href = link.href.replace(/t_hot_reload=\d{13}/, toAppend)
              }
            }
          }
        }
      }
    end

  end
end

Writing tests

Now that we've verified it still works as expected. We will write some tests. We'll use opal-rspec, which is a popular choice in the opal community and my preferred test framework for Ruby. From here on, I will be referring to the tests as specs since I'm using RSpec.
Because of how we hot reload css via direct maninpulation of stylesheet links in the document, I was faced with the problem of how to set up a test. I could create stylesheet links in the actual DOM of spec runner (fairly easy to do), but I don't like the idea of calling out to methods the on the global document object. I want to be able to inject a test document for the spec, and inject the real document for the actual application. Fortunately, we can dispense with standard dependency injection (constructor, setter, interface) techniques altogether and just pass the "document" in as a parameter to the method.
Here's where it gets little tricky. To do hot css reloading we have to manipulate the browser DOM via the global documentobject. This browser interface is not under my control, so we have to abide by this interface. Because of the interface between Opal objects and Javascript objects (some details described here) we'll want to create suitable test doubles in pure Javascript. While opal-rspec gives you the full power of rspec's mock library, these test doubles are Opal objects which won't act the way the Javascript DOM objects I'm looking to mock/stub out will. We'll need to create our own method of creating these test doubles.
To create the doubles, I've created two methods:

create_link() to create the link DOM object that will get altered to facillitate the css hot reloading and
fake_links_document() a convenience method which returns both a test double for global document object, which responds to the getElementsByTagName('link') call and a test double for the link itself, that I will inspect to see whether it has been correctly altered.

def create_link( href)
  %x|
  var ss = document.createElement("link");
  ss.type = "text/css";
  ss.rel = "stylesheet";
  ss.href = #{href};
  return ss;
|
end

def fake_links_document(href)
  link = create_link(href)
  doc = `{ getElementsByTagName: function(name) { links = [ #{link}]; return links;}}`
  { link: link, document: doc}
end

To suport this new "parameter injection" we need to change the existing interface. We change the signature of theOpalHotReloard::CssReloader#reload() to take in the document

# from
def reload(reload_request) 
# to
def reload(reload_request, document)

Then we call it with the new signature.

# in OpalHotReloader#reload()
# instead of calling it this way
@css_reloader.reload(reload_request)
# we pass in the real browser document
@css_reloader.reload(reload_request, `document`)

The class at this point looks like this

class OpalHotReloader
  class CssReloader

    def reload(reload_request, document) #  pass in the "document"
      url = reload_request[:url]
      %x{
        var toAppend = "t_hot_reload=" + (new Date()).getTime();
        // invoke it here
        var links = #{document}.getElementsByTagName("link");
        for (var i = 0; i < links.length; i++) {
          var link = links[i];
          if (link.rel === "stylesheet" && link.href.indexOf(#{url}) >= 0) {
            if (link.href.indexOf("?") === -1) {
              link.href += "?" + toAppend;
            } else {
              if (link.href.indexOf("t_hot_reload") === -1) {
                link.href += "&" + toAppend;
              } else {
                link.href = link.href.replace(/t_hot_reload=\d{13}/, toAppend)
              }
            }
          }
        }
      }
    end

  end
end

We test out the new interface and it still works. Yay!

Writing specs with the new interface

Now we can write specs and inject our own test doubles for document. There are 3 cases we want to prove are handled correctly:

A plain stylesheet link where we add the hot reload argument for the first time.
Updating a link that has already been updated with a hot reload argument.
Appending an additional hot reload argument parameter to a stylesheet link that already has a parameter.

require 'native'
require 'opal_hot_reloader'
require 'opal_hot_reloader/css_reloader'
describe OpalHotReloader::CssReloader do

  def create_link( href)
    %x|
    var ss = document.createElement("link");
    ss.type = "text/css";
    ss.rel = "stylesheet";
    ss.href = #{href};
    return ss;
  |
  end

  def fake_links_document(href)
    link = create_link(href)
    doc = `{ getElementsByTagName: function(name) { links = [ #{link}]; return links;}}`
    { link: link, document: doc}
  end


  context 'Rack::Sass::Plugin' do
    it 'should add t_hot_reload to a css path' do
      css_path = 'stylesheets/base.css'
      doubles = fake_links_document(css_path)
      link = Native(doubles[:link])
      expect(link[:href]).to match /#{Regexp.escape(css_path)}$/
      subject.reload({ url: css_path}, doubles[:document])
      expect(link[:href]).to match /#{Regexp.escape(css_path)}\?t_hot_reload=\d+/
    end

    it 'should update t_hot_reload argument if there is one already' do 
      css_path = 'stylesheets/base.css?t_hot_reload=1111111111111'
      doubles = fake_links_document(css_path)
      link = Native(doubles[:link])
      expect(link[:href]).to match /#{Regexp.escape(css_path)}$/
      subject.reload({ url: css_path}, doubles[:document])
      expect(link[:href]).to match /#{Regexp.escape('stylesheets/base.css?t_hot_reload=')}(\d)+/
      expect($1).to_not eq '1111111111111'
    end

    it 'should append t_hot_reload if there are existing arguments' do
      css_path = 'stylesheets/base.css?some-arg=1'
      doubles = fake_links_document(css_path)
      link = Native(doubles[:link])
      expect(link[:href]).to match /#{Regexp.escape(css_path)}$/
      subject.reload({ url: css_path}, doubles[:document])
      expect(link[:href]).to match /#{Regexp.escape(css_path)}\&t_hot_reload=(\d)+/
    end
  end

end

Specs pass - Safe to refactor

Now that we have test coverage for the 3 cases, we can now rewrite the reload() method in Ruby/Opal. The safety net of the newly writen specs will ensure that we do it correctly. For development, it will be handy to have both versions code side by side both for coding and testing. I did a little trick of having Javascript and Ruby versions of reload() and then having the reload() call either of those as needed. The code looked like this.

require 'native'
class OpalHotReloader
  class CssReloader

    def reload(reload_request, document)
      # currently using the Ruby version
      reload_ruby(reload_request, document)
      # reload_js(reload_request, document)
    end

    def reload_ruby(reload_request, document)
      url = reload_request[:url]
      puts "Reloading CSS: #{url}"
      to_append = "t_hot_reload=#{Time.now.to_i}"
      links = Native(`document.getElementsByTagName("link")`)
      (0..links.length-1).each { |i|
        link = links[i]
        if link.rel == 'stylesheet' && link.href.index(url)
          if  link.href !~ /\?/
            link.href += "?#{to_append}"
          else
            if link.href !~ /t_hot_reload/
              link.href += "&#{to_append}"
            else
              link.href = link.href.sub(/t_hot_reload=\d{13}/, to_append)
            end
          end
        end
      }
    end

    def reload_js(reload_request, document)
      url = reload_request[:url]
      %x{
        var toAppend = "t_hot_reload=" + (new Date()).getTime();
        var links = #{document}.getElementsByTagName("link");
        for (var i = 0; i < links.length; i++) {
          var link = links[i];
          if (link.rel === "stylesheet" && link.href.indexOf(#{url}) >= 0) {
            if (link.href.indexOf("?") === -1) {
              link.href += "?" + toAppend;
            } else {
              if (link.href.indexOf("t_hot_reload") === -1) {
                link.href += "&" + toAppend;
              } else {
                link.href = link.href.replace(/t_hot_reload=\d{13}/, toAppend)
              }
            }
          }
        }
      }
    end

  end
end

We implement the Ruby version, a line by line translation, and the specs pass. Now that the Ruby version works, we don't need the Javascript version. We can remove the unnecessary code.

require 'native'
class OpalHotReloader
  class CssReloader

    def reload(reload_request, document)
      url = reload_request[:url]
      puts "Reloading CSS: #{url}"
      to_append = "t_hot_reload=#{Time.now.to_i}"
      links = Native(`document.getElementsByTagName("link")`)
      (0..links.length-1).each { |i|
        link = links[i]
        if link.rel == 'stylesheet' && link.href.index(url)
          if  link.href !~ /\?/
            link.href += "?#{to_append}"
          else
            if link.href !~ /t_hot_reload/
              link.href += "&#{to_append}"
            else
              link.href = link.href.sub(/t_hot_reload=\d{13}/, to_append)
            end
          end
        end
      }
    end


  end
end

Now I'm ready to be able to extend this class to support css from Rails' asset pipeline!

Thanks to Scott Smith for proofreading this.

Getting started with react.rb and Ruby on Rails

2016-01-25T11:29:00.000-08:00

React.js was the hottest Javascript framework of 2015. The reactjs team brought this goodness to Ruby on Rails via the react-rails gem. From its project page, React-rails can:

Provide various react builds to your asset bundle
Transform .jsx in the asset pipeline
Render components into views and mount them via view helper & react_ujs
Render components server-side with prerender: true
Generate components with a Rails generator
Be extended with custom renderers, transformers and view helpers

While react-rails provides easy integration with Rails, a Rails developer cannot leverage the full benefits of React.js, particularly isomorphic/universal domain logic code and views since different languages are used on server and client sides. React.rb/reactive-ruby (react.rb from here on) addresses this by allowing one to write React components in Ruby, courtesy of Opal. Now the Rails programmer can also enjoy universal domain logic and views written in Ruby. I should note that using Opal with Rails without react.rb also enables univeral domain logic and views (via opal-haml and opal-erb).

Since I plan to write in depth about react.rb in subsequent posts, the focus of this article will be limited to just getting react.rb up and running on Rails from scratch.

Generate a rails project that uses Opal

The easiest way to create a Rails project that uses Opal is to use the --javascript=opal option. Manual instructions on how add Opal support to an existing Rails project are given on the opal-rails site. Create a new Rails project with the following command:

% rails new getting-started-react-rails --javascript=opal

Add react.rb gems to Gemfile

To use react.rb, you need to add 3 gems to your Gemfile: reactive-ruby¹, react-rails and therubyracer

gem 'reactive-ruby', '0.7.29' # nail down compatible version w/ pre 0.14 react-rails
gem 'react-rails', '1.3.2' # react.rb not compatible ith 1.4.* yet so use this one
gem 'opal-rails' # already added w/the --javascript=opal option
gem 'therubyracer', platforms: :ruby # Required for server side prerendering

Run bundle install after these have been added to your Gemfile.

Update

Since this article was written there has been Rails generator code that has been written as a standalone gem that is pending integration with react.rb gem. Some of conventions described in this article, which currently match that of existing documentation and sample Rails project in react.rb will likely be changing as part of that.

Convert application.js to application.js.rb

When using opal-rails, it is recommented² to convert the application.js file to application.js.rb. Make yours look like this:

# app/assets/javascripts/application.js.rb
require 'opal'
require 'opal_ujs'
require 'turbolinks'
require 'react'
require 'react_ujs'
require 'components' # to include isomorphic react components on the client
require_tree '.'

Setup for isomorphic³ React components

A big perk of react.js is isomorphic code (same code on server and client side), which leads to A united UI layer. As mentioned before react-rails provides server rendered react.js components, as well as other perks as detailed in this this article. This quote from the aforementioned article gives one a sense of how big a perk this is.

The Holy Grail. The united UI layer. Serve up real HTML on first page load, then kick off a client side JS app. All without duplicating a single line of UI code.

Those who have struggled with duplicated views on front and back ends, in different languages should appreciate that sentiment. To support isomorphic react.rb components you need to setup a structure for these sharedcomponents. The current convention is to make a app/views/components directory containing the components and a components.rb manifest file that will require all the react.rb components, like so:

# app/views/components.rb
require 'opal'
require 'reactive-ruby'
require_tree './components'

You may have noticed that, that the application.js.rb we created require=s this =components.rb file to compile these universal react.rb components.

Make a controller to demonstrate react components

We will be demonstrating several types of components as examples. Let's make a dedicated controller to demo these components with dedicated actions for each case.

% rails g controller home isomorphic iso_convention search_path client_only

Create your first React Component

So now that we're setup for isomorphic components, lets make our first react.rb component. We'll start with a simple "Hello World" component. This component takes a single, required param message of type String. Note, param in react.rb corresonds to prop in react.js; react.rb calls props "params" to provide a more Rails familiar API. The component renders this message param in an h1 element, and renders a button that, when clicked, calls alert() with the same message.
Put the following into this file app/views/components/hello.rb:

class Hello
  include React::Component
  required_param :what, type: String

  def message
    "Hello #{what}"
  end

  def render
    div {
      h1 { message }
      button {"Press me"}.on(:click) {alert message}
    }
  end
end

You can render the Hello component directly without needing a template file in your controller with render_component(). render_component() takes an optional (more on this later) class name of the component and any parameters you wish to pass the component. Implement the isomorphic action in the HomeController like so

class HomeController < ApplicationController
  def isomorphic
    render_component 'Hello', message: 'World'
  end
end

Start the server, then visit http://localhost:3000/home/isomorphic to view the component. By default, react.rb prerenders the component on the server (the reverse of react-rails' react_component(), but you can force Rails to NOT prerender by appending ?no_prerender=1 to the url, like so

http://localhost:3000/home/isomorphic?no_prerender=1

Let's take a quick look at the HTML returned by the server in both cases (formatted to be more human-readable)
For http://localhost:3000/home/isomorphic we see the h1 and button rendered from the server:

<div data-react-class="React.TopLevelRailsComponent"
     data-react-props="{"render_params":{"message":"World"},"component_name":"Hello","controller":"Home"}">
  <div data-reactid=".3hx9dqn6rk"
       data-react-checksum="487927662">
    <h1 data-reactid=".3hx9dqn6rk.0">Hello World</h1>
    <button data-reactid=".3hx9dqn6rk.1">Press me</button>
  </div>
</div>

For http://localhost:3000/home/isomorphic?no_prerender=1 there is no prerendering and the rendering is done by the client

<div data-react-class="React.TopLevelRailsComponent"
     data-react-props="{"render_params":{"message":"World"},"component_name":"Hello","controller":"Home"}">
</div>

Rails conventions, isomorphic (i.e. universal) components and the "default" component

In the Rails tradition of convention over configuration, you can structure/name your components to match your controllers to support a "default" component, i.e. a component you do NOT need to specify, for a controller action. To make a default component for the HomeController#iso_convention action, create the following file:

# app/views/components/home/iso_convention.rb
  module Components
    module Home
      class IsoConvention
        include React::Component

        def render
          h1 { "the message is: #{params[:message]}" }
        end
      end
    end
  end

We now call render_component() in the action, passing only the desired params in the action. render_component() will instantiate the default component.

class HomeController < ApplicationController
  def iso_convention
    render_component message: 'World'
  end
end

Browsing http://localhost:3000/home/iso_convention will render the Components::Home::IsoConvention component

The component search path

For consistency, you should stick with the Rails directory and filename conventions. There is some flexibility in where you can place components. The search path for isomorphic components in react.rb is described here: here which writes:

Changing the top level component name and search path
You can control the top level component name and search path.
You can specify the component name explicitly in the render_component method. render_component "Blatz will search the for a component class named Blatz regardless of the controller method.
Searching for components normally works like this: Given a controller named "Foo" then the component should be either in the Components::Foo module, the Components module (no controller - useful if you have just a couple of shared components) or just the outer scope (i.e. Module) which is useful for small apps.
Saying render_component "::Blatz" will only search the outer scope, while "::Foo::Blatz" will look only in the module Foo for a class named Blatz.

Exploring the component search path

Let's play around with several components that have the same class name and see how the search path resolves which component to use. Create the file below:
app/views/components/search_path.rb

  # This class departs from 1 class/file and diretory
  # structure/convention, using this to test search path

class SearchPath
  include React::Component
  def render
    h1 {"::SearchPath"}
  end
end

module Home
  class SearchPath
    include React::Component
    def render
      h1 {"Home::SearchPath"}
    end
  end
end

module Components
  class SearchPath
    include React::Component
    def render
      h2 { 'Components::SearchPath' }
    end
  end
end

module Components
  module Home
    class SearchPath
      include React::Component
      def render
        h2 { 'Components::Home::SearchPath' }
      end
    end
  end
end

To render the "default" component, we can just call render_component():

class HomeController < ApplicationController
  def search_path
    render_component
  end
end

Hitting http://localhost:3000/home/search_path the component rendered Home::SearchPath as evidenced by the text in the H1 element.
Specifying the component by unqualified class name in render_component(), yields the same result: Home::SearchPath

class HomeController < ApplicationController
  def search_path
    render_component "SearchPath"
  end
end

We can explore what will be found next the search path by changing the found component's name to SearchPath1, and then refreshing http://localhost:3000/home/search_path to see which component is found. Doing this for each found component gets the following results:

Class name changed from SearchPath	Component Rendered by search path
none	Home::SearchPath
Home::SearchPath	Components::Home::SearchPath
Components::Home::SearchPath	::SearchPath
::SearchPath	Components::SearchPath

If we rename all the SearchPath1 classes back to SearchPath, we can force the search path to find our desired component by specifying the full namespace in the render_component() call

class HomeController < ApplicationController
  def search_path
    render_component "SearchPath"
    # render_component "Components::SearchPath"
    # render_component "Components::Home::SearchPath"
    # render_component "Home::SearchPath"
    # render_component "::SearchPath"
  end
end

Directory conventions for react-rails, Opal and react.rb

The react-rails Javascript component generators create react.js components in the app/assets/javascripts/components directory. This makes sense, esp. since Rails out of the box does NOT support isomorphic code and views; hence this directoy is a logical and "Rails-like" place for Javascript to go. Similarly, if you are just using opal-rails and not not react.rb, then by convention, your Opal code will be placed under app/assets/javascripts where the asset pipeline knows how to find and transpile the Opal files to Javascript. React.rb challenges these directory conventions. As react.js is often called the V of MVC, then it makes sense for react.rb components to live under the app/views/components directory, esp. as they can also be rendered on the server. React.rb is young, and conventions may change, but at the momemnt this is the prescribed convention.
You can create react.rb components more in line with react-rails and Opal conventions by placing them somewhere under the app/assets/javascripts directory. The Opal files will be found by Rails anywhere that the asset pipeline is configured to find javascript files for both server and client rendering, but I would recommend a structure similar to how react-rails, i.e. in app/assets/javascripts/components to make them easy to find.
Let's put the "client side only" component into app/assets/javascripts. Since Opal will find the file anywhere the asset pipeline knows to look, this would be more for organizational conventions rather than a configuration necessary to make it work.

# app/assets/javascripts/components/client_only.rb
class ClientOnly
  include React::Component
  required_param :message, type: String

  def render
    h1 { "Client only: #{params[:message]}" }
  end
end

Then in the template for the client_only action , you can render the component client side via the react_component() view helper provided by react-rails. Since react.rb wraps calls to react.js, the components become react.js components.

<h1>Home#client_only</h1>
<p>Find me in app/views/home/client_only.html.erb</p>
<%= react_component 'ClientOnly', message: 'World' %>

That's all for now.

So now you have a Rails project with react.rb running with several examples of react.rb components. All of this code exists in a rails project here. This should be enough to get one started. There will be react.rb articles to follow. Enjoy react.rb and Rails!

Footnotes:

reactive-ruby will fold back into react.rb with the 0.9.0 versions (currently at 0.7.36). Plans are discussed in the react.rb roadmap

A change was made starting with Opal 0.8.*, to support ordered requires. If one wishes to continue to use application.js instead application.rb, one needs to manually load each opal file in the application.js, as below. Use of application.rb will automatically load the files in question

// application.js
//= require opal
//= require greeter
//= require_self
Opal.load('greeter'); //you have to load the Opal file
// etc.

While the pattern is that universal will be taking the place of isomorphic, I will use the term isomorphic here because the react.rb docs refer to it as isomorphic

Opal-irb upgraded to 0.8.0 opal and released as rubygems

2015-09-04T09:33:00.000-07:00

Opal-irb, which previously had to be installed as a gem on github has been released as bonafide rubygems.org gem. This means that instead of doing this:

gem 'opal-irb', github: 'fkchang/opal-irb'

You can get it from rubygems

gem 'opal-irb', '0.7.0' # for Opal 0.7.*
gem 'opal-irb', '0.8.*' # for Opal 0.8.*
gem 'opal-irb'          # for latest, 0.8.0 at time of writing

The 3 example apps have also been upgraded to opal 0.8.0 as part of this move. I've taken to using the same major/minor versions of opal to signify compatibility w/the corresponding versions of opal.

An overview of opal-irb's features

2015-08-11T16:06:00.001-07:00

I have discovered that many of the features in opal-irb are unknown to people I would've expected to have known about those features. This post is an attempt to rectify that.
My approach has 3 sections:

What opal-irb has in common with irb
How opal-irb differs from irb
Features unique to opal-irbIn Common with irb

Terminal Emulation (of sorts)

Some people might take this for granted, but irb runs in a terminal, and thus supports terminal formating among other things. Opal-irb presently uses a fork of jqconsole, which supports some level of ANSI codes display. For example, to change the default text to red (like test runners often do) in opal-irb, you can run the following:

puts "\033[31mRed Text"

You can try this from here if the embedded iframe below doesn't look right

History up down history

Like irb, opal-irb stores a history of previous statements. You can navigate this history with the up/down arrows or use the "GNU readline commands".

GNU readline commands (emacs subset)

A subset of the gnu readline manipulation is supported. I'll likely add more support over time. The currently supported bindings are:

Up/Down Arrow and ctrl-p/ctrl-n: Navigate through history
ctrl-a:                          Beginning of line
ctrl-e:                          End of line
ctrl-b:                          Back 1 character
ctrl-f:                          Forward 1 character
ctrl-d:                          Delete 1 character
ctrl-k:                          Kill to the end of the line
alt-b:                           Back 1 word
alt-f:                           Forward 1 word
alt-d:                           Delete 1 word

Autocomplete

A work-in-progress (I am presently adding auto complete to the multi-line editor); auto complete is supported. It follows the same tab completion model that irb does. It looks like this:

opal> S
STDERR          STDIN           STDOUT          ScriptError     Set
SignalException StandardError   StopIteration   String          StringIO
StringScanner   Struct          Symbol          SyntaxError     SystemCallError
SystemExit

opal> ST
STDERR STDIN  STDOUT

opal> STDI

opal> STDIN

Multi Line Input

Like irb, you can enter multi-line input. You can type multiple lines until your entry is complete. It indicates an incomplete line with leading periods:

Welcome to Opal 0.7.1
type help for assistance
opal> class Foo
...   def bar
...     :bar
...     end
...     end
 => "bar"
opal>

Different than irb

Last value returned

In irb the last value returned is stored in _ variable:

2.2.1 :001 > 2 * 3
 => 6
2.2.1 :002 > puts _
6
 => nil
2.2.1 :003 >

In opal-irb, the last value is stored as $_. This departure from irb's behavior is due to issues I had wrt binding of variables and visibility from the repl. I may revisit this again to make it match irb's behavior since I did not intend to change the behavior.

opal> 2 * 3
 => 6
opal> puts $_
6
 => nil
opal>

Help

Help in irb allows you to lookup documentation for methods via ri and rdoc docs.

2.0.0-p247 :001 > help

Enter the method name you want to look up.
You can use tab to autocomplete.
Enter a blank line to exit.

>>

Opal-irb's help shows how to operate opal-irb. The present output is below. I intend to implement help for method lookup in a different fashion.

opal> help
help:                            This text
$_                               last value returned is stored in this global
history:                         Shows history
irb_link_for history_num:        Create a link for the code in the history
ctrl-c:                          Abort prompt
ctrl-m:                          Pop up multi-line editor
ctrl-Enter:                      Submit code in multi-line editor
ctrl-l:                          Creates a link with the code you have on the current line/lines

EDITOR FUNCTIONALITY
Up/Down Arrow and ctrl-p/ctrl-n: Navigate through history
ctrl-a:                          Beginning of line
ctrl-e:                          End of line
ctrl-b:                          Back 1 character
ctrl-f:                          Forward 1 character
ctrl-d:                          Delete 1 character
ctrl-k:                          Kill to the end of the line
alt-b:                           Back 1 word
alt-f:                           Forward 1 word
alt-d:                           Delete 1 word
 => nil

Beyond irb

There are number of things that opal-irb does that irb does not:

"Live gist", create a link w/code

To be able to share the code at the prompt in opal-irb, hit ctl-l (l for link), and the link will be shown above the line in question. To get a link for any other part of the history you can simply navigate the history and then hit ctl-l on the desired code.
I like to call this feature "Live gist." Like a gist, it's shareable bit of code. Unlike a gist, it's "live code" – clicking link puts you in an environment in which you can play with the code.
This code link can be shared in real app that has opal-irb embedded. I have already used this in a production codebase to duplicate a bug condition for a coworker to debug.
The various embedded opal-irb's on this page are all done via "live gist."

Enhanced History

History Command (like shells have, bash, etc.)

You can type history at the prompt to get a listing of your history. You will get a listing of the code you've typed in including line numbers.

opal> history
1: class Foo
  def bar
    :bar
  end
end
2: f = Foo.new
3: f.bar
4: history
 => nil
opal>

Link for History

As an alternate to navigating through history and typing ctrl-l, you can generate a "live gist" with the irb_link_for command, using the history number shown by the history command. This behavior differs from jsbin, jsfiddle, etc. in that you do a bunch of experimentation and then quickly generate several "live gists" - a behavior that I think matches repl-based experimentation.

irb_link_for

Multiline edit

While opal-irb supports multi-line input in the same fashion as irb, I have to confess that I've often made typos with multi-line input. This required me to start over since there is no way edit a previous line. If you've done this, you know my pain. You have to hit ctrl-c to interrupt it and start again.
To address this, I added multi-line editor support. To invoke it, hit ctl-m (m for the multi-line editor) and a window will pop up with whatever code you had on the prompt. The editor has syntax highlighting, some level smart indenting and a WIP autocomplete functionality.
The editor can be used with all code in the history. Simply navigate back to the desired code in your history and hit ctl-m.
To run the code either hit the run it button, or the ctrl-Enter short cut. To close the window, either hit the close icon, or hit escape.

Requiring code at run time

One of the purposes for opal-irb is to be able to explore things at run-time. To help facilitate this, there are 2 commands.

require_remote

Part of opal-parser, require_remote allows you require a remote ruby file.

require_remote "

As an example, I'll require the raw form of this gist, which prints out "require_remote is cool" 10 times.

(0..10).each {|i| puts "require_remote is cool" }

view raw require_remote_is_cool.rb hosted with ❤ by GitHub

You can try this from here if the embedded iframe below doesn't look right

require_js (asynchronous require)

require_js allows you to require javascript with a URL. It is asynchronous, which when typed in by hand, is usually fine, the file will get required before your code that uses it gets done. If not hand typed, say via live-gist, you'll need to put some sort of delay. I've made a raphael based example.

does a require_js of the raphael.js lib
Adds a reanimate button (via Opal-browser's DOM DSL)
delays via a Timeout and creates an animation and bind reanimation code to the reanimate button

You can try this directly here if the embedded iframe below doesn't look right
%20%24stroke_width%2C%0A%20%20%20%20%20%20'stroke-opacity'%20%3D>%20%24stroke_opacity%7D%2C%20%0A%20%20%20%20%24duration)%0Aend%0Adef%20reset%0A%20%20%24paper.clear%0A%20%20%24circle%20%3D%20%24paper.circle(100%2C%20100%2C%2060)%0Aend" width="100%">

require_js_sync (synchronous require)

Synchronous calls are atypical with javascript api's, chrome says this is deprecated, so it might be going away in chrome any time. That being said, if you are going to script a "live gist" or similar, this may be more handing than putting in a delay
For an example, I do the same raphael example, but without the delay
You can try this directly here if the embedded iframe below doesn't look right

Say, say, say, what you want…

On osx, I make lots of use of the built-in say command. For example, I have a function that copies over the production database and loads it into a designated database. The data is not small and this can take a while, so the function lets me know what step it's doing. This allows me to do other work while it's happening. So even if my terminal window is obscured, I'll know when the job is done the moment it happens.
This might be a novelty in the browser, but I decided to implement that for opal-irb. I'll likely make it a full-fledged gem in the future.
You can try this directly here if the embedded iframe below doesn't look right. In either case, type in say_something to try it out. This is only supported by default in reasonably modern webkit browsers. Firefox supports speech but it has to be turned on. You can check for browser capability here

Examples

I have several example opal-irb pages referenced from the README on https://github.com/fkchang/opal-irb. They are:

Homebrew console example

http://fkchang.github.io/opal-irb/index-homebrew.html
This was my 1st attempt, port of a coffescript repl with hand written terminal code. It's not as full featured as the following jq-console example:

jq-console Example

http://fkchang.github.io/opal-irb/index-jq.html
This uses (a fork of) jq-console, for improved console support. Most of my development has been on a jq-console based opal-irb, though I might revisit a jq-console port because I'd like to remove the jquery dependency in opal-irb

Embedded console example

http://fkchang.github.io/opal-irb/index-embeddable.html
This example is closer to how I see opal-irb being used in real apps - where opal-irb is embedded with in the app/page itself. This example shows some nominal DOM elements, there for the purpose of providing DOM elements to manipulate with opal, and a button to show the irb panel if it's been closed. Opal-irb supports 2 ways to invoke a hidden opal-irb:

hot key
click event on a DOM element

Both are documented in the README

Embedded in opal playground

http://fkchang.github.io/opal-playground/
Opal-irb has been embedded into my fork of the opal-playground. Opal-irb is available in the RESULTS section by hitting the blue "Show Irb" button. I am hoping to take the opal-playground direction more towards opal-inspector, but there are times you want to use a REPL in addition to just editing the code, and this provides that.

And much more

I demo a good number of these opal-irb features in my RubyConf 2013 talk "Opal - A New Hope"; this may be easier to digest than the written word.
I also made a video for the in progress auto complete in the console.
This is just the beginning of much more with regard to in browser opal tools. I previewed a prototype of opal-inspector 2 years back, and I intend on bringing features previously only supported in Smalltalk and Lisp machines.

Thanks to Scott Smith for proofreading this.

Sharing executable test code with opal-playground

2015-07-18T21:48:00.001-07:00

Situation

I was reviewing a pull request from a non-colocated team mate. In discussing the pull request, I realized one of the assertions on his spec (we use rspec) didn't work exactly the way he expected. To aid in the discussion, I sent him some code via chat. Shortly thereafter, I realized I could do better than just pasting in some code.
"Do better?" you ask. What do I mean? In general, what's the problem with sending a teammate a spec via chat, email, whatever?
When the teammate receives the code, he may want to run it in order to understand it. In this case, being a spec file, he will need to paste the code into a running test system to explore how it works.
That can be a bit of a hassle, especially when using Rails where specs often do not run that fast. It's not that running them is impossible, but it may be sufficiently inconvenient that one wouldn't just immediately do it.
Here's the epiphany:
What if I could send someone specs that:

ran nearly instantenously
didn't require any setup

The remainder of this article shows you how.

Solution

Aside from the jsbin-like workspace, opal-playground has a rspec page configured to run spec tests by writing or pasting them in and executing. Now instead of sending my co-workers snippets of code, I test the spec in the Opal playground and test it. When I'm satisfied that it's doing what I want, I send the link directly to him. Here's what I originally pasted to him:
(I've embedded the actual rspec page in an iframe direct link if below iframe doesn't look right in your browser). You can vertically scroll the text pane to see the remaining rspec content.
Note that both tests pass. You can change the code and press the blue Run Code button (it will be under the "hamburger menu" in the upper right corner if the browser width is narrow enough) to run it again. Notice that the 2nd test's "it" statement says it should fail, but it passes.

How Technology Helped Solve the Original Problem

The code in these rspec pages are not the code in the PR, but rather simplified code that exercises expectations in the same or similar fashion to the code in the original PR. The problem in the original pull request contained a rspec stating that a method (in this sample's case #name) must be invoked.

it "should initialize with the given name" do
  allow_any_instance_of(User).to receive(:name)
  u = User.new
end

As you can see above, the #name method is never invoked and yet the specs still passes. So I changed the "it" comment to point this out and sent it to the teammate:

it "should fail" do
  allow_any_instance_of(   User).to receive(:name)
  u = User.new
end

Before my teammate had the time to digest the implications, he countered with a suggestion code suggestion.

try allow_any_instance_of(Kass).to receive(:stuff).with(params)

To which I replied

Why should adding with make it pass?

Following my lead, he countered with his own spec to demonstrate
(direct link if below iframe doesn't look right)
What his spec showed was that is if he added a parameter expecation, and the method expected to be called was called, but not with that parameter, the spec will fail

it "should fail" do
  allow_any_instance_of(User).to receive(:name).with('hello')
  u = User.new
  u.name
end

Soon thereafter, he reasoned about he realized I was right.

Oh… but I see that you're saying what if it's not called at all?

To confirm his understanding, I sent a spec which uses his expectation, should fail if his understanding was correct, but passed:
(direct link if below iframe doesn't look right)
The spec in question that proved my point, which was the mistake in his PR.

it "will pass if not called at all" do
  allow_any_instance_of(User).to receive(:name).with('hello')
  u = User.new
end

With that knowledge gained, my teammate was able to construct his spec in a way that tested what it was supposed to.

Summary

In doing code discussion, some tool support can be handy. Sometimes even the exact code is not enough - while it's not ambiguous to the interpreter or compiler, it's not always clear to the programmer. A key goal of Agile is to improve communication. In this case, discussing rspec specs using the rspec "worksheet" page helped a bunch.
It was:

Quick: write some, easily run without any setup
Collaborative: you can send them back and forth
Facillitated communication: my teammate quickly responded in kind
Retainable as a url: he can always go back and review the example via the url vs. digging through a large spec file to find it. While collocation is best for communication, "executable rspec gists" can help to mitigate the "distance" barrier when the teammate is remote.
While facilitated by opal, the code itself doesn't have to be client-side opal; the code discussed above was, indeed, backend code.

Other uses:

Send exercises while mentoring
Perform a code interview without needing setup.

Teaser

I plan on making some more log posts on how opal based tools can help with collaboration

Ruby-fying JavaScript - Wrapping opal-jquery

2015-06-24T20:02:00.000-07:00

In my last post about accessing JavaScript from Opal, I asserted that it is preferable to wrap JavaScript libraries in Opal; the reasons why are best shown by example.
Let's look at Opal-jquery, one of the "official Opal libraries", as a source of good concrete examples. Opal-jquery wraps jQuery with an idiomatic Ruby frontend. There are some differences from the original JavaScript API, but my opinion it that these changes are for the better.

Basic jQuery

I call the jQuery/$ function "jQuery's universal entry point." Nearly all uses of jQuery start from this function. One of the primary uses of $ is as a selector for elements. It is very typical to chain one or more actions directly from the selector, as shown here:

$('a').action()                                 // select by node type
$('#element-id').action().action2()             // select by id
$('.cssSelector').action().action2().action3()  // select by class

Interestingly, this same "universal entry point" function is also how one sets up "Document ready" actions. All of the various invocations below can be used to setup "Document ready" actions.

$(document).ready(function() {alert('document is ready')});
$('p').ready(function(){alert('fires whether or not there is p element')});
$('never-matching_selector').ready(function(){alert('still fires')});
$().ready(function() { alert('this works, but the doc says "not recommended"')});
$(function(){ alert('function called directly');});

Ruby-fying Javascript - Object oriented basic jQuery

Rather than having a function that is the universal entry point, opal-jquery assigns selector entry points to appropriate constants (classes/objects). At the top level, we call these selectors from the constants themselves.

Selectors

Element.find('#mydiv')          # top level find
Document.find('#mydiv')         # Document is a special instance of Element
Element.id('mydiv')             # find by id

I like that find() is a consistent selector. It can find from the top, and relative to an Element instance.

mydiv = Element.find '#mydiv'
h1_children_of_mydiv = mdiv.find 'h1'

Opal-jquery also implements a Ruby convention where the Element.[] method is used as a selector. This comes in handy for those who miss the terseness of $.

mydiv = Element['#mydiv']
ols = Element['ol']
help_sections = Element['.help']

Opal-jquery moves jQuery functionality from a "universal entry point" function, to appropriate constants, classes and modules. Here's a brief summary of these constants:

Element - bridged class to the jQuery object.
Document - object as constance, instance of Element, extended with selected document specific methods.
Event - class encapsulating events.
HTTP - class wrapping jQuery ajax functionality.
LocalStorage - not part of jQuery, local storage wrapper for convenience.
Kernel - extended with alert() so it's accessible everywhere, like it is in JavaScript.

Document Ready

In Opal-jQuery "Document ready" actions are setup with Document.ready?() method:

Document.ready? do
  alert "Welcome to opal-jquery!"
end

Document.ready?() employs 2 Ruby idioms:

The method name ends in a '?', which reads well to my eyes.
It takes a block, which also reads well. Opal-jquery departs from jQuery's single universal function for all of the ways to setup "Document ready" actions.

A number of the "Document ready" Javascript examples I showed above work, but don't make logical sense - i.e. calling ready() off of the results of a selector where the element is not document. In Opal-jQuery you can only set "Document ready" actions with Document.ready . I feel this expresses the intent clearly and makes for less of a violation of the Principle of Least Surprise, but not even having the option to construct semantically odd lines. The following below will not work because there is no Element#ready?()

Element.find('a').ready? { action }     # equivalent to $('a').ready(function(){action});

Blocks

As is typical with Ruby, in Opal-jquery we make use of blocks where anonymous functions are typically used in jQuery, or JavaScript in general. The examples read well.

element = Element.find '#my_element'
element.on(:click) { alert("I've been clicked") }                          # no event
element.on(:click) { |event| alert("#{evt.current_target} been clicked") } # event

Note that you can pass lambdas, methods, etc. in place of a block, similar to how one would use a named function or function stored in a variable in JavaScript.

element = Element.find '#my_element'
my_lambda = lambda { alert "separate lambda" }
element.on(:click) &my_lambda

def some_method
  alert :some_method
end
element.on(:click) &some_method

instance_method = obj.method(:an_instance_method)
element.on(:click) &instance_method

Consistency with Native

In accessing JavaScript from Opal, I showed how attributes of Native are accessed by the [] and []= methods. Element instances adhere to this convention. - Consistency is good and helps support the Principle of Least Surprise.

native = Native(`returnsJsObject`)
value = native[:attr_name]
native[:attr_name] = new_value

elt = Element.find('#anId')
value = elt[:attr_name]
elt[:attr_name] = new_value

Conclusion

For the Rubyist reader, there are advantages in wrapping jQuery in Opal-JQuery: the code reads well, expresses intent clearly, and uses conventions and idioms that a Rubyist should already be familiar with. Hopefully this brief overview gives you ideas on how one could wrap other JavaScript libraries w/idiomatic Ruby for similar benefits. In future articles we will look at more examples of Ruby-fication of jQuery's API, as well as show you some techniques used to wrap jQuery so that you might be able to apply them to wrapping other JavaScript libraries.
Thanks to Scott Smith for proofreading this and a number of the previous Opal blog posts.

Accessing Javascript from Opal

2015-06-09T18:24:00.001-07:00

So if you've decided to take the plunge and try Opal, the 1st question you might have is, "Do I lose access to all the JavaScript libraries out there?" The answer is no. Ideally you'll want Ruby wrappers that "ruby-fy" the JavaScript in question. It'll make you happier but that's not always available. A great example of a Ruby-fied wrapper is opal-jquery; this shows how the jQuery interface can be made more Ruby like.

Calling JavaScript Directly

To invoke JavaScript and store the return value in Opal, use x-strings, either via the backtick operator or the %x syntax. Some documentation here: http://opalrb.org/docs/compiled_ruby/#javascript-from-ruby

# backticks, good for 1 line
location = `window.location`

# %x for multi line, I often use | as delimeter, esp. for JavaScript
%x|
  var f = new Foo();
  f.bar
|

Interpolation

Opal uses x-strings to support interpolation just as Ruby does:

# it should be noted that prompt is already exposed in opal-browser
`prompt('what have you done since  ' + #{RUBY_RELEASE_DATE})`

Simple return values

So you can now invoke any JavaScript you want, but what about the return values? X-strings return the native types, some of which you can use and manipulate directly in Opal.
In Opal, 3 "Ruby" types get compiled to the native Javascript types but are still treated as Ruby objects by Opal. These types are

Strings (with the exception that these are treated as immutable)
Numeric
Array

See http://opalrb.org/docs/compiled_ruby/ for more details on what Opal compiles to.

# numbers
n = `2 + 2`
triple product = n * 3 # => 12

# strings
str = 'abcdef'
str[3..-1]             # => 'def'

# array
array = `[1, 2, 3]`
array.size             # => 3

In addition, true, false, and null map to true, false, and nil respectively. JavaScript that evaluates these values can be used directly in Opal.

Manipulating JavaScript objects

Manipulating native JavaScript objects is a little more cumbersome. Because of how Opal is compiled ¹, you cannot access methods and properties directly. (This, however, changes in a future version of opal ²). You can do further manipulation via x-strings if needed.

w = `window`
location = `#{w}.location`
href = `#{location}.href`

Native - Making life easier

That's pretty cumbersome. Pretty un-Ruby-like if you ask me. In the Ruby way of making the developer happy, you can use Kernel#Native() to wrap a native object for more convenient access in Opal.
Ruby implements the Uniform Access Principle. As such, you can't access the equivalent of properties on Ruby objects; rather all access is via methods even if they look like properties (due to parentheses being optional in Ruby). In JavaScript, the difference between properties and functions/methods is significant. So how would you do the different accesses in Opal if everything is a method?
In a nutshell, what Native() does is create a Ruby/Opal object with a @native instance variable wrapping the native object. It uses method_missing() to call native methods on @native, and [] and []= for reading/setting properties

obj = Native(`returnSomeObj()`) # need x-strings to get a JS object into opal
obj[:property]                  # property reader
obj[:property] = 'new value'    # property writer
obj.method                      # method call without parameters
obj.method2(1, 2)               # method call with parameters

To get a feel of accessing a property vs a method/function on a native object, play around w/this opal-irb example a bit
Let's revisit of href example using Native():

w = Native(`window`)
location = w.location
href = location.href

Much nicer, don't you agree?
It's worth noting that Native() works where methods will resolve themselves as properties if that's what they are.

w = Native(`window`) # => #
w[:location]         # property => #
w.location           # => #

Conclusion

Writing wrapper classes is useful in making the interfaces to your Javascript code more Ruby-like. Even without wrapper classes, you will find x-strings and Native() options useful. These Opal features can bring a lot of joy and productivity to the client-side Ruby developer. I'll cover wrapping Javascript in Opal classes in a future issue.
Enjoy!

Footnotes:

As indicated by http://opalrb.org/docs/compiled_ruby/#ruby-from-javascript, compiled Opal method names get a $ prepended to them to avoid conflict with JavaScript methods. As such running a method on a native object would compile to that method name prepended with a "$", which would not exist on the object.

This example ought to make it a bit clearer

This recently merged PR from Jeremy Evans into master supports a much handier way to access JavaScript functions and properties than using x-stings. With a native object, you can use object.JS to get at the JavaScript. This functionality will most likely NOT go into 0.8, but some future version, possibly 0.9. Examples:

o = `returnAnObject()`
# access properties like this
o.JS[:property]
# access functions like this
o.JS.javascriptMethod(1, 2)

Let's look at the href example I've been using with this new syntax

w = `window`
location = w.JS[:location]
href = location.JS[:href]

Ruby-fying Javascript - Avoiding jQuery Spaghetti slides

2015-05-29T10:08:00.002-07:00

Hi All:

I did a talk at OCRuby last night. It went pretty well. Here are the It was based on my blog post on the subject, so hopefully the 2 will reinforce each other I do think the missing ingredient could be been the in person explanations. If there's interested, I could probably try to record it. Let me know.

Resources:

Putting the fun into Funkworks

PSA: Getting Microsoft Outlook (or any other Applescript-able app)'s dictionary

PSA: Require login for access to uploaded files in refinerycms

PSA: Using Pro display monitors with the Macbook Exec, er Pro

PSA - Restarting your MacbookPro camera without rebooting

PSA - Fixing Omniauth Rails app with Twitter Oauth started failing - OAuth::Unauthorized 403 Forbidden Error

PSA: TIL how to stop Salesforce from truncating your debug logs

RejectConf, Saving Ruby, JDD

The 1st ever RejectConf

Reevaluating the ROI on writing proposals

The Overlying Theme - Saving Ruby and JDD

Proposals

Title - COMPS - The All Ruby Isomorphic Application Architecture

Abstract

Details

Pitch

Title - Is Ruby dying? What's a Rubyist to do?

Abstract

Details

This talk will go over not typically known Ruby and/or Ruby-esque solutions to the tech areas in which the world at large feels Ruby has little to no relevance. The desired outcome is to educate Rubyists on paths that can lead to their future happiness and employability.

Pitch

Title - The Web is better in Ruby

Abstract

Details

Pitch

The web is better in Ruby, which should make Rubyists happier and more productive. Combined with some other technologies, an all Ruby approach could allow Ruby based web developers to stay relevant and employable as server rendered webapps become less relevant.

BJJ diary 9/12/17

Class

Clock choke

Setup

Action

Turn into guard against clock choke

Setup

Action

Specific Training

Setup

Action

Insights

Sparring

BJJ Diary 9/11/17

Class

Gravity Throw

Setup

Action

Turtle Escape 1

Setup

Action

Turtle Escape 2

Setup

Action

Sparring

Don't let heavier guard passer secure belt

Technical standup is an option to stopping guard pass

Protect face when going for armbar

PSA: Logitech Remotes and Cox Contour 2 boxes

PSA: fixing nokogiri compile errors after upgrading to Sierra

PSA: ftp default modes, linux and OSX

Opening up the node ecosystem for Ruby - http example

Non browser use of npm modules from Ruby

In my last article, I teased of the capability of require('nodejs') to open up the entire node.js ecosystem to the Rubyist. While using npm modules from Opal in the browser via Webpack has been written about, no one has written about using npm modules from Opal on node.js.

Node module as a Javascript object

When using require() in node, you will get back either a Javascript object or a function. Since handling a Javascript object from Opal is the easier situation, we'll start with an example of such

Hello World with the http module

Compiling Ruby to Javascript

Baby steps

Simplest thing that could possibly work

Making it all Ruby

Wrapping Javascript code instead of calling it directly

Taking a cue from Rack

Thus endeth the chapter

require 'nodejs' - opening the entire server side node.js to Rubyist - in Ruby

Taking Andrzej's blogging challenge of sorts - and you should too

Take the challenge!

Take the challenge!

Take the challenge!

The Roderick Disclaimer

A Positive note - I'm on Team Hanna

The Blind Audition

Talent

Smart

In my last article, I teased of the capability of `require('nodejs')` to open up the entire node.js ecosystem to the Rubyist. While using npm modules from Opal in the browser via Webpack has been written about, no one has written about using npm modules from Opal on node.js.

When using `require()` in node, you will get back either a Javascript object or a function. Since handling a Javascript object from Opal is the easier situation, we'll start with an example of such

Setup for isomorphic³ React components