Author archives

I spend 40+ hours a week knee deep in javascript, css and php, but lately mostly javascript and css. I’m responsible for making everything over at www.lijit.com not only provide a great user interface, but work in Firefox, Internet Explorer 6/7 and Safari 2/3, I never seem to have the time to get to Opera =-\

That being said, I’ve dealt with all manners of javascript and css trickery. Granted, I use prototype and scriptaculous to do most of the heavy lifting. None the less,  I feel qualified to answer all manners of questions in this space. So, ask away: @ me on twitter: http://twitter.com/cranberyxl, This way we can keep the answers out in the open, and if I don’t know the answer, may be someone else does. I fI cant’ answer in 140 characters, I’ll link to a blog post back here.

Recently, I’ve been doing a lot of work with XML and json. One small problem I ran into was assigning SimpleXML variables to a class variable and then running it through json_encode:

“pageLength”:{”0″:”10″}

The simple solution I came up with, but which were not readily apparent in the documentation is that you need to simply cast the SimpleXML variable to a string or int.

$object->pageLength = (int)$xml->element;

which produces this json:

“pageLength”:0

Hope this helps someone else save some time.

After a week on the road, culminating with Gnomedex 07, I’m back in the office. Molly and I spent a week in the northwest where we were able to visit her family. We then took a train up to Seattle for a weekend of conference fun. The trip home was a convoluted collection of planes, trains and automobiles spanning three states and taking over twelve hours.

Once in Seattle we met up with Stan, went to the mixer and Gnomedex was on. After spending the past few months hanging out in Chris Pirillo’s live chatroom, it was a pleasure to finally meet him and his wife Ponzi in person. They put on a wonderful weekend where the field is very level and you are equally likely to get into a conversation with a new blogger or a seasoned blogger like Robert Scoble. The presenters provided a wide variety of topics covering everything from open money to elder blogging.

It was really cool to meet some of out users who are doing cool things with Lijit. Deepak Singh has found some really cool academic uses that he writes about here. Of course, there were people that knew our fabulous evangelist Tara, like Tajee, a Japanese video blogger. Perhaps I can use her videos to learn a little Japanese. It was wonderful to be surrounded by people that understood what we do, where the odd Web 2.0 lexicon that we’ve developed was okay to use. I think Chris Brogan really understood and did a nice write up that has turned a few heads our direction. I’m very excited to see where things go.

I definitely look forward to going to Gnomedex 08, seeing old faces, and meeting new people. Stepping outside of Boulder and our developing tech scene and into a room full of people from the Valley was very energizing, but now I’ve got a lot of coding to do.

I’m sure many of you noticed that when Apple rolled out the Podcasts section in iTunes, that podcasts remembered the position they were last stopped (unless they played through completely). I’ve often foudn myself wishing that other mp3s did this. For example, a podcaster might release an optional audio file, not in their normal genre, which they offer for download on their website. I’ll find myself listening to said mp3 and without thinking, I might jump to another file or close iTunes. I’m trained, when listening to spoken word, to be able to pick up where I left off. Well, low and behold, apple does offer this feature for all files.

Single File

  1. Select the file you want to edit
  2. Right click on the selected file (ctrl-click Mac) and Choose Get Info
  3. Choose the Options tab
  4. Select remember playback position
  5. Click OK

Multiple File

  1. Select the files you want to edit
  2. Right click on the selected files (ctrl-click Mac) and Choose Get Info
  3. If prompted about editing multiple files, select Yes
  4. At the bottom of the dialog box change Remember Position to Yes, and check the box next to it
  5. Click OK

Now, the tracks the you selected will remember their playback position, just like podcasts.

Where is the javascript IDE? I know that you can use Eclipse, TextMate, Notepad and other such programs to edit javascript, and that more often then not said javascript is generated in the context of another language (php, ruby, java, or even .NET). I think that there could be huge potential for a Firefox addon that acted as an editor. Firebug is already most of the way there at 1.0. Could we join the missing link between Firebug and Notepad? /drool

At the risk of repeating news, and reporting it late at that, in internet time at least, and using too many appositives in a sentence, prototype has finally gotten documentation!

According to their website:

Prototype is a JavaScript Framework that aims to ease development of dynamic web applications.

Basically, it aims to take a lot of the common functions that web developers use, finding elements on a page, making ajax calls, writing classes, etc and wrap them into a library that worries about the various browser implementations of javascript so that you don’t have to.

Prototype has recently been officially released as version 1.5, up to now there had been a few release clients. As part of the release they have released a website at prototypejs.org that finally includes a central place to view API documentation and discuss how you use prototype with other developers! Additionally, the people at Global Moxie have made the documentation available as a pdf for easy printing and offline reference. Great work!

As we work on the next phase of development at Lijit, we have been thinking a lot about widgets, or wijits as we call them. Steve Rubel writes about widgets transforming blogs into start pages. I think this is a great idea, but then I started to think about how many people read blogs. Most serious blog readers use a news aggregator of some sort, either a desktop client or a web based reader. These feeders consume RSS and therefore don’t benefit from widgets or advertising mostly for that matter, but FeedBurner is working out ways around this.

This brings me to wonder what will win in this space. Will users find enough value from the widgets on a blog page to venture outside of their newsreaders? Will content producers continue to syndicate their entire posts? Will a happy medium be found where newsreaders and home page destinations equalize? Will someone discover how to integrate widgets into RSS? It will be interesting to find out.

As the CSS at lijit.com evolves I find myself continually up against the uncompliant Internet Explorer. The flavor this week is min and max width height. As you may or may not be aware the truly standards compliant browsers allow you to set both min-width and max-width properties to give you the ability to have a fluid layout appropriate for multiple monitor sizes. After a little research I found out that IE does support javascript from within CSS of all things. This allows you to keep track of the size of the window and hack in changing the size of your element. The first solution I found was over at svendtofte.com showing this code:

CSS:
  1. #element {
  2. width:expression(document.body.clientWidth <800 ? "800px" : "auto");
  3. }

I thought this was a pain, but it worked, so I extended it to handle both min and max:

CSS:
  1. #element {
  2. width:expression(document.body.clientWidth <800 ? "800px" : document.body.clientWidth <1200 ? "1200px" : "auto");
  3. }

I figured I was all set, then I played with it in IE and wham, it froze. After more research and I found a post at cameronmoll.com indicating that using this method can introduce a race condition and infinite loop in IE. The solution, change your math slightly!? *sigh* So, here's the final working CSS that will be introduced in the next Lijit release that will give you a fluid layout between 800 and 1200 pixels:

CSS:
  1. #element {
  2. min-width: 800px;
  3. max-width: 1200px;
  4. width:expression(document.body.clientWidth <800 ? "800px" : document.body.clientWidth <1200 ? "1200px" : "auto");
  5. }

I used to own cassettes, make them for my friends, and listen to them in my car. Today I discover that the fine people over at says-it.com have produced the Cassette Generator, another in their line of pages that make cool graphics to post on your blog, send to your friends, or whatever.

I found out about this by looking at my Lijit List, the first page I see at lijit.com. Someone in my trust network had reported on it, others had picked it up and when I logged in this morning there it was at the top of the list. Because I trust these people and they trust others I get a filter on web content that I trust. If you like what I like, you to can trust me just click on this Trust Me" button on the sidebar, or for one post only, the cassette tape below.


(When will our children be doing this with CDs?)

When developing in the social world of Web 2.0 you find yourself attatching avatars to users. These avatars not only allow the users to customize how the world sees them, but also to give you a way of identifying users without using text, conserving screen real estate.

After looking at the way that other sites allow you to upload your avatar, I know that I was going to have to do something similar. I thought about rolling my own, but who has the time. A short goole search later and I discovered Dave Spurr at defusion.org.uk had spent the time to create a javascript library built on Prototype and Script.aculo.us that allows you to crop images. He calls it Javascript Cropper UI. It's very slick and since it builds upon libraries I am already using it was an obvious choice.

Unfortunately, out of the box it didn't support multiple previews, something I wanted to include, so after a morning of hacking I have added the ability to pass in multiple individually sized preview windows. I also removed the dependecy on minimum widths and heights, as I pass in the size of each preview. You do need to constrain the ratio of your select box and previews equally however or your images will become distorted.
Check out a demo here.