August 25, 2010

Note to self

Filed under: debugging,wordpress — Tags: , — Rob @ 5:12 am

When upgrading to the newest version of WordPress you should back up your theme. I wasn’t thinking and clicked update and all my work vanished. With some late night damage control and I’m presentable again… I sure wish upgrading wasn’t such a hassle. The only reason I did it in the first place was to get the most-secure version of the code. I guess it’s better to be safe than and sorry.

August 16, 2010

Typekit turns 1, partners with Adobe

Filed under: css,typography — Tags: , , , — Rob @ 4:16 pm

Most the designers I work with use Adobe fonts. Having an easy route to implement the fonts I actually encounter day-to-day is a huge plus. I’ve wanted to use typekit in the past, but haven’t, because you ususally have to make the designer and client compromise on a lesser known font. Perhaps the next project I work on I can get by without Cufon or sIFR. It’s nice to see how quickly @font-face typography is gaining traction (finally!).

Check out typekit’s post about this.

August 3, 2010

Canvas presentation

Filed under: canvas,javascript — Tags: , — Rob @ 9:17 pm

Here’s a presentation I put together about canvas. I’ll try to get some more detailed tutorials together sooner or later.

July 25, 2010

Added projects to github

Filed under: canvas,css,html5,jQuery,javascript — Tags: , , — Rob @ 6:35 pm

I just added a few projects to github. Here’s the rundown:

  • jQuery Asset Loader – This class is based off an example from Steve Souder’s book Even Faster Websites. Essentially you can load a script OR a stylesheet with a callback function.
  • jQuery Canvas Graphs – This is a Work in Progress. So far I built a pie chart and a bar graph.
  • jQuery Custom Selectbox - This class hides the real selectbox and inserts a JS version. It is keyboard accessible, fast, and fully style-able.

If you have any questions, let me know.

July 24, 2010

Safari personal info hack

Filed under: Uncategorized — Tags: , , — Rob @ 5:18 am

Jeremiah Grossman recently published a security vulnerability in Safari that can steal your personal information. The gist of the problem is that an attacker can hide some inputs on their site with field names that normally get autofilled by the browser. Then using JavaScript the attacker can extract information about the user.

Check out this creepy demo in Safari. It found all my info successfully… Luckily I only use Safari for testing. If you want to avoid the problem disable AutoFill web forms in your Safari settings.

July 21, 2010

Cheap eBooks

Filed under: workflow — Tags: — Rob @ 3:23 am

Mark Pilgrim wrote this great online book “Dive into HTML5” that you should check out. It’s being released by O’Reilly as “HTML5: Up and Running“. I’m not sure how different the physical copy will be from the online version, but it seems to me that you can either read it online now for free, or wait until August 15th for it to be released as a book and pay $20 for it.

Another tip for getting good content cheap is to download the iPhone app version of O’Reilly books. For example, I downloaded High Performance JavaScript as soon as it came out for $5 and read it by the time it would have taken to get shipped to me. The list price for this book is $35.

Honestly I still prefer a real book over an eBook, however, I’m willing to read on a screen when the price is so cheap. Especially when you live in a small apartment and your bookshelf is overflowing onto the floor…

July 14, 2010

jQuery UI Position without jQuery UI

Filed under: jQuery,javascript — Tags: , , , , — Rob @ 10:12 pm

When you go download jQuery UI 1.8.2, you have the option to add the position plugin. If you haven’t heard of it, it’s new to jQuery UI and described as “A utility plugin for positioning elements relative to other elements”. It’s a nice helper for making elements like a modal window, tooltips and other positioned items.

Since it can’t be downloaded as part of UI 1.7.3, My initial instinct was to assume that the position plugin needs jQuery 1.4+ in order to work. As a test I downloaded only the position plugin, and tried it out with jQuery 1.3.2. It seemed to work fine, and wasn’t too shabby of an add-on since it’s ~4k (minified, not gzipped).

I work on a lot of different sites, and don’t always have the latest version of jQuery available, so it’s nice to know that I can use this with older versions of jQuery. Also a plus is that I can grab the UI Position plugin as a standalone item without the bulk of the UI core.

Here’s a proof-of-concept I whipped up using jQuery 1.3.2 and the UI plugin. The only hiccup was that the first time I called the plugin it didn’t center the div correctly in Chrome… But if I called it twice, it was fine. Weird and kludgey, but hey it works… even in IE6. Since this is a useful plugin, and apparently not tied to UI, I’d love to see it included in jQuery Core.

June 17, 2010

iPad (and iPhone) debugging

Filed under: Mobile,debugging,iPad,iPhone,workflow — Tags: , , , — Rob @ 10:17 am

Check this article out: iPad HTTP Debugging with Charles

This approach is extremely useful and has saved me a lot of time. Also, the same tutorial works for the iPhone too. Once you have Charles set up to work with your device there are two main benefits that will help you debug your work.

Viewing HTTP traffic to your iPad site – Great for ensuring resources aren’t returning 404, checking that everything is being cached properly, and no extraneous calls are being made etc…

Mapping production files to your local environment - This is great because you can be viewing your production site, but have Charles point to a JS/CSS file on your desktop so you can test changes on the fly.

June 14, 2010

Choosing the right jQuery easing function

Filed under: javascript,workflow — Tags: , , , , , — Rob @ 9:45 pm

When I animate elements in jQuery I often find myself looking for a little something more than the default “swing” and “linear” values. So to spice things up, I usually download this jQuery easing plugin. Once you include it in your project you have many more options to choose from.

Some animations need playfulness while others need polish. I find the easiest way to pick the right easing algorithm is to temporarily create a selectbox that displays on the page, so you can tweak and test the value on the fly. This is also useful if you want a designer’s input, they can easily see what’s available and pick the one they like best.

To streamline the process I created a simple jQuery plugin that generates a selectbox based on the $.easing object. It just spits out all the potential values, and then you can test them out in your animation without having to constantly update your code. You can find the extension here.

And here’s an example of the plugin in action testing an animation.

June 1, 2010

Maximize windows in OSX

Filed under: Uncategorized — Tags: , , — Rob @ 10:52 pm

After switching over to a MacBook Pro from a PC, one of the OS quirks that bothered me was the zoom button (+) on every window. My initial inclination was that it would maximize the window, however, instead it behaves drastically different from program to program.

I read up on the issue, since I’m sure I’m not the first person to get confused by it, and was a bit surprised by the community feedback. Many people on message boards proclaimed that maximizing windows is obsolete and that they don’t miss it. They claim OSX is truly a multitasking environment, and if you embrace that you’ll forget you ever even used maximize. But to me that’s a load of crap and it’s an OS flaw. Why would pressing (+) in one window turn iTunes into a mini player, and in Firefox it maximize the window, but then in the calculator reveal a scientific calculator? Having windows scattered all of the screen is great and all, but I especially need maximizing because I’m on a 13′ MacBook Pro so I don’t have a ton of real estate.

Anyhow, after some googling I found a fix, RightZoom. With RightZoom most my windows (+) button now works as expected, and I also set up a shortcut option+command+e to maximize a window.

Older Posts »