Break Things

How did Google do a barrel roll?

Brian Sage — Fri, 04 Nov 2011 02:57:08 +0000

Google: "do a barrel roll"

Today I learned Googling “do a barrel roll” with quotes unleashed a special easter egg. As a kid who grew up playing the original Star Fox, I LOVE THIS, and as if to add to the geektastic love Google did it with CSS3 transitions and transforms, which makes adult me squee just as much.

Here’s how you can make your HTML “do a barrel roll” too:

First, the code that actually does the roll is CSS. Specifically, it’s CSS Level 3 transitions, which are still in draft form, so you’ll have to write them several different ways to make them work in different browsers (Unfortunately, IE users can’t see them). Here is the code I used, which works in Chrome, Safari, Firefox, and Opera.

What these lines do is add transition instructions to do a transform over 4 seconds, ease in to it, and then ease out of it. The best SCC3 transform documentation I could find is at the Mozilla Developer’s Network. The transform rotates the object 360 degrees.

Second, you may notice that the above affects any object when class=”barrel_roll” is applied. So, let’s have some fun with the tag!

You could easily apply the trick with a button, like so: but it’s way more fun to make someone type it out. Here is how to use jQuery to apply it via secret phrase in a text input:

What the code above does is watch the tag with the ID “search_text” for any change or key press action. When those actions happen, the value of the field is checked for ‘”do a barrel’.

Yeah, that’s cheating a little, but it replicates the Google effect with about the same timing. And when that gets triggered the event removes itself so it doesn’t get really annoying. To see the effect again, you’ll have to refresh the page.

To prove it works, I added it to the search boxes on our scrubs, country western, and hunting gear stores.

Give it a try by typing “do a barrel roll” (with quotes) in one of our store search boxes. The effect won’t work in Internet Explorer, so be sure to use Chrome, Firefox, Safari, or Opera.

Visit one of our stores and type the secret phrase in the search box — shhhhhhhh — perhaps there will be more effects to follow…

If you can’t wait for the next round of Google goodness, here’s my previous tutorial on Google’s Dancing Logo.

Marching to the Social Drum Beat, Adding Pin It Button

Brian Sage — Fri, 23 Sep 2011 14:54:13 +0000

Some of our Acumaliens have been loving the life out of the link sharing site Pinterest, so we devs thought, heck, if our users love it certainly our customers will too. Just like that: presenting the ability to Pin It on our Acumen products.

Now, if you love the heck out of, say a Ariat Women’s Boot or some beautiful Casserole Baking Ceramics, you can click the Pin It button to share the page, the image, and the description all in just one click. We geeks set up all the details behind the button just special for you.

Enjoy, and have fun pinning!

My Workspace

John James — Wed, 29 Jun 2011 19:57:53 +0000

(John James, M.D. is the CEO of Acumen Brands – you can follow him on Twitter)

Until recently, one of our developers worked on a 9 inch netbook. He was crunching huge amounts of data on a screen the size of an iPad. Against his will, we bought him a top of the line laptop… a world class developer shouldn’t have the same computer as my kids.

My workspace, on the other hand, is over the top in the other direction.

A Mac Pro with 32 GB of memory and 4.5 TB of storage pushes four monitors. A 30 inch Apple Cinema Display surrounded by two vertical Dell 20 inchers sit on my desk. The fourth monitor is a 52 inch LCD TV mounted on the wall ten feet in front my desk. The TV is perfect for impromptu meetings and presentations.

Sitting next to the monitors is my trusty MacBook Pro. Despite the killer desktop setup, I work on the laptop most of the day. I lay on my couch, sit in our think space, or lounge in our break room. The iPad, is unnecessary, but it sits close in case I feel the urge to play Angry Birds or Modern Conflict. The phone is also unnecessary… if it rings, I won’t answer. Seriously.

Rounding out my workspace is a toothbrush and toothpaste. A mid-day brush after a day of Dr. Pepper and lattes makes a mouth happy.

John James, Acumen CEO

Google Theme for June 21, 2011: What do Weird Pink Creatures Have to do with the Summer Solstice?

kwinchester — Tue, 21 Jun 2011 20:39:03 +0000

This morning, the northern hemisphere awoke to a rather interesting Google doodle. For all those left wondering what on earth two pink manga-like characters had to do with the summer solstice, we offer the following.

The two characters on Google’s home page represent “KaiKai” (the one with the white ears) and “Kiki” (the one with the fangs). These two little creatures are the calling card of Takashi Murakami, a Japanese artist and entrepreneur who was commissioned to design the themes for Google for today, which is also the Winter solstice for the southern hemisphere. If Murakami’s work looks familiar, it’s probably because it is. Murakami has pioneered a form of design known as “Superflat”. You’ve probably seen it on the cover of Kanye West’s album “Graduation”, as well as on t-shirts, posters, and toys. According to Wired.com, Murakami likes to work from drawings he creates, scans into his computer, and tweaks using Photoshop. He creates repeated symbols, characters, and objects with a personalized clip-art database of sorts.

And while all of this is awesome, you are still probably wondering about the relationship between Google and Murakami and the summer solstice.

So, I promise, we’re getting there.

While I can’t really see a connection between summer and Murakami, I can see a sort of ironic connection between Murakami and Google. Murakami has described his work as being “a record of the struggle of the discriminated people,” the Japanese. His work toys with the age-old idea of “What is art?” in a very relevant-and lucrative-way. His work is a commentary on mass production, globalization, and the accessability of art to both the high and low classes.

And honestly, what better represents a leveling of the playing field than…Google? Freakishly wealthy and living in a palace? You use Google. Stealing your neighbors wi-fi? You’re on Google. Using the computers at the public library? Again, Google. Basically Murakami just took the walls off of some of the most intimidating museums in the world….and showed a one of a kind (yet easily reproduced) work of art on the public sphere…the internet.

So,while we aren’t entirely sure what KaiKai and Kiki have to do with summer, we do know that Muramaki is sitting back smiling…because he now has the ear (and eye) of just about everyone who is inquisitive enough to ask “what IS that?” While I won’t sit here and muse on the greater anthropological significance of “place” and “public space” I will say that this Google theme will mean different things for different people. To some, it is a beautiful yet sinister picture. To others, it is a symbol for a whole movement. To others still, it is just the Google theme.

And THAT dear friend, is why we think this theme is awesome.

How We Built a Robotic Warehouse in 90 Days

John James — Wed, 25 May 2011 19:06:57 +0000

Last week, Acumen Brands went live with a warehouse run by killer orange robots. Only three months ago, we started planning the system. Last week, we turned the robots loose for the first time. The moment we launched the system, the efficiency of our ecommerce operation increased more than ten-fold.

Sure, Kiva’s now famous automation systems have been installed before… but never in such a compressed timeframe, and never by such a small company.

Our ecommerce operation is less than 2 years old. We operate 5 stores that sell anything from nursing scrubs to 25 ton pipe benders to kids cowboy boots. We are growing fast and opening a couple new stores every month, and will have 25 active stores in 25 different niches by the end of the year.

Unfortunately, traditional warehouse systems could not support our chaotic, rapid growth. To help solve this monumental challenge, we partnered with Kiva Systems, an innovative warehouse automation outfit from Boston. They’ve installed a couple dozen systems for ecommerce giants like Diapers.com, Gilt Groupe, Staples, Crate and Barrel, and The Gap.

Because our startup culture is centered around doing things faster and better, we were able to install one of the 10 most efficient split case fulfilment operations in the world in less than 90 days.

Just 90 days ago we sent a team to Boston to design our system. They said it was impossible to build and install this quickly, but low and behold their amazing team (and ours) rose to the challenge.

In a startup, you have to do more with less resources. Previous retailers who installed Kiva’s system had tech teams of at least a dozen if not many more. We dedicated a team of only two where others dedicated an army. Why? Because we’re a startup, and that’s all the resources we could leverage. It worked, AND we did it four times faster than any of our larger competitors.

The past 3 months have been an example of controlled chaos and hypergrowth. To go from concept to design to build to implementation in 90 days is nothing short of miraculous and is a true testament to our startup mindset centered around building faster and better.

Enjoy the video!

How to Animate The Martha Graham Dancing Google Logo for Yourself (Tutorial)

Brian Sage — Thu, 12 May 2011 16:03:07 +0000

Challenge accepted!

Yesterday, the Google gurus created one of the coolest Google Doodle logo animations yet, as an homage to American dancer/choreographer Martha Graham. I blogged about how Google animated their logo, and a very intriguing comment popped up. Facebook user Maja Malovrh asked “Is there any way of seeing the animation again?” Given our dedication to cool animation and dance clothes, we said:

Challenge accepted!

Honestly, I’m barely writing any original code, here. I’m standing on the shoulders of the Google giants, so huge thanks to them for making their code so simple and easy to read. With that said, here’s how to do it.

First, create a 1×1 tag to cache the logo image file, like so:

Next, you’ll need to create a

with an id “hplogo” and style it and its children for the animation magic to take place. Why? Because that’s what Google did.

Lastly, use this script I modified only slightly to see it animated.

That’s it! Save and view dancing scripty beauty. Bear in mind that the above depends entirely on Google continuing to host the Martha Graham dance doodle, but odds are pretty darn good that they’ll continue to do that until the Internet dies. This animation script will also only ever work for this particular animation, because it’s made up of carefully-crafted frame coordinates. In other words the javaScript is just as much a part of the final animation as the image, itself, and together they create art — separately, they’re simply spare parts.

Happy copy-pasting!

–
EDIT: My apologies to everyone who copied and pasted my bugged line of JS. The script is fixed now, thanks to the first comment from Shanfan Huang. Happy-ER copy-pasting

How The Martha Graham Dancing Google Logo is Animated (Short Explanation)

Brian Sage — Wed, 11 May 2011 16:09:45 +0000

Google animated their logo by cleverly positioning a single sprite image, using JavaScript and CSS

Google’s dancing logo was so cool today, I had to write something. Here’s a short explanation of how they did it:

First, start with an sprite image that contains every frame of the animation.

Next, have in mind to create a whole lota

s, styled like so…

//...and so on, and so on

Firebug is a web develper's best friend

The best way to see how these will tie together is to use a tool like Firebug or the Webkit Inspector to inspect the Google logo after the animation is complete. Since the logo will only be for a single day, I’ve included a screen capture.

Lastly, tie it all together with some clever JavaScript that will build and append each of the above

s over time, to create animated motion.

Google doesn’t appear to have a linked library to accomplish this. Instead they have the following script tag located on the page today:

The JavaScript takes the looong array of coordinates, assigned as d, and “paints” a

the width, height, and position needed every 83 milliseconds, or at about 12 FPS.

The brilliance of the animation is that every frame is exactly the height and width that it needs to be to appear as an animated frame. By simply adding the cumulated width and height of all previous frames, the PNG is positioned exactly where it needs to be to show the next frame… adjusted with a clever for loop for “line breaks” in the sprite PNG.

I know this isn’t exactly a tutorial. My apologies to anyone who was looking for copy-and-pasteable code. Hopefully, this at least satisfies someone’s curiosity. And if you need to buy dance wear, our store All Around Dance can help with that too.

Overwhelmed by Humanity

jmccormick — Tue, 03 May 2011 23:53:04 +0000

I have a son who will be four months old on Cinco de Mayo, and his mother and I have extremely strong opinions on education.

For my part, I was home schooled briefly, and it engendered a mentality of unrelenting research on anything you can think of. I’m a wellspring of unconnected trivia.

For her part, she simply doesn’t seem to agree with the efficiency or ability of modern public education, which is understandable, especially given the circumstances. In particular, her mother is a teacher, and so the problems of the trade are apparent in daily life.

Combine those two things, and we got into a conversation about education. I immediately went to my love of building code as an answer. I wanted to build a software suite that could teach my son, so we wouldn’t have to cross our fingers and hope local districts got it right.

It was a pretty killer idea, actually – the premise was a learning tool that could be skinned to appeal to your child’s interests. I even talked with some folks about it. But what I found out about is far better, insanely great stuff.

Here’s what I forgot: the internet is ridiculously wonderful as a research tool, a modern-day Library of Alexandria. It’s more tremendous now than it ever was when I had to use Webcrawler via AOL to learn.

Certain people, that make some tech I rely on made some decisions today that no one in the know expected, and it led me to a cathartic moment, something like to absolute excitement.

First I found this, and that led me to this.

Follow those last two links, if nothing else. I really absolutely mean this.

Think about how incredible this is. This is the future of knowledge and learning. If I had anything remotely like this as a child, who knows where I’d be today? Hell, now that I know about it, where will I be able to go?

I thought I was going to have to give up the ghost on math past basic algebra.

What does this signify for education, in general? The ability to take the passive role of education and replace it with the truer learning experience of actually doing, and collaboration, is tremendous.

We need to embrace and protect stuff like this this, right now. This is the future of our species. Imagine it’s a video game, and we just got access to a new tier of sweet tech upgrades.

Nice things

jmccormick — Thu, 28 Apr 2011 00:07:36 +0000

Hey, folks. This is the Acumen Brands blog, Break Things.

My name is Joseph McCormick. Everyone here calls me Coffee, because I came from Starbucks. Also, because I drink enough coffee to kill a small animal. Also, because I have an encyclopedic mind and spent years researching, yeah, coffee. I call myself Josh. But everywhere I’ve ever worked everyone has refused to call me that. No, no. Coffee is fine – I’m just saying.

I’m generally an extremely opinionated person, so clamoring for this blog apparatus has been high on the priority list. And by priority list, I mean that I’ve harassed other people about it a lot.

For example, “Hey, wouldn’t it be nice if we had an in-house representation of our staff?”

Or, “You know, there’s no transparency with our business on the web. That’s kind ofabsolutely dumb as hell of us, considering our business centers around it.”

Or, “I bet a lot of the tech guys around here could blow a blog up with cool posts if they just felt comfortable enough to do it. Or if we had a company blog at all.”

Or, “You know, I had an idea for a great blog post today, but, no blog. Oh well, huh?”

And even, “I bet we’d already know what’s up about a lot of these problems if our customers, you know, knew us. Or could approach us.”

This blog is an awesome experimentation nugget. Not for the industry in whole, I hear a lot of those gents out on those internets do plenty of this sharing your thoughts stuff or even, Heaven forbid, dialoging with customers. Or even this dangerous, speaking your mind stuff.

Until then, meet some of our awesome sites - Scrubshopper, Toughweld Workwear, TrailsEdge, the Baby Habit and Country Outfitter. Buy some things, and I will love you for it.

I reserve the right to rant uncontrollably until they shut this sucker down.