Web-front-end Report

April 17th, 2015

Lu Yuan

Some Tricks

Detect if a GIF is Animated

animated-gif-detector

For those of you that prefer JavaScript (...my people...), I found a really simple animated GIF detection library on NPM:  animated-gif-detector.  Its API couldn't be shorter:

var fs = require('fs');
var animated = require('animated-gif-detector');

> animated(fs.readFileSync('wtf.gif'));
// true

> animated(fs.readFileSync('blank.gif'));
// false

http://davidwalsh.name/detect-gif-animated

Detect if a GIF is Animated

Netscape Looping Application Extension (GIF Unofficial Specification)

Determine If A Number Is Prime Using JavaScript

https://blog.nraboy.com/2015/04/determine-if-a-number-is-prime-using-javascript/

http://www.noulakaz.net/weblog/2007/03/18/a-regular-expression-to-check-for-prime-numbers/

/^1?$|^(11+?)\1+$/

About JSON

anyToJSON

https://github.com/lastlegion/anyToJSON

var anyToJSON = require("anyToJSON");

anyToJSON.csv({path: "100.csv"}, function(){
    console.log(anyToJSON.data  )
})

jsop

https://github.com/typicode/jsop

var jsop = require('jsop')

var config = jsop('config.json')
config.foo = 'bar'

μson

https://github.com/burningtree/uson

endpoint:id:wikipedia pages:[Malta Prague "New York"]
--->
[
  {
    "endpoint": {
      "id": "wikipedia"
    }
  },
  {
    "pages": [
      "Malta",
      "Prague",
      "New York"
    ]
  }
]

- endpoint:
    id: wikipedia
- pages:
    - Malta
    - Prague
    - New York
--->
{
  "endpoint": {
    "id": "wikipedia"
  },
  "pages": [
    "Malta",
    "Prague",
    "New York"
  ]
}

New APIs

fetch API

http://davidwalsh.name/fetch

https://fetch.spec.whatwg.org/

// url (required), options (optional)
fetch('/some/url', {
	method: 'get'
}).then(function(response) {
	
}).catch(function(err) {
	// Error :(
});

File API

http://davidwalsh.name/file-api

MutationObserver API

http://davidwalsh.name/mutationobserver-api

http://www.w3.org/TR/dom/#mutation-observers

var observer = new MutationObserver(function(mutations) {
	// For the sake of...observation...let's output the mutation to console to see how this all works
	mutations.forEach(function(mutation) {
		console.log(mutation.type);
	});    
});
 
// Notify me of everything!
var observerConfig = {
	attributes: true, 
	childList: true, 
	characterData: true 
};
 
// Node, config
// In this case we'll listen to all changes to body and child nodes
var targetNode = document.body;
observer.observe(targetNode, observerConfig);

The original jQuery source code

http://genius.it/ejohn.org/files/jquery-original.html