Webフォントのロードをやめた - 1000ch.net
2016.08.22Webフォントのロードをやめたこのサイトではフォントに Roboto と Roboto Mono を適用している。以前までは Google Fonts で配信されているそれぞれのフォントをロードしていたが、それをやめて font-family の指定のみに変更した。 プログレッシブな適用とOS共通フォントの選択まず前提として、テキストのベースフォントとして明朝（serif）を、 <h1> ~ <h6> の見出しにはゴシック（sans-serif）を、コードには等幅（monospace）を適用する前提方針がある。明朝・ゴシック・等幅の中から自分の好みに近く、尚且つ Mac と Windows にインストールされているものを優先的に選ぶようにした。 body { font-family: YuMincho, serif; font-weight: normal; } h1,
Web Components 周辺の仕様とか 2017年秋
2017.09.12 Web Components 周辺の仕様とかブラウザ互換性 2017年秋 二週間後の素振り入ってます、連投ですが悪しからず。Web Components v0 から Web Components v1 へのアップデートに関しては、去年の DevFest Tokyo 2016 で発表した Web Components 2016 & Polymer v2 にまとめてあるが、それを改めて見直している。 HTML Templates HTML Templates は HTML ドキュメントに埋め込まれてもコピーして使うまで非活性であるような、本来的な雛形の機能を実現する <template> 要素の仕様である。 <script type="text/template">...</script> やら <div style="display: none">...</div> や
react-routerのハッシュリンクとスムーススクロール
react-routerのハッシュリンクとスムーススクロール React Router を使っているプロジェクトで、できれば「ハッシュリンクを踏んだ時に、対象位置までスクロールしたい」というのがあり、少し調べていた。そもそも React Router はハッシュリンクが正しく機能しないという不具合があったり、既に公開されているライブラリでは機能を満たせない、メンテナンスが不安、コードがアレ…等等、スクラッチで書くところから始まった。 react-router-hashlink React Router の <Link> コンポーネント をラップして、ハッシュリンクに対応したのが 1000ch/react-router-hashlink である。 import { HashLink } from 'react-router-hashlink'; function render() { ret
JavaScriptで起こるメモリリークのパターン
2017.02.17JavaScriptで起こるメモリリークのパターン2014年1月25日に Frontrend in Fukuoka というイベントが開催された（もう3年前か…）。その時に Browser Computing Structure というタイトルで、ブラウザの仕組みやらスクリプト処理について発表している。 たまたま当時の資料を掘り起こす機会があったので、メモリリークのサンプルを直したついでにリークする JavaScript のパターンについて書き起こしてみる。サンプルは 1000ch/memory-leak に公開してあり、手順通り操作するとメモリリークを再現できるようになっている。 GCで回収されないオブジェクトJavaScript はランタイム上で動的にメモリを確保する GC（ガベージコレクション）を採用しているので、JavaScript の書き手がメモリの確保・開放を
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だけ。 番組再生画面のコメント開閉が重い今回ケーススタディとして挙げ
cgoでGoのコードからCの関数を利用する - 1000ch.net
cgoでGoのコードからCの関数を利用する Goの練習がてらコマンドラインツールを書いている最中に詰まったので作業ログとして残す。 Goでコマンドラインのインターフェースを実装するには、osやflag等のデフォルトライブラリ群でそこそこ簡単に作れるけど、今回やりたいことに「Cで書かれたバイナリをGoから利用したい」というものがあった。 同じことをNode.jsでやろうとするなら、スクリプトを含めたパッケージ群としてnpmで配布することが可能なので、postinstallあたりで 都度ソースコードをダウンロードしコンパイル 、あるいは コンパイル済みバイナリをダウンロード くらいで良かった。以下Node.jsの例。 https://github.com/imagemin/pngcrush-bin https://github.com/imagemin/jpegoptim-bin Goの場合は
CSSConf.Asia 2014
2014.11.19CSSConf.Asia 2014最初のセッションは9:00開始、Registrationが8:00開始、ホテルは会場まで電車で1時間弱という状況だったので、7:00にホテルを出発。 ディズニーランドを彷彿とさせる電車に乗って、現地へ向かう。 面白かったセッションを幾つか紹介。 NO MORE TOOLS by @foxツールっていっぱいあって、どれがベストなのかわからない…SIMPLICITY 目的がわかりやすく、複雑でないものを選ぼう“Complexity is a fact of the world, simplicity is in the mind.”AUTOMATION 自動化がキモAutoprefixerやらCSSLintやらCode BloatやらStressCSSやらを駆使共有にはnpmもといpackage.jsonを利用するのが良いかなランナーにはG
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
