Archive for the 'Web development' Category

MVC and the Zend Framework

Thursday, September 2nd, 2010
In this four-part article series, you'll learn about the model-view-controller (MVC) design architecture, why its use is a best practice when building web applications, and how using the Zend framework for PHP lets you make the most of this architecture. This article is excerpted from chapter 25 of the book Beginning PHP and Oracle: From Novice to Professional, written by W. Jason Gilmore and Bob Bryla (Apress; ISBN: 1590597702).
- Even at this likely early stage of your Web development career, chances are you're already attempting to sketch out the features of a long-desired custom application. An e-commerce store perhaps? An online community forum devoted to stamp collecting? Or maybe something a tad less interesting but non...

The Hidden Magic in TextMate

Thursday, September 2nd, 2010

TextMate has become an essential part of my development arsenal over the last few years.

When you first open up the application, you may be wondering what all the fuss is about- at first glance it looks like any other text editor.

The true beauty of TextMate is the plethora of bundles, add-ons, keyboard shortcuts and tab triggers available.

I’m going to go through some of my top tips on how to get the most from TextMate and increase your development productivity.

Tip 1: Find Your Perfect Theme

Getting yourself hooked up with the right theme is essential to a good days development. There is a huge amount out there catering for virtually every taste, so make sure to hunt around for one that’s right for you. Personally I have two themes that really hit the right spot for me:

  • Clouds & Clouds Midnight – Two delightful themes especially good for the PHP developer inside you. It comes in two flavors – dark and light, both with strong bold colors that help you work on without getting dreary eyed.
  • IR Black & IR White – This is my go too when I’m cracking on with some Ruby work. Again in dark and light versions with fantastic syntax colors. You’ll also find a nice terminal modification for the theme around too.

Theme choice is very much down to preference and what you’ve been used to before, so when you find the right one for you you’ll know. Make sure to search around and give a few a go, but these two are in my mind a great place to start!

Tip 2: Have the Right Plugins

TextMate comes with a great stockpile of neat features out the box but there are a few things you’ll probably think are missing. Here are a few that I’d call essential to get:

  • MissingDrawer (Resurrected) – One gripe I had with TextMate from the start was the side drawer- mainly because it wasn’t a drawer at all. This plug-in solved my woes. This plug-in is a must for any serious developer.
  • AckMate – As the name suggests, this allows you to run ack within TextMate. TextMate comes with a regular project search, but this is much, much faster when you just want to do a bulk find for something.
  • ReMate – Now this plug-in won’t be useful to everyone, but it certainly is for me. If you work on a network mount in the office you’ll find that every time you switch in and out of TextMate your project refreshes and lags, causing you to wait a few seconds before you can do anything again. This plug-in de-activates the automatic refresh and helps save your sanity from going under!

Tip 3: Get the Best Bundles

Bundles are small add-ons that do great things. If TextMate doesn’t default support a language that you work in (HAML & SASS are prime examples) then you can be darn sure there’s a bundle for it out there somewhere. Bundles add syntax coloring, shortcuts and tab triggers to make your development as fast as it can be.

  • HAML & SASS Bundles – These are perhaps the most common bundles to be installed. If you work in HAML & SASS you’ll want these badly.
  • GIT Bundle – If you use GIT for your version control, then this is a bundle you can’t be without. It allows you to manage your repository from within TextMate, do blame checks and much more. There’s also an SVN Bundle if that’s more your thing.
  • CSS & HTML Bundles – Although TextMate comes with some of it’s own, you’re going to want to grab the ones from Minimal Design. They add fantastic tab triggers to virtually eliminate most typing.
  • jQuery Bundle – A great bundle for working with jQuery. Features tab triggers for many functions and some pretty good syntax highlighting.

Tip 4: Use those Sexy Shortcuts

This is where TextMate really comes into it’s own. You can find a shortcut for virtually any function to help you on your way to productivity success. There’s far too many to mention them all, but these are some of the key combos that I use on a daily basis.

  • ⌘T Go to File – This shortcut is truly second to none. Instead of trawling through your project drawer or going through the folders in your finder, use this to quickly jump straight to any file you wish to be in.
  • ⇧⌘TGo to Symbol – This works in the same way as Go to File but for within a specific file. Trying to find a set method or a global variable? Look no further good sir, this is what you need. Especially useful for when you’re working with a massive user model!
  • ⌘LGo to Line – If you’re debugging a stack trace, you’ll want to remember this one. Jump to an exact point within a file to squash that nasty bug!
  • ⇧⌘LSelect Line – Select the entire line of code you’re working on. Chances are you may want to follow it up with…
  • ⌃⌘ + ARROWMove Code – Move the selected code around the file, helps when doing some refactoring of that nasty functional code.
  • ⇧⌃⌥VSend selected to Pastie – This one is pretty unknown but handy. Send the selected code over to Pastie with a private URL for sharing the code – great when you need some feedback from a fellow developer.
  • ⌃SSimple Search – Most folks know about ⌘F as it’s the same in most applications. However in TextMate it loads up an additional window for find and replace which isn’t always what you want. This shortcut allows you to do a quick search in the current file iteratively.
  • ⌘] and ⌘[Block indentation – Indenting manually can be a pain – use these functions to indent blocks of code quickly and easily.
  • ⇧⌃TTo-do list – This feature scans the project for code marked as ‘FIXME’, ‘TODO’ and ‘CHANGED’. It provides an informative list of them along with comments.

Make sure to do some googling for even more handy functions – if you can think of it, it’s probably there!

Tip 5: Learn your Tab Triggers

Tab triggers are for quick code completion and are invaluable to the well-trained TextMate user. For example typing doctype TAB will give you the option of inserting the appropriate doctype of your choice into your document, even HTML5 if you have that bundle installed.

The triggers are different bundle to bundle, language to language, so make sure to check out your specific bundle for more details.

Where to go From Here?

The best way to learn TextMate is to use it and explore. Try new shortcuts out, look into the gears menu and google until your hearts content.

Also, if you have something specific that you find useful in TextMate, make sure to share it in the comments. One of the best ways to learn the secrets of TextMate is from each other!

FOWA. Las Vegas. Baby.

Thursday, September 2nd, 2010

Future of Web Apps Las Vegas logo that says What happens in Vegas stays in Vegas

Feb 7-9th 2011
Get ready for the best event you’ve ever experienced.

Sign up to get notified when Early Bird tickets go on sale.

Around the Web: 37 Signals, Apple, & @Beep

Thursday, September 2nd, 2010

Hey there!

It’s Wednesday, so this mid-week roundup is devoted to all things business and development.

Some links are newsworthy, some retweeted across Twitter, and others just meet our “awesomeness” requirement, and regardless we hope you’ll enjoy them. Without further delay:

Wildcard: Adventures ahead for much-loved and respected Ethan Marcotte (though you may know him better as @beep). 

Please shoot me links to projects your working on or awesome things you’ve released! news@thinkvitamin.com

Handpicked by,

Chrissie (@tenaciouscb)

Accessibility Fundamentals: Introduction [Video Tutorial]

Wednesday, September 1st, 2010

In this video Nick gives you a brief introduction to web accessibility and talks about the organizations that set accessibility standards. You’ll also find out why accessibility is important to the health of the web.



For more videos be sure to check out Think Vitamin Membership, new video tutorials are added daily.

JavaScript Fundamentals: Basic Types and Tools [Video Tutorial]

Wednesday, September 1st, 2010

In this video Jim looks at some of the tools that are essential in any JavaScript programmer’s toolkit. We also introduce some of the basic types in JavaScript, and how to create them.


For more videos be sure to check out Think Vitamin Membership, new video tutorials are added daily.

PHP: Rendering Web Pages Using the Composite View Design Pattern

Wednesday, September 1st, 2010
Welcome to the conclusion of a five-part series on the Composite View design pattern. This article will focus on a way to make use of this design pattern when you're building dynamic web pages. It involves a simple two-step rendering process.
- As you probably know, one of the great commandments of good object-oriented programming says that whenever possible, Composition must be used over Inheritance, as the latter is an overrated way of reusing code. While its fair to admit that this principle should be used with due caution and, for obvi...

How to Track Six Key Metrics for Your Web App

Wednesday, September 1st, 2010

Screengrab of Google Spreadsheet showing various numbers and highlights

I’d like to share six very important things you should be measuring in your recurring revenue web app.

We launched TVM several months ago and it’s going (thankfully) amazingly well. After launch, the biggest challenge became the ability to identify, track, digest and act upon key metrics.

After a lot of discussion with old pros like Mike McDerment of Freshbooks (who has grown his company to 45 people and tons of profit) and a lot of Google Spreadsheet wrangling, I’ve come up with a useful blueprint for anyone running a recurring revenue web app.

I’ll explain the six key metrics first, and then give you the link to the Google Spreadsheet. You can make a copy of the sheet and modify it for your own app.

1. Churn

Churn is the % of customers that cancel each month.

Calculation: number_cancellations_this_month / total_number_paying_customers

This will vary wildly depending on what kind of app you have. For example, if you have a product that does invoicing, your churn rate will be very low because once someone starts sending invoices with it, they won’t want to switch to another invoicing app or cancel their account, as it could affect their customers.

If your app provides entertainment (like Hulu) then it’ll be the first thing people cancel if they need to cut their monthly costs.

Based on my experience, you should aim for a Churn Rate of 5% but anywhere between 1% to 10% is normal.

You can calculate another interesting number based on Churn, which is Average Customer Lifetime (the average number of months that a customer stays with you before cancelling). The calcuation is 100 / churn_percentage. Example: if your Curn is 5%, then your average customer lifetime is 20 months (100/5). This figure will be used to calculate LPC which we talk about below.

2. CMRR

CMRR is ‘Contracted Monthly Recurring Revenue’.

Calculation: (total_number_paying_accounts – number_cancelled_paying_accounts_this_month) * monthly_price

You should be aiming for a monthly growth of around 5% growth (after Churn) in your CMRR. Initially it will be much higher, as your revenues are low, but it should settle down to about 5% growth each month.

Keep in mind that your CMRR has to keep pace with your Churn, or you will actually start losing money.

3. Cash

Cash is good old fashion money in the bank.

Calculation: cash_at_end_of_last_month + (CMRR – total_monthly_costs)

This is pretty self explanatory, but you should be watching this like a hawk to make sure you don’t run out of money. Most likely this will be a negative number for the first several months until you claw your way to profitability.

With TVM, we’re aiming to be cashflow positive on a monthly basis after six months.

4. LPC

LPC is ‘Lifetime Profit per Customer’.

Calculation: See the Google Spreadsheet (it’s complex!)

This is a pretty tricky number to compute, so I got a little help from Marc Roberts (of Neutron Creations) on this.

Essentially this helps you understand how much profit each customers brings you, after all your costs. It takes into account things like Churn and Average Customer Lifetime.

This figure should grow over time but if it becomes too high, then it’s an indication that you’re not investing enough back into the product for improvements or customer support.

Typical numbers for SAAS apps range from 50% – 70% net profit (which is insane when you compare them with traditional businesses).

5. CACR

CACR is ‘Customer Acquisition Cost Ratio’.

Calculation: See the Google Spreadsheet (it’s complex!)

This is a ratio that tells you how long it takes to recoup your marketing costs. There is a great PDF by Bessemer Venture Partners that dives into this in detail (download here). Their suggestion is that you don’t want this number above 1.0 because if it is, you’re not spending enough on marketing. However, I think you should be more profitable, and thus see this number well above 1.0.

In general, this is a really useful number to see how aggressively your re-investing back into the company to grow the user base and revenues. If it’s too low, then you’re not making enough profit. Too high, then you’re not spending enough on marketing.

6. CPA

CPA is ‘Cost per Acquisition’.

Calculation: marketing_costs_this_month / number_new_paying_users_this_month

A lot of venture backed companies are told to spend up 10 – 12 months of customer revenue to acquire a new customer. So if a customer pays you $25 per month, then you should be prepared to spend $250 – $300 to acquire them (this obviously assumes you have a LPC that’s much higher than that).

I believe that is too high and we aim for CPAs around 1 – 2 months revenue. This view is shared by several very successful web app entrepreneurs in this space (who all happened to bootstrap their companies).

The Spreadsheet

To tie it all together, I’ve shared the final spreadsheet with you via Google Docs. I hope you find it valuable and would love to hear your feedback and opinions.

View the ‘SAAS Model’ Google Spreadsheet

Sytling Submit Buttons for Mobile Safari

Tuesday, August 31st, 2010

As discussed on the most recent episode of Think Vitamin Radio we have been working hard on the redesign of this site and have been looking at how the site reacts when rendered on the iPhone using media queries (if these are new to you then Brian Suda’s most recent article will get you started).

One thing both Mike and I had noticed is that submit buttons, when styled with CSS, appear to have a will of their own when viewed on the iPhone.

Submit Button Demo

Here’s some basic CSS for a submit button:

1
2
3
4
5
6
7
8
9
10
11
input[type="submit"] {
    background: #262C32;
    width: 150px;
    padding: 9px;
    letter-spacing: 1px;
    border: none;
    color: #EFDDA8;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}


There’s nothing complicated here. We are just adding some basic properties such as background colour, padding, letter-spacing and applying vendor-specific border-radius. Here’s what we get when viewed in the browser (Firefox in this case):

So far so good. Now let’s look at a screenshot of that same button viewed on the iPhone (screenshot taken from iPhone 4 Apple SDK simulator):

For some reason the button now has a gradient, the text is in the wrong position, the corners are very rounded and the padding appears to have not been applied. Not the intended result.

The Solution

Luckily there is a very quick solution to this problem. After some searching I found out that unless explicitly told mobile Safari will change the appearance of buttons & controls to resemble a native Apple control. Thankfully there’s a simple fix.

1
2
3
4
5
6
7
8
9
10
11
12
input[type="submit"] {
    background: #262C32;
    width: 150px;
    padding: 9px;
    letter-spacing: 1px;
    border: none;
    color: #EFDDA8;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -webkit-appearance: none;
}

Notice the last line of our CSS? By adding -webkit-appearance: none; we are telling mobile Safari that we explicitly don’t want our button to be styled like a native Apple UI control.

After adding this to our button’s CSS we get the following result on the iPhone:

As you can see (and they are different screenshots) this is identical to our first picture.

If you haven’t already I am sure you will come across this when developing for the iPhone, I hope this saves you a few minutes head scratching.

Further Reading

Joomla Layouts: Customizing Your Website

Tuesday, August 31st, 2010
This is part two of a series on Joomla web development in Ubuntu. In the first part, you learned the basic but very important website development skills in Joomla. In this part, you'll learn how to work with templates and other aspects of creating a customized Joomla-based website.
- Just to refresh your memory, the skills covered in the first part included the following: Changing your password in phpMyAdmin (in case you forget your administrator password). Changing the default and uploading Joomla templates. Working with and activating new Joomla templates. Working wi...

Created by DesignForWeb company. All rights reserved © 2007-2010. Check also the iPhone / iPad developers blog
Disclaimer
The materials collected in this blog were taken from open access sources. We try our best to preserve the copyrights of original authors and clearly state the authorship as well as link to original source website where it's possible. Please leave your comment if you feel offended by any post or if you dispose of any information about breach of copyright law in this blog. We will do our best to resolve the situation immediately.