業務アプリのフロントエンド負債と向き合い、Tailwind CSS から Panda CSS への移行を決めた話
はじめに はじめまして。2025 年 10 月より、レバテック開発部にジョインした早川です。 私たちのチームでは、社内業務を効率化するための Web アプリケーションを Next.js（App Router）+ TypeScript で開発しています。フロントエンドのスタイリングには Tailwind CSS を採用しており、プロジェクト開始から 1 年半が経過してコードベースは 200 ファイルを超える規模になっていました。 私が入ったタイミングでは、すでにフロントエンドの技術選定に関わったメンバーは異動しており、デザイナーも不在。スタイルのルールが不明確なまま、画面数とコードが増え続けている状態でした。 初めてプロダクトに触れたとき、「画面ごとに見た目が少しずつ違っていて、統一感がないな」と感じました。業務に支障はないものの、文字サイズやフォントの太さ、余白の取り方が画面ごとにバラつい
Convex | The backend platform that keeps your app in sync
ComponentsIndependent, modular, TypeScript building blocks for your backend.
VoltAgent - Open Source TypeScript AI Agent Framework
import { openai } from "@ai-sdk/openai"; import { Agent, VoltAgent, createTriggers } from "@voltagent/core"; import { createPinoLogger } from "@voltagent/logger"; import { honoServer } from "@voltagent/server-hono"; import { weatherTool } from "./tools/weather"; const logger = createPinoLogger({ name: "with-slack", level: "info" }); const slackAgent = new Agent({ name: "slack-agent", instructions:
マルチプロダクトの価値と開発をスケールさせる、パターンレベルのデザインシステム
2024年4月23日に行われたFramework by Figmaでの登壇資料です
「Tailwind CSSめっちゃ負債になりそう」はそうでもないのでは、と思っている
@aumy_f, 2024-08-10-tailwind: Tailwind CSSは特異なコードベースの見た目から負債になりそうとたまに言われるが、俺はあんまりそう思っていないので説明したい。 Tailwind CSS 1 を一目見た人、特にCSS初学者のうちけっこうな割合が「これエグい負債になりそう」と思う気がする。なぜなら実際にそのような意見をちらほら見るからなんだけども、自分はあんまりそうは思っていないし、微妙に今のCSSについて誤解があるような空気も感じるのでその理由を説明したい2。JSXと同じで嬉しさを理解して使い慣れればなんてことはないのだけど、一方でその背景にある話はJSXより複雑なので単純に使って慣れればいいという話でもなさそう。 なお、この記事は私の以下の2ツイートを膨らませたものです。 Tailwind CSS、剥がすのは大変そうだけどそれをもって重大な負債になると評
Poku
🐷 What's Poku?A cross-platform test runner that brings the JavaScript essence back to testing. ⚡️ Quick Tutorials
GitHub - kolodny/safetest
Safetest is a powerful UI testing library that combines Playwright, Jest/Vitest, and React for a powerful end-to-end testing solution for applications and component testing. With Safetest, you can easily test the functionality and appearance of your application, ensuring that it works as expected and looks great on all devices. Safetest provides a seamless testing experience by integrating with yo
Microsoft Teamsで(Bot frameworkを使わずに)ボットを作るには
Microsoft Teamsの連携はSlackと比べると本当に使いづらい。 過去にQiitaで書いてたように、たとえばユーザメッセージを投稿するだけでも管理者の承認が必要だ。 今回は、Slackだと一瞬でできるボットユーザの作成がMicrosoft Teamsだとどのように達成できるかを書いてみる。 本当に骨が折れる。Microsoft Teams使いたくない。 そもそもボットが必要か？ たとえば GitHub ActionsからMicrosoft Teamsへデプロイ完了通知をしたい 定期リマインダーをMicrosoft Teamsへ表示したい とかそういう用途であれば、ボットではなくIncoming Webhookを使えばいい。（これならSlackのときと手間が大して変わらない） あるいは メンションされたら予め持っている答えを返すだけのbot アプリケーションのデプロイを受け付ける
EMO
We proposed EMO, an expressive audio-driven portrait-video generation framework. Input a single reference image and the vocal audio, e.g. talking and singing, our method can generate vocal avatar videos with expressive facial expressions, and various head poses, meanwhile, we can generate videos with any duration depending on the length of input video. Overview of the proposed method. Our framewor
Redirecting...
If you are not redirected automatically, follow this link to example.com.
Content-Disposition の filename という地雷。 (1個の観点で17個の脆弱性を見つけた話) - ぶるーたるごぶりん
English ver: https://gist.github.com/motoyasu-saburi/1b19ef18e96776fe90ba1b9f910fa714#file-lack_escape_content-disposition_filename-md TL;DR 1つのブラウザ、1つのプログラミング言語、15個の { Web Framework, HTTP Client ライブラリ, Email ライブラリ / Web Service 等} で脆弱性を見つけました。 見つけた脆弱性は、全て 1つの観点で発見した (多分 50-80 くらいのプロダクトの調査をした)。 RFC の記載では、（かなりわかりにくく）この問題に対する要件が記載されており、WHATWG > HTML Spec の方はしっかりと書かれているといった状況にある。 この問題は、 Content-Dispo
Tailwind考 - uhyo/blog
皆さんこんにちは。最近とある事情でTailwind CSSにわりと真剣に向き合わないといけなくなった筆者です。 Tailwind CSSの話題は、Twitterのフロントエンド界隈では定番のトークテーマのひとつです。しかし、筆者の考えを文章にまとめたことは無かったので、このたびブログ記事にすることにしました。 結論筆者が一番みなさんに伝えたいことは、Tailwind CSSは考え無しに採用してよい技術ではなく、採用するには熟慮が必要だということです。とくに、フロントエンドのスターターキット的なプロジェクトの中にTailwind CSSが混ざっていることがありますが、あれはけっこうな罠です。気軽に採用すべきものではありません。 筆者の考えでは、Tailwind CSSの採用を考慮に入れてよいのは次の2つの場合です。 デザインにこだわりがなく、最低限整っていればいい場合。デザイナー不在のプロジ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Fix Consumer Electronics
Konva - JavaScript Canvas 2d Library
One, a React Framework
FlyonUI - Free Tailwind CSS UI Components Library
Unkey
よりシンプルになる Svelte の世界
20230118 kazaneya TeckTalk3 Data Standards and Open Data Initiatives by the Digital Agency of Japan
Gluonjs – Home