diff --git a/.eslintrc.js b/.eslintrc.js index 2022e84..09459c8 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,3 +1,3 @@ module.exports = { - extends: '@frontendweekly/eslint-config-molle', + extends: '@frontendweekly/eslint-config', }; diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md new file mode 100644 index 0000000..4e771e9 --- /dev/null +++ b/.github/pull_request_template.md @@ -0,0 +1,3 @@ +## TITLE + +/schedule YYYY-MM-DD diff --git a/.stylelintrc.js b/.stylelintrc.js index 9f160c4..801277f 100644 --- a/.stylelintrc.js +++ b/.stylelintrc.js @@ -1,3 +1,11 @@ module.exports = { - extends: '@frontendweekly/stylelint-config-molle', + extends: '@frontendweekly/stylelint-config', + rules: { + 'csstools/value-no-unknown-custom-properties': [ + true, + { + severity: 'warning', + }, + ], + }, }; diff --git a/11ty/_postcss/components/_post.pcss b/11ty/_postcss/components/_post.pcss index fea8351..0dabc80 100644 --- a/11ty/_postcss/components/_post.pcss +++ b/11ty/_postcss/components/_post.pcss @@ -5,7 +5,8 @@ /* English only part use serif */ & .c-post__body h1, - & .c-post__body h2 { + & .c-post__body h2, + & #in-brief + ul strong { font-family: var(--type-face-serif); } diff --git a/11ty/posts/2021-09-15-v331.md b/11ty/posts/2021-09-15-v331.md new file mode 100644 index 0000000..99ba955 --- /dev/null +++ b/11ty/posts/2021-09-15-v331.md @@ -0,0 +1,63 @@ +--- +title: Vol.331 +date: '2021-09-15' +desc: 柔軟なUIを実装する方法、SlackではAPIをどのようにデザインしているのか、仕様書とプロトタイピング、ほか計10リンク +permalink: /posts/331/ +--- + +## [How To Build Resilient JavaScript UIs](https://www.smashingmagazine.com/2021/08/build-resilient-javascript-ui/) +#### 柔軟なUIを実装する方法 + +JavaScriptではエラーが発生した際に適切に扱わなければ、全体に影響が発生してしまう。この記事では、JavaScriptでのエラーに対してどのように対応するべきかについて解説をする。 + +- 重要な情報が表示できない場合は、エラーメッセージを表示、そうでない場合は、部分的に欠落したコンポーネントを表示する +- エラーを防ぐ方法 +- エラーが発生した時に再試行の考え方 +- ユーザーへのエラーメッセージとエンジニアへのエラーメッセージ +- 事前に警告を行う + + +## [How We Design Our APIs at Slack](https://slack.engineering/how-we-design-our-apis-at-slack/) +#### SlackではAPIをどのようにデザインしているのか + +SlackでのAPIのデザインについてどのような考えで進めているかを解説している。Slack APIにおいて優れた開発者エクスペリエンスを提供するため、そしてそれを保っていくためにどのような原則を持って進めているのか。 + +1. 1つのことを行い、それをうまく行う +2. すばやく簡単に開始できるようにする +3. 直感的な一貫性を追求する +4. 意味のあるエラーを返す +5. 規模とパフォーマンスに留意する +6. 変更を壊さないようにする + + + +## [Discovery vs. Documentation | Silicon Valley Product Group](https://svpg.com/discovery-vs-documentation/) +#### 仕様書とプロトタイピング + +リモートのエンジニアを扱うチームのパフォーマンスを向上させるためには、継続的なプロトタイピングが重要であり、製品要件をまとめたドキュメントをエンジニアに渡すようなコミュニケーションではそれは難しいと指摘している。ドキュメントよりも、Product Discoveryといったユーザーテストの手法の重要さを訴えている。 + +## [The local minima of suckiness](https://veekaybee.github.io/2021/08/05/local-minima-of-suckiness/) + +Vicki氏はより良い開発者になるための3つのポイントを紹介している + +- コラボレーションを促進するために余地を残すチーム +- ベストプラクティスの繰り返し +- 良い質問をする方法、学ぶ方法を学ぶ + + +## [A guide to designing accessible WCAG-compliant focus indicators](https://www.sarasoueidan.com/blog/focus-indicators/) + +マウスユーザーがカーソルを使用してナビゲートしていくが、キーボードユーザにおいてはフォーカスインジケーターがその役割を果たす。実際のところ、キーボードユーザーは多くの場合、Webサイトを快適に利用することができない。フォーカスインジケーターが適切に設計、実装されることがないからである。この記事ではフォーカスインジケーターとは何か、またその仕様とどのように実装していくべきかについて紹介していく。 + + +## In Brief + +- **[The Big Gotcha With Custom Properties](https://css-tricks.com/the-big-gotcha-with-custom-properties/)**: 複数のカスタムプロパティの定義がどのように適用されるかは、定義場所などによって変わることについての解説とその対応策について + +- **[On the dl](https://benmyers.dev/blog/on-the-dl/)**: `dl`の要素について、その汎用性とセマンティクスな実装に置いて非常に約立つことを紹介する + +- **[Practical Uses of CSS Math Functions: calc clamp min max | Modern CSS Solutions](https://moderncss.dev/practical-uses-of-css-math-functions-calc-clamp-min-max/)**: CSSの`calc`、`clamp`、`min`、`mac`といった関数の紹介をする + +- **[Introduction to the Solid JavaScript Library](https://css-tricks.com/introduction-to-the-solid-javascript-library/)**: ハイパフォーマンスなUIフレームワークである[Solid](https://www.solidjs.com/)についての紹介 + +- **[Tree data structure in JavaScript](https://stackfull.dev/tree-data-structure-in-javascript)**: JavaScriptを用いて様々なデータ構造を表現する diff --git a/11ty/posts/2021-09-22-v332.md b/11ty/posts/2021-09-22-v332.md new file mode 100644 index 0000000..92254de --- /dev/null +++ b/11ty/posts/2021-09-22-v332.md @@ -0,0 +1,51 @@ +--- +title: Vol.332 +date: '2021-09-22' +desc: アーキテクチャ決定記録をいつ書くべきか、UXにおけるフィードバック、ハイパーリンクが青色なのはなぜか、ほか計10リンク +permalink: /posts/332/ +--- + + +## [When Should I Write an Architecture Decision Record](https://engineering.atspotify.com/2020/04/14/when-should-i-write-an-architecture-decision-record/) +#### アーキテクチャ決定記録をいつ書くべきか + +Architecture Decision Record(ADR)はSpotifyの開発チームで作成されているドキュメントの一つである。この記事では、このADRが何か、そしてどのようなメリットがあるのかについて解説をしていく。 + +## [Giving seeking and receiving feedback in UX](https://uxdesign.cc/giving-seeking-and-receiving-feedback-in-ux-136a905bfc4a) +#### UXにおけるフィードバック + +UXにおいてフィードバックを得る際にチェックしておくべき項目を紹介している。 + +- コンテキストを明確にする +- 他の人を理解する +- 口調、言語、コミュニケーションスタイルを調整する +- 時間とスペースを与える +- フィードバックが機能しない場合は、他の方法を試す + + +## [Why are hyperlinks blue? | The Mozilla Blog](https://blog.mozilla.org/en/internet-culture/deep-dives/why-are-hyperlinks-blue/) +#### ハイパーリンクが青色なのはなぜか + +Webにおいてハイパーリンクが青色であることは、いつ誰が決めたのか。この記事では、Webの歴史をたどりながら、ハイパーリンクがいつ誕生し、どのような変遷を辿ってきたかを紹介する。 + +## [Structure Eats Strategy Software Driven World](https://janbosch.com/blog/index.php/2017/11/25/structure-eats-strategy/) + +BAPOモデルの有効性を説く。BAPOモデルでは、ビジネスから技術を選択し、プロセスを決定した後に、組織を定義する。しかしながら、殆どの会社では、OPABモデルになっており、これは組織が決まった状態から技術とプロセスが決め、ビジネスを作っていくモデルのことを指す。"O"ではなく”B”から始めることの重要性を解説している。 + + +## [The power of framing a problem](https://surfingcomplexity.blog/2021/08/22/the-power-of-framing-a-problem/) + +ストーリーテリングの力によって、問題を現実のものとさせ、リソースを割かせることで、そのトラブルを解決させることができるsことを紹介している。 + + +## In Brief + +- **[urlpattern/explainer.md at main WICG/urlpattern](https://github.com/WICG/urlpattern/blob/main/explainer.md#urlpattern)**: サービスワーカーのスコープの仕様の改善案をまとめている + +- **[iOS Engine Choice In Depth](https://infrequently.org/2021/08/webkit-ios-deep-dive/)**: AppleがiOSのブラウザにおいてはwebkitの実装しか認めていない件について、掘り下げる + +- **[unknown vs any in TypeScript](https://dmitripavlutin.com/typescript-unknown-vs-any/)**: TypeScriptにおける、anyとunknownの違いについて紹介する + +- **[Making world-class docs takes effort | daniel.haxx.se](https://daniel.haxx.se/blog/2021/09/04/making-world-class-docs-takes-effort/)**: curlのドキュメントを作成するためにどのような点を考慮しているか紹介しながら、ドキュメントのベストプラクティスを紹介する + +- **[The Alternative to Roadmaps | Silicon Valley Product Group](https://svpg.com/the-alternative-to-roadmaps/)**: ロードマップの問題点を指摘し、その代替案について紹介する diff --git a/11ty/posts/2021-09-29-v333.md b/11ty/posts/2021-09-29-v333.md new file mode 100644 index 0000000..8165ed7 --- /dev/null +++ b/11ty/posts/2021-09-29-v333.md @@ -0,0 +1,42 @@ +--- +title: Vol.333 +date: '2021-09-29' +desc: スタックレス、Ship/Show/Askの3タイプのブランチ戦略、タスクフォース駆動開発、ほか計10リンク +permalink: /posts/333/ +--- + +## [Using the platform](https://elisehe.in/2021/08/22/using-the-platform) +#### スタックレス + +[スタックレスウェイ](https://tutorials.yax.com/articles/build-websites-the-yax-way/quicktakes/what-is-the-yax-way.html)の記事に影響を受け、Vanilla JavaScript、ES6モジュール、Webコンポーネントといったプラットフォームに備わっている機能のみを使った実装を試した経験を話す。こういったスタックレスの魅力はソースコードをそのままブラウザで実行できることであると紹介している。 + +## [Ship / Show / Ask](https://martinfowler.com/articles/ship-show-ask.html) +#### Ship/Show/Askの3タイプのブランチ戦略 + +コードレビューは上手に扱えれば強力な機能だが、PRがレビュー待ちとして溜まってしまうことがよくある。この記事では、CI戦略を十分に生かすワークフローを実現するために、Ship(即リリース)、Show(即リリースするが、確認のためにレビュー依頼をする)、Ask(リリース前にレビュー依頼をする)の3つにPRを分けることで、スムーズな開発が行える手法を提案している。 + +## [Your Team is Killing Productivity](https://medium.com/@stevebishop_89684/your-team-is-killing-productivity-e092cb834cd1) +#### タスクフォース駆動開発 + +生産性の高いチームを形成するためのアイディアとしてタスクフォースの有効性を紹介している。この記事ではタスクフォース駆動開発におけるメリットを紹介し、どのようにそれが生産性を向上させるかを解説している。 + +## [Chrome is the new Safari. And so are Edge and Firefox. Hello my name is Niels Leenheer](https://nielsleenheer.com/articles/2021/chrome-is-the-new-safari-and-so-are-edge-and-firefox/) + +AppleがiOSにwebkitのブラウザのみを実行可能にしている現況について指摘している。 + + +## [Decoding AVIF: Deep dive with cats and imgproxy Martian Chronicles](https://evilmartians.com/chronicles/decoding-avif-deep-dive-with-cats-and-imgproxy) + +次世代の画像圧縮形式であるAVIFがFirefox92でデフォルトでサポートされるようになった。この記事では、この圧縮形式について詳しく解説する。 + +## In Brief + +- **[4 tips to refactor a complex legacy app without automation tools](https://understandlegacycode.com/blog/4-tips-refactor-without-tools)**: レガシーコードをリファクタリングする4つのアイディアを紹介する + +- **[The Best UX Research Methods in a Pinch](https://uxtools.co/blog/best-ux-research-methods-in-a-pinch/)**: UXリサーチにおいておすすめの方法を6つ紹介する + +- **[Common NPM Mistakes Every Developer Should Avoid](https://blog.bitsrc.io/common-npm-mistakes-every-developer-should-avoid-60ab0642d8f9)**: NPMに関するよくある間違いを紹介している + +- **[An Interactive Guide to Keyframe Animations](https://www.joshwcomeau.com/animation/keyframe-animations/)**: CSSのキーフレームを使用したアニメーションの実装方法について詳しく解説していく + +- **[Whats New With DevTools: Cross-Browser Edition](https://www.smashingmagazine.com/2021/09/devtools-cross-browser-edition/)**: モダンブラウザの開発者ツールの新機能を紹介していく diff --git a/11ty/posts/2021-10-06-v334.md b/11ty/posts/2021-10-06-v334.md new file mode 100644 index 0000000..67c59f6 --- /dev/null +++ b/11ty/posts/2021-10-06-v334.md @@ -0,0 +1,43 @@ +--- +title: Vol.334 +date: '2021-10-06' +desc: 効果的で維持可能なドキュメントを作る、人が求めるものをつくる、デザインシステムのためのシステム思考、ほか計10リンク +permalink: /posts/334/ +--- + +## [The Art of Documentation](https://chelseatroy.com/2021/09/14/the-art-of-documentation/) +#### 効果的で維持可能なドキュメントを作る + +開発の現場では、ドキュメントが存在しないこと、あったとしても古くなっており役に立たない、ということはよくある。この記事では、こういった問題が起きがちなドキュメントというものをどのように作成していくべきか、そして維持していくべきかのアイディアを紹介する。 + +## [Make things that people want (instead of what you want them to want) Slack Design](https://slack.design/articles/makethingsthatpeoplewant-insteadofwhatyouwantthemtowant/) +#### 人が求めるものをつくる + +SlackのHuddleの機能を例に挙げ、どのようにそれが社内で提案され、ブラッシュアップされて、リリースされたのかを紹介する。 + +## [System thinking for design systems](https://buditanrim.medium.com/system-thinking-for-design-systems-cef332b08fa8) +#### デザインシステムのためのシステム思考 + +デザインシステムへの参加と貢献についてシステム思考を適用し、視覚化を行う。この図を参照しながら、そこにどのような問題があるか、そしてどのように改善していけばよいかを見つけていく。 + + +## [Enterprise UX: essential resources to design complex data tables by Stéphanie Walter - UX Researcher & Designer.](https://stephaniewalter.design/blog/essential-resources-design-complex-data-tables/) + +ダッシュボード、内部ツールなどのエンタープライズのシステムを実装する際に、データテーブルのUIは頻繁に必要とされる。この記事では、データテーブルのUIを実装する際に参考となるリンク集を紹介している。 + +## [Reviewing Pull Requests](https://chelseatroy.com/2019/12/18/reviewing-pull-requests/) + +プルリクエストのレビューをスムーズに進められるようになるためのアイディアを紹介する。 + + +## In Brief + +- **[Becoming a design tokens ambassador](https://specifyapp.com/blog/becoming-a-design-tokens-ambassador)**: デザイントークンを活用するためのアイディアを紹介する + +- **[The Future of CSS: Cascade Layers (CSS@layer)](https://www.bram.us/2021/09/15/the-future-of-css-cascade-layers-css-at-layer/)**: 詳細度をコントロールさせるための仕組み`@layer`についての紹介をする + +- **[Dont attach tooltips to document.body - Atif Afzal](https://atfzl.com/don-t-attach-tooltips-to-document-body)**: document.bodyの直下にあるツールチップのパフォーマンスに関する研究 + +- **[Developer Decisions For Building Flexible Components](https://www.smashingmagazine.com/2021/09/developer-decisions-building-flexible-components/)**: フロントエンドエンジニアがデザインをコードに落とし込む実装をする際に気をつけるべきポイントを紹介する + +- **[Axe-core vs PA11Y: Which one should you choose?](http://www.craigabbott.co.uk/blog/axe-core-vs-pa11y)**: アクセシビリティチェックツールであるaxe-coreとPA11Yの比較を行う diff --git a/11ty/posts/2021-10-13-v335.md b/11ty/posts/2021-10-13-v335.md new file mode 100644 index 0000000..63ef707 --- /dev/null +++ b/11ty/posts/2021-10-13-v335.md @@ -0,0 +1,51 @@ +--- +title: Vol.335 +date: '2021-10-13' +desc: データ可視化のためのタイポグラフィ、デザインシステムを改善するBNARLモデル、UXリサーチの結果を統合する方法、ほか計10リンク +permalink: /posts/335/ +--- + +## [Typography for Data](https://medium.com/tap-to-dismiss/typography-for-data-c760e73367e0) +#### データ可視化のためのタイポグラフィ + +社内システムではテキストがコンテンツの大部分を占めている。また、基本的な見出しや本文といった文字以外にも、グラフや表のラベル、値など様々な表示スタイルが存在することが多い。この記事では、そういったユースケースにおけるタイポグラフィをデザインする際のポイントを紹介している。 + + +## [Design systems: the BNARL model](https://uxdesign.cc/the-bnarl-model-5f72b3c7e46c) +#### デザインシステムを改善するBNARLモデル + +BNARLモデルと呼ばれるデザインシステムを中心に健全な文化を形成するための戦略の紹介をする。BNARLは以下の頭文字からとっている。 + +- 信念: ユーザーはテクノロジーに精通しておらず、保証が必要 +- 規範: 誰もが設計システムに貢献し、進化させることができる +- アーティファクト: 私たちは私たちをサポートするツールを作成しますが、その逆はない +- 儀式: 人々が自分のスキルを発揮できる協業体制 +- 言語: わかりやすくシンプルで、覚えやすい言語 + +## [Quicker UX Research Synthesis](https://uxtools.co/blog/quicker-ux-research-synthesis/) +#### UXリサーチの結果を統合する方法 + +複数の様々なリサーチ結果をどのように統合し、有効活用していけばよいか。この記事ではリサーチ結果を効率よく統合する方法を紹介している。 + +## [Optimizing JSON IndexedDB or postMessage](https://webreflection.medium.com/optimizing-json-indexeddb-or-postmessage-698112860899) + +同じようなデータを格納するJSONのデータだったとしても、最適化をすることでパフォーマンスとメモリ消費を大幅に改善できる例を紹介する。 + + +## [Less Absolute Positioning With Modern CSS - Ahmad Shadeed](https://ishadeed.com/article/less-absolute-positioning-modern-css/) + +最新のCSSを駆使した、`position:absolute`を使わない絶対的な配置のテクニックを紹介する + + + +## In Brief + +- **[Reducing The Need For Pseudo-Elements](https://www.smashingmagazine.com/2021/09/reducing-need-pseudo-elements/)**: CSSの疑似要素について深堀りし、テクニックなどを紹介する + +- **[ct.css Lets take a look inside your](https://csswizardry.com/ct/)**: headタグの中を可視化するCSSの紹介 + +- **[Locus. ethanmarcotte.com](https://ethanmarcotte.com/wrote/locus/)**: アプリへ誘導するバナーやプロンプトのUXについて + +- **[Understanding How Facebook Disappeared from the Internet](https://blog.cloudflare.com/october-2021-facebook-outage/)**: 先日発生したFacebookの障害について具体的にどのようなことが発生したのかを検証する + +- **[DOM Treemap](https://chrome.google.com/webstore/detail/dom-treemap/albnoggfgnooeefdjpncieecohhblonh#85&utm_medium=email&utm_term=0_7cba5dc7bd-3aaa8cf047-1384953136)**: DOMノードの分布を調べるのに役立つChrome Extension diff --git a/11ty/posts/2021-10-20-v336.md b/11ty/posts/2021-10-20-v336.md new file mode 100644 index 0000000..037d090 --- /dev/null +++ b/11ty/posts/2021-10-20-v336.md @@ -0,0 +1,64 @@ +--- +title: Vol.336 +date: '2021-10-20' +desc: エンジニアのビジネスへの理解の重要性、CSSにおけるデバッグ手法、空の状態デザインする、ほか計10リンク +permalink: /posts/336/ +--- + + +## [The Monopoly on Business Understanding](https://alexkondov.com/the-monopoly-on-business-understanding/) +#### エンジニアのビジネスへの理解の重要性 + +マネージャー、エンジニアがどのようにソフトウェア開発に向かうべきかの考えを紹介する。ソフトウェア開発の管理の業界では、ビジネス側の要求を可能な限り抽象化しよとする傾向があり、それは多くのバグを引き起こす原因になっていると指摘している。エンジニアがソリューションを構築しているドメインを十分に理解することができれば、より予測可能なマネジメントが可能となる。 + + +## [A Guide To CSS Debugging](https://www.smashingmagazine.com/2021/10/guide-debugging-css/) +#### CSSにおけるデバッグ手法 + +この記事では、よくあるCSSのバグをいくつかのカテゴリに分けて紹介し、それぞれの状況を検証する方法をとそれを防ぐのに役立つ手法について探っていく。CSSの問題は以下の4つによく分類されるという。 + +- 親からのコンテンツのオーバーフローの影響 +- ブラウザ依存 +- カスケーディングの問題 +- 予期せぬDOMの変更の影響 + + +## [Designing Empty States in Complex Applications: 3 Guidelines](https://www.nngroup.com/articles/empty-state-interface-design/) +#### 空の状態デザインする + +データが無い空の状態のUIについて、この状態はデフォルトでは空白となってしまうが、これに着目し効果的な表示をすることですることでUXを改善できる例を紹介する。 + +- システムステータスをユーザーに伝達する +- ユーザーが未使用の機能を発見し、アプリケーションの学習可能性を高めるのに役立てる +- 重要なタスクを開始するための直接的な経路を提供する + + +## [The Skill of Org Design](https://commoncog.com/blog/org-design-skill/) + +自身の経験に裏付いた、組織デザインのノウハウを解説している。人、システム思考、組織管理の3つの段階などについて詳しく解説している。 + +## [Why Development Teams are Slow](https://medium.com/javascript-scene/why-development-teams-are-slow-89107985c75c) + +開発が遅くなる原因とそれをマネージャーがどのように改善できるのかについての解説を行う。 + +- 非現実的な期待 +- 未解決の問題が多すぎる +- 管理不能なタスクサイズ +- 山積みのコードレビュー +- 不十分なトレーニング +- 開発者の燃え尽き症候群 +- バグ +- 従業員の定着率が低い + + +## In Brief + +- **[Introducing Partytown : Run Third-Party Scripts From a Web Worker](https://dev.to/adamdbradley/introducing-partytown-run-third-party-scripts-from-a-web-worker-2cnp)**: サードパーティのスクリプトによるパフォーマンスへの影響を抑えるために、Webワーカー内でそれを実行するようにするライブラリの紹介 + +- **[Accounting for User Research in Agile](https://www.nngroup.com/articles/user-research-agile/)**: アジャイルでユーザーリサーチを行う課題についてと、それを克服するためのアイディアを紹介する + +- **[Web Streams Everywhere (and Fetch for Node.js)](https://css-tricks.com/web-streams-everywhere-and-fetch-for-node-js/)**: Web StreamのAPIについて詳しく解説する + +- **[The Project Engagement Dilemma](https://jarango.com/2021/09/21/the-project-engagement-dilemma/)**: プロジェクト序盤では貢献度が低いが成長があったり、楽しむことができるが、後半ではそれが逆転してしまうジレンマについて考察し、それをどう改善するかについて考える + +- **[React is Declarative - What Does it Mean?](https://alexsidorenko.com/blog/react-is-declarative-what-does-it-mean/)**: Reactが宣言的であるとはどういう意味なのか、宣言的なUI実装と、命令的なUI実装を比較して理解をする diff --git a/11ty/posts/2021-10-27-v337.md b/11ty/posts/2021-10-27-v337.md new file mode 100644 index 0000000..acb0e8c --- /dev/null +++ b/11ty/posts/2021-10-27-v337.md @@ -0,0 +1,61 @@ +--- +title: Vol.337 +date: '2021-10-27' +desc: 関数デザインレシピを使用したデバッグ、システム思考の罠とその回避方法、Webアクセシビリティに関する神話、ほか計10リンク +permalink: /posts/337/ +--- + +## [Using a Function Design Recipe to Debug](https://thoughtbot.com/blog/debugging-with-htdp-design-recipe) +#### 関数デザインレシピを使用したデバッグ + +Mike氏は10代の若者にプログラミングを教えるとき、関数デザインレシピというものを伝え、自分のプログラムをデバッグできるように促している。これは、新しいコードを作成するときと既存の問題をデバッグするときの両方で、彼自身も使用している効果的な方法であるとし、この記事ではその関数デザインレシピを紹介している。以下の6つのステップに分かれている。 + +1. 問題分析からデータ定義まで +1. 署名、目的ステートメント、ヘッダー +1. 機能例 +1. 関数テンプレート +1. 関数定義 +1. テスト + + +## [How to safely think in systems.](https://lethain.com/how-to-safely-think-in-systems/) +#### システム思考の罠とその回避方法 + +システム思想家が陥ってしまう問題を紹介し、それにどのように対処するかを解説している。以下の3つの観点を挙げている。 + +1.モデルと現実が対立するとき、現実は常に正しい +2.モデルは不変だが、現実は不変ではない +3.すべてのモデルで情報が省略されており、重要な情報を省略しているものもある + + +## [Myths about Web Accessibility :: Blog :: Alvaro Montoro](https://alvaromontoro.com/blog/67989/myths-about-web-accessibility) +#### Webアクセシビリティに関する神話 + +Alvaro氏は、WebアクセシビリティはすべてのWeb開発プロジェクトで必須であるが、多くのWeb開発者にとってそれが浸透していないと指摘している。 +この記事では、こういった状況の背景となるアクセシビリティの誤解や神話を集めて紹介し、誤解を解いていく。 + +## [Web Quality Assurance: From User Requirements To Web Risk Management](https://www.smashingmagazine.com/2021/09/journey-into-web-quality-assurance/) + +ElieSloïm氏はWebの品質保証について20年研究を行ってきた。この記事では彼がその過程で学んだことについて紹介する。Webにおいて品質は何を意味するか。具体的に品質を5つに分解したモデルを作成し、それぞれについて解説を行う。 + +- 可視性 +- 知覚 +- 技術的 +- コンテンツ +- サービス + +## [How I Learnt To Stop Worrying And Love Animating The Box Model](https://whistlr.info/2021/box-model-animation/) + +ボックスモデルのアニメーションについて検証を行う。具体的には、アコーディオンのアニメーションをパフォーマンスを考慮して実装する + +## In Brief + +- **[Huetone](https://huetone.ardov.me)**: アクセシブルなカラーパターンを自動生成するツール + +- **[mithi/react-philosophies: Things I think about when I write React code](https://github.com/mithi/react-philosophies?ck_subscriber_id=1424938214)**: Reactを実装する際のベストプラクティスをまとめている + +- **[What unit test tool should I bring to my JavaScript team?](https://understandlegacycode.com/blog/test-tool-javascript-team)**: JavaScriptでユニットテストをする際、どういったツールを用いればよいか考察する + +- **[About bitwise operations](https://webreflection.medium.com/about-bitwise-operations-1f983a9e6e25)**: ビット演算についてわかりやすく解説する + +- **[Writing clean JavaScript tests with the BASIC principles](https://yonigoldberg.medium.com/fighting-javascript-tests-complexity-with-the-basic-principles-87b7622eac9a)**: 綺麗なJavaScriptのテストを書くための原則を紹介する diff --git a/11ty/posts/2021-11-03-v338.md b/11ty/posts/2021-11-03-v338.md new file mode 100644 index 0000000..4bb132f --- /dev/null +++ b/11ty/posts/2021-11-03-v338.md @@ -0,0 +1,41 @@ +--- +title: Vol.338 +date: '2021-11-03' +desc: Lighthouseのスコアの正確性、信頼性を軽視するようになってしまったソフトウェアエンジニア、賢いCSSソリューションは必要か、ほか計10リンク +permalink: /posts/338/ +--- + +## [The Art of Deception Lighthouse Score Editionzachleat.com](https://www.zachleat.com/web/lighthouse-deception/) +#### Lighthouseのスコアの正確性 + +Lighthouseのスコアが、実行時のマシンの性能や環境によって大きく変わってしまうことを指摘している。Lighthouseの高いスコアを獲得することだけを目標とすることをやめ、こういったパフォーマンスの変動性を理解して付き合っていくことをおすすめしている。 + +## [Software developers have stopped caring about reliability](https://drewdevault.com/2021/10/17/Reliability.html) +#### 信頼性を軽視するようになってしまったソフトウェアエンジニア + +現代のソフトウェアエンジニアは信頼性、堅牢性を軽視し過ぎている指摘する。この問題点について紹介しながら、改善するためにするべきこと、考えるべき点を解説している。ユーザーにとって良いプロダクト作ることを重視した開発において、信頼性、堅牢性の観点を重視していくべきだと締めくくっている + +## [CSS { In Real Life } | Evaluating Clever CSS Solutions](https://css-irl.info/evaluating-clever-css-solutions/) +#### 賢いCSSソリューションは必要か + +Facebookで使用されているトグルできるborder-radiusのCSS実装を例に挙げ、それは確かに賢く動作するが、読みにくいソリューションになってしまっていることを指摘している。実際の所、実装されたコードはさまざまなレベルのCSS知識を持つエンジニアによって、長期間メンテナンスされるため、読みやすいソリューションを実装することが重要であると話す。 + +## [When a JavaScript WeakMap() Actually Came in Handy](https://macarthur.me/posts/when-a-weakmap-came-in-handy) + +JavaScriptでスライドショーを実装していた際に発生した問題について深堀りし、WeakMapオブジェクトを使用することで改善した例を紹介している。 + +## [Practical frontend philosophy](https://jaredgorski.org/writing/15-practical-frontend-philosophy/) + +フロントエンドを取り巻く事象について様々な観点から意見を挙げ、それらの考えを広げていく。 + +## In Brief + +- **[The Ultimate Guide to Getting Started with the Rollup.js JavaScript Bundler](https://blog.openreplay.com/the-ultimate-guide-to-getting-started-with-the-rollup-js-javascript-bundler)**: Rollup.jsについて、その使い方を詳しく解説している + +- **[Redundantly Redundant a11y Accessibility](https://www.scottohara.me/blog/2021/10/04/redundantly-redundant.html)**: 冗長なARIAの設定についての紹介と、それを改善するためのアイディアを紹介する + +- **[CSS Units Guide everything you need to know](https://webinuse.com/css-units-guide-everything-you-need-to-know/)**: CSSで使用できるすべての単位についてその仕様を紹介している + +- **[Custom properties with defaults: 31 strategies Lea Verou](https://lea.verou.me/2021/10/custom-properties-with-defaults/)**: カスタムプロパティを活用するためのテクニックを紹介している + +- **[How to win at CORS](https://jakearchibald.com/2021/cors/)**: CORSの歴史に触れながら、その仕様を詳細に解説していく diff --git a/11ty/posts/2021-11-10-v339.md b/11ty/posts/2021-11-10-v339.md new file mode 100644 index 0000000..fb91b9e --- /dev/null +++ b/11ty/posts/2021-11-10-v339.md @@ -0,0 +1,52 @@ +--- +title: Vol.339 +date: '2021-11-10' +desc: コード品質の重要性、サードパーティの埋め込みのベストプラクティス、インシデントレビューとポストモーテムのベストプラクティス、ほか計10リンク +permalink: /posts/339/ +--- + +## [Code quality: a concern for businesses bottom lines and empathetic programmers](https://stackoverflow.blog/2021/10/18/code-quality-a-concern-for-businesses-bottom-lines-and-empathetic-programmers/) +#### コード品質の重要性 + +コードの品質は、プログラマーの精神状態、チーム内のコミュニケーション、および仕事に対するインセンティブに影響を与える。コードを改善することで、組織の健全性と能力全体を改善できることがある。この記事ではコードの品質が具体的にどのように大きな影響を与えるのかについて説明をする。 + +## [Best practices for using third-party embeds](https://web.dev/embed-best-practices/) +#### サードパーティの埋め込みのベストプラクティス + +多くのサイトでは、サードパーティの埋め込みを使用して、魅力的なUXを提供しようとしている。これらの多くは、ビデオプレーヤー、ソーシャルメディアフィード、マップ、および広告などを指す。この記事では、そういったサードパーティ製のコンテンツがどのようにサイトパフォーマンスに影響を与えているかについて説明する。具体的な例を挙げながら、それを改善するためにどういった方法をとることが考えられるのか、対応策も紹介する。 + +## [Incident Review and Postmortem Best Practices - The Pragmatic Engineer](https://blog.pragmaticengineer.com/postmortem-best-practices/) +#### インシデントレビューとポストモーテムのベストプラクティス + +インシデントの処理方法について、以下の観点から解説をしていき、ベストプラクティスを紹介していく。 + +- 業界全体での一般的なインシデント処理慣行 +- インシデントレビューのベストプラクティス +- インシデントレビューの実践 +- エンジニアが他の業界のインシデント処理から何を学ぶことができるか + +## [How to Sell UX Research with Two Simple Questions](https://alistapart.com/article/how-to-sell-ux-research/) + +この記事では、2つの簡単な質問を用いて、チームの共通理解における不整合を明らかにする方法を紹介する。 + +- オブジェクトは何か +- それらのオブジェクト間の関係は何か + +また、これらの質問は、ORCAプロセスからきている。ORCAとはObjects、Relationships、CTA、およびAttributesの略であり、オブジェクト指向のユーザーエクスペリエンスを作成するためのプロセスを示している。 + +## [Reimagining OKRs for designers and design teams](https://uxdesign.cc/reimagining-okrs-for-designers-and-design-teams-808662633322) + +この記事では、特にUXチーム向けの目標設定とレビューに使われるOKRについてと、このアプローチの使用に関するガイダンスと制限について解説する。 + + +## In Brief + +- **[#26 HTMHell special: tasty buttons - HTMHell](https://www.htmhell.dev/26-tasty-buttons/)**: ハンバーガーメニューでやりがちな実装を紹介して、どのように改善すればよいかを解説する + +- **[Retry Timeout and Cancel with fetch()](https://www.chrisarmstrong.dev/posts/retry-timeout-and-cancel-with-fetch)**: fetchで、Retry, Timeout, Cancelを実装する方法を紹介している。 + +- **[Bring Legacy Code under tests by handling global variables](https://understandlegacycode.com/blog/best-way-to-handle-global-variables)**: レガシーなコードをテストするために、どういったステップを踏んで改善していけばよいかについて + +- **[React & TypeScript: how to type hooks (a complete guide)](https://devtrium.com/posts/react-typescript-how-to-type-hooks?ck_subscriber_id=1424938214)**: ReactのhooksをTypeScriptで書く方法を紹介 + +- **[Writing great alt text: Emotion matters](https://jakearchibald.com/2021/great-alt-text/)**: 適切なaltを設定するためにに考えるべきことを紹介している diff --git a/11ty/posts/2021-11-17-v340.md b/11ty/posts/2021-11-17-v340.md new file mode 100644 index 0000000..7a20eff --- /dev/null +++ b/11ty/posts/2021-11-17-v340.md @@ -0,0 +1,45 @@ +--- +title: Vol.340 +date: '2021-11-17' +desc: Webで実装されたPhotoshop、新しいHTTP標準でのキャッシュ、デザインシステムを（適切に）破壊する方法、ほか計10リンク +permalink: /posts/340/ +--- + + +## [Photoshop's journey to the web](https://web.dev/ps-on-the-web/) +#### Webで実装されたPhotoshop + +現在Adobeはパブリックベータ版としてPhotoshopのWeb版をリリースしている。複雑なソフトウェアであるPhotoshopがWebに実装されるまでにどのような課題があったのか、またそれらをChromeがどのようにサポートしているのか、利用されているAPIについてなど、その詳細を説明している。 + + +## [New HTTP standards for caching on the modern web](https://httptoolkit.tech/blog/status-targeted-caching-headers/) +#### 新しいHTTP標準でのキャッシュ + +Cache-StatusヘッダーとTargeted Cache-Controlヘッダーの2つについての解説。この2つは現在標準化に向けてレビューがされている新しい仕様である。この記事ではこの2つがどういった経緯で標準化が進められているのか、どういった仕様なのかについて詳細に解説を行う。 + +## [How to (properly) break your design system](https://breakyourdesignsystem.com/) +#### デザインシステムを（適切に）破壊する方法 + +デザインシステムはプロダクトを効率よく作るため、デザインを構築するために使用される。しかし、同じことを繰り返すことを続けるだけでは、プロダクトを拡大させることができない。このバランスをどのようにとるか、その考えを求めていく。 + +## [HTML with Superpowers](https://daverupert.com/2021/10/html-with-superpowers/) + +Webコンポーネントについて解説をJavaScriptからのアプローチではなく、HTML/CSS/JavaScriptという順序で解説していく。JavaScriptに詳しくなかったとしてもWebコンポーネントが扱えることを伝えたいと話す。 + + +## [When to Skip UX Research | UX Tools](https://uxtools.co/blog/when-to-skip-ux-research/) + +UXリサーチを後回しにして良いタイミングと状況の例を挙げる。 + + +## In Brief + +- **[Prevent Scroll Chaining With Overscroll Behavior - Ahmad Shadeed](https://ishadeed.com/article/prevent-scroll-chaining-overscroll-behavior/)**: `overscroll-behavior` のプロパティでスクロールを禁止する方法の紹介 + +- **[Extracting Microservices from a Monolith](https://alexkondov.com/extracting-microservices-from-a-monolith/)**: モノリシックなサービスをマイクロサービスに分割するための考え方を、テクニックを紹介する + +- **[Pure CSS Custom Styled Radio Buttons | Modern CSS Solutions](https://moderncss.dev/pure-css-custom-styled-radio-buttons/)**: CSSだけでスタイリングされ、動作するラジオボタンを実装する方法を紹介する + +- **[Building a multi-select component](https://web.dev/building-a-multi-select-component/)**: 複数選択可能なselectを実装する + +- **[Which SVG technique performs best for way too many icons?](https://cloudfour.com/thinks/svg-icon-stress-test/)**: SVGをWebサイトで表示するときに使えるテクニックを紹介し、どのようなテクニックがどのような場面で有効になるかを解説する diff --git a/11ty/posts/2021-11-24-v341.md b/11ty/posts/2021-11-24-v341.md new file mode 100644 index 0000000..3af10a2 --- /dev/null +++ b/11ty/posts/2021-11-24-v341.md @@ -0,0 +1,46 @@ +--- +title: Vol.341 +date: '2021-11-24' +desc: 知られていない開発者ツールの使い方、SOLIDの原則の重要性、価値は証明するものではなく創りだすもの、ほか計10リンク +permalink: /posts/341/ +--- + +## [Developer Tools secrets that shouldnt be secrets](https://christianheilmann.com/2021/11/01/developer-tools-secrets-that-shouldnt-be-secrets/) +#### 知られていない開発者ツールの使い方 + +この記事ではGoogle Chromeの開発者ツールを便利に使うためのTipsを紹介している。consoleのテクニック、Visual Studio Codeとの連携などについて詳しく解説していく。 + + +## [Why SOLID principles are still the foundation for modern software architecture](https://stackoverflow.blog/2021/11/01/why-solid-principles-are-still-the-foundation-for-modern-software-architecture/) +#### SOLIDの原則の重要性 + +SOLIDの原則が考案されてから20年間でコンピューティングは大きく変化したが、それは今もなおソフトウェアを設計するためのベストプラクティスとなっている。この記事ではその理由と、その原則について解説する。 + +## [Don't prove value. Create it.](https://theoverlap.substack.com/p/dont-prove-value-create-it) +#### 価値は証明するものではなく創りだすもの + +チームは自分達の仮設が正しいことを証明しようとする動きをしてしまう時がある。実験を通して、チームが正しいことを証明するのではなく、できるだけ早く新しい理解を得ること、そして自らが創りだすことが価値となる。 + + +## [Some Thoughts on Interfaces](https://nickarner.com/notes/some-thoughts-on-interfaces-october-24th-2021/) + +UIに関する考えを展開していく。インターフェースは、コンピューターを操作するためのゲートウェイであり、ユーザーが邪魔にならずに目標を達成できるように支援する必要がある。現代では、ユーザーの行動を学習して適応するインターフェースを作成することが可能となっている。コンピュータを本当に便利に扱えるようにするためには、UIは明確で、目立たず、直感的に使用できることが不可欠である。 + + +## [The Infinite Hows (or the Dangers Of The Five Whys)](https://www.kitchensoap.com/2014/11/14/the-infinite-hows-or-the-dangers-of-the-five-whys/) + +なぜなぜ分析の問題点を指摘する。またそれの代替案、どのようにと分析する方法の利点について紹介する。 + + +## In Brief + +- **[5 Whole-Team Workshops To Increase Developers Role In Sprint Planning](https://philippe.bourgau.net/5-whole-team-workshops-to-increase-developers-role-in-sprint-planning/)**: スプリント計画における開発者の生産性を向上させる5つのワークショップを紹介する + + +- **[How Many Participants for a UX Interview?](https://www.nngroup.com/articles/interview-sample-size/)**: UXインタビューのサンプルサイズをどのように決定すればいいかを決める考え方を紹介する + +- **[CSS { In Real Life } | Accessible Toggles](https://css-irl.info/accessible-toggles/)**: アクセシブルなトグルボタンを実装する + +- **[If HTML and ARIA dont allow it its probably a bad idea](https://www.tempertemper.net/blog/if-html-and-aria-dont-allow-it-its-probably-a-bad-idea)**: HTMLとARIAで制限されている場合は、別の実装を試すことをオススメしている + +- **[The Golden Ratio and User-Interface Design](https://www.nngroup.com/articles/golden-ratio-ui-design/)**: 黄金比の考え方をUIに適用する考え方を紹介する diff --git a/11ty/posts/2021-12-01-v342.md b/11ty/posts/2021-12-01-v342.md new file mode 100644 index 0000000..63b430a --- /dev/null +++ b/11ty/posts/2021-12-01-v342.md @@ -0,0 +1,54 @@ +--- +title: Vol.342 +date: '2021-12-01' +desc: 2種類のユーザビリティ、アニメーションの滑らかさを示す指標、Svelteの優れた思想とそれを実現するAstro、ほか計10リンク +permalink: /posts/342/ +--- + + +## [19. Two kinds of usability](https://world.hey.com/rjs/19-two-kinds-of-usability-b9bc04d5) +#### 2種類のユーザビリティ + +ユーザビリティを2つの種類に分けて考える。 + +- 知覚的なもの +- ドメイン固有のもの + +知覚的なものはデザイナの基本的な知識で解決できるが、ドメイン固有なものはそうはいかない。ドメイン固有のユーザビリティをテスト段階で解決することは難しいため、設計の段階から仮設を立てることが必要だとアドバイスしている。また、最後の5-10%の部分はリリース前に解決することは難しいため、リリース後にフィードバックに基づいて改修をする方法をおすすめしている。 + +## [Towards an animation smoothness metric](https://web.dev/smoothness/) +#### アニメーションの滑らかさを示す指標 + +この記事では、アニメーションのパフォーマンスに関わる内容を詳細に解説する。 + +- アニメーションとアニメーションフレームの概要 +- アニメーションの滑らかさの測定に関する考え方 +- ツールを活用するためのアイディア + + +## [Inertia](https://adactio.com/journal/18604) +#### Svelteの優れた思想とそれを実現するAstro + +Webの開発用ツールを2つのカテゴリに分けることができる。トランスパイラや、リンターなどの開発者のマシンでのみ存在するツールと、CSSフレームワークやJavaScriptライブラリなどの開発者のマシンに加え、ユーザーのマシンにも存在するツール。後者は開発者の利便性のためにユーザに対して不利益を生み出している可能性があるとJeremy氏は指摘している。この記事では、この点を解決するためのSvelteの思想について、そして更にAstroが優れている点について紹介する。 + +## [The Guideline Gap](https://medium.com/tap-to-dismiss/the-guideline-gap-d7549d28f1ec) + +ガイドライン、デザイナー、エンジニアのギャップをどのように埋めていくか。 + + +## [Beyond 10](https://matthewstrom.com/writing/beyond-10x/) + +ソフトウェア開発において10倍の生産性を生み出すためのアイディアをデザインシステムや自動化の具体的な例を用いながら紹介している。 + +## In Brief + +- **[How to Implement and Style the Dialog Element - Codrops](https://tympanus.net/codrops/2021/10/06/how-to-implement-and-style-the-dialog-element/)**: ユーザーフレンドリーなダイアログを実装するための要件をまとめて、実際の実装例と共に紹介している + + +- **[Stand-up Meetings Are Dead (and What To Do Instead)](https://www.honeycomb.io/blog/standup-meetings-are-dead/)**: リモートワークにおいて、非同期的なスタンドアップミーティングの代わりに同期的な会議を決まった時間に行う方法の利点を紹介し、おすすめしている。 + +- **[Let's talk about Native HTML Tabs](https://daverupert.com/2021/10/native-html-tabs/)**: ネイティブでアクセシブルな``要素の実装に関する情報を掲載している + +- **[How Designers Can Prevent User Errors](https://uxtools.co/blog/how-designers-can-prevent-user-errors/)**: ユーザーエラーを防ぐための設計の仕方について + +- **[Introducing Shadow Palette Generator](https://www.joshwcomeau.com/css/introducing-shadow-palette-generator/)**: なめらかなシャドウを実装するためのテクニックとそのジェネレータを紹介する diff --git a/11ty/posts/2021-12-08-v343.md b/11ty/posts/2021-12-08-v343.md new file mode 100644 index 0000000..8f6029f --- /dev/null +++ b/11ty/posts/2021-12-08-v343.md @@ -0,0 +1,50 @@ +--- +title: Vol.343 +date: '2021-12-08' +desc: 一貫性や均一性よりも使いやすさ、ユーザーインターフェースのためのデザインシステム、スケーラブルなデザインチームDesign Ops、ほか計10リンク +permalink: /posts/343/ +--- + +## [Be usable not consistent not uniform](https://uxdesign.cc/be-usable-not-consistent-not-uniform-9ac72374cf93) +#### 一貫性や均一性よりも使いやすさ + +GoogleやMicrosoftのサービスロゴや、スプレー缶のデザインを例に挙げ、ブランドを意識した一貫したデザインは誤認知しやすく、使いやすいとはいえないと指摘している。ユーザー中心のサービスを考えたとき、一貫性よりも実用性と使いやすさに重点を置く必要がある。 + + +## [Design Systems are for user interfaces](https://bradfrost.com/blog/post/design-systems-are-for-user-interfaces/) +#### ユーザーインターフェースのためのデザインシステム + +デザインシステムは組織全体の重要な標準を具体化するが、それはユーザーインターフェースのために使用され、必ずしもすべての標準を定義または所有する必要はない、というアイディアについて。例えば、写真のガイドライン、コンテンツのガイドライン、音声とトーンのガイドラインなどは、デザインシステムに含める必要は無いのではと指摘している。 + +## [Design Ops in scalable design organizations](https://www.mynameisjehad.com/design-ops-in-scalable-design-organizations/) +#### スケーラブルなデザインチームDesign Ops + +Design Opsチームの運用方法についてのアイディア、それらの目標とKPIの案について紹介する。 + +- Chief of Staff +- Team Operation +- Practice Operation +- Research Operations + + +## [Language is Infrastructure](https://understandinggroup.com/ia-theory/language-is-infrastructure) + +どういった言語を使うかはインフラとなるほど重要な要素である。ユーザーストーリーや要件を決めるとき、使用する言語が将来の結果を形作ることになる。 + + +## [Your CSS is an interface](https://ericwbailey.design/writing/your-css-is-an-interface/) + +DuolingoのUIの色の問題から、CSSについて考察を深めていく。 + + +## In Brief + +- **[A Clever Sticky Footer Technique](https://css-tricks.com/a-clever-sticky-footer-technique/)**: スティッキーフッターを実装するためのスマートなCSS実装を紹介する + +- **[What's new in PageSpeed Insights](https://web.dev/whats-new-pagespeed-insights/)**: PageSpeed Insightsの新機能について紹介する + +- **[Layout patterns](https://web.dev/patterns/layout/)**: モダンなCSSのAPIを使用したレイアウトパターンを解説している + +- **[This Is My 10 Questions React Code Reviewing Routine](https://www.chakshunyu.com/blog/this-is-my-10-questions-react-code-reviewing-routine/?ck_subscriber_id=1424938214)**: Reactのコードレビューをする際に確認しておきたい10個の質問をまとめている + +- **[My Custom CSS Reset](https://www.joshwcomeau.com/css/custom-css-reset/)**: スマートなCSSリセットを考案しそれの解説をする diff --git a/11ty/posts/2021-12-15-v344.md b/11ty/posts/2021-12-15-v344.md new file mode 100644 index 0000000..c81b002 --- /dev/null +++ b/11ty/posts/2021-12-15-v344.md @@ -0,0 +1,47 @@ +--- +title: Vol.344 +date: '2021-12-15' +desc: UXはデザインだけではない、優れたデザイナはユーザーを観察する、レイアウト崩れを未然に防ぐCSS、ほか計10リンク +permalink: /posts/344/ +--- + + +## [Design is not art and UX is not design](https://uxdesign.cc/design-is-not-art-and-ux-is-not-design-62c99d138ac1) +#### UXはデザインだけではない + +人々はUXの改善について言及すると、デザインの改善を求める傾向がある。しかしながら、デザインとUXは重複している部分もあるが、すべてがデザインで対応できると考えてはいけない。優れたUXを提供するためには、デザイナーだけでなく、トップダウンのすべての部門が考慮しなければならない哲学でもある。 + + +## [#11: Observing users vs. Letting users decide](https://us4.campaign-archive.com/?u=f82dd94137a54f15acad8bdfe&id=3c1154d216) +#### 優れたデザイナはユーザーを観察する + +インターフェースデザインにおいて、経験の浅いデザイナはA/Bテストを行ってユーザーに決定をさせることを考える。Budi氏はよりよいデザイナになるためには、ユーザに決定をさせるのではなく、自分自身がユーザーをよく観察し、決断を下すべきだと話す。 + + +## [Defensive CSS - Ahmad Shadeed](https://ishadeed.com/article/defensive-css/) +#### レイアウト崩れを未然に防ぐCSS + +よくあるレイアウト崩れを、未然に防ぐためのCSSの設定方法について紹介する。 + + +## [Responsive Layouts Fewer Media Queries](https://css-tricks.com/responsive-layouts-fewer-media-queries/) + +メディアクエリを使わず、或いは最小限にとどめて、レスポンシブレイアウトを実装する方法を紹介する。 + + +## [Priority of design inputs](https://adactio.com/journal/18628) + +アイディアが競合したとき、どのように優先順位を決定するか。それを決定するためのヒントを授ける。 + + +## In Brief + +- **[what is partial hydration and why is everyone talking about it? - DEV Community](https://dev.to/ajcwebdev/what-is-partial-hydration-and-why-is-everyone-talking-about-it-3k56)**: ハイドレーションについてその仕組を解説する + +- **[CSS { In Real Life } | A Guide To Modern CSS Colors With RGB HSL HWB LAB And LCH](https://css-irl.info/a-guide-to-modern-css-colors/)**: モダンなCSSで扱える色空間、RGB HSL HWB LAB LCHについて解説 + +- **[A Comprehensive Guide To Error Handling In Node.js](https://www.honeybadger.io/blog/errors-nodejs/)**: Node.jsのエラー処理について詳しく解説する + +- **[A Simple Explanation of Function Overloading in TypeScript](https://dmitripavlutin.com/typescript-function-overloading/)**: TypeScriptのOverload関数についての解説 + +- **[Create UI color palettes with ease](https://atmos.style/)**: カラーパレットを簡単に作成することができるツール diff --git a/11ty/posts/2021-12-22-v345.md b/11ty/posts/2021-12-22-v345.md new file mode 100644 index 0000000..6092237 --- /dev/null +++ b/11ty/posts/2021-12-22-v345.md @@ -0,0 +1,45 @@ +--- +title: Vol.345 +date: '2021-12-22' +desc: UIファンド、Lighthouseでユーザーフローを測定する、ウィンドウをデザインする、ほか計10リンク +permalink: /posts/345/ +--- + + +## [The UI fund](https://web.dev/ui-fund/) +#### UIファンド + +Chromeは、UIエコシステムをサポートするためのファンドを立ち上げた。この記事ではこのファンドがどういった種類のプロジェクトに適用できるかについて解説している。 + +## [Lighthouse user flows](https://web.dev/lighthouse-user-flows/) +#### Lighthouseでユーザーフローを測定する + +新しいLighthouseAPIでは、ユーザーフロー全体のパフォーマンスとベストプラクティスを測定できる。この記事では、新たに測定可能となった、ナビゲーション、スナップショット、タイムスパンの3つのモードについて解説する。 + + +## [Breaking Out of the Box](https://alistapart.com/article/breaking-out-of-the-box/) +#### ウィンドウをデザインする + +ウィンドウコントロールオーバーレイAPIを使って、PWAのウィンドウをデザインする方法を紹介する。 + +## [The State Of The Web](https://adactio.com/articles/18580) + +Webの歴史を辿り、未来のWebを想う。 + + +## [Coloring With Code A Programmatic Approach To Design - Codrops](https://tympanus.net/codrops/2021/12/07/coloring-with-code-a-programmatic-approach-to-design/) + +プログラムで色をデザインする方法を紹介。 + + +## In Brief + +- **[Some notes on using esbuild](https://jvns.ca/blog/2021/11/15/esbuild-vue/)**: webpackと比べながらesbuildの利点を解説していく + +- **[How to get started with property-based testing in JavaScript using fast-check](https://jrsinclair.com/articles/2021/how-to-get-started-with-property-based-testing-in-javascript-with-fast-check/)**: プロパティベースのテストについての紹介 + +- **[Building a toast component](https://web.dev/building-a-toast-component/)**: トーストコンポーネントを実装する + +- **[Pull work don't push it](https://theoverlap.substack.com/p/pull-work)**: プロダクトマネージャがカンバンでどのようにタスク管理をすべきかについて + +- **[Slow IndexedDB RxDB - Documentation](https://rxdb.info/slow-indexeddb.html)**: IndexedDBがなぜ遅いのか、そしてその代わりに何を使うべきか diff --git a/11ty/posts/2021-12-29-v346.md b/11ty/posts/2021-12-29-v346.md new file mode 100644 index 0000000..953516c --- /dev/null +++ b/11ty/posts/2021-12-29-v346.md @@ -0,0 +1,47 @@ +--- +title: Vol.346 +date: '2021-12-29' +desc: プラットフォームを活かす、Webフィード実装のベストプラクティス、3つの基本的なIA概念、ほか計10リンク +permalink: /posts/346/ +--- + +## [Embrace the Platform](https://css-tricks.com/embrace-the-platform/) +#### プラットフォームを活かす + +JavaScriptですべてを実装しようとする昨今のフロントエンドの傾向に対して、JavaScriptを使用しないプラットフォームを活かした実装方法を推奨している。この記事ではその利点を紹介していく。HTML、CSS、JavaScriptの順で可能な限り単純な実装にすること、プログレッシブエンハンスメントを念頭に置いて実装することで、より壊れにくいサイトを構築することができると指摘している。 + +## [Working With Web Feeds: Its More Than RSS](https://css-tricks.com/working-with-web-feeds-its-more-than-rss/) +#### Webフィード実装のベストプラクティス + +Google Chromeはサイトのフォローの機能を実験している。この機能ではWebサイト側はRSSを提供することで、最新のコンテンツをユーザーに届けることができる。この記事では、昨今こういった事情によりRSSフィードへの関心が高まっていることを紹介しながら、具体的にRSSにはどのような形式があるのか、どのように実装するべきなのかなどについて解説をしていく。 + + +## [Three Foundational IA Concepts](https://jarango.com/2021/11/30/three-foundational-ia-concepts/) +#### 3つの基本的なIA概念 + +IAを作成するために理解しなければならない3つの概念についての紹介を行う。 + +- 区別: 要素感の区別を明確にする +- 関係: 要素感の関係によって意味が変わることを考慮するべき +- パターン: パターン認識されることを考慮するべき + +## [mess with dns](https://messwithdns.net/) + +DNSレコードの設定を試すことができるWebアプリ。DNSの基本の設定方法から、実際によくある設定方法、変わった設定方法を行ったときにどのような挙動になるか、などをチュートリアル形式で学ぶ事ができる。 + + +## [SVGcode: a PWA to convert raster images to SVG vector graphics](https://web.dev/svgcode/) + +Thomas氏はラスタ画像をSVGにするアプリをPWAで作成した。この記事では、このアプリの説明とそれに使用されているAPIを解説しながらPWAがOSと調和して動作することについて強調して解説している。 + +## In Brief + +- **[Using WebAssembly (created in Rust) for Fast React Components](https://www.joshfinnie.com/blog/using-webassembly-created-in-rust-for-fast-react-components/)**: Reactのコンポーネントを高速化するために、WebAssemblyを使った方法を紹介 + +- **[Where do you put spacing on design system components?](https://ericwbailey.design/writing/where-do-you-put-spacing-on-design-system-components/)**: デザインシステムにおいてスペースをどのように扱うかについて考察する + +- **[Day 6 Following the Unix philosophy without getting left-pad](https://raku-advent.blog/2021/12/06/unix_philosophy_without_leftpad/)**: UNIXの哲学を実際のプログラミングにどのように適用できるのか + +- **[Reduce Your Websites Environmental Impact With a Carbon Budget](https://css-tricks.com/reduce-your-websites-environmental-impact-with-a-carbon-budget/)**: Webサイトの二酸化炭素排出量を計測する方法とそれを改善するためのアイディアを紹介している + +- **[Running an Effective Design Kickoff Meeting](https://uxtools.co/blog/running-an-effective-design-kickoff-meeting/)**: 優れたプロジェクトキックオフミーティングを行うためのアイディアを紹介している diff --git a/11ty/posts/2022-01-19-v347.md b/11ty/posts/2022-01-19-v347.md new file mode 100644 index 0000000..b49288b --- /dev/null +++ b/11ty/posts/2022-01-19-v347.md @@ -0,0 +1,53 @@ +--- +title: Vol.347 +date: '2022-01-19' +desc: マネージャーは組織を作る、言語の壁、メモリリークを見つけるfuiteの紹介、ほか計10リンク +permalink: /posts/347/ +--- + +## [Managers make organizations not products](https://tannerchristensen.com/blog/2021/12/8/managers-make-organizations-not-products) +#### マネージャーは組織を作る + +マネージャーの仕事は、Product自体を作るのではなく、その開発チームとメンバーが可能な限り最高のプロダクトを作ることができるようにサポートすること。多くのデザイナはよりプロダクト開発に携わるためにリーダーシップの役割に移行しようとするが、この役割の変化を認識しておくことが重要であると話している。 + +## [The Language Wall | Jorge Arango](https://jarango.com/2021/12/15/the-language-wall/) +#### 言語の壁 + +組織の中で共通言語が作られていないことで問題が発生することを指摘し、その言語の問題を解決するためのC級の役割として、チーフオントロジーオフィサーの役割を立てることを提案している。 + + +## [Introducing fuite: a tool for finding memory leaks in web apps](https://nolanlawson.com/2021/12/17/introducing-fuite-a-tool-for-finding-memory-leaks-in-web-apps/) +#### メモリリークを見つけるfuiteの紹介 + +Webアプリのメモリリークを見つけるためのツール fuite の紹介。npxで簡単に実行することができ、特にSPAアプリケーションで発生しやすいメモリリークの発見をサポートする。 + +## [Holiday Book Recommendations for Engineering Managers Software Engineers and Product Managers](https://blog.pragmaticengineer.com/holiday-tech-book-recommendations/) + +テクノロジー業界で働く人々にぴったりな本を102冊紹介する。以下のトピックを中心に、本を紹介する。 + +- エンジニアリング管理 +- エンジニアリングのリーダーシップと組織デザイン +- ソフトウェアエンジニアリングのキャリア +- ソフトウェアエンジニアリングのインタビュー +- ソフトウェア工学 +- ソフトウェアエンジニアリング：特定のドメインまたはテクノロジー +- プロダクトと戦略 +- リーダーシップとビジネス + + +## [Dynamic Color Manipulation with CSS Relative Colors](https://blog.jim-nielsen.com/2021/css-relative-colors/) + +CSS相対色を使用した動的な色操作について。calcやrgb,hslなどを使用したいろいろな方法について詳しく解説する。 + + +## In Brief + +- **[Standardizing Focus Styles With CSS Custom Properties](https://css-tricks.com/standardizing-focus-styles-with-css-custom-properties/)**: CSSカスタムプロパティを使用してフォーカススタイルを管理しやすくする手法を紹介する + +- **[Presenting @trivago/prettier-plugin-sort-imports trivago tech blog](https://tech.trivago.com/2021/12/17/presenting-trivago/prettier-plugin-sort-imports/)**: importを綺麗に並び替えるためのprettierのプラグインの紹介 + +- **[How to Write Shell Scripts in Node with Google's zx Library](https://www.sitepoint.com/google-zx-write-node-shell-scripts/)**: JavaScriptでシェルを記述できる[zx](https://github.com/google/zx)の紹介 + +- **[About trusting JavaScript execution](https://webreflection.medium.com/about-trusting-javascript-execution-8c6b478d6021)**: JavaScriptをセキュリティの側面から考察する + +- **[Test Your Product on a Crappy Laptop](https://css-tricks.com/test-your-product-on-a-crappy-laptop/)**: 古いノートパソコンでテストをすることでWebサイトの問題を姶良家にする方法をおすすめしている diff --git a/11ty/posts/2022-01-26-v348.md b/11ty/posts/2022-01-26-v348.md new file mode 100644 index 0000000..dab5da8 --- /dev/null +++ b/11ty/posts/2022-01-26-v348.md @@ -0,0 +1,49 @@ +--- +title: Vol.348 +date: '2022-01-26' +desc: 設計プロセスにおける認知バイアス、アーキテクチャをスケールさせる4つの方法、フロントエンドの命名規則ガイド、ほか計10リンク +permalink: /posts/348/ +--- + +## [Biased by Design](https://biasedbydesign.com/) +#### 設計プロセスにおける認知バイアス + +認知バイアスをいくつか紹介しながら、それらが設計プロセスにおいてどのように発生することがあるのか、またどのように回避するかをケーススタディと共に解説していく。 + +## [Scaling the Practice of Architecture Conversationally](https://martinfowler.com/articles/scaling-architecture-conversationally.html) +#### アーキテクチャをスケールさせる4つの方法 + +従来の設計のアプローチは適切なタイミングで実行することが難しい。この記事では、それの代替的な考え方と、関連する一連のツールとプラクティスを紹介する。 + +- 設計意思決定記録(ADR) +- 設計アドバイザフォーラム +- チームソースの原則 +- テクノロジーレーダー + + +## [A Small Guide for Naming Stuff in Front-end Code](https://blog.frankmtaylor.com/2021/10/21/a-small-guide-for-naming-stuff-in-front-end-code/) +#### フロントエンドの命名規則ガイド + +フロントエンドに関する命名をサポートするガイドラインを紹介している。CSSにおけるクラス名やJavaScriptにおける変数名、関数名をどのように命名していくべきか。 + +## [Introduction to Ontology Concepts and Modeling](https://boxesandarrows.com/introduction-to-ontology-concepts-and-modeling/) + +オントロジーとはなにか、またオントロジーのモデリングをするためにはどのような観点で進めていけばよいかを解説をする。 + +## [Hands On with the new Responsiveness Metrics](https://calendar.perfplanet.com/2021/hands-on-with-the-new-responsiveness-metrics/) + +WebVitalsの要素の一つとして、最初のユーザー入力に対してユーザーが感じる遅延の一部を測定する、”応答性"の指標について、その仕組と計測方法について解説する。 + + +## In Brief + +- **[Notes on Josh Comeau's Custom CSS Reset](https://css-tricks.com/notes-on-josh-comeaus-custom-css-reset/)**: Josh氏のCSS Resetを解説する + +- **[The CSS :has() selector is way more than a Parent Selector](https://www.bram.us/2021/12/21/the-css-has-selector-is-way-more-than-a-parent-selector/)**: CSSの `has()` の機能についてと、その可能性について解説していく。 + +- **[The React Testing Library Guide I Wish I Had](https://blog.theodo.com/2021/12/react-testing-library-guide/)**: React Testing Libraryの使い方を紹介する + +- **[UI Testing Handbook](https://storybook.js.org/tutorials/ui-testing-handbook/)**: フロントエンドチームが使用するUIテスト戦略に焦点を当てたガイド + +- **[Making Accessibility More Accessible](https://austingil.com/making-accessibility-more-accessible/)**: デザイナ、エンジニア、QA、CI/CD用のA11yツールをそれぞれ紹介する + diff --git a/11ty/posts/2022-02-02-v349.md b/11ty/posts/2022-02-02-v349.md new file mode 100644 index 0000000..91755c9 --- /dev/null +++ b/11ty/posts/2022-02-02-v349.md @@ -0,0 +1,53 @@ +--- +title: Vol.349 +date: '2022-02-02' +desc: 4種類のドキュメント、システム思考をするためのガイド、Figmaを利用したデザインシステム、ほか計10リンク +permalink: /posts/349/ +--- + +## [The documentation system Documentation system documentation](https://documentation.divio.com/) +#### 4種類のドキュメント + +単純で、包括的で、ほぼ普遍的に適用可能なドキュメンテーションに関するスキームを紹介する。4つの種類のドキュメントの異なるアプローチについて理解し、これらの原則を実践できれば、ドキュメントが改善され、ひいてはプロジェクト、プロダクト、またはチームを改善することができる。 + +- チュートリアル +- ハウツーガイド +- リファレンス +- 説明 + +## [Activating Change: A Designers Guide to Systems Thinking](https://boxesandarrows.com/activating-change-a-designers-guide-to-systems-thinking/) +#### システム思考をするためのガイド + +システム思考について、その考え方を紹介しながら、それによってどのようなことができるのかを解説する。システム思考は、デザイナーとしてより倫理的で全体論的な選択を行う方法を考える1つの方法であり、より全体的な設計を可能にする考え方、プロセス、およびツールを含むアプローチである。 + +## [Composition-Based Design System In Figma](https://www.smashingmagazine.com/2022/01/composition-based-design-system-figma/) +#### Figmaを利用したデザインシステム + +Figmaはデザインシステムの柔軟性と保守性を保つために役立つ、強力な概念をサポートしている。この記事では、Sasha氏が、システムデザイナーの立場でどのようにFigmaを活用できるかを紹介する。 + +## [6 principles for being more systemic in your design process](https://bootcamp.uxdesign.cc/6-principles-for-being-more-systemic-in-your-design-process-a38d1b6e608d) + +デザインプロセスをより体系的にするための6つの原則を紹介する。 + +- スコープを定める +- レバレッジポイントと変化の機会を見極める +- 収益以外のビジネス目標を定める +- レッドチームを組む +- システムの中の特権を認識し、変化への対処をサポートする +- エゴシステムからエコシステムへと変化させる + +## [Heres what I didnt know about :where() - Manuel Matuzović](https://www.matuzo.at/blog/2022/heres-what-i-didnt-know-about-where/) + +CSSの`:where`の擬似クラスについてその有効的な使い方を説明する。 + +## In Brief + +- **[Make Beautiful Gradients](https://www.joshwcomeau.com/css/make-beautiful-gradients/)**: 美しいグラデーションを製作するためのポイントを紹介している。 + +- **[The good the bad and the toggle](https://www.alexbuenodesign.com/blog/the_good_the_bad_and_the_toogle)**: トグルのデザインについて考察する + +- **[Reading Source Code - Redux](https://alexkondov.com/reading-source-code-redux/)**: Reduxのソースコードを読み込みそのデザインを考察する + +- **[Building UI Components With SVG and CSS - Ahmad Shadeed](https://ishadeed.com/article/building-components-svg-css/)**: SVGとCSSを使用することでよりリッチなUIを実装できる例を紹介する + +- **[Axess Lab | Testing is a scary word](https://axesslab.com/testing-a-scary-word/)**: UXにおいて"テスト"という言葉がもたらす意味を考察する diff --git a/11ty/posts/2022-02-09-v350.md b/11ty/posts/2022-02-09-v350.md new file mode 100644 index 0000000..73f9d8a --- /dev/null +++ b/11ty/posts/2022-02-09-v350.md @@ -0,0 +1,54 @@ +--- +title: Vol.350 +date: '2022-02-09' +desc: 2022年のCSS、TypeScriptの始め方、品質のトレードオフ、ほか計10リンク +permalink: /posts/350/ +--- + + +## [CSS in 2022](https://www.bram.us/2021/12/27/css-in-2022/) +#### 2022年のCSS + +2022年にブラウザに搭載される予定のCSSの機能について紹介する。 + +- コンテナクエリ +- カスケードレイヤー +- カラー関数 +- etc + +## [How not to learn TypeScript](https://fettblog.eu/how-not-to-learn-typescript/) +#### TypeScriptの始め方 + +TypeScriptを始めたときに陥りがちなポイントをまとめながら、それらにどのように対処するかについて解説している。 + +- JavaScriptを理解しないで使おうとしてしまう +- すべてにアノテーションをつけようとしてしまう +- 型と値を混同してしまう +- 最初からすべてをTypeScriptにしようとしてしまう + +## [Plan for tradeoffs: You cant optimize all software quality attributes](https://stackoverflow.blog/2022/01/17/plan-for-tradeoffs-you-cant-optimize-all-software-quality-attributes/) +#### 品質のトレードオフ + +ソフトウェアにおいて品質を最適化するためのアイディアを紹介する。品質と言ってもさまざまな項目が存在する。そのすべての項目を満たすことを目指すのではなく、まずどの項目に着目するかを決定すること、そしてそのためのデザインを行うことが重要であると話す。 + +## [Don't Fight the Cascade Control It!](https://css-tricks.com/dont-fight-the-cascade-control-it/) + +`:where` や `:is` を用いてCSSのカスケーディングの制御のやり方を改善する方法について紹介する。 + + +## [A Unified Theory of Web Performance](https://calendar.perfplanet.com/2021/a-unified-theory-of-web-performance/) + +Gmailを例に挙げ、Webパフォーマンスとは何かを考察する。 + + +## In Brief + +- **[Whats the right font size in web design?](https://pimpmytype.com/font-size/)**: Webデザインにおける正しいフォントサイズは何かを考察する + +- **[Modern Fluid Typography Using CSS Clamp](https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/)**: CSSの `clamp` の機能を使って、流動的なタイポグラフィを実装する方法を紹介 + +- **[Figma for Developers](https://dev.to/kathryngrayson/figma-for-developers-6op)**: 開発者のためのFigmaの解説 + +- **[No Apple Did Not Crowdfund :focus-visible in Safari](https://meyerweb.com/eric/thoughts/2022/01/24/no-apple-did-not-crowdfund-focus-visible-in-safari/)**: `:focus-visible` がIgaliaがクラウドファンディングでSafariに実装したことについての見解 + +- **[Your CSS reset needs text-size-adjust (probably)](https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/)**: CSS Resetでテキストサイズをどのようにするべきか diff --git a/11ty/posts/2022-02-23-v351.md b/11ty/posts/2022-02-23-v351.md new file mode 100644 index 0000000..5a74a3f --- /dev/null +++ b/11ty/posts/2022-02-23-v351.md @@ -0,0 +1,42 @@ +--- +title: Vol.351 +date: '2022-02-23' +desc: ソフトウェアエンジニアとしてより優れたライターになる、Even Over Statementで意思決定をする、Divとアクセシビリティ、ほか計10リンク +permalink: /posts/351/ +--- + +## [Becoming a Better Writer in Tech](https://blog.pragmaticengineer.com/becoming-a-better-writer-in-tech/) +#### ソフトウェアエンジニアとしてより優れたライターになる + +シニアエンジニアやエンジニアリングマネージャーとして活躍するには文章スキルが重要となる。この記事では、ソフトウェアエンジニアにとってライティングスキルが重要であること、文章をうまく書くためのプロセス、そして、改善していく方法について紹介していく。 + +## [How to Write a Strategy Statement Your Team Will Actually Remember - NOBL Academy](https://academy.nobl.io/how-to-write-a-strategy-your-team-will-remember/) +#### Even Over Statementで意思決定をする + +戦略とはトレードオフを行うことである。難しい選択を迫られたとき、どのように意思決定を行えばよいのか。この記事では、"Even Over Statement"というメソッドを使って、チームの戦略を決定する方法を紹介する。 + +## [Div divisiveness](https://www.scottohara.me/blog/2022/01/20/divisive.html) +#### Divとアクセシビリティ + +`
`は、HTMLで最も用途が広く使用されている要素である。それ自体はなにも表さないが、開発者はCSS、JavaScript、ARIAのために使用する。この汎用性により、`
`は様々な目的に使用するこができるが、誤用されてしまう可能性も高い。この記事では`
`の役割について解説し、またどのようなユースケースで使用できるかについて紹介していく。 + +## [Stop brainstorming](https://matthewstrom.com/writing/stop-brainstorming/) + +ブレーンストーミングは会議でアイディアを出すための人気の手法だが、Matthew氏はそれをおすすめしていない。この記事では、ブレーンストーミングが機能しない理由、心理的安全性の重要性などについて解説していく。 + + +## [Agile is eating designs young; or Yet Another Reason why embedding designers doesnt work Peter Merholz](https://www.petermerholz.com/blog/agile-is-eating-designs-young-or-yet-another-reason-why-embedding-designers-doesnt-work/) + +アジャイル開発において、デザイナー、特にジュニアデザイナーがチームに参加する場合、デザインに関する非常に広い領域を担当することになり、それを処理することができないということが発生する。この問題に対処するために、複数のデザイナーでチームを組み、複数のプロダクトチームに参加して作業を行っていくことで解決するアイディアを紹介している。 + +## In Brief + +- **[Getting Started With CSS Cascade Layers](https://www.smashingmagazine.com/2022/01/introduction-css-cascade-layers/)**: CSSのカスケードレイヤーの仕様についての紹介 + +- **[Frontend Web Performance: The Essentials [0]](https://medium.com/@matthew.costello/frontend-web-performance-the-essentials-0-61fea500b180)**: フロントエンドのパフォーマンスについて、ブラウザのレンダリングサイクル、ハードウェアアクセラレーション、コンポジットレイヤー、関連ツールなどについて紹介する + +- **[Stop paying tech debts start maintaining code](https://blog.testdouble.com/posts/2022-01-20-stop-paying-debts-start-maintaining-code/)**: 技術的負債の返済という言葉を使うことをやめ、ソフトウェア保守という言葉を使いはじめることをおすすめしている。 + +- **[Writing Better CSS](https://www.aleksandrhovhannisyan.com/blog/writing-better-css/)**: CSSの最新の手法でより優れたCSSを記述するための方法をいくつか紹介する + +- **[Publishing and consuming ECMAScript modules via packages the big picture](https://2ality.com/2022/01/esm-specifiers.html)**: ECMAScriptモジュールについてその作成方法と使い方 diff --git a/11ty/posts/2022-03-02-v352.md b/11ty/posts/2022-03-02-v352.md new file mode 100644 index 0000000..0bb65fd --- /dev/null +++ b/11ty/posts/2022-03-02-v352.md @@ -0,0 +1,60 @@ +--- +title: Vol.352 +date: '2022-03-02' +desc: Webコンポーネントのライフサイクルフック、初心者に優しいコードベースの構築方法、Webのメタファーの歴史、ほか計10リンク +permalink: /posts/352/ +--- + +## [Context-Aware Web Components Are Easier Than You Think](https://css-tricks.com/context-aware-web-components/) +#### Webコンポーネントのライフサイクルフック + +Webコンポーネントはページに追加、またはページから削除されるたびにJavaScriptの関数が呼び出される。この記事では、このライフサイクルフックに関して詳しく説明する。 + +- connectedCallback：カスタム要素が要素にアタッチされたときに呼び出される +- disconnectedCallback：要素がドキュメントから削除されたときに呼び出される +- adoptedCallback：要素が新しいドキュメントに追加されたときに呼び出される +- attributeChangedCallback：属性が監視されている限り、属性が変更、追加、または削除されたときに呼び出される + +## [Building a newbie-friendly codebase](https://doist.dev/posts/building-a-newbie-friendly-codebase) +#### 初心者に優しいコードベースの構築方法 + +ソフトウェアエンジニアリングの仕事がますますリモートで非同期になるにつれて、同僚と同期的なコミュニケーションをする機会が減っている。初心者が独立して自走できるようになるためには、コードベースを初心者に優しいものにすることが重要である。この記事では、誰もが簡単に理解し、維持できるコードベースを構築をするための簡単なヒントを紹介していく。 + +- すべてを規則に沿って書く +- データのフローを一方通行にする +- マジックナンバーを使わない +- データ設計をする +- テストを書く +- コメントも良いが、良いコードを書くことを心がける +- 頭文字語を控える +- リファクタリングの機会を伺う + +## [Metaphors We Web By](https://maggieappleton.com/metaphors-web) +#### Webのメタファーの歴史 + +Webは"紙の文書"のメタファーに始まり、今は"スペース"というメタファーの側面を持ち合わせている。Webが歴史的経緯により様々なレイヤーが重なり合ってできていることなど、Webの歴史について触れながら、どういった変遷を遂げてきたのかについて紹介している。 + + +## [More to give than just the div: semantics and how to get them right](https://hiddedevries.nl/en/blog/2022-01-23-more-to-give-than-just-the-div-semantics-and-how-to-get-them-right) + +Webのセマンティクスについて、セマンティクスとは何か、そしてそれらを正しくする方法について紹介する。 + +- HTML標準知り、調べて使用することが重要 +- Webをセマンティクスにすることにはメリットが多くある +- CSS、ARIA、アクセシビリティがセマンティクス、エンドユーザーにどのように影響するか注意する + +## [know how your org works (or how to become a more effective engineer)](https://copyconstruct.medium.com/know-how-your-org-works-or-how-to-become-a-more-effective-engineer-1a3287d1f58d) + +仕事で成功するためにできる最も効果的なことの1つは、組織がどのように機能しているかを理解することである。この記事ではその重要性とそれをどのように培うかについて言及している。 + +## In Brief + +- **[A preview of CSS Container Queries trivago tech blog](https://tech.trivago.com/post/2022-02-07-css-container-queries/)**: CSSコンテナクエリについてブラウザのサポート状況とその仕様について解説する + +- **[Design system versioning: single library or individual components?](https://bradfrost.com/blog/post/design-system-versioning-single-library-or-individual-components/)**: デザインシステムのバージョン管理について、ライブラリ全体と個々のコンポーネントの観点で、それぞれのバージョン管理について考察する + +- **[How to Create a UX-Vision Statement](https://www.nngroup.com/articles/ux-vision-statements/)**: UXビジョンステートメントを作成する方法を紹介する + +- **[Fancy CSS Borders Using Masks](https://css-tricks.com/css-borders-using-masks/)**: CSSのマスク機能を利用して複雑なボーダーを実装する + +- **[Creating a Schema-Based Form System](https://www.taniarascia.com/schema-based-form-system/)**: Formikを利用したフォームシステムを実装する方法 diff --git a/11ty/posts/2022-03-09-v353.md b/11ty/posts/2022-03-09-v353.md new file mode 100644 index 0000000..0a12bbd --- /dev/null +++ b/11ty/posts/2022-03-09-v353.md @@ -0,0 +1,54 @@ +--- +title: Vol.353 +date: '2022-03-09' +desc: Webコンポーネント入門、フロントエンド開発の難しさ、OOUXとはなにか、ほか計10リンク +permalink: /posts/353/ +--- + + +## [A Web Components Primer](https://www.abeautifulsite.net/posts/a-web-components-primer/) +#### Webコンポーネント入門 + +Webコンポーネントについてその使用方法について、シンプルに解説している。また、よくある質問への解答も提供し、既存のWebサイトや、Reactなどのフレームワークを使用した環境で、どのようにそれを取り入れていくことができるのかを解説している。 + + +## [The Hard Things About Front-End Development](https://alexkondov.com/the-hard-things-about-front-end-development/) +#### フロントエンド開発の難しさ + +昨今のフロントエンド開発はかつてないほど複雑になっている。その複雑さは何に起因なのか。 + +1. コードの実行環境を制御できない +2. 複雑なツーリング +3. ベストプラクティスとデザインパターンの存在 +4. デザインを考慮したプログラミング + +## [What is object oriented UX?](https://uxdesign.cc/what-is-object-oriented-ux-19e14c435d18) +#### OOUXとはなにか + +この記事では、OOUXの考えについて紹介している。OOUXでは、コアコンテンツをオブジェクトとして考える。OOUXを使用することで、再利用によって時間が節約できること、複雑さを抑えられること、それぞれの関係を視覚化できること、といったメリットがある。 + +1. オブジェクトを抽出する +2. コアコンテンツを定義する +3. 複数のオブジェクトにまたがるオブジェクトを追加する +4. アイテムの順序を並び替える + +## [Naming design tokens](https://uxdesign.cc/naming-design-tokens-9454818ed7cb) + +デザイントークンの命名についてのアドバイス。体系的でかつ、将来を見据えた方法でデザイントークンに名前を付ける方法を紹介している。 + + +## [Building an adaptive favicon](https://web.dev/building-an-adaptive-favicon/) + +SVGを使用したファビコンの作成方法について紹介する。ファビコンは従来、.icoファイルタイプでの設定が行われていたが、最近ではベクトル形式であるSVGの使用を許可している。SVGの特徴を生かしたファビコンを作成するには。 + +## In Brief + +- **[CSS { In Real Life } | Aspect Ratio is Great](https://css-irl.info/aspect-ratio-is-great/)**: CSSの`aspect-ratio`のプロパティについて紹介する + +- **[Sorting in JavaScript](https://blog.fildon.me/sorting-in-javascript)**: JavaScriptにおけるソートのテクニックを紹介する + +- **[Immutability isn't free | Swizec Teller](https://swizec.com/blog/immutability-isnt-free)**: javaScriptのAPIのパフォーマンスを改善した話 + +- **[How to Optimize React Hooks](https://blog.bitsrc.io/react-hooks-optimisation-8da478ded16d)**: React Hooksを効率的に利用する方法を紹介する + +- **[Replace JavaScript Dialogs With New HTML Dialog](https://css-tricks.com/replace-javascript-dialogs-html-dialog-element/)**: JavaScriptのalert, confirm, promptをHTMLのdialog要素に置き換えるための実装例を紹介する diff --git a/11ty/posts/2022-03-16-v354.md b/11ty/posts/2022-03-16-v354.md new file mode 100644 index 0000000..0c2be3d --- /dev/null +++ b/11ty/posts/2022-03-16-v354.md @@ -0,0 +1,42 @@ +--- +title: Vol.354 +date: '2022-03-23' +desc: Webブラウザに対するブログを書くこと、関数とデザインシステムの未来、Tupleのペアプログラミングガイド、ほか計10リンク +permalink: /posts/354/ +--- + +## [Before I go: When it comes to complaining about web browsers](https://daverupert.com/2022/02/complaining-about-web-browsers/) +#### Webブラウザに対するブログを書くこと + +Dave氏はブラウザ、ブラウザ開発にフィードバックする効果的な方法として、ブログ記事として投稿することを勧めている。これは、Twitterなどで書き込むよりも非常に大きな意味を持ち影響力があると説明している。この記事では、その重要性とそれを行うための、具体的なユーザーストーリーへの落とし方や、その他の効果的な活動について紹介している。 + +## [Functions and the future of design systems](https://matthewstrom.com/writing/functions-in-design-systems/) +#### 関数とデザインシステムの未来 + +通常デザインシステムは辞書のように機能させることが多い。しかしながら、この辞書のように機能するデザインシステムはそれが大きく複雑になるにつれ、保守が難しくなってくるという側面を持つ。この問題に対応するために、関数の考えを取り入れることを勧めている。この記事では、そのアイディアについて紹介し、どのように問題が解決されるか具体的な例を交えながら紹介している。 + +## [Tuple's Pair Programming Guide](https://tuple.app/pair-programming-guide/) +#### Tupleのペアプログラミングガイド + +この記事では、ペアプログラミングについてどのような利点があるのか、そしてどのように進めればよいかを分かりやすく解説している。この記事を公開している[Tuple](https://tuple.app/)ではリモートのペアプログラミングをサポートするアプリを提供している。 + +## [Putting Ideas into Words](http://paulgraham.com/words.html) + +アイディアを頭の中に留めるだけでなく、言葉にすることの重要性について。アイディアを言葉にすることは、アイディアをテストにかけるようなことである。言葉にしないアイディアが具体的に形成されていくことはなく、実現することもない。アイディアを言葉にすることは、それを実現するための非常に重要なステップであるとアドバイスしている。 + +## [Hello CSS Cascade Layers - Ahmad Shadeed](https://ishadeed.com/article/cascade-layers/) + +CSSのカスケードレイヤーについてその実装例を紹介し、どのように便利なのかを解説していく。 + + +## In Brief + +- **[A UX case study on Gmail](https://builtformars.com/case-studies/gmail)**: Gmailで実装されているUXがどのように考慮されているか紹介する + +- **[How to Fix Your Security Vulnerabilities with NPM Override](https://medium.com/microsoftazure/how-to-fix-your-security-vulnerabilities-with-npm-override-c4b5be0ab4f6)**: NPMのoverrideに関する脆弱性をどのように対処するかを解説 + +- **[Headless components in React and why I stopped using a UI library for our design system](https://medium.com/@nirbenyair/headless-components-in-react-and-why-i-stopped-using-ui-libraries-a8208197c268)**: Headless UIの概念とそれがどのように有効に働くかを紹介している + +- **[Writing Logic in CSS i am schulz](https://iamschulz.com/writing-logic-in-css/)**: CSSを用いてロジックを実装するための方法を紹介している + +- **[Evaluate Interface Learnability with Cognitive Walkthroughs](https://www.nngroup.com/articles/cognitive-walkthroughs/)**: ユーザーの観点からシステムの学習可能性を評価するための方法として認知ウォークスルーという手法を紹介する diff --git a/11ty/posts/2022-03-30-v355.md b/11ty/posts/2022-03-30-v355.md new file mode 100644 index 0000000..6a1b1fb --- /dev/null +++ b/11ty/posts/2022-03-30-v355.md @@ -0,0 +1,47 @@ +--- +title: Vol.355 +date: '2022-03-30' +desc: 15分の修正と30日の修正、色とデザインの科学、ECMAScript仕様の読み方、ほか計10リンク +permalink: /posts/355/ +--- + + +## [The 15 minute fix vs the 30 day fix](https://daverupert.com/2022/03/15-minute-fix-vs-30-day-fix/) +#### 15分の修正と30日の修正 + +ソフトウェア開発において、とある変更を加えることに対し"15分で終わらせる方法"と"30日かけて行う方法"の2つが存在するとしたら、どちらが良いのか。15分の修正はすぐに終えることができるが、積み重なった結果どうなるのか。30日かけて行う修正は、注意深く実装することができるが、影響範囲を広げた結果その後のメンテナンス、動作確認を行うコストが発生する。こういったトレードオフに対しどのように考えていけばよいか、考察していく。 + + +## [The Science of Color & Design](https://material.io/blog/science-of-color-design) +#### 色とデザインの科学 + +Materialデザインは色の科学を利用して、これまでになく簡単でかつ表現力豊かなデザインを実現した。この記事では、それがどのように設計されて実装されていったのかを詳しく解説する。 + + +## [How to Read the ECMAScript Specification](https://timothygu.me/es-howto/) +#### ECMAScript仕様の読み方 + +ECMAScript言語仕様は、JavaScriptがどのように機能するかを学ぶための優れたリソースである。しかし巨大なテキストであるがゆえ、最初は混乱してしまうだろう。このドキュメントでは、ECMAScript言語仕様を読み始めるのを簡単にすることを目的とし、解説を行っている。 + + +## [Things the CSS Spec Folks Got Right](https://blog.jim-nielsen.com/2022/things-the-css-spec-folks-got-right/) + +CSSの仕様についてもコラム。`font-weight`の仕様が優れている点、CSSインポートはJavaScriptのインポートよりも早期に実装されていた点、font-familyなどについて言及している。 + + +## [A Complete Guide to CSS Cascade Layers](https://css-tricks.com/css-cascade-layers/) + +CSSのカスケードレイヤーについて、かなり詳細に解説している。 + + +## In Brief + +- **[What Web Frameworks Solve And How To Do Without Them (Part 1)](https://www.smashingmagazine.com/2022/01/web-frameworks-guide-part1/)**: Webフレームワークが解決するものとそれらなしで行う方法について紹介する、この記事では特に昨今使用されているフロントエンドのWebフレームワークについてサンプルを交えながらその違いについて言及していく + +- **[Keep actual effort and outcome visible Help your organization focus on successful outcomes](https://www.jpattonassociates.com/keep-actual-effort-and-outcome-visible/)**: アジャイルプロセスにおいて、その過程での努力と成果を可視化するためにどのようにすればよいのか + +- **[First look: adding type annotations to JavaScript](https://2ality.com/2022/03/type-annotations-first-look.html)**: JavaScriptへの型アノテーションの仕様について紹介する + +- **[Structuring your Storybook](https://storybook.js.org/blog/structuring-your-storybook/)**: Storybookをどのように構造化するか + +- **[CSS Custom Highlight API: A First Look](https://css-tricks.com/css-custom-highlight-api-early-loo/)**: 新しい仕様である、`CSS Custom Highlight API` について紹介している diff --git a/11ty/posts/2022-04-06-v356.md b/11ty/posts/2022-04-06-v356.md new file mode 100644 index 0000000..bcae49c --- /dev/null +++ b/11ty/posts/2022-04-06-v356.md @@ -0,0 +1,48 @@ +--- +title: Vol.356 +date: '2022-04-06' +desc: WhenかIfか、宣言的なJavaScript API、なぜコンパイラは自動でエラーを修正しないのか、ほか計10リンク +permalink: /posts/356/ +--- + + +## [When or If](https://meyerweb.com/eric/thoughts/2022/03/14/if-or-when/) +#### WhenかIfか + +CSSWGでは条件付き構造にどのような命名をするかについて議論している。例えば、`@if`は直感的な条件分岐を示すアイディアではあるが、現状広く使われているSassのシンタックスと衝突が発生してしまう。その代わりに`@when`を採用するアイディアがあるが、Sassが広く使われているからという理由でCSSの仕様策定に影響させるべきなのか。この問題に対してEric氏の考えを吐露している。 + +## [When should there be a declarative version of a JavaScript API?](https://adactio.com/journal/18903) +#### 宣言的なJavaScript API + +`button type="share"`や`button type="fullscreen"`といったHTMLで実装できる宣言的なJavaScript APIの有用性について説く。 + + +## [Why Compilers Dont Autocorrect Obvious Parse Errors](https://chelseatroy.com/2022/03/11/why-compilers-dont-autocorrect-obvious-parse-errors/) +#### なぜコンパイラは自動でエラーを修正しないのか + +なぜコンパイラーが解析エラーを自動で修正しないのかについて考察する。JavaScriptはコンパイラが自動でエラーを修正して動作するような挙動をすることで、プログラマが意図しない動作を引き起こす可能性があることを例に挙げ、このリスクを対応するためには問題が何であるかをプログラマの判断に任せ、コンパイラはエラーを特定することのみを行うのが良いと結論づけている。 + +## [Translating User Research Into Design](https://uxtools.co/blog/translating-user-research-to-design/) + +ユーザーリサーチからデザインを構築する方法について。 + +- リサーチの準備 +- 合体し要約する +- チームと共有して調整する +- 探索してテストする + +## [An incoherent rant about design systems](https://www.robinrendle.com/notes/an-incoherent-rant-about-design-systems/) + +デザインシステムをメンテナンスしていくことの難しさについて。実装されたフロントエンドが真実であり、それがFigmaやStorybookと同期することの難しさを指摘している。 + +## In Brief + +- **[Aligning Content In Different Wrappers - Ahmad Shadeed](https://ishadeed.com/article/aligning-content-different-wrappers/)**: コンテンツを整列させるためのCSSのテクニックを紹介している + +- **[Set Non-Goals and Build a Product Strategy Stack](https://review.firstround.com/set-non-goals-and-build-a-product-strategy-stack-lessons-for-product-leaders)**: プロダクト戦略スタックを構築する5つのコンポーネントを紹介する + +- **[6 Mistakes When Crafting Interview Questions](https://www.nngroup.com/articles/interview-questions-mistakes/)**: ユーザーインタビューで行う質問を改善するための6つのポイントを紹介する + +- **[Optimizing SVG Patterns to Their Smallest Size](https://css-tricks.com/optimizing-svg-patterns/)**: SVGのパターン画像を最適化するための方法を紹介 + +- **[Update Node Dependencies Automatically Selectively or Incrementally](https://elijahmanor.com/byte/update-node-deps)**: Nodeの依存関係をどのようにアップデートしていけばよいかを解説する diff --git a/11ty/posts/2022-04-13-v357.md b/11ty/posts/2022-04-13-v357.md new file mode 100644 index 0000000..9968a48 --- /dev/null +++ b/11ty/posts/2022-04-13-v357.md @@ -0,0 +1,48 @@ +--- +title: Vol.357 +date: '2022-04-13' +desc: Google、Twitter、Spotifyがドキュメントの文化をどのように構築したか、20年の経験で学んだプログラミングの原則、ダイアログ要素の魅力、ほか計10リンク +permalink: /posts/357/ +--- + + +## [How Google Twitter and Spotify built a culture of documentation](https://medium.com/doctave/how-google-twitter-and-spotify-built-a-culture-of-documentation-47a1ff22911) +#### Google、Twitter、Spotifyがドキュメントの文化をどのように構築したか + +ドキュメントの作成とメンテナンスはソフトウェア開発において非常に重要な習慣となる。この記事では、Google, Twitter, Spotifyの3つの企業がどのようにドキュメントの文化を構築しているかを紹介する。 + +## [My guiding principles after 20 years of programming](https://alexewerlof.medium.com/my-guiding-principles-after-20-years-of-programming-a087dc55596c) +#### 20年の経験で学んだプログラミングの原則 + +Alex氏は20年のプログラミングキャリアを持っている。その長年にわたって蓄積されてきたソフトウェア開発における原則を紹介している。 + +- ツールと格闘せず、ネイティブの機能を利用する +- 同僚や将来の自分のためにコードを書く +- 優れたソフトウェアはコミュニケーションとコラボレーションが生み出す + +## [A look at the dialog element's super powers | Stefan Judis Web Development](https://www.stefanjudis.com/blog/a-look-at-the-dialog-elements-super-powers/) +#### ダイアログ要素の魅力 + +2022年において``要素はモダンなブラウザで使用することが可能となっている。この記事では、``要素を利用することでいかにシンプルでアクセシブルなモーダルを実装できるようになっているかを解説する。 + +## [Confirmation Bias in UX](https://www.nngroup.com/articles/confirmation-bias-ux/) + +確証バイアスについて、それがUXににおいてどのように影響するか。具体的には、確証バイアスはユーザーリサーチにおける質問の仕方に影響することを紹介する。そのバイアスを払拭し、より良い質問をするためにはどうすればよいかを解説する。 + + +## [In Defense of Sass | Stephanie Eckles](https://thinkdobecreate.com/articles/in-defense-of-sass/) + +CSSに含まれている優れた機能を使うにしても、Sassを使い続ける理由を挙げて紹介している。 + + +## In Brief + +- **[Remix - Full Context Review](https://www.fullcontextdevelopment.com/blog/remix-full-context-review)**: Remixに関する詳細な解説 + +- **[Delightful React File/Directory Structure](https://www.joshwcomeau.com/react/file-structure/)**: Reactのナイスなファイルストラクチャ案を紹介する + +- **[What Makes You a Professional Web Developer Jens Oliver Meiert](https://meiert.com/en/blog/professional-web-developer/)**: Web開発者としてプロフェッショナルな仕事をするために必要なスキルや考え方について語る + +- **[Building a loading bar component](https://web.dev/building-a-loading-bar-component/)**: ``要素を使用したローディングバーのコンポーネントの実装アイディアについて解説する + +- **[Those HTML Attributes You Never Use](https://www.smashingmagazine.com/2022/03/html-attributes-you-never-use/)**: あまり知られていないHTMLの属性について紹介をしていく diff --git a/11ty/posts/2022-04-20-v358.md b/11ty/posts/2022-04-20-v358.md new file mode 100644 index 0000000..984f5d7 --- /dev/null +++ b/11ty/posts/2022-04-20-v358.md @@ -0,0 +1,41 @@ +--- +title: Vol.358 +date: '2022-04-20' +desc: レイアウトアルゴリズムを理解する、モダンなimgタグの使い方、アクセシビリティドキュメントの作り方、ほか計10リンク +permalink: /posts/358/ +--- + +## [Understanding Layout Algorithms](https://www.joshwcomeau.com/css/understanding-layout-algorithms/) +#### レイアウトアルゴリズムを理解する + +CSSに対して本当に理解を深めるならば、プロパティがそれぞれ何をしているかを理解するだけでは十分ではなく、レイアウトのアルゴリズムを理解する必要がある。この記事を読むことで、レイアウトアルゴリズムを深く学ぶことができ、レイアウトがなぜそのようになされるのかを理解するのを助けてくれる。 + +## [Picture perfect images with the modern element](https://stackoverflow.blog/2022/03/28/picture-perfect-images-with-the-modern-element/) +#### モダンなimgタグの使い方 + +``タグの要素はシンプルに画像を表示することができるが、モダンなWebでは、より最適な画像の読み込み方法を適用させることができる。この記事では、imgタグを使用する際にどのような点に考慮するべきか、どのような設定をするのが最適なのか紹介する。 + +## [A Designers Guide to Documenting Accessibility & User Interactions by Stéphanie Walter](https://stephaniewalter.design/blog/a-designers-guide-to-documenting-accessibility-user-interactions/) +#### アクセシビリティドキュメントの作り方 + +アクセシビリティとユーザーインタラクションをドキュメント化するために役立つアイディアを紹介している、アクセシビリティドキュメントをどういったタイミングでどのように作成していけばよいのか、具体的に何をドキュメント化していけばよいのかについて解説する。 + +## [Design beyond deliverables](https://uxdesign.cc/design-beyond-deliverables-993700a4a7c7) + +プロジェクトの初期段階のデザイン作業に置いて、有意義なコミュニケーションをすること、そしてより良いフィードバックを得ることは非常に重要である。抽象的なドキュメントの視覚化することで、よりコミュニケーションが明確になるため、どのようなデザインアウトプットを作るかを考えること、それに伴って、どのような点に気をつけることが必要かを解説する。 + +## [HTML Concepts: Commands and Facets Jens Oliver Meiert](https://meiert.com/en/blog/html-commands-and-facets/) + +HTMLのコマンドとファセットの概念について紹介する。 + +## In Brief + +- **[Design Brainstorming: From ideation to creation](https://www.sketch.com/blog/2022/03/25/design-brainstorming/)**: さまざまな種類のデザインブレインストーミング手法と、それらがどのように役立つかについて学ぶ + +- **[Becoming a Figma ninja with base components](https://uxdesign.cc/becoming-a-figma-ninja-with-base-components-102451f138ef)**: FigmaにおけるBase Componentの概念について紹介する + +- **[Data Tables: Four Major User Tasks](https://www.nngroup.com/articles/data-tables/)**: データテーブルの4大ユーザタスクについて紹介し、どのようにサポートすべきかのヒントを与えてくれる + +- **[A Built-in Test Runner Is Coming to Node and Why You Should Care](https://fusebit.io/blog/node-testing-comes-to-core/)**: Node18から利用できる `node:test` について、それが実装された背景や、実際の使い方について + +- **[How to Use CSS Math Functions - Stack Diary](https://stackdiary.com/css-math-functions/)**: CSSのMath関数について詳細に解説する diff --git a/11ty/posts/2022-04-27-v359.md b/11ty/posts/2022-04-27-v359.md new file mode 100644 index 0000000..83e4828 --- /dev/null +++ b/11ty/posts/2022-04-27-v359.md @@ -0,0 +1,40 @@ +--- +title: Vol.359 +date: '2022-04-27' +desc: プログレッシブエンハンスメントを適用したフォームの実装、LCPを最適化する、質問のスキル身につけるためには、ほか計10リンク +permalink: /posts/359/ +--- +## [Make Beautifully Resilient Apps With Progressive Enhancement](https://austingil.com/resilient-applications-progressive-enhancement/) +#### プログレッシブエンハンスメントを適用したフォームの実装 + +[GOV.ukの調査](https://gds.blog.gov.uk/2013/10/21/how-many-people-are-missing-out-on-javascript-enhancement/)によると、訪問したユーザーの1%はJavaScriptでエラーが発生していると報告されている。プログレッシブエンハンスメントの考え方を適用することで、その1%を救うことができたとき、ビジネスへのインパクトは非常に大きい。この記事では、具体的なコードを交えながら、プログレッシブエンハンスメントを適用したフォームの実装を紹介する。 + +## [Optimising Largest Contentful Paint](https://csswizardry.com/2022/03/optimising-largest-contentful-paint/) +#### LCPを最適化する + +Core Web Vitalsの一つである`LCP`をどのように最適化していけばよいかを解説する。この投稿では、いくつかのポイントを紹介した後に、興味深いトリックと最適化について解説する。また、いくつかの落とし穴とバグを紹介している。 + +## [Master your questioning skills](http://muratbuffalo.blogspot.com/2018/12/master-your-questioning-skills.html) +#### 質問のスキル身につけるためには + +Murat氏がブログに設けている MAD questionについての考察。この問いかけがどのようにワークしたのか、それから学んだこととは何か、紹介していく。 + +## [Tao of Node - Design Architecture & Best Practices](https://alexkondov.com/tao-of-node/) + +Node.jsに関するデザイン、アーキテクチャのベストプラクティスを紹介する。 + +## [Refactor Organisation](https://medium.com/bbc-design-engineering/refactor-organisation-80e4e171d922) + +組織をリファクタリングするというアイディアについて、BBCのWebサイトを再構築するというプロジェクトでそれがどのようにワークしたかを解説する。 + +## In Brief + +- **[The case for adding validation state to your design tokens](https://ericwbailey.design/writing/the-case-for-adding-validation-state-to-your-design-tokens/)**: バリデーションのステートに関するデザイントークンを実装するための例を紹介する + +- **[What Developers Need from UX Research](https://uxtools.co/blog/what-developers-need-from-ux-research/)**: エンジニアがユーザーリサーチにどのように関わっていけばよいかについて解説する + +- **[Use Git tactically](https://stackoverflow.blog/2022/04/06/use-git-tactically/)**: Gitを戦術的に活用するためのアイディアを紹介している + +- **[Optimising Core Web Vitals on SPAs](https://simonhearne.com/2022/core-web-vitals-on-spas/)**: SPAにおいてCore Web Vitalsを最適化する方法について紹介する + +- **[EightShapes Contrast Grid](https://contrast-grid.eightshapes.com/?background-colors=&es-color-form__show-contrast=aa&es-color-form__show-contrast=aa18&es-color-form__show-contrast=aaa&es-color-form__show-contrast=dnp&es-color-form__tile-size=compact&foreground-colors=%23FFFFFF%2C+White%0D%0A%23F2F2F2%0D%0A%23DDDDDD%0D%0A%23CCCCCC%0D%0A%23888888%0D%0A%23404040%2C+Charcoal%0D%0A%23000000%2C+Black%0D%0A%232F78C5%2C+Effective+on+Extremes%0D%0A%230F60B6%2C+Effective+on+Lights%0D%0A%23398EEA%2C+Ineffective%0D%0A&version=1.1.0)**: 背景色と文字色のコントラストをいくつも簡単にテストできるツール diff --git a/11ty/posts/2022-05-11-v360.md b/11ty/posts/2022-05-11-v360.md new file mode 100644 index 0000000..14d8b4a --- /dev/null +++ b/11ty/posts/2022-05-11-v360.md @@ -0,0 +1,52 @@ +--- +title: Vol.360 +date: '2022-05-11' +desc: コードコメントを書くためのベストプラクティス、連続体としてSOLIDの原則を適用させる、デザインシステムの価値、ほか計10リンク +permalink: /posts/360/ +--- + +## [Best practices for writing code comments](https://stackoverflow.blog/2021/12/23/best-practices-for-writing-code-comments/) +#### コードコメントを書くためのベストプラクティス + +コードコメントを書かないことが美しいと考えることもできるが、まったくコメントを書かないという極端なケースが適切なケースは少ないだろう。この記事では、コードコメントを書く際のベストプラクティスを紹介する。 + +- ルール1：コメントはコードを複製してはならない +- ルール2：不明瞭なコードをコメントで解説しない +- ルール3：明確なコメントを書くことができない場合は、コードに問題があると考える +- ルール4：コメントで混乱を引き起こさないようにする +- ルール5：コメントを用いて、単純で省略したくなるようなコードを解説する +- ルール6：コピーされたコードの元のソースへのリンクを記す +- ルール7：外部参照へのリンクを記述する +- ルール8：バグを修正するときにコメントを追加する +- ルール9：コメントを使用してTODOを記す + +## [Evolving Software: SOLID principles as a continuum](https://kislayverma.com/programming/evolving-software-solid-principles-as-a-continuum/) +#### 連続体としてSOLIDの原則を適用させる + +SOLIDの原則の5つのルールはそれぞれが独立したルールではなく、それぞれが関連したものとして考えることで理解が深まる。この記事では、擬似コードを用いてSOLIDの原則をどのように関連したものとして考えることができるのかについて解説し、この原則の理解を手助けしてくれる。 + + +## [Design Systems Aren't Cheap](https://www.abeautifulsite.net/posts/design-systems-arent-cheap/) +#### デザインシステムの価値 + +デザインシステムの価値はどれほどあるのか。例えば、Reactを使ったコンポーネントを揃えた場合、このReactフレームワークを変更する日が訪れたとき、大きなコストを払うことになってしまうだろう。プラットフォームはフレームワークよりも寿命が長いことを鑑みると、デザインシステムを利用してアクセシブルで十分にテストされた、有用なコンポーネントを揃えることが、どれだけそういったコストの排除に繋がるのかは自明である。 + +## [Design is about facilitation not creation](https://uxdesign.cc/design-is-about-facilitation-not-creation-c268e76ce1fd) + +デザインとは創造をするものではなく、相互作用を促進させること、そして現実へのアウトプットを手助けすることである。 デザイナがすべきことは、アウトカムを現実にするために、意思決定やを促進することであり、アーティファクトの作成は副産物に過ぎない。 + +## [The euclidean design model](https://www.alexbuenodesign.com/blog/euclidean_design_model) + +Atomicデザインに対して、ユークリッド空間の考えを適用して拡張をするアイディアを紹介している。 + +## In Brief + +- **[Atomic 2.0](https://medium.com/@hannah.heinson/atomic-2-0-d94e5601200c)**: Atomicデザインの問題点を改善したAtomic 2.0のアイディアを紹介する + +- **[Accessible Cards](https://kittygiraudel.com/2022/04/02/accessible-cards/)**: アクセシビリティを考慮したカードデザインの実装を紹介する + +- **[14 Linting Rules To Help You Write Asynchronous Code in JavaScript](https://maximorlov.com/linting-rules-for-asynchronous-code-in-javascript/)**: JavaScriptの非同期実装に関するLintのルールを紹介する + +- **[Declarative design](https://adactio.com/journal/18982)**: 命令的なCSSと宣言的なCSSの2つの考え方についての考察をする + +- **[Building an Interactive Sparkline Graph with D3 - Codrops](https://tympanus.net/codrops/2022/03/29/building-an-interactive-sparkline-graph-with-d3/)**: D3.jsを利用してスパークライングラフを実装するアイディアを紹介する diff --git a/11ty/posts/2022-05-18-v361.md b/11ty/posts/2022-05-18-v361.md new file mode 100644 index 0000000..f2de132 --- /dev/null +++ b/11ty/posts/2022-05-18-v361.md @@ -0,0 +1,48 @@ +--- +title: Vol.361 +date: '2022-05-18' +desc: コードリーディングを用いて素晴らしい開発者を見つける方法、ソフトウェアアーキテクチャに関する5つのアドバイス、Webコンポーネントの7つのTips、ほか計10リンク +permalink: /posts/361/ +--- + +## [How to Freaking Find Great Developers By Having Them Read Code](https://freakingrectangle.wordpress.com/2022/04/15/how-to-freaking-hire-great-developers/) +#### コードリーディングを用いて素晴らしい開発者を見つける方法 + +コーディング力の高いエンジニアを探すための方法を紹介。エンジニアの面接の方法としてコーディングインタビューなど、候補者にコードを書いてもらい、それを評価することで検証する方法がよくとられている。この記事では、それよりも良い方法として、候補者に既存のコードを読んでもらい、それがどのように機能するかを話しあう、という方法をおすすめしている。 + +## [Five Koans of Software Architecture](https://bellmar.medium.com/five-koans-of-software-architecture-f9f7305598c2) +#### ソフトウェアアーキテクチャに関する5つのアドバイス + +ソフトウェアアーキテクチャに関する5つのアドバイスを紹介している + +- シンプルで素朴な設計から始める +- 行き過ぎた最適化を行わない +- グラフデータベースは慎重に検討する +- コアとなるロジックを依存関係に持たせない +- アーキテクチャをシンプルに保ち続ける + +## [7 Web Component Tricks](https://daverupert.com/2022/04/7-web-component-tricks/) +#### Webコンポーネントの7つのTips + +Dave氏がWebコンポーネントの学習コースを通して学んだ、Webコンポーネントに関する7つのTipsを紹介している。 + + +## [Best Practice is not a reason to do something](https://chelseatroy.com/2022/04/18/best-practice-is-not-a-reason-to-do-something/) + +盲目的に、ベストプラクティスだからという理由で選択を行うことの問題点について解説する。 エンジニアは、「ベストプラクティス」が実際に正しいプラクティスとなる場合のコンテキストを知る必要があり、少なくとも、自分のコンテキストがその1つであるかどうかを判断すべきであると話す。 + +## [CSS :has( ) A Parent Selector Now Matthias Ott User Experience Designer](https://matthiasott.com/notes/css-has-a-parent-selector-now) + +CSSで親要素を指定できる`:has()`関数について、それがどのように有用なものであるか、また、それがどのように使うことができるのかについての解説を行う。ブラウザのサポートはまだ時間がかかるが、`@supports`クエリを使って条件分岐を行うことも可能であることを紹介する。 + +## In Brief + +- **[Deep dive into the CSS :where() function](https://blog.logrocket.com/deep-dive-css-where-function/)**: CSSの`:where()`についてその特徴と代表的なユースケースを紹介する + +- **[4 reasons to avoid using npm link](https://hirok.io/posts/avoid-npm-link)**: `npm link`が想定外の挙動を引き起こすことと、その対応方法について解説する + +- **[Web Components as Progressive Enhancement](https://cloudfour.com/thinks/web-components-as-progressive-enhancement/)**: 既存の要素をWeb Componentに置き換える際のテクニックを紹介する + +- **[Maximize Your Front-End Test Locators](https://css-tricks.com/front-end-test-element-locators/)**: フロントエンドのテストを実装する際に、どのように要素を特定することができるか、その方法とその良し悪しを解説する + +- **[Boost Resource Loading With fetchpriority a New Priority Hint](https://www.smashingmagazine.com/2022/04/boost-resource-loading-new-priority-hint-fetchpriority/)**: `fetchpriority`属性を使用して、ダウンロードの優先順位を指定するテクニックを紹介する diff --git a/11ty/posts/2022-05-25-v362.md b/11ty/posts/2022-05-25-v362.md new file mode 100644 index 0000000..699516e --- /dev/null +++ b/11ty/posts/2022-05-25-v362.md @@ -0,0 +1,44 @@ +--- +title: Vol.362 +date: '2022-05-25' +desc: ドキュメントをメンテナンスする文化創り、プラットフォームは変わるがURIは変わらない、:has詳解、ほか計10リンク +permalink: /posts/362/ +--- + +## [Motivating Developers to Care About Documentation](https://getdx.com/best-practices/documentation-culture-engineering) +#### ドキュメントをメンテナンスする文化創り + +内部ドキュメントをどのようにメンテナンスし続けていくか、そのためのアイディアを紹介する。まず、そもそもなぜドキュメントが必要なのかを明らかにすることが重要である。そして、それを簡単扱えるように環境を整え、ドキュメントの作成、メンテナンスにインセンティブを与えるなどの文化を構築することをおすすめしている。 + +## [Platforms change but cool URIs don't.](https://lethain.com/platforms-change-but-cool-uris-dont/) +#### プラットフォームは変わるがURIは変わらない + +オンラインでコンテンツを作成する人にとって、どのプラットフォームにそのデータを置くかという問題がある。これに対し、Will氏はプラットフォームは頻繁に変わっていくため、自身のURI、特にRSSフィードが存在するURIを持ち続けることが重要であると話している。また、メーリングリストも同様に変化の少ないインターフェースとして持ち続けることをおすすめしている。 + +## [CSS Parent Selector - Ahmad Shadeed](https://ishadeed.com/article/css-has-parent-selector/) +#### :has詳解 + +この記事では、`:has`解決する問題とそれがどのように機能するかを、いくつかのユースケースと例を交えて紹介する。 + + +## [How To Use Storytelling In UX](https://www.smashingmagazine.com/2022/04/use-storytelling-ux/) + +Marli氏が、実際の例を交えながら、UXにストーリーを構築するために適用できる5つのステップについて説明している。 + + +## [Hydration is Pure Overhead](https://www.builder.io/blog/hydration-is-pure-overhead) + +ハイドレーションが引き起こすオーバーヘッドについて指摘し、それを改善するためのアイディアについて考察をする。 + + +## In Brief + +- **[Trust](https://adactio.com/journal/19021)**: ブラウザのネイティブの機能を差し置いて、ライブラリを過度にインストールすることが多いフロントエンド開発の文化について疑問を呈す + +- **[How to fake Progressive WebP Images](https://shkspr.mobi/blog/2020/04/how-to-fake-progressive-webp-images/)**: JPEGのプログレッシブ形式の挙動をwebpを使用して実装するためのアイディアを紹介する + +- **[The Duality of CLS with Lazy Loading Components](https://wicki.io/posts/2022-03-cls-with-lazy-loading-components/)**: Cumulative Layout Shiftについての解説と対応方法について解説 + +- **[Progressive Enhancement and HTML Forms: use FormData](https://www.bram.us/2022/04/22/progressive-enhancement-and-html-forms-use-formdata/)**: FormDataとfetchを組み合わせて、プログレッシブ・エンハンスメントなフォームを実装するアイディアを紹介する + +- **[How to detect dead code in a frontend project](https://blog.logrocket.com/how-detect-dead-code-frontend-project/)**: eslint, webpack, typescriptを使用したデッドコードの検知方法を紹介する diff --git a/11ty/posts/2022-06-01-v363.md b/11ty/posts/2022-06-01-v363.md new file mode 100644 index 0000000..3061a92 --- /dev/null +++ b/11ty/posts/2022-06-01-v363.md @@ -0,0 +1,52 @@ +--- +title: Vol.363 +date: '2022-06-01' +desc: エンジニアのためのライティングスキル、JavaScriptフレームワークの4つの時代、インターフェースの新しい未来、ほか計10リンク +permalink: /posts/363/ +--- + + +## [Writing for Engineers](https://www.heinrichhartmann.com/posts/writing/) +#### エンジニアのためのライティングスキル + +シニアソフトウェアエンジニアとしてキャリアを前進させるために習得しなければならない最も重要なスキルはライティングである。この記事では、エンジニアが習得するべきライティングスキルについて、非常に重要な部分をまとめて解説している。 + + +## [Four Eras of JavaScript Frameworks](https://www.pzuraq.com/blog/four-eras-of-javascript-frameworks) +#### JavaScriptフレームワークの4つの時代 + +JavaScript開発の過去数十年について振り返りをする。大まかに4つの時代に分割して考察する。 + +1. 初期 +1. フレームワーク +1. コンポーネント中心 +1. フルスタック + + +## [A New Future for the Interface](https://www.iamli.am/blog/future-of-interface) +#### インターフェースの新しい未来 + +デザイン、インターフェースが今後どうなっていくか、それに伴い、デザイナ、ユーザーはどのように進化していくかについて。インターフェイスに関してデザインの歴史的な概念を振り返り、それを現代の開発プロジェクトと結び付けて考えながら、「ユーザー」と「デザイナ」がどのような関係を持っていくべきかを考えていく。 + + +## [About using the platform](https://webreflection.medium.com/about-using-the-platform-981a1d53ee62) + +中立であるはずの[web.dev](https://web.dev/)の投稿において、具体的なGoogle製のライブラリの使用を勧めている件について言及し、WebコンポーネントやWeb標準をGoogleライブラリに関連付けることはWeb標準を推進する上で問題になると指摘している。 + + +## [GraphQL is a Trap?](https://xuorig.medium.com/graphql-is-a-trap-e83ca380aa8f) + +GraphQLの使い所について、ツイッターで上がっている意見をベースに検証してみる。 + + +## In Brief + +- **[React components composition: how to get it right](https://www.developerway.com/posts/components-composition-how-to-get-it-right)**: Reactのコンポーネント分割戦略について + +- **[Datalog in Javascript](https://www.instantdb.dev/essays/datalogjs)**: 100行で実装されたdatalogについてその仕組を解説する + +- **[Under-Engineered Multi-Selects](https://adrianroselli.com/2022/05/under-engineered-multi-selects.html)**: アクセシビリティを考慮した服選択可能なフォームの実装方法についての解説 + +- **[Steal this interview script](https://thoughtbot.com/blog/steal-this-interview-script)**: ユーザーインタービューで有効な定型のスクリプトを紹介している + +- **[Performance Game Changer: Browser Back/Forward Cache](https://www.smashingmagazine.com/2022/05/performance-game-changer-back-forward-cache/)**: モダンなブラウザに実装されている、Back / Forward Cacheの仕組みと効果について解説 diff --git a/11ty/posts/2022-06-08-v364.md b/11ty/posts/2022-06-08-v364.md new file mode 100644 index 0000000..ae56c57 --- /dev/null +++ b/11ty/posts/2022-06-08-v364.md @@ -0,0 +1,47 @@ +--- +title: Vol.364 +date: '2022-06-08' +desc: ベターなCSSを書くために、コンテキストに応じたスペーシング、プロダクトデザインプロセス、ほか計10リンク +permalink: /posts/364/ +--- + +## [Writing Better CSS](https://sprucecss.com/blog/writing-better-css/) +#### ベターなCSSを書くために + +Adam氏の経験に基づいたCSSの設計方法について解説していく。まず、ベターなCSSとはどういったものかを定義する。その後に、それを達成するためにどのような方法があるか、どのような点を考慮していけばよいかを説明していく。 + +## [Contextual Spacing For Intrinsic Web Design | Modern CSS Solutions](https://moderncss.dev/contextual-spacing-for-intrinsic-web-design/) +#### コンテキストに応じたスペーシング + +ユーザーのブラウジング環境はひとつに定まっていないため、閲覧環境に応じたスペーシングが柔軟に行われる必要がある。この記事ではコンテキストスペーシング手法を使用して、その予測不可能性に対してどのように対応できるかを説明する。 + +## [A Product Design Process for the Real World](https://www.tedgoas.com/blog/product-design-process/) +#### プロダクトデザインプロセス + +Ted氏が実践する、現実的なプロダクトデザインプロセスについて、紹介する。 + +1. 発見: 問題とは何かを特定し、十分な証拠を収集する +1. 定義: 問題を定義し、目標を定める、目標の指標を明確にする +1. 開発: プロジェクトを実行する + +## [Tokens as intents](https://blog.damato.design/posts/tokens-as-intents/) + +デザイントークンの命名について、どのような点を考慮するべきか考察する。 + + +## [Learn CSS Subgrid - Ahmad Shadeed](https://ishadeed.com/article/learn-css-subgrid/) + +CSSサブグリッドの機能について、FirefoxとSafari Technology Previewで利用が可能となっている。この記事ではCSSサブグリッドでどのような問題が解決できるのか解説する。 + + +## In Brief + +- **[Web Scraping via Javascript Runtime Heap Snapshots - Adrian Cooney's Blog](https://www.adriancooney.ie/blog/web-scraping-via-javascript-heap-snapshots)**: puppeteer-heap-snapshotがどのようにスクレイピングを行うのかについて解説する + +- **[Readability: The Optimal Line Length Articles Baymard Institute](https://baymard.com/blog/line-length-readability)**: 行に対して適切な文字の量はどのくらいかを考察する + +- **[Ordering CSS Declarations](https://blog.jim-nielsen.com/2022/ordering-css-delcarations/)**: CSSのプロパティの記述順序をどのようにするのがベターか考察する + +- **[Test in many browsers](https://hidde.blog/test-in-many-browsers/)**: ブラウザの多様性の重要性について説く + +- **[Magical SVG Techniques](https://www.smashingmagazine.com/2022/05/magical-svg-techniques/)**: SVGでユニークな表現をするためのテクニックをいくつか紹介する diff --git a/11ty/posts/2022-06-15-v365.md b/11ty/posts/2022-06-15-v365.md new file mode 100644 index 0000000..7e7abc4 --- /dev/null +++ b/11ty/posts/2022-06-15-v365.md @@ -0,0 +1,51 @@ +--- +title: Vol.365 +date: '2022-06-15' +desc: Open Web Advocacy、CUPIDの原則、プログラマとして10年のキャリアから学んだこと、ほか計10リンク +permalink: /posts/365/ +--- + + +## [Open Web Advocacy](https://open-web-advocacy.org/) +#### Open Web Advocacy + +Open Web Advocacy は世界中から集まったソフトウェアエンジニアの集団で、規制当局、立法者、政策立案者が、私たちの業界における主要な反競争的問題とその解決方法を理解するために必要な、複雑な技術的詳細を提供することによって、オープンウェブの将来を提唱している。 +オープンウェブの将来について興味があれば、Discord などを通じて活動を支援できる。 + +## [CUPIDfor joyful coding](https://dannorth.net/2022/02/10/cupid-for-joyful-coding/) +#### CUPIDの原則 + +ソースコードの品質が良いほど、コーディングは楽しいものとなる。それを実現するための5つのプロパティをCUPIDと定め、この記事で紹介している + +- Composable(構成可能) +- Unix philosophy(Unix哲学) +- Predictable(予測可能) +- Idiomatic(慣用句) +- Domain-based(ドメインベース) + + +## [Professional Programming: The First 10 Years](https://thorstenball.com/blog/2022/05/17/professional-programming-the-first-10-years/) +#### プログラマとして10年のキャリアから学んだこと + +Thorsten氏は10年のプログラマのキャリアを通して学んだことをこの記事で紹介している。 + +## [Privacy Principles](https://www.w3.org/TR/privacy-principles/) + +Webのプライバシーに関わる概念の定義、そして信頼できるプラットフォームを開発するためにWebの開発をガイドするプライバシー原則のドラフトノート。 + +## [Naming colors in design systems](https://adobe.design/stories/design-for-scale/naming-colors-in-design-systems) + +デザインシステムにおいて、色名をどのようにつけるべきか、SpectrumのリードコンテンツデザイナーであるJess氏がそのアイディアを提案している。 + + +## In Brief + +- **[LCH is the best color space for UI | Deep dive into color theory](https://atmos.style/blog/lch-color-space)**: LCHとは、HSLよりも優れている理由、設計にどのように役立つか + +- **[How we think about UX quality](https://ux.shopify.com/how-we-think-about-ux-quality-428d6607f4c6)**: shopifyのUX部門がどのように品質を改善しているか、その事例とメンタルモデルを紹介する。 + +- **[Get to know your browser's performance profiler - Thomas Belin](https://blog.atomrc.dev/p/js-performance-profiling/)**: ブラウザのパフォーマンスプロファイラーについて解説する + +- **[Reading Source Code: React-Query](https://alexkondov.com/reading-source-code-react-query/)**: React-Queryのソースコードリーディングを行い、どのようなテクニックが使われているかを解説する + +- **[Kubernetes For Frontend Developers](https://www.smashingmagazine.com/2022/05/kubernetes-front-end-developers/)**: フロントエンド開発者のためのKubernetesの解説 diff --git a/11ty/posts/2022-06-22-v366.md b/11ty/posts/2022-06-22-v366.md new file mode 100644 index 0000000..088e5f9 --- /dev/null +++ b/11ty/posts/2022-06-22-v366.md @@ -0,0 +1,46 @@ +--- +title: Vol.366 +date: '2022-06-22' +desc: デザイナのためのシステム思考、防衛的なAPI処理、データ視覚化用のカラーパレットを作成するためのアルゴリズム、ほか計10リンク +permalink: /posts/366/ +--- + + +## [Systems thinking is what makes designers great](https://www.tannerchristensen.com/blog/2022/5/17/systems-thinking-is-what-makes-designers-great) +#### デザイナのためのシステム思考 + +デザイン思考がデザインに対してどのように影響するのか。経験の浅いデザイナが作るデザインは1つのニーズを満たす代わりに他の12のニーズを生み出してしまう。優れたデザインは、エコシステム内の他の何かに悪影響を与えることなく問題を解決する。優れたデザイナになるために、優れたデザインを作成するためには、どのようにシステム思考を適用していけばよいかを解説していく。 + +## [Defensive API Handling](https://cloudfour.com/thinks/defensive-api-handling/) +#### 防衛的なAPI処理 + +JavaScriptでfetchを利用したAPI処理を実装する際に、どういった点を考慮するべきか。fetchの仕様を確認しながら、その仕様に合わせた正常系の実装と、考慮するべきエラーハンドリングを段階的に実装していく流れを解説している。 + + +## [How to pick the least wrong colors](https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors/) +#### データ視覚化用のカラーパレットを作成するためのアルゴリズム + +Stripeのデザイナが、システムのグラフのデザインに対して、アクセシビリティの目標を達成しながら、カテゴリデータの幅広いユースケースをカバーする見栄えの良い色を選択するにはどうすればよいのかを考察する。 + + +## [Pace layers and design principles](https://adactio.com/journal/19104) + +ペースレイヤーモデルがWeb、そしてデザイン原則に対してどのように適用できるのか。 + + +## [On Design Thinking](https://medium.com/@fosta/on-design-thinking-8426ecf328b3) + +デザイン思考がどのようなものか、またそれがどのようにワークするのか、どのようにワークしないことがあるのか、解説する。 + + +## In Brief + +- **[Understanding Weak Reference In JavaScript](https://www.smashingmagazine.com/2022/05/understanding-weak-reference-javascript/)**: JavaScriptの強い参照、弱い参照についてその仕様を説明している + +- **[Processing Arrays non-destructively: for-of vs. .reduce() vs. .flatMap()](https://2ality.com/2022/05/processing-arrays-non-destructively.html)**: 非破壊的な配列の操作である、for-ofとreduce()とflatMap()の比較を行う + +- **[Building a design system with Eleventy](https://www.trysmudford.com/blog/eleventy-design-system/)**: Eleventyでデザインシステムを実装するための方法 + +- **[How designers can become better managers](https://fortune.com/2022/05/26/how-designers-can-be-better-managers/)**: デザイナがマネージャになるためTipsを紹介している + +- **[Keyboard-Only Scrolling Areas](https://adrianroselli.com/2022/06/keyboard-only-scrolling-areas.html)**: キーボードのみでスクロール可能なエリアをアクセシブルにするためのアイディアを紹介する diff --git a/11ty/posts/2022-06-29-v367.md b/11ty/posts/2022-06-29-v367.md new file mode 100644 index 0000000..10ae4b0 --- /dev/null +++ b/11ty/posts/2022-06-29-v367.md @@ -0,0 +1,56 @@ +--- +title: Vol.367 +date: '2022-06-29' +desc: 宣言的なデザインシステム、あまり知られていないCSSの機能、ブラウザのプリロードスキャナーについての解説、ほか計10リンク +permalink: /posts/367/ +--- + + +## [Declarative design systems](https://adactio.com/journal/19131) +#### 宣言的なデザインシステム + +従来のWeb開発プロセスに則ると、必要となるデザインのパターンはとても多くなってしまうためメンテナンスは現実的ではない。代わりに"宣言型デザイン"の考えを提唱している。例として様々な色のボタンを実装することを例に挙げている。従来のデザインでは、それぞれの色に対して、それぞれのホバー時の色を明確に指定するが、宣言型デザインでは、その代わりに "明度を5%低下させる" というようなルールをセットすることで、レジリエントなデザインを実装できる。これはCSSでも関数などの機能を使って実現できる。それぞれのアプローチに優劣は無く、チームごとに適切な方法を採用することを勧めている。 + + +## [Lesser-Known And Underused CSS Features In 2022](https://www.smashingmagazine.com/2022/05/lesser-known-underused-css-features-2022/) +#### あまり知られていないCSSの機能 + +CSSであまり使われていないが便利なプロパティや機能を紹介していく。 + +- `all` +- `currentColor` +- カスタムプロパティのフォールバック +- `counters` +- インタラクションメディアクエリ +- `aspect-ratio` +- hslを利用した美しいグラデーション + +など + + +## [Don't fight the browser preload scanner](https://web.dev/preload-scanner/) +#### ブラウザのプリロードスキャナーについての解説 + +ブラウザーのパフォーマンスの最適化を行う仕組みの一つに、プリロードスキャナーが存在する。この記事では、この機能がブラウザの内部でどのようにワークするかを解説し、パフォーマンス改善のときにどのように考慮すればよいかを説明する。 + + +## [How to Disagree](http://www.paulgraham.com/disagree.html) + +正しく反対意見を述べるためにはどのようにすればいいのか、よくある反論のやり方を分類し、それぞれの特徴と、どのようなやり方が良いかを解説する。 + + +## [Tools for better thinking](https://untools.co/) + +思考を整理、深めるために使用できるツールを紹介する。 + +## In Brief + +- **[Guiding principle: consent over consensus](https://jchyip.medium.com/guiding-principle-consent-over-consensus-8aee08540d62)**: チームで物事を進めるにあたって、合意を形成するのではなく、同意をとることの重要性を説く。 + +- **[CSS: Absolutely positioning things relatively](https://canvatechblog.com/css-absolutely-positioning-things-relatively-964898de886b)**: CSS Gridを使用して複雑なレイアウトをレスポンシブにする方法を紹介 + +- **[Avoiding Puppeteer Antipatterns](https://serpapi.com/blog/puppeteer-antipatterns/)**: Puppeteerアンチパターンを避ける方法 + +- **[Adversarial Testing: A slightly unorthodox testing philosophy](https://blog.testdouble.com/posts/2022-06-08-adversarial-testing/)**: テストを実装するときは、物事がうまくいくことではなく、うまくいかない方に関心を寄せることが重要である + +- **[What you need to know about the Block Protocol](https://blog.logrocket.com/what-you-need-to-know-block-protocol/)**: ブロックプロトコルについての概念を解説する diff --git a/11ty/posts/2022-07-06-v368.md b/11ty/posts/2022-07-06-v368.md new file mode 100644 index 0000000..0ffefd5 --- /dev/null +++ b/11ty/posts/2022-07-06-v368.md @@ -0,0 +1,52 @@ +--- +title: Vol.368 +date: '2022-07-06' +desc: モバイルファーストCSSを考え直す時？、複雑なソフトウェアの崩壊、テクノロジーを再評価する時、ほか計10リンク +permalink: /posts/368/ +--- + + + +## [Mobile-First CSS: Is It Time for a Rethink?](https://alistapart.com/article/mobile-first-css-is-it-time-for-a-rethink/) +#### モバイルファーストCSSを考え直す時？ + +モバイルファーストCSSは優れた設計アイディアではあるが、デメリットもある。この記事では、このアプローチの問題点を指摘しながら、ベターな設計のアイディアを考察していく。 + +## [The collapse of complex software](https://nolanlawson.com/2022/06/09/the-collapse-of-complex-software/) +#### 複雑なソフトウェアの崩壊 + +ローマ人、マヤ人、チャコ人の優れた文明が滅びたのは何故か。一節では、その社会の複雑さに起因していると言われている。ソフトウェアについても同様な状況が起きていると考えることができる。レガシーなシステムを修正するために、安易に新たな要素を追加してしまうことはよくあることであり、その結果複雑さが更に増加していく。そして、それを捨てて、新たなゼロから設計する時が訪れる。こういったソフトウェア設計のライフサイクルについて考察を深め、それに対しどのように向き合っていくべきかを考察する。 + + +## [Re-evaluating technology](https://adactio.com/journal/19125) +#### テクノロジーを再評価する時 + +FlashはWebより優れていた。しかし、時間が経つにつれてWebは追いついた。現代では、このFlashの役割はネイティブアプリが担っていると考えることができる。ウェブの技術は日々飛躍的に進歩しており、あの時ネイティブアプリが優れていると判断されていたものを再評価するときが訪れているかもしれない。 + + +## [Four Tradeoffs When Designing Navigation Menus](https://medium.com/eightshapes-llc/four-tradeoffs-when-designing-navigation-menus-abbf787ae6e3) + +ナビゲーションを実装する際の4つのトレードオフについて紹介する。 + +- すべてのトピックを表示するか、重要なものだけを表示するか +- 新規ユーザーを中心にデザインするか、頻繁に使用するユーザーを中心にデザインするか +- 単一の目的か、複数の目的か +- ユーザーが実行できるものを表示するか、全体を表示するか + + +## [SQLite's web renaissance](https://changelog.com/posts/sqlite-web-renaissance) + +エッジコンピューティングとSQLiteの相性について紹介している。現代のエッジコンピューティングにはSQLiteが非常に組み合わせがよいことを紹介している。 + + +## In Brief + +- **[Component Encyclopedia](https://storybook.js.org/blog/component-encyclopedia/)**: Storybook製のコンポーネント百科事典についての紹介 + +- **[Simplify Your Color Palette With CSS Color-Mix() Smashing Magazine](https://www.smashingmagazine.com/2022/06/simplify-color-palette-css-color-mix/)**: CSSで色を混ぜることができる `color-mix()` の仕様について紹介する + +- **[The Case For Prisma In The Jamstack](https://www.smashingmagazine.com/2022/06/case-prisma-jamstack/)**: Jamstackにおいて、Prismaが以下に有効にワークするかを解説する + +- **[The Smallest CSS](https://www.robinrendle.com/notes/the-smallest-css/)**: HTMLを綺麗に見せるための必要最低限のCSSについて考察する + +- **[Private Access Tokens: stepping into the privacy-respecting CAPTCHA-less future we were promised](https://www.fastly.com/jp/blog/private-access-tokens-stepping-into-the-privacy-respecting-captcha-less)**: CAPTCHA無しで認を行うための技術仕様についての解説 diff --git a/11ty/posts/2022-07-13-v369.md b/11ty/posts/2022-07-13-v369.md new file mode 100644 index 0000000..585b4ce --- /dev/null +++ b/11ty/posts/2022-07-13-v369.md @@ -0,0 +1,46 @@ +--- +title: Vol.369 +date: '2022-07-13' +desc: ソフトウェアエンジニアのソフトスキル、SPAに関する考え、様々なサーバーサイドレンダリングの定義、ほか計10リンク +permalink: /posts/369/ +--- + +## [Software Engineering - The Soft Parts](https://addyosmani.com/blog/software-engineering-soft-parts/) +#### ソフトウェアエンジニアのソフトスキル + +Google Chromeでシニアスタッフエンジニアリングマネージャーとして10年間を通して学んだソフトスキルを紹介する。非常にボリュームが多いが、役に立つアイディアばかりを紹介している。 + + +## [More thoughts on SPAs](https://nolanlawson.com/2022/05/25/more-thoughts-on-spas/) +#### SPAに関する考え + +Nolan氏による、SPAに関する考えをまとめている。特に、コアWebバイタル、コードキャッシュ、サービスワーカーといったアイディアに対してSPAとMPAを比較して、その長所と欠点を解説する。 + + +## [The many definitions of Server-Side Rendering zachleat.com](https://www.zachleat.com/web/ssr-overloaded/) +#### 様々なサーバーサイドレンダリングの定義 + +SSRとは何か。様々なアプリケーションフレームワークで実装されているSSRのドキュメントを取り上げ、SSRをどのように定義しているかを見ていく。コンポーネントフレームワークのSSRとアプリケーションフレームワークでのSSR、それぞれを明確にしていく。 + + +## [State is hard: why SPAs will persist](https://nolanlawson.com/2022/05/29/state-is-hard-why-spas-will-persist/) + +SPAとMPAそれぞれについてその特徴と問題点、メリット・デメリットを考察する。これらをどのように採用していくべきか、またそれぞれをどのように捉え、向き合っていくべきかを考える。 + + +## [Shipping to Production](https://blog.pragmaticengineer.com/shipping-to-production/) + +本番へのデプロイ方法についての解説。既存の様々な方法について紹介し、それのメリットデメリットを紹介している。また、どのようにデプロイの方法を検討していけばよいかについてもアドバイスしている。 + + +## In Brief + +- **[Mathematical Notation for JavaScript Developers Explained](https://runjs.app/blog/mathematical-notation-for-javascript-developers-explained)**: 数学表記をJavaScriptで表現するためにはどのように実装すればよいか + +- **[JavaScript Hydration Is a Workaround Not a Solution](https://thenewstack.io/javascript-hydration-is-a-workaround-not-a-solution/)**: ハイドレーションの仕組みについての解説を行い、そのオーバーヘッドを明らかにする + +- **[Two lines of CSS that boosts 7x rendering performance!](https://dev.to/mnathani/two-lines-of-css-that-boosts-7x-rendering-performance-4mjd)**: 2行のCSSでパフォーマンスを改善するアイディアとその仕組を紹介する + +- **[Prestige Writing](https://randsinrepose.com/archives/prestige-writing/)**: マジシャンが扱う、誓約、ターン、プレステージの考え方をライティングに適用するアイディアを考察する + +- **[AbortController is your friend](https://whistlr.info/2022/abortcontroller-is-your-friend/)**: AbortControllerの仕様、利用方法について解説する diff --git a/11ty/posts/2022-07-20-v370.md b/11ty/posts/2022-07-20-v370.md new file mode 100644 index 0000000..811811c --- /dev/null +++ b/11ty/posts/2022-07-20-v370.md @@ -0,0 +1,53 @@ +--- +title: Vol.370 +date: '2022-07-20' +desc: パフォーマンスを測定するためのDORAメトリクス、7つのデプロイポリシー、ARIAのパターンガイド、ほか計10リンク +permalink: /posts/370/ +--- + + +## [DORA Metrics: the Right Answer to measuring engineering team performance - Jacob Kaplan-Moss](https://jacobian.org/2022/jun/17/dora-metrics/) +#### パフォーマンスを測定するためのDORAメトリクス + +エンジニアリングチームのパフォーマンスを測定するには、どのような指標を使用する必要があるか。この質問に対して、DORAメトリクスの考えを紹介している。DORAメトリクスでは、次の4つの指標を測定することでチームのパフォーマンスの評価を行う。 + +1. 変更のリードタイム +2. デプロイの頻度 +3. 変更障害率 +4. サービス復元時間 + +## [Seven Shipping Principles](https://37signals.com/seven-shipping-principles) +#### 7つのデプロイポリシー + +本番環境へのデプロイに関わる7つのポリシーを紹介している。 + +- 良い仕事だけをデプロイする +- 自身を持ってデプロイする +- 完了した仕事のみをデプロイする + +など + +## [ARIA Authoring Practices Guide (APG) | Patterns](https://www.w3.org/WAI/ARIA/apg/patterns/) +#### ARIAのパターンガイド + +ARIAをどのように実装すればよいのか、コンポーネントごとに詳細に解説している + +## [Better scrolling through modern CSS](https://blog.mayank.co/better-scrolling-through-modern-css) + +スクロールの挙動をモダンなCSSでカスタマイズ・改善する。 + +## [Style scoping versus shadow DOM: which is fastest?](https://nolanlawson.com/2022/06/22/style-scoping-versus-shadow-dom-which-is-fastest/) + +スタイルスコープとシャドウDOMはどちらが高速か検証を行う。シャドウDOMがほとんどの場合高速であることが分かった。 + +## In Brief + +- **[Building forms with custom elements | Filament Group Inc. Boston MA](https://www.filamentgroup.com//lab/forms-with-custom-elements/)**: カスタム要素を使用したフォームの作成方法について解説する + +- **[Can we enterprise CSS grid?](https://chenhuijing.com/blog/can-we-enterprise-css-grid/)**: 大規模なエンタープライズなソフトウェアについてCSS Gridは有効に機能するのか考察する + +- **[Trade-Offs in Decision Making](https://medium.com/redbubble/trade-offs-in-decision-making-92a33c7a308e)**: 意思決定の際のトレードオフをどのよに考えるべきかアドバイスする + +- **[Random notes around service workers development and testing](https://mmazzarolo.com/blog/2022-06-18-service-workers-tips-and-tricks/)**: サービスワーカーとテストについて + +- **[Apple Is Not Defending Browser Engine Choice](https://infrequently.org/2022/06/apple-is-not-defending-browser-engine-choice/)**: AppleのiOSがブラウザの多様性を妨げているのではという観点からの考察 diff --git a/11ty/posts/2022-07-27-v371.md b/11ty/posts/2022-07-27-v371.md new file mode 100644 index 0000000..66244d1 --- /dev/null +++ b/11ty/posts/2022-07-27-v371.md @@ -0,0 +1,51 @@ +--- +title: Vol.371 +date: '2022-07-27' +desc: Early Hintsを使用してページの読み込みを高速化する、良いコミットで良いプロジェクトを構築する、なぜSassを使うのか、ほか計10リンク +permalink: /posts/371/ +--- + + +## [Faster page loads using server think-time with Early Hints - Chrome Developers](https://developer.chrome.com/blog/early-hints/) +#### Early Hintsを使用してページの読み込みを高速化する + +`103 Early Hints`はサーバーがブラウザに対して、HTMLを返却する前に必要なリソースを先読みすることをサポートする仕組み。この記事ではこの仕様について詳しく解説し、具体的な実装方法についてなどを紹介していく。 + + +## [Write Better Commits Build Better Projects](https://github.blog/2022-06-30-write-better-commits-build-better-projects/) +#### 良いコミットで良いプロジェクトを構築する + +良いコミットを書くことで良いプロジェクトを構築することができる。この記事では、良いコミットを書くためのヒントを紹介する。 + + +## [Why Use Sass?](https://sprucecss.com/blog/why-use-sass/) +#### なぜSassを使うのか + +Sassは最も人気のあるCSSプリプロセッサであり、非常に優れたツールである。この記事では、SassがどのようにCSSを補完しているのか、その重要な機能に絞って解説をしていく。 + + +## [SPAs: theory versus practice](https://nolanlawson.com/2022/06/27/spas-theory-versus-practice/) + +- 最高のSPAは最高のMPAよりも優れている +- 平均的なSPAは平均的なMPAよりも悪い + +こういった、SPAとMPAについての迷信について言及する。SPAとMPAはどちらも長所・短所があり、チームの規模やスキル等によって適したツールは変わってくること、そしてブラウザの変化によっても変わってくるものであることを理解するべきだと締めくくっている。 + + + +## [What willwould a Chromium-only Web look like?](https://www.mnot.net/blog/2022/06/22/chromium-only) + +ブラウザエンジンの多様性がオープンWebのバックボーンである。仮にChromiumが唯一のブラウザエンジンであった場合に、Webはどうなるのか。Webの在り方について考える。 + + +## In Brief + +- **[Style Queries](https://una.im/style-queries/)**: CSSのスタイルクエリの仕様について紹介する + +- **[You Might Not Need an Effect](https://beta.reactjs.org/learn/you-might-not-need-an-effect)**: ReactにおいてuseEffectを使用する必要が無いパターンを紹介する + +- **[CSS { In Real Life } | Breaking Out of a Central Wrapper](https://css-irl.info/breaking-out-of-a-central-wrapper/)**: 中央寄せするコンテンツと画面幅にまたがるコンテンツが交互に表示されるようなレイアウトをどのように実現するか、様々な方法を紹介しながら、最終的にはグリッドの使ったソリューションをオススメしている + +- **[Jade Rubick - Learn the weekly rituals you should master as a software project manager](https://www.rubick.com/project-manager-weekly-rituals/)**: プロジェクトマネージャとして持つべき習慣を紹介する + +- **[Two levels of customising](https://hidde.blog/custom-select-with-selectmenu/)**: selectmenu要素の現段階の仕様について紹介し、その拡張性について紹介する diff --git a/11ty/posts/2022-08-03-v372.md b/11ty/posts/2022-08-03-v372.md new file mode 100644 index 0000000..f291b49 --- /dev/null +++ b/11ty/posts/2022-08-03-v372.md @@ -0,0 +1,40 @@ +--- +title: Vol.372 +date: '2022-08-03' +desc: プロトタイピングの威力、デモが生み出すもの、デザインシステムにおけるガバナンス、ほか計10リンク +permalink: /posts/372/ +--- + +## [21. Prototyping to learn](https://world.hey.com/rjs/21-prototyping-to-learn-726e2d3e) +#### プロトタイピングの威力 + +プロトタイピングでは、アイディアに対して複数のバージョンを構築し、それが有効かどうかを確かめる。これは一見、2倍、3倍の労力を余計にかけているように感じるが、異なるアイデアを試すことで、既存のパスがどれほど強力であるかを明確に示すことができる。これはチーム全体の決意を強めることに繋がる。私たちが知らないことを明らかにし、目前の問題に対しての最善の方法を見つける方法としてプロトタイピングは非常に有効である。 + +## [The Demo Demo Loop](https://daverupert.com/2022/06/demo-to-demo-loop/) +#### デモが生み出すもの + +デモの重要性について。デモはクリエイティブな製品を成功させる秘訣である。デモは会議、ワークフロー、プロジェクトスコープを改善させていく力がある。頻繁に、例えば毎日行っても良いと考える。すべての回が素晴らしいデモである必要は無い。重要なのは、デモを行う組織的な慣行を確立し、デモを提供する際のスキルと自信を磨くことである。 + +## [Governance is a design systems friend](https://zeroheight.com/blog/governance-is-a-design-systems-friend/) +#### デザインシステムにおけるガバナンス + +デザインシステムにおいてガバナンスとは、意思決定に対する役割、責任、および権限を明確にするためのフレームワークとして考える事ができる。これにより、意思決定がスムーズになる。コンポーネントに関するもの、チームがどのようにワークするか、についての2つの領域に関して恩恵がある。ガバナンスを確保するための重要なこととは。 +## [Building tabs in Web Components](https://darn.es/building-tabs-in-web-components/) + +タブのWeb Componentsを作成する。セマンティクス、アクセシビリティを考慮する。また、スクロールが可能であることを示すシャドウを動的に適用するテクニックを紹介している。 + +## [The Unlocked Possibilities of the :has() Selector](https://blog.jim-nielsen.com/2022/unlocked-possibilities-of-has-selector/) + +`:has()` セレクタにより、DOMツリー内の他の場所の状態に基づいて、他の要素を指定にすることが非常に簡単になる。これにより、JavaScriptを使用が必要だったスタイリングの多くをCSSのみで実装できるようになることを紹介している。 + +## In Brief + +- **[The Ballad of Text Overflow](https://www.tpgi.com/the-ballad-of-text-overflow/)**: `text-overflow`のアクセシビリティの観点からの問題を指摘しながら、どのようにその問題に対応すればよいかを考える + +- **[Avoiding layout shifts: aspect-ratio vs width & height attributes](https://jakearchibald.com/2022/img-aspect-ratio/)**: `` のレイアウトシフトを防ぐためにはどのような方法があるのかを解説する + +- **[The CSS behind Figma - Ahmad Shadeed](https://ishadeed.com/article/figma-css/)**: Figmaが生成するCSSはどのようなロジックになっているのかを探る + +- **[Frontend Web Performance: The Essentials [1]](https://medium.com/@matthew.costello/frontend-web-performance-the-essentials-1-cb6513e1c3a1)**: フロントエンドのパフォーマンスを理解するために必要な知識を学ぶ + +- **[Use Legend and Fieldset](https://adrianroselli.com/2022/07/use-legend-and-fieldset.html)**: `
` と `` の使い方について具体的な例を用いて解説する diff --git a/11ty/posts/2022-08-10-v373.md b/11ty/posts/2022-08-10-v373.md new file mode 100644 index 0000000..dd60ce9 --- /dev/null +++ b/11ty/posts/2022-08-10-v373.md @@ -0,0 +1,48 @@ +--- +title: Vol.373 +date: '2022-08-10' +desc: NetflixのUXデザインから学ぶ、テクニカルライティング入門、戦略的選択のモデル化、ほか計10リンク +permalink: /posts/373/ +--- + +## [How Netflix Creates Immersive UX Design And What We Can Learn From Them](https://raw.studio/blog/netflix-immersive-ux-design/) +#### NetflixのUXデザインから学ぶ + +Netflixが提供している機能や仕組みについて取り上げ、それがどのようにUXを改善しているかについて解説をしていく。また、そこから学べることを次の4点でまとめている。 + +- ユーザーがクリックしたくなる明確なCTAを備えたシンプルなUIにすべき +- パーソナライゼーションをする +- ブランドに継続的に価値付けを行う。Netflix のオリジナルのように、競争上の優位性を持つ +- 顧客を情報に対し、ビジュアル、アニメーション、またはゲーミフィケーションで引き付ける + + +## [Technical Writing for Developers](https://css-tricks.com/technical-writing-for-developers/) +#### テクニカルライティング入門 + +エンジニアにとって、テクニカルライティングはコーディングと同様に重要な要素である。この記事では、プログラミングとライティングをどのように組み合わせ、テクニカルライティングを行えばよいかを解説する。 + +## [Modeling Strategic Choices](https://jarango.com/2022/07/14/modeling-strategic-choices/) +#### 戦略的選択のモデル化 + +現実の戦略的選択の効果を測定することは難しい。この効果を測定する1つの方法は、情報アーキテクチャを調べること。戦略的選択は情報アーキテクチャに具体的に現れる。 + +## [Why Your Cached JavaScript Is Still Slow and Incurs Performance Overhead](https://www.webperf.tips/tip/cached-js-misconceptions/) + +JavaScriptがキャッシュされ、ブラウザーキャッシュから読み込まれた場合においても、JavaScriptの読み込みに伴うオーバーヘッドが発生し、パフォーマンスに影響する可能性がある。この記事では、キャッシュされたJavaScriptの実行に関わるオーバーヘッドについて着目し、それをどのように発見、改善を行うかについて解説する。 + +## [The Many Faces of Themeable Design Systems](https://bradfrost.com/blog/post/the-many-faces-of-themeable-design-systems/) + +テーマ適用が可能なデザインシステムはどのように実現できるのか。テーマが必要とされるユースケースを想定しながら、それをどのような設計で実現していけばよいか考察する。 + + +## In Brief + +- **[What is the best way to mark up an exclusive button group? Lea Verou](https://lea.verou.me/2022/07/button-group/)**: ボタングループをどのようにマークアップすべきかの議論をTwitter上で行い、どのような方法が最適かを検討する + +- **[Naming conventions for design systems](https://backlight.dev/blog/naming-conventions-for-design-systems)**: デザインシステムにおける、命名規則のベストプラクティスについて紹介する、論理的、スケーラブル、シンプル、標準的の4つのポイントを紹介する + +- **[Wheres the button? Designing for mode confusion](https://www.imkylelambert.com/articles/designing-for-mode-confusion)**: モードという概念がユーザーを混乱させる例を挙げ、それをどのように対処すべきかについて紹介する + +- **[React Hooks: The Deep Cuts](https://css-tricks.com/react-hooks-the-deep-cuts/)**: Reactであまり使われていない種類のhooksについて解説する + +- **[A practical guide to changing code so you can understand it](https://blog.testdouble.com/posts/2022-07-18-refactoring-tool-basics/)**: テストが無いソースコードをどのようにリファクタリングしていくかについて、ステップバイステップで解説する diff --git a/11ty/posts/2022-08-24-v374.md b/11ty/posts/2022-08-24-v374.md new file mode 100644 index 0000000..1719f31 --- /dev/null +++ b/11ty/posts/2022-08-24-v374.md @@ -0,0 +1,53 @@ +--- +title: Vol.374 +date: '2022-08-24' +desc: 構造とプロセスの誤謬、ソフトウェアをシンプルに保つためのアドバイス、ボタンにはハンドカーソルなのか、ほか計10リンク +permalink: /posts/374/ +--- + +## [The Structure and Process Fallacy](https://medium.com/nick-tune-tech-strategy-blog/the-structure-and-process-fallacy-40640e844230) +#### 構造とプロセスの誤謬 + +> 「チームが適切に編成され、アジャイル プロセスを採用していれば、仕事がはるかに効率的になる」 + +この引用は、多くの上級管理者が信じているもので、そして間違っていると指摘している。この引用を信じ、大規模な組織再編を展開すると、組織全体混乱を引き起こす危険性がある。そのため、小さく始めることをおすすめしている。1 つまたは 2 つの分野から、新しい構造の適用と文化の改善を行い、新しい働き方に適応するための時間をチームに与える。次に、これらのアプローチが機能することを確認したら、反復と適応を続けながら、組織のより大きな領域にスケールアウトしていくという流れを適用していく。 + + +## [Your Code Doesnt Have to Be a Mess](https://www.danielsieger.com/blog/2022/07/25/your-code-doesnt-have-to-be-a-mess.html) +#### ソフトウェアをシンプルに保つためのアドバイス + +ソフトウェアをシンプルに保つためのハイレベルな戦略を解説する。 + +- 明確な目標を定義する +- 制約を設ける +- Noと言う +- 無駄を減らす +- 依存関係を最小限に抑える + + +## [Buttons and Cursors](https://www.abeautifulsite.net/posts/buttons-and-cursors/) +#### ボタンにはハンドカーソルなのか + +クリック可能なボタンは、ホバー時にハンドカーソルに切り替えるべきか。ハンドカーソルは元々リンクのために存在していたはずだが、現在はクリック可能なすべての要素に対してハンドカーソルが適用されることが慣例となっている。Cory氏はこのような慣例が生まれた経緯と、現代ではどのようにハンドカーソルを適用すべきかについて考察している。 + +## [The Ultimate Goal of Information Architecture](https://jarango.com/2022/07/28/the-ultimate-goal-of-information-architecture/) + +情報アーキテクチャの目的は、見つけやすさ、理解しやすさ、ユーティリティを生み出すこと。それにより人々がより良い判断を下すことを可能となる。 + + +## [`
` vs. `
`: How To Choose The Right One](https://www.smashingmagazine.com/2022/07/article-section-elements-accessibility/) + +`
`と`
`について深堀りし、どのような状況でそれぞれを適用すべきかについて考察を深めていく。 + + +## In Brief + +- **[Solving The Dangler Conundrum with Container Queries and :has()](https://daverupert.com/2022/07/solving-the-dangler-conundrum-with-has-and-container-queries/)**: `has:()`を使用して、奇数のグリッドを特定するテクニックを解説する + +- **[Style with Stateful Semantic Selectors](https://benmyers.dev/blog/semantic-selectors/)**: CSSのセレクタを活用して、WAI-ARIAを適用していくテクニックを紹介 + +- **[Using Grids in Interface Designs](https://www.nngroup.com/articles/using-grids-in-interface-designs/)**: Gridを用いたユーザーインターフェースデザインのコツを解説する + +- **[Resolving Conflicts Between Designers And Engineers](https://www.smashingmagazine.com/2022/07/resolving-conflicts-designers-engineers/)**: デザイナーとエンジニアの対立を解決するためのアイディアを紹介 + +- **[Reading Source Code: React](https://alexkondov.com/readint-source-code-react/)**: Reactのソースコードを読み進めていき、解説をする diff --git a/11ty/posts/2022-08-31-v375.md b/11ty/posts/2022-08-31-v375.md new file mode 100644 index 0000000..b7e6e86 --- /dev/null +++ b/11ty/posts/2022-08-31-v375.md @@ -0,0 +1,55 @@ +--- +title: Vol.375 +date: '2022-08-31' +desc: より良い読書のためのヒント、UIの歴史、メディアクエリなしでフルイドサイジングを実現する方法、ほか計10リンク +permalink: /posts/375/ +--- + + +## [Reading Better - Farnam Street](https://fs.blog/reading/) +#### より良い読書のためのヒント + +この記事では、読書を最大限に活用する方法について概説する。これは本でも記事でも学術論文でも問わず適用できる。 + + +- すぐに読みはじめて、簡単にやめて良い +- 深い読解レベルで読む +- ざっと目を通して、読む価値のあるものを見つけ、その後、ゆっくりと深く読む +- 素晴らしい本を選び、2回読む +- メモを取る + + + +## [The History of User Interfaces](https://history.user-interface.io/) +#### UIの歴史 + +1973年から2007年までのUIの歴史をまとめている。1973年は後のデスクトップのメタファーとして使われるようになる Xerox Alt というワークステーションについて取り上げ、2007年ではSnow LeopardのUIについて取り上げている。 + + +## [Fluid Sizing Instead Of Multiple Media Queries?](https://www.smashingmagazine.com/2022/08/fluid-sizing-multiple-media-queries/) +#### メディアクエリなしでフルイドサイジングを実現する方法 + +`clamp()`を使用することで、メディアクエリを使用せずに、ビューポートに応じたバリューを適用することができる。この記事では、数学を活用してより複雑な条件分岐を`clamp()`で実現する方法について考察をする。 + + +## [Why we transitioned from Sprints to Basecamps Shape Up methodology](https://medium.com/adventures-in-consumer-technology/why-we-transitioned-from-sprints-to-basecamps-shape-up-f416114224e7) + +アジャイルの手法に問題点を感じ、Shape Up の手法に切り替えた事例を紹介する。アジャイルの手法のときの問題点をShape Up がどのように解決しているかについて解説をする。 + + +## [The Funnel Technique in Qualitative User Research](https://www.nngroup.com/articles/the-funnel-technique-in-qualitative-user-research/) + +ユーザーインタビューにおける、ファネル手法についての解説。この手法では、幅広い 自由回答式の質問 を行ってから、より範囲の狭い自由回答式の質問や クローズドな質問をするようにしていく。これにより、バイアスを排除し、重要なデータを見逃すことを防ぐことができる。 + + +## In Brief + +- **[How-to: Use Firefox for accessibility testing - The A11Y Project](https://www.a11yproject.com/posts/using-firefox-for-accessibility-testing/)**: Firefox の優れたアクセシビリティ監査の機能について紹介する + +- **[UX/ UI tips: A guide to search inputs](https://makeitclear.com/insight/ux-ui-tips-a-guide-to-search-inputs)**: 最高の検索入力ボックスをデザインするためのガイド + +- **[Reinventing Adobe Spectrums colors](https://adobe.design/stories/design-for-scale/reinventing-adobe-spectrum-s-colors)**: AdobeのSpectrumsカラーシステムver.6について、どれがどのように進化したのか、解説をしている + +- **[A Testing Philosophy](https://alexkondov.com/a-testing-philosophy/)**: 自動テストがどうあるべきかうについての考えを記事にまとめている + +- **[Testable Frontend: The Good The Bad And The Flaky](https://www.smashingmagazine.com/2022/07/testable-frontend-architecture/)**: フロントエンドのテストについて、特定のプロセスやツールではなく、アーキテクチャを重要視することが重要であることを説明する diff --git a/11ty/posts/2022-09-07-v376.md b/11ty/posts/2022-09-07-v376.md new file mode 100644 index 0000000..6478419 --- /dev/null +++ b/11ty/posts/2022-09-07-v376.md @@ -0,0 +1,52 @@ +--- +title: Vol.376 +date: '2022-09-07' +desc: モジュラリティと相互依存性、IAとUIデザインの関係とは、テックリードのための効果的なコミュニケーションガイド、ほか計10リンク +permalink: /posts/376/ +--- + + +## [22. Design systems modularity and interdependence](https://world.hey.com/rjs/22-design-systems-modularity-and-interdependence-28e7e3fb) +#### モジュラリティと相互依存性 + +モジュールシステムは事前に定義された仕様で実装されたパーツを組み合わせる設計。一方、相互依存アーキテクチャでは、独自の問題を解決する専用に作られたパーツを組み合わせる設計。これらはそれぞれが優劣があるわけではなくトレードオフの関係にある。この考えは、"デザインシステムの良し悪し"という議論から、"システム内の *どこで*、*いつ* デザインシステムが十分なパフォーマンスを発揮するか"という議論を導く。この考察を経ることで、Tailwindが人気の理由が、優れたモジュール性を持ちながら、カスタムクラスや`@apply`を使用して、相互依存性を持つ設計を組み込める点にあるということがわかる。 + + +## [Whats the Relationship Between IA and UI Design?](https://jarango.com/2022/08/05/whats-the-relationship-between-ia-and-ui-design/) +#### IAとUIデザインの関係とは + +IAとUIデザインの関係とは、どのように関係しているのか？ この記事では、IAとUIデザインの関係について、IA は、概念間の関係を扱うが、これは画面レベルのデザインにも影響するということを説明している。つまり、IAデザイナは必ずしもビジュアルデザインを行う必要があるわけではないが、UIにも注意を払う必要があると提案する。 + +## [A tech leads guide to effective communication](https://leaddev.com/communication-relationships/tech-leads-guide-effective-communication) +#### テックリードのための効果的なコミュニケーションガイド + +テックリードにとってコミュニケーションスキルは非常に重要なスキルの一つである。組織内、組織外とコミュニケーションを円滑に取ることは、テックリードの責任。この記事では、テックリードがコミュニケーションを取る際に、どのようなスキルを持っているとよいか、また、どのようなコミュニケーションスキルを身につけるべきかについて解説する。 + +1. シンプルにする +1. 簡潔で的確に伝える +1. 積極的に話す +1. 傾聴する +1. 徹底的に行う +1. ドキュメントを活用する + +## [The practical application of "Rocks Pebbles Sand"](https://longform.asmartbear.com/docs/rocks-pebbles-sand/) + +石、小石、砂を瓶に詰める順番によって、どのように瓶が埋まるかが変わる話についてプロジェクトマネジメントになぞらえて解説をする。 + + +## [Dynamic CSS Secrets](https://projects.verou.me/talks/dynamic-css-secrets/) + +CSSの特にCSS variablesの仕様やテクニックに関するセッションのスライド。 + + +## In Brief + +- **[Finer grained control over CSS transforms with individual transform properties](https://web.dev/css-individual-transform-properties/)**: 従来のアニメーションとしての`transform`プロパティの記述方法と、個別のプロパティを使った記述方法の違いについて + +- **[Not All Zeros are Equal](https://www.oddbird.net/2022/08/04/zero-units/)**: CSSの値の型についてと、0の扱いについて + +- **[A good reset](https://www.trysmudford.com/blog/a-good-reset/)**: 良いCSSリセットと悪いCSSリセットについて + +- **[Introducing the New WebPageTest Recorder Chrome Extension](https://blog.webpagetest.org/posts/introducing-the-new-webpagetest-recorder-chrome-extension/)**: Google Chromeの拡張である [WebPageTest Recorder Extension](https://chrome.google.com/webstore/detail/webpagetest-recorder-exte/eklpnjohdjknellndlnepihjnhpaimok)についての紹介 + +- **[Mocking Best Practices](https://www.telerik.com/blogs/mocking-best-practices)**: テストにおけるモックについてのベストプラクティスを紹介 diff --git a/11ty/posts/2022-09-14-v377.md b/11ty/posts/2022-09-14-v377.md new file mode 100644 index 0000000..3287bb6 --- /dev/null +++ b/11ty/posts/2022-09-14-v377.md @@ -0,0 +1,54 @@ +--- +title: Vol.377 +date: '2022-09-14' +desc: フロントエンドエンジニアの役割の拡大、Typescriptデザインパターン/API Contracts、CSS設計のベストプラクティスを再考する、ほか計10リンク +permalink: /posts/377/ +--- + + +## [The web is a harsh manager](https://daverupert.com/2022/08/web-is-a-harsh-manager/) +#### フロントエンドエンジニアの役割の拡大 + +フロントエンドエンジニアの役割は拡大している。アナリティクス、セキュリティ、アニメーション、キャッシュ戦略、パフォーマンス、などのこういった多くの領域はフロントエンドエンジニアの責務でもある。この大きすぎる役割を分割するために、"フロントのフロントエンド"、"バックのフロントエンド"といった分け方や、デザインエンジニアリング、フロントエンドオペレーション、CSSエンジニア、といった様々な考え方が提唱されていることを紹介する。 + + +## [Advanced TypeScript Patterns: API Contracts - Blog by Jon Mellman](https://www.jonmellman.com/posts/typescript-for-api-contracts/) +#### Typescriptデザインパターン/API Contracts + +クライアントとバックエンドの間での通信を安全にするために活用できる、API Contractsのデザインパターンを紹介する。 + + +## [Modern alternatives to BEM](https://daverupert.com/2022/08/modern-alternatives-to-bem/) +#### CSS設計のベストプラクティスを再考する + +CSSの設計に関するベストプラクティスを再考する。過去数年で生み出された、いくつかの優れた原則を取り上げながら、それらの原則を踏まえて、いくつかのCSSアーキテクチャの選択肢を考察していく。 + + +## [UX myth - flow is bad because its too long](https://uxplanet.org/ux-myth-flow-is-bad-because-its-too-long-86ecebc89c6a) + +フローが長すぎるので悪い、というのはよくあるデザイナの考え方だが、実際にはそうではないこともある。"フローが長い"ということ自体が悪いのではなく、多くの場合は他の部分に問題があることが多い。そういった問題はユーザーから直接発せられることは少なく、調査を行い、深く掘り下げて、本当の問題の仮説を立ていくことが重要である。 + + +## [Extreme questions to trigger new better ideas](https://longform.asmartbear.com/posts/extreme-questions/) + +新しいアイディアを生み出すために行う、極端な質問の例を紹介。 + +- プロダクトが10倍の価格になるとしたら、どうするか +- 既存顧客が0となったらどうするか +- テクニカルサポートを0にしなければならないとしたら、どうするか +- エンジニアの楽しみを最大化するとしたら、何をするか +- 競合が完全にコピーしたとしたら、どうやって勝つことができるか +- など + + +## In Brief + +- **[Bring Focus to the First Form Field with an Error :](https://www.aaron-gustafson.com/notebook/bring-focus-to-the-first-form-field-with-an-error/)**: エラーがあるフォームの最初のフィールドにフォーカスを移動させるテクニックについて紹介 + +- **[Designing A Better Back Button UX](https://www.smashingmagazine.com/2022/08/back-button-ux-design/)**: 戻るボタンのUXデザインについて考察する + +- **[Handling cross-team feedback loops on design work](https://uxdesign.cc/handling-cross-team-feedback-loops-on-design-work-45f5a8a5b140)**: デザインチームとプロダクトチームがサイロ化せずに、早い段階で頻繁に人々を巻き込み、適切なタイミングで適切な会話を促進することの重要性を説明する + +- **[What Makes A Great Toggle Button? (Case Study Part 1)](https://www.smashingmagazine.com/2022/08/toggle-button-case-study-part-1/)**: トグルボタンについてのケーススタディとどのようなUX/UIをデザインするべきかについての考察 + +- **[Complex conditional width using flex-basis with clamp](https://every-layout.dev/blog/sidebar-flex-basis-clamp/)**: `flex-basis`と`clamp()`を利用した複雑な条件付き横幅を実装するアイディアの解説 diff --git a/11ty/posts/2022-09-21-v378.md b/11ty/posts/2022-09-21-v378.md new file mode 100644 index 0000000..d0a3660 --- /dev/null +++ b/11ty/posts/2022-09-21-v378.md @@ -0,0 +1,62 @@ +--- +title: Vol.378 +date: '2022-09-21' +desc: Webhookのベストプラクティス、メンタルモデルをサポートする8つのヒューリスティック、時間以外の見積もり方法、ほか計10リンク +permalink: /posts/378/ +--- +## [Webhooks.fyi](https://webhooks.fyi/) +#### Webhookのベストプラクティス + +[https://webhooks.fyi/](https://webhooks.fyi/)はWebhookを提供および使用するためのベストプラクティスをまとめている。セキュリティ、ペイロードの保護、運用に関して、実際に利用に即したレベルで解説をまとめている。 + +## [8 mental model design heuristics](https://uxdesign.cc/8-mental-model-design-heuristics-85d2e3133128) +#### メンタルモデルをサポートする8つのヒューリスティック + +ユーザーがメンタルモデルを構築するために活用できる8つのヒューリスティクスの考え方を紹介する。デザインヒューリスティクスは、ユーザーが繰り返し経験する設計や製品のオンボーディングエクスペリエンスに適している。 + +- 正確なメンタルモデルを与える +- 誤った場合のメンタルモデルを与える +- タイムリーで正確なフィードバック +- 単機能での動作から、連携した動作方法 +- メンタルシミュレーションと確率的意思決定 +- タスクに関連したコンテンツを提供する +- 深い経験 +- 体験の発展 + + +## [Time isnt the only way to plan and estimate](https://theoverlap.substack.com/p/time) +#### 時間以外の見積もり方法 + +見積もりを時間で行うことがよくあるが、時間以外の方法もある。この記事では、見積もりをマイルストーン、注目、エネルギーの3つの観点から行う方法を紹介している。 + +マイルストーン: プロジェクト完遂までに起こるであろうイベントに着目したタイムラインを作成する +注目: 同時に取り組むタスク量に応じて、見積もりを増減させる +エネルギー: エネルギーがあるときには多くのタスクをこなすことができ、ないときにはこなすことができない、ということを考慮する + +## [Truthish. ethanmarcotte.com](https://ethanmarcotte.com/wrote/truthish/) + +デザインシステムはデザインチームとエンジニアチームの間で、「真実の情報源」ではあるが、「唯一の情報源」でないことをチームが理解することの重要性について指摘する。誰しもがデザインシステムの一部に対してインタラクトする可能性があり、全体に対してどのように影響するかを見ることが難しい。しかし、それぞれのギャップが有益な情報となることで、デザインシステムがより強固なシステムとなる。 + + +## [What Makes A Great Toggle Button? (Case Study Part 2) Smashing Magazine](https://www.smashingmagazine.com/2022/08/toggle-button-case-study-part-2/) + +トグルボタンはアクティブな状態はどちらかが、分かりにくいことが多い。この記事では、ベストなトグルボタンのUIとは何か、リサーチを行い、ケーススタディを挙げていく。最終的に以下の項目にまとめている。 + +- 背景の塗りつぶしの鮮やかな色とグレースケールの2色を使う +- 重みが類似したいる色は使用しない +- フォントを活用する(太字など) +- エンボスだけではわかりにくいので、組み合わせる +- 別のデザインに差し替える + + +## In Brief + +- **[The False Trade-off between Quality and Speed](https://maruz.medium.com/the-false-trade-off-between-quality-and-speed-7f0f9e93fdd)**: ソフトウェア開発において、品質とクオリティはトレードオフの関係ではなく、品質を高めることで速度も向上するということを説明する記事 + +- **[Redis Explained](https://architecturenotes.co/redis/)**: Redisを1枚のイラストで完結に解説する + +- **[Meet the top layer: a solution to z-index:10000 - Chrome Developers](https://developer.chrome.com/blog/what-is-the-top-layer/)**: dialogタグを活用して`z-index:10000`を回避する方法を紹介している + +- **[CSS { In Real Life } | A Handy Use For Cascade Layers](https://css-irl.info/a-handy-use-for-cascade-layers/)**: CSSのレイヤーの便利なユースケースを紹介 + +- **[Reading Code - GitHub Hotkey](https://alexkondov.com/reading-code-github-hotkey/)**: Github製のホットキーのライブラリのソースコードリーディングを行う記事 diff --git a/11ty/posts/2022-09-28-v379.md b/11ty/posts/2022-09-28-v379.md new file mode 100644 index 0000000..571ad10 --- /dev/null +++ b/11ty/posts/2022-09-28-v379.md @@ -0,0 +1,53 @@ +--- +title: Vol.379 +date: '2022-09-28' +desc: 制約に基づくデザインシステム、デバッグのスキルを上げる方法、エラーメッセージのUXデザイン、ほか計10リンク +permalink: /posts/379/ +--- + +## [Cole Peters An Introduction to Constraint Based DesignSystems](https://www.colepeters.dev/posts/an-introduction-to-constraint-based-design-systems) +#### 制約に基づくデザインシステム + +Cole氏は15年のキャリアで培った、効果的なデザインシステムを構築するための概念を解説する。変数が増えるたびにデザインシステムの複雑性は爆発的に増えていく。これに対して、”制約に基づくデザインシステム”は、複雑さを抑える。制約に基づくデザインシステムの具体的な例や、デザインシステムがどのようにワークすべきかについて解説する。 + +## [Some ways to get better at debugging](https://jvns.ca/blog/2022/08/30/a-way-to-categorize-debugging-skills/) +#### デバッグのスキルを上げる方法 + +デバッグスキルを向上させるためのコツをまとめて紹介している。 + +1. コードベースを学ぶ +2. システムを学ぶ +3. ツールを学ぶ +4. 戦略を学ぶ +5. 経験を積む + + +## [Designing Better Error Messages UX Smashing Magazine](https://www.smashingmagazine.com/2022/08/error-messages-ux-design/) +#### エラーメッセージのUXデザイン + +エラーメッセージは簡単に見つけられ、役に立つ必要がある。エラーメッセージを入力フィールドの上に表示する必要がある理由と、トーストエラーメッセージがあまり有効ではない理由について言及する。 + +## [Building a mental model (and how to leverage them for sound design)](https://uxdesign.cc/3-steps-to-building-a-mental-model-c3b9f588ba1b) + +メンタルモデルの構築方法について紹介する。ユーザーがメンタルモデルを構築していく過程として以下の3ステップを紹介している。 + +1. 慣れる +1. 習熟する +1. 習得する + +## [New Success Criteria in WCAG 2.2](https://www.tpgi.com/new-success-criteria-in-wcag22/) + +WCAG(Web Content Accessibility Guidelines)2.2の基準について解説している。 + + +## In Brief + +- **[Using :has() as a CSS Parent Selector and much more](https://webkit.org/blog/13096/css-has-pseudo-class/)**: `:has()`の革新性について解説し、その使用例を紹介している + +- **[Merging two GitHub repositories without losing commit history Mozilla Hacks - the Web developer blog](https://hacks.mozilla.org/2022/08/merging-two-github-repositories-without-losing-commit-history/)**: Gitの履歴を残しつつ、リポジトリをマージする方法 + +- **[Default Exports in JavaScript Modules Are Terrible - Lloyd Atkinson](https://www.lloydatkinson.net/posts/2022/default-exports-in-javascript-modules-are-terrible/)**: デフォルトエクスポートの問題点を解説する + +- **[Use the Right Container Query Syntax](https://www.oddbird.net/2022/08/18/cq-syntax/)**: CSSのコンテナクエリーのブラウザの対応状況についてとサンプルを紹介する + +- **[Implementing Promisable setTimeout](https://yieldcode.blog/post/implementing-promisable-set-timeout)**: Promiseとして扱えるsetTimeoutを実装する diff --git a/11ty/posts/2022-10-05-v380.md b/11ty/posts/2022-10-05-v380.md new file mode 100644 index 0000000..cbd4656 --- /dev/null +++ b/11ty/posts/2022-10-05-v380.md @@ -0,0 +1,61 @@ +--- +title: Vol.380 +date: '2022-10-05' +desc: 品質は文化から生み出される、デザイン制約を利点に変える考え方、ブレインストーミングを改善する、ほか計10リンク +permalink: /posts/380/ +--- + + +## [Quality Is Systemic - Jacob Kaplan-Moss](https://jacobian.org/2022/sep/9/quality-is-systemic/) +#### 品質は文化から生み出される + +ソフトウェアの品質は、品質を生み出すように設計されたシステムの結果であり、個々のパフォーマンスの結果ではない。つまり、平凡なプログラマのグループであってもよくデザインされた構造で作業すれば優れたソフトウェアを生み出すことができる。それは、具体的にはどのようなデザインなのか: + +- テストハーネスとテストの作成を奨励し、そのための時間を提供するチーム、文化 +- 使いやすい開発環境とステージング環境 +- 文書化され、整理されたコードベース +- 心理的安全性の高い職場 +- 失敗を避難せず、レビューされ、システムを改善する文化 + + +## [How to Work With Design Constraints](https://jarango.com/2022/09/09/how-to-work-with-design-constraints/) +#### デザイン制約を利点に変える考え方 + +古いことわざに “When life gives you lemons, just make lemonade.” という言葉がある。これをデザインに当てはめると、デザイン制約をどう扱うかということになる。Appleはカメラとセンサーのパンチホールをダイナミックアイランドに変えた。また、iPod Shuffleは画面が無いことをランダムに再生するというデザインとしてアピールした。これは、デザイン制約から、それをどのように利点ににしていくかということを考える良い例となる。 + + +## [Brainstorms suck.](https://newsletters.feedbinusercontent.com/515/515974fd5aef6111a2afb12f840ef6dc4036142f.html) +#### ブレインストーミングを改善する + +ブレインストーミングは1950年にAlex Osbornが考案したもので、グループでアイデアを出すための手法である。しかし、そこから数十年たった現在でもあまりルールは進化していない。この記事では、ブレインストーミングを改善するためのアイデアを紹介する。 + +1. 会議を静かに進めアイディアの生成を促進する +1. アイディアを書き留める +1. スケッチする +1. 90分程度の時間をかける +1. 完全に批評禁止ではなく、判断を行うプロセスを組み込む +1. 突飛なアイディアではなく、悪いアイディアを良いアイディアに変えていく + + +## [Dependency Injection in JS/TS Part 1 | The Miners](https://blog.codeminer42.com/dependency-injection-in-js-ts-part-1/) + +TypeScriptを用いて、DIの仕組みを丁寧に解説する。 + + +## [Infinite Scrolling: When to Use It When to Avoid It](https://www.nngroup.com/articles/infinite-scrolling-tips/) + +無限スクロールを使用する場合と使用しない場合をどのように判断すればよいか。利点と欠点を解説し、その判断を助けるアイディアを紹介していく。 + + + +## In Brief + +- **[CSS container queries are finally here - Ahmad Shadeed](https://ishadeed.com/article/container-queries-are-finally-here/)**: CSSのコンテナクエリが実際に利用できる環境が整ってきている、この記事では最新のコンテナクエリの仕様と活用方法を紹介する + +- **[Databases For Front-End Developers: The Concepts Under The Hood (Part 2)](https://www.smashingmagazine.com/2022/09/databases-frontend-developers-concepts-under-hood/)**: フロントエンド開発者のためのデータベース解説 + +- **[Designing for Long-Form Articles](https://css-tricks.com/designing-for-long-form-articles/)**: 長い記事はどのようにデザインするのがよいか + +- **[A Brief Introduction to JAWS NVDA and VoiceOver](https://css-tricks.com/comparing-jaws-nvda-and-voiceover/)**: アクセシビリティに関するJAWS、NVDA、VoiceOverについて紹介する + +- **[Fast Front-End Performance for Microsoft Bing](https://blogs.bing.com/search-quality-insights/august-2022/Fast-Front-End-Performance-for-Microsoft-Bing/)**: Microsoft Bing がどのようにして、高速なフロントエンドパフォーマンスを実現しているかを解説 diff --git a/11ty/posts/2022-10-12-v381.md b/11ty/posts/2022-10-12-v381.md new file mode 100644 index 0000000..2f6599a --- /dev/null +++ b/11ty/posts/2022-10-12-v381.md @@ -0,0 +1,43 @@ +--- +title: Vol.381 +date: '2022-10-12' +desc: シンプルだけがベストなデザインではない、デザインシステムのROI、学ぶためのプロトタイピング、ほか計10リンク +permalink: /posts/381/ +--- + +## [Against Superficial Simplicity](https://jarango.com/2022/09/15/against-superficial-simplicity/) +#### シンプルだけがベストなデザインではない + +多くのデザイナーは"シンプル"であることが良い、という考えを常に取り入れる傾向がある。しかし、単純であることが常に良いとは限らない。物事を単純化しようとすると、時には使いづらくなることがある。この記事では、mac OS の通知のデザインを例に挙げ、それがシンプルであるが、使いやすくは無いことを解説している。"シンプル"はデザインのゴールではない。本質的に複雑なものは"単純さ"ではなく、”明快さ”を考慮してデザインすることが重要である。 + +## [One Formula To Rule Them All: The ROI Of A Design System](https://www.smashingmagazine.com/2022/09/formula-roi-design-system/) +#### デザインシステムのROI + +デザインシステムが非常に有効な仕組みであることが周知の事実であるように、またそれの有用性を経営陣に何度も証明しなければならないということもまた事実である。この記事では、デザインシステムをのROIを計算できる方程式を紹介する。これにより、明確にデザインシステムへの投資を評価できるようになる。 + + +## [Prototyping to learn](https://daverupert.com/2022/09/prototyping-to-learn/) +#### 学ぶためのプロトタイピング + +プロトタイピングの有用性について。プロトタイピングの種類、役割、対象とすべき範囲、など様々な観点からそれぞれの利点をまとめて紹介していく。 + + +## [Making Sense Of WAI-ARIA: A Comprehensive Guide](https://www.smashingmagazine.com/2022/09/wai-aria-guide/) + +この記事では、Kate氏が、ARIAをいつ使用すればよいのか、そしてARIAを適切に使用する方法について説明する。 + +## [Meetings are Toxic (Season 2)](https://www.rework.fm/meetings-are-toxic-season-2/) + +5 人で 1 時間の会議を行うと、実際には 5 時間の生産性が失われる。また、情報伝達も難しい。では、なぜ多くの企業がそれに飛びついてしまうのか。このポッドキャストでは"会議"を題材に、それの問題点と解決策を紹介している。 + +## In Brief + +- **[More Details on details](https://css-tricks.com/more-details-on-details/)**: `details`タグの詳細な挙動について解説している + +- **[Best practices for creating a modern npm package](https://snyk.io/blog/best-practices-create-modern-npm-package/)**: 2022年時点でのnpmパッケージを作成するためのベストプラクティスを紹介 + +- **[Default Exports in JavaScript Modules Are Terrible](https://lloydatkinson.net/posts/2022/default-exports-in-javascript-modules-are-terrible/)**: デフォルトエクスポートがどのような問題を抱えているかについて解説する + +- **[Creative list styling](https://web.dev/creative-list-styling/)**: CSSでのリストを装飾するテクニックについて紹介する + +- **[Better accessible names](https://hidde.blog/better-accessible-names/)**: アクセシブルな名前付けをするためには、どのような観点で考えればよいのかについて解説 diff --git a/11ty/posts/2022-10-19-v382.md b/11ty/posts/2022-10-19-v382.md new file mode 100644 index 0000000..956b04a --- /dev/null +++ b/11ty/posts/2022-10-19-v382.md @@ -0,0 +1,50 @@ +--- +title: Vol.382 +date: '2022-10-19' +desc: プロトタイピングがなぜ有効なのか、建築デザインからWebデザインに適用可能な26のアイデア、SBRDFLTの実践、ほか計10リンク +permalink: /posts/382/ +--- + + +## [Moving With Prototypes](https://blog.jim-nielsen.com/2022/moving-with-prototypes/) +#### プロトタイピングがなぜ有効なのか + +プロトタイプは、共有された理解からあいまいさと個々の解釈を取り除くための強力なツールである。会議やメモで「赤」という言葉を使った場合、人によりイメージが異なるが、プロトタイプで「赤」を見ることは非常に明確である。プロトタイピングは「shipping」の小さな単位であると考えることができ、そこから多くの示唆を得ることができる。 + + +## [26 Things from 101 Things I Learned in Architecture School](https://daverupert.com/2022/09/26-things-from-101-things/) +#### 建築デザインからWebデザインに適用可能な26のアイデア + +「アーキテクチャスクールで学んだ101のこと」という本から抜粋して26つのデザインに関するアイディアを紹介する。 + +- デザイン上の決定は、少なくとも 2 つの方法で正当化する必要がある +- 少ないほど良い +- 完璧なデザインシステムは無い + + +## [A Whole Cascade of Layers](https://www.miriamsuzanne.com/2022/09/06/layers/) +#### SBRDFLTの実践 + +Dave氏が提案する `SBRDFLT` と名付けられたCSS設計手法についての紹介。`SBRDFLT`では、`@layer spec, browser, reset, default, features, layout, theme;`の階層に分けて設計を行う。これをより深く解説、実践した感想を話していく。 + +## [Accessibility is systemic](https://adactio.com/journal/19468) + +[Quality Is Systemic](https://jacobian.org/2022/sep/9/quality-is-systemic/)の記事では、品質はそのチームのシステムの結果であり、個々のパフォーマンスは影響しない、ということを解説している。これに対し、アクセシビリティに関しても同様であり、個々のスタッフのパフォーマンスで達成するものではなく、インクルーシブデザインを優先するシステムが重要であるとことを述べている。 + + +## [The details and summary elements again](https://www.scottohara.me/blog/2022/09/12/details-summary.html) + +`details`と`summary`要素についてその仕様を詳細に検証していき、解説していく。 + + +## In Brief + +- **[Thanks iPhone 14 designing for device sizes is dead | Polypane The browser for ambitious developers](https://polypane.app/blog/thanks-i-phone-14-designing-for-device-sizes-is-dead/)**: 画面幅ではなく、コンテンツに応じたレイアウトを考慮するべき理由と方法について + +- **[Stop calling your design system a product](https://zeroheight.com/blog/stop-calling-your-design-system-a-product/)**: デザインシステムはプロダクトではなく、インフラと呼ぶことでその特性を正確に言い表す事ができる + +- **[A Complete Guide to React Router: Everything You Need to Know](https://ui.dev/react-router-tutorial)**: React Routerに関する完全なガイド + +- **[Will Serving Real HTML Content Make A Website Faster? Let's Experiment!](https://blog.webpagetest.org/posts/will-html-content-make-site-faster/)**: ブラウザでHTMLを構築するよりも、サーバーでHTMLを構築し配信する方がパフォーマンスの面で有利であることを検証する + +- **[We Don't Need Faster Frameworks We Need Better Tooling](https://alexkondov.com/we-need-better-tooling/)**: フレームワークよりツールの重要性が高まっていることについて言及する diff --git a/11ty/posts/2022-10-26-v383.md b/11ty/posts/2022-10-26-v383.md new file mode 100644 index 0000000..a71e141 --- /dev/null +++ b/11ty/posts/2022-10-26-v383.md @@ -0,0 +1,46 @@ +--- +title: Vol.383 +date: '2022-10-26' +desc: ポストモーテムのベストプラクティス、UXチャンキング、ヒューマンコンピュータインタラクション、ほか計10リンク +permalink: /posts/383/ +--- + + +## [Best Practice: Post-Mortems](https://textslashplain.com/2022/09/29/best-practice-post-mortems/) +#### ポストモーテムのベストプラクティス + +Googleの組織において不可欠であり、素晴らしい技術的プラクティスの1つは、ポストモーテムである。ポストモーテムをうまく行うための重要な手法は"５つの理由"パラダイムを実践すること。事象に対して5つの"なぜ"を問いかけ、深い洞察を得る。多くの企業のエンジニアリング文化では、ポストモーテムを採用しているはずである。しかしそれを尊重し、資金を提供していかなければ、オーバーヘッドとなってしまう可能性があることを指摘している。 + +## [UX Chunking: a new digestible product design process](https://uxdesign.cc/ux-chunking-a-new-digestible-product-design-process-b5207ce1579f) +#### UXチャンキング + +UXチャンキングは、 情報を単なる混乱したアトミックな情報ではなく、小さくて明確な単位に分割するために使用される手法。この記事ではこのフレームワークについての解説と、それがどのようにワークするか解説する。 + + +## [Product designers meet your new friend HCI](https://www.imkylelambert.com/articles/product-designers-hci) +#### ヒューマンコンピュータインタラクション + +HCI(ヒューマンコンピュータインタラクション)とは、人 (ユーザー) とコンピューターの間のインターフェースに焦点を当てた研究のこと。HCI の研究者は、人間がコンピューターと対話する方法を観察し、人間が新しい方法でコンピューターと対話できるようにするテクノロジーをデザインする。この記事ではHCIの解説と、なぜそれが重要かについて解説する。 + + +## [A Web Component Story](https://www.abeautifulsite.net/posts/a-web-component-story/) + +UIフレームワークは廃りがあるが、Web Components は廃れにくく、一度作ったものは長く扱える可能性が高い。フレームワークにすべてを頼るのではなく、フレームワークは扱いつつも、Web標準により近いWeb Components を組み合わせることで、より安定的な実装を目指すことができる。 + + +## [Incentives: The Most Powerful Force In The World](https://collabfund.com/blog/incentives/) + +インセンティブがどのような力を持つのか、具体的な例を交えながら、その性質を詳しく解説する。 + + +## In Brief + +- **[Everything You Need to Know About JavaScript Import Maps](https://www.honeybadger.io/blog/import-maps/)**: `