Openbase: discover the best open-source packagesOpenbase helps you choose packages with reviews, metrics & categories. Learn more
Webフロントエンドに従事するお前らはいい加減高頻度イベントとレイアウトとスタイリングの付き合い方を考えろ - Qiita
もうなんかこの際マジで言わせていただくんですけど、知ってるか知らないか分かりませんが世の中にはすごい頻度で呼ばれうるDOMイベントって言うのがいくつかあるわけですよ 例えば scroll mousemove, touchmove devicemotion 辺りですよ。 で、高頻度で呼ばれるって言うことは必然的に処理量が増えるって分かりますよね？？？？？while(1) {}じゃないとはいえUIスレッドに十分影響を与えうる頻度で呼ばれる訳です。分かりますよね？？？？？？？？ そうなると当然そのイベント内で重い処理を行えば人間が認識できるレベルでのレスポンス遅延が起きるっていうのはご理解できますよね？ 重い処理っていうのはまぁ想像出来るとは思うんですが例えばよくあるのが DOMのレイアウトプロパティへのアクセス offsetTop、offsetLeft、offsetWidth、offsetHe
PolymerでMaterial Designなチャットアプリを作ろう
今年注目のオープンWebテクノロジーのひとつに、Web Componentsが挙げられると思います。HTML5Experts.jpでも今まで幾度も関連記事、Polymer.jsについての記事が紹介されてきました。今回は実際に、PolymerとMaterial Designのデザインコンセプトを用いて、視覚的にもユーザエクスペリエンスにも優れたチャットアプリを実際に作ってみましょう。 まず始める前にこのライブデモ、Kitteh Anonymousをデスクトップまたはモバイルのモダンブラウザで実際に試してみてください。ここでは、このデモの簡略版であるLiteバージョンを実際に作成する方法をステップ・バイ・ステップで紹介したいと思います。 必要な知識 Polymerの基礎知識 パッケージマネージャ、Bowerの基本的な使い方（Polymerと依存するファイルをインストール、アップデートするのに使
JavaScriptでGoogle Analyticsのデータを取得する方法
Google Analytics Data Export APIを使用すれば、Google Analyticsのデータを簡単に取得できます。ここではこのData Export APIを、JavaScriptから利用する方法について解説します。 ライブラリのインクルード HTMLのhead要素内に、以下の記述をします。 <!-- Google AJAX APIライブラリのインクルード --> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> // Google Analyticsライブラリのロード google.load( 'gdata', '1.x', { packages: [ 'analytics' ] } ); </scr
addEventListenerとattachEvent
addEventListener と attachEvent はオブジェクトにイベントを追加する関数です。 この２つは起動時に、window.onload と併用しても使えます。 window.onload は、複数書くと上書きされて消えてしまうため最後の１個だけが作動しますが、この関数を使うことで起動時の関数を複数動作させられます。 addEventListener addEventListener は Internet Explorer 以外で使えます。 addEventListener(イベント名, イベント発生時に呼び出す関数, イベントの伝達方向) イベント名には on がつきません。第３引数は通常は false を指定します。 true にすると、イベントが発生した瞬間、バブリングを待たずにイベントを処理できるようになります。 登録した関数は、登録順に実行されます。 例： wi
Enjoy×Study - IEの標準/互換モードで参照すべきclientHeightが異なる
Internet Explorer上のJavaScriptで、クライアントサイズが取得できない問題 クロスブラウザに注意がいきがちですが、標準/互換モードによって参照すべきプロパティが変わってくるものもあるとは、、 互換モード document.body.clientHeight 標準モード document.documentElement.clientHeight [追記] 調べていくと、他のブラウザ(FireFox,Opera..)でも標準/互換モードでウインドウ・ページサイズがらみのプロパティは、値の取れ方が異ってくるようです。 FireFox 1.5では標準/互換モードの違いでdocument.bodyとdocument.documentElementの値が入れ替わりました。 ウインドウ・ページサイズに関するプロパティは、クロスブラウザ＆標準/互換モードの組み合わせで検証しないと危
Facebook風の無限スクロールが作れるinfinite scroll｜こうめの“これから使える”jQueryプラグイン
圧倒的な人気を誇るJavaScriptのライブラリー「jQuery」。サイトに効果をあたえるプラグインが多数あることが魅力ですが、そのプラグインを探すことがWeb制作者の手間になっています。本連載では、「こうめ」さんこと大竹孔明さんがおすすめのプラグインと実装方法、実装例を紹介します。（編集部） 「infinite scroll」は、スクロールしてページ下部まで移動すると、次のページを自動的に読み込んで表示するjQueryプラグインです。 インフィニティスクロールという機能でTwitterのタイムラインや、Facebookのフィードでも採用されており、ユーザーが手動でページ送りする手間を軽減します。 WordPressのブログ記事や、ECサイトの商品ページ、またギャラリーサイトなどで効果的な表現になりそうですね。 step1 jQueryプラグインの読み込み jQuery本体をjQuery
イージング関数チートシート
イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを（例えばペンのような）放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。
bouncejs.com - このウェブサイトは販売用です！ - bouncejs リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Scala.js ｜ 天下一AltJS武闘会
あなたは、Javascript で開発をしようと思って一歩を踏み出したけれど、 まだできていないという状況ではありませんか？ もしかして、 Scala は知っているけど JavaScript は使いたくない JavaScript は使っているけどメンテナンスがしんどい 型...型... ・・・このような悩みをお持ちではないでしょうか？ このウェブサイトは、これらのお悩みをお持ちのあなたのために作りました。 Scala を JavaScript に変換するツールがあったら、今すぐ欲しい！とあなたがお思いなら、 この先を読む必要はありません。 こちらからお申し込みいただき、このサイトを読む時間を実装にあててください。 さて、 Scala は知っているけど JavaScript は使いたくない JavaScript は使っているけどメンテナンスがしんどい 型...型... このような理由で実装が
DevExtreme - JavaScript UI Components for Angular, React, Vue and jQuery by DevExpress
Create High Impact & Responsive Desktop and Mobile Web Apps with Ease For over 10 years, thousands of teams across the globe have chosen DevExtreme to address end-user requirements, reduce time-to-market, and deliver elegant web apps that amaze. DevExtreme includes 4 individual product suites, with 70+ UI components and integrated development templates/dev tools.
Intense Images
Intense Image Viewer A javascript library for viewing images in a fully full screen. Click the images to see it in action!
【GoogleAnalytics】リンクがクリックされた回数を調べる方法（イベントトラッキング） – ysklog
GoogleAnalyticsは、サイトへのアクセスを解析するだけでなく、指定したリンクやバナーがクリックされた回数も調べることができます。 その機能のことをイベントトラッキングというのですが、ここではGoogleAnalyticsのイベントトラッキングの設定方法を説明したいと思います。 一行のコードを追加するだけ 方法はとっても簡単で、一行のコードを測定したいリンクやバナーのaタグの中に追加してあげるだけです。 なお、GoogleAnalyticsのバージョンによって追加するコードが変わりますので、それぞれ紹介します。 通常バージョンの場合 <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-*******-**']); _gaq.push(['_trackPagevie
JS NICE: Statistical renaming, Type inference and Deobfuscation
Welcome to JSNice — we make even obfuscated JavaScript code readable. We will rename variables and parameters to names that we learn from thousands of open source projects. Furthermore, often we are also able to guess or infer type annotations. Try JSNice on your JavaScript code to see how it works! Override the names suggested by JSNice (by enabling "interactive renames" in settings). Click to le
Debugging asynchronous JavaScript with Chrome DevTools | Blog | Chrome for Developers
Introduction A powerful feature that makes JavaScript unique is its ability to work asynchronously via callback functions. Assigning async callbacks let you write event-driven code but it also makes tracking down bugs a hair pulling experience since the JavaScript is not executing in a linear fashion. Luckily, now in Chrome DevTools, you can view the full call stack of asynchronous JavaScript call
要素をタイル状に並べるjQuery プラグイン「isotope」 | KasaneIrome
こんにちは。今回は日本の伝統色を並べたサイト、「iro × iro」で使用したプラグイン、isotopeを紹介します。各要素をタイル上に並べ、ウィンドウの幅に合わせて自動的に入れ替わるという動きは別のjQueryプラグイン、masonryが有名ですが、「iro × iro」ではisotopeを使用しました。 interest風グリッドデザイン pinterestに代表されるこの動きを取り入れたwebサイトは数多く存在します。pinterest風なWebサイトで日本で有名なのがNHKスタジオパークでしょうか。幅の異なった一つ一つのタイルを敷き詰めています。 NHKスタジオパーク 個人的に好きなWebサイトはPASS THE BATON、kakidashiです。 PASS THE BATON kakidashi このデザインは一覧性を重視したサイトに良く合います。ECサイトで使えば、商品の画像
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - shower/shower: Shower HTML presentation engine
GitHub - FormidableLabs/spectacle: A React-based library for creating sleek presentations using JSX syntax that gives you the ability to live demo your code.
掲示板/JavaScript質問板［過去ログ］/一覧/addListener()やattachEvent()で引数 - TAG index Webサイト
株式会社ココノヱ
