Archiv der Kategorie ‘Uncategorized‘

 
 

Sketchfab

Sketchfab is extremely cool:

Mustache Twitter

mustache.js is really nice. Here is a quick demo of mustache being used in conjunction with the twitter search api:

demo

Here is the code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="mustache.js"></script>
    <script>
      $(function(){
 
        var tweets = Mustache.compile($("#tweets").html()),
            results = $("#results"), 
            query = $("#query");
 
        $("#search").submit(function(e){
          e.preventDefault();
          var value = $.trim(query.val());
          if (value.length > 0){
            query.val("");
            results.html("<h2>loading...<\/h2>");
            $.getJSON("http://search.twitter.com/search.json?callback=?", 
                      {q : value}, render);
          }
        });
 
        function render(data){
          var html = tweets(data)
              .replace(new RegExp(data.query,"ig"), "<b>"+data.query+"<\/b>");
          results.html(html).find("span").html(addLinks);
        }
 
        function addLinks(i, htm){
          return htm.replace(/(https?\S+)/g, "<a href='$1' target='blank' >$1<\/a>");
        }
 
      });
    </script>
    <style>
      body,html{
        font-family : sans-serif;
        font-size : 13px; 
      }
      h1,h2,h3{
        margin : 4px;
        padding : 4px;
      }
      .tweet{
        padding : 4px;
        margin : 4px;
        border : 1px solid #ccc; 
        overflow : hidden;
      }
      .tweet img{
        float : left;
        margin : 4px; 
      }
    </style>
  </head>
  <body>
    <h1>Twitter Search</h1>
    <form id="search">
      <input id="query" type="search" placeholder="search..."/>
      <button>go</button>
    </form>
    <div id="results"></div>
    <script id="tweets" type="text/html">
      <h2>Results for "{{query}}"</h2>
      {{#results}}
      <div class="tweet">
        <h3>{{from_user}}</h3>
        <img src="{{profile_image_url}}" />
        <span>{{text}}</span>
      </div>
      {{/results}}
    </script>
  </body>
</html>

-webkit-transform : Use 3D for 2D

My students are often surprised when I show them web app demos for the iphone. They simply weren’t aware that you could use SVG or webkit-transform/transition to get some really smooth running interactive animation and graphics.

I’ve been wanting to post an intermediate level example on this site for awhile but haven’t gotten around to it until now.

This will only work in a webkit browser like chrome, safari/safari mobile etc…

Den ganzen Beitrag lesen…