My career for the last ten years has been a little weird. I left a stable product job to do something I'd always wanted to do: work on things talented people had designed so that I could feel proud to show them off. As a programmer, and godawful designer, I feel people judge my work based on its aesthetic, in spite of the fact that that has nothing to do with my actual role. It's understandable but frustrating. I was tired of working on CRMs and intranets - boring stuff to use that is surprisingly fun to make. I wanted something I could show people.
So I got my agency job and the company, almost immediately, went bust. I don't take credit for this, but I was redundant for the second time in two years so decided to freelance.
I hated freelancing so much. The idea of a sweet day rate was super appealing, but what I hadn't considered was the fact that you can't charge your day rate for pitches, or admin, and I was kinda crappy at that stuff anyway. I thought I was going to get paid super sums of money to wear a bathrobe and code all day. Nope.
lolcommits, 3 years ago
I can't remember how, but I accidentally stumbled across Buffalo's site when I was looking for potential agency partners so I could decrease that sales stuff I was doing and increase the code I was writing. I contacted Dan and we hit it off immediately and we're still working together seven-ish years later. I'm immensely proud of where we are right now, even though I can hardly take any credit for it (I spent pretty much the entire last seven years writing code and very little else, but I like to tell myself that that freed Dan up to do what he's great at, which is building the company).
Sadly, I can't join the Brighton Agency Founders Slack channel, but I can enjoy the 10th birthday of the best place I've ever worked. And I can also enjoy watching Interstellar, starring Max's head, at one of our clients' 30-seater cinema.
I'm so happy someone did this.
On BuiltByBuffalo's Proposal Planner, we use a much-revered slider thingy that we've had a lot of compliments on. We recently received an email asking for a little tutorial on how to put this all together. The main brief is actually pretty esoteric, and you probably won't be working with designers of the calibre of Jason Reynolds, but this should show you how to put such a thing together.
First off, you need 3 elements. I've gone for divs because they're fairly non-descript and semantically pretty viable for use here. I've gone for the following structure:
<div id="scale" class="m1" rel="6">
The rel on this div refers to the maximum number of positions on the slider. Unless you shamelessly steal all my source images, you might need to change this! The class refers to a CSS class that denotes the width of the guage element (#full), defined thus:
width: 43px; }
Because the marker element (#marker) is floated right, it will always stay to the right side of the guage div, so there's no need for any more CSS than this.
Now that we have our layout and have defined our images (I won't insult you by teaching you how to set a background image. If you really don't know that, the declarations are in the source!), we need a method of getting between them. In the actual planner, we do a bunch of ajax-y stuff between stages that's not relevant here, so here's a simple breakdown. We've got 2 links, next and previous. We, therefore, need 2 event methods to handle input.
In our Marker class, the initialize method deals with identifying the container, marker and guage elements so that we don't need to keep traversing the DOM to get them. It also sets the current state of the marker and gleans the capacity from the rel attribute (even though it shouldn't really - you can hardcode it if you want!). We then have our next and previous methods, which just check that their respective states are valid (we don't want the marker trying to go to 0 or 7, so we stop it from happening).
The method do_morph is where all the legwork is done. We construct the class to Fx.Morph to (mootools requires the whole CSS declaration, not just the element) then define some other options for the morph (namely the duration and a method to run when it's completed). The completed function calculates the background position needed on the marker image so that we display the correct state.
I'm not great at explaining things, but hopefully that's done a little to make it clearer for the person who asked for this post, and easy to steal for the people who are that way inclined!
Enjoy the demo:
Oh crap, I accidentally deleted the demo. I'll put it back when I've got some time. In the mean-time; check out the real thing
Awesome legal wall. Some really cool stuff on there, but taking photos of other people's art is lame. These shapes, however, are not.
I need to remember not to get so close to the sea. These worked OK, except the white balance was totally shot and took quite a lot of level tweaking to get right (another great reason to shoot RAW, not that I need convincing) and there was loads of spray from the waves as it was pretty rough today. Ah well, you live and learn.
If I lived in Brighton and was doing another 365, I don't think I'd ever need to resort to drawing numbers in pebbles on the beach, but it drew some interest.