accidental hacker

Fixed Bid Contracts

Fri, 26 Apr 2013 15:43:31 -0400

I was listening to episode 57 of the Ruby Freelancers Show yesterday and, while some of the advice was fairly good, one of the panelists said something really counter-intuitive.

Eric Davis remarked that fixed vs. hourly is merely semantics since customers are essentially trying to map the project’s cost to their budget to ensure there is a cap on their spend.

Eric says:

If you really think about it, if you have a fixed bid contract that’s, say, 6 months and you’re bidding $60,000, you’re actually just saying ‘That’s still a variable rate’. The unit of time is 6 months and the cost per unit of time is $60,000.

The premise that the goal of a fixed bid is to map the project’s cost to a budget misses the primary reason for fixed bids: fixing the cost to a specific outcome.

In an hourly arrangement, when you use up the allotted hours, the project stops whether the code compiles or not. Same with a 6 month, $60,000 contract. After 6 months, we stop working. With an actual fixed bid contract, a customer will almost always want to specify something like: “I get X product with Y features completed and bug free for $10,000.”

The bottom line: fixed bid == fixed payment + fixed deliverable

parislemon: buzzfeed: collegehumor: 12 Game of Thrones House...

Sun, 31 Mar 2013 00:09:28 -0400

parislemon:

buzzfeed:

collegehumor:

12 Game of Thrones House Sigils for the Internet [Click for more]

Behold the mighty clans of Web-steros!

Okay guys, I whipped up a quick one for you guys.

Perfect.

Breaking Down Amazon's Mega Dropdown

Wed, 06 Mar 2013 11:51:37 -0500

Breaking Down Amazon's Mega Dropdown:

Love it.

parislemon: robsheridan: Fantastic advertising for Game of...

Wed, 27 Feb 2013 17:14:52 -0500

parislemon:

robsheridan:

Fantastic advertising for Game of Thrones in the New York Times (the dragon shadow is printed on the paper over regular articles). More

Excellent.

9 Easy Questions

Sat, 02 Feb 2013 20:37:00 -0500

9 Easy Questions:

This slide deck by Joel Spolsky is slathered in pure truth.

I wish I was smart enough to recognize these things when I graduated college. I’ve learned most of them the hard way; the others came to light during my privileged time working for Joel at Fog Creek.

If you ever talk to young developers, designers, or product managers about career path, please dog-ear this link and pass it along.

"As a manager, I can’t easily know how many hours each person on my team is working. This is actually..."

Fri, 01 Feb 2013 18:18:51 -0500

“As a manager, I can’t easily know how many hours each person on my team is working. This is actually good for me because it forces me to look at what they’ve done.”

- http://blog.stackoverflow.com/2013/02/why-we-still-believe-in-working-remotely/

nevver: Vintage Japanese camera-like Logos

Wed, 30 Jan 2013 21:26:40 -0500

nevver:

Vintage Japanese camera-like Logos

gameofthrones: I made a Game of Thrones themed dinner planning...

Fri, 25 Jan 2013 13:23:24 -0500

gameofthrones:

I made a Game of Thrones themed dinner planning menu for my fridge.

Rails has Two Default Stacks

Mon, 14 Jan 2013 14:47:00 -0500

Rails has Two Default Stacks:

Starting Rails today is like starting to watch a soap opera in the 7th season.

Wise words here. Learn how to ride the bike before you pick out your custom wheels and sidecar.

parislemon: nevver: “No chance the iPhone is going to get any...

Thu, 10 Jan 2013 01:22:59 -0500

parislemon:

nevver:

“No chance the iPhone is going to get any significant market share.” — Microsoft CEO Steve Ballmer, 2007

Reblog-bait.

What would the greatest technological leap you'd have to explain to someone who time traveled from the 1950's?

Mon, 07 Jan 2013 01:04:08 -0500

cdixon:

I possess a device in my pocket that is capable of accessing the entirety of information known to man.

I use it to look at pictures of cats and get in arguments with strangers.

via

msg: explore-blog: Chuck Close on creativity The rest of this...

Thu, 27 Dec 2012 22:26:59 -0500

msg:

explore-blog:

Chuck Close on creativity

The rest of this quote is glorious as well:

“Inspiration is for amateurs — the rest of us just show up and get to work. And the belief that things will grow out of the activity itself and that you will — through work — bump into other possibilities and kick open other doors that you would never have dreamt of if you were just sitting around looking for a great ‘art idea.’ And the belief that process, in a sense, is liberating and that you don’t have to reinvent the wheel every day. Today, you know what you’ll do, you could be doing what you were doing yesterday, and tomorrow you are gonna do what you did today, and at least for a certain period of time you can just work. If you hang in there, you will get somewhere.”

Rocking GTD with Trello

Thu, 13 Dec 2012 22:18:00 -0500

Rocking GTD with Trello:

I’m a very heavy Trello user and erudite GTD’er, so I was thrilled to stumble upon Josh Earl’s GTD-with-Trello system, which I’m going to experiment with.

I’ve been using Ryan Carson’s (non-GTD, but effective) approach to organizing TODOs with Trello for a few months. It’s worked well, but my biggest impediment lately has been my failure to clearly define—in GTD parlance—a next physical action for every project.

This is critical.

If I don’t have a list of next physical actions in front of me when I sit down at my desk I invariably spend 10-15 minutes (and lots of mental cycles) simply deciding what the hell I should be doing. Sometimes I pay that tax multiple times a day.

If I had a list of very clearly defined, bite-sized actions, I wouldn’t have to think. I could just churn and burn.

Before GTD was published, Joel Spolsky wrote about the importance of nailing down very fine-grained tasks in order to accurately estimate your time:

If you are sloppy, and pick big “chunky” tasks…then you haven’t really thought about what you are going to do. And when you haven’t thought about what you’re going to do, you just can’t know how long it will take.

But a nice side-effect that Joel doesn’t mention is that, when you know what you’re going to do, you can stop stressing and do your job.

"You can tell something is important when people spend money on it and when one person is responsible..."

Mon, 10 Dec 2012 21:10:00 -0500

“You can tell something is important when people spend money on it and when one person is responsible for it.”

- Merlinn Mann / 46:30 http://www.43folders.com/2010/04/27/impro-talk

How to Redirect Tumblr Post URLs After Migrating a Blog

Fri, 07 Dec 2012 17:58:00 -0500

TL;DR: For the solution, click here.

Tumblr has a great feature that lets you create multiple blogs beneath a single umbrella account. However, your primary blog—i.e., the one you create first—is special.

How so?

When you <3 someone else’s Tumblr post, the action is associated with your primary blog
You can only follow other blogs with your primary blog

There are some other details, outlined here, but the above are the ones I care about most. I couldn’t display my “likes” in the sidebar if this were a secondary blog.

Critically, you cannot change which blog acts as your primary blog, so if you mess up (like I did) you’re kinda stuck. Kinda.

Tumbeasts

All of my Pulitzer-winning blog content was stuck in a puny secondary blog. Ideally I would have been able to delete my primary blog and promote my secondary blog. But since that isn’t possible, for what I assume are architectural reasons, I had to come up with a Plan B, otherwise:

Plan B: Move the posts (duh)

Here is the plan I drafted:

Copy & paste the post titles and content from my secondary blog to my primary blog
Publish the posts on the primary blog
Edit the posts and change the publish dates to match when they were originally published
Re-point my custom domain (accidentalhacker.com) to my primary blog
Create Tumblr redirect pages for each of the old post URLs so that they redirect to the new post URLs

Solid plan. Everything worked smoothly…until step 5. When I tried to redirect my old post URLs like so:

I got the following error message:

Ack! Looks like Tumblr is being protective of their /post/1234 URL format. They don’t want you to define a static page (or redirect) whose URL could conflict with the URL of a regular Tumblr post. Understandable.

But now I have dilemma. All the inbound links (and Google SERPs) point to the old Tumblr post URLs, which I cannot redirect on the server. They generate 404s from the new blog now. Editing the old posts does no good because the accidentalhacker.com domain name no longer points there.

JavaScript, FTW

To solve the problem, I edited my primary blog’s theme HTML (via the Customize menu) and in the <head>...</head> put the following bit of code:

<script>
    // if the URL contains the ID of an old post, redirect to the corresponding new post URL
    if(window.location.href.indexOf("16116466587") != -1) {
        window.location.replace("http://accidentalhacker.com/post/37384370552/please-dont-learn-to-code");
    } else if(window.location.href.indexOf("15551408069") != -1) {
        window.location.replace("http://accidentalhacker.com/post/37385466610/using-mercurial-subrepositories");
    } else if(window.location.href.indexOf("15521210350") != -1) {
         window.location.replace("http://accidentalhacker.com/post/37385931471/sticky-notes-with-css3");
    }
</script>

Now, if my blog detects the ID of one of the old posts in the URL, it redirects the visitor transparently via JavaScript using window.location.replace. Done!

(Thankfully Tumblr leaves the URL in tact on 404s and doesn’t auto-redirect to something generic like accidentalhacker.com/404, otherwise this wouldn’t be possible.)

This method might not be scalable for people importing hundreds of posts, but I neither is copy/pasting all the content.

Hope this helps.

Great Houses by Narwen

Sat, 13 Oct 2012 20:39:12 -0400

Great Houses by Narwen

Please don't learn to code

Thu, 19 Jan 2012 10:11:00 -0500

I remember stumbling upon tryruby.org a few years back. It was this neat little web-based shell that helped teach Ruby in a fun and interactive way.

The site lowered the barrier to entry for newcomers: you didn’t have to download anything; you didn’t need an editor or an interpreter; you didn’t even have to know what a shell was. You would simply read the instructions on the screen, type some commands, hit enter, and immediately see the results. In mere seconds, you were coding.

This was just one of why the lucky stiff’s many whimsical creations aimed at spreading the joy of coding. Nowadays, there are dozens of interactive code tutorial sites trying to do the same thing, mostly for profit. Some have even raised millions in venture capital to fuel their efforts.

One site in particular, Codecademy, reportedly hauled in 1,000,000 users due largely to their well-timed Code Year initiative, which delivers weekly programming lessons to people who have resolved to learn to code in 2012. Last week, they announced a partnership with the White House.

The response has been overwhelmingly positive: writers, VCs, accountants, lawyers all learning to code! But someone has to be the bearer of bad news:

We’re not all going to be programmers.

I promise I’m not trying to cut anyone down or dig a moat around my pristine programming castle. Those who know me know that I’ll happily teach programming to anyone who will give me the time of day. I’ve personally use sites like codeschool.com and udemy.com. I also don’t believe you have to switch professions in order to justify learning and enjoying the craft.

Confused yet? Let me try to explain where I’m coming from.

On a recent episode of my favorite podcast—Hypercritical—John Siracusa talks about the death of HyperCard. HyperCard was an application on early MacOS that let you make your own programs, or stacks, via Lego-block-style programming. HyperCard made it super-easy for normal people to build their very own programs.

The nerds thought: of course everyone wants to write their own computer programs! Why else would people want a computer in their house? We just have to make it easy enough for them.

John mentions other attempts at lowering the coding bar: AppleScript, Logo for kids, and Automator made programming more natural, fun, and easy. These platforms did, without question, make programming more accessible, but they never took off the way we geeks hoped and expected they would.

Siracusa explains (paraphrasing):

You could build up a pretty powerful system by composing all of these pieces that you didn’t write and you didn’t have to understand. But in all of these cases—HyperCard, AppleScript, Automator—the harsh reality is that anything that lowers the bar for people to do powerful things inevitably leads to Programming with a capital P.

These abstractions were leaky. The minute you try to do anything that is even slightly off the rails, you very quickly find yourself doing actual programming: conditionals, loops, composition, abstraction. These concepts aren’t natural to most people, so they stop right there. They won’t ever make the leap, no matter how easy or fun you make it.

If CPA firms had ping pong tables and Friday beer bashes, I might be tempted to learn accounting. And I would love it if there were a fun and easy way to go about it. But in the end, I could never be passionate about double-entry bookkeeping the way I’m passionate about JavaScript, because you can’t teach passion.

The percentage of the population that can engineer great software is so minuscule, and that number won’t change dramatically. HyperCard couldn’t change it; Visual Basic couldn’t change it; and no amount of instructional videos and interactive code challenges can change it. We might be able to nudge the number upward by making things easier, but there is a hard limit.

I would love to see more people from all walks of life learn to code, but I think we need to calibrate our expectations so we’re not shocked or disappointed when the dust settles and it’s just us nerds hunched over our laptops hacking away at 3am because we just can’t help ourselves.

Using Mercurial Subrepositories

Mon, 21 Mar 2011 23:18:00 -0400

Code reuse is important. As developers, we don’t want to keep reinventing the wheel over and over again. We should leverage code that we’ve already written, and use open source libraries and frameworks where appropriate.

Having the source code of a library that your project depends on is very beneficial. You can browse through it, debug into it, and make changes to it. But what is the most efficient way to store and track a piece of code that is shared across dozens of projects? Should you simply copy and paste the library’s source code into a lib folder within each project’s repository? Or should you store the library in its own repository and reference it externally?

The copy/paste method makes propagating changes a real nightmare, and the external reference approach has its own drawbacks:

How is this extra step communicated? Is it in a wiki document somewhere?
Should you write a script to fetch the dependencies or some build tool?
What version of the library should you clone?
Where on my disk does the library need to live?
Does the build server know about all this?

That’s a lot of question marks. They’re not intractable issues by any stretch, but you do have to think about them. You don’t want to have to think, you want to write code and get things done.

Subrepositories to the rescue

Subrepositories let you treat a collection of repositories as a group. For example, when you clone a repo, Mercurial will recursively clone all of its subrepositories as well, so the developer (or build server) doesn’t need to know about the dependencies — the source control system handles it all.

When you create (or update) a subrepository, Mercurial takes a snapshot of the subrepo’s state and stores it in the parent repository’s .hgsubstate file. This means that multiple projects can point to a single shared subrepository, yet each one can independently decide which revision of the shared repository to rely on.

Further, the subrepository can be anywhere — on your local disk, in Kiln, on a co-worker’s machine, etc. Heck, it can even be a Subversion repository!

Let’s see an example that illustrates exactly how to use them.

Note: Before you get your hands dirty, if you’re using subrepos, you almost certainly want to have the following lines in your .hgrc or Mercurial.ini file (thanks to David Wolever for this tip).

[ui]
commitsubrepos = false

A Tale of Two Résumés: A Case Study in Subrepositories

Fog Creek is always looking to hire great people. In fact, I’m proud to announce our two most recent hires — we just poached Darth Vader from Microsoft and Cthulhu from Facebook (sorry, Zuck).

Whenever someone new joins the team, one of the first things we have them do is create a personal résumé site that showcases their skills. I provide them with a standard HTML template and they fill in all the content. Each team member has their own repository in Kiln.

Here’s what the project looks like right now:

Vader and Cthulhu have very similar sites at this point — both contain a single static HTML page, CSS, and some images. There aren’t any external dependencies.

Have a look inside Cthulhu’s repo:

The résumés look nice and clean, albeit plain:

Creating a subrepository

I’ve been spending my days on Hacker News reading about how all the JavaScript ninjas are writing jQuery plugins to enhance their websites. So, naturally, I wrote a jQuery plugin that everyone can use to add awesome text shadows to their résumés. The plugin is aptly named awesomejs.

I checked my code into Kiln so my team can grab it.

Now, don’t tell Cthulhu, but Vader is my favorite co-worker. His ability to dominate a galaxy is truly unmatched. Vader happens to be out of the office at the moment. While he’s gone, I’m going to make his résumé just a little more awesome.

First I’ll clone Vader’s repo down to my machine.

c:\code>hg clone https://rob.kilnhg.com/Repo/Subrepo-Demo/Websites/vader
destination directory: vader
adding changesets
adding manifests
adding file changes
added 1 changesets with 4 changes to 4 files
updating to branch default
4 files updated, 0 files merged, 0 files removed, 0 files unresolved

Then, from within the vader repo, I’ll clone awesomejs so that it becomes a nested subdirectory.

c:\code>cd vader

c:\code\vader>hg clone https://rob.kilnhg.com/Repo/Subrepo-Demo/Libraries/awesomejs
destination directory: awesomejs
requesting all changes
adding changesets
adding manifests
adding file changes
added 1 changesets with 1 changes to 1 files
updating to branch default
1 files updated, 0 files merged, 0 files removed, 0 files unresolved

Now I have two nested Mercurial repositories, but they are not linked in any way and I can’t operate on them in tandem…yet.

To achieve full-subrepo goodness I have to create the .hgsub file in the vader repository’s root directory. .hgsub is a plain text file with one line per subrepository. On left-hand side of the equals sign is the local directory name where the subrepo will reside. On the right-hand side is where that repo lives.

c:\code\vader>echo awesomejs = https://rob.kilnhg.com/Repo/Subrepo-Demo/Libraries/awesomejs > .hgsub

I save the file, add it, and commit it just like I would any other file. I can tell by the output that Mercurial knows I’m making a subrepo when I commit .hgsub. Further, it automatically creates a .hgsubstate file where it records a snapshot of the subrepo’s state.

c:\code\vader>hg add
adding .hgsub

c:\code\vader>hg commit -m "adding subrepository awesomejs"
committing subrepository awesomejs

With my new subrepo in place, I’m ready to share my changes, so, from within the vader repo, I push my changeset to Kiln.

c:\code\vader>hg push
pushing to https://rob.kilnhg.com/Repo/Subrepo-Demo/Websites/vader
pushing subrepo awesomejs to https://rob.kilnhg.com/Repo/Subrepo-Demo/Libraries/awesomejs
searching for changes
searching for changes
no changes found
searching for changes
searching for changes
remote: kiln: successfully pushed one changeset

Notice how issuing hg push from the parent repository automatically pushed the subrepo as well (though, in our case, there happened not to be any changes in the subrepo). Mercurial will automatically push all subrepositories when the parent repository is being pushed. This ensures new subrepository changes are available when referenced by top-level repositories.

Note: not all Mercurial commands will automatically recurse into subrepos. For instance, hg status does not recurse unless the -S option is specified, and hg pull will not act on subrepositories at all. Type hg help subrepos for more on this.

Now, if I look at the Vader website in Kiln I can see my new changeset. And if I switch to the file browser I can see a little visual cue next to awesomejs to indicate that there’s a subrepo present.

If I click on the awesomejs folder, I can see that I don’t have a copy of the awesomejs files within the vader repository; rather, I have a link to the Subrepo Demo -> Libraries -> awesomejs repository. What’s more, Kiln knows exactly which revision of awesomejs to show me based on the data in .hgsubstate.

If I were to peer inside the .hgsubstate file in the vader repo, I would see that it simply contains the changeset hash of the revision that it expects awesomejs to be locked on:

Applying some awesomeness

Now that I have my subrepo relationship established, I’ll actually make use of the plugin. I will edit index.html and, right above the closing <body> tag, add references to jQuery and awesomejs, and call the plugin.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script src="awesomejs/awesome.js"></script>
<script>
    // make all the h1 and dt tags awesome.
    $(document).ready(function () {
        $('h1, dt').makeAwesome();
     });
</script>

Much better:

Cthulhu’s turn

Cthulhu decided that, not only is he going to use awesomejs for his own resume, he’s going to contribue some changes to the plugin to make it better. He noticed that I hard-coded the color magenta right into awesome.js and thought it might be better if it were passed as a parameter to the plugin instead. This way, each engineer can use their own personalized color scheme.

To make this change, first Cthulhu clones his repo and repeats the same steps I did to create the subrepository (i.e., hg clone awesomejs, create .hgsub, hg add, hg commit). Then, within the subrepository folder, Cthulhu makes his changes to awesomejs. Lastly, Cthulhu updates index.html within the cthulhu repository to referenence and call the plugin. He likes cyan.

Now he’s ready to commit the changes in both repositories. Note, however, that when you call hg status from within the parent repo, you won’t see your changes to any subrepos. If you want to see what’s changed in a subrepo, you’ll need to use hg status -S instead. Here’s what hg status -S looks like at this point:

c:\code\cthulhu>hg status -S
M awesomejs\awesome.js
M index.html

IMPORTANT POINT! When he commits, he must do so from within the parent repository, otherwise Mercurial will NOT update its .hgsubstate. As a result, when the next developer comes along and clones the Cthulhu website, they’d get the hard-coded magenta version of awesomejs with it, and that’s not what we want.

First he commits the change to awesomejs:

c:\code\cthulu>hg commit -m "make the color a parameter instead of hard-coding it to 'magenta'" awesomejs
committing subrepository awesomejs

Then the change to index.html in vader:

c:\code\cthulu>hg commit -m "make use of the awesomejs plugin.  I like cyan." index.html

And here’s the log:

c:\code\cthulhu>hg log
changeset:   3:90ccac8e4a0b
tag:         tip
user:        Rob Sobers
date:        Thu Mar 17 14:42:26 2011 -0400
summary:     make use of the awesomejs plugin.  I like cyan.

changeset:   2:71e8c78d1f59
user:        Rob Sobers
date:        Thu Mar 17 14:42:04 2011 -0400
summary:     make the color a parameter instead of hard-coding it to 'magenta'

changeset:   1:7f699cdf3208
user:        Rob Sobers
date:        Thu Mar 17 14:24:43 2011 -0400
summary:     adding awesomejs subrepository

changeset:   0:3517279c43fd
user:        Rob Sobers
date:        Tue Mar 15 23:45:15 2011 -0400
summary:     new resume site

Cthulhu can now push these changes up to Kiln (remember, push is recursive) and carry on…right?

Wait a minute! Cthulhu changed the signature to the makeAwesome function without regard for anyone else! What is that going to do to Vader’s site? Vader isn’t passing a color name, so his shadow color will be undefined, which I’m pretty sure isn’t a valid HTML color. Vader is expecting his drop shadows to be magenta.

No worries! The change Cthulhu made to the subrepo is available to Vader, but not automatically forced on him. Here’s what’s in Vader’s subrepo:

C:\code\vader\awesomejs>hg tip
changeset:   0:d5e13195590d
tag:         tip
user:        Rob Sobers
date:        Tue Mar 15 23:37:48 2011 -0400
summary:     creating new jQuery plugin

And here’s the incoming changeset, should he choose to pull it:

C:\code\vader\awesomejs>hg in

comparing with https://rob.kilnhg.com/Repo/Subrepo-Demo/Libraries/awesomejs
searching for changes
changeset:   1:e281bb75e574
tag:         tip
user:        Rob Sobers
date:        Thu Mar 17 14:42:04 2011 -0400
summary:     make the color a parameter instead of hard-coding it to 'magenta'

When Vader is ready, he can pull the above change, update, and commit the parent repo to record the new version in .hgsubstate.

And that’s the beauty of subrepositories — they give you the benefit of working on a single shared repository across multiple projects while letting you lock each project at a specific version.

All of the code from this tutorial is available for you to play with in a public Kiln repo: https://rob.kilnhg.com

Credits:

Cthulhu résumé and HTML template by Chris Coyier: http://css-tricks.com/one-page-resume-site.
Darth Vader résumé details: http://www.giraffecvs.co.uk/darth-vader-cv

Other resources:

Sticky notes with CSS3

Tue, 23 Nov 2010 05:42:00 -0500

I’ve been working on a pretty cool wall-mounted status board as one of my projects at Fog Creek. It’s a webapp that runs on a vertically mounted LCD screen in our office. It displays a bunch of interesting information like tech support calls, staff vacations, tweets about FogBugz, and more.

I’ve been incrementally adding features and improving the UI whenever I have spare cycles. The other night, I decided to redesign the Kanban board widget, which is a list of the top N things that the customer team needs from engineering. I decided to go with a sticky note UI that mimics a real-life Kanban board, which typically consists of a giant white board filled with a bunch of sticky notes.

My initial design used the classic yellow sticky notes, which I thought looked pretty neat. I showed my co-worker Rich who suggested that we make the notes look like the FogBugz and Kiln notepads that are laying around the office. Awesome idea! Way better.

Click here to play around with the code yourself on jsFiddle. As you can see, the implementation is pretty simple. CSS3 is really nifty. No images necessary (aside from the kiwi and dodo logos).

Here’s the markup:

<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie&amp;subset=latin' rel='stylesheet' type='text/css'>

<ul id="notes">
    <li>
        <p>Push new feature to Kiln for code review</p>
    </li>
    <li class="kiln">
        <p>Browse hacker news for a bit</p>
    </li>
    <li>
        <p>Read JavaScript: The Good Parts by Douglas Crockford</p>
    </li>
</ul>

Notice that I’m pulling in the handwriting-style font right from the Google CDN.

Now for the CSS3 magic:

body {
    background: #B2CCCC;
}

#notes li {
    position: relative;
    width: 300px;
    min-height: 100px;
    margin: 25px auto;
    padding: 60px 15px 15px 15px;
    background: #fff url(http://our.fogbugz.com/images/tbKiwiLogo.gif) no-repeat 4px 8px;
    -webkit-box-shadow: 0 2px 12px rgba(0,0,0,.5);
    -moz-box-shadow: 0 2px 12px rgba(0,0,0,.5);
    box-shadow: 0 1px 2px #000;
    -webkit-transform: rotate(-.5deg);
    -moz-transform: rotate(-.5deg);
    -o-transform: rotate(-.5deg);
}

#notes li:nth-child(even) {
    -webkit-transform: rotate(.5deg);
    -moz-transform: rotate(.5deg);
    -o-transform: rotate(.5deg);
}

#notes li.kiln
{
    background-image: url(https://rob.kilnhg.com/Content/Images/kiln_focus.gif);
}

#notes li p {
    text-align: center;
    font: normal normal normal 40px/48px 'Reenie Beanie', Helvetica, Arial, sans-serif;
    color: #000;
    text-shadow: white 1px 1px 0px;
    overflow:hidden;
}

#notes li::before {
    content: ' ';
    display: block;
    position: absolute;
    left: 115px;
    top: -15px;
    width: 75px;
    height: 25px;
    z-index: 2;
    background-color: rgba(243,245,228,0.5);
    border: 2px solid rgba(255,255,255,0.5);
    -webkit-box-shadow: 0 0 5px #888;
    -moz-box-shadow: 0 0 5px #888;
    box-shadow: 2px 2px 2px #000;
    -webkit-transform: rotate(-6deg);
    -moz-transform: rotate(-6deg);
    -o-transform: rotate(-6deg);
}

#notes li:nth-child(even)::before {
    -webkit-transform: rotate(6deg);
    -moz-transform: rotate(6deg);
    -o-transform: rotate(6deg);
}

Each note has a background gradient to give it the sticky note color. The note is rotated ever-so-slightly with a transform and decorated with a little box shadow for a 3D effect.

The tape is inserted using ::before and is absolutely positioned with a box shadow, slight rotation, and a semi-transparent background color (using rgba notation to set alpha transparency).

I hope you found this little technique useful. I’m going to be posting more about the big board soon. Stay tuned.