【2020年11月】読了記事
HTML
CSS
- コピペで簡単!CSSで実装されたジグザグ、波状、罫線、アイソメトリックスなど背景パターンのスタイルシート | コリス
- CSSの疑似クラス「:focus-within」が素晴らしい理由 | コリス
- Webページやスマホアプリでよく使用される代表的な5つのレイアウトをCSS Gridで実装するテクニック | コリス
- Masonryレイアウトをたった3行のシンプルなCSS Gridで簡単に実装できるようになります | コリス
- CSSのスゴ技!美しいグラデーションのボーダー、角丸や半円のテクニックを使用したチケットを実装する方法 | コリス
- line-break | CSS-Tricks
- max-inline-size | CSS-Tricks
- grid-auto-flow : CSS Grid :: flex-direction : Flexbox | CSS-Tricks
- How to Write Loops with Preprocessors | CSS-Tricks
- Tailwind versus BEM | CSS-Tricks
- CSSのテキストマスクで映えるメインビジュアルを実現 | Stocker.jp / diary
- CSS)z-indexのベストプラクティスを考える
- 【暫定】コーダー歴2年で辿り着いた保守しやすいコーディング手法
JavaScript
- JavaScript/TypeScriptランタイム「Deno 1.5」がリリース、型チェックを最大15倍効率化:CodeZine(コードジン)
- Vue.jsでSlotsの代わりにPropsを使用する理由、名前付きSlotsやスコープ付きSlotsとの違いについて解説 | コリス
- How to Animate the Details Element Using WAAPI | CSS-Tricks
- Quick LocalStorage Usage in Vue | CSS-Tricks
- 10 famous Javascript libraries for Machine Learning - DEV
- 7 code smells in your React components - DEV
- Vanilla JavaScript live search - DEV
- How to build a search bar in React - DEV
- What is ES6 Tree Shaking - DEV
- 5 Javascript Projects You Should Build as Junior Frontend Developer - DEV
- 正しく使えてますか? Hooks APIのおさらい(初級編) - ICS MEDIA
- TypeScriptで始めるNode.js入門 - ICS MEDIA
- 【Vue.js】v-model解体新書 - Qiita
- JavaScriptの型などの判定いろいろ - Qiita
- Reactで「壊れにくいテスト」を書くための方針 - Qiita
- Node.jsとはなにか?なぜみんな使っているのか? - Qiita
- TypeScript で型定義ファイル( d.ts )がないときの対処法 - Qiita
- 【JavaScriptの超基本】ファイルのインポートやエクスポートについて簡単に解説 - Qiita
- 【JavaScriptの超基本】クラスの定義やメソッド・継承について簡単に解説 - Qiita
- Next.jsにおけるSSG(静的サイト生成)とISRについて(自分の)限界まで丁寧に説明する - Qiita
- 5歳娘「パパ、型ガードって何?」 - Qiita
- Hurry Coderと魔法の数字 - Qiita
- 5歳娘「パパ、依存性を注入して?」 - Qiita
- Vuex ストアに TypeScript の型を付ける(2020年12月版) - STORES Tech Blog
- 【入門】Electron完全に理解した
フロントエンドほか
- GIFS and prefers-reduced-motion | CSS-Tricks
- Gray Burst | CSS-Tricks
- Preventing copying text in a webpage 😁 - DEV
- Ultimate RoadMap with so many resources for Front-End Development 💥💥 - DEV
- 【2020年版】フロントエンドのおすすめMac無料ツール - Qiita
ブラウザ
- Firefox 83 introduces HTTPS-Only Mode - Mozilla Security Blog
- CSS GridをChrome デベロッパーツールで検証、デバッグする方法を解説 | コリス
- Level up your JavaScript browser logs with these console.log() tips - DEV
- What's New In DevTools (Chrome 88) | Web | Google Developers
- New in Chrome 87 | Web | Google Developers
- Chrome・Safari・Firefoxで比較!クリエイティブ表現のレベルアップに使える最新ブラウザの開発者機能(前編) - ICS MEDIA
- Vivaldi ブラウザとオープンソース | Vivaldiブラウザ
- New WebKit Features in Safari 14 | WebKit
- Release Notes for Safari Technology Preview 116 | WebKit
- マイクロソフト、「Internet Explorer」での人気サイトの利用を禁止に。 - WPTeq
Web系ほか
- Google Developers Japan: AMP で優れたページ エクスペリエンスを作成する
- 【個人開発・ポートフォリオに】簡単にいい感じのデザインにできるサービスまとめ - Qiita
- 【Electron】HTML/CSS/JavaScript でデスクトップアプリを作った【インストールから exe 化まで】 - Qiita
- 個人開発・スタートアップで採用すべき最強のアーキテクチャを考えた - Qiita
- WebAssemblyが目指していること。ナノプロセスモデルの実現、システムインターフェイス、実行時リンクの実装など - Publickey
デザイン / UI / UX
- 最近のアイコンが似通ってきている問題 | デザイン会社 ビートラックス: ブログ freshtrax
- フォントが大好物な人は要チェック!2020年、日本語の新作フリーフォントのまとめ | コリス
- I made 100 high-quality illustrations, totally free. Use it anywhere without attribution. - DEV
- 役立つデザインテクを学ぶ最新Illustratorチュートリアル、つくり方30個まとめ - PhotoshopVIP
- ついに出た!2021年注目のWebデザイン人気トレンド9個まとめ - PhotoshopVIP
- 3 Types of Roadmaps in UX and Product Design
- あなたの組織でデザイン指標が使えない理由とその対策 : could
Python
- Google『reCAPTCHA』を突破!『2Captcha』でブラウザ操作の完全自動化に挑む - Qiita
- Pythonのオブジェクト指向プログラミングを完全理解 - Qiita
- PyTorch, ONNX, Caffe, OpenVINO (NCHW) のモデルをTensorflow / TensorflowLite (NHWC) へお手軽に変換する - Qiita
機械学習
開発 / インフラ / ツール
- GitHub Actionsでeslintを動かすだけでFiles changedにlint errorが表示されて便利 - $shibayu36->blog;
- 10 Awesome Github Repos Every Web Developer Should Know - DEV
- Operator Lookup - Search JavaScript operators
- GitHub Actionsの超基本!特別な設定が不要なCIサービス - Qiita
- エンジニアなら知っておきたい生産性を爆上げするツール8選 - Qiita
- Google、VSCodeの代替を狙う「Eclipse Theia」コードエディタをクラウド統合開発環境として採用。Google Cloud Shellに統合を発表 - Publickey
- サーバレスの次は「ストレージレス」の実現へ。NetAppがストレージレスを実現する新サービス「Spot Storage」を発表 - Publickey
- 2020年の個人的Firebaseのまとめ
SEO / マーケティング
- WEBデザイナーがマーケティング視点を取り入れると得られる50の恩恵|川端康介|note
- A/Bテストにおける効果の確からしさを導出する - Qiita
- ABテストにおける10個の統計的な罠:オプティマイザーのためのパーフェクトガイド |SEO Japan by アイオイクス
- 【決定版】SEOコピーライティングガイド |SEO Japan by アイオイクス
- 【無料ダウンロード】「SEOを外注する際のチェックリスト」をリリースしました |SEO Japan by アイオイクス
- ユーザーの要望を満たせればアフィリエイトでも問題ない、Google社員が明言 | 海外SEO情報ブログ
- 全サイトのモバイルファーストインデックス移行後もパソコン用Googlebotはクロールを続ける | 海外SEO情報ブログ
- Google、data-vocabulary.org構造化データのサポートを2021年1月29日で終了 | 海外SEO情報ブログ
- どのようにしてGoogleは重複URLを検出し正規化しているのか? | 海外SEO情報ブログ
- なぜAMP⚡はコアウェブバイタルに優れているのか? | 海外SEO情報ブログ
iOS / Android
- 脱獄不要の非公式iOSアプリストア「AltStore」が開発されプレビュー版が公開 - GIGAZINE
- 脱獄不要でターミナルからコマンドを実行可能になるiOS向けアプリ「iSH」レビュー - GIGAZINE
その他
- XR技術の未来を予想!2021年にXR技術の普及が見込まれる分野3選 | デザイン会社 ビートラックス: ブログ freshtrax
- GitHubのソースコードがGitHub上にリークされる、公開した人物は「GitHubのCEO」を偽装 - GIGAZINE
- 「お金を無限に増やせるバグ」を銀行に報告したホワイトハッカーが自身の受けた仕打ちについて解説 - GIGAZINE
- Slackの買収をSalesforceが検討中 - GIGAZINE
- Google Japan Blog: Google アカウントのストレージポリシー変更について
- Googleが機械学習を利用した悪夢のような「怪物ジェネレーター」を開発 | TechCrunch Japan
- 成功する投資:トレーディングのサイエンス - Qiita
- エンジニア1年間で学んだ3つの心得 - Qiita
フロントエンドの個人的なレビュー観点
最近社内で新卒・初学者向けにフロントエンドのコードレビューをする機会が増えたので、自分のためにもレビューの観点をまとめておこうと思います。
共通
HTML
- ダグの使い方が適切か・意味のあるタグを使っているか
- 見出しやセクションが整っているか
- imgタグのalt属性が適切か
CSS
- marginとpaddingの適切な使い分け
- margin、paddingの方向(topやbottomなど)に統一感があるか
- id属性の重複チェック
- クラスに関して
- 崩れがないか・レスポンシブの場合どの幅でもきれいに見えるか
- (アクセシビリティチェック)
JavaScript
- 変数名、関数名の分かりやすさ、英単語
- if文、for文の乱用、多段ネスト、複雑な条件式
- DRY原則に則っているか
- エラーハンドリング
- console.log()等の消し忘れ
- JSでスタイルの変更を行う際に、JS側でスタイルの情報を持っていないか
- CSSで再現できる処理、アニメーション等がないかどうか
ブラウザチェック
- ターゲットブラウザできちんと動作するか
- 見た目に差が出ていないか
その他
- Lighthouseでのパフォーマンスチェック
【2020年10月】読了記事
HTML
- metaタグに記述するソーシャルメディアや検索用のコードをまとめて簡単に生成できるオンラインツール -Meta Tags | コリス
- document outline algorithm と h1 要素 | grgr-dkrkのブログ
CSS
- Animating Number Counters | CSS-Tricks
- CSS設計において特に大切にしている思想をまとめてみた
- Dark Mode in CSS (toggle) - DEV
- min(), max(), and clamp(): three logical CSS functions to use today
- 知っておかないと恥ずかしい?!idとclassの違いと記述ルール - Qiita
- Achieving Vertical Alignment (Thanks, Subgrid!) | CSS-Tricks
- inline-size | CSS-Tricks
- inset-block | CSS-Tricks
- inset-inline | CSS-Tricks
- inset-block-end | CSS-Tricks
- inset-block-start | CSS-Tricks
- inset-inline-end | CSS-Tricks
- inset-inline-start | CSS-Tricks
- CSSの変数(カスタムプロパティ)便利な使い方を詳しく解説 | コリス
- The CSS Custom Property Toggle Trick | CSS-Tricks
- More on content-visibility | CSS-Tricks
- Comparing Various Ways to Hide Things in CSS | CSS-Tricks
JavaScript
- [メモ] JavaScript 参照 - Qiita
- 【Vue.js 3】v-bindの機能ぜんぶ書く - Qiita
- Google Apps Script でよく使うスニペット集 30 選 - Qiita
- gulpで画像を圧縮する - Qiita
- if文はJSXの中で書け - Qiita
- JavaScript: プラグインシステムとプロトタイプ汚染攻撃 - Qiita
- JavaScriptの超基礎的な文法を覚えておこう - Qiita
- JavaScriptの非同期処理を理解する その2 〜Promise編〜 | さくらのナレッジ
- jsライブラリ選定はopenbaseが超絶便利 - Qiita
- memo? useCallback? パフォーマンスが気になる JSXer には SolidJS がオススメ - Qiita
- Node.js Dual Packages (CommonJS/ES Modules) に対応した npm パッケージの開発 - Cybozu Inside Out | サイボウズエンジニアのブログ
- Reactのディレクトリ構成どうしてる? - Qiita
- React超概要 - Qiita
- TypeScriptの型メモ - Qiita
- TypeScriptの型を手に馴染ませるためにやっていること - $shibayu36->blog;
- Typescript型Tips集 - Qiita
- Webpack 5 release (2020-10-10) | webpack
- ワイ「TypeScriptなんも分からん」 - Qiita
- ワイ「TypeScriptのエラーが読まれへん」 - Qiita
- ワイ「なに!?ライブラリをラップするやと!?」 - Qiita
- 憧れのTypeScriptフルスタック環境がコマンド1発で作れる超軽量フレームワーク「frourio」 - Qiita
- JavaScriptの闇 thisへ挑む - Qiita
- 【JS・TS】コーディングTips集 - Qiita
- The Ultimate Guide to Passport JS - DEV
- Top 10 React Hook libraries - DEV
- 描いて理解するイベントループ - Qiita
- React学習を楽にしてくれるJavaScriptでの関数型プログラミングの基礎知識 - Qiita
- 静的サイトジェネレーター Gatsby - Qiita
- Vue.jsってどうやったら綺麗に使えるのよ - Qiita
- ReactコンポーネントのDOMをユニットテストする
フロントエンドほか
- お問い合わせフォームのウェブアクセシビリティ対応の方法 - ICS MEDIA
- フロントエンドエンジニア入門 初心者向けWeb開発に役に立つgoogle Chrome 拡張機能10選 - Qiita
- 次世代のフォント技術 バリアブルフォントの世界 - ICS MEDIA
- How to Become a Pro 😎 Front End Developer💻 - DEV
ブラウザ
- My 12 Favorite Chrome Extensions as a Web Developer ⚡🚀 - DEV
- New in Chrome 86 | Web | Google Developers
- What's New In DevTools (Chrome 87) | Web | Google Developers
- Release Notes for Safari Technology Preview 114 | WebKit
- Release Notes for Safari Technology Preview 115 | WebKit
- Meet Face ID and Touch ID for the Web | WebKit
Web系ほか
- デザイナーとフロントエンドエンジニアに知ってほしいWebのフォント周りのお話
- 次世代画像形式のWebP、そしてAVIFへ。変わり続ける技術に対応するweb制作の黄金解 - ICS MEDIA
- Full Stack Developer's Roadmap 🗺 - DEV
- WebサイトをスクレイピングするWebクローラー20選 - Qiita
- FirebaseSummit 2020のキャッチアップをしてみた - Qiita
- Cookie規制が招くWeb体験の危機 | UX MILK
- MDN Web Docs evolves! Lowdown on the upcoming new platform - Mozilla Hacks - the Web developer blog
デザイン / UI / UX
- 「デザイン思考入門」前編|デザイン思考とは?|Hattoringo / UX Designer|note
- 10 Great Sites for UI Design Patterns you Must Save🏷️ - DEV
- Adobe XDで3D表現が可能に! 3D変形、CCライブラリの統合強化など新機能紹介 - ICS MEDIA
PHP
Python
- Pythonで度数分布表を一発で自動生成する - Qiita
- Pythonのデバッグを完全理解 - Qiita
- Pythonを使ってWindowsやMacを監視し、操作中のアプリの情報を収集してみる - Qiita
- Pythonのオブジェクト指向プログラミングを完全理解 - Qiita
開発 / インフラ / ツール
- 「Edge」の開発ツールを統合し「Visual Studio Code」でWebアプリの開発を完結 - 窓の杜
- 1分でも早く仕事を終わらせるためにVSCodeにできること - Qiita
- Amazon・Google・GitHubなどのクラウドで静的ウェブサイトのホスティング性能を比較した結果が公開中、どのサービスが最も高パフォーマンスか? - GIGAZINE
- GitHub、コードの脆弱性などを発見してくれる「GitHub Code Scanning」正式版が提供開始。パブリックリポジトリには無料 - Publickey
- GitHub、これから作成するリポジトリのデフォルトブランチ名が「main」に。「master」から「main」へ変更 - Publickey
- VS Code内でブラウザ画面プレビューとDevTools表示、そのままコード編集もできるVS Code拡張「Microsoft Edge Tools for VS Code」正式版に - Publickey
SEO / マーケティング
- 企業ブログからコンバージョンを生み出すための15の実践的アドバイス |SEO Japan by アイオイクス
- オートコンプリートのクエリ候補をGoogle検索はどのようにして生成しているのか | 海外SEO情報ブログ