New Tools for Web and Mobile Application Development

I recently started investigating new tools available for mobile web development and I ran into a plethora of tools. From JS MVC frameworks to js templating engines, and css extensions. I thought it would be a good idea to share the list I’ve discovered so far. Please add a comment for any js library I’ve missed. Thx

JS Tools

Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions,views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
http://backbonejs.org/

Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects. It’s the tie to go along with jQuery’s tux, and Backbone.js’s suspenders.
http://underscorejs.org/

Thorax, An opinionated Backbone application framework providing a filesystem structure, on demand module loading, model and collection view binding, inheritable view and DOM events, data loading helpers, form serialization / population and validation. Built using Backbone,Underscore, Zepto, Handlebars, Stylus and Lumbar.
http://walmartlabs.github.com/thorax/

Sugar is a Javascript library that extends native objects with helpful methods. It is designed to be intuitive, unobtrusive, and let you do more with less code.
http://sugarjs.com

Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API. If you use jQuery, you already know how to use Zepto.
http://zeptojs.com/

Scroll 4 is a complete rewrite of the original iScroll code. The script development began because mobile webkit (on iPhone, iPad, Android) does not provide a native way to scroll content inside a fixed width/height element. This unfortunate situation prevents any web-app to have a position:absolute header and/or footer and a scrolling central area for contents.
http://cubiq.org/iscroll-4

Lumbar is a js-build tool that takes a general codebase and list of platforms to generate modular platform specific applications.
http://walmartlabs.github.com/lumbar/

JS Templates

Mustache, Logic-less templates.
http://mustache.github.com/

Handlebars provides the power necessary to let you build semantic templates effectively with no frustration.
Mustache templates are compatible with Handlebars, so you can take a Mustache template, import it into Handlebars, and start taking advantage of the extra Handlebars features.
http://handlebarsjs.com/

CSS Extensions

Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins,selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.
http://sass-lang.com/

Stylus, Expressive, dynamic, robust CSS
http://learnboost.github.com/stylus/

LESS extends CSS with dynamic behavior such asvariables, mixins, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino.
http://lesscss.org/

From Zero to Alpha

Seems I’ve been living in a bubble and time has been flying. Fortunately I learnt a lot while in that bubble and I’m looking forward to sharing some of the stuff I’ve learnt or I’m reminded of. From trying my hands out with Android development to pitching to VCs, I’ve begun to realize how important it is to not delay in implementing your ideas. Yes they are a dime a dozen but there a few ones that get you excited. Surfing on that exciting is something I enjoy a lot and I’m longing for more. 

I’ve learnt you really don’t need to figure everything out before you start working on your idea apart from if it meets real people’s needs. Does it meet your needs? Is it just you or do you see 10s, 100s or 1000s or even 1Ms of people out there you’ll be meeting the needs of. If you can see some people enjoying your solution and you’ve got the time I’ll most definitely suggest you give it a shot but keep your day job. Create your prototype and see how it goes. And most importantly, enjoy your solution!

What Is Your “NOW” State?

What Is Your “NOW” State?.

Quick Introduction to jQuery Mobile

By popular demand, I’ve been working on several mobile applications in the last couple of months. I’ve come to love jQuery Mobile (jQM) for it’s simplicity and ease-of-use. I also love the rich UI components, tools that make creating apps easy, much more. A super cool friend, Adegbenga Agoro, asked for a short introduction to jQM and this post is a result of that intro. This is a sharp-sharp (Nigerian slang for quick) introduction to jQuery mobile. It showcases my favorite tools and resources for working with jQM.

Where to start? http://jquerymobile.com. It’s got everything. Demos, docs, tips, device compatibility etc.

Tools & Tips

jQuery Themeroller

Create Theme Swatches for jQuery Mobile Interface. Allows d rag and drop of colors to UI components.Update existing themes by importing css. Allows export of themes in css format & includes icons.
http://jquerymobile.com/themeroller/index.php

Mobile Apps > PhoneGap

Want to great Mobile Apps? Compile jquery mobile webapps using PhoneGap [http://phonegap.com]
Goto http://build.phonegap.com

Prototyping > Codiqa

Create prototypes quickly with a simple, intuitive drap-and-drop interface. Free trial available. SaaS

Quickstart Workflow

1. Create theme with jQuery Mobile Themeroller and export

jQuery Themeroller in action

You can also import existing themes.

2. Import theme into Codiqa

3. Create app prototype in Codiqa

4. Download prototype, customize and start adding functionality.

Please leave a comment if you’ve found this useful and if you have any questions.

Go for the seed!

How do you get a mango tree on a piece of land? Simple, plant a mango seed! How do you get progress, fruitfulness, blessings into your life? You plant the seed of Wisdom in your heart! Go for the seed not the fruit! Seek Wisdom not material things!

Is Unit Testing a waste of time?

On Wed 28th, ThoughtWorks & CcHub organized an event where Patrick Turley give a presentation on Unit Tests, Pair Programming, Continuous Integration (CI) and Continuous Delivery (CD). IMHO it was one of the best events at CcHub and I was quick to grab a front-row seat

While all the topics are very interesting I’ll like to talk more about Unit Testing especially because it generated a heated debate at the hub the next day with me at the epicenter defending Unit Testing ferociously against a horde of foes!

It started when concerns were raised that Unit Testing wouldn’t be feasible since we are usually under lots of pressure and that the added amount of code to be written would be a drag on the project. Why not just write the code and test manually  as we usually do? Why do I have to write extra lines of code just to test it? Isn’t that a waste of time and energy? I have a deadline, and many projects to work on, is Unit Testing really necessary?

Being a developer I totally understand these concerns and I did share these concerns up until that meeting. I looked into Unit Testing with CakePHP & SimpleTest years back but didn’t adopt it because it looked unnecessarily complex to implement. Just imagining writing tests for an API I developed, or that magic class function that is the core of your application was almost depressing! After Patrick’s presentation I concluded that Unit Testing would actually make you develop faster, code better and make it easier to develop higher quality software.

So what changed my mind? What was the missing link I found? It’s basically the approach to Unit Testing. Like I mentioned earlier, writing unit tests for existing code is difficult. A better approach is test-driven development (TDD) i.e. write the tests for a functional unit of your appliation first and then code the functionality until it passes the tests. This approach makes it easier to write tests for your application.

While TDD addresses ease of writing tests I definitely don’t think anyone who has been concerned about how much more workload unit testing gives them is impressed. Rather, at this point I think they would be more pissed off. To answer that, I’ll say we need to think long term not short term. Yes, unit testing adds more workload and eats up your time in the short term but when you look at it long term you’ll see why it’s worth it because it saves you time, effort and improves software quality in the long run. Unit testing helps you easily identify issues before a catastrophe happens i.e. you deploy and your customer uses it, gets crappy output and is pissed off.

Unit testing helps improve the quality of your software and that in turn reduces the amount of time you need to spend debugging, offering customer support, fixing data corruption issues. Quality is cheaper in the long run. I’m always amazed by how many Toyotas and Hondas are on the road when I’m driving. Having driven both I know why people would rather pay extra to get these cars than buy a cheaper car.

Quality is important and is also a good marketing strategy. A satisfied customer is more likely to stay loyal and refer other people to you.

Would I use unit testing even though I’m the only developer on a project? YES!!! The more reason why I need it. I don’t know about you but I hate testing. Unfortunately in our world where a new feature can break 3 other features it’s essential that a comprehensive test be done every time the application is modified. I see Unit Testing helping me automate that process and thus free me to concentrate on  the work to be done.

Unit testing is also crucial to Continuous Integration and Continuous Deployment.

My conclusion, yes unit testing & TDD requires lots of time, energy to kick-start and maintain especially in the short term, but in the long term it saves time, money & CPU cycles .

Dynamic Google Maps Markers i.e. with Labels

Yesterday I had a little experience that pretty much looked like this

The main challenge was that I had implemented Google Maps, integrated MarkerCluster and got it to look like this.

Client liked the cluster but wanted it to be clickable (for popups). Unfortunately,  MarkerCluster doesn’t support clicks, and Google’s Marker doesn’t support those little numbers on top of the Markers. So I created a little hack that solves the problem as shown below.

The solution is pretty simple as the code below shows. Basically I created a blank marker and used PHP GD to write the appropriate count on the marker. Pretty simple right? Fortunately it works!

One issue though, caching is important if you wanna go live with this solution. No point creating the same markers over and over again.

$im = imagecreatefrompng($this->Html->url('/img/marker_blank.png', true)); # Set Full URL of marker image (cakephp helper)
imagealphablending($im, false);
imagesavealpha($im, true);
$orange = imagecolorallocate($im, 220, 210, 60);
$px = (imagesx($im) - 7.5 * strlen($count)) / 2;
imagestring($im, 3, $px+1, 9, $count, $orange);
header("Content-type: image/png");
imagepng($im);
imagedestroy($im);
exit;

PHPExcel – Simply fantastic!!!

Thanks to David Umoh I’m encouraged to write again. Nothing beats others finding your writings useful and that made me really glad, after all that’s the reason I write.

I recently decided to implement an invoice generator (a personal project) and  first thing that came to my mind is PHPExcel and I thought this is an excellent topic to write on.

PHPExcel is an excellent PHP library that can generate Excel 2003, Excel 2007, CSV, PDF, and HTML documents. As its name implies the main purpose is for the generation of Excel documents. PHPExcel not only generates excel documents but it can read excel documents. It is feature-rich, supports cell styling, adding data and formulas, pictures, and much more.

One thing I really love about it is that to switch between formats. For example, I once created a report generator with it and I could easy output PDF, CSV, Html, Excel formats by just changing a few parameters.

Here is an example of a document generated using PHPExcel.

PHP Excel Example from phpexcel.codeplex.com

 

Can’t surf the internet? Try checking your DNS servers

A lot of times when connectivity seems to be down on Nigerian ISPs the root cause is that the DNS servers are down. This happens a lot on MTN. I just had one of those moments and resolved it by using Google’s Public DNS servers:

8.8.8.8
8.8.4.4

To test if your DNS server is down simply ping the IPs above. If you can but cannot resolve a hostname then simply changing your DNS to those above will set you free.

Android USB Tethering Rocks!

Surrounded by high speed internet in the air but I couldn’t browse! That was like really really discouraging. So why? Well I had not been able to fix WiFi issue with Ubuntu 10.04 and my USB dongle was no good. Then my Android phone came to the rescue. Previously I had tried USB tethering when using a mobile network 3G/HSPA but never with WiFi. I connected to the WiFi network with my phone and then activated USB tethering and like magic my laptop came back to life!!!! I’m impressed!!!