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

Accessibility and Mobility and Web Development

May 31, 2014 — JaZahn

Mobility and Accessibility are not new technologies that have come up. They are not extras that some of us need to tack on to what web developers do.

They are an essential part of web development and should be considered as basic skills.

Accessibility is not hard. It used to be, it really used to be, but with HTML5, it’s actually quite simple. Simply a small part of the HTML5 spec, something web developers should know. Mobility was a hot new topic 6+ years ago. Now it’s expected that the applications you build are in some way available on a mobile platform.

It is an expectation.

Why is this not the reality? Why are web developers still making applications the same way they were 10 years ago? It partly has to do with web development being a “full stack” profession for so long. Traditionally, the front end has been small and the back end has been “the application”. The direction of the web is putting more of the application on the front end, so developers that are considered full stack have to now know more than basic HTML and the minimal JavaScript it takes to do some validation. JavaScript has become huge, for large applications, it requires its own framework.

I don’t think that’s been adequately realized by the web development community yet. The future of the web is a partnership, where the applications are separate. the back end an API, the front end the “actual application” that gets the data it needs from the API. As such, people are turning more to micro frameworks for the back end, and away from what had become the staple Rails clones — and much further away from the even larger, more complex frameworks.

SPA-Architecture I’m not sure if Single Page Applications are truly “the” future. But they are the now. It is important to stay on top of this, as this industry is constantly changing. But one thing is for sure, if you’re a business fully invested in back end developers, you’re hitting a problem where you feel like you need to hire “UI specialists” when you really need either 1) for back end developers to beef up their front end development skills or 2) to hire developers focused on front end “development” (as opposed to graphic designers).

Posted in Uncategorized. Tags: , , , . Comments Off on Accessibility and Mobility and Web Development »

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 »

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 »

Javascript Callback Scope

August 12, 2013 — JaZahn

I ran into an annoying issue with js callback scope recently and wanted to document it for myself somewhere. Callbacks are super simple at the core — passing a function as a parameter to another function. 

callbackFn =  function(){
  alert("bam");
}
firstFn = function(callback){
  callback();
}
firstFn(callbackFn);

That’s all well and good so long as everything is in the global scope. But that’s just bad practice.

So in OO js, you’d have something like this:

Obj = {
  callbackFn: function(){
    alert("bam");
  },
  firstFn: function(callback){
    callback();
  },
  secondFn: function(){
    this.firstFn(this.callbackFn);
  }
}
Obj.secondFn();

This will actually be executing callbackFn in the global scope. The ‘this’ just gets lost. Note that you may only notice this if you’re expecting the this of callbackFn to find what’s in your obj (the above sample will probably work just fine).

Obj = {
  myalert: function(){
    alert("bam!");
  },
  callbackFn: function(){
    this.myalert();
  },
  firstFn: function(callback){
    callback();
  },
  secondFn: function(){
    this.firstFn(this.callbackFn);
  }
}
Obj.secondFn();

There, that one will fail.

The solution is to use the apply() function.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

Obj = {
  myalert: function(){
    alert("bam!");
  },
  callbackFn: function(){
    this.myalert();
  },
  firstFn: function(callback, callbackObj){
    callback.apply(callbackObj);
  },
  secondFn: function(){
    this.firstFn(this.callbackFn, this);
  }
}
Obj.secondFn();

And that will work as intended.

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

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 »

Yii Javascript redirect: jsredirect

August 30, 2012 — JaZahn

One of the platforms I have to develop for is iSites. This is a Harvard grown LMS that is complicated and annoying, but functional.

Since I have to develop tools that fit within this framework I have to work around its limitations. One of the simpler to understand limitations is the idea of not having control of the headers sent. Since by the time it gets to my tool, the page has already started loading, output has already been sent, so doing a redirect with PHP’s header function is impossible.

Yii has 2 ways to forward things through the controller. redirect and forward. Redirect uses header and forward doesn’t change the URL. So the best way to forward within isites is to use a js forward. I.e. document.location = “www.google.com”

So in the controller.php in components which extends CController I added a method jsredirect:
https://github.com/jazahn/Quizmo/blob/master/quizmo/protected/components/Controller.php

	protected function jsredirect($url){
		// set the redirect in a session
		Yii::app()->session['jsredirect'] = $url;

		// forward to the jsredirect action
		$this->forward('/site/jsredirect');
	}

This just sets a session var for the redirect and forwards to site/jsredirect so in SiteController.php I have

public function actionJsredirect(){
		
		if(isset(Yii::app()->session['jsredirect'])){
			$this->render('jsredirect',array(
				'url'=>Yii::app()->session['jsredirect'],
			));
		}
		
	}

And then in the jsredirect template file we have

<script>
window.location.replace("{$url}");
</script>
Posted in ATG, Javascript, PHP, Yii. Tags: , , , . Comments Off on Yii Javascript redirect: jsredirect »

JavaScript is a Trap

August 2, 2012 — JaZahn

Note: opinion

JavaScript is the most important part of web development. It’s what separates web applications from a collection of web pages.

The trap is one that I’ve fallen into multiple times and I’ve seen other developers fall into, unable to help them. They have these grandiose ideas and the way they see it working is with a mass of JavaScript. So they get this ridiculous mess of code, and they may not admit it’s a mess, but the trap with JavaScript is there is no way to write a lot of it without it becoming a mess.

One of my greatest offenses in this has been my use of extjs. This is a js framework that requires writing the code in a specialized fashion. You end up with classes that sometimes look clean but the more you stray away from exactly what the code was specialized for, the more it becomes a mess. And this happens fast.

Sometimes it’s a necessary mess. Innovation is often a mess. The problem is differentiating innovative in terms of JavaScript and otherwise innovative. Lots of people are doing innovative things, but it’s very rarely innovative in terms of the JavaScript.

So what’s the solution?

In my opinion, JavaScript in general should be minimal. 99.9% of what needs to be done for any web application can be done with jQuery, underscore, jQueryUI, and not a lot of it. I don’t believe you should ever be writing more than what you can copy paste directly from the jquery documentation. And you can replace “jquery” with any major js library. Don’t go outside of what the library was designed for, you really don’t need it most of the time. Really.

Maybe I should update this to be more about how JavaScript Frameworks are the trap, but it doesn’t matter if you’re using a framework or not, the more you write, the shittier it becomes.

Posted in Javascript. Tags: , . 1 Comment »

Using Smarty variables inside Javascript

May 28, 2012 — JaZahn

I looked for appropriate answers for this on the smarty site, and the resounding answer was escaping javascript’s {}s with {literal}’s

Smarty template vars and Javascript functions
How to use Javascript codes in template files?
Access Smarty value with javascript

They basically all say to do something like this:

// $question_ids_json = ["1","2","3","4","5"]
{literal}
<script>
$(document).ready(function(){
	var question_ids = {/literal}{$question_ids_json}{literal};
	
	alert(question_ids[0]);

});
</script>
{/literal}

So they want to put everything in a literal tag, and then basically escape that literal tag when smarty needs to be used.

I didn’t like this, so I put the value in a hidden input and then just retrieved that input in the javascript, thereby keeping the js clean of smarty shenanigans:

<input type="hidden" id="question_ids" value='{$question_ids_json}'/>

<script>
$(document).ready(function(){
	//var question_ids = {$question_ids_json};
	var question_ids = eval($('#question_ids').val());
	
	alert(question_ids[0]);


});
</script>

But this is just a matter of personal preference.

Posted in ATG, Javascript, PHP, Quizmo, Smarty. Tags: , , , , . 4 Comments »
« Older posts «
»