JSFiddle - React, Tailwind, and code Playground

by Oski Krawczyk

HTML

<p>I was thinking about an iphone app animation simlar to this <a href="http://dribbble.com/shots/1391576-Sign-up?list=following">@</a>, or perhaps something like that <a href="http://dribbble.com/shots/1375986-AspireBoard?list=following">@</a>.</p>

<p>I was thinking about an iphone app animation simlar to this <a href="http://dribbble.com/shots/1386915-PocketMSG-concept-mailing-app-for-iphone?list=following">@</a>, or perhaps something like that <a href="http://dribbble.com/shots/1377578-Landing-page-for-iPhone-app">@</a>.</p>

CSS

img {
    vertical-align: middle;
    border: solid 1px #ccc;
    border-radius: 2px;
    padding: 2px;
}

body {
    font-family: "Helvetica Neue";
    font-weight: 300;
    line-height: 1.4em;
}

CoffeeScript

els = document.getElements "p a[href*=dribbble.com/shots/]"

Array.each els, (el, index) =>
    href = el.get "href"
    id = href.split "shots/"
    id = id[1].split "-"
    id = id[0]
    console.log "http://api.dribbble.com/shots/#{id}"
    
    request = new Request.JSONP
        url: "http://api.dribbble.com/shots/#{id}"
        onSuccess: (response) ->
            console.log response
            uberImage = new Element "img",
                src: response.image_url
                height: 15
            uberImage.replaces el
    request.send()