What I’ve Been Working On (Ionic and Angular Resources)

As you can see by my stale timeline, I haven’t updated this blog in awhile. I’ve been busy building the HomDNA app for iOS and Android using Cordova, Ionic, and Angular. Here’s what I’ve learned (more detailed posts to come):

AngularJS Architecture

AngularJS Plugins

AngularJS Optimizations

AngularJS Unit Testing

Cordova Plugins

Build Process with Gulp

Choosing a JavaScript Framework

I’ve been trying to convert IPOFest (a pet project started by Kyle and I) from all PHP to JavaScript that interfaces with a PHP API. At work we use Backbone.js and since I had never used it before, I practiced on IPOFest. First I started with Backbone and Knockout.js, with Knockback.js as a bridge. I didn’t go too far down that path, but it did feel a bit awkward and the Knockback documentation didn’t help very much. At work we use Handlebars for templates, so I started changing over to that. Continue reading

Learning Object Oriented Javascript

I’ve never considered myself a programmer. Developer yes, coder, sure, but not a programmer by any means. Although I took some computer science classes in college, I never learned the basic tenets of programming and instead always learned just enough to get by. Focusing on HTML, CSS, and jQuery has always been enough. With my new position at Incisent, I’ve had to dive into the deep end of some very complicated, custom Javascript. This code has huge custom classes, uses Underscore, fastFrag, and Lawnchair (three JS libraries I’d never heard of). Although it’s easy to fix bugs, given enough time, adding new features the “right way” requires a bit more knowledge.

A few weeks ago I saw this post: learning object oriented Javascript in 15 minutes or less and I knew I needed to walk through it. So I finally did. The best thing about this is that it was short. Like the title says, it took less than 15 minutes and I was able to understand some concepts that were always at the edge of my knowledge. So it was definitely successful.

From there, in the comments, someone linked to this short collection of OO JS articles. These obviously go more in depth and are helping to take my knowledge to the next level. Armed with this new information and I’m starting to really enjoy the challenges at work and I hope to apply what I’ve learned for some of my own after hours projects.

window.load

I ran into an interesting problem while working on a project for SiteGoals. We updated the code for an old design, moving it from tables to divs. This was relatively easy, except that the bottom divs needed to stretch to match the height of the tallest column. Sometimes that was the main content div, sometimes that was the sidebar items. I couldn’t fake it with a background image because of the quirks of the design and I’ve never had much luck with any of the pure CSS techniques, so I turned to javascript.

I found a pretty simple script for finding the tallest div and forcing the rest to match. The only problem I started to notice is that on the first load, before the images were cached, it was finding the height of the page BEFORE the images loaded, causing the content to spill over the set height. Since the site is in a CMS (Expression Engine), I couldn’t very quick add width and height tags to each image, nor could I expect the client to always do so in the future. So I had to find a way to set the height of the divs AFTER all the images were loaded. I thought this might be a more daunting task than it was. Thanks to a blog post I found, and with only a quick modification to my script, I was able to adjust the height AFTER the images and now the content no longer busts outside the fixed height of the div. Easy as pie!