Tagged: javascript

Omniauth, Devise and Facebook Client Login Don't Play Nice

I've had to use Facebook login inside an iframe twice now. Combine Devise with omniauth and omniauth-facebook and you have a pretty great user authentication system. Now try to login via Facebook inside an iframe and nothing will happen. If you check your Javascript console you'll see a error that looks something like this:

Refused to display 'https://www.facebook.com/login.php?skip_api_login=1&api_key=asdfasdf%23_%3D_&display=page' in a frame because it set 'X-Frame-Options' to 'DENY'.

Facebook won't render their UI inside of an iframe. A lot of sites do that these days. However, you can use the Facebook Javascript client and everything will just work - sort of. Omniauth-facebook documents a Client side flow which looks like the perfect solution to our problem but as I've learned it's not rainbows and unicorns.

If you do follow the advice provided by the documentation you'll spend hours saying things to your computer that yo...

Continue Reading →

Userfly Ruined My Weekend – “jQuery(“form.ajax”).ajaxForm is not a function”

I've been a big fan of Userfly because they make usability testing easy. Their tool is really quite amazing. However, this last weekend and into today I've become less of a fan. After a late night deploy last week on a site I've been working on I noticed that none of my javascript worked. Lucky for me Firefox reports the errors. The errors were annoying things like "jQuery("form.ajax").ajaxForm is not a function". I knew for a fact that jquery.form.js was loaded. I could see the code. On occasion I've had problems with the javascript caching that Rails uses - it merges all the files together. I turned that off and it wasn't it

I could only see the error in production. In development everything worked fine. I swore a lot because that is the worst kind of error. yYou feel like you need to debug on the server or setup a staging server. Running my local box in 'production' mode didn't help. I couldn't reproduce the error until I remem...

Continue Reading →
ault is not a small tweak. It's the difference between being productive and not being productive." -- Yehuda Katz (@wycats)
  • "The fact is that the flexibiltiy we think we need, that we want - we really don't. I thi...
  • Continue Reading →

    Ember Conf 2014 Wrap Up

    Ember.js' strength as a framework is second only to its power as a community. Over the past two days at Ember Conf I've had a chance to interact with some of the top minds in the Javascript world who are shaping the future of the web. Brian Cardarella did an excellent job summarizing the mood of the conference - "Ember.js picks up where Rails left off." Years ago I remember attending my very first Mountain West Ruby conference and leaving with a similar impression. That same year we attended Rails Conf 2007 in Portland and via a serendipitious conversation with David Heinemeier Hansson I came to understand the counter-culture, rockstar, ninja facade was a carefully engineered marketing play by 37 Signals. That effort worked out very well for them. The press asked for rebels and DHH and company happily complied. I still have the image of DHH's leather jacket embroidered with a dragon emblazed on my memory. Rails was very much 37 Signals and their energy and popular...

    Continue Reading →

    Hardware Hacking with JS

    With the Cache Maker club we're always looking for ways to make it easier for kids to interact with hardware. Traditionally, interacting with hardware meant learning assembly or if you picked the right platform you could write embedded C. Today things are different.

    With Arduino we have an open source hardware platform with libraries in your favorite language. Javascript is an approachable language. Put the two together and kids can program hardware.

    That's why "Hardware Hacking with JS" with Jamison Dance (@jergason) was so awesome.

    Here's the hackpad notes

    Here's Jamison flying a parrot drone using an xbox controller via node.js:

    <...

    Continue Reading →

    Pete Hunt - Be predictable, not correct.

    Mountain West Javascript starts today. Peter Hunt, Facebook developer and contributor to reactjs.org is first up presenting "Be predictable, not correct."

    Here's my notes:

    Even better: Notes on Hackpad

    Key Value Observation (KVO)

    This is the pattern that Ember.js implements. Idea is to bind data to elements in the DOM. The problem is that we have to use units of computation that the platform gives you. This results in leaky abstractions. The developer has to hold to much information in their head and solutions become complex to implement. Can't compose using primitivies Angular uses Dirty Checking.

    NOT the simpliest way to build things.

    Reactive Design

    In a mythical javascript language we could use Javascript primitives and we would have a reactive DOM. However, Javascript is not reactive. We do need to build some layer of abstraction. Reactjs built a reactive DOM. No databinding artifacts. Takes advantage of existing Javascript.

    Virtual DOM

    Continue Reading →

    Vector Programming and Reactive Javascript

    The Functional Part

    Don't describe how to process the data using a loop instead have your code state what you want to happen. Use functional concepts to build nice observable streams: - Map: transform one collection into another. - Filter: filter one collection into a smaller collection. - Reduce: take a collection and reduce it into a single result (like inject in Ruby). - Zip: zip two collections into a single collection. Reactive programming requires thinking functionaly.

    Observables

    Observable methods

    Continue Reading →

    Refactoring and Making Promises

    After spending the last year writing Ember.js code I've realized one really big thing - Ember is about promises. I recently had a chance to refactor some code with a number of asynchrounous calls. The original logic used timers and polling to monitor the state of a bunch of recursive calls to the Google API to retrieve a complete folder structure. Timers get the job done, but promises make it elegant.

    Original Code

    Requirement: wait until the entire tree is loaded before transition.

    
    App.GoogleFile = Ember.Object.extend({
    });
    
    App.ApplicationRoute = Ember.Route.extend({
    
      model: function(){
        var model = App.GoogleFile.create({
          id: $('meta[name="google-folder-id"]').attr('content');
          children: Ember.ArrayProxy.create({content: []})
        });
        this.loadChildren(model.get('children'));
        return model;
      },
    
      afterModel: function(transition){
        if(transition.targetName == "application.index"){
          this.wait(model.get(&#...

    Continue Reading →

    Ember.js Lessons Learned So Far

    Ember.js

    Lessons Learned and Stuff

    Justin Ball / @jbasdf

    Justin Ball

    • CTO Atomic Jolt
    • Consultant, Rubyist, Javascriptist, Cyclist, Maker, Entrepreneur
    • Purveyor of Buzzwords

    What is Ember.js?

    • A framework for creating ambitious web applications.
    • Client-side MVC Framework
    • Open Source - Github Pulse
    • Single page apps are sexy
    • Ember.js makes it easy

    Easy is exclusive of the tears shed while learning Ember.js

    Why Single Page Apps?

    iFrames!

    Safari and IE no longer let you write a cookie to an iFrame unless the user has visited the site

    Real World - LTI apps

    Heads Up

    • Ember.js changes a lot
    • Ignore anything over 3 or 4 months old
    • When you choose Ember.js you are all in

    Using Rails?

    ...

    Continue Reading →

    Firefox, Vimeo and Froogaloop Have a Little Problem

    On one of our latest projects we're integrating with Vimeo. They provide a great Video player API that makes it pretty simple to interact with videos. Vimeo even provides the Froogaloop library that wraps up all the communication between the iframe where the video lives and your page.

    What We Need

    The requirement was to show other content once the video finished playing. That seems easy enough and really it is:

    
    var VimeoStuff = {

    init: function(){ $.each($('iframe.vimeo'), function(i, iframe){ this.setupEvents(iframe) }.bind(this)); }

    setupEvents: function(iframe){ var player = $f(iframe);

    player.addEvent('ready', function(player_id){
      player.addEvent('finish', onFinish);
    });
    
    function onFinish(id){
      // Show other content
    }
    

    }

    };

    $(document).ready(function(){ VimeoStuff.init(); });

    The Problem

    We do most of our development using Chrome and so everything worked great until someone tried to use the application with Firefox. I know, most people w...

    Continue Reading →

    Session timeout for your Ember application

    We ran into an issue with sessions timing out while users were doing client side stuff with an Ember application we're building. Once the session timed out they could no longer make authenticated requests of course and all ajax calls would fail.

    Here's a couple of bits of code that might be helpful.

    First capture 401 errors in your REST adapter and send the user to the sign in page if they've been logged out:

    var Adapter = DS.RESTAdapter.extend({

    ajaxError: function(jqXHR){ if(jqXHR.status == 401){ window.location.href = '/users/sign_in?timeout=true'; } if(jqXHR){ jqXHR.then = null; } return jqXHR; } });

    We wanted something a bit more user friendly than a redirect so we proactively warn the user and then send keep alives as needed. The solution is an Ember component that uses Twitter Bootstrap modals to warn the user. The code assumes you have Twitter Bootstrap setup. If you don't want to use Twitter Bootstrap then it should...

    Continue Reading →

    Using Chosen with Ember.js

    Harvest's Chosen select control is handy for cleaning up unwieldy or horribly long select boxes. It's a nice little bit of UI sugar that can help make your users happier and we all like happy users right?. Ember.js is now our Javascript framework of choice but it doesn't always play well with other libraries and plugins - at least not without messsing around with it for a bit.

    There are others out there that want to use Chosen in their Ember application. I tweaked the last bit of code in this StackOverflow question a bit to produce a working view that extends Ember.Select.

    Here's gist of the code and here's the code:

    App.Chosen = Ember.Select.extend({

    multiple: false, width: '95%', disableSearchThreshold: 10, searchContains: true, attributeBindings:['multiple', 'width', 'disableSearchThreshold', 'searchContains'],

    didInsertElement: function(){ this._super();

    var options = {
      multiple: this.get('multipl...

    Continue Reading →

    Don't miss the '.' - Computed Property that depends on Ember.ArrayController contents

    My fun/stupid ember mistake of the day. I even put together a jsbin to help track down the problem.

    It's a tiny problem that is hard to spot. Right there at the very end there's a property declared like this:

    
      property('selectedContacts.@each')
    

    It wasn't always that way. Once there was this:

    
      property('[email protected]')
    

    The difference is subtle. It's hard to see especially when you've spent your life typing email addresses. No one misses a period until the entire application stops working and everyone is furious because "It looks just like the #@$@!# sample code." Don't forget the '.' that goes before '@each'.

    
    var App = Ember.Application.create();

    App.ApplicationRoute = Ember.Route.extend({ model: function(){ var contacts = Ember.ArrayProxy.create({content: []}); contacts.pushObject({name: 'Bill'}); contacts.pushObject({name: 'Sally'}); return contacts; }, s...

    Continue Reading →

    jqXHR Returning Readystate 0 and Status 0?

    I've seen this error a couple of times and I always forget what causes it so for my own sanity I post it here.

    If you make an Ajax request and the response comes back with:

    statusText: "error" status: 0 readyState: 0

    then you likely have one of two problems:

    1. You are making a cross domain request and the browser is shutting you down. Check to see if you can turn on CORS or try using JSONP.

    2. Your Ajax request was triggered via a form submit or clicking on a link and you didn't call e.preventDefault() inside of your event handler. The browser will go ahead and submit the form or follow the link and execute your Ajax code. The form submit or the link follow will win and the browser will immediately terminate your request and give you back a readyState 0.

    I ran into the second issue with some Backbone code this evening. In my code the user clicks a button (really a link) and that link saves the model back to the server before traversing to the url specified in the...

    Continue Reading →

    jQuery ajax request yields statusText: No Transport

    If you write code you hate Internet Explorer. You get everything just right in Chrome, Firefox, Safari - any other browser really and then everything falls apart in Internet Explorer.

    We use CORS in some of the work with do at Open Tapestry. It works really well for letting the client figure out which service it needs to call and then call that system directly rather than routing all the requests through the main site.

    At some point someone at Microsoft decided that supporting standards just wasn't for them and so they created the XDomainRequest object. (I find it amusing that the top of the document states "There are no standards that apply here." That attitude permeates Internet Explorer). Lucky for us someone wrote a jQuery ajax transport that talks jQuery into kind of supporting CORS like behavior. It helps but doesn't solve all problems.

    When we deployed our code we found that nothing worked in Internet Explorer. No errors. No output. Just nothing.

    Here's wha...

    Continue Reading →

    jurlp and Internet Explorer 8

    For those who don't write code the choice to use Internet Explorer probably hasn't been influenced by much more than the fact that it's sitting on the desktop ready to use. For those of us who do write code we hate you.

    We use jurlp in quite a bit of our code because it's a great way to break apart and modify urls client side. Today, while testing in IE 8 we started seeing 'Invalid Argument'. I think that's the error of choice for most of Windows and as it turns out it's a pretty worthless/meaningless error.

    We traced down into the code and found that jurlp has code that looks like this:

    return $.extend ( urlToObject ( url ), { toString : uri.toString.http } );
    

    That is an elegant line of code and shows how things should be done. However, Internet Explorer doesn't like it when you override toString that way. Both jQuery and Underscore.js have outstanding bugs detailing the problem.

    We created a fork of jurlp that you can find here that uglies up the c...

    Continue Reading →

    Require.js, Backbone.js and Almond.js Example Application

    We refactored OERGlue to use backbone.js. That makes our life a lot simpler. Along the way we discovered require.js and I entered nerdvana. The documentation for require.js and backbone.js are both good and it doesn't take to long to read through the code. However, putting them together, getting the development environment right and then deploying can be a bit of a challenge.

    James Burke was kind enough to guide me through getting my project setup. In hopes that my experience will help someone else get started I've put together an example application that contains the basics that you need to get started:

    https://github.com/jbasdf/requirejs-backbone-example

    Merry Christmas!

    Continue Reading →

    Backbone.js – Clean up your views

    I've been integrating backbone.js into OER Glue. After years of writing all kinds of spaghetti javascript code to manage client side ajax backbone.js is like manna from heaven. If you're new to backbone.js and you want to use it with Ruby on Rails James Yu has a couple of great posts to get you going. The tutorial is for an older version so substitute router for controller and you'll be most of the way to the latest version.

    I followed the example and wrote some admin interface code. When I was writing the code I wondered about doing this over and over again:

    
    new App.Views.Edit({ model: doc });
    

    In the example that code greats a new view anytime you hit the new or edit action. The edit view code binds to the submit form event so that whenever the form is submitted it calls the save action in the edit view:

    
        events: {
            "submit form": "save"
        },
    

    That makes sense, but the one thing the tutorial doesn't teach you to do is clean up the vie...

    Continue Reading →

    Pushing my luck with jQuery. Scope matters.

    OER Glue makes heavy use of jQuery. We're currently working on a proxy version of the technology that won't require installing a browser plugin. It's pretty cool.

    One of the biggest challenges for us has been ensuring consistent look, feel and operation of our technology across any possible website on the Internet. That's not a small challenge. A key to making everything work is to not stomp on anything the web page is already doing. We use jQuery and so do a lot of page on the Web. That means we have to carefully load the version that we use (since lots of sites use old versions) and then put everything back. A call to noConflict make this possible:

    
    oerglue_jquery = window.jQuery.noConflict(true);
    

    That magic doesn't come without costs. We don't use any jQuery plugins because it's not likely they will work with our scoped version of jQuery. I also ran into an interested problem with class selectors. For some reason jQuery class selectors for the oerglue_jq...

    Continue Reading →

    Converting a jQuery Object into a String

    I'm so used to everything having a 'to_s' method that when it's not there I feel like going out a kicking puppies. In jQuery you can always get the contents of a jQuery object thus:

    Html:

    
    var html = myObject.html();
    

    Text:

    
    var html = myObject.text();
    

    That's great and has been extremely helpful over the years but what if you want the html of the object as well? It turns out that there are others that have had this problem. Here's the solution on stackoverflow.com. There's a request for the jQuery team to implement an outerHtml() method. Go add a comment and push the request, please.

    I was using the solution from stackoverflow and it worked well until one day all of the contents of my page vanished upon execution of a method leaving me with a serious WTF at 1 am in the morning.

    Here's part of my code. I've found that for manipulating an html string jQuery is the bomb. In the code below I take a snippet of html, remove whitespace and then rewrite li...

    Continue Reading →

    In javascript string replace doesn’t do what you think it does

    When doing a string replace in javascript if you try something like this:

    var str = 'test';
    str.replace('t', 's');
    

    You'll find that the result is:

    sest
    

    The replace method in javascript is not a global replace. Instead it does a single replace and moves on.

    If you want to do a global replace try using a regular expression instead:

    var str = 'test';
    str.replace(/t/g, 's');
    

    the result will be:

    sess
    

    The reason for that is the 'g' hanging of the end of the expression /t/g. That tells javascript that the replace should be global.

    Continue Reading →