CSS Inheritance, The Cascade And Global Scope: Your New Old Worst Best Friends — Smashing Magazine
I’m big on modular design. I’ve long been sold on dividing websites into components, not pages, and amalgamating those components dynamically into interfaces. Flexibility, efficiency and maintainability abound. But I don’t want my design to look like it’s made out of unrelated things. I’m making an interface, not a surrealist photomontage. As luck would have it, there is already a technology, call
lacolaco's marginalia
すべて Tech Idea Diary 2025-02-05 Angular: CDK Overlay でフェードアウトするポップアップを作る TechAngularAngular CDKCSS 2025-02-02 Angular: Tailwind CSS 4.0のセットアップ TechAngulartailwindcss 2025-01-19 Angular: Prototyping afterNextChange for Signals TechAngularSignals 2025-01-09 Angular: テンプレート内変数でTailwind CSS IntelliSenseの入力補完を有効にする TechAngulartailwindcss 2024 2024-12-25 AngularのSignal Forms（プロトタイプ）をチラ見する TechAngularSign
こんにちわ。ユニバの MJ です。 2017 年も終盤に差し掛かり、今年のフロントエンドの印象としては、特にフレームワーク的な革新はなく中身が成熟していった印象があります。 そんな中で一つまとめておきたい話が一つ。 それが Atomic Design (アトミックデザイン) です。 はじめに Atomic Design という言葉を最初に耳にしたのは とある勉強会で Abema の方の発表でした。 確か 2015年 の冬あたり グラディオ「実際やってみて改めて実感したぜ、Abemaはすげぇ゛よ゛！！！」 イグニス「ああ...もうすでに完成されてたな」 グラディオ「コーディング・デザイン・自由度、3つが調和しねぇと、どれかが飛びでたってだめだ」 プロンプト「おれ、次からもっとフロントエンドを楽しめそうな気がする」 ノクティス「ああ、俺も」 と今更ながら思うわけですな。 よく語られがちなのは
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? HTMLを覚えて3周年経ちました、@sueshinです。 3周年とか枕詞に使っている時点でお分かりかと思いますがチキン野郎です。はい。 お手柔らかにお願いしますmm 私が担当するジョブセンスリンクは9年程たった歴史のあるWEBサイトです。 トップページで使用されているCSSセレクタの数は約3000で、行数でいうと軽く10000行は超えていると思います。 そんな、あふれんばかりのレガシーコードに愛憎の念が入り混じっている今日この頃です。 現在私は師走ということで、来年に向けてCSSの整理をしないとと思い、CSS設計を勉強しています。 ただ
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? イベント概要 DIST.18 「Sketch時代のWebデザインワークフロー」 - connpass 2017年11月10日（金）に東中野にある東京テクニカルカレッジで開催された。 デザインツール「Sketch」をメインテーマにした３つのセッションで構成される勉強会。詳しくはconnpass上のイベントページを参照してください。 セッション１： 「2018年に向けたツールの選び方」 フリーランス 長谷川 恭久（HASEGAWA Yasuhisa） ※ Automagic.fmをやっている方 デザインプロセスがぶっ壊れている 昨今様々なデ
コンポーネント指向のススメ - Qiita
今回は複数人で構築する際にとても便利なコンポーネントについてお話できれば、と思います。 コンポーネントの概念を把握しておくとReactやvue.jsと通じるところもあるので、 知っていて損はない概念と思います！ コンポーネント指向とは まず、コンポーネント指向で大切な概念として、Atomic Designがあります。 ざっくりAtomic Designのお話をすると… 以下の添付画像のように PAGES（フロントのページ）は最小単位のATOMSから構成されている、ということです。 複数のATOMSから 一つの機能（例えばボタンアイコンなど）が構成されて、（MOLECULES） MOLECULESから、 いわゆるヘッダー、コンテンツ、フッター（ORGANISMS）が構成されて、 各ページを作り上げている、というイメージです。 そしてコンポーネント指向というのは、ATOMSやMOLECULES
I started my digital design career 19 years ago, �I revelled during the Flash Era, embraced the swing to accessibility and HTML & CSS, shiny web 2.0, HTML5, now the swing to user centric design and the rise of mobile. These days you can find me leading and heading up digital user experience and creative teams, delivering leading edge digital products and solutions. Team lead for UX & Design at New
The document contains a collection of URLs and hyperlinks related to topics including Photoshop shortcuts, ordering layers in Photoshop, atomic web design, and agile UI development. It also includes references to websites, videos, and images focused on design and development topics. The document lists the name Yusuke Goto and includes links to his website and social media profile.Read less
As the size and complexity of a project grows, you require some sort of logic to structure your Sass files. It helps to follow some agreed upon guidelines for creating files and folders when working in large teams and projects. Below is a review of some of the techniques in use today. Key Takeaways Bootstrap-sass architecture is best suited for projects where mixins are complex and need to be brok
React.js LLM Agent for next generation codingReactAgent is an experimental autonomous agent that uses GPT-4 language model to generate and compose React components from user stories. It is built with React, TailwindCSS, Typescript, Radix UI, Shandcn UI, and OpenAI API. Email addressGet updates → ReactAgent v0.1.0 I've been working in the couple of months on an experiment, trying to make GPT-4 much
感想を書いている人の前提 React, AngularJS, Angular X(4, 6 etc)を開発で使ったことがあるAngular で SSR (Server Side Rendering) 対応をしたことがあるwebpack 利用経験ありNode.js, npm 周りの知識あり 何で読んでみようと思ったか 既存の jQuery の塊になっているプロジェクトに Vue.js を導入できるかRails などの既存 MVC フレームワークに導入するときにどうやって導入できるかVue.js の単一コンポーネントという仕組みを使ってどうやってアプリを構築していくのかVue.js を使うときに綺麗に保守していくためのお作法は何か 総ページ数 450 と結構ボリューミーな感じだったけど、説明の書き方がとても平素で分かりやすい。最初は Vue.js を触ってみることに集中して、 npm や we
Stay Relevant and Grow Your Career in TechPremium ResultsPublish articles on SitePointDaily curated jobsLearning PathsDiscounts to dev toolsStart Free Trial7 Day Free Trial. Cancel Anytime. Key Takeaways Web components are becoming increasingly popular, and there is a growing need for CSS frameworks that can handle this type of development. Traditional CSS frameworks like Bootstrap or Foundation m
Vue3のCompositionAPIがOptionsAPIよりも優れている理由をVue3エンジニアが解説！ | Ragate ブログ
import { defineComponent, ref } from 'vue' export default defineComponent({ setup() { // data const name = ref('John'); // methods const doIt = () => console.log(`Hello ${name.value}`); // mounted onMounted(() => { doIt(); }); return { name }; } }); 実装上での大きな変更点はこちらでも挙げられている通り、以下になります。 data, computed, method 等の Vue 機能は全て setup 関数に定義ライフサイクルのフックは setup 関数に定義リアクティブ(変更検知)したい値は全て ref で指定必須暗黙的に動作していた部分を全
Cascade Framework
Feature Rich Semantic and non-semantic grid layouts, base templates, table designs, navigation elements, typography and lots, lots more. Universal Build high performance websites in no time for old browers and new browsers alike without worrying about browser quirks. Atomic An optimised atomic design gives you full control of the look and feel of your site while keeping code bloat minimal. Differe
RED LINE :: webデザイナによるwebデザインに関するさまざまな情報掲載サイト "del.ici.ous" RSSフィード元 http://del.icio.us/rss/tag/css "hatena" RSSフィード元 http://b.hatena.ne.jp/t/css?mode=rss&sort=hot&threshold=3 ここ1~2年くらいで 使えるようになった(主要ブラウザーの最新版 がすべて対応した ) ウェブの新機能について ランダムに喋る! Arm、新しい高性能IP「Neoverse V3AE」を発表 CSSを自動車向けにも投入し設計から製品化までの時間を短縮 あなたが教わってるそのCSSテクニックはもう古い ｜ TAKLOG Utility-first CSS(Tailwind CSS)が合理的であることの説明と、CSSによるUI開発小史 えっ！？まだ
Sassy Starter
A starter toolkit based on Scalable and Modular Architecture for CSS SMACSS and Atomic Design for Sass (SCSS) projects. Do what you'd like with it :) Styles are broken down into the following groups: Base, Layout, Atoms, Molecules, Organisms, States, Themes, Utilities and Overrides Quick start Fork & clone the repo, or download zip file directly. Install dependencies – npm install. Watch for chang
Designing Systems | Atomic Design by Brad Frost
Chapter 1 Designing Systems Create design systems, not pages A long, long time ago, there were these things called books. Remember them? These contraptions were heavy and bulky and made from the pulp of dead trees. Inside these books were things called pages. You turned them, and they cut your fingers. Awful things. I’m so glad these book things with their razor-sharp pages aren’t around anymore.
PLAIDでエンジニアをしている @kei-tamiya です。 本記事は PLAID Advent Calendar 2019 の 20日目になります。 社外で個人的に開発しているプロジェクトでAtomic Designを採用しており、ある程度知見が溜まったので、1つの運用例としてご紹介したいと思います。 前提 どんなプロジェクト？ もともとVue.jsを用いて動いているアプリケーションを1からリファクタするプロジェクト 別リポジトリに、Nuxt.js, Typescript, Vue Apolloを使用して開発 フロントエンドエンジニア3〜4人、デザイナー1人 全員リモートで、週1で30〜60minぐらいミーティングできる GraphQLのAPIサーバーはおよそある状態 主に大きなページごと（Userに関するページなど）をエンジニア1人が担当して開発する もともと課題に感じていたこと・
命名スルこと日本語には漢語由来の熟語がいくつもありますが、日本人からするといくらか記号的に見えてしまうことがあります。とはいえ漢字の意味を知っているので読んで差し支えはないのですが、それらの字の間に「の」を挟みこむことで記号的な記述であった熟語を和語的な言葉として読むことができるようになります。例えば「命名」という熟語でそれを試すと「命の名（いのち の な）」という具合になりますが、「命名（スル）」という言葉を思い浮かべるよりかは「命の名（を付ける）」の方が、より一層にある概念に命を吹き込む行為であることが強調されるので、それがとても尊い行いであると改めて理解することができます。 命に名前を与える、あるいは名前を与えて命を吹き込む、すなわち命名スルという行いは、名付けによってその存在の意味性を明らかにすることなのだろうと考えられます。親が生まれた子にまず与えるのは名前です。名前を与えること
CSS, Sass, SCSS, Compass, Less, BEM, SMACSS, OOCSS, ACSS, CCSS, WTFSS?
CSS, Sass, SCSS, Compass, Less, BEM, SMACSS, OOCSS, ACSS, CCSS, WTFSS? I’ve been thinking a lot about my CSS authoring, its current state and how it has changed over the years. Typically when I start a new project I’ll use my own framework Motherplate. It uses SCSS and Compass. Most of the class names were’t originally based on any other framework. Not deliberately anyway. Most developers I know n
toge's diary
去年発売された本ですが、今さら読みました。 gihyo.jp 読んだ動機 私はフロントエンド、特にデザイン周りはからっきしです。 フロントエンドやるときはJavascriptのチューニングばっかりなので、HTML+CSSは最低限知っている程度のレベルです。 WebスクレイピングをしているとCSSクラスの指定が結構複雑で「何かベストプラクティスがあるんだろうなぁ」と思っていまいた。 そこらへんの知識をちょっと除き見して、あわよくばスクレイピングで利用したかったのです。 感想 HTML + CSSをかじったことのある程度の私にはちょうど良い本でした。 とても丁寧に作られている本だと思ったので、本来の対象読者であるHTML+CSS書く人以外でもお勧めだと思います。 500ページ以上ある大作ですが、HTML+CSSのコードが大量に掲載されているためなので、そんなに重くなく読み進めることができます。
学生エンジニアのためのチャットサービスをNext.js + TypeScript + AtomicDesign + Firebase9 + Dockerで作った（β） - Qiita
学生エンジニアのためのチャットサービスをNext.js + TypeScript + AtomicDesign + Firebase9 + Dockerで作った（β）DockerFirebaseOSSNext.jsAtomicDesign はじめに ※今回の開発は、株式会社OwN様からいただいた技術課題の一環で行ったものになります。 自己紹介 会社員やりつつ、趣味で個人開発を行っております。 フロントエンジニアのふぁると申します。 【Twitterリンク】 itamaster サービスについて サービス名 hacker-class-roomを略して、「はかくら」です！ リポジトリURL こちらになります。 https://github.com/FAL-coffee/hacker-class-room サービスの概要 「プログラミングの授業が始まるが、ついていけるのか不安......」 「情
React でのデータの取り扱いを振り返ると Next.js の App Router は意外としっくりくるかもしれない
Next.js の App router が 13.4 から stable になりました。 GW 中の発表だったので休みにも関わらずついつい情報を追ってしまった方も多かったのではないでしょうか。僕も GW 中の発表後は App Router の情報収集に勤しんでおり、あれこれ考えていましたが、ドキュメントを読むにつれてなんとなくイメージがついてきました。 あれから2ヶ月ほど経ち、特に今までのデータ周りの取り扱い方を考えることで、割と App Router への進化は自然だったのではないかと考えるようになりました。 ここではあくまで僕の印象ベースではありますがデータ（fetch）の取り扱いについて振り返り、なぜ App Router への進化が自然に感じたのかをメモしておきます。 長いので端的にいうと 元々は上位コンポーネントでデータを取得し、下位コンポーネントに流す形だった SWRなどの登
こんにちは、Spinnersの元山@kudakurageです。 iOSには実はかなり多くのアクセシビリティ機能が用意されているのですがご存知でしょうか？ アプリの開発をしているエンジニアやデザイナならなんとなくは知っているという方もいるかと思います。 ですが基本的にはサービスやアプリなど事業・ビジネスの成功があってこそですから、アクセシビリティ対応というのは後回しになりがち（というかほぼやらないのでは？）ということが多いと思います。 今回はDynamic Typeによる文字サイズのアクセシビリティ対応についてデザイナー目線でどう考えていくのが良いかを書いてみようと思います。 ちなみに、技術的な部分についてはヴァンサン@vincentisambartの記事が参考になるのでご紹介しておきます。 Dynamic Type - クックパッド開発者ブログ INDEXDynamic Typeとは？文字
タオルケット体操
まとめ なんでもいい、どうでもいいと言い出すやつはだいたい内心でどうでもよくないと考えている Storeの話をするまえに https://react.dev/learn を読んでReactの基礎を理解しよう experimental state management frameworkと一生言い続けているライブラリをプロダクションで使うべきではない experimentalと一生言い続けているライブラリをプロダクションで使うならその部分は特に気をつけて疎結合にすべき ライブラリの話をしてないでreact.dev/learnのThinking in Reactを読もう とにかくreact.dev/learnを全部読んで、Reactのstateの基礎コンセプトを理解してからStoreへ移動しよう useContextは似て非なる存在で擬似的な流用はできるがまともな代用たりえない useStat
BugSnag's CSS Architecture
A few months ago, a number of designers and UI engineers, inspired by a popular blog post from GitHub’s Mark Otto, published articles on their approaches to writing and organizing CSS. In this post, I’m going to follow suit and take you through a breakdown of the tools we use, as well as the architecture of BugSnag’s CSS. There’s no surefire method for organizing CSS for all situations; the conten
DevicebookというNuxt.jsとLaravelを使ったWebサービスを個人開発しています。 最近、「うわっ、わたしのコンポーネント設計、見づらすぎ・・・？」と思いはじめたため、重い腰をあげてAtomic Designを導入しはじめました。 Atomic Deisngのメリット Atomic Designを導入すれば、コンポーネントの設計に統一感をもたらすことができて、再利用性が高まるという恩恵を受けられます。 今まではVue.jsのスタイルガイドに準拠しながら設計をしていましたが、個人開発サービスの規模感でも、そろそろ限界が見えはじめました。 コンポーネントの設計が、機能や開発時期によってバラつきがあるため、可読性が低い。 コンポーネントが他のコンポーネントやVuexと密結合になっているため、再利用しにくい。 つまり中規模段階に入るとVue.jsのスタイルガイドに限界が見え始める
7 FrontEnd JavaScript Trends and Tools You Should Know for 2020 | HackerNoon
7 FrontEnd JavaScript Trends and Tools You Should Know for 2020 by@ysaring Seven opinionated predictions of stuff frontEnd developers should probably start learning… The JavaScript world is moving fast. The world of frontEnd development (and web development) is moving blazingly fast. Today, if you’re not on top or Webpack, React Hooks, Jest, Vue and NG elements, you start to feel the gap widening.
By Naema Baskanderi Last night my small team and I headed out to do a little networking and learn about Design Systems. Being that is was the buzzword of 2017, we were eager to learn how we could create our own. We had heard all the wonderful benefits of creating a design system: saving time, reducing debates, collaboration, adoption, and more. I was excited! All the talks spoke about how to creat
ゆめみフロントエンド採用コーディング試験で確認しているポイントやよくある質問を公開｜YUMEMI（株式会社ゆめみ）公式
株式会社ゆめみのフロントエンドコーディング試験で確認しているポイントや、よくある質問を公開します！試験の課題内容はこちらの記事をご確認ください。 公開に至った背景徹底的な透明性を大事にしている。 ゆめみのAndroid、iOS、サーバーサイドグループのコーディングテストを既に公開している。 弊社からの情報発信を通じて興味を持っていただく方が多い反面、応募するハードルが高いというフィードバックをいただく。 上記の理由からフロントエンドコーディング試験に関するより詳しい内容を公開することにしました。 可能な限り公開し、より多くの方に興味を持っていただくこと、選考フローにおいてミスマッチがなくなるきっかけになると幸いです。 よくある質問実際に応募者からよくある質問をピックアップしてお答えします！ Q. ワイヤー通りに実装すればいいの？見た目は変えても良い？A. 基本的な使い勝手さえ変わっていなけ
React+Reduxアプリのチュートリアルを終えて本格的な開発に入るぐらいのタイミングで、ディレクトリ構成について悩み、他のプロジェクトを参考にしようと思って色々調べてみたのですが、これといってベストプラクティスは定まっていないように思えました。 当然プロジェクトの内容次第で変わってくる部分ではあるのですが、一般的なケースにおける知見として、開発が進んでいくにつれ、なんとなくこうした方が良いのではないか、というポイントが段々と見えてきたので共有します。 component component群については、componentとcontainerの2種類に大きく分け、reduxのconnectをしたcomponentをcontainerと定義するのが主流と思われます。 containerと呼ぶのにcomponentの大小や複雑さは関係なく、小さいパーツであってもconnectが必要なケースで
Retty Advent Calendar 2018 12日目の記事です。 昨日は @yongyu-li さんの Go interfaceの理解しにくいところ でした。 ちょうど現場でGolang触りはじめたばかりの自分には割とタイムリーな話題でした。 TL;DR めちゃくちゃ大げさなタイトルですが、単に Atomic Design を導入しようとした現場で 抜け漏れ 運用忘れて形骸化するリスク 運用メンバーがレビューの権威化する これらの課題を ESLint のルールを作ることで解決しようとした話です 完成した eslint-plugin-atomic-design はこちら これは「このプロジェクトから俺が居なくなったあと、俺のコードは一片も残らなくていいから、秩序だけでも残ってくれ……！駆動」で開発しました。 前提条件: よくある現場の話 Rettyのweb版は2011/6にリリース
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? この記事は Retty Advent Calendar 15日目です。 昨日はsakuパイセンのXcodeでJavascriptをテストする話でした。 こんにちは！ Rettyでフロントエンドエンジニアやってます渡辺です。 盛り上がりを見せ続けるReact.jsやRiot.jsの影響もあって コンポーネント化というワードをデザイナーの皆さんも耳にすることが増えてきたのではないでしょうか。 今回は「まだコンポーネントってよくわらない」「実は理解していない」というデザイナーを対象に デザイナーにおけるコンポーネント化についてフロントエンド的
Creating A Living Style Guide: A Case Study — Smashing Magazine
Creating a living style guide is a long but worthwhile process. Steven Lambert made a few mistakes along the way that prevented developers and designers from adopting it sooner or using it effectively. However, he pushed through and eventually made it to the end. This is the story of how Steven developed a living style guide, the mistakes made along the way, and why the current landscape of style
JSer.info #377 - TypeScript 2.8が正式リリースされました。 Announcing TypeScript 2.8 | TypeScript TypeScript 2.8.1 変更点 - Qiita Conditional Typesのサポートされ、またConditional Typesを使ったビルトインの型としてExclude<T, U>, Extract<T, U>, NonNullable<T>, ReturnType<T>, InstanceType<T>が追加されています。 mapped type modifierの+、-のサポート、.d.tsファイルだけを出力できるemitDeclarationOnlyオプションの追加、@jsxプラグマコメントのサポートなどが行われています。 React 16.3.0がリリースされました。 React v16.3.0:
“Atomic Design”を導入するときに便利な Sketchプラグイン – Coiney Product Team – Medium
デザインしちゃったあと、“Atomic Design”を導入するときに便利だった Sketchプラグインをまとめてみました。 目次はじめに ・社内管理画面のリニューアル ・Atomic Design…いきなり「原子」と言われても。 あってよかった便利なSketchプラグイン ・1. シンボルを整理整頓「Symbol Organizer」 ・2. リネイムの定番「Rename It」 ・3.レイヤー探すなら「Sketch Search Everywhere」 ・4. 空のフォルダ一斉削除!!「Cleanup Useless Groups」 ・6. おまけ はじめに社内管理画面リニューアル弊社では約1年前から社内管理画面のリニューアルをしています。ほぼ新管理画面へ移行が完了。 でも実は画面のデザインはかなり前に完成していました。 すでにリニューアルはほぼ完了しています。とはいえ、機能面のPDC
Vuetify.js でお手軽マテリアルデザイン + Atomic Design「風」のディレクトリ構成 - s平面の左側
Vue.js #4 Advent Calendar 2017 - Qiita の 19 日目のエントリー。 （先日の記事の続きを書こうと思っていたが、こちらの日が先に来てしまった） 最近、フロントエンドエンジニア・デザイナー不在のプライベートな開発において、フロントサイドの実装を任されることがあった。 その際に Vuetify.js を用いて比較的簡単にマテリアルデザインのページを実現できたので、その備忘録。 （意見・ツッコミなどは歓迎） vuetifyjs.com 出来上がった画面のイメージはこんな感じ。 ※グラフ描画は Vuetify.js で提供していないので、 vue-chartjs を利用している。 このレベルであれば、Vue.js の基礎知識だけある状態から1日で辿り着くことが出来た。 概要 Vuetify.js はマテリアルデザインのコンポーネントを80種類以上提供している。
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. Keeping CSS specificity low across all the selectors in your project is a worthy goal. It’s generally a sign that things are in relative harmony. You aren’t fighting against yourself and you have plenty of room to override styles when you need to. Specificity on selectors tends to creep up over tim
はじめに 初めまして、レバレジーズ株式会社FEエンジニアの森山です。 今回は、React開発におけるコンポーネントの定義方法の１つの解をご紹介します。 結論 結論を簡潔に記載すると以下です。 ロジックをUIロジックと業務ロジックに切り分ける。 UIとUIロジックは密結合させて再利用性を高める。 UIと業務ロジックは疎結合にして再利用性を高める。 背景や具体的な例は後述します。 なぜこの記事を書いたのか 私が調べた限りではReactにおけるコンポーネントの定義方法におけるベストプラクティスが存在しないからです。 Reactの公式ドキュメントにおいてもコンポーネントの定義方法の方針は記載が無いかと思います。これはReactの思想として開発者がプロジェクトの規模や特性を考慮してある程度の自由度を持って開発できることを尊重したのではないかと考えています。 自由度が高いと開発方法の手段が増えます。手
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Atomic Design は React に秩序をもたらすか？ - Qiita
CSS設計を勉強するならまずこれを見たら良いかも - Qiita
DIST.18 「Sketch時代のWebデザインワークフロー」 - 勉強会メモ - Qiita
Matt Webb | Digital Management, UX & Design
Atomic Design という名のデザイン整理術
A Look at Different Sass Architectures — SitePoint
ReactAgent - The open-source React.js LLM Agent
「Vue.js 入門 基礎から実践アプリケーション開発まで」読了。感想 | saino.me
Component-Driven CSS Frameworks — SitePoint
RedLine Magazine ：： CSS Bookmark
Amazon.co.jp: Atomic Design ~堅牢で使いやすいUIを効率良く設計する: 五藤佑典: 本
課題解決手法としてのAtomic Designの解釈と実装 - Qiita
デザインにおける命名について考える｜usagimaru ⌘ Satori Maru｜note
iOSのDynamic Typeによる文字サイズのアクセシビリティ対応 | Spinners Inc.
Vue.jsでAtomic Designを実践する - Qiita
How to Build a Design System with a Small Team
React + Reduxアプリのディレクトリ構成について - Qiita
ESLintの力で秩序あるAtomic Designを後世に残す | ryonkmr.com
デザイナー向け - コンポーネント化について考える - Qiita
2018-04-01のJS: TypeScript 2.8、React 16.3.0、TensorFlow.js
Strategies for Keeping CSS Specificity Low | CSS-Tricks
Reactにおける責務（UI/ロジック）の切り分け - Leverages Tech Blog