The Pitch

When I look at people getting married it always seems like a lot of stress is involved in the process. This tool is suppose to relieve that stress for a very small fee. It’s also whitelabel, that means that professional wedding planners can add their logo and sell it at their own tool to their clients for a monthly fee.

Like I said it’s a MVP, don’t expect a onslaught of features, I’m trying to focus on a small set of features and build them to be useful in the long term. I also have a lot of ideas to complement or pivot a bit the project. I think the wedding niche can be disrupted and there is a lot of space to do it. I have been developing this project for 4-6 months and I think it was time to do a small breakdown of how this experience has been for me.

My stack

My app is primary a front-end saas. I use jQuery + Backbone.js as a front-end MVC. This allows me to reuse much of my code on the mobile web app because it uses jQuery Mobile + Backbone.js. In the future I will also release a native app on Android & IPhone using Phonegap. It will be my mobile web app + taking photos functionality. I’m really happy of that stack, it makes moving fast really easy on mobile from my desktop app (at the cost of not having a native look). Without that stack there is no way I could release an Android & iPhone app alone.

Frameworks! Out of my way!!

If you know PHP, don’t start something with Ruby or a big enterprise framework (unless it’s educational first). You move faster with tools you know, I’m a front-end developer, my app is front-end heavy. For the API use Codeigniter because it’s easy, swift, small, and is used by a lot of people. I did the error to start with Symfonybefore and lost countless hours learning intricacies of the magic behind Symfony.

It’s cheaper than ever to create web products

Something I really leveraged with this product is the cheap price of online services. If you are bad at design, html, video it does not really matter, at least not for the first couple of months of your company.

Introducing themeforest.net and the Envato network. On the Envato network you can find pretty much anything you need for your startup, and it’s all superior quality and cheap price. Personally, I’m not really good at design, so ThemeForest really helped me find saas templates and saas marketing designs that look professional, I also bough a really nice template card and email template.

That way I really concentrated my efforts on building the saas user experience and moving forward faster with a project that looks nice.

You don’t need big hosting

If you are bootstrapping you don’t need big server, in fact a cheap 10 bucks hosting from Webfaction would do. They even have a SMTP server with good rating for sending your transactional emails. Their servers are fast and not overcrowded, of course if you build up a big enough clients base you will have to switch. But think about this : this blog is on Webfaction getting more than 100 000 views a month and its running as fast as Wordpress allows it.

You don’t need to scale now, at least I’m not.

Finding time is hard

I think that one is obvious but bootstrapping products is time consuming and you can get quite obsessed with it. I guess being obsessed is good for the product but definitely bad for you. Obviously I got other ideas for weddingdeck, bigger ideas, but for now here you go, even if your not getting married have a try at the product and hit the suggestion box!

Thanks!

All about the DOM

The validationEngine expect your form to be present on the page when you initialize the plugin, and this is where modal plugins fall short. If your using those plugins you generally want to load a new piece of html into your document using AJAX.

In that case you need to initialize the validationEngine after you loaded your modal content. Generally modal plugins have an api that let you do this. Let’s take 2 example, Colorbox and jQuey ui.

Colorbox :

jQuery UI :

That should give you a pretty good idea of what you need to do whatever the plugin.

Why IE handle load() this way

Simple, IE already cached your image, so it does not need to load it back The 2 most know solution to this are one, adding a random string at the end of the image url, like this:

The other solution is to check the height property since if it’s not zero, the image is already loaded:

Well these 2 solutions work, but they are not really nice. In fact this problem can be solved a lot easier.

Use load() first

Yup. That’s it, when you create your image in javascript, before doing anything else use your load function and IE will behave like all the other browsers.

jQuery Mobile

First, jQuery mobile just entered Beta3. Lots of bugfixes but also one cool thing that has been baking for a while, real fixed footers and headers are available in the framework. Before that, jQuery fixed stuff was just a gimmick with the fixed bars disappearing when scrolling, now you got the real deal, well sort of. It’s unfortunately only available for ios5, meaning not a big lot of people will see it.

Android does not really support fixed positioning yet, it however supports overflow:scrolltouch. But it seems the jQ teams decided to only implement position:fixed for everybody. There is a nice video of the feature here.

Sencha Touch

Sencha kind of went off the radar for sometimes now, but they just announced something really hot. Sencha Touch version 2 will include a native packaging that will automatically transform your web apps into native apps on android and ios, on osx and windows.

Now I don’t know if they really went there and added ios app native packaging on Windows, but that would be legend… wait for it… wait for it… legendary! More information here.

The problem with handling events with jQuery is probably that jQuery itself makes it really easy to make spaghetti code, so only reading the jQuery documentation you are bound to hit a wall at some point. I’m always amazed at junior javascript developers’ code and how they always mess things up if they use jQuery.

Prob #1 Anonymous functions

When you look at the jQuery documentation for events, you would see something like this explaining bind:

It’s not because you can use anonymous function to do everything that you should, use simple objects for that.

What is the deal with “this”

jQuery always assigns the this value on the DOM element when you bind events, pretty useful, but not really good if we use objects and want to call other methods, that is why I pass the this value as a parameter in loadEvents().

Also since the anonymous function changes our scope we need to save the this value doing var _this = this; at the beginning of the method to use it later.

Using an object you will give you a much better code organization, as a bonus you see every events binded in the js file easily.

Give a context

If you are the kind that dump every js files at the beginning of each page, giving a context to your events can be a very good idea.

Personally I really like to use a parent element for that, for example, I know that everything that happens on the dashboard has a parent with the css class dashboard. So I would do something like this:

On this line: if(!$(“.dashboard”)[0]) return false; we check if the dashboard element exist, and if it does not, we do not load the events, It can save you a lot of overhead at practically no cost. Then we use delegate instead of bind, so if we want to convert this app to an ajaxy app, events would be automatically destroyed if we removed the dashboard element.

That’s it!

I just wanted to share my current code organization, hope it can give you ideas for your organization too!

Update

Following some commenters ideas, there is a couple of things we could do to improve this.

First, we can use !$dashboard.length instead of !$dashboard[0], little bit clearer.

Lets chain the delegate! Since we always use the same parent this is something we can do. Also, wrapping into an anonymous function is not the best idea in the world, 2 things have been proposed here.

We could use jQuery proxy like this $.proxy(this.selectedOption, this), or we could do something like $dashboard.delegate(“#myButton”,”click”, { dashboard: this }, this.selectedOption);.

So lets check our new formula:

This is why I started BackboneFU, in my wildest dreams it would become the resource for Backbone. Anyone who wants to write about backbone will be accepted on the website, so if you want to write something, or already wrote something on your blog and donate the article also on BakcbonFU, you are welcome to do so. There is a nice bio for authors on each articles.

I also added one article recently, Front-end developers to backbone.js.

So there you have it, BackboneFU lives

Personally I find that backbone.js is a weird beast. It’s called an MVC framework, but there is no controller, the events system is completely different from your default PHP/Ruby MVC style and there is a notion of collections. Basically Backbone is a MRVT(Model Route Views Template), scratch that, it’s in fact a MCRVT(Model Collection Route View Template)

So if you are a front-end developer with some MVC knowledge because you are sometimes dealing with a back-end framework you will probably be completely lost. Then you start reading the doc, it seems good and gets you 80% there, but trying to start only with the doc will probably end in pain. Then you go to the todo app example, you understand a little bit more the concepts but there is still lot of WTF.

Then, you search for tutorials, the nettuts tutorial is particularly good. But personally I had problems with what is not really explained in those tutorials, I guess you could call that “edges cases”. Only the videos at peepscode (Did not want to do promotion, but credits where it is due) where successful at really showing me all the power of backbone and really helped me understand all the underlying concepts that come with that.

So anyway, what was the 2 problems I have been struggling with? Well for one when I was binding a collection to a method within my view, I would lose the this reference to my view in that method, and also, my events would not bind to my views and would just never fire.

Events Binding In The Views

In backbone, the views control all the events that are happening “in this part of html code” (in other words, your associated template). Which is really good for decoupling your code, and makes for a very good code structure. Events are handled automatically with jQuery delegates, thing is, the dom element that delegates all the events need to be outside the view, something I did not understand at first. It makes also no sense to me that I can’t delegate my events from within my view, what happen if the view is a popup? I don’t want to delegate to the document.

Fortunately something you can do after your view content is rendered is changing the this.el element to the view container and call this.delegateEvents(this.events) . That took care of the event binding problem.

Update from Josh comment:
If you assign ‘el’ directly to the view and remove it from render, the dom element that delegates all the events will be part of your view. Based on your example, do:

wedapp.view.TasksForm = Backbone.View.extend({
el: $(“.dialogForm”),
…You can then remove this.delegateEvents from render as well.

Example:

Weird Custom Events Behaviors

Backbone has a custom events system baked-in which makes it really simple to handle model states. This is really powerful since when you update a row in your database, for example, the html for that row would be automatically rendered back when you change the data. No DOM data tags non-sense.

Problems is, doing this.collection(‘reset’, handleCollection) changes the this handle to the collection! I was wondering why in handleCollection() I could not call any other method from my current view. Of course I logged this to see what was happening, but since backbone is very particular of what it returns I did not see that handleCollection was returning the collection instead of the view object.

What you need to do for retaking control of this, is to bind it to the view in the initialize method like this: _.bindAll(this,”handleCollection”) . Personally I don’t think it makes sense to handle it that way and it pains me to add this code, but here is no other way that I know of.

Update from Josh comment:
If you want to bind your collection to a callback event, do: this.collection.bind(‘reset’, this.handleCollection, this)

If you pass “this” as the third parameter, you won’t need to do your _.bindAll() in initialize for that method. I’m assuming here that handleCollection is a method in the view.

Hope it helps!

I am a bit disappointed that backbone.js is so hard to get started with. It introduces a lot of concept to front-end developers and do not have enough tools to guide you around.

I think tutorial videos through each sections would really help a lot the beginners understanding all the underlying concepts of backbone, I even thought about doing some myself but I’m too much inexperience with it to do that. In fact I think that a getting started guide like rails for zombies would be perfect, but hey, I know it is a lot of work

Script loaders are responding to a weird problem, you would think that browsers do a good job at loading script since its been doing just that for more than 10 years, but in fact not really, it could be a lot better and this is where those technologies come in.

What they do is super charge the loading speed of your scripts by using various tricks, and when I say tricks, sometimes it really means hacks, specially in older browsers like ie6. In my article about script loaders 1 year ago I gave them praised, and I definitely meant it, but currently I unfortunately just stopped using loaders.

What went wrong?

When I first tested labJS I was flabbergasted, it was loading my scripts 3 times faster on a average website. I was looking at optimizing the front-end speed of our framework at my last job (w.illi.am/ a web consulting/agency), and this was a strong contender at being implemented. And we did just that, we implemented labJS at the core of our CMS. It definitely took some fine tuning and we had some weird bugs at first with execution order and dom ready statements, but within a week or 2 everything was back to normal.

Then a new project came with an IE phase testing, to our horror IE8 was giving us wrong error lines, it did not understand what labJS was doing and could not find any script file loaded by labjs. Still we continued to use it. Then Firefox4 came along, our older labjs version was not compatible with it, this was a big problem for us, since w.illi.am/ does something like 50 websites a year, not centralized. We just could not afford to update labJS for each project. This was the end of script loading for us, we had to revert back to our old way, we could not take the chance that older version would not be compatible with future browsers.

** I also heard that some of them had problems with newer webkit releases, prompting another library update.

Is it really worth it to use a script loader?

Personally my response would be no, you introduce in your stack a very big point of failure, if this script fails, your entire app fails, furthermore you *generally* need to follow convention dictated by the library. RequireJS works best if you follow their module convention, and labJS has an api to make it easier to keep the execution order, but it really changes the way you would normally work.

I’m no more at w.illi.am/, but at Cakemail we are currently minifying everything we can into one big js file, like what javascriptMVC does, and loading it normally. It seems to me as the best approach, *some* scripts minifier have been stable for ages, so I know that my production application will not break because of it (it can happen of course, but it is really rare), and in development we just keep the gazillions of script tags for debugging.

That being said, I still think script loaders are a brilliant technology, and I have a lot of respect for their authors. I mean, if your looking for optimizing your page loading time to the maximum, script loaders are a no brainer, its probably your single best optimization beside doing the normal stuff, but it’s not a task to be taken lightly and you must be aware that there will be maintenance and setup cost.

Confoo conference

This year I am trying to do a talk at the Confoo conference, basically it’s an introduction course at code organization with jQuery, called jQuery Spaghetti. It’s probably not for most of you guys and I know it has been done in other js conferences, but I feel like Confoo will have quite a bit of ‘hobby’ jQuery devs since it’s really a diverse conference about all web technologies (hoo and it is also in french). Still, if you like the idea and you’re in Montreal, I could use a vote or 2 for my talk. (You can downvote too, any feedback is appreciate!)

Self-publishing a book

Did you know that anyone can wrote a book and self-publish it these days? and I am not talking about doing a pdf, I’m talking about a paperback book available from amazon. This is what lulu.com and createspace.com are offering. It does all the hard work for you (well beside writing the book of course).

It’s quite impressive to upload a pdf and have a paperback available from online stores, and even physical book stores with lulu.

A book on css, really?

Yup, I am writing a book about html and css templating, this has been done 30 times you might say, but I really think the approach I am taking has not been that used. In this book I am not talking about HTML5, CSS3, grids, etc. I am talking about doing templating efficiently on deadlines with a cross-browsers angle.

The book will walk you through 2 examples (a website homepage and an email), and explain you the problems you will encounter along the way. I’m already 80% done with the writing, but doing image assets takes quite a bit of times.

A book looking professional

Obviously if you are authoring a book, you want it to look professional. Unfortunatly most of us are not designers. Fortunately there is a couple of inDesign book template available, I even found one free, and its a really nice book template.

Of course, we should always strive to make an application as bug free as possible, but users seems to always find a way to break it. You can always expect them to do something you never have think of, and this is one of the reason I created this plugin.

When a javascript error is detected, this plugin will do an ajax request to your server and then sends an email, of course you could also log it in a database. It’s certainly not a revolutionary idea, but still, I was finding the idea cool enough to add it to my list of online plugin.

It’s also very useful for debugging big live applications that you have not written. In which case you want to know if some users hit javascript errors already.

Download the source code

Integration

Load the plugin just after the jQuery library

Your done.

Options

By default the plugin automatically fetch the domain and add it to the email subject, but you can overwrite it.
You can also define a from attribute, I would highly recommend that you change the from setting in the plugin file (jquery.onerror.js) if your going to use this plugin on multiple websites.

The Email

The email received will look like this:

A javascript error has been detected on www.position-absolute.com

Error: variable is not defined
Url: http://www.position-absolute.com/creation/onerror/
Line: 21
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0) Gecko/20100101 Firefox/4.0

Limitation

The plugin works on:
Firefox 3.6+
Chrome Latest
IE 7+

It does not work on Safari (but it will not break your application)