パフォーマンスに関する各種ブラウザ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
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
クラス関数をthrottleするデコレータ
クラス関数をthrottleするデコレータ 掲題の通り、throttle してくれる 1000ch/throttle-decorator というモジュールを作った。ES Decorator については全力で ES Decorator使ってみたが参考になると思う。標準化されるか問題は一旦さておいて。 インストールと使い方 npm でインストールする。 $ npm install --save-dev throttle-decorator 旧来 throttle() するときは宣言してあるイベントハンドラに throttle() を挟んで新たな名前付き関数を宣言していたと思う。React のコンポーネントの例だと次のようになる。 import throttle from 'lodash.throttle'; class Foo extends React.Component { constru
Electronアプリの自動アップデートサーバーをhazelとnowで作る
Electronアプリの自動アップデートサーバーをhazelとnowで作る Trello のデスクトップアプリ 1000ch/whale や esa.io のデスクトップアプリ 1000ch/quail は Electron 製だが、この macOS バージョンに、重い腰を上げて自動アップデート機能を実装した。 Electronの自動アップデート機能 Electron には autoUpdater という自動アップデートを提供するクラスが備わっている。これは Squirrel/Squirrel.Mac というフレームワークの機能で、Electron 側についてはそれをラップした autoUpdater を通して簡単に実装できる。 const { autoUpdater } = require('electron'); autoUpdater.on('checking-for-update'
画像を便利に扱うReactコンポーネント
画像を便利に扱うReactコンポーネント React を使った Web プロダクト開発では、遅延ロードやアクセシビリティといった画像として基本的な機能を備えつつ、ステートレスな <Image> コンポーネントを実装することがしばしある。 FRESH! の Web 開発チームでは以前Intersection Observerを使った要素の出現を検出するReactコンポーネントを公開したが、今度は画像を扱う汎用 React コンポーネントを公開した。今日はその紹介と、それらを組み合わせた <Image> コンポーネントの実装をしてみる。 こちらも FRESH! 以外でも使えたら便利だなと思った次第で、機能の切り出しは作業は富澤さん @tommy-san がやってくれた 🙏 SuperImage 仮で付けていた SuperImage がそのまま名前に採用されてしまった。openfresh/su
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> や
IntersectionObserverを使ってlazyload-imageを書き直した - 1000ch.net
IntersectionObserverを使ってlazyload-imageを書き直した 画像をスクロール同期でロードする<lazyload-image>というWeb Componentsの内部処理を、IntersectionObserverで書き直した。 可視領域に要素が入っているかどうかの判定 リライトする前までは、要素それぞれにscrollイベントのリスナを発行して、その中で画面内に要素が表れているかを判定していた。throttleしているとはいえ、それぞれのリスナで以下の処理を行っていたのでややパフォーマンスが気になっていた。 getBoundingClientRect()で要素の矩形を取得する document.documentElement.scrollTopとdocument.documentElement.clientHeightで画面の上下端を取得する 要素が可視領域と交
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
WebPonize
WebPonize 最近はSwiftを書いている。 作っているのはMacアプリでWebPonizeというもの。名前で察しの人もいるかもしれないが、PNGとかJPEGといったフォーマットの画像をアプリにドラッグアンドドロップしてWebPに変換する、というシンプルなアプリ。Swiftの練習できればiOSでも良かったんだけど、こんなのあったら便利だなという妄想をしているとどうしてもディベロッパー向けのツールになる。 WebPonizeという命名については、名詞に~izeという接尾語をつけることで「〜らしくなる」のような形容詞になることをもじってWebP + nizeに。尚且つ、同僚のアメリカ人に発音を考慮してもらってWebPonizeになった。WebPはbを発音しないので、weapon（武器・兵器） + izeになることを想定。 見ての通り、ImageOptimの見た目をパクって踏襲している。
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
PythonとMongoDBとPolymerでRSS Readerを作った | 1000ch.net
1ヶ月以上ぶりの更新… Pythonで何かアプリ書きたいなと思ってはいたので、RSS Readerを作りました。 フレームワークは薄いやつが良かったのでFlaskを、データはMongoDBに突っ込んでいます。 実物はHerokuにデプロイしてあります。 Cobra 1000ch/cobra Flask + MongoDBのところまで実装して暫く放置していましたが、最近思いつきでPolymerをねじ込んだので記事にしてみる。 やってること スケジューラでopmlに登録してあるRSSから記事を取得しMongoDBに保存 トップページで50件ずつ記事の表示 & 非同期で50件づつ取得 購読しているRSSで表示する記事をフィルタ Polymer入れる前はキープしてあるデータをごっそり表示してました。 正直50件ずつ取得にしたことで使い心地が落ちた。使いたいだけ。 Opml(XML)のパース→記事の
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
