tag:blogger.com,1999:blog-251265692024-03-07T17:47:58.553+08:00Wuff, Wuff!!birdegghttp://www.blogger.com/profile/05915008448189415037noreply@blogger.comBlogger1812125tag:blogger.com,1999:blog-25126569.post-47049544265873360712018-11-27T23:20:00.001+08:002018-11-27T23:20:00.135+08:00memoweekly memo(work)<br />--------<br />http://shopping.pchome.com.tw/?m=item&f=exhibit&IT_NO=AMAA1F-A23162965-000&SR_NO=AMAA1F<br />修改select down graceful - index<br />2. long 跳線 往路線, 2.5吋硬碟<br />3. 查南非幣定存<br />1. SMTP setting http://backyard.yahoo.com/resources/isnet/self_support/smtp.htm<br />2. a extremely fast file format checker in C<br />http://www.itee.uq.edu.au/~cristina/students/david/honoursThesis96/bff.htm<br />http://www.iwriteiam.nl/Ha_HTCABFF.html<br />3. a blooger new theme http://jszen.blogspot.com/2005/03/cross-domain-security-woes.html<br />4. googlex and message board backend<br />5. check out XFN<br />http://microformats.org/wiki/xfn-implementations<br />weekly memo(home)<br />* survey javascript iamge rotation<br />nifty cube<br />http://www.html.it/articoli/niftycube/index.html<br />像簿的style<br />http://www.guardian.co.uk/news/gallery/2007/jul/18/china.pollution?picture=330216015<br />* slideshow 加上空白鍵 <br /><br /> ,handleKeypress: function(event){<br /> var key = String.fromCharCode(event.charCode ? event.charCode : event.keyCode);<br /> if(!slideshow._paused) return;<br /><br />* handleKepress 的 Esc keycode?<br />* check out YUI moton<br />* edit Wiki about IE debug<br />* http://ued.taobao.com/blog/2008/01/10/css-notes-7-input-form/#comment-26556<br />* http://ejohn.org/blog/super-fast-delicious-bookmarklet/<br />* http://ejohn.org/blog/building-a-javascript-library/<br />* a yahoo! dictionary bookmarklet & review the old bookmarklet<br />* a bookmarlet that include firebug-lite for ie use | improve jash<br />* watch : the 25th hour<br />* alert prompt confirm window http://extjs.com/deploy/dev/examples/message-box/msg-box.html<br />* checkout ext<br />http://extjs.com/deploy/dev/examples/<br />* watch: The Man who wasn't there<br />http://developer.yahoo.com/yui/connection/#scope<br />* read http://blog.ericsk.org/archives/815 用 Python + django 10分鐘內作出一個 blog at ericsk’s blog<br />* build a calendar picker according to the nexus solution<br />* a light-weight getRegion & getXY without library<br />* read <a href="http://www.cn-cuckoo.com/">为之漫笔</a><br />* read Vitamin Features » 15 Things you can do with Yahoo! UI<br />http://www.thinkvitamin.com/features/javascript/15-things-you-can-do-with-yahoo-ui<br />* read <a href="http://www.thinkvitamin.com/features/dev/the-importance-of-maintainable-javascript">Vitamin Features » The Importance of Maintainable JavaScript</a><br />* read <a href="http://www.informationarchitects.jp/the-web-is-all-about-typography-period">Information Architects Japan » iA Notebook » Web Design is 95% Typography (1)</a><br />http://www.informationarchitects.jp/ia-notebook<br /><a href="http://ejohn.org/blog/simple-class-instantiation/">John Resig - Simple "Class" Instantiation</a><br />* read<br />http://livepipe.net/projects/event_behavior/<br />http://www.adamlogic.com/2007/03/20/3_metaprogramming-javascript-presentation<br /><br />monthly memo<br /><br />project & idea<br />* my own javascript debug library -> read AdvancED.DOM.Scripting / A practical example: your own debugging log<br />* rewrite genTitle() to avoid javascript error<br /><br />* read 最新JavaScript動態網頁範例 ch8 頁框的問題<br />* try http://foo.com/bar.htm#test/many many after ....<br />* check the ajaxian about the above-mentioned techniquesbirdegghttp://www.blogger.com/profile/05915008448189415037noreply@blogger.com0tag:blogger.com,1999:blog-25126569.post-23462991691800948082015-06-01T15:09:00.002+08:002015-06-01T15:09:16.043+08:00[問卦] 悼念臺北大空襲七十周年,誰塗改了歷史? - 看板 Gossiping - 批踢踢實業坊<a href="https://www.ptt.cc/bbs/Gossiping/M.1433037730.A.8C4.html">[問卦] 悼念臺北大空襲七十周年,誰塗改了歷史? - 看板 Gossiping - 批踢踢實業坊</a><br>
<a href="http://cwhung.blogspot.tw/2015/05/531.html">飛行場の測候所: 531台北大空襲七十周年的省思</a>
<img src="http://i.imgur.com/QcJjNl7.jpg" alt="">birdegghttp://www.blogger.com/profile/05915008448189415037noreply@blogger.com0tag:blogger.com,1999:blog-25126569.post-61208898522564723422015-05-21T13:35:00.002+08:002015-05-21T13:35:48.420+08:00HelloFax:免費線上傳真服務(每月都有50頁額度) @ 符碼記憶<a href="http://www.ewdna.com/2013/12/free-online-fax-hellofax.html">HelloFax:免費線上傳真服務(每月都有50頁額度) @ 符碼記憶</a>
<blockquote>一般而言我們平常應該沒有什麼傳真的需求,
不過臨時有需要時就很頭大,雖然郵局、便利商店都有提供傳真服務,
可是應該還是有人像我一樣,若能省錢就省錢,能不用出門就不用出門吧 :p
這次研究免費線上傳真服務是因為需要傳真申請華南信用卡紅利點數兌換ANA哩程,
研究了幾種免費服務後最後選擇了 HelloFax,簡單整理比較如下:
HelloFax:測試OK,簡單好用,每月有50頁額度,全台可傳!
MyFax:傳真後需收email點連結才真正送出,但12/4測試收不到email
FaxDesk:已陣亡,連不到網頁</blockquote>birdegghttp://www.blogger.com/profile/05915008448189415037noreply@blogger.com0tag:blogger.com,1999:blog-25126569.post-56979192129329668482015-05-20T15:28:00.004+08:002015-05-20T15:28:30.236+08:00Himelight - 履歷產生器<a href="https://www.himelight.com/">Himelight - 履歷產生器</a>
<blockquote>打造屬於新世代的個人品牌
Himelight 讓你可以輕鬆的完成出色履歷,還可以點亮你經歷最精采的部份,展現給全世界。</blockquote>birdegghttp://www.blogger.com/profile/05915008448189415037noreply@blogger.com0tag:blogger.com,1999:blog-25126569.post-20998471834819759402015-05-20T11:25:00.004+08:002015-05-20T11:26:22.141+08:00Meaning of the phrase "it is worth noting that" - English Language & Usage Stack Exchange<a href="http://english.stackexchange.com/questions/189628/meaning-of-the-phrase-it-is-worth-noting-that">Meaning of the phrase "it is worth noting that" - English Language & Usage Stack Exchange</a>
<blockquote>"It is worth noting that"
simply means "here's something, which you should remember:" or "here's something you should pay attention to:" or "here's something that is worth reading and remember:"
ex: It’s worth nothing that while `setTimeout` is relatively portable across platforms, there’s often a better alternative available.</blockquote>
birdegghttp://www.blogger.com/profile/05915008448189415037noreply@blogger.com0tag:blogger.com,1999:blog-25126569.post-25883118716089334142015-04-23T11:07:00.002+08:002015-04-23T11:07:44.979+08:00IRHydra<a href="http://mrale.ph/irhydra/2/">IRHydra</a>
<blockquote>This is a tool that can display intermediate representations used by V8 and Dart VM optimizing compilers.</blockquote>birdegghttp://www.blogger.com/profile/05915008448189415037noreply@blogger.com0tag:blogger.com,1999:blog-25126569.post-47764458247225812862015-04-21T21:17:00.000+08:002015-10-06T22:47:43.585+08:00youtube-dl - CLI tool to get videos from YouTube - Pank's Blog<a href="http://pank.org/blog/2015/04/youtube-dl-cli-tool.html">youtube-dl - CLI tool to get videos from YouTube - Pank's Blog</a>
<blockquote>youtube-dl 是個強大的線上影片下載工具,
不止支援 YouTube, 也支援很多其他站 (如土豆、樂視等)
也有提供 Windows 版 (已包入 Python)
列出所有 format code
youtube-dl -F https://www.youtube.com/watch?v=ajLsb3QvwbI
指定下載某個 format code
youtube-dl -f 266 https://www.youtube.com/watch?v=ajLsb3QvwbI
下載最高解析度
youtube-dl -f bestvideo+bestaudio https://www.youtube.com/watch?v=ajLsb3QvwbI</blockquote>birdegghttp://www.blogger.com/profile/05915008448189415037noreply@blogger.com0tag:blogger.com,1999:blog-25126569.post-4552251358656146712015-04-20T18:01:00.002+08:002015-04-20T18:01:47.492+08:00haxorplatform/web-bundle<a href="https://github.com/haxorplatform/web-bundle">haxorplatform/web-bundle</a>
<blockquote>Tool to pack binary files into a PNG image.</blockquote>birdegghttp://www.blogger.com/profile/05915008448189415037noreply@blogger.com0tag:blogger.com,1999:blog-25126569.post-62726203154296878372015-04-15T13:53:00.002+08:002015-04-15T13:53:34.368+08:00workaround: video auto play in mobile browser<a href="http://blog.foolip.org/2014/02/10/media-playback-restrictions-in-blink/">Media playback restrictions in Blink | Philip Jägenstedt</a>
<blockquote>
However, I’ve also found a workaround for current browsers. As of WebKit r108831, all restrictions are removed in the first successful load() or play() call. Any user gesture is accepted, so one can listen to all input events and remove the restrictions as soon as the user clicks, touches or uses the keyboard. One does not need to start playback at that point, but can wait until a later time. For example, one could “liberate” a number of audio elements for later use in a game.
I’ve prepared a <a href="foolip.org/2014/02/10/media-playback-restrictions-in-blink/demo.html">demo of the workaround</a>. It works in current versions of Opera, Chrome and Safari. While it does not work in the default Android browser prior to KitKat, even there it could be adapted to e.g. autoplay background music by calling play() instead of load() in the input event handler.</blockquote>
birdegghttp://www.blogger.com/profile/05915008448189415037noreply@blogger.com0tag:blogger.com,1999:blog-25126569.post-47198490536523775642015-04-15T11:08:00.003+08:002015-04-15T11:08:50.823+08:00Napkin for OS X - Say it with a picture, skip the 1,000 words<a href="http://aged-and-distilled.com/">Napkin for OS X - Say it with a picture, skip the 1,000 words</a>
<blockquote>Napkin is the ideal image markup application for OS X. Designers, software developers, artists, educators, journalists, or anyone that needs to annotate images will love how painless and powerful Napkin is. You'll be creating engaging results in no time. Watch our quick video to see how Napkin will make your life easier.</blockquote>birdegghttp://www.blogger.com/profile/05915008448189415037noreply@blogger.com0tag:blogger.com,1999:blog-25126569.post-50088072624211603072015-02-26T16:50:00.002+08:002015-02-26T16:52:35.481+08:00Aero Snap 工具加強版:BetterSnapTool | AppleUser<a href="http://appleuser.com/2014/03/04/better-snap-tool/">Aero Snap 工具加強版:BetterSnapTool | AppleUser</a>
<blockquote>via: <a href="https://news.ycombinator.com/item?id=8768022">Amethyst – A tiling window manager for OS X | Hacker News</a>
</blockquote>birdegghttp://www.blogger.com/profile/05915008448189415037noreply@blogger.com0tag:blogger.com,1999:blog-25126569.post-53599866533965757432015-02-26T10:15:00.000+08:002015-02-26T10:15:25.889+08:007 Rules for Creating Gorgeous UI<a href="https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda">7 Rules for Creating Gorgeous UI (Part 1) — Medium</a>
<blockquote>
<b>Light comes from the sky</b>
<b>Black and white first</b>
<b>Double your whitespace</b>
<b>Learn the methods of overlaying text on images (see Part 2)</b>
<b>Make text pop— and un-pop (see Part 2)</b>
<b>Only use good fonts (see Part 2)</b>
<b>Steal like an artist (see Part 2)</b></blockquote>birdegghttp://www.blogger.com/profile/05915008448189415037noreply@blogger.com0tag:blogger.com,1999:blog-25126569.post-47237229986123585312015-02-25T17:53:00.002+08:002015-02-25T17:53:32.940+08:00HandBrake: Open Source Video Transcoder<a href="https://handbrake.fr/">HandBrake: Open Source Video Transcoder</a>
<blockquote>Convert video from nearly any format
Free and Open Source
Multi-Platform (Windows, Mac and Linux)</blockquote>birdegghttp://www.blogger.com/profile/05915008448189415037noreply@blogger.com0tag:blogger.com,1999:blog-25126569.post-57130086271933478792015-02-25T16:27:00.000+08:002015-02-26T14:00:18.690+08:00Retrieving tabs after Chrome crash:chrome<a href="http://www.reddit.com/r/chrome/comments/1erjxx/retrieving_tabs_after_chrome_crash/">Retrieving tabs after Chrome crash:chrome</a>
<blockquote>First go to
~/Library/Application Support/Google/Chrome/Default
and look for all the variants of current session, current tabs, last session, last tabs. You can rename last tabs (make backups first) to current tabs, and then boot chrome, and it will try to restore.
Chromes tab backups are terrible. I recommend installing Fresh Start or another backup solution from the chrome web store.</blockquote>
<a href="https://chrome.google.com/webstore/detail/session-buddy/edacconmaakjimmfgnblocblbcdcpbko">chrome extention: Session Buddy</a>
<blockquote>
Session Buddy is a session manager for your browser that allows you to:
● See all open tabs in one place.
● Save open tabs and restore them later. Great for freeing up memory and avoiding tab clutter.
● Recover open tabs after a browser or system crash.
● Organize links by topic and find them when you need them with keyword search.
● Easily consolidate link sets and eliminate duplicates.
● Export link sets in a variety of text formats for use in email messages, documents, spreadsheets, and online posts.</blockquote>
<a href="https://chrome.google.com/webstore/detail/freshstart-cross-browser/nmidkjogcjnnlfimjcedenagjfacpobb/related">chrome extention: FreshStart</a>
<blockquote>*How to use
Saves all your windows and tabs every minutes.
Recommended: 5 minutes. Auto-saving too
frequently may slow down your machine.</blockquote>birdegghttp://www.blogger.com/profile/05915008448189415037noreply@blogger.com0tag:blogger.com,1999:blog-25126569.post-18706990599818829532015-01-22T17:24:00.002+08:002015-01-22T17:25:23.743+08:00Functional Programming in Javascript === Garbage « Thomas Reynolds<a href="http://awardwinningfjords.com/2014/04/21/functional-programming-in-javascript-equals-garbage.html">Functional Programming in Javascript === Garbage « Thomas Reynolds</a>
<blockquote>
These can both be written as a reducer.
<pre class="js">
function map(f, list) {
return reduce(function(val, sum) {
sum.push(f(val));
return sum;
}, list, []);
}</pre>
The reducer takes a function which can update a value sum which starts at [] and is updated once for each item in the list.
Okay, that was a long lead in. Here's how you could naively implement a reducer:
<pre class="js">
function reduce(f, list, sum) {
if (list.length < 1) {
return sum;
} else {
var val = list.shift();
return reduce(f, list, f(val, list));
}
}</pre></blockquote>birdegghttp://www.blogger.com/profile/05915008448189415037noreply@blogger.com0tag:blogger.com,1999:blog-25126569.post-15700477753165395592015-01-22T11:15:00.001+08:002015-03-24T12:02:20.729+08:00Javascript in 2015 - YouTube<iframe width="420" height="315" src="//www.youtube.com/embed/iukBMY4apvI" frameborder="0" allowfullscreen></iframe>
<blockquote>1. npm install -g jspm
2. cd ~/dev/jspm; jspm init
3. npm install -g live-server
4. live-server .
5. vim index.htm, add
<script src="./jspm_packages/system.js"></script>
<script>System.import('./lib/main')</script>
6. vim ./lib/main.js, add
import RedditApi from './Reddit-api'
export default {}
7. vim ./lib/Reddit-api.js, add
class RedditApi {
load() {
console.log('todo')
}
}
export default new RedditApi()
8. jspm install npm:jsonp
9. jspm bundle --minify lib/main</blockquote>
tag: systemJSbirdegghttp://www.blogger.com/profile/05915008448189415037noreply@blogger.com0tag:blogger.com,1999:blog-25126569.post-27220185828297041132015-01-21T17:46:00.000+08:002015-01-21T17:47:50.874+08:00live-server<a href="https://www.npmjs.com/package/live-server">live-server</a>
<blockquote>This is a little development server with live reload capability. Use it for hacking your HTML/JavaScript/CSS files, but not for deploying the final site.
ex: PORT=12345 live-server .
</blockquote>birdegghttp://www.blogger.com/profile/05915008448189415037noreply@blogger.com0tag:blogger.com,1999:blog-25126569.post-44909257837377289892014-12-15T10:36:00.003+08:002014-12-15T10:36:51.071+08:00Synergy - Mouse and keyboard sharing software<a href="http://synergy-project.org/">Synergy - Mouse and keyboard sharing software</a>
<blockquote>Synergy combines your devices together in to one cohesive experience.
Seamlessly move your mouse to any computer and start typing.
Works on all major operating systems (Windows, Mac OS X, and Linux).
Share your clipboard (copy and paste) between your computers.
Drag and drop files from one computer to another (Windows and Mac OS X).
Encryption keeps sensitive data safe on public networks.
Network-based (IP) software KVM switch (non-video).</blockquote>birdegghttp://www.blogger.com/profile/05915008448189415037noreply@blogger.com0tag:blogger.com,1999:blog-25126569.post-72397888132257579892014-12-10T10:48:00.000+08:002014-12-10T10:48:13.373+08:00About BNF notation<a href="http://cui.unige.ch/db-research/Enseignement/analyseinfo/AboutBNF.html">About BNF notation</a>
<blockquote>What is BNF notation?
BNF is an acronym for "Backus Naur Form". John Backus and Peter Naur introduced for the first time a formal notation to describe the syntax of a given language (This was for the description of the ALGOL 60 programming language, see [Naur 60]). To be precise, most of BNF was introduced by Backus in a report presented at an earlier UNESCO conference on ALGOL 58. Few read the report, but when Peter Naur read it he was surprised at some of the differences he found between his and Backus's interpretation of ALGOL 58. He decided that for the successor to ALGOL, all participants of the first design had come to recognize some weaknesses, should be given in a similar form so that all participants should be aware of what they were agreeing to. He made a few modificiations that are almost universally used and drew up on his own the BNF for ALGOL 60 at the meeting where it was designed. Depending on how you attribute presenting it to the world, it was either by Backus in 59 or Naur in 60. (For more details on this period of programming languages history, see the introduction to Backus's Turing award article in Communications of the ACM, Vol. 21, No. 8, august 1978. This note was suggested by William B. Clodius from Los Alamos Natl. Lab).
Since then, almost every author of books on new programming languages used it to specify the syntax rules of the language. See [Jensen 74] and [Wirth 82] for examples.
The following is taken from [Marcotty 86]:
The meta-symbols of BNF are:
::=
meaning "is defined as"
|
meaning "or"
< >
angle brackets used to surround category names.
The angle brackets distinguish syntax rules names (also called non-terminal symbols) from terminal symbols which are written exactly as they are to be represented. A BNF rule defining a nonterminal has the form:
nonterminal ::= sequence_of_alternatives consisting of strings of
terminals or nonterminals separated by the meta-symbol |
For example, the BNF production for a mini-language is:
<program> ::= program
<declaration_sequence>
begin
<statements_sequence>
end ;
This shows that a mini-language program consists of the keyword "program" followed by the declaration sequence, then the keyword "begin" and the statements sequence, finally the keyword "end" and a semicolon.
(end of quotation)</blockquote>birdegghttp://www.blogger.com/profile/05915008448189415037noreply@blogger.com0tag:blogger.com,1999:blog-25126569.post-11624244592187036252014-12-05T10:36:00.003+08:002014-12-05T10:49:19.966+08:00ServiceWorker/explainer.md at master · slightlyoff/ServiceWorker<a href="https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md">ServiceWorker/explainer.md at master · slightlyoff/ServiceWorker</a>
<blockquote>ServiceWorkers Explained
What's All This Then?
The ServiceWorker is like a SharedWorker in that it:
runs in its own thread
isn't tied to a particular page
has no DOM access
Unlike a SharedWorker, it:
can run without any page at all
can terminate when it isn't in use, and run again when needed
has a defined upgrade model
HTTPS only (more on that in a bit)
We can use ServiceWorker:
to make sites work faster and/or offline using network intercepting
as a basis for other 'background' features such as push messaging and background sync
Getting Started
First you need to register for a ServiceWorker:
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/my-app/sw.js', {
scope: '/my-app/'
}).then(function(reg) {
console.log('Yey!', reg);
}).catch(function() {
console.log('Boo!', err);
});
}
In this example, /my-app/sw.js is the location of the ServiceWorker script, and it controls pages whose URL begins /my-app/. The scope is optional, and defaults to /.
.register returns a promise. If you're new to promises, check out the HTML5Rocks article.
Some restrictions:
The registering page must have been served securely (HTTPS without cert errors)
The ServiceWorker script must be on the same origin as the page, although you can import scripts from other origins using importScripts
…as must the scope
HTTPS only you say?
Using ServiceWorker you can hijack connections, respond differently, & filter responses. Powerful stuff. While you would use these powers for good, a man-in-the-middle might not. To avoid this, you can only register for ServiceWorkers on pages served over HTTPS, so we know the ServiceWorker the browser receives hasn't been tampered with during its journey through the network.
Github Pages are served over HTTPS, so they're a great place to host demos.
Initial lifecycle
Your worker script goes through three stages when you call .register:
Download
Install
Activate
You can use events to interact with install and activate:
self.addEventListener('install', function(event) {
event.waitUntil(
fetchStuffAndInitDatabases()
);
});
self.addEventListener('activate', function(event) {
// You're good to go!
});
You can pass a promise to event.waitUntil to extend the installation process. Once activate fires, your ServiceWorker can control pages!
So I'm controlling pages now?
Well, not quite. A document will pick a ServiceWorker to be its controller when it navigates, so the document you called .register from isn't being controlled, because there wasn't a ServiceWorker there when it first loaded.
If you refresh the document, it'll be under the ServiceWorker's control. You can check navigator.serviceWorker.controller to see which ServiceWorker is in control, or null if there isn't one. Note: when you're updating from one ServiceWorker to another, things work a little differently, we'll get onto that in the "Updating" section.
If you shift+reload a document it'll always load without a controller, which is handy for testing quick CSS & JS changes.
Documents tend to live their whole life with a particular ServiceWorker, or none at all. However, a ServiceWorker can call event.replace() during the install event to do an immediate takeover of all pages within scope.
Network intercepting
self.addEventListener('fetch', function(event) {
console.log(event.request);
});
You get fetch events for:
Navigations within your ServiceWorker's scope
Any requests triggered by those pages, even if they're to another origin
The means you get to hear about requests for the page itself, the CSS, JS, images, XHR, beacons… all of it. The exceptions are:
iframes & <object>s - these will pick their own controller based on their resource URL
ServiceWorkers - requests to fetch/update a ServiceWorker don't go through the SerivceWorker
Requests triggered within a ServiceWorker - you'd get a loop otherwise
The request object gives you information about the request such as its URL, method & headers. But the really fun bit, is you can hijack it and respond differently:
self.addEventListener('fetch', function(event) {
event.respondWith(new Response("Hello world!"));
});
Here's a live demo (you'll need to enable some flags to get it working in Chrome today).
.respondWith takes a Response object or a promise that resolves to one. We're creating a manual response above. The Response object comes from the Fetch Spec. Also in the spec is the fetch() method, which returns a promise for a response, meaning you can get your response from elsewhere:
self.addEventListener('fetch', function(event) {
if (/\.jpg$/.test(event.request.url)) {
event.respondWith(
fetch('//www.google.co.uk/logos/…3-hp.gif', {
mode: 'no-cors'
})
);
}
});
In the above, I'm capturing requests that end .jpg and instead responding with a Google doodle. fetch() requests are CORS by default, but by setting no-cors I can use the response even if it doesn't have CORS access headers (although I can't access the content with JavaScript). Here's a demo of that.
Promises let you fallback from one method to another:
self.addEventListener('fetch', function(event) {
event.respondWith(
fetch(event.request).catch(function() {
return new Response("Request failed!");
})
);
});
The ServiceWorker comes with a cache API, making it easy to store responses for reuse later, more on that shortly, but first…
Updating a ServiceWorker
The lifecycle of a ServiceWorker is based on Chrome's update model: Do as much as possible in the background, don't disrupt the user, complete the update when the current version closes.
Whenever you navigate to page within scope of your ServiceWorker, the browser checks for updates in the background. If the script is byte-different, it's considered to be a new version, and installed (note: only the script is checked, not external importScripts). However, the old version remains in control over pages until all tabs using it are gone (unless .replace() is called during install). Then the old version is garbage collected and the new version takes over.
This avoids the problem of two versions of a site running at the same time, in different tabs. Our current strategy for this is "cross fingers, hope it doesn't happen".
Note: Updates obey the freshness headers of the worker script (such as max-age), unless the max-age is greater than 24 hours, in which case it is capped to 24 hours.
self.addEventListener('install', function(event) {
// this happens while the old version is still in control
event.waitUntil(
fetchStuffAndInitDatabases()
);
});
self.addEventListener('activate', function(event) {
// the old version is gone now, do what you couldn't
// do while it was still around
event.waitUntil(
schemaMigrationAndCleanup()
)
});
Here's how that looks in practice.
Unfortunately refreshing a single tab isn't enough to allow an old worker to be collected and a new one take over. Browsers make the next page request before unloading the current page, so there isn't a moment when current active worker can be released.
The easiest way at the moment is to close & reopen the tab (cmd+w, then cmd+shift+t on Mac), or shift+reload then normal reload.
The Cache
ServiceWorker comes with a caching API, letting you create stores of responses keyed by request.
self.addEventListener('install', function(event) {
// pre cache a load of stuff:
event.waitUntil(
caches.open('myapp-static-v1').then(function(cache) {
return cache.addAll([
'/',
'/styles/all.css',
'/styles/imgs/bg.png',
'/scripts/all.js'
]);
})
)
});
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});
Matching within the cache is similar to the browser cache. Method, URL and vary headers are taken into account, but freshness headers are ignored. Things are only removed from caches when you remove them.
You can add individual items to the cache with cache.put(request, response), including ones you've created yourself. You can also control matching, discounting things such as query string, methods, and vary headers.
Other ServiceWorker related specifications
Since ServiceWorkers can spin up in time for events, they've opened up the possibility for other features that happen occasionally in the background, even when the page isn't open. Such as:
Push
Background sync
Geofencing
Conclusions
This document only scratches the surface of what ServiceWorkers enable, and aren't an exhaustive list of all of the available APIs available to controlled pages or ServiceWorker instances. Nor does it cover emergent practices for authoring, composing, and upgrading applications architected to use ServiceWorkers. It is, hopefully, a guide to understanding the promise of ServiceWorkers and the rich promise of offline-by-default web applications that are URL friendly and scalable.
Acknowledgments
Many thanks to Web Personality of the Year nominee Jake ("B.J.") Archibald, David Barrett-Kahn, Anne van Kesteren, Michael Nordman, Darin Fisher, Alec Flett, Andrew Betts, Chris Wilson, Aaron Boodman, Dave Herman, Jonas Sicking, and Greg Billock for their comments and contributions to this document and to the discussions that have informed it.</blockquote>
<a href="http://www.html5rocks.com/en/tutorials/service-worker/introduction/">Introduction to Service Worker: How to use Service Worker - HTML5 Rocks</a>birdegghttp://www.blogger.com/profile/05915008448189415037noreply@blogger.com0tag:blogger.com,1999:blog-25126569.post-38006049751808844812014-12-04T16:16:00.000+08:002014-12-04T16:16:07.594+08:00regular expression visualize tool<a href="http://jex.im/regulex/#!embed=false&flags=&re=(a%7Cb%5Cd%2B)*c">Regulex:JavaScript Regular Expression Visualizer.</a><br>
<a href="https://www.debuggex.com/">Debuggex: Online visual regex tester. JavaScript, Python, and PCRE.</a><br>
<a href="http://www.regexr.com/">RegExr: Learn, Build, & Test RegEx</a><br>
via: <a href="https://news.ycombinator.com/item?id=8662141">Regulex – JavaScript Regular Expression Visualizer | Hacker News</a>birdegghttp://www.blogger.com/profile/05915008448189415037noreply@blogger.com0tag:blogger.com,1999:blog-25126569.post-67099040363404121632014-12-03T10:46:00.003+08:002014-12-03T10:47:33.821+08:00javascript - Is there any way to check if strict mode is enforced? - Stack Overflow<a href="javascript - Is there any way to check if strict mode is enforced? - Stack Overflow">javascript - Is there any way to check if strict mode is enforced? - Stack Overflow</a>
<blockquote>The fact that this inside a function called in the global context will not point to the global object can be used to detect strict mode:
<pre class="js">
var isStrict = (function() { return !this; })();
</pre>
<pre class="js">
> echo '"use strict"; var isStrict = (function() { return !this; })(); console.log(isStrict);' | node
true
> echo 'var isStrict = (function() { return !this; })(); console.log(isStrict);' | node
false</pre></blockquote>birdegghttp://www.blogger.com/profile/05915008448189415037noreply@blogger.com0tag:blogger.com,1999:blog-25126569.post-51432647853457387522014-12-01T15:31:00.003+08:002014-12-01T15:31:28.086+08:00林佳陵教你打領帶訣竅 - YouTube<iframe width="560" height="315" src="//www.youtube.com/embed/HkH5eb5RSGM" frameborder="0" allowfullscreen></iframe>birdegghttp://www.blogger.com/profile/05915008448189415037noreply@blogger.com0tag:blogger.com,1999:blog-25126569.post-33437239896397837912014-11-24T11:04:00.001+08:002014-12-12T16:05:47.441+08:00關於射手字幕網站關閉一事…..實在是沒什麼好大驚小怪的!(個人觀感) @ 美劇盒小品~美劇 英劇 歐美影集 劇情簡介 時間表 :: 痞客邦 PIXNET ::<a href="http://ming2262.pixnet.net/blog/post/33009208">關於射手字幕網站關閉一事…..實在是沒什麼好大驚小怪的!(個人觀感) @ 美劇盒小品~美劇 英劇 歐美影集 劇情簡介 時間表 :: 痞客邦 PIXNET ::</a>
<ul>
<li><a href="http://www.rrys123.com/">美剧,日剧,电影,资讯下载双语字幕-</a><br>
<li><a href="http://www.zimuku.net/index.html">字幕库(zimuku) -- 不一样的字幕下载搜索体验!</a><br>
<li><a href="http://tw.weibo.com/yyets/p/2">人人影視字幕站的微博 (第2頁) - 微博台灣站</a><br>
<li><a href="http://subhd.com/">分享交流字幕平台 - Sub HD</a><br>
</ul>
<blockquote>人人字幕組是各家字幕組之最,最快,最新,最齊,做到此規模模也是近兩年來的事,
如果你喜歡英文人名翻譯成中文,建議你可以到此一遊!
http://www.yyets.com/php/subtitle
比較熱門的劇集,人人翻譯的速度很快,品質也不錯,如果家裡有老人家或是英文比較弱的朋友,
古裝劇人物較多的劇,都很適合看人人的翻譯,總之人人翻譯的作品很多,
除了一般劇集之外,歌唱 真人秀之類的也都包辦了
破爛熊http://www.ragbear.com/ 可能需要註冊
習慣使用" iTunes"下載檔案的人,你可以參考伊甸园字幕博客站,
http://ytet.org/
伊甸園有翻譯此種格式,但非每一部劇都有,該站"不翻譯中文人名"
如果你不介意的話,這裡也是一個好選擇
深影論壇www.shinybbs.com會翻譯"中文譯名"
深影大多翻譯小眾劇,加拿大的戲居多,翻譯品質也不錯,
缺點是翻譯速度稍慢,如果你看的劇只有他們才有翻譯,我建議你先等字幕出來
依字幕格式去更新,萬一時間軸不合,你就得邊看邊調,那可真會累死人!
伊甸園字幕組,破爛熊,深影……還有一些較小的字幕組,他們都還活得好好的!
別再大驚小怪了!</blockquote>birdegghttp://www.blogger.com/profile/05915008448189415037noreply@blogger.com0tag:blogger.com,1999:blog-25126569.post-30692181885552004672014-10-31T14:28:00.001+08:002014-10-31T14:28:12.811+08:00webpack tutorial<a href="http://chunghe.googlecode.com/git/experiment/webpack-demo/">http://chunghe.googlecode.com/git/experiment/webpack-demo/</a>
<blockquote>resources:
<a href="http://gaearon.github.io/react-hot-loader/">http://gaearon.github.io/react-hot-loader/</a>
<a href="https://github.com/gaearon/react-hot-loader">https://github.com/gaearon/react-hot-loader</a>
<a href="https://github.com/webpack/react-starter">https://github.com/webpack/react-starter</a>
</blockquote>birdegghttp://www.blogger.com/profile/05915008448189415037noreply@blogger.com0