slick - the last carousel you'll ever need
Features Fully responsive. Scales with its container. Separate settings per breakpoint Uses CSS3 when available. Fully functional when not. Swipe enabled. Or disabled, if you prefer. Desktop mouse dragging Infinite looping. Fully accessible with arrow key navigation Add, remove, filter & unfilter slides Autoplay, dots, arrows, callbacks, etc... Single Item
npmとbrowserifyを使ったクライアントサイドのウェブアプリ開発
YoutubeとVimeoの検索結果のRSSをまとめてOPMLで取得できるサイトを作った | Web scratch で公開した Tech Video RSS Searcher はbrowserifyを使って作ったので、その辺の開発フローについての記事です。 browserify って何? browserify はNode.jsスタイルで書かれたモジュール(CommonJS)を ブラウザで利用できるように変換するコマンドラインツール(Nodeモジュール)となっています。 又、node.jsのCore Modulesのshimが用意されていて、 npmで公開されているnode.js向けのモジュールも一緒に変換してブラウザで動かすことが出来るようになっています。(普通に require で読みこめば勝手に変換されます) 原理的に無理だったり全てのモジュールが動くわけじゃないですが、 その辺の互
やさしいFunctional reactive programming（概要編） - maoeのブログ
あと、やはりネットワーク周りなどI/Oの多いプログラムの書きにくさが課題になっている印象。関数的なI/OはFRPで解決できそうな気がするんだけど調べてない。そろそろFRPをちゃんと理解したいなー。 Parsec 3活用事例: Keepalived構文チェッカ - maoeのブログ なんて書いてから早1ヶ月半、ようやくFRPが掴めてきたのでわかったことをまとめてみます。 Reactive programmingって何？ FRPの前に、一般的にwikipedia:en:Reactive programmingと呼ばれるパラダイムについて触れておきます。reactive programmingとは疑似言語を使ってかなーり大雑把に説明すると、 var a = 1 var b = a + 1 a = 10 // aを書き換える print b // => 11print bの出力は2ではなく11です
Cacoo - Web上で図の作成とリアルタイムコラボレーション
Online diagramming tool for collaborating on wireframes, flowcharts, and more
Socket.IO API 解説 - Block Rockin’ Codes
追記 11/7/31 Socket.IO v0.7 解説を最初に途中までで出す。 11/8/1 だいたい全部新機能なので '(新機能)' って書くのやめた。 11/8/4 オプションの設定周りを追記 11/8/6 認証周りを追記 11/8/12 スタンドアローンのサンプルを追記 11/9/27 Socket.IO v0.8 対応について追記 11/9/27 タイトルを Socket.IO API 解説に変更 11/9/27 翻訳サイトリンク追加 公式マニュアル翻訳サイト そういえば公式サイトの翻訳をフォークしたリポジトリで、それなりの更新頻度でやってます。 リポジトリの wiki も地味に訳しててこっちは結構役に立ちます。本記事と合わせてどうぞ。 本家 http://socket.io/ 翻訳ページ http://jxck.github.com/socket.io wiki https:/
Backbone.jsを薦める3つの理由
ガリレオスコープ開発チームによる �最新Web動向、技術メモ ( Ruby, Rails, node.js ) です Backbone.js(http://documentcloud.github.com/backbone/)を2,3ヶ月触ってみて、導入して良かったことをまとめます。 Backbone.js単体での威力はそこまでではないかもしれませんが、Server側も含めた設計思想を絡めて考えると大きな効果が期待できます（サーバー側も含めた構造改革が全体的に必要になるとは思いますが・・・）。 ViewとControllerの結合強度低下 = Viewのアプリ化viewとcontrollerが1対1対応だった頃Rails単体で作成している場合、Viewにロジックが入れられない以上、 そのViewで必要な変数などは、全てControllerに書く必要がありました。 この状態では、Contro
Grunt 日本語リファレンス | js STUDIO
このサイトについて Gruntの日本語リファレンスです。 Gruntの本家サイト(英文) の内容を翻訳して作成していますが、誤訳や誤記があると思いますのでその点についてはご了承ください。 もし、誤訳などの間違いを見つけましたら、 @tomof まで教えていただければ幸いです。 News 2013.04.15 サイトをオープンしました。 概要 何故タスクランナーを使うのか？ 一言で言えば、自動化のためです。 ファイル圧縮、コンパイル、単体テスト、Lintなどの繰り返し実行しなければいけないタスクを自動化することで、仕事を楽にしてくれます。 タスクランナーを設定すれば、こういった冗長的なほとんどの仕事を、あなたやチームのために行なってくれます。 何故Gruntなのか？ Gruntエコシステムは、巨大で日々成長しています。 Gruntを使って文字通り何百ものプラグインから選択し、最小限の努力で自
JSHint+Closure Linter+Gruntで最強のLint環境を目指してみた - はてブロ@ama_ch
先日JSHint 1.1.0がリリースされ、そのリリースノートに気になる記述がありました。 Adds new option gcl to make JSHint style checks compatible with Google Closure Linter. うそーまじでーなにそれヤバイ！ 普段は仕事でClosureにどっぷりなせいもあってClosure Linterを使っているんですが、Closure LinterってJSDocとかお作法的なとこはチェックしてくれるけど、他のLintツールが当たり前にチェックしてくれるとこはやってくれないんですよね。たとえばvarの付け忘れとか。 Closure Compilerを使ってコンパイル時にチェックすることもできるけど、規模が大きくなってくるとその結果が出るまでに10分とか待たないといけなくっていやな感じー。Closure Linterと
Diaspar Journal: JavaScript でプリントデバッグするには？
2009年1月31日土曜日 JavaScript でプリントデバッグするには？ alert 関数を使用しないでプリントデバッグする方法を、ブラウザごとに紹介します。 更新内容 2009-02-27 Safari 3 から Safari 4 へ変更。 2009-01-31 プリントデバッグの検証ページを追加。 2009-01-31 Chrome 2 と IE8 を追加。 Firefox では、 Firebug をインストールすると、いくつかのプリントメソッドが使えるようになります。 詳しくは、 Firebug Console Object and API を参照してください。 以下は、Firebug の代表的なプリントメソッドです。 console.log('Debug Message'); デバッグメッセージの出力先は、Firebug のコンソール（[F12]で表示）です。 Firefo
Double-talk Publisher JavaScript、お前もか（小数点を含む計算について）
座標系のオブジェクトを扱うときは「小数点」を避けて通れません。しかし、JavaScriptで小数点を扱うときには「非常に重要な」注意点があります。 まず、以下のコードを実行してみます。 var x=20.2; var y=20; alert(x-y); 「0.2」という至極当然の結果が表示されます。では、次のコードはどうなるでしょう。 var x=20.2; var y=20; if (x-y===0.2) { alert('true'); } なんと、falseで通過してしまいました。こういう場合はコンソールにはき出してみるのがデバッグの基本です。では、さきほどのコードの最後に「$.writeln (x-y);」を加えて実行してみましょう。 おかしいですね。ちゃんと「0.2」となっています。この程度のコードならこの結果で「何かがおかしい」とすぐに気づくのでしょうが、それなりに書き上げた後
wtf!? JavaScript Empty Array Programming
昨日，やきとんオフに参加したところ，mizchi や ymrl に「頭おかしい…」と言われたので，ちゃんと解説します． 0. サンプルコード これをコピーして,ブラウザのアドレスバーに javascript: と先頭につけてペーストして実行してみましょう． _=-~-~-~[];__=[][(![]+[])[_-_]+([][[]]+[])[_+_-_/_]+(![]+[])[_-_/_]+(!![]+[])[_-_]+(!![]+[])[_]+(!![]+[])[_/_]]+[];___=__[_]+__[_+_]+__[_-_/_]+(![]+[])[_]+(!![]+[])[_-_]+(!![]+[])[_/_]+(!![]+[])[_-_/_]+__[_]+(!![]+[])[_-_]+__[_+_]+(!![]+[])[_/_];___[___][___]((![]+[])[_/
HugeDomains.com
Captcha security check hisasann.com is for sale Please prove you're not a robot View Price Processing
JavaScript はどのように実行されるか - IT戦記
JavaScript はどのように実行されるか Safari*1 の実装を例に JavaScript はどのようにして実行されているかを書く。自分用のメモ。日本語の出来は気にしない 1. ブラウザを起動して以下のようなページを開いたとする <html> <head> <script> var a = 1; var b = 2; alert(a + b); </script> </head> <body> </body> </html> 2. インターネットからデータが到着する そうすると WebCore::FrameLoader::write という関数に生の文字列が渡される。型は char* だ。 http://trac.webkit.org/browser/trunk/WebCore/loader/FrameLoader.cpp#L990 この関数の中では、到着した文字の文字コードを解
CBCNET > Dots & Lines > エキソニモ・センボー > 5. ケーコク小説
● 月刊「Web Designing」にてエキソニモが特集されています。 20ページ以上オンリーエキソニモ！！過去10年以上の活動を俯瞰する内容＋表紙 ＋トビラ絵に新作を提供しています！本屋で是非手に取ってください！！ http://book.mycom.co.jp/wd/ ● 6/27に原宿VACANTでライブをやります。 「Interferenze Seeds Tokyo 2010」というイベントでライブをやります。 かなり久々のライブです。ライブ苦手です。逃げます。追わないでください！！是非！！ http://ist2010.jp/ ● 暑くなってきましたね。日本の夏ですね。こないだセミトラに行きましたよ。暑いねーなんて話してました。暑いうちに叩いた方がいいねって話してました。叩きましょう。夏。なにかやります。 ● 夏、終わったらすぐに秋が来ますね。切ないですね。でもそれがいいんです
Backbone.js コメント付きソースコード日本語訳
Annotated Sourceのコメントを訳しました 地味に道のりが長い作業でしたが、何とか先々週末にやっつけて、例によって@cssradar氏に確認していただいたりとかして今に至りご紹介する次第。 日本語訳コメントがついたソースコード· enja-oss/Backbone · GitHub なんだかんだで全域を網羅する必要があったたので、非常に勉強になりました。ソースコード自体は短く簡潔なので、Backboneをこれから使い始める/もう使ってるを問わず、まだ読んでない方は一度読んでみると良いです。 監訳謝辞 Revert original text for supervise by ahomu · Pull Request #12 · enja-oss/Backbone 上記Pull Request＆監訳依頼につきまして、多大なるレビューをしてくださった@cssradar 氏に感謝を。
ReFlowの原因とマークアップの最適化 « NAVER Engineers' Blog
自己紹介 ネイバージャパンのUIT(User Interface Technology)チームの裵完理(ベワニ)です。 概要 CSSやJavaScriptを使って複雑なデザインや動的なページを実装しているサービスが増えてきていますが、速度低下などの問題が発生しやすくなっています。これを100%直すことは難しいですが、改善するにはブラウザレンダリングプロセスを理解する必要がありますので、理解した上で改善方法を探してみましょう。 ブラウザレンダリングプロセスの理解 ブラウザの基本構造 User Interface – アドレスバー、戻る・進むボタン、ブックマークメニューなど、メインウィンドウに表示(document)されるページ以外の部分 Browser Engine – UIとレンダリングエンジン間のアクションを制御するもの Rendering Engine – リクエストしたコンテンツを表
JavaScriptでアニメーションするサイトを作るときに知っておきたいブラウザの仕組み
TweetHTML5 Carnivalの参加レポートをたくさんの方に読んで頂けて嬉しいです！ （ただ惜しむらくはURLが「fukuok」になっちゃっててすごく気持ち悪い） 僕個人としては、特におおくぼさんのJavaScriptに関するお話しなんかは普段やってる仕事に直接役立つような内容ですごく勉強になったセッションでした。 特にブラウザの仕組みに関する部分は、パフォーマンスを考えるうえでとても重要な内容だなと、一度しっかり勉強してみたいなと思いました。 そんなことを考えていたらあるサイトを見つけまして、これは昨日のセッションを直感的に理解するうえでも役にたつだろうと思ったのでこのエントリーを書くことにしました。 見つけたサイトというのは下記のリンクで、WEBサイトがブラウザによってレンダリング表示される様子を動画で見れるサイトです。 CSS Reflow | Reflow Visualiz
gruntを使ってCSS/JS周りを自動化するのが、なうでペヤングらしいので使ってみた - 鳥さんの独り言
やほほ。 はてなダイアリーの使いづらいインタフェースなんとかしてくれって思ってる鳥さんだ。 さて、gruntっていうnode.jsを使うと、CSSやJavaScript周りを色々と自動化できると聞いて、使ってみたよ。 gruntでできること「grunt watch」で監視しておくと、上書き保存した際に自動的に色んなことをしてくれるんだ。例えば・・・ ファイルの結合 JavaScriptファイルのバリデーション JavaScriptファイルの軽量化（圧縮、minify）機能を追加すれが、こんなこともできるようになるよ。（他にも探せばあるかも） CoffeeScriptファイルのコンパイル Lessファイルのコンパイル CSSファイルの圧縮 CSSファイルのバリデーション gruntの導入さて、環境を構築しよ〜。 まず、node.jsのインストールと、node.jsのパッケージ管理システムnp
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bootstrapのalertをかわいく動かす - 暮らしの技術
http://dxr.mozilla.org/mozilla-central/content/base/src/nsDocument.cpp