HTMLを覚えて3周年経ちました、@sueshinです。 3周年とか枕詞に使っている時点でお分かりかと思いますがチキン野郎です。はい。 お手柔らかにお願いしますmm 私が担当するジョブセンスリンクは9年程たった歴史のあるWEBサイトです。 トップページで使用されているCSSセレクタの数は約3000で、行数でいうと軽く10000行は超えていると思います。 そんな、あふれんばかりのレガシーコードに愛憎の念が入り混じっている今日この頃です。 現在私は師走ということで、来年に向けてCSSの整理をしないとと思い、CSS設計を勉強しています。 ただ、情報の多くはWEBに上がっている一方で、何から手をつけたら良いか初めはわからなかったので、 見渡してCSS設計を学習できるようにざっくりまとめて見ました。 CSS設計のゴール 何事もゴールを決めないことには走れないですよね。 「CSS Architectu
東京で開催された「CSS Nite LP54 Corder’s High 2017」の参加レポートです。 セッション8つめはピクセルグリッドの高津戸さん。 CSS設計方法論や各種ツールとどう向き合うか 自分が困っていれば採用すれば良い。 全部採用しようとするとコストが掛かりすぎる 多くのCSS設計方法論 OOCSS モジュール化 BEM クラスに命名規則を設け、シンプルなセレクタで書くルールに CSSの容量増えすぎてしまう問題への解決 モジュール化 ベース + スキン (OOCSS) ブロック + モディファイア (BEM) 書き方がみんなバラバラ問題への解決 コーディングガイドライン StyleLintを使う 同じコードへの対策 mixin, extendでコードDRYに Autoprefixerを使い管理をコード外に スタイルガイドで重複したモジュールの作成を回避 それで解決しない問題
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
はじめに 初めまして、レバレジーズ株式会社FEエンジニアの森山です。 今回は、React開発におけるコンポーネントの定義方法の１つの解をご紹介します。 結論 結論を簡潔に記載すると以下です。 ロジックをUIロジックと業務ロジックに切り分ける。 UIとUIロジックは密結合させて再利用性を高める。 UIと業務ロジックは疎結合にして再利用性を高める。 背景や具体的な例は後述します。 なぜこの記事を書いたのか 私が調べた限りではReactにおけるコンポーネントの定義方法におけるベストプラクティスが存在しないからです。 Reactの公式ドキュメントにおいてもコンポーネントの定義方法の方針は記載が無いかと思います。これはReactの思想として開発者がプロジェクトの規模や特性を考慮してある程度の自由度を持って開発できることを尊重したのではないかと考えています。 自由度が高いと開発方法の手段が増えます。手
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
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
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. Bootstrap-sass Bootstrap’s intention is to be a UI library for web developers to quickly get off the ground. It is
感想を書いている人の前提 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
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
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
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開発小史 えっ！？まだ
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とは？文字
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
React+Reduxアプリのチュートリアルを終えて本格的な開発に入るぐらいのタイミングで、ディレクトリ構成について悩み、他のプロジェクトを参考にしようと思って色々調べてみたのですが、これといってベストプラクティスは定まっていないように思えました。 当然プロジェクトの内容次第で変わってくる部分ではあるのですが、一般的なケースにおける知見として、開発が進んでいくにつれ、なんとなくこうした方が良いのではないか、というポイントが段々と見えてきたので共有します。 component component群については、componentとcontainerの2種類に大きく分け、reduxのconnectをしたcomponentをcontainerと定義するのが主流と思われます。 containerと呼ぶのにcomponentの大小や複雑さは関係なく、小さいパーツであってもconnectが必要なケースで
この記事は 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:
Retty Advent Calendar 2018 12日目の記事です。 昨日は @yongyu-li さんの Go interfaceの理解しにくいところ でした。 ちょうど現場でGolang触りはじめたばかりの自分には割とタイムリーな話題でした。 TL;DR めちゃくちゃ大げさなタイトルですが、単に Atomic Design を導入しようとした現場で 抜け漏れ 運用忘れて形骸化するリスク 運用メンバーがレビューの権威化する これらの課題を ESLint のルールを作ることで解決しようとした話です 完成した eslint-plugin-atomic-design はこちら これは「このプロジェクトから俺が居なくなったあと、俺のコードは一片も残らなくていいから、秩序だけでも残ってくれ……！駆動」で開発しました。 前提条件: よくある現場の話 Rettyのweb版は2011/6にリリース
“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種類以上提供している。
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! 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 o
この記事は食べログ Advent Calendar 2019 3日目の記事です。 はじめまして。食べログのフロントエンドチームに所属している@empitsu88です。 食べログの各種サービスのフロントエンド領域の設計・開発を担当しています。 先日、「食べログ テイクアウト」という新しいサービスをリリースしました。 こちらはiOSアプリですが、管理画面側をNuxt.js + TypeScriptで開発しています。 Nuxt.js + TypeScriptをプロダクトコードに使用するのは初めての試みだったので、メンテナブルなアプリケーションにするにはどうしたらいいか、日々模索しています。 今回はその技術を選定するに至った経緯や、チームで運用しているコーディングガイドラインの一部をご紹介します。 技術スタック Nuxt.js TypeScript Class API Sass + scoped
React開発 現場の教科書|マイナビブックス
備考 石橋 啓太（イシバシ ケイタ） 1987年生まれ。ウェブサイトデザインやHTML・CSSを中心にデザイナーとして4年ほど経験後、2014年5月に株式会社DMM.comラボ入社。 ネイティブアプリのUI/UXデザインやWebフロントエンド業務に携わる。現在では各種イベントでの登壇やOSSへのコミット活動を行う。デザインから実装まで担当できる強みを活かして、ユーザビリティ・アクセシビリティなどを重視した高品質なWeb開発を研究している。 サービスやガジェットなど新しいものが好き。梨とビールと音楽が好き（楽器は弾けない）。 ●編集者プロフィール 丸山 弘詩（マルヤマ ヒロシ） 書籍編集者。早稲田大学政治経済学部経済学科中退。国立大学大学院博士後期課程(システム生産科学専攻)編入、単位取得の上で満期退学。大手広告代理店勤務を経て、現在は書籍編集に加え、さまざまな分野のコンサルティング、プロダ
調べてみた経緯 Reactを勉強して３ヶ月くらい経つが本を読んで 「Atomic Design」というデザインシステムという概念が出てきて「なんじゃこれ！？」って思い調べてみました。 ReactとAtomic Designの相性がかなり良いらしいす。 Atomic Designとは Atomic Designとは、以下の5つの構造にページを分け、それぞれの役割を明確にし再利用可能なコンポーネントを作って行くことです。 Atoms(原子) Molecules(分子) Organisms(有機体) Templates(テンプレート) Pages(ページ) Atoms(原子) Atoms(原子)とは、UIを構築する最小単位です。なのでそれ以上に細かく分割することはできません。 ToDoListのモックで例をあげると このような構成のページをAtomに分けると以下のようになります。 テキストフォー
Atomic Design はデザインシステムを作る方法論となります。 デザインシステムというのはスタイルガイドやブランドのガイドラインなどを指すようです。 日本だとAbemaTV（アベマ TV）で使われています。 （Atomic Design を実案件に導入 - UI コンポーネントの粒度を明確化した結果と副産物 | ygoto3.comより） Atomic Design は今までのページ単位と違いコンポーネント単位でデザインカンプを作る考え方です。 作ったコンポーネント同士の組み合わせでページを作ります。 Atomic Design はコンポーネントの単位を 5 つに分けています。 その 5 つの単位は Atoms（原子）・Molecules（分子）・Organisms（有機体）・Templates（テンプレート）・Pages（ページ）です。 各コンポーネントの詳細は次のとおりです。
Style Guide Driven Development With Atomic Docs | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The following is a guest post by Nick Berens, a senior front-end developer at wisnet.com. Nick and his team have been building websites through custom style guides for years. Over those years, Nick has been building and evolving a tool to help with this process. I’ll let Nick explain both th
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
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS設計を勉強するならまずこれを見たら良いかも - Qiita
Corder's High 2017 「CSS設計方法論とその先」 レポート · Code of Duty
DIST.18 「Sketch時代のWebデザインワークフロー」 - 勉強会メモ - Qiita
Reactにおける責務（UI/ロジック）の切り分け - Leverages Tech Blog
Atomic Design という名のデザイン整理術
Matt Webb | Digital Management, UX & Design
A Look at Different Sass Architectures — SitePoint
「Vue.js 入門 基礎から実践アプリケーション開発まで」読了。感想 | saino.me
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
デザイナー向け - コンポーネント化について考える - Qiita
2018-04-01のJS: TypeScript 2.8、React 16.3.0、TensorFlow.js
ESLintの力で秩序あるAtomic Designを後世に残す | ryonkmr.com
Strategies for Keeping CSS Specificity Low | CSS-Tricks
Nuxt.js+TypeScriptのアプリケーションのためのコーディングガイドライン - Qiita
Atomic Design について調べて見た - Qiita
Atomic Designの考え方と利点・欠点 – wkr.
ReactAgent - The open-source React.js LLM Agent