サイボウズ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経験者とかいっぱいいるし、問題なん
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Panda CSS - The Origin Story
Panda CSS の出力結果から注意点を学ぶ
デザインの共通言語づくり〜デザイントークン導入前夜の思考実験 - Qiita