day.js - A .JS a day

@dayjs-blog

day.js is a mini-blog for "A .js a day keeps WTF away"

115 posts

各位看倌，你沒看錯，是chrome devtool入面有一個terminal!!!

目前只有Mac版才有local，其他OS要用nodejs proxy連remote的機器。不過我比較想要sublime text和chrome的tunneling/source map啊⋯⋯

#devtool #terminal

支援orientation的輕量parallax engine, Demo網站超有趣的

Simple, lightweight parallax engine that reacts to the orientation of a smart device

模擬下雨的canvas用library

A simple script for simulating raindrops falling on a glass surface.

Demo

有良好mobile support的parallex library

這不是一般的貓紙 (cheatsheet)，這是個有live preview的互動貓紙(mouse hover就有效果可看、click有給function)，好讓你更易掌握要用的easing function

另網站提供各function的JS/SCSS/CSS的embed方法

Easing函數讓你可以指定動畫效果在執行時的速度，使其看起來更加真實。

本頁可以在每次你需要時，幫助你找到想要的函數。

*如果想刻自己的可以用casear 送的這個Ceaser CSS EASING ANIMATION TOOL

#animation #easing #util #cheat sheet

"Yet another masonry layout library" 這個是個由CSS和media query主導的masonry library，會自己去掃css來處理版面，沒有dependency但不支援舊browser (因為ES5的querySelectorAll和media query等等)

Beautiful & responsive multi-column layouts.

#layout #masonry #library

搜尋Array及hash properties的利器，有點像grep/SQL search但不用寫function，有npm及bower package。

sifter.js - A library for textually searching arrays and hashes of objects by property (or multiple properties). Designed specifically for autocomplete.

#search #util #library

Node.js Logo生出來的Wave w

More

Source

如果說Grunt有什麼不好有兩樣:

全部contrib和task塞在同一個file中改起來很麻煩 (find來find去也找不到令人怒羞)

JSON file寫起來好麻煩﹣就算用coffeescript也是一樣 ( ._.)

如果你有以上一項煩惱，那麼救星來了啦~

grunt-loader ｷﾀ━━━━(ﾟ∀ﾟ)━━━━!!!!

那麼，grunt-loader是做什麼的呢?

grunt-loader做兩件事:

把gruntfile要包的contrib和task拆到 {project root}/grunt/contrib 和 {project root}/grunt/task/ 之下

改用YAML: contrib用{package}.yaml, task用{taskname}.yaml

感覺好像沒那麼討厭，不過這東西才0.1.1還有漫漫長路吶～真的很討厭JSON的朋友還是乖乖用coffeescript...

n的功用很簡單，提供一個單字command， n ，來給你安裝/切換/移除多個版本的nodeJS及相應的npm，是把nodeJS/npm玩壞的修復好幫手。

可以在browser跑Scala的code的js library~

scala-js - Scala.js, a Scala to JavaScript compiler

Scala.js的presentation

#lang #js-imp #scala

簡單的currying wrapping工具，只要把n個parameter的function丟給curry()，然後再丟第一個parameter的值就會生出只要n-1個parameter的curried function。

看，很簡單吧~

simple curry module, with nothing *too clever*, and full test coverage

(*這應該是left currying沒錯，數學上的預設方向

#functional #curry

responsive的日曆式data picker 不過只支援IE 8+

#date #responsive #input

基於Haskell的 GHC HEAD (7.8)的spec的JS implementation

附送一台vagrant可以讓你用ghcjs 跑haskell，也可以配nodejs或是jsshell

最強的是那台vagrant可以變成一台server去跑在home directory的haskell file...

#lang #js-impl #haskell

滿有用的service，可以模擬眾多http status... 缺點是沒有timout. (太吃時間了⋯⋯)

一個簡單的opensource service連介面用來刻http response作測試REST API之用，但感覺自己從github拉回來set一個在自己地方更方便嘛⋯⋯

#tdd #ajax #RESTful

這個簡直是逆天。

一切源於一個沒什麼用但有夠難的問題：如何在一個Page Load完之後在User disable JS時馬上得知並顯示<noscript><div>的內容?

為什麼事情會如此麻煩呢?

<noscript><div> 並不會在page load之後trigger

全部JS code會在disable的一剎全部停止(freeze)但不會reload(IE除外)，所有在跑的interval和timeout馬上clear

FB有做過。

effect wanted。

而答案很天才的⋯⋯

「用element replacement去block那個element有的animation(用setinterval)，一旦JS disable animation會馬上開始。」

當然這個方法太aggressive了，but it works XD

不過應該慶幸的是只有developer/advance user才會搞即時disable這種東西(茶)。

day.js - A .JS a day @dayjs-blog - Tumblr Blog | Tumgag