Text 1 Aug Getting your Flickr stream with jQuery

First you need to find out where is your rss link, you can grab the url easily form your gallery page on the left bottom. Click on the link and copy the url you are driven to. On the url you need to change the format from rss200 to json, you will end up with a url similar to:

http://api.flickr.com/services/feeds/photos_public.gne?id=642377@N00&lang=es-us&format=json&jsoncallback=?

finally the code you wil have in javascript will be:

$.getJSON("http://api.flickr.com/services/feeds/photoset.gne?set=720575946259036&nsid=642377@N00&lang=es-us&format=json&jsoncallback=?", function(data){
        var template = Handlebars.compile($("#template").html());
        $("#images").append(template(data.items));});

You will note that here we are using Handlebars library to make some templates, to automatize the creation of our webpage. To have this work you will need the following html code:

<ul id="images">
            <script id="template" type="text/x-handlebars-template">
                {{#each this}}
                <li><img src="{{media.m}}">
                    <p class="piefoto">{{title}}</p></li>
                {{/each}}
            </script>
        </ul>

Now you have your last 20 photos in an array and an <ul>, with this and some css you can have a very pretty web page of your flickr stram.

Link 6 Jul 1 note The world's first open source HTML5 SIP client»
Link 1 Feb 1 note HTML5 Structure Template»

kloningspoon:

HTML5 Reset is a simple set of best practices to get web projects off on the right foot.

  1. A style sheet designed to strip initial files from browsers, meaning you start off with a blank slate.
  2. Easy to customize — remove whatever you don’t need, keep what you do.
  3. Analytics and jQuery snippets in place
  4. Meta tags ready for population
  5. Empty mobile and print style sheets, including blocks for device orientation
  6. Modernizr.js http://www.modernizr.com/ enables HTML5 compatibility with IE (and a dozen other great features)
  7. IE-specific classes for simple CSS-targeting
  8. iPhone/iPad/iTouch icon snippets
  9. Lots of other keen stuff…
Photo 20 Oct Paseando (Taken with picplz.)

Paseando (Taken with picplz.)

Photo 11 Oct (Taken with picplz.)

(Taken with picplz.)

Photo 22 Aug 1 note
Text 13 May

dataanxiety asked: You have amazing links on Twitter! Wow! One great CSS or JS reference or other link after another! This isn't a question, just praise! I am @EllieAsksWhy on Twitter. You are a great resource!

thx very kind from you

Text 1 Apr 2 notes How to show your twitter timeline in a “diferent” way

First of all you go to the twitter widget page and grab the code to show your timeline.

Make a <div> and place the code inside:

<div id="timeline"> code generated by twitter </div>

We need to set some css styles for it:

#timeline{
display:none;
position:absolute;
left:50%;
top:20%;
border-style: solid;
background-color: white;
padding: 8px;
}

Read More

Text 21 Mar HTML5 <video> Tutorial

I’ve found a quite good video tutorial from mozilla people @codepo8

http://kcy.me/2es0

Text 8 Mar Safari 5 tricks HTML5

Safari 5 does not have native support for <video> and <audio> tags. You have to install quicktime to watch a video from a <video> HTML5 tag.


Design crafted by Prashanth Kamalakanthan. Powered by Tumblr.