パフォーマンスに関する各種ブラウザAPI - 1000ch.net
パフォーマンスに関する各種ブラウザAPI ◯◯ Timing APIはW3CのWeb Performance Working GroupのIlya Grigorikを中心に策定が進められている、ブラウザのパフォーマンスを計測するブラウザAPIである。 User Timing API: 任意のラベルを用いてプログラムの実行にかかったを取得する Navigation Timing API: ブラウザライフサイクルの発生した時間を取得する Resource Timing API: リソースのロードに際して発生した各種時間を取得する Frame Timing API: ブラウザフレームの内訳を取得する Server Timing API: サーバー処理の内訳を取得する High Resolution Time API: 高精度のタイムスタンプを提供する ブラウザのwindowオブジェクトにperf
アクセシビリティに関する各種リンク
アクセシビリティに関する各種リンク 毎回検索している気がするので、自分用のメモ。 macOSのアプリ + Sketchのプラグイン Contrast: コントラストをチェックする macOS のアプリ stark-contrast/stark-sketch-plugin: 文字と背景のコントラストをチェックしたりや色覚をシミュレートする Sketch のプラグイン getflourish/Sketch-Color-Contrast-Analyser: コントラストをチェックする Sketch プラグイン DevTools + Extension + ブックマークレット ChromeLens: Web ページで色覚をシミュレーションする Chrome の拡張機能 aXe: Web ページのアクセシビリティをチェックする Chrome の拡張機能（DevTools の Audit に取り込まれ
JavaScriptで起こるメモリリークのパターン
2017.02.17JavaScriptで起こるメモリリークのパターン2014年1月25日に Frontrend in Fukuoka というイベントが開催された（もう3年前か…）。その時に Browser Computing Structure というタイトルで、ブラウザの仕組みやらスクリプト処理について発表している。 たまたま当時の資料を掘り起こす機会があったので、メモリリークのサンプルを直したついでにリークする JavaScript のパターンについて書き起こしてみる。サンプルは 1000ch/memory-leak に公開してあり、手順通り操作するとメモリリークを再現できるようになっている。 GCで回収されないオブジェクトJavaScript はランタイム上で動的にメモリを確保する GC（ガベージコレクション）を採用しているので、JavaScript の書き手がメモリの確保・開放を
ワークフローにおける画像の最適化 - 1000ch.net
2016.07.26ワークフローにおける画像の最適化画像の最適化をビルドプロセスでやるのか、コミット前にやるのかという話。 ビルド時の画像の最適化ビルドプロセスに画像の最適化を行うことはしばしばある。 Gulp や Grunt のプラグインとしては sindresorhus/gulp-imagemin や gruntjs/grunt-contrib-imagemin があったり、追加プラグインのインストールやオプションの設定が面倒な人のために、拙作の gulp-image と grunt-image などもある。その他の CSS や JavaScript といったアセットのビルドと併せて、こうしたツールを実行するのが一般的である。 👍 Pros最適化し忘れのリスクを防げる大抵の場合は glob でパス指定してあるはず?だし、少なくとも手作業よりは抜け漏れは少ない手動で行うという作業の手間
IntersectionObserverを使ってlazyload-imageを書き直した - 1000ch.net
IntersectionObserverを使ってlazyload-imageを書き直した 画像をスクロール同期でロードする<lazyload-image>というWeb Componentsの内部処理を、IntersectionObserverで書き直した。 可視領域に要素が入っているかどうかの判定 リライトする前までは、要素それぞれにscrollイベントのリスナを発行して、その中で画面内に要素が表れているかを判定していた。throttleしているとはいえ、それぞれのリスナで以下の処理を行っていたのでややパフォーマンスが気になっていた。 getBoundingClientRect()で要素の矩形を取得する document.documentElement.scrollTopとdocument.documentElement.clientHeightで画面の上下端を取得する 要素が可視領域と交
AbemaTVのランタイムパフォーマンスのAudit - 1000ch.net
2016.05.17AbemaTVのランタイムパフォーマンスのAudit最近業務で、巷で話題のAbemaTVのパフォーマンス改善をしている。個別具体性が高いが調査改善の雰囲気を感じ取ってもらえればそれで良いかと思い、記事にした。 AbemaTVのフロントエンドの構成話の前提となるAbemaTVのフロントエンドの構成は次の通りで、まさに流行りのといった感じ。 facebook/reactfacebook/immutable-jsReactive-Extensions/RxJSreactjs/react-routercss-modules/css-modulesビルド周りはbabelとwebpack、あとはlintツールがちょこちょこ入ったりしている。この改善の話と関係してくるのは、ReactとImmutableJSとRxJSだけ。 番組再生画面のコメント開閉が重い今回ケーススタディとして挙げ
textlintのAtomプラグイン - 1000ch.net
textlintのAtomプラグイン azu/textlintというテキストのlintエンジンがある。Node.js製なのでCLI周りは既にあるが、エディタでもできたら良いなと思ってAtomのプラグインを作った。TextLintについては「textlintで日本語の文章をチェックする」という記事を見てもらえると良い。 プラグインのインストール apmコマンドでインストール、または Settings → Install から linter-textlint で検索してもらうと出てくる。 $ apm install linter-textlint 使い方 Atomで開くプロジェクトに.textlintrcを配置し、プラグインやらオリジナルのルールを配置する。 例えばtextlint-rule-max-tenという一文に句点を3つ以上入れるなよというルールを使う場合、プロジェクトディレクトリでn
GitHub Pagesに設定しているカスタムドメインをHTTPS対応させる
GitHub Pagesに設定しているカスタムドメインをHTTPS対応させる このブログはGitHub Pagesで運用している。ホスト名を書いたCNAMEファイルをドキュメントルートに配置してドメインを1000ch.netとしているが、これだと証明書がないせいでGitHub Pagesが対応しているHTTPSを利用できない。つまり、 http://1000ch.github.io → http://1000ch.net https://1000ch.github.io → http://1000ch.net となり、 (http://1000ch.github.io → https://1000ch.net) https://1000ch.github.io → https://1000ch.net とならない。 なぜHTTPSにしたいか 話はGoogle I/O 2014に参加した時に
Service Workerに関する仕様とか機能とか
2014.12.29Service Workerに関する仕様とか機能とか今巷で流行りのService Workerについて調べ物してたので、まとめたメモ。 Service Workerが解決してくれることService WorkerはHTML・CSS・JS・画像等などのリソースを、JavaScriptのAPIから命令的にコントロールすることを実現する。Webページのパフォーマンスに関する指標としてネットワークを介して得るリソースをキャッシュさせたりすることが効果的であることは今更改めて挙げないが、Service Workerによって保持されたリソースは、オフライン状態でも返却することが可能という凄さを持っている。つまり、更新性の低いコンテンツであればオフラインでも閲覧させることが可能ということ。 更新性のあるコンテンツでも、回線が不安定な時はローカルに変更を保持して、サーバーに対してデータ
画像の最適化をCLIだけで行うgrunt-imageを作った
画像の最適化をCLIだけで行うgrunt-imageを作った Webにおける画像については以前記事にしたが、 そのフローをより良くするべく最近gruntのモジュールを作ったのでその話を。 前置き 私の業務は弊社サービスのパフォーマンス改善を業務。何がボトルネックになっているかは各プロジェクトでまちまちだが、共通しているのが 「とにかく画像が多い」 というところ。どのサービスもペイロードサイズの80%程を画像が占めている。 画像の最適化を忘れるだけで（例えば）100KBとか平気で増えるので、これではCSSやJavaScriptのファイルサイズを減らしても本末転倒である（もちろんCSSもJavaScriptも結合と圧縮は非常に重要だけど！）。 各種最適化ツール ではどうやって画像を最適化するのか、という話になるが、GUIだと以下の3つが有名で優秀。 ImageAlpha: フリーソフト。24b
画像の最適化をCLIだけで行うgrunt-imageを作った | 1000ch.net
GUI要らずを目指して Webにおける画像については以前記事にしましたが、 そのフローをより良くするべく最近gruntのモジュールを作ったのでその話を。 前置き 私は弊社サービスのパフォーマンス改善を業務としてしています。 何がボトルネックになっているかは各プロジェクトでまちまちですが、 共通しているのが 「とにかく画像が多い」 というところ。 どのサービスもペイロードサイズの80%程を画像が占めているんですね。 画像の最適化を忘れるだけで（例えば）100KBとか平気で増えるので、 これではCSSやJavaScriptのファイルサイズを減らしても本末転倒です。 （もちろんCSSもJavaScriptも結合と圧縮は非常に重要です。） 各種最適化ツール GUIだと以下の3つが有名で優秀です。 ImageAlpha - フリーソフト。24bitのPNGの8bitコンバートを行う。256色~2色ま
ES6のシンタックスを予習復習(1) ~let, const, arrow function, generators, for of~ | 1000ch.net
ECMAScript6 ES6のフォローについては書こうとしていたものの後手に回っていまして、ようやく書くに至ります。 SetやらMapやら、追加クラスのあたりは実装されても試そうとした時にそんなに障壁にならない気がしてますが、 letとかconst、アローファンクション等々、シンタックスが関わる辺はつっかえ棒になりかねないので消化しておきます。 この段階での実装状況はNightly > Canary Chrome Canary 34.0.1760.0 Firefox Nightly 29.0a1 (2013-12-25) この2つをECMAScript 6 compatibility tableで比較するとNightlyのほうが先行実装は進んでいるのでNightlyでアレコレします。 Canaryだと試したいシンタックス部分がまだ実装されていないので断念。 Canaryでデバッグしたい人
Emojiを選べるAlfredのWorkflowを作った | 1000ch.net
GitHubとかTrelloとかで使える絵文字 GitHubで使える絵文字はどうやらこんなにあるらしい。とても覚えきれん。 EMOJI CHEAT SHEET 更にGitHubだけじゃなくて、TrelloやQiita、Kippt等の いろんなサービスでこの絵文字が使えるそうです。知らなかった。 いちいちWebサイトで絵文字調べるの面倒臭い GitHubは:を入れると候補が表示されるからまだいいのですが、 候補出してくれないサービスがほとんどなのでAlfredから入力できるようにWorkflow作った。 完全に@ruedap氏にインスパイアされてる。 ダウンロード 1000ch/emoji-workflow 使い方はAlfredを開いて、キーワードはemojiです。 絞込はスペースに続けて、キーワードを打ち込みます。 所感 AlfredのPowerpackユーザー且つ、前述の
MiddlemanとTravis CIでgh-pagesを運用したら身長が伸びた | 1000ch.net
gh-pagesブランチの更新自動化がゴール masterにpushするだけで内容を動的に取得してgh-pagesブランチにpushをします。 今回もTravisのお力を借ります。以下がポイントになります。 gh-pagesブランチの内容はmiddlemanによる出力 masterブランチにコミットしたあと、Travisからmiddlemanのビルドを実行 生成された内容をgh-pagesブランチへpush middlemanのインストール middlemanはrubyで動く静的サイトジェネジェネレータです。 テンプレートをほぼhtmlで記述することが出来て、ブログ等の管理を非常に簡単にすることが出来ます。 jekyll使ったことのある人なら学習コストはさらに低めです。詳しくはこの辺り。 middleman - web サイトの開発をシンプルに まずはmiddlemanのインスト
Travis CIを使ったGitHubプロジェクトの継続的インテグレーション | 1000ch.net
継続的にテストをする 今更感が否めないのですが、簡単にまとめました。 Travis CIとはなんぞやという方はこちら。 継続的インテグレーションとはなんぞやという方はこちら。 例えばテストの自動化をして、リファクタリングのしやすい環境を作って、 コードの品質向上を継続的に行っていくサイクル。というイメージ。 今回はGitHubとTravis CIで自動化を測りますが、 Jenkinsでビルド環境を整えて、継続的にデプロイをしていくのもひとつです。 テスト周りの環境とか オレオレライブラリにCI環境整えました。一応。 mochaのBDDでテストケースを書いて、イベントのバインド周りのテストはsinon#spy()を。 testemでそのテストをPhantomJSで実行させるといった流れ。 PhantomJS testem mocha sinon mochaのサンプルは公式
一歩進んだHTML/CSS/JSを目指すために | 1000ch.net
2013/08/01 一歩進んだHTML/CSS/JSを目指すために 「なんとなく書きたくないけど、どう意識してコーディングしていけばいいのかわからない…。」 それを解消するためのツールがありますので、紹介します。 HTMLInspector philipwalton/html-inspector Introducing HTML Inspector こちらはHTMLを解析して悪いところを指摘してくれるツール。 たぶんガイドラインとかそれぞれあると思いますが、基本的にはコレに沿ってもいいかと。 スクリプトを差し込んで、実行すると、指摘事項がconsoleに出力されます。 githubのリポジトリからダウンロードするか、bowerで落としてくるか。 bower install html-inspector 次に、解析したいページに以下のコードを埋め込みます。 <script s
Gistを簡易スライドにするGistSlideを作った | 1000ch.net
2013/07/05 Gistを簡易スライドにするGistSlideを作った gistslideに影響されて、もうちょっとキレイに作れないかなと思い作成しました。 デザインは@hiloki氏に作って頂きました。ありがとうございます。 GistSlide gistslide / 1000ch 使い方 たぶん意識してないgistでもある程度見れますが、 一応スライドで発表した前提のほうがいいのかな。 GistSlideにいく リンクボタンをブックマークバーにドラッグ&ドロップする Gistを見る 先程ブックマークに登録したリンクをクリックする 左右キーでスライド送りができます 作り方とか スライドのマークアップ構造を相談の元決め、私はgistをあれこれするjsを書いて、 @hilokiさんにはデザインを含めたマークアップをしてもらいました。 あとはChrome Extensionに
Zepto.js v1.0がリリースされました | 1000ch.net
2013/03/05 Zepto.js v1.0がリリースされました v1.0rcが11ヶ月間も続いていたのですが、 ようやくRelease Candidateではなくなり正式リリースとなったようです。 今回はZeptoについて振り返ってみました。 http://zeptojs.com/ https://github.com/madrobby/zepto おさらい 今更かとは思いますが、初めての方におさらいしますと、 Zepto.jsとはjQueryとAPIほぼ互換性があるモダンブラウザ向け軽量ライブラリです。 jQueryはIE対応とか$.AnimationとかDeferredとかあるけど その辺りを除いて実装してあるようなイメージ。現状、iOSやSafariにはIE対応とか必要ない訳で、 これ使うとファイルサイズ落とせますねっていうライブラリです。 ビルドについて ra
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
