Shift8 Creative Graphic Design and Website Development

So I wanted to make a Flash resizer that would resize an image before uploading. Sure ok, that has been done. I was lucky to find a very small handful of people doing it (like Ady Levy for one). I was very happy because I never built a Flash movie before. I really don't know AS3 and I don't care to learn right now. SWFUpload is also doing it with their 2.5 beta release. The 2176 Security error Adobe has is due to the fact that you can't programmatically call browse() when browsing file a file to send to the swf or load() when using URLLoader to send data to a server. It has to be called from a direct MouseEvent. A click, a rollover (I think that counts), etc. Basically clicking a "browse" and "submit" button within the swf. Adobe almost made it impossible.

That really is a show stopper for the simple ability to replace the normal file input form widget with a Flash file input widget that is designed to look the same. Then continue on with your HTML form and have a submit button or link at the end that sends off the form and uses JavaScript to do so.

My goal was not to just upload the file to the server however Adobe wants me to. Many of the examples I saw did that. What do they all do? They either upload immediately by using the click event from the browse button or they have a separate "submit" type button to click on to run the load() function.

I wanted to use ExternalInterface. Yes, I am a "poor bastard" who wants to use ExternalInterface to post the data to the server. I tried everything. I tried having another swf with a submit button handle the event and call the other swf via LocalConnection. That failed. I tried cloning the mouse event from the browse click and dispatching the same event again from a function via ExternalInterface...That of course failed. I thought about splitting up the data in chunks smaller than 40kb and sending from one swf to another via LocalConnection then...But realized sending data like that was a royal pain in the rear and wasn't reliable. The LocalConnection calls would be asynchronous, slow, and unreliable. Too hard to piece back together reliably for my tastes and too slow. Adobe did a real good job of protecting things.

Oh, that's right, but I did say almost...

You can't call load() to post file data via ExternalInterface, but you can call load() so long as it's posting string data. So, we take the ByteArray in Flash and base64 encode it to a string. Then on the server we decode it and write it to a file on the disk. Success! It works! Another possible solution would be AMF but that takes a bit to setup, despite that I do have the PHP AMF module and I do use CakePHP which makes it a breeze. Ady Levy uses this AMF technique.

Flash doesn't have a base64 encode handy like PHP does, not at least until Flex 4 I believe, but here's an AS3 base64 class thanks to Steve Webster. Now the downside is we're passing the file through $_POST and not through $_FILE data. I'm using PHP in this case and due to that we don't have any error codes to let us know if the file failed to transfer. We don't have a mime type key in our array either among other things we lose. We have to write the file using fwrite() which may not be as fast???? I'm not sure. Also, base64 encoded strings are 33% larger in size so while we're ultimately decoding back, we're increasing the transfer size. Again the point is to resize an image before uploading so we're already saving a ton on bandwidth. I'll take the 33% more than I SHOULD need if Adobe played nice. I just saved my server from using GD to crunch some file and saved on the bandwidth transfer overall...All of which decreases my hosting bill dramatically and allows my site to handle more traffic.

Pretty nice huh? It isn't really ideal but it does work. It's also pretty reliable after some basic testing. I did send along a 4MB image and didn't resize it. Just encoded and posted. It took a few seconds to encode...But it DID finish encoding and it DID post to the server without a hitch. There will of course be max post size restrictions based on settings in php.ini though...But I'm not ever going to post along 4MB worth of data. It's going to be more like 25-100kb at most. Perfectly acceptable and fast to transfer. Note that you can you can encode JPEGs with ActionScript 3 faster by using ByteArray's asynchronous JPEGEncoder alternatively one from switchonthecode.com or the one I used from Ian at Devote Your Life. Not sure the differences but his had events that helped show the progress when encoding.

Speaking of events, add some more callbacks to notify via JavaScript when the form is ready to submit and when uploading is done (or failed) and voila. You're set. Here's a working demo (it'll just keep overwriting the same files in this case). Not bad for a few days research, but it was one hell of an AS3 hello world!

I truly hope Adobe can change this so that we can call load() when posting multi-part form data that carry images via ExternalInterface. I'm really not sure where the security issue is because posting form data automatically can be done with a normal HTML and Javascript form. It's completely up the user whether or not to attach a file or even fill out form fields...More over WHICH file to attach. The really is no security risk except for user error and honestly if you go up and ask a stranger for their ATM card PIN...Well, if they give it to you...Should we stop making ATM cards? No of course not. So please allow file data to be send via load() from an ExternalInterface call in the future Adobe...Please.

I've posted an update to the Flare application on webOS (Palm Pre and Palm Pixie mobile phones). Again, this application allows users to bookmark geographic locations for future reference along with some notes and a photo.

The update now includes those photos in the attachment of e-mails sent to share the location bookmarks. It also fills in the subject line with the title of the record automatically. Of course the attachment can be removed if one doesn't want the image e-mailed out and the subject line can be changed. This change came about by a suggestion in the feedback (I do listen to them). I was going to do this when I first built the app but felt that it was too presumptuous and sending an image with the e-mail would only take longer to send and perhaps be annoying...But since we are on faster and faster mobile networks these days and since a user can remove the attachment, it's not a bad idea to do this.

The other significant visual change is that the thumbnails are back in the index listing thanks to a recent webOS 1.3.5 update. The command to make thumbnails was enabled again for use and that's very nice. It makes the application look and work so much better.

Last, but not least...The final update was to performance. I've done some testing lately and will also publish those results here for other developers as an example. An example of what happens when you compress your code for webOS applications. It gets noticeably faster! I've done some benchmarks and found that now Flare will run faster. It also means the application size is smaller, but now that webOS stores applications into the media partition of the phone the app limit is not a concern. Still, I like to make things work better so there you have it, a better and faster version of Flare.

Certainly a nice surprise, when I get back from vacation, to see my webOS app Flare in the catalogue. The app built for Palm Pre and Pixi, will store and categorize your favorite locations along with a photo, notes, and an address. It then lets you get directions back to the points of interest or e-mail them to contacts.

I'm unsure of how many downloads there are as Palm doesn't tell you the numbers unless you ask and I'm not going to be one of those annoying people who keep asking...Of course it also hasn't been out for long either. More waiting... Apparently payment is NET60 so I won't be seeing anything until Feb. or March I guess. Then I can get a sense for popularity perhaps. The app is only $1.99 and well worth it if I can plug my own app here. It's pretty well polished off and looks nice. The recent update to webOS destroyed the ability to resize images (making thumbnails) so the listing of the locations no longer has them...It's just a text list. This is no worse than any other app on the phone. However, it's a severe limitation with webOS. I'm still in shock why they haven't provided a way to make thumbnails. You simply can't scale that many large images, the application would be too slow. So...No thumbnails for now. I will fix that along with taking a few suggestions for feature enhancements.

The next update to Flare (not the current quick fix) will include some features that were suggested by a reviewer already. They were features I had initially, but figured might be too much. More specifically, automatically populating the subject line of e-mails...The name of your location there might make sense in some cases...but a more natural subject line of "Thought you might like this Asian restaurant" is probably more common. Of course you can erase the text there so I might put it back...along with automatically attaching the photo of the location - that one I didn't think about. My concern is e-mail size (of course we have 3g now!) and also that you may not need to attach the photo all the time...Plus, you can always manually do this. However, all good suggestions. I do hope to get some more in the future.

For those of you without Pre's or Pixi's or who don't really care about Flare...Some nice notes here from this experience is that this process took about 2 months. From the original submission date (via e-mail, not their new tool/form) to review and acceptance. So if you're looking to build a Palm Pre/Pixi (webOS) app, keep in mind that it takes a while to get it in the catalogue. They are absolutely swamped with submissions, the catalogue grows every day. They recently launched in other countries and now a whole new device. So I can understand. I'm hoping future app submissions will be faster (and they seem like they will be).

So will people want webOS apps along with iPhone apps along with Android versions? Probably. It looks like the market just expanded. As much as Apple die-hards won't want to admit it...We now have other carriers with smart phones that have app catalogs. Verizon with Android and Sprint with the new webOS devices (and Android too). Of course the iPhone has a much much larger catalogue...But, the other devices are growing. I remember a lot of reviews of Palm Pre with negativity toward not having any apps. Of course the reviewers didn't bother to learn a thing about the product they were reviewing! The catalogue was not open back then. Now being open for about 2 months, there's been enormous growth. From maybe 50 apps to well over 500 now. I'm sure there's many still in review since there's many added each day. Palm must have rushed something to not have a well organized system in place for application submission. I think they hurt themselves with launching a device months before there were many apps available to download. I do like the fact that they are expanding the presence of webOS though. The Pixi is great! However, I think they also made a ever so slight mistake that has a big effect. They stayed on Sprint. They need to move into Verizon. So, Shift8 does webOS apps if you haven't gathered that by now. May not be high demand now...But they will be eventually. I have no doubt.

For those of you with a Pre or Pixi, go download Flare! It's a super super useful tool. In all honesty. I designed it to use it personally. It's inexpensive compared to other geolocation and geo-bookmarking apps. In fact, it's pretty unique. There's a few others for geo-caching, some with compasses and such...All with ugly graphics. One that is fairly similar that lets you store up to 3 photos (whereas Flare is just one, I figured why store more than one??) but it's extremely basic and doesn't look very good. So trust me, there was a lot of work put into this app. It was not just put out there as fast as humanly possible. It went through testing. It has a good bit of design thought thrown at it. It's usable. It's handy. Please don't forget to leave feedback, reviews, and suggestions. I do listen to them.

Google launched a new product, in their labs, called Fast Flip. It's a news aggregate that doe a really good job at showing you all the top headlines really fast. The layout is nice for viewing and the left/right scrolling is effective. So when I first saw it, I thought how cool...Would it perhaps use OpenCalais?

OpenCalais is a Reuter's service that reads text and returns information about that text. From their site: "...processes them using natural language processing and machine learning algorithms, and returns RDF-formatted entities, facts and events..."

There's even a Firefox Add-on for OpenCalais that is quite interesting. Although it's for an older version of Firefox. I have not used it since, so I'm unsure if it still works.

Unfortunately Google Fast Flip doesn't seem to use OpenCalais. It just returns web site screenshots and some headlines. A little unimpressive actually. In fact, I think one could make a better version of Fast Flip fairly easily. Not only that, but from what I can tell...The sites on Fast Flip are limited. You can't enter in the sites you frequent for news. While I'm sure that will all change in the future, I'm unsure if they will use something like OpenCalais...Though I think they should.

With OpenCalais, not only would they have the same data they have now, but they would also be able to provide information such as who the article is talking about. Where it is taking place. The events that are tied to it or that the article is talking about...And more. A simple bullet list of "who, what, when, where" would be great. For example, the screenshot I took here to the right, shows a headline that reads "36.3% / 56.4%". What is that supposed to be about? Someone opinion rating? Probably since I see a screenshot of a site that says "Politics," but I can't be sure. OpenCalais would be able to extract better information about that.

Data mining is a very difficult thing. Scraping web pages for data between all of the HTML code and things we can't see that sit inside Flash or JavaScript...But I think Google could have managed to do a little bit better here. Their news site is also just as useful, but contains more information. While Fast Flip does load nice and fast. The Fast Flip page size is about 255kb when I checked and it doesn't use Flash. However, I think it just falls short. I'm not going to sit and criticize it because it's a new product. It still needs to be worked on. I just hope that it will become even better. It's a great idea and it loads really fast. It's perfect for mobile devices.

There have been other sites similar in nature to this. Actually, take your pick...There's dozens of aggregates sites. There is one in particular that escapes my memory...but it was done in Flash and it was an aggregate of news and was broken down by video, photo, and text. It was very successful. It delivered information in an interesting way, but perhaps a little impractical. So I'm anxious to see what Fast Flip turns into...Especially since Google is the king of aggregate.

I'm happy to announce that I'm officially beginning work on Family Spoon! (www.familyspoon.com)

What is Family Spoon? Oh, you don't know family spoon? It's the bee's knees. Ok, ok. Family Spoon will be a web site where you will be able to share your cooking recipes online with friends and family. Boring? Done already? Sorta... So here's where we get into the wonderful world of "getting rich quick" on the internet.

Everyone has a grand idea. The goal is to get as much traffic as you can. You can make money selling people/visitors a service, or you can make money with advertising. Google Adsense's most successful site (in terms of bringing in the most commission for ads) was/is Plenty of Fish. I read somewhere over $10,000 a day. Crazy! Facebook, MySpace, etc. they all pull in ridiculous amounts of traffic. Monetizing a popular site is as easy as throwing on Google ads.

Pretty simple, everyone knows that, my clients ask all the time. Ok, right, but my outlook on it is generally like winning the lottery. Sure you can make a little every now and then with some hard work, but to really hit the jackpot, it is like winning the lottery. Any other expectations and you might be pretty disappointed. I don't believe in shortcuts. Just as there's no get rich quick for building a web site, there is also no get rich quick with advertising, or selling domain names, or any other trick you might see on the internet.

So back to the point. Most recipe sites (and other sites) try to use these shortcuts by pulling in traffic by content. Content is king for the search engines and for people. The more you have, the better. However, you need quality content. So many other recipe sites won't give you the option of sharing or not sharing your recipe. They need to use your recipes for their profit. Family Spoon's model is different. Your recipes will be held safe and private, but shared with family and friends. This is a networking/group based community much like Facebook. So for example, if you hide your profile (I believe by default), the entire world can't see it on Facebook. Only your friends. The same will be true for Family Spoon. So while Family Spoon will have ads, it's geared toward the visitor's experience and protecting the visitor's personal data (as best as possible for what's going on..afterall, it is a sharing site). That's where Family Spoon is different. The quality of content goes up as well because you can trust the sources. As a member, you'll have access to friends and family recipes. Not some stranger's recipe. If you want cookbook recipes, you'll go to the store and get a book.

The overall goal of Family Spoon is to just provide a place to take all those recipes that are written on index cards, all the notes written in cookbooks, all those family recipes, and put them online so you don't lose them. More than that, so you can easily share them with the rest of the family. I can't tell you how many times friends and family would ask for my mother's recipe for "pinwheel" steak grilled on skewers. There's recipes that I want from her too! So this is not a get rich quick site, this is a site meant to be used. If no one else other than myself and my family use it...It's still a success.

Wish me luck! Be sure to check out www.familyspoon.com and maybe you'll find it useful too. I'll try to keep that site for news about the project and this site for related web development and design industry content. Though I will definitely have a write up with a case study for it once complete. The information architecture on it alone is a great example that I'd like to share with everyone for reference and ideas.

Shift8 does offer consulting services for web development and working with Google services such as AdSense, Analytics, and Checkout. Moreover, using those in conjunction with each other to set up goals and track your business' success online. You'd be surprised what you can learn from your visitors.

Recently, a colleague of mine sent me a good article about estimation for design projects. It highlights some very good points and techniques when trying to understand the scope of a project and how long something may take. The first part goes into why underestimating is common. All very valid and good points the article brings up. I just want to bring up another.

Often, we fall victim to the underestimating crowd where we simply say, "Sure, no problem.", but just because we understand something doesn't mean it's "not a problem." Many times we are eager to impress or quick to dismiss the ordinary that we leave ourselves with too little time for things.

I'll give you an example. How many times have you been late to work in the morning? Or late for anything for that matter? Very easy and very common. So, one of the main points of the article (and techniques of Agile development and planning) is to break things down. Let's break down getting ready in the morning for work. Something you may or may not do. We may just say, "It'll take me 30 minutes, so I'll set my alarm to 8:30am.". Ok, so let's take the following.

• Wake up, brush teeth, wash-up - 8min
• Eat some cereal - 5min
• Dress, put shoes on - 2min
• Drive to work - 15min

Most importantly let's think about this: Traffic may be heavier one day. That's an important point we shouldn't ignore, but we often do. This is how we under-estimate and also why we need a buffer.

The idea of breaking down items is a very common thing when estimating. We can't estimate the whole that easily, it's far easier to take it in pieces to figure out. Further, if we're off by say 10% on one step, it's not as dramatic as it would be if we were off by 10% on the whole. It is an estimate afterall. There's a curve when it comes to the accuracy of the estimate. The more time you put in, the more accurate you get...but too much time and the estimate can actually become less accurate (because you're over thinking) and the time invested in the estimate is not worth it.

Again, this is what an estimate buffer is for. This is not padding (to reach some number we had in mind, either time or money) or throwing an arbitrary number on to the end of an estimate. This is actually a formula known as the "Square-Root-of-Sum-of-Squares" which is basically what is says. Each part, you'll take the square root of. Then you'll add those together and take the square root of that total and have your buffer.

So it's always important to keep in mind that some routine tasks can actually have a twist to them...and what if your car broke down on the way to work? We probably wouldn't even buffer for this and it would be an exceptional case, but heavy traffic certainly is not. So always keep in mind a buffer and never underestimate even the little things.

The art of estimating and planning is actually not as tricky as it sounds. First and foremost, it's about protecting everyone so that there's no surprises. It's always better to be over than under. A client is never going to upset if you come in under and in the end you tell them the job is going to be less money than originally budgeted. They will be upset if you have to keep coming back asking for more money. This is where scope and feature creep really come into play as well. This is another reason why breaking out each task/feature is also important.

Agile development can really help us plan around and accommodate for scope and feature creep. It allows us to be able to constantly re-adjust our estimate and plan. It also gives us a very good way to keep on track and know when we're running behind on something. After you break out each task ("story") you can then rank their work effort in a relative manner. This more or less normalizes everything so that you can track progress and come up with what is known as a "velocity." This is basically how fast you're moving through the project and without first normalizing the work effort, you would never be able to know where you stand.

This is the overall theme of the article on Smashing Magazine. To break down your project by task because it's far easier to estimate that way and if you're off with one, it's not devastating. What the article is not really diving into is the whole "Agile" mentality, but it is related. If you're trying to estimate projects and finding yourself always off by a considerable amount, I highly suggest picking up the book, Agile Estimating and Planning, it's a REALLY good book. Even skimming it will change your life as it relates to estimation. Everything from getting ready in the morning to your work day. What I highlighted here is not even scratching the surface of what that book covers. I was also very vague with terminology and the ideology of estimating based on relative numbers or work effort.

Also don't forget Smashing Magazine is a great source for information about the design industry, definitely give them a look.

This is the first post for the Shift8 web site. It's built using my Minerva Blog application which is under the CakePHP framework. While I won't be utilizing all of Minerva's features and will be adding my own, it does support the ability to add audio and video along with images. The main features I'll be using is the ability to publish images and blogs. I may also add a few more features depending on my needs.

That's the benefit of a system like Minerva. It doesn't aim to be a full-feature CMS like Drupal or Joomla, it just aims to provide the tools necessary to build almost any web site. It's not poised for e-commerce, but if that e-commerce site needs other content then Minerva can yet again be the foundation. The idea behind this is that based on the project, a varying amount of the site is already set up. Rather than having a lot of excess features like many CMS' do. It also handles files and media much better than any existing CMS out of the box. Many other blogs like WordPress, and CMS' like Drupal or Joomla! only handle media as an afterthought. It's left up to a module to include media, or a user to link a YouTube video, etc. Minerva puts emphasis on all types of content and not on the bells and whistles. There's no "polls" by default, there isn't a forum or message board, there's no menu system, or other features. It's up to the developer to build those in based on the needs of the site. Shift8 for example has a very basic menu. Having a complex menu system would be a waste.

The other benefit of Minerva is that it is highly scalable thanks to the CakePHP framework. While I highly doubt Shift8 will ever get enough traffic where I'd have to think about adding more servers...It's a handy benefit. The structure of the MVC framework that CakePHP provides is also nice and lends itself well to rapid development. I would not have been able to set this site up faster with WordPress or Drupal. Their template systems are more labour intensive. In my case, I utilize the BlueprintCSS framework for further speed and ease. Having a solid framework under your feet is always good and keeping in mind this system, and a grid system for design, from day one will go a long way.

So that's what's under the hood of Shift8 and many of the sites I build these days when it comes to your everyday site. Of course there's exceptions for special web applications, existing sites, and times when I'm instructed not to use CakePHP. Why would you ever build a site without it?! Well, not every site uses Ruby on Rails, or .NET, or Dojo, so there's plenty of reasons.

Keep tuned here for more insight about questions like that and case studies for various projects. This site will serve as a knowledge resource for myself and my visitors. Enjoy.