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

Mobility Workshop

gold stick figures sitting together working on their gold laptopsA couple of months ago, we had a very successful presentation on vagrant/puppet. Given by a developer, it sparked motivation in some devops enthusiasts to give a workshop. It went really well. (Vagrant Tutorial)

They had a great format with their workshops that seemed effective. They were super enthusiastic, which translated to super prepared. They had created a wordpress post that was a very detailed, step by step instruction on getting started.

The interest and effectiveness of this sparked motivation to do “other topics”. So I put together this tutorial on mobile development, “featuring jQuery Mobile”.

I thought the idea of something where I had the material prepared beforehand and could just say “go” was a great place to start. This shouldn’t be a presentation, it should be an opportunity for people to get their hands dirty.

I was running through tutorials and found a lot of them had put their code on github. At some point I had the idea to use branches to “step” through the tutorial. The way I envisioned the workshop going was to start with nothing, and build out a mobile app through logical steps — as a lot of tutorials do. Do a header, do a menu, do a list, do a link, do a transition, do a search. Coming up with a list of “things to do” was easy.

Putting it together with github also meant I could just put the directions in the base readme and it would be a completely self-contained tutorial. (Not to mention, having it in git allowed me to force people who I know don’t want to make the switch out of SVN to use a VCS that is so much nicer.)

Anyway, the finished draft took a long time. It was a lot of easy stuff, but time consuming.

(Mobility Workshop)

The most important part came after the draft was finished. I gathered some team members and some cross-team members — basically whoever would come sit with me and had them run through it to see if it made sense. They were brutal. It was great. A lot of this work happened after hours, so the language was at times, very stream of consciousness. Having people with varied familiarity with the topics covered allowed for some invaluable revisions.

Overall, the workshop proved to be a wonderful exercise in collaboration and teamwork, and regardless of how the actual workshop goes, it has left me better than I started, so that’s good enough.

Posted in Design & Modeling, Development, Open Source. Tags: , , , , , , , . Comments Off on Mobility Workshop »

Using jQuery in Node with jsdom

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.

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

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 »

JavaScript is a Trap

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

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.