我是台南人，我喜歡台南..... I come from Tainan , I love Tainan

The State Of HTML5 Video

The State Of HTML5 Video

3. Tag Attributes Internet Explorer ignores the preload=none attribute, which prevent the desktop browsers from reaching a perfect score. The implication here is that IE9 loads a part of your MP4 upon each pageview, instead of waiting until a user actually starts the video. This may add to a substantial increase in your streaming costs. autoplay (video is never played upon page load). We believe this to be the correct approach, hence the N/A sign instead of a red cross. Unfortunately, the video controls on Android 2.2 (nonexisting) and 2.3 (clunky) are not that useful. Android 4 introduced a much better UX, on par with iOS. Note the design of the video controls in each browser is different, but all provide the same options: a play/pause toggle, a time slider, a volume slider and a fullscreen button. IE9 has no fullscreen toggle and iOS/Android omit the volume slider (in favor of hardware buttons). 4. JavaScript API However, we do not agree with Apple's decision to block scripted play() commands. It makes the implementation of advertising or playlists unnecessarily complicated. Last, a string of Android issues make video scripting on this OS a challenge. Luckily, here too Android 4.1 introduced many bugfixes. 7. Adaptive Streaming Adaptive streaming is a core component of online video. It enables buffer control (less waste of bandwidth), fast seeking (to not-yet-downloaded parts), quality adjustments (during playback) and live streaming (possibly with DVR). Currently iOS is the only platform with adaptive streaming, supporting Apple's own HTTP Live Streaming (HLS) protocol. Android introduced HLS support in 4.0, only to have it dropped again in 4.1.

Asepsis is a system utility for prevention of .DS_Store files

Asepsis is a system utility for prevention of .DS_Store files

modify geolocation exif information

1. install exif tool http://www.sno.phy.queensu.ca/~phil/exiftool/

2. get geo location in different format from: http://itouchmap.com/latlong.html

3. modify exif as following command

exiftool -GPSLongitudeRef=E -GPSLatitudeRef=N -GPSLongitude=121.565000 -GPSLatitude=121.565000 *.jpeg 

, via: http://scribblesandsnaps.com/2011/11/23/easy-geotagging-with-exiftool/

4. verify the result from online exif reader: http://regex.info/exif.cgi

return false, preventDefault, and stopPropagation in jQuery

return false, preventDefault, and stopPropagation in jQuery - return false equals to 'preventDefault + stopPropagation' - stopImmedidatePropagation is 'stopPropagation' and will cancel the event handlers applies to the target

$('a').click( function(event) {
  return false;
});

is equivalent to

$('a').click( function(event) {
  event.preventDefault();
  event.stopPropagation();
});

demo: http://css-tricks.com/examples/ReturnFalse/

  // http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/ecma-script-binding.html
  jQuery.Event.prototype = {
    preventDefault: function() {
      this.isDefaultPrevented = returnTrue;

      var e = this.originalEvent;
      if (!e) {
        return;
      }

      // if preventDefault exists run it on the original event
      if (e.preventDefault) {
        e.preventDefault();

        // otherwise set the returnValue property of the original event to false (IE)
      } else {
        e.returnValue = false;
      }
    },
    stopPropagation: function() {
      this.isPropagationStopped = returnTrue;

      var e = this.originalEvent;
      if (!e) {
        return;
      }
      // if stopPropagation exists run it on the original event
      if (e.stopPropagation) {
        e.stopPropagation();
      }
      // otherwise set the cancelBubble property of the original event to true (IE)
      e.cancelBubble = true;
    },
    stopImmediatePropagation: function() {
      this.isImmediatePropagationStopped = returnTrue;
      this.stopPropagation();
    },
    isDefaultPrevented: returnFalse,
    isPropagationStopped: returnFalse,
    isImmediatePropagationStopped: returnFalse
  };

  // Run delegates first; they may want to stop propagation beneath us
      for (i = 0; i < handlerQueue.length && !event.isPropagationStopped(); i++) {
        matched = handlerQueue[i];
        event.currentTarget = matched.elem;

        for (j = 0; j < matched.matches.length && !event.isImmediatePropagationStopped(); j++) {
          handleObj = matched.matches[j];

          // Triggered event must either 1) be non-exclusive and have no namespace, or
          // 2) have namespace(s) a subset or equal to those in the bound event (both can have no namespace).
          if (run_all || (!event.namespace && !handleObj.namespace) || event.namespace_re && event.namespace_re.test(handleObj.namespace)) {

            event.data = handleObj.data;
            event.handleObj = handleObj;

            ret = ((jQuery.event.special[handleObj.origType] || {}).handle || handleObj.handler).apply(matched.elem, args);

            if (ret !== undefined) {
              event.result = ret;
              if (ret === false) {
                event.preventDefault();
                event.stopPropagation();
              }
            }
          }
        }
      }

HTML5 APIs You Didn't Know Existed

HTML5 APIs You Didn't Know Existed Element.classList

// Add a class to an element
myElement.classList.add("newClass");

// Remove a class to an element
myElement.classList.remove("existingClass");

// Check for existence
myElement.classList.contains("oneClass");

// Toggle a class
myElement.classList.toggle("anotherClass");

ContextMenu API The new ContextMenu API is excellent: instead of overriding the browser context menu, the new ContextMenu API allows you to simply add items to the browser's context menu:

Element.dataset The dataset API allows developers to get and set data- attribute values

/*  Assuming element:

  


*/

// Get the element
var element = document.getElementById("myDiv");

// Get the id
var id = element.dataset.id;

// Retrieves "data-my-custom-key"
var customKey = element.dataset.myCustomKey;

// Sets the value to something else
element.dataset.myCustomKey = "Some other value";

  // Element becomes:
  //    
  

application/x-www-form-urlencoded vs. multipart/form-data

application/x-www-form-urlencoded vs. multipart/form-data

關於application/x-www-form-urlencoded等字符編碼的解釋說明 在Form元素的語法中，EncType表明提交數據的格式用Enctype屬性指定將數據回發到服務器時瀏覽器使用的編碼類型。下邊是說明： application/x-www-form-urlencoded：窗體數據被編碼為名稱/值對。這是標準的編碼格式。multipart/form-data：窗體數據被編碼為一條消息，頁上的每個控件對應消息中的一個部分。text/plain：窗體數據以純文本形式進行編碼，其中不含任何控件或格式字符。 補充 form的enctype屬性為編碼方式，常用有兩種：application/x-www-form-urlencoded和multipart/form-data，默認為application/x-www-form-urlencoded。當action為get時候，瀏覽器用x-www-form-urlencoded的編碼方式把form數據轉換成一個字串（name1=value1&name2=value2...），然後把這個字串append到url後面，用?分割，加載這個新的url。當action為post時候，瀏覽器把form數據封裝到http body中，然後發送到server。如果沒有type=file的控件，用默認的application/x-www-form-urlencoded就可以了。但是如果有type=file的話，就要用到multipart/form-data了。瀏覽器會把整個表單以控件為單位分割，並為每個部分加上Content-Disposition(form-data或者file),Content-Type(默認為text/plain),name(控件name)等信息，並加上分割符(boundary)。

http://en.wikipedia.org/wiki/POST_(HTTP)
When a web browser sends a POST request from a web form element, the default Internet media type is "application/x-www-form-urlencoded".[8] This is a format for encoding key-value pairs with possibly duplicate keys. Each key-value pair is separated by an '&' character, and each key is separated from its value by an '=' character. Keys and values are both escaped by replacing spaces with the '+' character and then using URL encoding on all other non-alphanumeric[9] characters. For example, the key-value pairs

Name: Jonathan Doe
Age: 23
Formula: a + b == 13%!

are encoded as

Name=Jonathan+Doe&Age=23&Formula=a+%2B+b+%3D%3D+13%25%21

Starting with HTML 4.0, forms can also submit data in multipart/form-data as defined in RFC 2388 (See also RFC 1867 for an earlier experimental version defined as an extension to HTML 2.0 and mentioned in HTML 3.2). http://www.w3.org/TR/html401/interact/forms.html#h-17.13.4.1

9 uses for cURL worth knowing

9 uses for cURL worth knowing
http://echo.httpkit.com

curl http://echo.httpkit.com

Set the Request Method

curl -X POST echo.httpkit.com

Set Request Headers

curl -H "Authorization: OAuth 2c4419d1aabeec" \
     http://echo.httpkit.com

curl -H "Accept: application/json" \
     -H "Authorization: OAuth 2c3455d1aeffc" \
     http://echo.httpkit.com

Send a Request Body

Many popular HTTP APIs today POST and PUT resources using application/json or application/xml rather than in an HTML form data. Let’s try PUTing some JSON data to the server.

curl -X PUT \
     -H 'Content-Type: application/json' \
     -d '{"firstName":"Kris", "lastName":"Jordan"}'
     echo.httpkit.com

Use a File as a Request Body

Escaping JSON/XML at the command line can be a pain and sometimes the body payloads are large files. Luckily, cURL’s @readfile macro makes it easy to read in the contents of a file. If we had the above example’s JSON in a file named “example.json” we could have run it like this, instead:

curl -X PUT \
     -H 'Content-Type: application/json' \
     -d @example.json
     echo.httpkit.com

POST HTML Form Data

Notice the method is POST even though we did not specify it. When curl sees form field data it assumes POST. You can override the method using the -X flag discussed above. The “Content-Type” header is also automatically set to “application/x-www-form-urlencoded” so that the web server knows how to parse the content. Finally, the request body is composed by URL encoding each of the form fields.

curl -d "firstName=Kris" \
     -d "lastName=Jordan" \
     echo.httpkit.com

POST HTML Multipart / File Forms

What about HTML forms with file uploads? As you know from writing HTML file upload form, these use a multipart/form-data Content-Type, with the enctype attribute in HTML. In cURL we can pair the -F option and the @readFile macro covered above. Like with the -d flag, when using -F curl will automatically default to the POST method, the multipart/form-data content-type header, calculate length, and compose the multipart body for you. Notice how the @readFile macro will read the contents of a file into any string, it’s not just a standalone operator. The “;text/plain” specifies the MIME content-type of the file. Left unspecified, curl will attempt to sniff the content-type for you.

curl -F "firstName=Kris" \
     -F "publicKey=@idrsa.pub;type=text/plain" \
     echo.httpkit.com

{
  "method": "POST",
  "uri": "/",
  "path": {
    "name": "/",
    "query": "",
    "params": {}
  },
  "headers": {
    "x-forwarded-for": "1.34.59.62",
    "host": "echo.httpkit.com",
    "user-agent": "curl/7.19.7 (universal-apple-darwin10.0) libcurl/7.19.7 OpenSSL/0.9.8r zlib/1.2.3",
    "accept": "*/*",
    "content-length": "307",
    "content-type": "multipart/form-data; boundary=----------------------------c8fa62213588"
  },
  "body": "------------------------------c8fa62213588\r\nContent-Disposition: form-data; name=\"firstName\"\r\n\r\nKris\r\n------------------------------c8fa62213588\r\nContent-Disposition: form-data; name=\"publicKey\"; filename=\"idrsa.pub\"\r\nContent-Type: text/plain\r\n\r\n\nhello world\n\r\n------------------------------c8fa62213588--\r\n",
  "ip": "127.0.0.1",
  "powered-by": "http://httpkit.com",
  "docs": "http://httpkit.com/echo"

三國殺規則及武將常見問題釋疑.pdf

三國殺規則及武將常見問題釋疑.pdf

document.elementFromPoint - Document Object Model (DOM) | MDN

document.elementFromPoint - Document Object Model (DOM) | MDN

var element = document.elementFromPoint(x, y);

Yiannis Kouros - Wikipedia, the free encyclopedia

Yiannis Kouros - Wikipedia, the free encyclopedia

Yiannis Kouros (Greek: Γιάννης Κούρος),(born February 13, 1956 in Tripoli, Greece) is a Greek ultramarathon runner based in Melbourne. He is sometimes called the "Running God" or "Pheidippides Successor".[1] He holds every men's outdoor road world record from 100 to 1,000 miles and every road and track record from 12 hours to 6 days.[2] In 1991, he starred as Pheidippides in the movie The Story of the Marathon: A Hero's Journey, which chronicles the history of marathon running. Kouros came to prominence when he won the Spartathlon in 1984 in record time[3] and the Sydney to Melbourne Ultramarathon in 1985 in a record time of 5 days, 5 hours, 7 minutes and 6 seconds. He beat the previous record held by Cliff Young.[4] Kouros says that his secret is that "when other people get tired they stop, I DON'T. I take over my body with my mind I tell it that it's not tired and it listens". Kouros has also written over 1,000 poems (several of which appear in his book Symblegmata (Clusters)) and the book The Six-Day Run of the Century.