Atomoco blog

keeping up with keeping up

0 notes

The three horsemen of creativity

three amigos

When it comes to creativity, I have three basic states of mind, and each one is both constructive and destructive. Each one takes hold of me at a whim, when I would rather be more in control of mixing them up. They both fuel who I am and they hold me back from what I could achieve.

Researcher.

Even before the internet - yes, I’ll admit there was such a time - I was probably the archetypal info-freako. If I was interested in a subject, there wasn’t a library, magazine or documentary that I didn’t shake all the specfics out of. 

It’s easy to see your stamina for info-consumption as a strength, after all, you can’t point to a great writer who wasn’t an avid reader. And you may become the go-to person to ask a question. But gluttony for consuming information leaves no time to create your own works.

And things are so much worse now. Even with concious strategies for triaging information like skimming hundreds of RSS feeds and sending a precious few to instapaper in endless micro-moments only helps taste the spray of the sea of todays information world.

I could have a full-time job gorging myself with new information. To no end whatsoever, feeling comforted that I’m learning new ideas, but not producing a single idea of my own.

Doer.

Real artists may steal, but they also have the taste and skill to make something appear new. The rest of us can follow a style and make something that looks at best “clean” or “professional”. That makes us the doers, trusty sidekicks to the designers of the world.

Experience has taught me that too many design egos in a room has a negative effect instead of a positive one. You need people to be able to actively question the creative thought, but in the end to get on with the donkey work of “getting shit done”.

I actually love this part of the job - the sitting down and working through a problem, followed by the endless polishing so that it’s done right, damn it. It’s a pride thing. It’s the Malcom Gladwell part of a job - the nervous trial and error that gradually hardens into a nugget of experienced certainty that you can then throw at a new job, and appear the prefessional that you are.

Empires were made of that sort of work. But it’s also the comfortable path, the following of others that never breaks the skin of a new idea. Endless pats on the head only encourage you to build similar work, Pavlovian style, before you tire and want to bite back on the patronising hand. 

It’s the thing that makes time pass so quickly until you notice you missed your chance to make a dent on whatever world you work in.

Creator.

Sitting down and coming up with an idea. There’s a noble pursuit. It doesn’t have to solve cancer, kill poverty or generate clean energy - a neat little website to re-organise how a team allocates design jobs would make me happy.

But it comes with it’s own problems. Getting the time inbetween the “research” and the “doing” to really think is hard enough. Having the clarity, the focus and the perspective to sift the sludge and visualise the good stuff is another snag. But then crystalizing a thought into a plan and bloody well executing and completing that plan - that’s where the true genius of creation lies.

You can come up against technical limitations (so often your own), but more often a lack of time, energy and passion to follow it through. The wasteland of half-finished good ideas is a heavy net that drags me down. Every new unfulfilled idea is left behind like a dropped penny you can’t be bothered to pick up, so you casually make out that you didn’t notice you dropped it at all.

And the next idea that comes along is a little harder to act on, because despite your bluster, you can’t hide your own track record from yourself.

The three horseman of creativity.

These three phases of my mind wrestle with each other. All of them are essential, but only in the right proportion will they achieve anything outside of the ordinary. Most of the time they just get in each other’s way.

I’ve yet to prove to myself that I can mix them well enough to successfully lead rather than follow. To build things that make people want to work with you, instead of want you on their team. To inspire instead of please.

I sometimes call myself lazy. By that I mean that I spend too much time on the research and the doing - because they’re comfortable and necessary. And they happily take up the time that would otherwise be spent on taking a risk on a new idea - then following it through to it’s conclusion, for better or worse.

Funny thing becoming a dad. I’m more aware of risk, but I’m more aware of the ways it can really pay off. 

So here’s to more risk, and the right mix of creation, work and research that could make it pay off.

0 notes

Installing SSL email certificates in iOS5

Working on a new project meant that I needed to start using signed and encrypted email for communication. I’m not much of a security geek, so all the terms and conventions were a bit confusing, so here’s what worked for me.

  1. I eventually downloaded a free email certificate from InstantSSL.com (as Comodo.com’s email cert page was just a 404…), and it installed into Apple Mail on the Mac with little fuss. Lovely. The only problem was that now I couldn’t read the emails on my iPhone/iPad, or send signed/encrypted ones. The good news is that I was running iOS5 beta - which can use email certificates. Hurrah! Now if I only knew how to get it working.
  2. My email certificate was a “.p7s” file. Getting it onto the iPhone (by email or dropbox) was no use, the iPhone didn’t know what to do with it.
  3. Eventually, after much googling, it appeared I needed a “.p12” file. You get one of those by using the “Keychain access” app in “Utilities” on your Mac. You import the certificate into the keychain, then click on your new certificate and export it as a “Personal Information Exchange” (P12) file. You can choose to add a password to this file, which means you don’t need to add a password when you get to installing it on your iPhone, but I left it blank.

     
  4. Google was telling me that other intrepid iOS5’ers found they needed to then also export the same thing as a “.cer” certificate, as both were needed. I can’t tell if that’s true, because I followed their advice blindly.
  5. Now you need to get your two new certificate files onto your iPhone. You can download the mysterious “iPhone configuration utility” app to install the certificate, but it didn’t work for me. I settled for the tried and tested “email them to yourself” - probably making security experts wince, but hey.
  6. I clicked on the two attachments and they installed into iOS with no problem. Then the email was deleted, and checked it wasn’t in trash for good measure.
  7. You’re not done yet, you need to set up iOS mail app to sign and encrypt outgoing email. You have to go to the “settings” app on your iPhone, and right into the “advanced” details of your email account. Set the “S/MIME” switch on for the account your certificate is for, and set the “sign” and “encrypt” settings to yes (each one makes you select the email certificate you’ve just installed).
  8. Lastly, I backed up my email certificate somewhere safe, in a passworded DMG file. Yes, in more than one place.
  9. Congratulations, you can now send and receive signed and encrypted email. Happy private conversations.

More help:


0 notes

That was fun. I’ve built a little favelet today, a browser short-cut to help with developing web-apps that have elements sliding on and off the page.

It’s called “Honey I shrunk the page” (or HISTP for short), and it applies a CSS transform on the document body, so that it all shrinks in the browser window. The website works as normal, at the same aspect ratio of your window, just shrunken down so that you can see what’s happening off-screen.

To use it yourself, drag this link —> histp <— to your bookmark bar. Then click it to run it, and click it again to cancel it. There are a few options to let you customise the experience, just hover over the input boxes to get an explanation. The source is hosted on GitHub. I’ll sort out a proper “product” page sometime in the near future.

Enjoy!

4 notes

GPU memory management with hardware accelerated CSS transitions.

See that? That’s the difference that GPU hardware acceleration of CSS transitions can make on an iOS device. If you don’t know what CSS transitions are, you might want to stop reading now.

For those that are left, I won’t bore you with how CSS transitions can provide basic animations, or how they can be GPU hardware accelerated on iOS devices, which can make an incredibly low-powered platform like an iPad offer smoother animation than big desktops running javascript.

Instead I’ll run through how Bardot currently does the “next page” trick, and how I’m trying to improve it.

As a caveat, I’m just imparting what I’ve learnt through trial, error and Google - I wouldn’t count myself as an expert on this.

Bardot is built in “pages” and “spreads”. Pages are… er, pretty self explanatory, and spreads are the equivalent of opening a magazine spread (ie two or more pages facing each other). Bardot actually has three piles of spreads *, at any one time you see only one spread on-screen - in the “viewport”. Either side of the viewport are two other piles, and when you hit the “next page” button, the piles all shuffle along one direction or the other.

The mechanism for doing this on most modern browsers is simplicity itself. Spreads in each pile have a particular class (“.read”, “.active”, “.unread”) and to move them around means changing their class via javascript, CSS transitions and transforms do the rest for you. As an aside, that makes quick changes to the animation a doddle (Make it quicker? Tweak the CSS style. Add a 3D flip out movement? Tweak the CSS style).

That all looks fine on desktop browsers, but iOS devices need a bit more help. They’ve got pretty limited processing power, and extremely limited memory, which often ends up with low frame-rates, sudden disappearances, or giving the “tiling” effect you see in the video above. This is especially true when you’re creating something off-screen, then moving it into view (like we are here), because mobile devices are optimised to only deal with on-screen pixels to keep them lean and mean.

To get around that, we can hand off the “compositing” of certain elements to the 3D GPU chip in the iPad or iPhone, which is way more adept at flinging tiles around a screen. You can move an element to the GPU by adding a 3D CSS style to an object (some use “-webkit-transform:translateZ(0)”, others use “-webkit-transform:scale3d(1)”)

In the case of Bardot, I created a style class called “.zippy” with a transform of “translateZ(0)”. When a page-forward event occurs, the top of the “.unread” pile is changed to a class of “.active.zippy”, and the retreating spread is given a class of “.read.zippy”. So “.read” and “.active” are the classes that determine where the spreads move to, and “.zippy” is the class that adds a sprinkling of acceleration.

The question begs: “So why don’t we hand everything off to the GPU with 3D CSS?”. Well, the GPU is also really limited in the amount of memory it can handle, and the more you stuff into it, the more it stutters and you’re back to where you started. In Bardot, one of those spreads could be thousands of pixels in size, it doesn’t take many of those to really bung up a GPU.

The trick is memory management. In Bardot, only the “.zippy” spreads are hardware accelerated, and once a spread is moved off-page, the “.zippy” class is removed to reduce the load on the GPU.

The result is buttery smooth animations in both directions. Simples.

* Note:  I’ve tried building systems with a long continuous “conveyor belt” of pages in the past, and although the theory behind that is cleaner (moving a huge track of pages past the viewport), I find working in three piles is easier to manage, especially when you get into dealing with layouts that are many spreads long. A track would becomes tens thousands of pixels wide and you have to deal with big margin offset numbers. Not pretty.