You are viewing a read-only archive of the Blogs.Harvard network. Learn more.

Integrating Jasmine with Travis CI

July 31, 2014 — abarrett

One of the things I’ve been wanting to automate with our Harmony Lab project is the javascript test suite so that it runs via Travis CI. I tried once before, but hit a wall and abandoned the effort. I recently had the opportunity to work on this as part of a professional development day in ATG, which is an excellent practice that I think all departments should embrace, but that’s a topic for another day. If you’re not familiar with Travis, it’s a free continuous integration service that provides hooks for github so that whenever you push to a branch, it can run some tests and return pass/fail (among other things). Getting this to work with a suite of python unit tests is easy enough according to the docs, but incorporating javascript tests is less straightforward.

Harmony Lab JS tests use the Jasmine testing framework and all of the unit tests are created as RequireJS modules. This is nice because each unit test, which I’ll call a spec file, independently defines the dependencies it needs and then loads them asynchronously (if you’re not using RequireJS, I highly recommend it!). Running the Harmony Lab tests locally is a simple matter of pointing your browser to http://localhost:8000/jasmine. This makes a request to Django which traverses the spec directory on the file system and finds all spec files, and then returns a response that executes all of the specs and reports the results via jasmine’s HTMl reporter. But for headless testing, we don’t want to be running a django server unless it’s absolutely necessary. It would be nice if we could just execute some javascript in a static html page.

It turns out, we can! The result of integrating jasmine with phantomjs and travis CI is Harmony Lab Pull Request #39. You can check out the PR for all the nitty-gritty details. The main stumbling block was getting requirejs to play nicely with phantomjs and getting the specs to load properly. The phantomjs javascript code, that is, the javascript that controls the browser, was the simplest part since it only needed to listen for the final pass/fail message from jasmine via console.log and then propagate that to travis.

Posted in Continuous Integration, Harmony Lab, Javascript. Comments Off on Integrating Jasmine with Travis CI »

Using jQuery in Node with jsdom

March 12, 2014 — JaZahn

After having watched a ton of Node.js tutorials (and TAing for a JS class), I decided a while ago “for my next script, I’m totally going to use Node.”

So I finally got the opportunity this last week to write a script. Tasked with a menial job, making a script to accomplish it brightened my day.

The first script was dealing with an xml api feed. So I immediately found xml2js, a nice converter and set about looping through some api urls, collecting the data I needed and totaling it up. It was a mess, and looked like this:

var https = require(“https”);
var parseString = require(‘xml2js’).parseString;

https.get(“https://someplace/someapi”, function(response){

var body = ”;
response.on(“data”, function(chunk) {
body += chunk;
});

response.on(“end”, function(){
//console.log(body);
parseString(body, function (err, result) {
totalEntries += result.feed.entry.length;
for(var i=0; i < result.feed.entry.length; i++){ something += parseInt(result.feed.entry[i]['something'][0]['somethingelse'][0].$.thingiwant); } console.log("Total stuff: " + something); }); }); } [/sourcecode] This one was easy to get what I needed, but clearly not the right way to do it. Because the functions happen asynchronously, blah blah blah, that's not what I'm writing about. The next one was very similar, but I had to scrape a webpage, not just xml data. So I found a nice lib called jsdom, which created a dom for me to use jquery on. [sourcecode language="javascript"] var jsdom = require("jsdom"); jsdom.env(url, function(errors, window){ var $ = require("jquery")(window); var total = 0; $(".some_class").each(function(key, value){ // just use a regex to get it // it's buried in the onclick, so I'll have to use a regex regardless... var result = value.innerHTML.match(/newWindow\('([^']*)'/)[1]; // get first grouping jsdom.env(host + result, function(errors, window){ var $ = require("jquery")(window); // use regex to get the xxxxxxx because I'm lazy var result = $('head').html().match(/someRegex/g); if(result !== null){ for(var i = 0; i < result.length; i++){ var thing = result[i].match(/"([^"]*)"/)[1]; // get first grouping total += thing; } } }); }); }); [/sourcecode] This was super easy / super powerful to use something I'm already so familiar with to accomplish a task that is well suited to that. The scripts themselves took minutes to write -- if you don't take into account the time I spent finding where to get what I needed.

Posted in Javascript, Uncategorized. Tags: , , . 1 Comment »

Shame on Me: the missing code review (or is it unit testing?)

February 15, 2014 — JaZahn

So a bug was reported not long ago. Let’s say “sensitive data” was available where it shouldn’t have been. I had an API view, a view that was returning json only, or should have been. Apparently early on in the project, I had added a comment to that view, to make sure it was returning the appropriate data. So I had added an html comment to a view that was supposed to be returning json. And I had it outputting everything under the sun it could output. 

<!--
"secure data" => "stuff I don't want the user to see",
... 30-40 lines of this ...
-->
{"success": true}

So there’s 2 problems with that. The most important of which is that with DOM inspection tools, like chrome developer tools or firebug, you can inspect the return value of that request and see the data I don’t really want you to see. The other problem is that I’ve created invalid json, and whatever is checking that success is clearly not using that value.

Why did I do this?

This was early on in development and I was debugging the easiest way I could.

What could have prevented this?

A code review of any kind. One look at that file would have been a red flag to anyone. But a view file that was only outputting true or false never seemed like something I ever needed to look at once I got it working.

Posted in ATG, Javascript. Tags: , , , , , . 1 Comment »

Custom Slides and Github Hosting

January 16, 2014 — JaZahn

So I was putting together a presentation on Accessibility for my department. I knew very little about accessibility, so I read as much as I could and watched every youtube presentation I could find on the subject. A lot of them were total crap, but a few from some of the google io conferences were really great. They had working examples and code rendered inline to the slides.

I thought this was great so I went looking for what they did for this and found that (for at least the 2011 and 2012 io conferences) they have provided a slide template that is geared just for that.

The 2012 one is reasonably nice: https://code.google.com/p/io-2012-slides/

So I altered this, “forked it” and dumped it into my github: https://github.com/jazahn/axs-slides

That in itself is pretty cool, but then I thought, hey, I want to put these somewhere people can get at them. So originally I had them on my public web space for work, but it was sort of annoying to git commit, git push, log in to the server, git pull. Logging in can be an annoying step for my work if I’m not at work and need to VPN.

Artie had a cool idea of using github pages (http://pages.github.com/). Because these slides are all static, I don’t even have to worry about what server these are running on. All you have to do for this is create a gh-pages branch and anything in that branch will automatically be hosted. So what I did was create that branch, set it as the default branch, and removed the master branch (to avoid confusion and simplify). After altering my remotes, now I just have to git push from my dev environment and it’s automatically put on the server:
http://jazahn.github.io/axs-slides

Very cool.

Posted in ATG, HTML, Javascript. Tags: , , , . Comments Off on Custom Slides and Github Hosting »

Modern JS: Tools of the Trade

October 25, 2013 — abarrett

Whether you like or dislike javascript, the good parts are quite good and javascript patterns can make it easier to write sophisticated apps that are also readable and maintainable. One of the more recent trends in JS is a movement toward micro libraries. A good resource for that is microjs.com. Alas, there’s no such thing as CPAN for browser-based javascript, but I think this is a good start at organizing the useful libraries that exist on github and elsewhere.

On one of my recent projects, I wanted to implement the pub/sub pattern on some objects, but instead of writing the code myself or reaching for a heavyweight library just for event functionality, I instead found microevent.js via microjs, a mixin that adds the ability to make any object an event emitter. In total, the library is just 20 lines of plain-old-javascript that anyone can understand.

These are some other tools and services that I’ve found very useful:

  • JSHint (successor to JSlint): lints code and also useful for enforcing a common style on a project with multiple developers.
  • RequireJS: a library that aims to make dependency management more sane in javascript. This is based on AMD.
  • Jasmine: a library for doing unit testing (BDD).
  • JSDoc: for documenting javascript, kind of like Javadoc. Docco is also gaining in popularity, although I haven’t used it myself.
  • Lodash/Underscore: Lodash is a fork of underscore.js that I’ve been using, although they both serve the same role: they facilitate a more functional-style and provide common utilities that every JS dev needs, whether they know it or not, although as Brain Lonsdorf points out, there’s more to functional programming.
  • JSPerf: this is a popular benchmarking service for JS and helps answer performance-related questions. Very useful.
  • JSfiddle: great service for testing out javascript and sharing it with others.

I’m sure there are some others that I’ve missed, and I’d like to hear about them!

Posted in ATG, Javascript. 1 Comment »

Online Learning About Learning Online

August 30, 2013 — Michael D. Hilborn

As I continue to tentatively wade back into development waters, I’ve started taking advantage of the many online learning opportunities that are out there. The reasoning is two-fold: (1) The obvious reason is that I want to learn (or, as the case may be, re-learn) some new languages and frameworks, and (2) as someone who works as an educational technologist, I ought to be current on these online opportunities, anyways.

In particular, I’ve been refreshing myself on JavaScript, teaching myself Python, becoming more familiar with Joomla!, and I’m also interested in getting some game development underway with HTML5. For my refresher on JavaScript and my dive into Python, I’ve been using Codeacademy; for Joomla, I’ve been taking advantage of lynda.com; and for game development in HTML5, I attempted participating in a Udacity MOOC. I’ve summarized my (ongoing) experiences below:

Codeacademy

This is a fantastic (and free!) resource for both beginner and advanced programmers, though advanced programmers may find the hand-holding approach a tad slow. Clearly aimed at introducing the newbie into the world of programming, each course re-introduces the fundamentals (syntax, variable assignment, conditionals and control flow, functions, objects, etc.). Each course is divided into sections, and each section into a series of lessons. Lessons build upon themselves, as do sections, and most importantly, several sections are reserved for implementing a simple application based on the concepts learned (I especially enjoyed “Pyglatin:” implementing a pig latin generator in Python).

The interface consists of panel on the left that introduces a particular concept, and then instructs the user to write some code based on the concept. Therein lies the genius of Codeacademy–unlike a book, you are not only forced to read about a subject, you are forced to actually sit down and implement it before moving on. And so far, I’ve discovered their console works amazingly well at detecting errors, giving hints if things don’t go well, and just generally getting things right.

In essence, Codeacademy was designed to teach code and coding practices–nothing else. It does so with simplicity–no fancy videos or multimedia, just well-written text and a console–which is what coding should be all about. Currently it offers courses in JavaScript, Python, HTML/CSS, PHP, Ruby, and APIs. It also offers Codeacademy labs where you can experiment with some of the new languages that you have learned.

Lynda.com

The amount of subject matter on lynda.com is staggering. From project management to 3D modeling, lynda.com offers courses on just about any popular technical concept out there. I typed in “Joomla” and received no less than 13 tutorials (granted, only three pertained to the most recent version of the system). I’m about a quarter way through “Joomla! 3 Essentials” and thus far, my experience has been a positive one.

The course on Joomla! 3 takes what I consider to be the “traditional” approach to online learning: Divide a course into a series of sections, divide each section into a series of lessons, with each lesson consisting of a video and downloadable content to perform the described exercises. Like Codeacademy, lynda.com understands that for most users, learning is the equivalent of doing. This particular course hand-holds the user through downloading and installing Joomla on one’s laptop, then stepping through a series of exercises based on downloadable material. The course sometimes encourages “homework” in between its lessons–that is, if you don’t complete the exercises after a lesson has finished, the next lesson will be tougher, if not impossible, to follow.

The videos for this particular course are professional and well-paced, though, again, for advanced users, the hand-holding might be a tad slow. Nevertheless, with just a quarter of the course behind me, I feel confident enough to go into any Joomla! environment and be able to decipher the basic structure of the site.

Perhaps the only downside to lynda.com is that it’s not free. Although you can get buy with paying $25/month, you really need to download the exercise files to fully experience a course, which ups the price to about $40/month. I’m fortunate that my institution offers lynda.com as a perk; if your institution doesn’t, I strongly encourage you to encourage them to invest in it.

Udacity

I won’t dwell too much on my first experience with MOOCs; suffice to say, I wasn’t impressed. I eagerly signed up for “HTML5 Game Development” when it started being offered, but gave up after the first lesson or two.

Like most MOOCs that I have seen, the course was divided up into a series of lessons, each lesson a series of videos, with each video followed by a “quiz” that could be automatically graded. This is where everything fell apart. The quizzes expected code to be inputted (in this case, Ajax code), and this code would then be “graded” as either correct or incorrect. The problem is that the Udacity grading engine (or whatever they were using behind the scenes) wasn’t able to grasp the concept that with coding, “there is more than one way to do it”.  Although a user could enter code that gave the correct result, the engine seemed to require that the code follow an exact syntax. And in following the discussion forums of each quiz (and some of the apologetic emails I received from instructors), it was clear I wasn’t the only one having difficulties. As I said, I gave up after a bit. Perhaps I’ll return some day.

Maybe I chose the wrong course, or maybe I was wrong in choosing Udacity; regardless, the experience seemed less professional and less reliable than either Codeacadmy or lynda.com. Maybe it’s because MOOCs are in their infancy. . . or perhaps it’s because they’re being run by academics rather than solid business professionals. Regardless, if the experience I had is any indication of how MOOCs are, in general, being run, I don’t see them as viable competitors to other online learning platforms.

 

 

Posted in Development, Javascript, MOOCs, Online Learning, Python. Tags: , , , , , , . Comments Off on Online Learning About Learning Online »

Documenting Documentation

August 28, 2013 — Michael D. Hilborn

I recently waded back into simple web application development (more on how that feels later), and one of the many aspects of coding that I’ve been refreshing myself on is how to best document what I’ve written so my future self doesn’t get too confused over what I implemented or why I implemented it in the way I did. The application is deadly simple, so simple that I hesitate to call it an application. The web page contacts a PHP script via an Ajax call, and the PHP script does its thing, sending back a JSON-encoded object. The client subsequently uses the object to display a message of success or failure.

As I said, deadly simple.

Nevertheless, as simple as the application is, I’ve been researching how best to document PHP and JavaScript. For PHP, the definitive answer appears to be phpDocumentor 2. For JavaScript, there is JSDoc. Here are some additional links that I found useful:

phpDocumentor

JSDOC

Note that I haven’t actually tried generating documentation with either toolset; that’s a completely different challenge. I’ve mostly been following the format so that my documentation can be printed/generated if somebody (aka me!) wishes. And what I’ve come to understand is that learning how to document a language feels almost as complicated as learning the language itself.

 

Posted in Development, Javascript, PHP, Uncategorized. Tags: , , , . Comments Off on Documenting Documentation »

Drag Dropping a Helper (or something else) with jQuery UI

May 17, 2013 — JaZahn

I was having issues using jquery UI’s draggable and dropping something other than what I was dragging into a sortable. So this example, but dropping something else.

Originally I was trying to do it with Helpers. Helpers are nice, but limited in functionality and you cannot get the draggable helper element from the sortable. The right way seems to be to append / create the element within the dom once it’s been dropped. So create an element template and drop it in on the sortable’s update event.

Here is a jsfiddle with my solution.

Highlight:

var textItem = 'Text that is droppped';
var imgItem = 'Image that is dropped';

$(document).ready(function(){
	$('#sortable').sortable({
		revert: true,
		update: function(event, ui){
			if($(ui.item).hasClass('mysortable')){
			    // we don't add one if we're sorting a pre-existing item	
			} else {
				$(ui.item).removeClass('ui-state-highlight');
				$(ui.item).addClass('mysortable');
				
				if($(ui.item).hasClass('textDrag')){
					$(ui.item).html(textItem);					
				}
				if($(ui.item).hasClass('imgDrag')){
					$(ui.item).html(imgItem);					
				}
			}
		}
	});
	$('.draggable').draggable({
        connectToSortable: "#sortable",
        helper: "clone",
        revert: "invalid"
	});
	
});
Posted in ATG, Flashcards, Javascript, jQuery. Tags: , , , , . Comments Off on Drag Dropping a Helper (or something else) with jQuery UI »

Avoiding Page Reloads

December 4, 2012 — JaZahn

My applications are part of a framework (LMS) that load a billion extra items on each page load.

To get around it I wanted to do that silly “twitter thing”. They’re the ones who get credited with it because for years normals were baffled by their url changing.

http://www.adequatelygood.com/2011/2/Thoughts-on-the-Hashbang

Additionally, if you’re interested in why the bang(!) is necessary, it’s not. It’s just to tell google to index the page. Otherwise they assume it’s just an anchor link.

https://developers.google.com/webmasters/ajax-crawling/

So I spent the last few hours changing all links in one of my current applications to do a “hashbang” sort of call instead of loading new pages. This significantly increased speed when using our clunky LMS.

This was especially annoying because our LMS forces changes with <a> tags.

What made this especially easy to implement was that I had already made all links go through a smarty plugin so altering all links in the application was just in one file and I could make those links specific to whatever authentication scheme / LMS the application is living in. So I just had to alter that plugin and the LMS specific layout and bam. The only thing that’s not covering is form submissions. But there are only a couple of those, so I’m not going to stress about that.

In continuing research obviously I had to investigate why twitter moved away from hashbangs.
http://engineering.twitter.com/2012/05/improving-performance-on-twittercom.html

The highlight of that being that with hashbangs, you have to go to the client and then back out, which reduces speed on the initial pageload. So twitter went a little fancier 6 months ago and used the history api’s PushState.

Implementing the hashbang urls was a very small amount of code, so I’m going to move forward with that for now, maybe next time I get a chance to do some research I’ll focus on converting that to PushStates.

Posted in ATG, Javascript, Quizmo. Tags: , , , . 2 Comments »

Rendering templates obsolete?

October 19, 2012 — abarrett

There’s an interesting discussion on github today (courtesy of javascript weekly) about whether rendering templates and template engines in general are obsolete in today’s javascript-heavy applications. This topic seems to come up periodically, although the idea hasn’t really taken off. I think the first time I came across it was in the seaside framework, which is great by the way. I don’t have a strong opinion one way or the other, so I’ll be interested to see how the discussion develops.

Posted in ATG, HTML, Javascript, Smarty. Tags: , , . Comments Off on Rendering templates obsolete? »
« Older posts «
»