Viget Inspire

In this post I'm going to show you how to display your FeedStitch feed on your site using a few simple lines of jQuery. FeedStitch is a site we made to allow users to aggregate feeds quickly and easily, and then offer various output options for the feeds users create. When FeedStitich first launched Mark Cornick wrote about parsing FeedStitch’s JSON feed with plain old JavaScript. As he pointed out, his example was just one way to do it and is less bulky than including the entire jQuery library, but it is a little more complex for people not accustomed to writing straight JavaScript. The designers here at Viget use the jQuery framework for most of our JavaScript needs so we usually have the library loading into most of our sites anyway. One of the great features in jQuery is that it can easily parse JSON feeds using the $.getJSON() function. This is something I have touched on before in my previous post about pulling your Flickr feed.

For this example, I made a FeedStitch feed with all the Viget blogs aggregated into single feed. If you go to a FeedStitch feed, you can grab the JSON feed at the very bottom of the page (next to the RSS feed icon). When looking at the raw JSON feed you'll probably see a mess of all kinds of variables and text, but here is what the beginning of the FeedStitch JSON feed looks like if we format it nicely:

Continue reading "Displaying Your FeedStitch JSON Feed Using jQuery"

Leave a comment ( 4 )

As soon as designers got ahold of the web as a design medium (probably about 15 years ago),  they were thinking about fonts, right?  (It was at least in the top five on the "first things to think about" list).  So, in an age where tens of thousands of fonts have been invented, why are we mostly still using the same six?

Techniques like image replacement and sIFR have done us well. They remain the strongholds until something better comes along -- which may have just happened: namely, I'm talking about Cufón by Simo Kinnunen.

Cufón (I'm pronouncing it "koo-fon") is a font-replacement technique that uses javascript and vector graphics to write fonts from a font file (TTF, OTF or PFB) to your browser. It's easier/safer to use than sIFR and lighter on size than image replacement, but has the same copyright issues as both.

Continue reading "Cufón Font Replacement - The Good and The Bad"

Leave a comment ( 21 )

Once a month, two designers at Viget put together a presentation for the rest of the design team. Sometimes it's on finding inspiration, sometimes it's on new ideas or initiatives, and sometimes it's just a fun little knowledge-sharing presentation.

The following is one of the latter: A simple presentation I put together with some jQuery plugins to demonstrate the various ways jQuery can interact with type on the web.

You can view it here (click the headers to advance slides).

Topics Covered

• Keeping a vertical rhythm
• Removing "widows"
• Ampersands, ligatures & special characters
• Typographic animations
• Font detection

Plugins & Links

• Filipe Fortes - Lineheight Fix
• Dave Cardwell - Widon't
• Justin Hileman - Regular Expression Replacement
• Karl Swedberg (my hero) - Fancy Letter plugin
• jQuery UI
• Remy Sharp - Font Detection

Leave a comment ( 13 )

When building out the Viget Extend blog, I really wanted to give some special attention to the real meat of the content: the code blocks.

After looking at some other dev blogs, it seemed like there were two types: Big Ol' Blocks and Little Snippets. The big ones deserved the full treatment: Scrollbars, full colorization, line-numbering, all of it. We accomplished this with SyntaxHighlighter, a cool JS file that handles all this work. The developers just need to slap a name="code" on their pre tags, and SyntaxHighlighter formats and colors everything properly. (View an example of the treatment)

The shorter code snips were a little trickier. We didn't want them to linebreak automatically (like code here at Inspire does) for accuracy reasons, but we didn't want to apply scrollbars to something as simple as a single line of code. The solution was a quick jQuery idea: Expanding the code block on hover, so they grow to the full width of the page.

$("pre").hover(function() {
        $(this).animate({ width: "765px"}, 250);
    }, function() {
        $(this).animate({ width: "437px" }, 250);
});

This was all right for a while, but soon we began running into posts like this one, where one or more of the blocks just didn't need the expanding treatment. In these cases, the jQuery effect was just annoying.

For a while, I just let it be, but this morning the answer hit me: We could probably do something to get the width of the code block's contents, and trigger the effect based on whether not the content width exceeded the block's. The first part was just setting up a variable to get the widths of both the block and the block's contents:

Continue reading "Simple jQuery Solution To A Simple Problem"

Leave a comment ( 11 )

Bi-directional Actionscript/Javascript communication is something that has been out for a while, but some Flash designers/developers still are saying, "I didn’t know you could do that."

Well you can! And with just a little bit of code.

Continue reading "Bi-Directional Actionscript/Javascript Communication in AS3"

Leave a comment ( 7 )

Feeds are the easiest way to view updated content, whether it's through a feed reader or outputted onto a web site. There are many different types of feeds, such as RSS or Atom, and many different ways display them on your site, such as using MagpieRSS to parse an RSS feed in PHP. However, you can also display feeds on your site using JavaScript, so in this post I'm going to be talking about a feed format called JSON and how you can use JavaScript to parse it out and display it.

JSON (JavaScript Object Notation) is a data format that is easy to read and language-independent, meaning you can parse it using any programming language. Both Yahoo! and Google have been offering data from their sites in JSON format for the past couple years. A good example of this is Flickr. Anyone with a Flickr account can access a JSON feed of their photos.

Finding Your Feed

If we go to the Viget Inspire collection on Flickr, we can click on the feed (orange button, bottom of the page) and bring up a RSS 2.0 feed of all the images in our pool. Flickr's API has many other feed formats, so I suggest going to their site to read up on it because there are a lot of things you can do. If you want the JSON version of the feed, change "format=rss_200" at the end of the query string to "format=json" so that your URL looks like this:

Continue reading "Pulling Your Flickr Feed with jQuery"

Leave a comment ( 30 )