「ブクマばっかしてても手を動かさなきゃ嘘になるぜ」と言われたような気がしたので、ウェッブコンポーネンツを使って、x-markedという要素を作ってみた。x-markedタグの中にMarkdownテキストを書くとHTMLにレンダリングしてくれる。 作ってるときにハマりポイントがいくつかあったので記しておく。 デモ: nakajmg.github.io/x-marked/ ソース: github.com/nakajmg/x-marked ハマりポイント3つ ハマったポイントは以下の3つ。 インポートされたHTMLが指すdocumentオブジェクト <template>に書いた<link rel="stylesheet">の扱い <content>の中身を取るタイミング インポートされたHTMLとインポートしているHTML内でのdocument <link rel="import">で読み込んだ

gulpでwatch中にエラーが出たとき、ターミナルでエラーメッセージが出ててもなかなか気づけないので通知を出すようにした。 gulpfileの記述とか詳細はQiitaに投稿したのでこちらを参照。 gulpタスク実行中にエラーが出たらデスクトップ通知を出す | Qiita 通知出すやつ 今回gulp-notifyとnode-notifierの2つを使ってみた。gulp-notifyはgulp-plumberと組み合わせるにはベストな感じで何も考えず設定できる。 node-notifierはterminal-notifierを使ってて細かい指定ができる。めんどくさくないならnode-notifierでタスク毎に通知をカスタマイズするとヨサソウ。 イベント監視する Qiitaの方には書かなかったけど、gulpのプラグインはだいたいエラーが起きたときにはthis.emit('error', er

Web Starter Kitの紹介記事をHTML5Experts.jpに書かせてもらった。 Googleのベストプラクティスに沿ったモダンな製作の出発点「Web Starter Kit」 | HTML5Experts.jp 記事では機能紹介を中心に書いたけど、書いてる途中に色々と考えることがあったのでつらつらと。 Web Starter Kitの薄さとワークフロー 草稿の段階では「Web Starter Kitで実現できるワークフローをメインに紹介して、その後Web Starter Kitを使いながらページを作る」という前後編の構成で書いてた。でも後編の「Web Starter Kitを使いながらページを作る」がうまく書けなかったので、機能紹介だけする形に切り替えた。 書けなかった理由はいくつかある。 Web Starter Kitの薄さ ワークフローは個人に最適化される タスクランナー

オライリーさんから発売される「ハイパフォーマンス ブラウザネットワーキング」を頂きました。ありがとうございます。 Ilya Grigorik　著、和田 祐一郎／株式会社プログラミングシステム社　訳 現代のアプリケーションエンジニアは、UIやデータ処理、開発言語、プラットフォームの仕様や癖だけでなく、サーバやネットワークについても、上から下まで、表から裏まで広く知ることを求められます。本書は「ブラウザ」に関連し、インターネットで使用されるさまざまなネットワーク技術をまとめたものです。HTTP/2.0やWebRTCなどの最新技術、WebSocketやXMLHttpRequestなどのブラウザAPI、そしてそれらの土台となるTCPやUDPやトランスポート層についてまでを幅広くカバーします。本書はカバーする技術範囲の広さを「パフォーマンス」という軸に沿って説明します。また改善前後の性能・速さを可能

PixelGuide これなに PhotoShopでガイドを引くのと同じ感じでブラウザでガイドを引くChrome拡張です。 ほとんどの機能はRulersGuides.jsというライブラリを使って実現しています。 使い方 ここからPixelGuideをChromeにインストールします。 アイコンをクリックするとパネルとルーラーが表示されます。 ルーラーの上にカーソルを乗っけて、そこからクリックしてドラッグするとガイドが引けます。 簡単。 パネル アイコンをクリックすると開くパネル。 機能を上から。 各種要素の表示/非表示切り替え All: 全ての表示/非表示の切り替え (ガイドが表示されているときは下の要素に触れないので触りたいときは非表示にします) Guide: ガイドの表示/非表示の切り替え Ruler: ルーラーの表示/非表示の切り替え Info: 各グリッドの大きさなどの情報の表示/

(Photo by sada_h) この記事は CSS Property Advent Calendar 2013 18日目のエントリです。 今回はCSSのテストについて書きます。 仕様と実装 CSSの仕様はW3Cによって策定が進められ、その仕様を元にブラウザベンダが実装を行います。 仕様がどうあれ、CSSのプロパティがどういった風に振る舞うかを決めるのはブラウザの実装次第です。 「同じスタイルを当ててるのにブラウザによって表示が違う…」なんて経験をしたことはありませんか？ 各ブラウザにCSSが正しく実装されるには、その仕様に対してのテストケースが必要です。仕様とそのテストケースを元に実装が行われれば、どのブラウザでも同じ様に表示されることが期待できるようになります。 仕様が勧告に至るにはテストケースをパスする必要があります。テストがなければいつまで経っても勧告に至りません。 CSSの仕様

この記事は BEM Advent Calendar 2013 17日目のエントリです。 このエントリはCSSのBEMのことはあまり書きません。 ちゃんとしたBEMのエントリを読みたい人はBEM Advent Calendar 2013の他のエントリを見てください。 おれとBEM BEM歴は3ヶ月くらいです。ゆるBEMMERです。 BEMり方は色々な人が色々と書いてます。 juno / bem-methodology-ja MindBEMding – getting your head ’round BEM syntax BEMという命名規則とSass 3.3の新しい記法 CSSの命名規則にBEMを取り入れてみる BEMによるフロントエンドの設計 今までBEMって書いたのは主に自分だけがさわるCSSだったので、これらの概念やルールをあまり厳格に守る気でBEMってはいません。 自分がBEMる際