The Wojo Group » Programming

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.

Simulating HTML5 Local Storage Support

Brett Wejrowski — Thu, 14 Jan 2010 06:07:07 +0000

I have been wanting to use HTML5’s local storage for a while, but I haven’t had a project where I can just ignore the older browsers. So I put together a little ( <1Kb gzipped ) script that checks for HTML5’s local storage API, and simulates the method for browsers that do not support it. For those browsers, the script implements a nearly identical interface to localStorage for persistent storage of name/value pairs, except it uses cookies. For the impatient types, you can see the repo at github or download the script. Below is a description of usage:


localStorage.setItem( key , value );
// saves a new name/value pair if the key doesn't exist, otherwise
// updates the value

localStorage.getItem( key );
// returns the value associated with the given key, if it exists
// returns null if the key doesn't exist

localStorage.length;
// the number of unique keys stored

localStorage.removeItem( key );
// deletes the name/value pair with the given key, if it exists
// if it does not exist, exits

localStorage.clear();
// delete all name/value pairs currently stored

localStorage.key( n );
// returns the name of the nth key in the list, will return null if n is
// greater than or equal to localStorage.length

If the localStorage object is available, the setup script exits and allows the method to work normally. Otherwise, it will use the same interface to create a string of name/value pairs to store in cookies. You can use all the methods described above, but it does not support direct access to data, such as ‘localStorage.name = “bob” ;’. One issue is that the older browsers with slow performance will experience another setback when storing large amounts of data, because the cookies will be included in headers.

There are two types of storage methods in the new Web Storage Specification: localStorage and sessionStorage. The sessionStorage data will only persist for the life of the browser window, whereas localStorage will last indefinitely, depending on the browser. This script uses the localStorage, but can be switched to sessionStorage pretty easily. There are a few resources out there already where you can learn a little bit more. Currently, the specification is supported by IE8, Firefox3.5, Safari4, and Chrome (localStorage only).

Download or Check out the repo on github.

[Note: I've done some brief testing on most browsers, but if you run into a problem, let me know]

simpleCart(js) Version 2.0 Released!

Brett Wejrowski — Mon, 10 Aug 2009 12:28:30 +0000

We are happy to announce the release of simpleCart(js) version 2.0 today. We have been working hard to add several features that you all have requested, and we’re excited to get this script in your hands. There are several new features, including GoogleCheckout, easy currency settings, tax, shipping, and a new method for adding items to your cart that requires no javascript, and allows for different inputs and options. There is also a brand new site to go along with this update: simplecartjs.com . Please take a minute to check out all the new features, documentation, and demo. Thanks to all those who have been helping test for the past few weeks, we couldn’t have released this new version without your help.

Upgrading your version

If you are already using simpleCart(js), the only thing you need to change to use the new script is how you add it to your page:

Check out the website, simplecartjs.com to learn about the new features, and let us know what you think!

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

Simple Pagination with Rails

Brett Wejrowski — Tue, 05 May 2009 14:07:17 +0000

While I was developing Motionspire, I needed to implement a pagination system for the video content. I looked through the existing plugins, but found that I really desired something extremely simple and custom to work within my search controller. With only a few lines of code, I created a very basic system for managing pagination that can be ported to other sites with ease.

The Search Controller

The Motionspire search controller uses one function and view for returning any content, whether it’s filtered or not, so the pagination only required one copy of the code to be implemented. I keep a session variable for maintaining the user’s preference for items per page, and if that parameter has been sent to the search function I set the session variable :


if params[:itemsPerPage] then session[:itemsPerPage] = params[:itemsPerPage] end

When I run though the search function, I see if a page parameter has been passed:


if params[:page] then @page = params[:page].to_i else @page = 1 end

After I retrieve the articles pertaining to the search parameters (in this case the results are stored into an array called @videos), I check the :itemsPerPage preference and find the last possible page:


if session[:itemsPerPage] then @per = session[:itemsPerPage].to_i else @per = 24 end

@lastpage = @videos.length/(@per) + 1

if @videos.length%(@per) == 0

    @lastpage = @lastpage - 1

end

I have a default itemsPerPage value of 24 hardcoded, and you can change this for your search.

From here, we simply return the search results for that page, using the current page and the items per page preference:


@videos = @videos[((@page-1)*@per),@per]

For search queries within a large data set, I would recommend using these parameters with the sql query with the ‘ORDER BY’ and ‘LIMIT’ in order to avoid returning extremely large results unnecessarily.

The Helper

First, I created a short helper function that finds the min and max pages, ensuring we don’t show a negative page or a page that doesn’t exist:


def minmaxpage(current,total,option)
    min = current - 2
    if min < 1
        min = 1
        max = 1 + 4
        if max > total then max = total end
    end
    max = min + 4
    if max > total
        max = total
        min = max - 4
        while min < 1
            min = min + 1
        end
    end
    if option == 'min' then return min else return max end
end

The View

For the content from the view, we use the @videos array to present the content for the page. The only custom coding necessary is in the links for the pages. For this site, I provide a first and last page link, along with 2 pages on either side of the current page. You can manipulate this code how you want, but the basic idea will remain the same.

First we grab the min and max page from the helper:


<% min = minmaxpage(@page, @lastpage, 'min') %>

<% max = minmaxpage(@page, @lastpage, 'max') %>

For the code for the page links, we simply check to see if the min page is within two of the current:


<% if min < @page %>

    <%= link_to( "Prev",

        :action => "search",

        :page => (@page - 1) ) %>

<% end %>

<% if min > 1 %>

    <%= link_to( "1",

        :action => "search",

        :page => 1 ) %>

<% end %>

<% x = min %>

Then we loop through the remaining pages, ensuring we don’t go over the max, and make the current page simple text instead of a link:


<% while x <= max %>

    <% if x.to_i == @page.to_i %>

        <%= x %>

    <% else %>

        <%= link_to( x.to_s,

            :action => "search",

            :page => x ) %>

    <% end %>

    <% x = x+1 %>

<% end %>

<% if max < @lastpage %>

    <%= link_to( @lastpage.to_s,

        :action => "search",

        :page => @lastpage ) %>

<% end %>

<% if max > @page %>

    <%= link_to( "Next",

        :action => "search",

        :page => (@page + 1) ) %>

<% end %>

The code may look a little long, but the implementation took very little time. I know exactly what the code is doing and it is very easy to expand this for different situations and code.

There are a lot of solutions for pagination of content, but I found that this simple implementation helped me avoid using plugins and save time. Let me know if you guys have any questions or comparable solutions.

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!

Developing vs Programming

Brett Wejrowski — Thu, 26 Mar 2009 15:34:51 +0000

I’m a mediocre programmer, at best.

When I’m programming, I need 8 different tabs open with every reference site I can get for a particular language. I google function names constantly, most of my debugging time is spent with dumb syntax errors, and I’m never going to be able to use Regular Expressions off the top of my head.

So what can mediocre programmers like myself do? Develop. I’m going to go over a few tips for good application development, and how to use development methods that can improve your programming, even if you lack superstar skills.

Project Management

There are too many different project management philosophies to mention here, and many of them are developed by very experienced and knowledgeable professionals in the industry. However, project management and planning remain to be the biggest downfall for most programmers. Many of these methods are made to apply to development teams, but you can abstract a lot of the ideas to individual projects. Try to check out a few papers or books on the topic during your free time.

1/3 Rule

For most projects, I try to stick with the 1/3 rule: spend (approximately) 1/3 of your time on planning, 1/3 on coding, and 1/3 on testing. Many programmers expect to spend the majority of the project timeline writing code, and believe that good code will drive the project. However, I have found that most worthwhile final products are created from development timelines that have actual coding as a minority. This 1/3 flow can often take iterations for different portions of a project, where you plan, code, and test small portions and move on to the next section. But you will often find dedicating time to plan properly will cut down on actual coding, and proper testing will save you time in the long run.

Start with Your User

I am a big fan of top-down development. There are a lot of different theories about development strategies and methods, but I have found that for real world applications, the single most important aspect of any program is the interface.

With that in mind, I start my planning with laying out the interface. Implementation of this idea can vary depending on the project. For example, you may start with wireframes and a user flow for a web application. For something like simpleCart(js), I started by listing every way in which the user would interact with the code, including function calls, div classes, and html layout for cart items. When you start your project by building out the interface first, you are ensuring that your program will adhere to the end-user functionality of the project.

Compartmentalize Functionality

It doesn’t matter whether you are a big believer in MVC (I am) or like procedural or object-oriented (I’m a OOP guy); you will find yourself improving your code by creating structure first, and then implementing code. It is often beneficial to create functions (or objects) that relate to real-world goals or problems. If you say to yourself, “I am going to need to store the current user preferences in a cookie,” you might want to create a function for exactly that.

By focusing on individual problems, it becomes much easier to create efficient code for that particular purpose. In turn, you often write better code. It also becomes much easier to debug; if you are having a problem storing to a cookie, you simply look at your ’store to cookie’ function. Documentation also becomes extremely easy, as the purpose of your code becomes evident simply by looking at the function name. I know this may be second nature to many developers, but it can’t hurt to mention it.

Abstract Data Storage

I’ve found that many projects outlast hardware, hosting, or storage implementations. You may move your code to another server, decide to implement a different database system, or find that you outgrow your storage and need to keep data in more than one place. In any of these cases, abstracting data storage and retrieval functions from the rest of your code will benefit you immensely. Data storage is often the last part I consider for my project. I often do most of my developing with two empty functions: load() and store(). They are usually the last thing I implement, as, in most situations, they are the least important to the functionality of your end-user. It also becomes extremely easy to maintain consistency of your core functionality when switching to a new data implementation by simply altering these functions.

Conclusion

These are all very high level concepts, and it may or may not be clear how to actually implement some of them in your projects. The overriding theme that I hope you can take away from this article is that every program looks the same from 10,000 feet. Most great applications are built with the end-user in mind, and great development isn’t necessarily dependent on great code. Please let me know if you guys have any other tips.

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!