HTML(.js) - Befriend the DOM!
Cory Gross -- How To Create Your Own Chrome Extensions
I really like the Chrome browser. It wasn't until recently that I looked into creating extensions and was surprised by how simple it was. If you know basic HTML, CSS, JavaScript then you know all you need to be able to extend your Chrome browser in multitudes of ways. I decided to write up a simple guide explaining some of the basic ways you can easily extend Chrome. Getting Started With Extensions In order to get started creating a new extension all you need to do is create a new root directory for your extension. The Manifest Every extension must contain a file in the root directory with filename manifest.json. Google has published a list of all the fields supported in manifest version 2.. Background Pages Most extensions will have an entry in the manfiest.json which looks like the following: This entry specifies two scripts which will be loaded and kept in memory running in the background. Event Pages This is all you need to know to start adding some functionality. Interaction chrome.* APIs
プロ部登場 - マンガで分かる JavaScriptプログラミング講座
目次 マンガ マンガ台詞 キャラクター紹介 プロ部 必修クラブ。 安見 遊（やすみ ゆう） 通称「スリーパー遊」。 楽らしいという噂を聞き、プロ部を選ぶ。 高美舎 麗（たかびしゃ れい） 通称「お嬢」。 くじ運が悪く、テニス部を狙っていたが、プロ部になってしまう。 内木 守（うちき まもる） おっとり君。 いつも遊に振り回される。 桑立 謀（くわだて はかる） 先生。 なぜか、プログラムが得意。
Deep dive into Require.js
Require.js is one of my favorite ways to write JavaScript these days. It's modularity breaks up larger apps into smaller, manageable pieces. The optimizer is a powerful tool capable of squashing the largest of apps into the smallest of apps by tracing each module's dependencies. There are many reasons to be using AMD with require.js. Let's take a look at some of the more powerful features of require.js that you may or may not know about. CommonJS compatibility AMD (Asynchronous Modular Definition) arose out of a group known as CommonJS. The syntax between a CommonJS module and an AMD module is different because AMD needs to support the asynchronous nature of the browser. var someModule = require( "someModule" );var anotherModule = require( "anotherModule" ); exports.asplode = function() { someModule.doTehAwesome(); anotherModule.doMoarAwesome();}; However, AMD with require.js supports a syntax that sorta is compatible with CommonJS. CDN Fallbacks No dependencies? Circular Dependencies
ECMA-262 » JavaScript. The core.
Read this article in: Japanese, German (version 2), Arabic, Russian, French, Chinese. This note is an overview and summary of the “ECMA-262-3 in detail” series. Every section contains references to the appropriate matching chapters so you can read them to get a deeper understanding. Intended audience: experienced programmers, professionals. We start out by considering the concept of an object, which is fundamental to ECMAScript. ECMAScript, being a highly-abstracted object-oriented language, deals with objects. An object is a collection of properties and has a single prototype object. Let’s take a basic example of an object. For the code: we have the structure with two explicit own properties and one implicit __proto__ property, which is the reference to the prototype of foo: Figure 1. What for these prototypes are needed? Prototype objects are also just simple objects and may have their own prototypes. ECMAScript has no concept of a class. Easy enough, isn’t it? Figure 2. Figure 3.
この上なく便利！すごい「jQuery」の小技まとめ３２
先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー（Google Analytics関係とか）なものまでjQueryの小技、プラグインを集めさせていただきました。 もくじ スクロール １．ページ内リンク／フッターまわり／トップに戻る ２．パララックス スライド ３．カルーセル ４．レスポンシブなスライダー ５．ヌルヌルサクサクなスライドメニュー ６．サムネイル付きクロスフェードスライドショー 補助 ７．Google Analytics／クリック数を取得・表示させる ８．郵便番号から住所を自動的に補完 ９．フォーム入力の達成率をグラフで表示 １０．読むのに後何分かかるか表示 １１．離脱時にアラート １２．ボタンに直接ローディングアニメーション メニュー １３．ナビゲーションを最上部に固定 １４．アコーディオン １５．タブメニュー １６．縦方向にスクロールするティッカー １７．上部固定メニューをクリックで開閉する ビジュアル １８．チュートリアルを作る １９．年表／横軸のタイムラインを表示する ２０．地震分布図を作成 ２１．おしゃれグラフを表示 ２２．カレンダー ２３．可変グリッド 画像／写真 ２４．写真にぼかしを入れる ２５．カラー写真を白黒に ２６．画像切替 ２７．画像ギャラリー ２８．リサイズ jQuery入門・使い方jQuery入門（初心者）リファレンス（中級者）プラグイン作成 スクロール 定番だけど、必ず知っておきたい。 ２．パララックス パララックス（視差効果）を取り入れる方法。 スライド ３．カルーセル マウスホイール、スワイプ設定、レスポンシブ対応、上下左右の違う画像もOK。 カルーセル・スライダーになる万能jQueryプラグイン「carouFredSel」 | スターフィールド株式会社 ４．レスポンシブなスライダー これも定番。 レスポンシブなコンテンツスライダーのjQueryプラグイン-FLEXSLIDER | memocarilog ５．ヌルヌルサクサクなスライドメニュー スライドアニメーションを滑らかに動かす方法として、CSS3を使っていたという。 補助
Cheat Sheet
Download cheat sheet as printable PDF A5 Syntax Child: > nav>ul>li Sibling: + div+p+bq Climb-up: ^ div+div>p>span+em^bq div+div>p>span+em^^bq Grouping: () div>(header>ul>li*2>a)+footer>p (div>dl>(dt+dd)*3)+footer>p Multiplication: * ul>li*5 Item numbering: $ ul>li.item$*5 h$[title=item$]{Header $}*3 <h1 title="item1">Header 1</h1><h2 title="item2">Header 2</h2><h3 title="item3">Header 3</h3> ul>li.item$$$*5 ul>li.item$@-*5 ul>li.item$@3*5 ID and CLASS attributes #header .title form#search.wide p.class1.class2.class3 Custom attributes p[title="Hello world"] td[rowspan=2 colspan=3 title] [a='value1' b="value2"] Text: {} a{Click me} <a href="">Click me</a> p>{Click }+a{here}+{ to continue} <p>Click <a href="">here</a> to continue</p> Implicit tag names .class em>.class ul>.class table>.row>.col All unknown abbreviations will be transformed to tag, e.g. foo → <foo></foo>. Alias of html:5 <! a a:link a:mail abbr acronym, acr base basefont br frame hr bdo bdo:r bdo:l col link link:css link:print link:favicon link:touch link:rss link:atom meta meta:utf img c
Fortune.js - web framework for prototyping rich APIs
Learn coffeescript in Y Minutes
CoffeeScript is a little language that compiles one-to-one into the equivalent JavaScript, and there is no interpretation at runtime. As one of the succeeders of JavaScript, CoffeeScript tries its best to output readable, pretty-printed and smooth-running JavaScript codes working well in every JavaScript runtime. See also the CoffeeScript website, which has a complete tutorial on CoffeeScript. Got a suggestion?
Related:
Related:
