Grow your CSS skills. Land your dream job.

Site News: iPhone/iPod Stuff

Published by Chris Coyier

Few quick announcements!

iPhone/iPod Version of Screencast

Many, many people asked for this. I resisted a long time mostly since I thought seeing them on such a small screen would be useless. But I concede that listening and sort-of seeing might be good enough, and you can always get the bigger version if you need to go back to something. iTunes here. Raw RSS here.

iPhone Interface

Just for kicks I brought back the iPhone interface for CSS-Tricks. It's based on this tutorial, with some updates and improvements. It no thing of great beauty, nor is it full-featured. Just a easier way to read content on the iPhone if that's how you roll.

Quotes on Design "API"

I put API in quotes because it's probably not technically a real API. I wrote some JavaScript that pulls in and displays a random quotes on the page from Quotes on Design. The idea would be anyone could just insert a script on any page and pull in a random quote. You can see a test page here and see the JavaScript here. It works... but it's kinda slow and it requires jQuery. I'm a total amateur at this stuff, so if someone has any ideas on how we could do this smarter/faster, let me know!

Comments

  1. Webling
    Permalink to comment#

    luckily you haven´t a switch for the iphone. for me it´s kind of annoying if theres no standard version. mobile sites sucks.

  2. Hi Chris, I tried out one of your iPhone versions the other day and I really got a lot out of it. I agree that you cant really make out whats happening onscreen, but it still very useful. Cheers!

    • I think it will be cool just to be able to listen along whilst on the train and stuff. If you want to see the code, I agree also that you might need a PC or mac, but for design stuff this will work great.

      Well done Chris, and thanks for all your hard work

  3. Roderick
    Permalink to comment#

    Why on Earth would you worry first for such a small percentage of people having iPhones? Are you also thinking in having a Symbian version (s60 and UIQ), a winmo version, a blackberry version? All of them have a way bigger user base. Don’t forget to make an android version in a couple of months, O.K.?

    I’m not angry, even if I sound like I am… :)

    Proud user of an iPhone, a P1i and a Touch HD.

  4. Looks like Christmas came early this year! Thanks you!

  5. Andrew
    Permalink to comment#

    Hey Chris,

    I know of a few ideas i had to speed up pulling in the quotes, You could pull them from a database AJAX style.

    Anyway, Drop me an email if you’re after some help with it, or would like some more ideas.

  6. cssProdigy
    Permalink to comment#

    Thank you so much, finally I’m not forced to watch when i’m on a computer.

  7. Permalink to comment#

    Chris, your “API” will not work because of the security policies (in most browsers) which restrict XHR (Ajax) requests so that those requests can only be made to/from the same domain. This is known as the “same origin policy“. There are a few ways around it. The most common one, especially for APIs of this type is JSON, or if you trust the API then JSONP (JSON with padding). It’s a very simple way of gathering data (using JavaScript) from other domains – the other domain must have the appropriate API in place to serve JSON format code.

    JSON stands for JavaScript Object Notation, this is JSON:
    _________________________

    {
    "fruit1" : {
    "type" : "tasty",
    "name" : "apple",
    "age" : "2 days"
    },
    "fruit1" : {
    "type" : "meh",
    "name" : "lime",
    "age" : "1 day"
    }
    }

    _________________________

    So as you can see it is just a basic JavaScript object. The API (serverside) will need to generate something in this format so you can request it via Ajax and then you’ll normally need to parse it into a usable JavaScript object.

    Note that the main idea behind JSON (btw, created by Doug Crockford) is a simpler alternative to XML…

    I mentioned JSONP earlier which doesn’t require Ajax. The output from a JSONP API would look like this:
    _________________________

    functionName({
    "fruit1" : {
    "type" : "tasty",
    "name" : "apple",
    "age" : "2 days"
    },
    "fruit1" : {
    "type" : "meh",
    "name" : "lime",
    "age" : "1 day"
    }
    });

    _________________________

    This JSONP is loaded into a script tag (dynamically added to DOM). The “functionName” is normally specified in a “callback” paramterer within the query string which requests the script (the script which generates the above output).

    jQuery has native functions for retrieving JSON, for example:
    _________________________

    $.getJSON('http://your-api-url.com/script.php?json=true&items=10&callback=?', function(data){
    alert("The first fruit's name: " + data['fruit1'].name);
    });

    _________________________

    Here’s a custom-made (by me) JSON function which does the same:

    _________________________

    function getJSON(URL,success){
    var ud = 'json'+(Math.random()*100).toString().replace(/\./g,'');
    window[ud]= function(o){
    success&&success(o);
    };
    document.getElementsByTagName('body')[0].appendChild((function(){
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.src = URL.replace('callback=?','callback='+ud);
    return s;
    })());
    }

    _________________________

    So, as you can see, all it does is add a script tag to the DOM with the src specified as the API URL (passed as a parameter to the function).

    • Hey James, thanks for the awesome crash course in JSON! I have tinkered with it a little and it’s really the way to go for a real API. I would LOVE to get Quotes on Design providing a real JSON API, but I’m lacking the skill to get that done at the moment. The site is running on WordPress.

      Sounds to me like it would be a custom job, but would be the makings of a pretty killer WordPress plugin.

  8. Permalink to comment#

    iPhone versions of the site and the screencasts! For a guy who is on the go and takes opportunity when he can to keep learning, iPhone versions of anything is a HUGE asset. Thanks Santa!

  9. Butch
    Permalink to comment#

    Thanks for making the iPhone versions of the screen casts.

    I watch the casts on my way to work and I will watch it over again on my computer to get the code details down.

  10. agsone
    Permalink to comment#

    Going in a different direction to your javascript approach there is a very lean PHP random quote generator that I like here (scroll down to “PHP Random Text Banner Rotator”).

    It pulls the quotes and any HTML you want to add from a simple text file.

    • PHP may ultimately be the way to go here, but I’d prefer it pulls from the DB. WordPress is the back end which provides a ton of functionality to the site otherwise I’d like to keep (RSS feeds, archive production, random post on homepage, future expandability, easy theming, etc)

  11. Permalink to comment#

    iPod Version…I’m hooked. It’s like at least one gift for Christmas is something I really wanted. Thx Santa ;-)

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".