node-fetchパッケージのFormData
node-fetchパッケージが、v3.2.0からFormDataなどをエクスポートするようになっていた。これによりform-dataパッケージやformdata-nodeパッケージが不要になった。標準非互換の問題から始まって、いろいろあって使いやすいようになったのだろうと思う。イシューの乱立を避けるような狙いもあるかもしれない。 import fetch, { FormData } from "node-fetch"; 初めてこういう書き方をした。defaultはそのままなので、こう書くことになる。落ち着かない。あまり書かれないからか、node-fetchパッケージのドキュメントでも間違ったコードが書かれていた。 Node.js v17から、標準モジュールにnode:を付けてインポートするように変わりつつある。そのため、node-fetchというパッケージ名が紛らわしくなってしまった。ど
meta要素のname=color-schemeについて
ダーク・モードへ適応するなら、フォーム関連要素の色も切り替えるよう、CSSを書くだろう。しかし、それだけでは、例えばテキストエリアで出てくるスクロールバーが明るいままなので、かなり浮いてしまう。meta要素でname=color-schemeを適切に設定すると、そういったスクロールバーの色も含めたあらゆるものの色を暗く(明るく)できる。 書き方は特に難しくない。ダーク・モードへ適応しようと、prefers-color-schemeメディア・クエリーを使って、明るい背景と暗い背景を切り替えるなら、以下のようにHTMLファイルのhead要素以下に書けばいい。viewportと似たようなものだ。 <meta name="color-scheme" content="light dark"> lightとdarkの順序は、逆でも意味は変わらない。これだけでユーザーのOSやブラウザーでのダーク・モー
Chrome 80前後での折り返し
このウェブサイトの文章が、最近のChromeでは、よくわからないタイミングで折り返しされるようになった。どのバージョンからかは正確に記憶していないが、Chrome 80前後からのようだ。そこじゃないところで折り返される現象で、2つ目のツイートの画像だと、1段落目の1行目や、2段落目の4行目、3段落目の3行目あたりで発生している。 コンテナーの幅を1pxずつ変えてみたりして確認すると、よくわからないタイミングで折り返されることが確認できる。rem単位で発生するとツイートしてしまったが、px単位でも起こる。回避手段はなさそうだが、致命的な現象ではないので、改善されるのを待つしかないだろう。 そういえばChrome 80前後で、text-align: justifyがきれいに揃えられるようになった。もしかしたらそのあたりでリグレッションが発生したのかもしれない。
普通のHTMLの書き方
保守しやすく、規模に依存しないHTML文書のために 一般 DOCTYPEで始める 置き換えられるべきまたは旧式のDOCTYPEを使わない XML宣言を使用しない 文字参照はできる限り使わない &と<、>、"、'は名前文字参照を使ってエスケープする 制御文字や不可視文字は数値文字参照を使う コメントではその内容の前後へ空白文字を置く 終了タグを省略しない 空要素の書き方を混ぜない タグや属性値の前後へ空白文字を置かない 大文字・小文字を混ぜない 引用符を混ぜない 属性を2文字以上の空白文字で区切らない 真偽値を取る属性の値は省略する 名前空間は省略する XML属性は使わない data-*とMicrodata、RDFa Lite用の属性と通常の属性を混ぜない デフォルトの暗黙のARIAセマンティックスを尊重する 文書要素 lang属性を追加する lang属性の値はできる限り短くする できる限り
プル・クオート
英語で書くとPull Quote、Calloutなどとも呼ばれる抜粋見出しのこと。雑誌のインタビュー記事などでよく見る、インタビュー内容の一部が抜き出されて見出しのように配置されているやつ。blockquote要素でマークアップするのかと思ってたら、aside要素の方が適切らしい。引用ではなく抜粋で、かつコンテンツに同じ内容が既にあるので、なくなっても特に問題がないからか。 この記事はクリエイティブ・コモンズ 表示-継承 3.0 非移植で提供される。 aside要素で括るだけで、あとはp要素のみで良いようだ。figureやblockquote、q要素を更に利用してもよいように思えるけど、冗長すぎるか。出典的なものはfooter要素を使えば良さそうだけど、大抵の場合は明確なので必要なさそう。多人数相手のインタビューみたいなので、誰の発言なのかを示したい時などには使うと良いのかも。以下のマーク
Edge 15でのfont-size: calc(<number> * <percentage>)
どうもEdge 15にはcalc()絡みのバグがまだまだ残っているようだ。font-sizeプロパティーで数字と割合を掛けてみたらよくわからない結果になった。Internet Explorer 11でも再現するため、Edge 12から15に存在しそうだ。 Demo: calc(<number> * <percentage>) in font-size property Chrome 58やFirefox 53、Mobile Safari 10では20pxになる。しかしEg15やIE11ではなぜか3pxになってしまう。 どのようなcalc(<number> * <percentage>)でもバグるというわけではない。例えばwidthプロパティーで利用する場合はEg15やIE11でも正しく解釈される。 このバグについてもEdgeHTML issue trackerに報告しておいた。font-s
Sassでの色管理
Sassでは色を変数として定義でき、また様々な関数でそれを操作することが可能になっている。そのため色を論理的に管理することが可能になっているが、これといった手法が確立されているわけではない。このウェブサイトでは少しややこしい形で管理するようにしている。どういう目的でこういう複雑な構造になっているのかを簡単に書いておきたい。 基本色の定義 基本色、つまりテーマカラーであったり、本文の背景色や文字色といった見た目のイメージを決定する色は、色コードを直接指定して定義する必要がある。これはほぼ間違いなくみんな同じように書いているだろう。 $color-dark: rgb(60, 51, 48); $color-light: rgb(252, 249, 240); $color-accent: rgb(17, 136, 187); これらは背景色であったり文字色、そしてリンクの文字色として使っている
Sass v3.4.0.rc.1とgrunt-contrib-sass
Sass v3.4.0.rc.1が出た。&の扱いが拡充したこととセレクターを扱う関数の追加がトピック。他に予告されていた変数スコープの改善も思ったよりも早く導入された。後方互換性を失う変更はあるものの、大体は問題なくコンパイルされる。けどコンパイラーのオプション他に変化があったため、それらをラップするツールで不具合が起こりやすい。例えばgrunt-contrib-sassが--load-pathと--sourcemapオプション辺りの変更に対応できておらず、例外を吐いて落ちたりする。 NoMethodErrorへの対策 普通に実行する場合は問題ないが、--load-pathオプション付きで実行しようとすると以下の様にSassコンパイラーがNoMethodErrorで落ち、タスクが止まってしまうことがある。 Running "sass:main" (sass) task NoMethodEr
Sassの変数名での-と_
SassでBEMを利用して変数名を付けようとして、今までハイフンのみでどうにかしていた変数名を書き換えていた時に気づいたんだけど、Sassの変数名ではハイフン(-)とアンダースコア(_)が同一視される。バグだと思ってIssue立てたら、3.0.0でSCSS記法を追加した時に入れた仕様だという返事だった。 -と_が同一視されるということはどういうことかというと、以下の変数はすべて同じとみなされるということで、すべての変数の値は最後に定義した変数の値になる。 $foo--bar: "foo--bar"; $foo-_bar: "foo-_bar"; $foo_-bar: "foo_-bar"; $foo__bar: "foo__bar"; .test-foo--bar { content: $foo--bar; } .test-foo-_bar { content: $foo-_bar; }
引用元の表記
blockquote要素における引用元の表記をどうマークアップするかでWHATWGとW3Cの仕様で違いが出たので、俄然盛り上がってきた。昨日公開されたHTML5 Doctorの記事を始め、様々な人が見解を書いている。概ねシンプルなW3C版が優勢な気がする。どう決着するかには関心があるものの、現状どうするべきかについてはよくわからなくなってしまったので、それぞれどういうコードになるのかとその思想の違いをメモだけしておく。 WHATWG版では以下のようにfigure要素を使い、figcaption要素で引用元の表記をマークアップする。このウェブサイトではこっちを採用中。 <figure> <blockquote> <p>引用(いんよう、英語：citation, quotation)とは、広義には、他人の著作を自己の作品のなかで紹介する行為、先人の芸術作品やその要素を自己の作品に取り入れること。
Sass 3.3の新しいデータ型: マップ
SassConfに合わせたのか、Sassの3.3 RC.1が出た。これで3.3での追加機能も固まったようなので、CHANGELOGをちゃんと読んだところ、1か月ほど前に取り込まれていた新しいデータ型であるマップについてもちゃんと入っていた。マップは、いわゆるハッシュとか連想配列とかいう名前で呼ばれるもの。 マップの書き方はリストとほとんど同じで、リストの各要素にコロン(:)区切りでキーと値をワンセットで書く、というようなもの。例として、プロ野球セ・リーグの各チーム色を背景色にしたクラスを吐くもの作ってみる。 $team-colors: ( giants: #f90, tigers: #fc0, carp: #f00, dragons: #009, baystars: #269, swallows: #03c ); @each $team, $color in $team-colors {
ファビコン・カンニング・ペーパー
Translation of: favicon-cheat-sheet ファビコンのサイズや形式についての読むと頭が痛くなる偏執的なカンニング・ペーパーです。以下のURLを参考にしました: rel="shortcut icon" considered harmful · Mathias Bynens <-- special thanks @mathiasbynens Everything you always wanted to know about touch icons · Mathias Bynens <-- special thanks @mathiasbynens Jonathan T. Neal | Understand the Favicon Favicon - Wikipedia, the free encyclopedia Making a Good Favicon -
スクロールできる表
表をかっこよくスクロール可能にするテクニックについてのResponsive scrollable tablesという記事を読んだ。この記事ではJavaScriptで表をdiv要素で括って、それから溢れたらスクロールバーを表示(+α)という形でやっている。これをいじってて気づいたんだけど、JavaScriptで追加マークアップをする代わりにtable要素のdisplayプロパティーをいじってやると簡単にスクロール可能な表になるようだ。 Demo: Scrollable Table 表を自動幅調整なし(幅固定)にするにはtable-layoutプロパティーを、各セルで折り返しなしにするにはwhite-spaceプロパティーをそれぞれ使う。それとdisplay: blockを組み合わせると、pre要素で文字がはみ出す時にスクロールさせるような感じになる。 table { display: blo
HTMLにおけるimg要素のalt属性
HTML Standardの4.8.1.1 Requirements for providing text to act as an alternative for imagesをざっと把握できるように日本語で箇条書きにしただけのものです。最終的には原文をしっかりと読むべきでしょう。 基本 必ず定義されるべきである その値は空であってはならない その画像に代わりになる最適な文字列である ページ上の全ての画像をそのalt属性の値で置き換えてもページの意味合いが変わってはならない 画像のキャプションや題名、銘とみなされるような補助的な説明を意味するものであってはならない 前後で解説されている情報の繰り返しであってはならない 画像以外に何も含まれていないリンクやボタンで使われる場合 リンクやボタンの目的を明確に伝える文字列を指定する わかりやすく説明するために文章ではなく画像のチャートやグラフを
Prism vs. Google Code Prettify
UglifyJSを通すとGoogle Code Prettifyの大量のコメントが消え、なんと逆転した。Only 2KBに騙された感じある。ここからのgzipではほとんど差は出ないし、どちらも言語定義は正規表現のため新たな言語定義の追加でも差は出ることはない。双方の強調機能に少し差があることを考慮しても、Prismが特に小さいということはないようだ。 ただPrismの優位性はコアのサイズだけではなく、必要な言語定義を必要なだけ導入できる所などにもある。新しい言語定義もGoogle Code Prettifyのそれと比較して格段に書きやすい。サイズのメリットはあまりないことがわかってしまったが、コンパクトに抑える努力が可能なPrismに乗り換えたい気もする。……んだけど、ちょっとこのサイトに合わせて作り込もうとしたらすごく面倒だった。 まず、言語定義の依存があるため、自前で連結しようとすると
utm_xxxを削除してURLの分散をちょっとだけ防ぐ
utm_xxxを利用したユーザー追跡はまぁ便利ではあるのだけど、どうしてもURLの正規化に悪影響がある。設置したツイートボタンやブックマークボタンはこちら側で正規のURLを仕込んでどうにかすればいいのだけど、ブラウザーの拡張やブックマークレットにはどうしようもない。かといってリダイレクトでは訪問者にも管理者にもコストが高いので、replaceState()を使ってURLだけ書きかえるという話。 正規化する関数を発火させるタイミングの制御には色々アプローチがあると思うけど、素で書くといろいろ面倒そうなのでGoogle Analyticsのコードに混ぜることにした。 var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-XXXXXX-X']); _gaq.push(['_trackPageview']); _gaq.push(function
Twitterでの言及数を知る
公式にはAPIが用意されていない。プライベートだけど誰でも叩けるAPIがあるけど使わないでくれと言っている。のでTopsyやAddThisのAPI経由とかしか今のところ方法は無さそう。などということを公式Tweet Buttonのサブセットなdata-*属性による設定を受け入れるTweet Buttonを作ってて知った。 Demo: Tweet Button Powered by Topsy TopsyのAPIはコマーシャル・ライセンスを取らないと専用の画像を使ってリンク必須と読めるのでとても使いづらい。というか使えない。AddThisの(api-public.addthis.comで動いてる奴)はドキュメント見つからない。Shared Countとか見つけたけどコレは普通にプライベートなAPIを使っててダメそう。 なんか良いの無いもんかな。
hail2u.net - Weblog - floatで並べたリストのセンタリング
ページング・ナビゲーションなどでリスト項目をfloat: left;で横に並べるというのは割りと良く使われると思う。並べること自体は特に難しいわけではないが、その並べたリスト全体をセンタリングしようとするとちょっとややこしい。display: inline-block;を使う手法やdisplay: table;を使う手法という黒魔法的(私見)な手法で実現可能だが、position: relative;でもいける。 ややこしい理由は簡単で、センタリングでよく使われるtext-align: center;やmargin: 0 auto;といった手法が通用しないから。検索するとすぐ出てくる比較的メジャーなdisplayで頑張る方法もわかりやすいし悪くはないのだけど、同一セレクタ内で複数のdisplayを駆使する必要があることやzoomマジックなどを併用する必要があることからコードがややこしくなる
ボタンの押し込みをCSSで表現する
時代は:active！ タッチ・デバイスに:hoverなどない！ みたいになりつつあるような気がしないでもないので、ボタンの押し込みの表現を色々考えている。とは言ってもタッチ・デバイスでは:active擬似クラスもいまいちアレなのでまだあんまり意味なかったりするけど。三周回ってデフォルト使えみたいな感じになっている節もある。ですよねー。 Demo: Pixel Pushing padding 一番のメジャーで安定のクオリティー。 .test { padding-top: 10px; padding-bottom: 10px; } .test:active { padding-top: 11px; padding-bottom: 9px; } 欠点はpx単位でpaddingプロパティーを制御せざるを得ないのでスケーラブルにしづらくなること。 position ボタンのテキストだけでなく全体を
WebKitでのSVGを背景画像にすると起こるバグ
SVGはそのリサイズ(スケーリング)においてブラウザ間で差異やバグがあります。有名なのはviewBoxがないことによるIE9やWebKitでのバグでしょうか。それでもimg要素等でSVGを使う場合はSVG側でwidthとheightそしてviewBox属性を指定し、CSSなどでリサイズすれば大体問題ありません。なので背景画像で使う場合もbackground-sizeプロパティーを使えば……と思いきや、なかなかの落とし穴がありました。 Demo: SVG Arrow WebKit以外では自動リサイズが期待されるviewBoxのみ指定したSVGを背景画像にすると問題なくキレイにリサイズされます。対してWebKitではリサイズされたりされなかったりです。しかもChromeとSafariでは挙動が少し違ったりもし、追求する気が失せるほど挙動不審です。どうも良きに計らってはくれそうにないので、明示的
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
