Learning from the session Canvas is not accessible, so we should use SVG for meaningful data such as graphs as much as possible It's possible to add markup in canvas tag as fallback set role="img" and use aria-label. Update img.alt or othe…

初心者がつまづいた、PWAアプリSafari版でホームボタンのアイコンが読み込まれない件 - Qiita iOSでPWAをホーム画面に保存しようと思うとSafariになるんだけど、manifestにアイコン追加しておくだけでは使ってくれなくてサイトのスクショがアイコンで使われ…

About rel=noopener 普通にtarget="_blank"使うとopenerでreferenceを与えてしまって背後で何かされる恐れがあるからnoopenerつけようねという話 昔聞いたなそういえば あの時は社内サイトから社内サイトのリンクだったのであまり気にしなかった 派生して、_…

detailsとsummaryタグでアコーディオンを作る - HTMLリファレンス 確かにdetailsとsummaryで十分だなあ、そこまで頻繁にやるものでもないからいつもいざやるときに忘れてて普通にCSS使って組んでしまうけど…

The W3C Markup Validation Service Markupのバリデーションしてくれるらしい。便利そう(まあでもJSのロード待ってはくれないのでSPAではheadしかチェックしてくれない) <abbr> 略語を括る用のタグがあったとは知らなかった。これで括ってtitleに正式名称入れたり</abbr>…

Angular: Eliminate Render Blocking Requests の概要 | <output type=text> - GoogleFontを<link>で読まずにstyle in headerのfont-faceで読み込めばCSSを読み込んでからwoffを読みにいっていたのがwoffだけ読みに行けばいいからHTTPのラウンドトリップを削減できるというのはなるほ</link></output>…

SSG/静的サイトジェネレーター: ビルド時にAPIやGraohQLから先に全ての情報を取得してHTMLを出力する機構のこと。すでに出来上がっているので動的にビューを組み立てることがなくロードが早い等のメリットがある。

InlineSVGの方が別のリクエストを生成しない分で読み込むより早いが、一方(基本的には)キャッシュ出来なくなるというデメリットもある。 A Complete Guide to Dark Mode on the Web 確かに、機器の設定とは別にサイト単体でモードを変更できる方が絶対にユー…

Web Speed Hackathon Online 出題のねらいと解説 そのほかモジュールのtreeshake化 webpackのproduction mode (optimization config) 画像をwebpにする 画像をデバイスで出しわける キャッシュ 画像のサイズ最適化 brotli使うとか ホストサーバーの場所など …

SVGのcircleやecllispseをpathにconvertできるツール : 円に沿ってTextPathを配置したいときに便利

Wev.dev LIVE: Implementing Structure data with JavaScript Google検索した時に一覧ページでも商品の詳細情報とかが綺麗に表示されていることがあるけど、あれを出すために何をしているかと言う話。RichResultだかRichContentだか言ってた。基本的にはJSON…

FormGroupの_updateValue()が走ったとき、diabledになっているvalueは無視される -> フォーム全体をdisbleにした後のvalueChangeがあり、valueを保持したい場合はdisable()のemitEventをfalseにする。 OGPタグのnameもpropertyも基本的には同じ。propertyの…

挙動みてもしかして…と思っていたけど、HttpClientから返されるObservableは全てcoldだからsubscribeするまでリクエストが飛ばない。GETばっかり使っててsubscribeするのが当然だったから意識してなかった。参考 altとtitleは全然役割が違う。altはSEOにも影…

UX week5 Don't hide the place where you don't have an elegant solution with glitz or glam decoration CSS/SVG/Canvasのビジュアル表現でできること・できないこと 直線的なものはCSS、ベジェ曲線を動かしたかったらSVG、画像自体をぐにゃぐにゃ動かし…

OGPタグを使うことで、TwitterやFacebook等のメディアでリンクが貼られた時に表示されるサムネイルの内容をコントロールすることが出来る。(恥ずかしながら2年弱Web系やってたのに検索流入のあるコンテンツを作ったことがなかったので知らなかった)

レスポンシブサイトを作るときは、パフォーマンスの観点から必要な画像サイズに必要十分な画像をDLするようにするため、複数のサイズバリエーションを用意するのが定石。さじ加減にルールはないが、だいたい3種類が一般的。 解像度が高いRetinaなどのディス…

<picture>では<source>と<img>を子要素として使うことができる。ブラウザは、<source>のsrcsetやmediaをみて、現在の環境に合うものがあるか確認、あればそれを表示する。なければimgに指定されているものを表示する。肝心なIEが対応してない悲しみ(まあでもその場合imgだけが表示されるら</source></source></picture>…