Webフロントエンドのパフォーマンスチューニングについて全体的な話。javascript、Chrome DevToolsの紹介、ボトルネック、ポイントなど。
![Webフロントエンドパフォーマンスチューニング](https://cdn-ak-scissors.b.st-hatena.com/image/square/65af2204c63721df30c42f217b1e8aeee8b4f5b3/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2Fe846834033560131863262f29bbde9e9%2Fslide_0.jpg%3F2305737)
Webフロントエンドのパフォーマンスチューニングについて全体的な話。javascript、Chrome DevToolsの紹介、ボトルネック、ポイントなど。
JavaScriptとprivateの見果てぬ夢 (JavaScript Advent Calendar 2011 オレ標準コース 6日目) JavaScript Advent Calendar 2011(オレ標準コース)6日目です。他の方々のレベルが高すぎてビクビクしながら書いてます。 JavaScriptのオブジェクト指向は若干クセがあります。他のオブジェクト指向言語を使ってきた人にとって気になるのは、privateが作れないことでしょう。JSで教科書通り素直にクラス(もどき)を書くと、オブジェクトのプロパティは全てpublic、完全にオープンなものになってしまいます。 var Klass = function(){}; Klass.prototype = { methodA: function(){ ... }, methodB: function(){ ... } }; //---
コラムです。 まだまだひよっこだった頃、JSの遅延処理とCSSアニメーションについてあれこれ考えていた時の話です。 JSの遅延処理についてあれこれ考えていたこと 次のような処理をしたかった時の話。 まず、明らかに間違ってるパターンのやつ。 パターン1 明らかな間違い console.log(1); setTimeout(function(){ console.log(2); }, 1000); setTimeout(function(){ console.log(3); }, 1000); →サンプル 結果は、console.log(1)の後、console.log(2)とconsole.log(3)が同時。 これは明らか。 であればと、 パターン2 入れ子 console.log(1); setTimeout(function(){ console.log(2); setTimeout(
JavaScript でアニメーションを作る アニメーションとは何? ビューを少しずつ回転、拡大縮小、移動、変色などを行い、連続的な動きを作る こんな感じ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; setInterval(function() { el.style.opacity -= 0.01; }, 10); </script> なんで、あんな感じの書き方になるの? setInterval の意味が分からない こんな感じで書けないの? <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; w
Send feedback Stay organized with collections Save and categorize content based on your preferences. The page you're looking for isn't available. The link you clicked was to documentation on the legacy version, Universal Analytics. Universal Analytics has sunset and is no longer available as of July 1, 2024. Visit the Analytics Learning Center to get started with the new version, Google Analytics
JavaScript の dispatchEvent の情報があまりにも少なかったので解説用にサンプルを作ってまとめてみました. このエントリーでは dispatchEvent の基本的な使い方と活用例について解説します. うまく使えばネイティブっぽく JavaScript を拡張したりってこともできる便利な関数です. About 今回制作したサンプルデモは2つ. 最初のサンプルはイベントを発行するサンプルです. boxB をクリックした際に boxA のクリックイベントも発生するようになっています. 2つ目のサンプルは rightclick イベント という 右クリックしたときのみ発行する独自イベントを定義しています. Code 今回制作したサンプルデモ1個目の全体コードです. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <l
そろそろ4月も近いということもあって、新たにWeb業界やSIer業界に入るぞという方がプログラミングの勉強をし始めているころでしょうか。最近は、エンタープライズでもWebクライアントが主流になりつつあるのでJavaScriptの習得は避けては通れない道だと思います。また、Node.js等サーバーサイドのJavaScriptも出てきたこともあって、非常に有用な言語になりつつあります。 そんなJavaScriptを学び始めている人の中でも、ある程度プログラミングをやったことがある人がJavaScriptの綺麗な書き方を学ぶのに絶対理解しておいた方が良い300行程度のソースコードがあります。 それは、JavaScript: The Good Partsに載っているJSONパーサのコードです。 JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス 作者:
アート、エンターテインメント、アニメーション、マンガの4部門において優れた作品を顕彰するとともに、受賞作品の鑑賞機会を提供するメディア芸術の総合フェスティバル、文化庁メディア芸術祭。本連載では、同芸術祭に深く関わる人たちへのインタビューを手がかりに、文化庁メディア芸術祭について考えていきます。(全4回)。 12月13日に今年度の受賞作品が発表され、アニメーション部門の大賞を受賞した大友克洋さんの短編アニメーション『火要鎮』に注目が集まっています。今回はアニメーション部門の審査委員を務めた古川タクさんにお話を伺いしました。自身もクリエイターとして1960年代から数々のユーモラスな短編アニメーションを手がけてきた古川さんに、近年の応募作品の傾向から今後のメディア芸術祭への期待をお聞きしました。 日本のアニメーションのおもしろさとは? 古川さんは日本の応募作には「勝手気ままな個性が光る」作品が多
Git Advent Calendar / Jun. 6/12 担当@T_Hashです。 明日も仕事でだるいのですが、怠惰はプログラマの美徳といいます。というわけで僕が日々の仕事で怠惰にgitを使うための設定を共有したいと思います。 zsh ↓を参考にした設定を.zshrcに記述して、右プロンプトにブランチ名とステータスを表示させています。コマンドを叩かずに状態が見えて非常に便利です。 git のブランチ名 と作業状態 を zsh の右プロンプトに表示+ status に応じて色もつけてみた 緑だとクリーンな状態、赤だと未コミットの変更があります。「緑が正常な状態、緑に戻って来たら一段落してコーヒー飲もう」とか考えながら作業をしてます。 あと、zshはgitのコマンドも補完してくれるので地味に重宝します。 gst: git status git statusは常に叩くクセを付けた方がいいと
.NET開発者中心 厳選ブログ記事 開発者が知っておくべき、6つのUIアーキテクチャ・パターン ―― 「matarillo.com」より ―― 猪股 健太郎 2011/12/15 「.NET開発者中心 厳選ブログ記事」シリーズでは、世界中にある膨大なブログ・コンテンツの中から、特にInsider.NET/.NET開発者中心の読者に有用だと考えられるブログ記事を編集部が発掘・厳選し、そのブログ記事を執筆したブロガーの許可の下、その全文を転載・翻訳しています。この活動により、.NET開発者のブログ文化の価値と質を高め、より一層の盛り上げに貢献することを目指しています。 Martin Fowler氏の『GUI Architectures』を訳して公開しようと思ったのだが、FAQページに「PofEAAの続編などは商業出版する予定なので翻訳はしないでほしい」と書いてある。なので翻訳の公開はやめて、「
1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 今年も残すところあとわずかですね。いかがお過ごしですか? スマートフォン版Amebaのディベロッパーを担当している宇納(@TasukuUno)です。 このブログの編集委員なんかもやったりしています。 本日は、今年2012年に公開された記事の中から、特に反響の大きかった記事をピックアップしてご紹介致します! 【デザイン】ピグアイテムのイラストレーションについて 長年アメーバピグのデザインを支えてきたデザイナー、青山の記事。 ピグの世界感はただ「かわいい」だけではなく、2Dながら空間を感じることができるような、きちんと計算された構図やデザインポリシーの上
最近ネットを見ていると面白そうな勉強会をたくさん見つけます。 「Python Hack-a-thon」とか「PRML復習レーン」とか行きたかったのですが、 人気のある勉強会はすぐに満員になってしまいます。 自分の必要なイベント情報だけを取得したいのでATNDのRSSも使えませんでした。 http://api.atnd.org/events/?keyword_or=[OR条件文]&keyword=[AND条件文]&format=atomのようなURLにアクセスすれば、指定したキーワードに一致するイベントのみを取得できるようです。 例えば、東京で開催されているPythonと機械学習に関連する勉強会の情報が必要な場合、 http://api.atnd.org/events/?keyword_or=python,機械学習&keyword=東京&format=atomをRSSリーダに登録しておけばイ
HTML5とWebGL 初めにHTML5の位置づけについて簡単に触れます。HTML5とはこれまでのWebページ作成言語で主流だったHTML4やXHTMLの後継言語のことで、 2008年に草案がまとめられ、2014年までにウェブブラウザ各社への正式勧告を目指して策定が進められています。 HTML5は 2012年1月でもまだ「草案」段階で、仕様も流動的な準備段階であるが、開発側からもユーザ側からも非常に注目が集められています。 その大きな理由の一つに挙げられているのが、iPhoneやAndroidなどのスマートフォンの台頭による情報端末の多様化への対応のためです。つまり、様々なWEBコンテンツのクロスプラットフォーム化への重要な貢献が期待されているからです。 というのもスマートフォンの登場までは、Adobe社が提供する FLASH が動画やオーディオなどが組み合わされたマルチメディアコンテンツ
Anvil is a beautiful menubar app for managing local websites Serve up static sites and Rack apps with simple URLs and zero configuration. Anvil takes your site and serves it up locally with a .dev URL No need to change system level configuration files or hack around in the Terminal, Anvil just does the right thing. Choose the root folder for your site. Anvil works with any static HTML content or a
調べていたら纏めておきたくなったので。 基本的な事がおおいですが。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く