About Us

Bulletpoint StarImulus® is a technology focused design + interactive agency.

In addition to our client services we also have a few products in the works. Our office is always filled with chatter and this blog is an outlet for our creative energy, rants and ideas.

Podium

Stacks!
Imulus built a task management solution that finally works for teams. It's a life saver, learn more at usestacks.com.

Featured Project

Category: JavaScript

Apr15

Who is Imulus? Interview with Casey O’Hara: Front-End Developer

Rollover OriginalTell us about yourself. Why did you want to be a front end developer at Imulus?
Casey Patrick O'Hara. Yes, I'm Irish. I'm originally from New Hampshire, so I'm culturally predisposed to using New England jargon, not paying sales tax or wearing a seat belt, and Tom Brady fandom. For reasons I'm still not sure of, when I graduated high school I decided to move to the frozen, wind-swept plains of Ohio to go to school. In December I graduated from Bowling Green State University with a degree in Visual Communication Technology. During my academic novitiate, I fell in love with web design and development. I've slowly moved away from design and now I focus more on the programming side of things.

Finding Imulus was pure kismet. I interviewed with Bruce and Taylor a few months before I graduated and we totally hit it off. It seemed like a perfect fit doing exactly what I love. I knew I wanted to live in Colorado, so the move was a no-brainer.

Your nickname is "The Prototype." How did you come about this nickname?
At my first Imulus team meeting, George polled the room "Who is our best JavaScript programmer?" I patiently waited for someone else to answer, but I couldn't keep my love affair a secret; I involuntarily shouted "I kick ass." Apparently they didn't know how much I love JavaScript when I was hired, and it quickly became a joke I probably won't live down any time soon.

If Javascript was a woman, what would she look like? Don't be afraid to get a little PG-13.
Courtney Love. Battered, sloppy, and drunk enough to be dangerous. If you look past the puke on her dress, it’s easy to see a few gems in there. Once in a while she will spit in your face, but you know she didn’t mean it because deep down she’s probably a nice person.

What about your job do you like the most?
I like that Imulus moves so fast. At times it can be equally exciting and terrifying, but it’s rewarding to work on a team of super-smart, super-talented people with an “Okay, build it” philosophy because it affords us the freedom to explore and experiment with new technologies. Research and learning are not only encouraged but required. This means our workflow and development processes are constantly evolving and never stagnate.

Least?
We’re often so busy building awesome stuff that it can be hard to find time to just stop and reflect on how awesome what we’re building actually is. Does that make sense?

Do you live free or die?
Yes.

Would you rather be a pirate or a dinosaur?
Definitely a pirate. As a pirate, it's professionally acceptable to get drunk and steal things every day. Plus, I've always wanted a cannon.

What do you like best about Colorado?
I've been here for a few months now and I'm still blown away by the landscape. I love driving up into the mountains aimlessly without a map or cell signal. I totally get off on that. The tech scene and entrepreneurial culture in Denver (and Boulder) is awesome. The weather and people are nice too. I still haven't been to Casa Bonita.

If you could have a dinner with anyone in the world or throughout history, who would you dine with?
I'd love to go out drinking with Charlie Sheen. Just once.

Describe the color blue to a blind person.
I fell for this trick once, except I was trying to describe what a square looks like. Before I got past explaining what a right angle is, I realized that my new blind friend had a saddle on his safety dog. I got too distracted imagining him riding the dog around his house that I never finished describing the square.

Jun6

How to set up a sexy jQuery TextMate bundle

Here at Imulus we’re massive fans of jQuery. We use it on a lot of our projects. We’re also fans of TextMate, an awesome text editor produced by the folks at MacroMates. Over the last few years we’ve refined our TextMate bundles (code highlighting and language recognition packages) to work ideally within the Imulus process.

So, during my recent love affair with jQuery I’ve heavily relied on their documentation section to look up specific functions and commands. And while their documentation is awesome, it’s still a slow process. Luckily, an awesome guy named Karl Swedberg has put together a beautiful jQuery bundle for TextMate that has tons of snippets for common jQuery tasks. And, it’s free!

Installation

Head over to GitHub and grab the lastest version of the bundle. When you download it you’ll get a weird filename like this:

kswedberg-jquery-tmbundle-b0622e4f889112c37e03400a6a3e63241ab29c31.zip

Unzip the file and change the folder name (which is the same as above) to:

jquery.tmbundle

Open up TextMate and then double click the jQuery bundle file you’ve just created. Boom! The bundle is installed.

Making it work within HTML documents

By default the jQuery bundle is set to only work within .js files. However, if you’re planning on using it within HTML pages you’ll need to do another few steps of work. First, copy the following code to your clipboard:

{    name = 'source.js.jquery.embedded.html';
            begin = '(?:^\s+)?(<)((?i:script))\b(?![^>]*/>)';
            end = '(?<=</(script|SCRIPT))(>)(?:\s*\n)?';
            beginCaptures = {
                1 = { name = 'punctuation.definition.tag.html'; };
                2 = { name = 'entity.name.tag.script.html'; };
            };
            endCaptures = { 2 = { name = 'punctuation.definition.tag.html'; }; };
            patterns = (
                {    include = '#tag-stuff'; },
                {    begin = '(?<!</(?:script|SCRIPT))(>)';
                    end = '(</)((?i:script))';
                    captures = {
                        1 = { name = 'punctuation.definition.tag.html'; };
                        2 = { name = 'entity.name.tag.script.html'; };
                    };
                    patterns = (
                        {    name = 'comment.line.double-slash.js';
                            match = '(//).*?((?=</script)|$\n?)';
                            captures = { 1 = { name = 'punctuation.definition.comment.js'; }; };
                        },
                        {    name = 'comment.block.js';
                            begin = '/\*';
                            end = '\*/|(?=</script)';
                            captures = { 0 = { name = 'punctuation.definition.comment.js'; }; };
                        },
                        {    include = '#php'; },
                        {    include = 'source.js'; },
                    );
                },
            );
        },

Then open up the TextMate bundle editor and drop down the HTML arrow.

html-selection

You should now see a huge list of snippets, commands, and preferences. Located in this list is an HTML language icon, it looks like this html-icon. Once this is selected you should see a large amount of code to the right. Paste the above code directly in the following position after patterns = (

patterns-paste

That’s it, you’re done. How you can access tons of jQuery snippets and code examples directly inside TextMate.

Update: We’ve had a couple people ask about how to activate jQuery highlighting once you have it installed in TextMate. I threw together a quick video below to show this. However, to clarify, the general gist is making sure you select jquery in the bundle list instead of javascript, and in the HTML code view making sure you are inside of a script tag. Here’s the video to help clarify:

Jan28

sIFR Lite Flash based type replacement, holy shit wow

sifr-thanksOnce in a while you come across a script that makes your life dramatically easier. Today that script was sIFR Lite.

Over the past few months we’ve been working on a client project that requires us to use a specific typeface for page headings on the website. Rather than doing standard -9999px image replacement techniques, which would have made our intern want to gouge out his eyes with an ice pick, we decided to give the sIFR replacement technique a try. sIFR 2.0 is a technique that came out in mid 2005 and has been used by a limited number of sites. Well, as cool as it is I ran into quite a few problems when first implementing it with our project. And while I got it to work I felt slightly dirty about the implementation. Luckily a couple days later I saw a post on twitter by Matt Crest about a new solution called sIFR Lite.

Today, I finally had the chance to replace the old method with the lite version and I have to say it is exceptionally well done. Dave over at AllCrunchy.com has done a phenomenal job with his implementation of the sIFR technique. Making it lighter, easier to use, easier to install, and easier to manage. In fact, it reduces the amount of work by about 5x and in my tests it seems to render better. Better aliasing and better container size detection. Check out the example I whipped up.

Here’s the javascript code required to call sifr-lite:

window.onload = function () {
	var din = new Font('din.swf', {tags:'h1'});
	din.replace('h1')
}

Two quick notes: First, I do find that without using the window.onload function that in Safari sometimes the text won’t pick up color. This is very minor and easy to fix.. obviously. Second, you will need to use the original sIFR to create the .swf files of your font’s. Simply use the .fla and .as files that come with that script to make your fonts, then call those fonts via sifr.lite.js. For those looking for an all in one option I’ve put it together in a zip file. Please recognize I take no credit for the sIFR script or the Lite implementation of it, I simply thought it would be nice to have an all in one package to make things work.

Update: After further testing it seems that this technique is not yet compatible with Flash Player 10 except in Internet Explorer. Hence, if you’re running Flash 10 you won’t see the replacement technique. I hope this gets fixed soon as a fix is already out for sIFR 2.

Update 2: From our comments Gyo over at (http://www.giordanopiazza.com) has released an updated and fixed up version of sIFR Lite. I plan to start using this again for our projects. Very cool!

Aug18

Tracking File Downloads with Google Analytics

Yes, you can track file downloads with Google Analytics. Although it doesn’t automatically give you that capability by just dropping in the Google Analytics Code, here is a simple method to add that tracking ability. For each file that you want Google Analytics to track, you need to create a “virtual page” using the pageTracker function in each file HREF in your site.

Example:
If you site has a PDF called financial-report.pdf and the link is
<a href="/files/financial-report.pdf">Financial Report</a>
That code will need to be rewritten to read.
<a href="/files/financial-report.pdf" onclick="pageTracker._trackPageview('/files/financial-report.pdf');">Financial Report</a>

This works great for a limited number of files, but for sites which have multiple file downloads. You may want to try Brian Clifton’s JS Script.

Apr3

Table row class calling via a small JS file.

Tables, yikes! A constant problem that we run into here at Imulus is clients that want tables with alternating color rows but don’t understand the concept of editing HTML to add a class of odd or even to them.

So today Ryan took a few minutes and created a tiny javascript that automatically applies an “even” class to every row of a table. Now we can apply our styles via the CSS and the clients don’t have to worry if they generate their own tables via Central 2 (the Imulus CMS). The script relies on Jquery (http://www.jquery.com) and is incredibly easy to set up.

Download the script: Table-Row-Switch.zip