The Wojo Group » Miscellaneous

Update from The Wojo Group

Kyle — Tue, 11 May 2010 00:10:34 +0000

Over the years we have made some big transitions at The Wojo Group. Although we used to be primarily concerned with client work, over time we have directed more and more of our effort towards internal projects. Some of these projects have included Motionspire.com, a motion graphics gallery we launched a couple years ago, and SimpleCart(js), the open-source javascript shopping cart that turned out to be quite popular.

However, another project we’ve had in the works for quite some time is HelloRent.com, an apartment finder that doesn’t suck (in our humble opinion). We’re really excited about this project and we believe it has the potential to shake up the industry. Recently we have been focusing almost all of our efforts towards HelloRent. Thus, we have not been able to devote any significant time to development of our other projects, blogging, or client work.

Although we wish we could do it all, we have to be realistic with our time constraints and our abilities. Thanks to everyone who has supported us so far, either by reading this blog, visiting one of our creations, or spreading the word about what we’re up to here at The Wojo Group. We do plan to eventually return to more frequent blogging, and someday we will hopefully have the time to continue developing our other projects. In the meantime, though, please feel free to head over to HelloRent.com, subscribe to our email newsletter, and request an invite if you are interested in giving it a try. As always, we’d love to hear your feedback.

Thanks again for your support.

April Fool’s Floating Text Script

Brett Wejrowski — Thu, 01 Apr 2010 03:00:18 +0000

This year’s javascript trick involves taking individual words on your page and let them float or creep away. Every time the user does not move their mouse for 5 seconds (you can change this interval), the words will start to creep. Once they move their mouse again, the words will return to their original spot.

Simply add this script tag in your header:

And start the creep with the body onload function with the argument being the desired delay (in seconds) before the words start creeping (default is 5 seconds):

I haven’t been able to test this on many browsers, and there are some quirks depending on the content of your page. If you are using a javascript library like JQuery, you may want to use the $(document).onload or equivalent in order to call the creepify() function. Happy April Fool’s!

START THE CREEP

Note: This script will probably mess up some of your styling, so test it out first to see what happens.

Javascript Number.toCurrency()

Brett Wejrowski — Fri, 31 Jul 2009 18:56:33 +0000

While working on simpleCart(js) 2.0 and a few shopping carts for clients, I found myself writing several helper functions for formatting strings and numbers. One of the most useful helpers was a toCurrency() method for numbers:


var myNumber = 8.3;

alert( myNumber.toCurrency() );   //alerts "$8.30"

myNumber = 119427.23529;

alert( myNumber.toCurrency() );    //alerts "$119,427.24"

myNumber = 1231;

alert( myNumber.toCurrency( "€" ) );   //alerts "€1,231.00"

The dollar sign is default, but you can replace it with any symbol in the function call.

Just copy this code to your js file and enjoy! (This code also implements a reverse() method for strings that you might find useful.)


String.prototype.reverse=function(){
return this.split("").reverse().join("");
}
Number.prototype.withCommas=function(){
var x=6,y=parseFloat(this).toFixed(2).toString().reverse();
while(x

Twetris: twitter + tetris

Brett Wejrowski — Mon, 06 Apr 2009 17:44:23 +0000

We developed a little creation called Twetris that uses the twitter timeline to create blocks for a tetris game. The high score list is published automatically to @twetris and you can even retweet your high scores right from the game. It’s a simple javascript/html/css creation thats great for wasting time.
Check it out!

April Fools ‘flip text’ Script

Brett Wejrowski — Wed, 01 Apr 2009 13:45:38 +0000

Over breakfast this morning, I put together a little JS script that will flip all the text on a page. Just put this link AT THE BOTTOM of your page, and it should provide a little April Fools joke for some visitors:

**Make sure to test this on your site, some flash objects or other plugins may not work properly

Enjoy!

Tips and Themes from Future of Web Apps Miami

Stephen — Tue, 24 Feb 2009 03:05:32 +0000

We all just spent a few dedicated days listening to talks and having long hard discussions about building web apps in Miami at FOWA. There’s so much to take away that it’s impossible and far out of the scope of this blog to cover it all here. However, we thought we’d share some of the bigger points that really struck us.

Build as little as possible to start.

If you build a massive app with 300 features, then your users may be stuck using what you’ve given them. However, if you launch your app or new feature with the bare minimum, then your users will use what you’ve given them and tell you what direction to go to make improvements. A great analogy brought up by Daniel Burka of digg is the story of an MIT architect. This architect built a building and instead of sidewalks outside it they just covered everything in grass. Then they came back a year later and got on the roof. They took a picture of all the wear and tear on the grass made by the foot paths of all the people going to and from the building and covered them with cement to make the sidewalks. Let your users pick the direction of your app.

The future of web applications is people.

This was a point brought up many times by multiple speakers. It revolves around the idea that we’ve started and built the web first, then we added people. We are going to focus greater attention on how to build the web more around people and less around technology. Facebook Connect is a huge example that seemed to be everywhere at fowa, including a presentation by Dave Morin on the topic. Facebook Connect is just an example of the broader concept – if you build an app that brings about a lot of new tools and tech for users than you need to learn how to make those tools and tech revolve around people, not their function. Build your apps around people, not just good function.

Be a skeptic.

Don’t ever think that because this tip helped person A it’s going to help you. Don’t listen to how this new tool coming out can really help person B and assume it can help you. Really, really think about the hundreds of tiny factors that made it work for them. Through that search you’ll find out what might work for you and you’ll see it’s nearly always somewhat different. Moral of the story, facebook connect is awesome but I don’t care (though lots of other people probably do). Atlas from 280 north brought a tear to my eye it’s so good, but I don’t think it’s going to work out for me as well as he made it seem it would. Percentage coupons work for 37signals but why on earth should I think it will give me the same results? Be careful of anecdotal tips, find out what works for you.

Twitter, WTF?

Seriously it’s gotten out of control. When I heard, “for the first time ever you can tweet to space” I thought, really? Is that surprising? Is twitter that old that we really view that as a breakthrough? I heard twitter said at fowa as much as I used to hear “web 2.0″ thrown around. Don’t get us wrong, we’re not knocking it. We even have our own twitter page to prove it. However, we did see 10+ people within twelve feet of us using twitter at once (in fact, we started tweeting just to see how many screens we could see our tweet on). Google is not the Internet. Neither is twitter- and don’t forget that.

Recognize the value of what you are creating.

One of the first things mentioned at the conference by the opening speaker Jason Fried (of 37signals) was that web developers need to start charging more. Many of us feel that we have to develop an awesome web app and provide it for free to get anyone to even pay attention. Jason argued that it hurts the industry. Rather than succumb to this temptation, we need to develop sustainable business models. If we create something that is truly of value, there is nothing wrong in charging a fair price for that value. Free is dying, start making money.

Give people a reason to love you.

Consumers have more power than ever before. Not only do they have a growing number of choices, they have more information (and more potential influence over others) than in the past. If people are going to stick with you, they have to have a good reason to. And this comes back to truly caring about your customers. As Gary Vaynerchuk put so eloquently, “You want a marketing strategy? CARE!!!”

Design matters. A lot.

I tend to be a functionality guy. But the importance of compelling design was a theme that ran consistently throughout the conference. Delicious Library was offered as a telling example; this program made millions by taking something that could already be done (making a catalog with Excel) and giving it an attractive and fun interface. Even though functionality is important, at the end of the day we enjoy using things that are well-designed. Make your apps fun to use and good to look at, people lust for movie stars, not old fat balding men.

Overall Future of Web Apps Miami 09 was an excellent experience and we wouldn’t hesitate for a second to go back again. Great job to all the folks at Carsonified.

FOWA Miami next week!

Brett Wejrowski — Wed, 18 Feb 2009 13:21:39 +0000

Ok everyone, we here at the wojo group are getting pretty excited for next week. On Saturday, we’re packing up our cars and driving straight through the night. We’re not stopping until we hit Miami. Why, you may ask? FOWA 2009!

For those of you who are a less of a geek than I, FOWA is the Future of Web Apps Conference. It is one of many wonderful events that Carsonified puts on every year. We will have the pleasure of spending 3 days in downtown Miami, attending workshops, presentations, parties, and fraternizing with the ‘web-developers A-list’.

We are going to try to keep all of you updated from the conference this year, using this crazy thing called ‘Twitter’. So, check out twitter.com/thewojogroup next week (Feb 22-24) for updates, pictures, and stories from FOWA Miami 2009.

And for those of you lucky enough to be going to FOWA also, we’ll see you there!

U of M Career Fair

Brett Wejrowski — Fri, 13 Feb 2009 00:13:55 +0000

Wow. What a day. The Wojo Group decided to have a couple representatives and a little booth at the University of Michigan’s “Mpowered” career fair on their engineering campus. I was able to speak with hundreds of engineers, business students, and designers about our company, our projects, and employment opportunities. I wanted to say thanks to all those who were able to stop by our table, and I enjoyed learning about a lot of students, companies, startups, etc. It was a great, albeit exhausting, day.

Top Ten Free Business Apps for the iPhone

Kyle — Mon, 24 Nov 2008 16:42:56 +0000

The app store is one of the greatest selling points of the iPhone. There are literally hundreds of apps already available (including hundreds of free ones!), with more being added every day. Apple’s device is already a great productivity tool, but there are also some additional applications that can really help you and your business succeed.

So without further ado, here are the top ten (free!) apps not to miss for your business needs.

1.) PageOnce

Access all your accounts from one app.

In order to make this app work, you’ll need to get an account at PageOnce.com- but no worries, this is free too. PageOnce is a useful site that allows you to view many different accounts on one page. This can range from social sites like Facebook to email accounts. However, the real use for PageOnce from a business perspective is the ability to add financial services accounts to the page. It supports more than 6,000 financial services- including credit card accounts, bank accounts, and investment accounts.

The most useful aspect of the app for the business owner is the ability to check bank account and credit card information easily right on your phone. Whether or not you use the PageOnce website, having one-click access to your bank balance and recent transactions is really handy.

2.) iProcrastinate Mobile

Easy task management.

There are plenty of to-do lists and project management applications for the iPhone, but most of the best ones cost money. Not so with iProcrastinate Mobile. This terrific application gives you a slew of features without being overbearing or difficult to use.

First, you create your own groups to categorize your tasks. Adding tasks is quick and easy, but you have plenty of options to work with. You can set the due date, write a brief note about the task, and set the priority. You even have the option of adding steps to your tasks. Plus, you can add team members from your contact list to tasks.

As if this weren’t enough, iProcrastinate Mobile has a couple other features that make it practically irresistible. First, the ability to create “smart groups.” You select which categories you want to aggregate, and you can create a group that will show you all tasks that are due within the time period you specify. I’ve made a “Due Today” group so I know what needs to get done immediately and a “Due This Week” group so that I can do some more long-term planning. The second really great added feature is the ability to email your task list, either to yourself or to anyone else.

iProcrastinate is also really easy to use. When you want to delete an item, simply ’swipe’ it and delete it. If you are looking for a certain task, type in a key word in the search bar at the top of each category page. You can also color code different types of task for easier viewing.

Finally, one of my favorite features of this app is that it displays the number of due and overdue tasks from the home screen. This allows me to easily see how far I’m falling behind with all my tasks. Depressing, but useful.

3.) Wordpress

Easily access your wordpress blog.

If you built your company blog using Wordpress, as we have, then you may want to get this nifty little application. Adding blogs is really easy, and you can manage all of them (if you have more than one) from the same interface. You can write a new article or edit existing ones, including the tags, categories, and status. Although it will not usually be practical to write your blog entries using your iPhone, it can’t hurt to have the ability. It’s most useful for looking over articles and making quick fixes while you’re on the go.

4.) Box.net

Take documents with you on the move.

Accessing your spreadsheets, presentations, and other documents while you are on the move can be very useful. Box.net provides an convenient way to access, share, and collaborate on your business documents. You just set up an account at the Box.net website (don’t worry, you can get a 1 gig account for free). It’s a breeze to upload your documents and share them with others as well. The app is clean and easy to use as well.

5.) IM + Lite

Although instant messaging is often the bane of productivity, it can also be an extremely useful tool for business. There are several possibilities to go with here on the iPhone, but I would recommend IM+ Light. I’ve had several problems with the AIM application, and the IM+ app offers some extra great features. Most important, it allows you to use several different services, including

AIM
Google Talk
ICQ
MySpace IM
Yahoo!
Jabber
MSN Live Messenger

Not a whole lot of bells and whistles for this app, but support for multiple services, ease of use, and less bugs than other offerings (in my experience) gives the nod to IM+ Light.

6.) BeamME

Send your contact info to anyone, at any time.

Business cards are really a big pain. They are easy to lose, inconvenient to access, and hard to transfer. The idea behind the BeamME app is to get rid of business cards altogether. Using this service, you can quickly beam your contact information via text or email to whoever could use it.

Signing up is a breeze. You just pick your address book entry (or create one if you don’t have one of yourself in the address book), and you’re ready to go. You can edit your account info at any time. Once you have a card made, you’re ready to go. You can now send your card information via phone or email to whomever you please.

If you choose to send your card via phone number, then the recipient will receive it in a text and will have to go to the rmbrME website to get your contact info. This is a decent solution but ultimately sees a tad inconvenient. The best way is to send the card via email. The recipient can see your contact info easily right in the email, or they can download your vCard and add it directly to their address book.

There still might be something to be said for the traditional business card, but the BeamME app can certainly come in handy if you need to get someone your contact info. The app is simple, clean, and easy to use.

Send via text or email.

7.) Fring

Mobile VOIP.

We do many of our business conferences using Skype, a free VOIP (voice over IP) application I highly recommend. I discovered Fring when I was looking for a way to join the Skype conversation directly from my phone. As long as you are connected with wi-fi, this nifty application allows you to access your account while you’re on the move. Another advantage: calls are completely free if you make them with Skype.

8.) Bloomberg

Worldwide market indexes.Detailed information on individual stocks.Create and track your own portfolio.

Whether you invest in the stock market or not, it’s good to know the state of the market and the economy. While the iPhone comes with a native stocks app, it really doesn’t get the job done. A much better solution is the free offering from Bloomberg. You get up to date reports on all the major markets- Dow Jones Industrial Average, NASDAQ, Nikkei, and many more- from all around the world. You can also look at detailed reports of individual stocks, and you can select your own portfolio to quickly monitor the state of your favored stocks. Even better, the Bloomberg app comes with a terrific news section so you can stay informed on the state of the economy.

The app also looks slick, is easy to use, and loads quickly, making it the easy choice for tracking the financial world.

9.) iXpenseIt Lite

Mobile expense tracking.

If you’re looking for a mobile expense recording solution, iXpenseIt is the way to go. Remembering why you spent $23.19 at Wal-mart two months ago can be very difficult- so why not record it on the spot?

This app allows you to do pretty much anything you could want. Set your budget, and track how well you are doing. Entering an expense item is quite easy, but you also have a lot of options. Enter the dollar amount, the type of expense (business or personal), place it in a category and a subcategory, specify the date, the method of payment, the vendor, append a note, and take a picture of the receipt. Categories, subcategories, vendors, and expense types can be edited so that you have the options you want.

Once you’ve entered your expenses, you can easily view your data with a number of displays (summaries, bar charts, and pie graphs). Plus, quickly email your data to whomever you choose, either in HTML or CSV format.

One big limitation of the free version is it only allows you to input 10 expenses. If you use it frequently, you’ll have to email yourself the results often to keep track of them. However, having such a limitation does greatly reduce the utility of the application. There is a paid version that allows you to input unlimited expenses, which may well be worth your money if you are attracted to the idea of mobile expense recording.

10.) iTalk Recorder

Simple voice recording.

It’s always good to have an audio recorder with you. You never know when you will want to log a meeting or a good idea that pops in your head. But nobody wants to carry around a clunky recording device. That’s where iTalk Recorder, a free app created by Griffin, comes into play.

The interface is wonderfully simple. You just name your recording (if you want, you can always rename it later), pick your preferred audio quality (good, better, best), and press the big button. You can pause and then resume recording as well. You can easily listen to the different recordings on your iPhone and you can append notes for easy reference later.

Finally, you can head to the support site to get iTalk Sync, a simple program that allows you to easily drag and drop audio recordings from your phone to your computer desktop.

Did I miss something? Leave a comment and let me know if I left a deserving app off the list.

simpleCart(js) + PayPal = E-commerce in minutes

Brett Wejrowski — Tue, 28 Oct 2008 18:23:57 +0000

****UPDATE: Version 2 is now available, this post is outdated. Please go to simplecartjs.com to find out more*****

**update: v1.2: fixed rounding error in price formatting
**update: v1.1: back button works, no trailing comma for options

(if you want to skip right to the example and downloads, check it out here)

Over the past few years, our company has had several clients who have needed a smaller shopping cart, usually to sell just a couple of items. We generally built these small carts using paypal. I realized it would be nice to package this up, and create a lightweight, easy-to-use, flexible shopping cart.

So we made simpleCart(js). The cart is a 10.5kb javascript file that uses cookies to keep track of the items in the cart. SimpleCart(js) doesn’t require any databases or programming knowledge. You simply need to know some basic HTML and have the ability to copy and paste. However, it can easily be expanded to use databases or contain more advanced options.

Setup Paypal

The first thing you will need to do, if you don’t already have one, is set up a free merchant account with Paypal.

Add simpleCart(js) to your pages

Once you have the files downloaded, simply add this snippet to the top of any page you wish to have the cart running on:

You will need to replace you@yours.com with the email address you used to sign up to Paypal.

Adding items to the cart

Any page you have the simpleCart(js) running, you can add an item by simply using a link like this:


 link to add item

You are required to at least have a name and price when adding an item to the cart. However, you can add other fields also. If you want an image to be linked to the item, you can add it like this:


simpleCart.add('name=Shirt','price=6.00','image=images/myImage.png');

Viewing the cart

You may have the cart on any page, and it will update automatically using ajax. To show the cart items on a particular page, you simply need to have an element with the class of “simpleCart_items” on the page. This element will automatically be filled with all of the items in the cart, and will show each field.

You can use any element (div,a,span,p,etc.) and the values will be put in the innerHTML of that element.

Showing the totals on a page

You can show the total quantity or price on any page by simply having an element with a class “simpleCart_quantity” or “simpleCart_total”:


  items

Checkout and Empty Cart links

You can have a checkout or empty cart link anywhere on any page where the simpleCart(js) is active. You do this by simply setting the class of an element to “simpleCart_checkout” or “simpleCart_empty”:


checkout

empty cart

You can use any type of element for these, and you can put anything inside of the element. Anything wrapped in a tag with those classes will link appropriately.

Other Options

Adding other product options to items.


simpleCart.add('name=Shirt','price=6.00','image=images/myImage.png','size=XL','color=Blue');

You can also change the quantity that will be added to the cart:


simpleCart.add('name=Shirt','price=6.00','image=images/myImage.png','quantity=5','size=XL','color=Blue');

The order of the arguments doesn’t matter, and you can add as many options as you would like.

Styling the cart.

You can style this cart to fit the look of your page. The contents of the cart will start with a header row:



Image
Name
Price
Options
Quantity
Total

Each item in the cart will have the following form:



[myImage]
Shirt
$6.00
size: XL; color: Blue

$30.00

And there will also be a totals row:



6
$30.00

You can choose to omit part of the cart in your stylesheet:


.itemOptions,itemImage{
display:none;
}

Or you can hide the header or totals rows:


.totalRow{
display:none;
}

.cartHeaders{
display:none;
}

Change the order of the cart columns.

If you would like to change the order of columns or remove the columns from ever being shown, simply add a line to the top of your page:

Download and Demo

Below are links to download simpleCart(js) and to view a working Demo. One great thing about the cart being stored in cookies is that you can have your items be added on one page and the cart be on another if you wish. The demo reflects this. The main page of the sample store is here and the View Your Cart page is here.

********* Please go to simplecartjs.com for the updated downloads and demo************