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">
  <div id="full">
    <div id="marker"></div>
  </div>
</div>


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:

#scale.m1 #full {
  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

We’re all agreed that the bigger a company gets the more evil it gets, but why is this? The two highest-profile (to me) and most recent are Facebook and Google. Remember when Google just wanted to show you ads on its search engine related to what you physically typed into it? Those were the good times. Now it wants to read your email (GMail), control your computer (GoogleOS), know what you’re doing when you’re not using Google products (GCal), be your mate (Buzz – seriously, wtf), know exactly what you’re looking at online (Chrome, Google DNS), look at all your pictures (Picasa), give your leg a tumour (Android) and even attach its phoneline to your house. I get justifying this to shareholders – “Imagine if we could read everyone’s email – we could put ads right there in people’s inbox!”, “Imagine if we powered everyone’s computer – we could show ads on their desktop/screensaver/bootscreen based on their internet usage”, and everyone gets a nice, shiny free product to play with.

But are these products really free? I mean, sure, you don’t put your credit card details into these things and there’s not a person sat monitoring everything you do and laughing when you put on some goat porn, but if you’re using Google DNS or Chrome then you can bet they have a record of someone at an IP you used doing it. And if you’re logged in to a Google product as well, you know all it takes is matching those IPs together and we’ve got a name and a face. So now, every time you turn on your Googleputer, there’s no reason NOT to show you a Google Ad for the latest installment of unmissable goat porn on your Google Desktop – you WATCHED it, so you must want to watch more! It stands to reason that when I have an email about Viagara in my inbox, I want to see ads for it too.

To me, that doesn’t make these products free. Sure, I use GMail, but only because I can hook it up to my mail client and forego the ads, I use the search because it’s fast and integrated with almost everything and I use GCal for work, but think about the type of data you’re giving companies access to before you actually use these “free” services. If you don’t know what DNS is, but you know Google’s is pretty fast – find out what DNS is before you tell a company EVERY SINGLE WEBSITE YOU VISIT, NO EXCEPTIONS. If you like the sound of a free operating system, think about what it means to give a company access to ANYTHING you do on your computer. I’m not saying this is the case, but if you don’t want to pay for an OS; there are plenty of amazing, free ones around.

Google has quickly learned from twitter that knowing about your users as in where they are or what their name is, or what someone said in an email isn’t worth nearly as much as knowing every little thing about our lives. Where you’re going to eat, what you ate when you got there, what you’re reading, what you recommend, what movies you like, where you work, what you do whilst you’re at work, all of that makes anything you’ve got with a screen and a Google product on the potential to be a tiny billboard for any type of thing that can be programmatically deemed applicable to you – and it’s not independently moderated – if someone finds out you like the sound of an iPad, you aren’t going to be getting legit ads on where to get one, you’re going to be getting shitty “GET A FREE IPAD IF YOU JUST GIVE US YOUR CREDIT CARD DETAILS AND MAIL US YOUR FIRST CHILD” ads. You’ve seen Google text ads, right? You might even use a plugin in your web browser to block them, so why open yourself up to have them put all over your life?!

It’s hard to blame Google for this, and they’re not the only ones. I mentioned Facebook; they’re getting just as bad, and they’ll probably end up worse, and this is why. You willingly tell Facebook EVERYTHING. Date of birth, who you’re related to, stuff you like, your employment history, political views, music taste, everything. You then proceed to give it up-to-the-minute information on all the stuff that’s catching your attention now. You’re a fickle idiot, and so was I until this all occurred to me. What’s potentially worse about Facebook is that you’re telling all of this stuff to them, giving them all your secrets, and they’re giving this data to anyone who knows a web developer. When you install an application, I bet you don’t read what they get access to – those little cancerous quizzes have access to “your Profile information, photos, your friends’ info and other content that [it] requires to work”. Do you really like quizzes enough to tell Johnny Nobody all that stuff about you? I don’t.

So, what’s the point in this? Mark Zuckerberg says that “privacy is no longer a social norm“, and I agree. Everything that you can write down about yourself can be leveraged to try and sell you something. Fair enough, it could be something that you might want, but I want that ball to always stay in my court. If I want to buy something, I’ll look for it. Eric Schmidt says that “If you have something that you don’t want anyone to know, maybe you shouldn’t be doing it in the first place“. This is utter bullshit. You’re entitled to have secrets and you should have secrets. Maybe don’t tweet about them, or post them on your Facebook wall, but they’re not secrets if you’re doing that. What Mr. Schmidt is saying there is “if you have a secret and you use one of my company’s products, I’m going to use that secret to get some scammer to try and sell you shit”.

Now, I’m not against avertising. It can be pretty useful. However, Google used to just be a box to search stuff in. Then it was a box to search stuff in with ads on it, then it was an online equivalent of everything you used to do on your desktop computer. Now it’s all that stuff from before, plus it’s got its own backup of the internet, and soon it’ll have phonelines. It’s always changing the game, and it keeps all that stuff it had from before. No matter how they decide to change the game up, they’re always going to know everything you’ve ever told them, whether you know they did or not. Same with Facebook. So, think about what you’re telling websites about yourself and who might end up knowing that stuff and, if in doubt, walk outside with your eyes closed and tell the first person you bump into what you were going to tell that website – if you’re comfortable with them knowing it then you’re OK!

aesthetic beauty is function enough

Lawrence Fleinhardt

via kitsune noir and TED

Amelie needed a change of scenery, so she made the risky move from the top of my right speaker to my left shoulder and set up basecamp for 30 minutes. I sometimes wish there was a /var/log/weird_cat.log for cats.

This is totally random. Hate when cables tangle, love when they make punctuation at me!

Cute? Pain.

I have to get into this building. Any takers?

There is a girl sat in my line of vision, and she’s been mining and consuming the contents of her nose since she sat down. Flagrant, shameless and apparently delicious. She must know something I don’t, I’m trying to pluck up the courage to ask for a taste.

I’ve wanted to take those top two for ages. With the shutters down, The Hub on Lower Shirley High Street looks so simple and distraction free. Problem is, I’m usually in a hurry to get to the train station when I go past at the right time.

Same with that house, really. I missed the decent opportunity – there’s way less stuff out there now than there was before, but it still looks pretty cool, I think.