tspore.com

SaasSoft a Lean Startup

2011-03-16T00:00:00+00:00

Over the last 6 months my team and I have decided for the most part to leave behind working for marketing agencies, and head in a new direction actually doing what we love. We’re building unique software that focuses around targeted niche markets. This radical departure has been quite strenuous on my pocket book, as I’m keeping myself and 2 others employed. However, with the maintenance contract and a few small jobs coming in, we are making a life long dream happen. Not to mention I’m very lucky to have such a loving and understanding wife who fully supports me in this venture.

Within the next 5 years we’re planning to release 5 software products which will be built on a software as a service (SaaS) platform. I believe the days of buying expensive software to run on a computer are over. The trend is now to move “To The Cloud”. I have also come to the conclusion that instead of using the old company name, which had a business focus of working with agencies, and non profit organizations, it would be best to create a new company focused around SaaS software. We just finished and submitted the paperwork this week for a new company called SaaSsoft.

Our first public project under SaaSsoft is TombFinder.com. Its goal and mission is to create a new market of specific software for managing and finding burial records. To date we have not found any direct competitors, just a few random websites that only manage burials, tombstone records, and eulogies in different and unique ways. With tombfinder.com we want to create a unified brand and identity so that any cemetery website you go to you can find information in a quick manner. So far we’ve created a licensable API (releasing this summer), and an administrative iphone app that cemeteries can use to quickly upload tomb stone photos and GPS info. The site also provides a unified search space to quickly sift through thousands of records to find deceased loved ones, And a unique site for all participating cemeteries in the Database. Our goal is to provide a 3-7 static page website and database of all the records on the site.

Since November we have come such a long way! Right now we’re focusing on making sure all data is correct and well laid out before we push forward with any additional features. We’d like to be able to provide our service to at least 10 cemeteries by the end of June. In order to keep up this record pace with a small staff, we need to make any and all decisions quickly, such as our decision to use an app software site we stumbled upon just this month called AppSumo, as it’s a nice fit for our project. AppSumo also exposed us to lessaccounting, which will be helpful as we’re also in the process of setting up our accounts receivable, and the thought of using quickbooks, is dreadful especially on a Mac. This week I have also been looking into what SMTP server we are going to use. We’ll most likely end up using our old SMTP mail server, Google’s (which as a SMTP is slow) or a service such as sendgrid or postmark. Although, Postmark is a part of the AppSumo startup bundle, and would simplify our needs to get running quickly and can be changed in 6 months if necessary.

All in all, I highly recommend taking a look at the AppSumo startup bundle - appsumo or leanstartupand while you’re at it go and take a look at our project here - www.tombfinder.com and out first client - bards.tombfinder.com We’re currently going the route of self funding, but I imagine over the next couple months that may having to change a bit.

Finally between now and March 23rd vote for us to win some start up cash - Tweet

jQuery Cross Fade

2010-10-10T00:00:00+00:00

for a quick 5 page website basically what we wanted to create was a hover effect when a person hovers over a link. So we could use a couple of methods, but I thought that it would be a good excuse to create a plugin. The reason for a plugin is because on each link a different image will fade into view, and after you mouse off the link, it will fade away. So I could write this fade function many times, however, that is a lot of code to manage, and it would make more since to write it once. To begin with I had a few absolutely placed Div’s on the page which each div holds 1 background image that we will show and hide. I next hid each div by setting the opacity to 0.

The CSS:


  .about {
		position: absolute;
		top: 0;
		left: 100px;
		width: 900px;
		height: 350px;
		background: #FFFFFF url(images/1.jpg) no-repeat;
	}

The first part of the JS:


  var backGrounds = $('.vendors, .cinematography, .production, .talent, .about ');
	 backGrounds.css({"opacity":"0.0"});

Now we have a div with each image, and all of those div’s are hidden using opacity.

The Plugin

Next I created a cross fade, in which each link when hovered, will fade in a div tag. The HTML:

<ul class="menu"> <li id="ctl00_genAbout"> <a href="about.aspx">About</a> </li> ....

Here is a unordered list used to build a menu.

The JS element call:


  $("#ctl00_genAbout").crossFade(".about");

Here I have create a plugin called “crossFade”.

The plugin: (function( $ ){ $.fn.crossFade = function( option ) { this.hover(function(){ $(option) .fadeTo("slow", 1.0); }, function(){ $(option).fadeTo("slow", 0.0); }); }; })( jQuery );

From the call is in the menu an item with the id ctl00_genAbout - is hovered the div .about is fades in and then when it fades out when a mouse moves off the link. In the plugin it uses the jQuery the keyword “this” refers to to the id “ctl00_genAbout” - the second paramater “.about” is the option marker in the function.

Conclusion

Overall it is very easy to build a jQuery plugin. Overall in less than an hour I figured out how to build the plugin, and even though this is a very simple example, it is still useful in a real world example. For more information on how to build or author a plugin see this page.

Using Human Actions to plan projects instead of misconceptions

2010-08-21T00:00:00+00:00

The Rub

I work regularly with a few agencies, and small companies, and more times than I can count I set a request for work. “We would like a website built.” So we have a brief discussion, or email banter, and all parties have a series of preconceived notions (many times their are not 2 parties but multiple parties in a project). I setup a work order and get to work. Next we get 25% of the way done, and then the client has some changes, expanding the job requirements by 50%. Then I say this isn’t in the work spec, the client is not happy, they see it as we are gouging them, or not fulfilling a basic requirement, or something like that. The other side of the coin, I had a co-worked who ended up not up charging for changes for a project, and was working for $20 an hour - Which is less than what he spends for taxes, and health insurance, and tools. By the end I have seen where all members of a project walk away frustrated and feel taken advantage of in projects.

Agencies

I love agencies, in fact I get a healthy amount of work from them. The issue that I have seen multiple times is that a client goes to an agency, for a project to be built. They then outsource a project to another agency, from that point, to another group, and then finally to a independent contractor or a worker. The worker makes a bid of say $4,000 for a project, by the time it gets back to the client it could be a $16,000 - $20,000 project. When a client wants to make a change they say hey I’m paying good money, you guys need to do this. The worker, says I bid for 2 week’s worth of work, this change will cost me 2 days worth of time, it is going to be a up charge.

Who’s right here? A the client - who feels entitled to make perceived small changes (though small changes can be relative here.) The worker - who discovers that a change can be an extra week’s worth of work, because it demands a total refracting of the project. Or the agency who is deeply invested in the project. They manage the clients, they are involved in maybe the graphic design of the project, and they are using up hours on this project.

In my opinion all parties are right. They all from their own point of view are correct. I think from doing these projects backwards, as I have done for the last 10 years is the issue here. The problem is instead of spending a week up front sketching out what people want, it is a rush to production, and instead of a project taking a month, it takes 6 months. Instead of being in budget, we have many parties which are trying to make up for extra time, in this case what we are bartering is time.

I decided 6 months ago that for me to work a paradigm had to be changed.

Behavior Driven Development

About 6 months ago I started to explore Behavior Driven Development. Basically it sets in plain language the goals of a project to be performed. See wikipedia for more info on BDD. Probably the most popular BDD framework currently is cucumber, and I think it is a great framework. But in my opinion it also doesn’t meet the initial level of project overview. To get the project laid out, with a correct budget, and timeline, I think that BDD needs to be done at the earliest stage possible. That is when the client comes to the agency. Before any budgets, before any mockups, before any contracts. In fact right after the initial meeting is the correct place to start.

A Simple outline

I don’t want to give away my whole strategy, nor would I say that I have perfected this process yet. But I have used it with 2 clients on major projects, and am currently working with a client from initial idea using this model, and overall it seems to be the best formula for building a web application, that I have found.

Step 1 thought bubbles

After an initial meeting, take what the client has given and create a series of thought bubble about what the client has told you. I usually send these notes to the client, to just make sure I got the project correctly.
Step 2 - User Usage Diagram

In this step we layout how we want a person to interact with the application. E.g. Bob wants to share about his new car…. A lot of ideas are able to be fleshed out, quickly. So take a project I worked on last month, the client wanted an iPhone app, with some data coming from a DB. Well 1/2 into the project since we didn’t really have this fleshed out before hand, the client said he expected a web UI to manage subscriptions, ads and data. This was totally new to us, and not part of the original spec. But if they had done some usage diagrams to start with then that would have been part of the original bid. Instead of tweaking the entire project to work with a website. I came in late on that project and quickly built up a web ui, but even that changed a few times.
Step 3 - Create a todo list and a timeline

Now that the client has agreed to a basic usage diagram, we next setup a todo list, with such information such as timeline, DB tables, work spec, etc. It is after this information is setup we can give a bid. All in all we have only put into this project a small fraction of the work, and after less than 1 weeks worth of work, the client know what they are asking for, as well as has a todo list. Even the agencies can now get involved in the project and begin working on their parts. Also now when someone bids on part of the project they can have item A - $400-600 item B - 900 which is taken straight from the usage diagram, which the client and the contractors have all agreed on up front. Everyone involved on the project are speaking the same language.
Step 4 - A model -

Since I primarily deal with web technologies, I next like to build a quick model. This model is for the client to get a overall feel for how it works, as well as let the client, and stakeholders figure out what they want. This model will be a totally insecure website, it will use a tool like Rails scaffolding to quickly build the application. Also at this point it should be done with a few visual items as possible such as colors and logo. Some JavaScript interactions can take place if they help give an overall enhancement to the application. But overall we are about simplicity. All parties can be involved in changing the scope of work, but before actually building the project isn’t this the time to do it? I think so. The key here is to get at least 20 users involved in trying the application out.

Ideally I think this would be a perfect time for a bid, but so far no one has taken me up on it at this point. Since actually having a test model it would be nice to wait until this time for a final spec. Overall, we are looking at around 2-3 weeks total work here. Not bad for a functional sample application.
Step 5 - Graphic design & population -

All members of the team are interested in getting moving on the project, with a sample project built, we can now begin the overall branding of the site, as well as start getting the data together for the application.
Step 6 - Beta release

Once the application is built its time for beta users. I really like invitation systems, and gathering as much feedback as possible.
Step 7 - Public launch

Example User Usage Diagram

Now without giving away to much about a sample application that I’m currently working on. Here is a screen shot of part of a usage diagram. The story goes down the left hand column - Behind the scenes interactions, questions and comments are on the right side of the page. For a good picture of the project, I usually build one of these, show it to the client, and then have the client build a second one. While they are doing it, I build another one, and then we collaborate and discuss these as a starting place on the project.

Conclusions

Overall this is totally different than I have seen any other project built. Instead of a client spending 10k and finding out that they can’t do the project. This model will cost 2k to get started. Overall we will have a true outline for the project, and have well managed expectations. Everything that we are missing in to many of these projects. Overall, I wonder what others think. Overall, I this whole process has really helped the clients who I have used it with, and as always if you or your company could benefit from this service feel free to send me a email for a quote.

Version Control

2010-08-19T00:00:00+00:00

All web developers should be using version control software to maintain their local copies of software. For example, you are working on a brochure style website, and the client asks for a small change to the layout. They they don’t quite like that change and ask for a different version of it. Finally the next day they ask to go back to the version of the site from 2 days ago. Overall, you may not remember what that means, but if you had your site under version control software it would simple be a means to fix the site.

Or take the times in which you reformat your computer, and its been 2 years since you last looked at a project. But since you have deleted out the files off your computer you now need to reinstall them from the live server, and in so doing you most likely don’t have all the original source files or your notes. If you had taken the time to add the files into version control software you could quickly just pull the files from a central repository and get to work.

All of this sounds good and I think that most people would agree we need to keep our software under some type of version control software but it has to be quick and easy.

I have a github account, and use git, but at times I would prefer to use mercurial, or another solution. In my opinion any of these distributed version control software solutions are fine. However, I don’t want to make all my projects public, nor do I want to pay for every single project to be hosted on github (or other service). Some projects that I want to be released to the public are a great place, and other projects that I am working with many developers on, can be in a private github account. But for me to pay $22 a month to host 20 private accounts is a bit extreme.

Use DropBox

Overall I have been using dropbox for around a year. I often use it to share between my computers files such as my 1password DB Or keep my todo list in sync. However for the last month or so I decided to expand my dropbox usage, to maintain all my current web projects.

1 I assume that at the point I go to deploy an application my computer will break.
I would like to do version tracking with projects
I need to have all my projects available to me on any computer, as well as with those who work with me.
In 6 months I want to be able to quickly grab my project, source files and notes on a website to get upto speed quickly.

To help keep all of that and more in sync I have been using drop box and recommend that you look at doing the same download link. The dropbox crew has made setup and sharing files dead simple. In many ways dropbox is what I always hoped my .mac idisk to be.

Setup your todo’s

I use textmate all day long. I grew tired of having 20 applications open on my computer, so I decided a few months ago to abandon omnifocus (at least for now). Instead I found a textmate plugin called text-bundle. Basically all this bundle does is create a heading with a : - and either a dash for items to do, or checkmark for tasks completed.

Usually I have set for any given day 5-10 tasks which need to be done, then as I complete them I check them off the list. Some of them need notes, so I enter the date (isoD (tab)) and write a note. I also have 2 subfolders one called archive and the other projects.

On my todo list it can hold about a months worth of tasks, and billing notes for each month so once that the month is completed I move the old todo list for the month into the archive, and I can get to it if I need it or totally ignore it.

For my active projects those are keep in a Projects folder with the name of the client and project e.g. WidgetIncHomePage.todo. When I’m talking over the project I use the task bundle to make my notes - usually a section at top has the list of todo’s, and then at the bottom has notes from our conversations. As I complete the action points I check them off the list, and make any additional notes. Finally once the client is satisfied, I archive the task, add the billing to my toBill document, and move on.

Between textmate and dropbox - I have managed the project, with no extra software running on my computer except my text editor.

Second I have a central location of all my notes, and I can access them anywhere with no problems. I don’t have to worry about backing them up either. So at the end of the month I have 1 place to look up billing, 1 place to manage my client notes, 1 place to keep my todo list straight.

Git repository

I also need a repository to keep my files backed up. So what I have done is create a folder called GitRepo in my dropbox folder and I backup each project to my gitRepo folder. Basically I cd into my folder I’m working on, and with the repository ready I create a clone of it to /Users/tspore(my user folder)/Dropbox/GitRepo/Allplaces.git(the name of my site). Next I create a remote connection - git remote add dropbox <- All of my projects have the remote now of dropbox. Once I’m ready to backup I just git push dropbox and the projects are backed up to my dropbox.

$ git clone –bare . /Users/tspore/Dropbox/GitRepo/Allplaces.git

$ git remote add dropbox /Users/tspore/Dropbox/GitRepo/Allplaces.git

$ git push dropbox

If you don’t add in the –bare, you will find a lot of issues with adding and pulling files in the future. Also I can now just share a repository, and they can quickly make changes. Easy Peasy.

The Story so far

So now I have all my projects under version control in this case using Git. I have all my project notes in a central location, in my todo folder. And also I have all my files backed up. I can access all of this anywhere on any computer. I am 99% done.

If you want to pull your changes -

$ git pull dropbox master

Publishing a site using SSH

So 99% of the time I can just use ssh to talk to my servers (as in colocation or slicehost or something like that). But I personally don’t like ssh/sftp, I’m lazy, and find that method at times feels awkward. But like a super hero flying in comes GIT.

My basic LAMP server setup looks something like /var/www/site/ . In the sites folder apache is pointed to /var/www/site/public/ , and I have a space to put things like htpassword, config files, etc, 1 directory up, outside of public directory. So back to business -

ssh into you remote server

$ cd to /var/www/site/

$ mkdir website.git

$ cd website.git

(Now you have in /var/www/site/public & /var/www/site/website.git directories)

$ git init –bare

$ git config core.worktree /var/www/site/public

$ git config core.bare false

$ git config receive.denycurrentbranch ignore

$ cat > hooks/post-receive

#!/bin/sh

git checkout -f

$ chmod +x hooks/post-receive

back on your local machine

git remote add web ssh://lamp.server.com/var/www/site/website.git

git push web master

Basically now I can issue a git push web anytime to update my site. I love super git :D This basic info comes from this article.

Publishing a site using FTP

In my new minimalistic approach how do I publish to the web. I do often use Transmit It is a great FTP client. I also do use git with ssh to publish a lot of sites. But on some sites I only have ftp access. So I needed a way to publish without Transmit. I found a simple tool call git-ftp.

I saw this on github - However, the install instructions were for Linux, but it really doesn’t require much.

$ git clone git://github.com/resmo/git-ftp

$ chmod +x git-ftp/git-ftp

Now when you want to FTP a site to a server -

$ ~/git-ftp/git-ftp push -u example -p -v ftp.example.com

It will prompt you for your password (-p)

The results

Basically now I have version control, backups, centralized notes, simplified billing, and can publish all from my favorite text editor e.g. textmate. As well as I can publish my sites using either SSH, or ftp over git. All in all it isn’t only a time saver but a method to keep organized, and a minimalistic approach to web design.

Children's Dental Group

2010-03-17T00:00:00+00:00

Spaceshipdentist, is a massive beast that they wanted to convert to a CMS. This has lead to 11 different domain names all posting to various pages. We have used Modxcms, to manage this project, and really has come out very well. A lot of SEO work performed by someone else has been done, so we had to match page titles, create 65+ 301 redirects, etc. All in all I think that both the client and our team is very proud of this site.

image 2 image 3 image 4

Spaceshipdentist

HTML Email?

2010-03-11T00:00:00+00:00

Really mass email is or probably should be a dying breed in 2010. Take for example, Costco mass email, it comes way, way to often to my inbox, and very rarely do I even bother to look at it anymore. However, if it wasn’t effective, I would guess they wouldn’t do it. I also have to admit I do occasionally look through it.

Mass HTML email is different than Spam, at some point I did subscribe to it…. I guess and it is really cheap to do it. I give an estimate to a guy who wanted to send out a large post card to a local city (around 6,000 homes) a few weeks ago, and the bid if I remember correctly was around $6k. Between the mail house fee (which was nominal), postage (which was half), printing, and design time, it was way to expensive. So compared to sending out a mass email to 6,000 people which would really only cost a 1/2 days work, sending out mass email is quite cheap.

All in all I think that we are at the end of days for B&H wishbooks (the 1000’s of pages of every single tech item in the world) or Sears Wishbooks. They are to expensive to mail. In fact really for family birthdays and such, I don’t even send presents except through Amazon. Out side of paying my taxes I don’t think I have sent many personal letters either. So perhaps, the dying beast isn’t HTML mass email but instead business postcards.

How to format

First let’s think of email clients, the nicest mail client I have seen is Apple’s own mail. It is quite nice, also the iPhone mail client is way ahead of my old Blackberry…. I keep trying to convince my co-worker to get a Droid so I can play with his, but I will have to reserve judgement on that one. Anyhow the simple rules are all the CSS rules (not CSS as a whole just the rule set BTW.) that you have learned you will want to throw that out the window. Avoid DIV tags, use lots of tables, and remember use inline styles.

The Rules

I this week just formatted a design for a client which went out, and that brought to my mind the need to create some rules.

First I always do set the font declaration at the top of the page (See the screen shot above) - That is usually the only real property that I do set at the top.
Add in td tags or p tags inline styles e.g. - style=”_rules_” .
You can make it look beautiful but it takes time.
As always I usually prefer to get the final images, and copy from the clients up front if not it takes a lot more time.
Really those simple rules seem to render the design correct most of the time. I also prefer when sending a email to give people a way to click a link to view it on a webpage, as well as it is always smart to also send a plain text version of the email.

How to test

On a mac it is really simple to test how the mail will look. When previewing the document just hit CMD I or File -> Mail the Contents of this page and that should load the message in your mail client. I always try to test the email in 3 locations - #1 Apple mail (I like to see it perfect), #2 web based Gmail (probably the most picky in terms of font colors, and such), and #3 in Outlook (which I figure will be what most people look at it in). All in all that should cover most people and how they will see it, without having to go crazy with testing.

Fillmore Paragliding Launch

2010-03-07T00:00:00+00:00

The Fillmore Paragliding launch is a beautiful place which overlooks the valley. Overall I really enjoy the 10 minute drive to the top to see the valley. It was a bit overcast on the day of this shot, but still it is quite a beautiful place to live. On a clear day you can see the islands.

Fillmore City Hall

2010-03-06T00:00:00+00:00

To get this entire scene I had to use the 8mm fisheye. I have never been a huge Fisheye fan, but to tell you the truth in this case it was a life saver. I tried with the 7mm-14mm but I couldn’t get the whole shot.

Also the City hall is as far as I can tell the tallest building in town. Unwrapped the shot is ok, but I think that the movie is very pleasant to look at. Really I could spend all day looking at these pictures. The biggest disadvantage, was I didn’t quite get the pavement 100% with the lines. But I wasn’t doing this for a client, so I only did it once. (Also you can see me in the reflection.)

The Fish Hatchery

2010-03-05T00:00:00+00:00

The Fillmore Fish Hatchery, is one of my boys most favorite places to visit. Lot’s of fish, birds, and room to run makes it a frequent visiting place for us. Really I think I like the photo more than the video but all it all I think they both work. I don’t know how it happened but their are a few odd bright spots in the photo. The peeling of a 360 degree photo with a straight road is neat to look at too.

Casey's room.

2010-03-04T00:00:00+00:00

This was my first attempt with my current Equipment setup last year. I waited till the light in the room was nearly perfect. But after the first set of shots, I had to use the internal light, so its still good but not perfect -

This shot wasn’t really thought of to be used as a movie, until I assembled it, but I didn’t have a image of the floor So the next morning I shot the scene over again. All in all It is a beautiful photo, just have to crop off some floor, and I would be proud to show it off.

The next day I did shoot the same scene with a top and bottom picture so that I could make a 360 degree movie out of it, but the lighting wasn’t as good.

Really the lesson here is know what you want to do with a photo before you take the picture. (Of course I could always crop down the 2nd one for a print if I wanted too).

Below is the first attempt, not bad for a first attempt, with new equipment. But I think I am going to like this rig.