サイボウズOfficeのフロントエンド刷新（DOGOプロジェクト) をやってます！ - Cybozu Inside Out | サイボウズエンジニアのブログ
DOGOプロジェクトのマスコット こんにちは。サイボウズOffice開発チームの西谷です。 昨年より、私たちは”DOGO”と銘打ち、サイボウズOfficeのフロントエンド部分をNext.js App Routerを用いて刷新しています。 本ブログではこの刷新プロジェクトの概要やこれまでの取り組みについてご紹介します。 プロジェクト発足の背景 刷新の方針 刷新後のサイボウズOfficeを支える技術 アプリケーションフレームワーク モニタリング テスト インフラ CI・CD これまでの取り組み Next.js側で画面のルーティングを制御する リリースパイプラインの構築 全画面共通部分の実装 今後の取り組み メンバー募集しています！ プロジェクト発足の背景 サイボウズOfficeはこれまで、パッケージソフトウェアとしていくつものバージョンを重ね、クラウドサービスへ転身し、時代に合わせて様々な形に
Building Panda CSS was one of the most inspiring moments of my career; it reminded me of the period before launching Chakra UI. I knew it would be very "Node" heavy, and I needed to learn more about Abstract Syntax Trees (ASTs). I was familiar with using basic modules like fs, path, and small bits of express to build APIs, but that was about it. Creating a CSS framework that delivers a similar DX
Tailwind CSSをカオスにしないための5つのベストプラクティス（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: 5 best practices for preventing chaos in Tailwind CSS—Martian Chronicles, Evil Martians’ team blog 原文公開日: 2023/10/10 原著者: Nina Torgunakova（フロントエンドエンジニア）、Travis Turner（技術編集者） サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 日本語ブログ: 合同会社イービルマーシャンズ - Qiita 章立てや強調の一部は原文から変更しています。 参考: Tailwind CSS - Rapidly build modern webs
The Design System Ecosystem
What does a mature, end-to-end design system look like in a big, complex organization? What are all the moving pieces, and how do they hang together as a well-considered architecture? What’s required and what’s optional? Hold onto your butts, because we’re going to go deep on this one. Let’s start here: a design system’s relationship to digital products can be boiled down like so: There’s a design
Panda CSS は何を出力するのか？ 先日 Panda CSS がリリースされ、次の紹介記事を書きました。 その時点では、ドキュメントの内容に加えて Next.js に組み込んで動きを見てみたものをベースに書きました。ただ、実際に使うことを考えると、一体どんなファイルが出力されるのかについて理解が不足しているため、もう少し把握しておきたいところです。 ということで今回は、Panda CSS が具体的に出力するファイルの内容を覗いて、どういった点に注意すべきか見てみましょう、という記事です。 CLI のセットアップ 出力内容を確認できれば良いので、特にその他フレームワークなどは導入せず、CLI ベースでのビルドをセットアップします。（※ドキュメント通りに進めるため詳細は割愛します） デフォルトでの出力結果を見てみる まずは、CSS を一箇所も定義しない状態で pnpm panda を実行
Best Practices For Naming Design Tokens, Components And Variables — Smashing Magazine
How can we get better at naming? This post is dedicated to naming conventions, tips, and real-world examples that help you name things in a robust and flexible way. Naming is hard. As designers and developers, we often struggle finding the right name — for a design token, colors, UI components, HTML classes, and variables. Sometimes, the names we choose are too generic, so it’s difficult to unders
この記事は弁護士ドットコムAdvent Calendar 2022の10日目の記事です。 昨日は@mmorinoさんでした。 デザインリニューアルのその後 弊社ではtoC向けのサービスサイトを2018年から漸進的にリニューアルしてきました。 いまもまさにサービスを提供し続けている「生きたプロダクト」に手を入れていくプロセスというのはなかなか難しいものでして、見た目やコードが綺麗になったからといって、それで仕事が終わったことにはならないものです。 リニューアルという仕事自体はよく行われることですが、サイトのリニューアルをすると一口にいっても、見た目も含めて一気に刷新するのか、それとも改善を積み重ねていくようなやり方をするかの判断で迷ったことがあるという制作担当の方は割と多いのではないでしょうか。 2018年にスタートした弊社のリニューアルは、ページ単位で部分的に手を入れる形を取りつつも、見た
Introducing Angular v17
Last month marked the 13th anniversary of Angular’s red shield. AngularJS was the starting point for a new wave of JavaScript frameworks emerging to support the increasing need for rich web experiences. Today with a new look and a set of forward-thinking features we bring everyone along to the future with version 17, setting new standards for performance and developer experience. In v17 we’re happ
歳末！モバイルアプリ開発の “のびしろ” 大放出祭 〜バクラク申請・経費精算編〜 - LayerX エンジニアブログ
バクラク申請・経費精算のモバイルアプリを開発している id:kikuchy です。9日ぶりですね！初見だという方はこちらの記事もどうぞ。 ID/共通管理チームの id:convto さんに教えてもらったCharachorder Oneという変形キーボードを自分用のクリスマスプレゼントに購入しました。 入力が難しすぎてまだ数字が入力できませんが、複数種の文字を入力する際に指を動かさなくて良い、というのは大変画期的だなという体感です。使いこなせると爆速で文字入力できるそうなので頑張ります。 この記事は LayerXテックアドカレ2023 の36日目の記事です。明日は @civitaspo さんが登場です！ 今回はのびしろウィーク企画ということで、バクラク申請・経費精算のモバイルアプリの「のびしろ」を大公開します！ のびしろウィークとは 「LayerXってCTO経験者とかいっぱいいるし、問題なん
I recently published an article outlining the need for a Global Design System. In my post I stated: A Global Design System would improve the quality and accessibility of the world’s web experiences, save the world’s web designers and developers millions of hours, and make better use of our collective human potential. I’m thrilled to report back that many, many people feel the same. The response to
crowdworks.jp のデザインシステム構築活動を振り返る 2023 (実装編) - クラウドワークス エンジニアブログ
この記事はクラウドワークス Advent Calendar 2023 シリーズ 1 の 21 日目及び、デザインシステム Advent Calendar 2023 21 日目の記事です。 こんにちは、crowdworks.jp のデザインシステム構築に携わっているエンジニアの @t0yohei です。 2023 年は crowdworks.jp にとってデザインシステムの実装元年でした。そんな実装元年において、エンジニアとして実施したことを書いてみました。 デザインシステムを実装中の方、これからデザインシステムを実装していこうという方の参考になれば幸いです。 目次 デザインシステムを学ぶ Design Token の実装反映 Design Token の画面適用 全画面で表示される Footer への Design Token 適用 Component Library の導入方針決め Co
デザイントークンに詳しくなれるスクラップ
デザイントークンとは？ デザイントークンとは、デザインシステムの特定の値を表すデータ。 color、spacing、typography scale など、デザインシステムを構成する要素。 これらの値は、プロダクトチームが意図的に決定します。デザイントークンは、一般的には CSS 変数としてコードベースに反映されます。single source of truth を維持し、デザインツールと開発ツールを自動的に同期させます。 そして、デザイントークンには仕様があります。 例えば、チームが Token Studio をやめて Anima を使用する場合、Token Studio からエクスポートするトークンが Anima のトークン形式と互換性があることを確認しなければなりません。 どのツールから移行する場合でも、データ構造に不整合が生じる可能性が高いと、デザイントークンを記述する決定的な方法
storybook-design-token Addon | Storybook: Frontend workshop for UI development
⚠️ This is the documentation for v2 which supports Storybook v6 and below. Please check the v3 branch for the beta release supporting Storybook v7+. ⚠️ Storybook Design Token Addon Display design token documentation generated from your stylesheets and icon files. Preview design token changes in the browser. Add your design tokens to your Storybook Docs pages using the custom Doc Blocks. Show me th
Style-Dictionary V4 release plans - Figma Tokens
Style-Dictionary v4.0.0 full release is planned for Q2 2024. Together with the full release we will also release @tokens-studio/sd-transforms v1.0.0, meaning it will be out of alpha state and be stable from API perspective. And then there's the style-dictionary configurator project, which will be updated to Style-Dictionary v4 and sd-transforms v1. What does this mean for you? The Configurator wil
Figma Variables at Vodafone UK: how we structured taxonomy for a complex multi-brand design system
When we started working on this project leading up to the Variables launch at Config 2023, we came across lots of insightful information albeit no ready-made solution for our use case, nor the discovery process that led to other frameworks’ informed decisions. Therefore, we hope documenting our journey may provide some inspiration for anyone else starting to apply Variables to their design system.
What does a mature, end-to-end design system look like in a big, complex organization? What are all the moving pieces, and how do they hang together in a well-considered architecture? What’s required and what’s optional? Hold onto your butts, because we’re going to go deep on this one. Let’s start here: a design system’s relationship to digital products can be boiled down like so: The virtuous cyc
Design token(デザイントークン)という名前が普及してからしばしの時は経ちますが、いまだによくトークンを理解しきれていません。 そんなデザイナー歴18年目になる私なりに、Tokenを理解し、わかりやすく伝えようと思い記事を書いています。 どこまで正確かはわかりませんが、今現在の私の理解を書き綴りますので、解釈は自己責任でお願いします。 トークンの必要性さて、デザイントークンとはなんでしょう？ 色々な記事があるものの、すごくわかりやすくてこれを見れば一目稜線！というものにまだ出会ったことがありません。 デザインシステムとトークンは何が違うの？ トークンを使うメリットは？ トークンを取り入れた方が良いの？ と、ここ数年試行錯誤していますが、結論からいうと 長期のプロジェクトやデザインルールを一括管理したいプロジェクトでは取り入れた方が良い 短期プロジェクトや単発ページ修正しか発生しな
Theme 第 150 回のテーマは 2024 年 5 月の Monthly Ecosystem です。 Show Note React 19 Beta - React https://react.dev/blog/2024/04/25/react-19 useActionSate の追加 useFormState には isPending がなく、その場合は useFormStatus を利用する必要があるがあったがそれらを統合した汎用的 hook として用意された useFormStatus 親の form のステータスを読む hook useOptimistic 楽観的更新を行う hook 先にユーザーに結果を返してしまい裏で実際の実行が終わると実際の結果を反映させることができる use Promise や Context を実行する関数 コンポーネントの top level 以外で
最新のIT技術を駆使して音楽関連サービスを展開しています。 日々の活動内容から得た知識をお届けする開発ブログです。 この記事はレコチョク Advent Calendar 2023の13日目の記事となります。 はじめに レコチョクの河野です。iOSアプリ開発Gに所属しています。 iOSアプリの開発をやってきていましたが、最近では実装以外にもスクラムマスターをやったり、デザイン領域の仕事に携わることが増えています。2023年の音楽にまつわる個人的ベストエピソードは「『乃木坂46 真夏の全国ツアー2023 東京公演』に全日参戦した上、最終日のキャプテン梅澤美波のMCに感動しすぎたあまり、前日の終演後にも行ったちょっと高めの焼肉屋さんに最終日終演後も赴き、めちゃくちゃ余韻に浸りまくった」です。よろしくお願いします。 さて、今回は今年自分が携わった業務のうちP!TNE(ピトネ)という新サービスの開発
はじめまして。去年の８月からスペースマーケットのフロントエンドチームにJoinしましたsei63です。 アイコンから分かるように星のカービィが好きなもので、星のカービィ ディスカバリーの発売をwktkで楽しみにしています。 コピー能力が進化するなんて。。。さらに育成要素も入れてくるとは思いませんでした。 styled-componentsの課題スペースマーケットでは長らく styled-components を使ってきましたが、タグ一つ一つに対してスタイルを当てるようなインターフェースの為以下のような課題感がありました。 1.個別にスタイルを当てる都合上、命名が無理やりなものになっていく const StyledListHeading = styled.div` // リスト要素の見出しのテキストのスタイル `; const StyledListHeadingEmphasis = styl
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Panda CSS - The Origin Story
Panda CSS の出力結果から注意点を学ぶ
デザインの共通言語づくり〜デザイントークン導入前夜の思考実験 - Qiita
What's Next for a Global Design System
The Design System Ecosystem | Big Medium
Token(トークン)とDesign System(デザインシステム)の違いとは？｜Nviveto
ep150 Monthly Ecosystem 202405 | mozaic.fm
【デザイン】新規サービス開発でデザイントークンを導入してみました！ | レコチョクのエンジニアブログ
Chakra UIのCustom Themeで型補完を効かせる｜sei63