今週読んだ記事(3/14~3/20)
技術関連
Using the HTML title attribute – Updated March 2020 | TPG – The Accessibility Experts
title属性の問題点srcsetとsizesが理解できなかった人のために、日本一分かりやすく解説してみた - Qiita
HTML5で<img>タグに追加されたsrcsetとsizes属性についての解説What Does "playsinline" Mean in Web Video? | CSS-TricksFlywheel logo
<video>タグにplaysinline属性をつけるとモバイルで全画面にならない[CSS] button要素のスタイルシート、最新テクニックを徹底解説 | コリス
ボタンのスタイルについてA Complete Guide to calc() in CSS | CSS-TricksFlywheel logo
calc()の使い方。アンチパターンなどHow to Make Repeating Border Images | CSS-TricksFlywheel logo
border-imageなんてあったんだね。知らなかった...(恥2020年に最適なfont-familyの書き方 - ICS MEDIA
現在のフォントについて詳しくCSS設計・Sassディレクトリ管理の標準化(CROCSS) - Qiita
Sassなどのディレクトリ構成とCSS設計には悩ましいものがある。Flexbox and absolute positioning
position: absolute;のflexアイテムにalign-selfが効く‘CSS X’ | W3C Blog
CSSのこれまでとこれからPlaying With Particles Using the Web Animations API | CSS-TricksFlywheel logo
パーティクルが出せる。重いけどSolid Principles in Javascript - DEV Community
S.O.L.I.D.という原則のもとJSを書きましょうという話。高階関数を書いたら、中級者になれた気がした。 - Qiita
コールバック関数について高階関数を書いたら、中級者になれた気がした。を批判したら上級者になれた気がした。 - Qiita
上記記事に対しての改善案(?)Currying - DEV Community DEV Community
カリー化の仕組みは分かる、書き方もわかる、けど使い所がよくわからない...JavaScript: 通常の関数とアロー関数の違いは「書き方だけ」ではない。異なる性質が10個ほどある。 - Qiita
全然知りませんでした。JavaScriptのthisとPHPのthis - Qiita
JSのthisについてElectronで1からデスクトップアプリを作り、electron-builderを使ってビルド・リリースするまで - Qiita
チュートリアルとして良さそうTypeScript: 38の具体例から学ぶnamed export - Qiita
いろんなexportの書き方がある2020年初頭における Next.js をベースとしたフロントエンドの環境構築 - Qiita
ReactでSSRを実現するフレームワーク Next.jsの環境構築。 TypeScriptやPWA, Jestも盛り込んでいます。4歳娘「パパ、具体的な名前をつけないで?」 - Qiita
ワイ記法でTypeScriptの型がわかりやすいGAS のGoogle謹製CLIツール clasp - Qiita
GASのコードをWeb上以外で管理できるようになった、便利Build a Node.js Tool to Record and Compare Google Lighthouse Reports | CSS-TricksFlywheel logo
LighthouseCLIの使い方180日でWeb開発者になる方法(コンピューターサイエンスの学位なしで) - Qiita
HTML,CSSからAWS,DockerまでDockerのDの字も分からない状態を抜け出すためにやって良かったことをまとめてみる - Qiita
Docker入門。役立ちそうプログラムの可読性を上げるための条件分岐を減らす方法7個 - Qiita
サンプルコードはPHPですが考え方はどの言語にも応用できますねこれからエンジニアを目指す人に見て欲しいです。 - Qiita
エンジニアを目指すにあたって意識するとよいこと(してほしいこと)。COVID-19-mieのためのスクレイピング+自動更新プログラムを書いた - Qiita
三重県版コロナ関連情報サイトの作者さんによる実装時のスクレイピング処理の苦労【翻訳記事】デプロイ戦略の定義 - そこに仁義はあるのか(仮)
デプロイの仕組みってこういう種類があったんだなぁ【2020年版・初心者向け】独学でAIエンジニアになりたい人向けのオススメの勉強方法 - Qiita
独学で勉強するための教材(書籍/Webサービス)やロードマップについて。
デザイン関連
Neumorphism and CSS | CSS-TricksFlywheel logo
ニューモフィズムについて消えゆくスクロールバー|3inowayosuke|note
ブラウザによって違うのはどうにかしてほしい16 Things to Improve Your Website Accessibility (Checklist) | WebsiteSetup.org
アクセシビリティ改善。英語ですが為になります自然な視覚誘導を促すためのビジュアルヒエラルキー | UX MILK
デザイン考える上で大事にしたいユーザーのがっかり体験を減らす! 〜 Yahoo! MAPアプリの第一歩 #UX - Yahoo! JAPAN Tech Blog
がっかり体験の解消Google検索が示唆するプロダクトデザインの未来とは | UX MILK
Googleって検索結果画面の表示めっちゃ変えてくよねA Few Background Patterns Sites | CSS-TricksFlywheel logo
パターン画像素材サイト
その他
GitHubがnpmの買収を発表、JavaScriptのパッケージ管理サービス。将来的にはGitHubとnpmを統合へ - Publickey
npm社の運営は度々不穏な空気があるが、とりあえず資金的な問題は減るのかな東京都の新型コロナ対策サイト“爆速開発”の舞台裏 オープンソース化に踏み切った特別公報チームの正体 - ITmedia NEWS
このサイトの運用方法はすごいなぁと思いましたSEOや広告を活用することなく、18,800ユーザーをGoogleから獲得する方法 |SEO Japan by アイオイクス
Google Discoverについてぼくのかんがえた "さいきょう"の G検定対策【まとめのまとめ】 - Qiita
G検定についてのリンク集文字列のエンコード・デコードを瞬殺するencodeMaxを作りました - Qiita
文字列をURLやUnicodeにエンコード・デコードしてくれるツールを開発した話。利益を上げている個人開発者とその代表的アプリのまとめ - Qiita
こういうのはいいですよね。モチベ上がります「Docker for Visual Studio Code」が正式版に、Visual Studio Codeの拡張機能。WSL 2環境のDockerコンテナに対応 - Publickey
VSCodeからDockerの操作が可能に