To design the stats feature of Backbone, our Ruby on Rails CMS, we needed to show a stacked bar graph of page views vs unique visitors. I looked around for a sample of how others did stacked bar graphs and came up empty handed. There are plenty of CSS bar graph interpretations, but none of them did stacked bar graphs. So I’ve done it here. Based off Alen Grakalic’s Pure CSS Data Chart.

The Markup

The first thing I do anytime I start HTML/CSS work is code the HTML. It’s a personal preference to make sure it’s all going to look good for screen readers and be as semantic as possible, and since it’s my article we’re going to do the HTML first.

<dl id="csschart">
<dt>Mon</dt>
<dd>36</dd>
<dd>30</dd>
</dl>

Like Alen Grakalic’s implementation, I used a definition list. I found it to be the most semantic way of presenting data like this. To explain, each day of the week is in a <dt> tag and the data for that day is in a <dd> tag. There are two <dd> tags for each day, one for our page views and one for our unique visitors.

<dt>Mon</dt>
<dd class="p36"><span><b>36</b></span></dd>
<dd class="sub p30" ><span><b>30</b></span></dd>
</dl>

Each <dd> is given a class that corresponds to the percentage of that bar. p100 is 100% the height of the graph and p0 is 0% the height of the graph. Making 100 classes is a pain and a lot of CSS but it makes it so easy when you’re turning these graphs out dynamically.

The other class to which we’ve added some of the <dd> tags is “sub”. This denotes the stacked bars in the graph that will be put on top of the other <dd>.

Finally, we wrap our data in <b> and <span> tags so we have enough to work with when we’re styling it.

Styling the Graph.

dl#csschart, dl#csschart dt, dl#csschart dd{
margin:0;
padding:0;
}
dl#csschart{
background:url(../images/bg_chart.gif) no-repeat 0 0;
width:454px;
height:360px;
padding-left:11px;
}
dl#csschart dt{
display:none;
}
dl#csschart dd{
position:relative;
float:left;
display:inline;
width:33px;
height:330px;
margin-top:22px;
}
dl#csschart span{
position:absolute;
display:block;
width:33px;
bottom:0;
left:0;
z-index:1;
color:#555;
text-decoration:none;
}
dl#csschart span b{
display:block;
font-weight:bold;
font-style:normal;
float:left;
line-height:200%;
color:#fff;
position:absolute;
top:5px;
left:3px;
text-align:center;
width:23px;
}

/* Styling the Bars. */

dl#csschart span{
height:50%;
background:url(../images/bar.png) repeat-y;
}
dl#csschart .sub{
margin-left:-33px;

}
dl#csschart .sub span{
background:url(../images/subBar.png) repeat-y;
}

dl#csschart .p0 span{height:0%}
dl#csschart .p1 span{height:1%}
dl#csschart .p2 span{height:2%}
dl#csschart .p3 span{height:3%}
dl#csschart .p4 span{height:4%}
dl#csschart .p5 span{height:5%}

/*This continues until 100%*/

The first thing we do is reset all the margins and padding to make it look the same on all browsers. Then we define the width and height of our chart in dl#csschart. We’re using a background image to help with the tick marks on the axes and for some background gridlines. One important thing to note is the padding-left. This moves the first bar over past the tick marks on the left of the background image.

Next, we hide the dt tags. There is really no good way to make them do what we want. Position the dd tags to float left and use margins to push them to the correct place in our background image. Now, just to be clear, the dd tags are not our bars, they are simply containers for our bars. They are all 100% of the height of our graph. We use the span tags inside the dd tags to fill in our bars. Since they’re positioned absolute inside our positioned dd tags we can use bottom:0; to place them on the x-axis and have them grow in height from there. We use the b tag to display the actual data value inside the bar.

At the bottom we define the background image for the bars in dl#csschart span (you can easily just make it a background color instead), then we position our .sub bars overtop by giving them a margin-left of -33px (the exact width of the bars).

Finally, we make our 101 classes for each percentage point from 0% to 100% to give our bars their height.

I’ve made a diagram to explain what each tag is doing.

Add the Axes.

Ok now you’ll notice we don’t have labels on our axes. So we use some simple unordered lists. One before the cssChart:

<ul class="yAxis">
<li>100</li>
<li>90</li>
<li>80</li>
<li>70</li>
<li>60</li>
<li>50</li>
<li>40</li>
<li>30</li>
<li>20</li>
<li>10</li>
</ul>

and one after the cssChart:

<ul class="xAxis">
<li>Mon</li>
<li>Tue</li>
<li>Wed</li>
<li>Thu</li>
<li>Fri</li>
<li>Sat</li>
<li>Sun</li>
</ul>

Styling the Axes.

ul.xAxis{
margin:0 0 0 27px;
padding:0;
float:left;
clear:left;
display:inline;
width:454px;
}
ul.yAxis{
margin:14px 0 0 0;
padding:0;
display:inline;
float:left;
}
ul.xAxis li{
float:left;
list-style:none;
width:33px;
text-align:center;
}
ul.yAxis li{
list-style:none;
height:33px;
text-align:right;
float:left;
clear:left;
}

Styling the axes is really just floating the the y-axis left and using some margins to push it in place. Then you can use some margins to push the li tags to line up with the tick marks of your background image.

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.

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

I recently had a discussion about web app security and we were talking about the not-so-distant past when SQL-injection was the scariest thing since polio.  90% of these attacks didn’t try to return everyone’s credit card information from a database (people knew pretty early to be careful when storing this stuff), they were attempts to simply return a username and password.  

As a result, many people would go to a site that doesn’t need very much security (like a forum), and run some sort of sql-injection to return all username/password combinations from the database.  Then they would spend the whole day going from bank-website to bank-website, trying each and every one of these combinations (not only do most people use ridiculously simple passwords, they also re-use them for multiple sites) and they may get one login from one bank.  This could turn into several thousand dollars by draining that single account.  

Now, I know things have changed quite a bit, and bank websites have stepped up security standards a good deal.  I also realize that convincing people to be smarter about their login passwords would be a major challenge. However, I’m always shocked to find out that some web developers still store passwords in plain text in dB column called “password”.  

That brings us to one of the simplest methods for securing against password retrieval, that many people just don’t do. Now, there are many ways to secure against sql-injection, but let’s pretend for one minute that, somehow, someone gets the information in your database.  It doesn’t matter if it’s through injection, or getting your shared-host login from something, or someone having direct access to your server.  But let’s just say someone has your dB data, and they have all of the stored username/password combinations.  

The easiest thing to do is use a digest or hash for password storage.  You never actually need to retrieve this password, you simply need to compare a password against it.  By comparing the same hash of the input password against the stored hashed password, you are achieving the same thing. Your logins work exactly the same, except you have 4 extra lines of code.  

For another small method to improve security, add some secret letter/number/symbol combination to the word before storing/comparing.  Because most people have terrible passwords, if someone does get the information, they could get the passwords from sites that build dictionaries of MD5, SHA1, etc. combinations.  So by adding a small snippet to the end of the password, not only are you improving security against a dictionary attack, but you are differentiating this password from the user’s password that may be used some where else.

Most developers, I hope, will have learned nothing new from this article and will consider it quite obvious.  That’s a good thing.  But after hearing from a few individuals who still used plaintext storage of passwords, I felt as though this might help someone.  

****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:

<script src="simpleCart.js" type="text/javascript"></script>
<script type="text/javascript"><!--
simpleCart = new cart("you@yours.com");
// --></script>

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:

<a onclick="simpleCart.add('name=[name]','price=[price]');return false;" href="#"> link to add item </a>

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.

<div class="simpleCart_items"></div>

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”:

<div class="simpleCart_total"></div> <span class="simpleCart_quantity"></span> 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”:

<a class="simpleCart_checkout" href="#">checkout</a>

<a class="simpleCart_empty" href="#">empty cart</a>

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:

<div class="cartHeaders">
<div class="itemImage">Image</div>
<div class="itemName">Name</div>
<div class="itemPrice">Price</div>
<div class="itemOptions">Options</div>
<div class="itemQuantity">Quantity</div>
<div class="itemTotal">Total</div>
</div>

Each item in the cart will have the following form:

<div class="itemContainer">
<div class="itemImage">[myImage]</div>
<div class="itemName">Shirt</div>
<div class="itemPrice">$6.00</div>
<div class="itemOptions">size: XL; color: Blue</div>
<div class="itemQuantity"><input type="text" /></div>
<div class="itemTotal">$30.00</div>
</div>

And there will also be a totals row:

<div class="totalRow">
<div class="totalItems">6</div>
<div class="totalPrice">$30.00</div>
</div>

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:

<script type="text/javascript" src="simpleCart.js"></script>
<script type="text/javascript">
simpleCart = new cart("you@yours.com");

//Add the following line to reorder and remove item columns
simpleCart.ItemColumns = ['Image','Price','Name','Quantity','Total'];

</script>

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************

Pricing your projects right is one of the most challenging tasks for freelancers and small business owners. This challenge may be especially difficult for those professionals who are working in the design industry, where it can be very hard to predict how much time and effort will be needed for a project. Ultimately, pricing is a challenge because the client and the professional have opposite interests.

Pleasing the Professional – Hourly Pricing

From the perspective of the freelancer/small business owner, hourly pricing is ideal. You simply add up the amount of hours you spent working on a project, send the client an invoice, and get paid at your hourly rate. Most likely, you would also bill the client for any extra charges incurred on their behalf. This way, you legitimately earn the amount of money that you are worth (or, at least, what you think you’re worth).

Professionals also want to avoid getting trapped into a bottomless project. These projects require way more effort than they’re worth. Perhaps you vastly underestimate the time requirements of a project. Once you have signed a contract and agreed to a fixed quote, there may not be much you can do. Another common problem is scope creep- the tendency for project requirements and expectations to become ever more broad as the project progresses. With an hourly rate, scope creep is not much of a problem for the professional, because they can simply charge for the extra hours required to do the work.

Of course, this pricing model creates the sinister temptation to charge extra hours, to round up hours, and to take a rather liberal definition of ‘work hour’. Can you bill your client an hour of work because you thought about their project while running on the treadmill? The hourly model is simply not suited for truly motivating the professional to be efficient and productive. Obviously, professionals who pad their log sheets with reckless abandon will eventually be dropped, but the temptation to stretch the truth (even subconsciously) can still be very strong. Clients need to have a great deal of trust, and the professional needs to be very trustworthy, for this pricing scheme to work fairly.

Catering to the Client – Fixed Pricing

Clients want to know how much they will have to pay for a project. Smaller clients want to know that they will have enough money to take on the project, and larger clients want to be able to budget out their expenditures as accurately as possible. If you want to make your clients happy, then nine times out of ten you have to provide them a firm quote.

Plus, clients want to avoid the type of exaggeration discussed in the previous section. A fixed quote protects them from being overcharged. It also allows clients more latitude to change or expand upon the requirements for the project. If they think that the designer has done a poor job on an initial design comp, they might not need to pay for it. A fixed price therefore gives the client the upper hand in the business relationship. We’ve certainly been on the bad end of this deal, and certain clients have made us pay the price.

A Middle Ground?

Clients want to know how much they will have to pay for their project. Professionals want to be paid for every hour they work, regardless of the project cost. Can there be a solution to this conflict of interests?

Maybe. It is possible to develop a hybrid model that meets the needs of both. The professional can provide a provisional quote of a project based on an estimate of the number of hours the project is going to require. This quote is not set in stone, however, and the cost at the end of the day may be higher or lower than the set amount. If clients are still weary of this setup, then perhaps you can guarantee that the final price will be within 10 or 20% of the quote. The less room for error, though, the more accurate you must be with your estimate of the time you’ll need to spend on the project.

As our company has developed, our pricing method has been all over the map. We started out with fixed quotes- this, however, was back when we naively thought that we could create a successful business model by drastically undercharging for our services (note: this doesn’t work!) Later, we flirted with the temptation to convert to a strictly hourly setup. In fact, many freelancers refuse to do it any other way. But, ultimately, this was just not always realistic or fair for the clients. So, we’ve settled on trying to use a hybrid model for most of our clients.

Pricing Honestly and Accurately

Whatever pricing method you use, two things are essential: you must strive to price accurately and to price honestly.

Accuracy

Pricing accurately is based on knowing the amount of time and effort you will need to spend on a project. To a large degree this is simply based on experience. That’s why it’s important to always track how much time you actually spend on a project, even if you have already agreed to a fixed quote, or even if you are doing something free (like some nonprofit project, and internal site redesign, or that website for your grandma). Compare your prediction with your results. There are some online tools that can help you do this too- we use Basecamp to track our time but you may want to try a dedicated service like Harvest Eventually, you will get better at making predictions of the time required for projects.

Another important technique- break the project down into its smaller components. When we are quoting a web site design, we break the process down into the following components;

• Creation of the Information Architecture
• Wireframing
• Design Comps
• Coding the HTML/CSS
• Programming
• Debugging
• Cross-Browsering

Considering the project in smaller chunks makes it a lot easier to estimate the time requirements.

Honesty

Honesty is important for any business relationship. As a freelancer, there is a temptation to exaggerate the amount of hours you have worked. As a client, there is a temptation to expand the requirements for the project and work your designer to death. This is what creates all sorts of distrust between clients and professionals. But if you want a truly productive and satisfying relationship, you will need to trust each other. At the end of the day, if both parties are honest and fair about the project, pricing should not be a big problem.