[[toc]] This post will be a bit longer than usual. It's quite a big announcement to me, and there are many things I want to talk about. I'll be appreciated if you take the time to read through it. The table of contents is hidden on the left if you are on a desktop. Hope you enjoy :) 中文 Chinese Version What is Atomic CSS? Let's first give a proper definition to Atomic CSS: From this article by John
HTMLの属性にディレクティブを指定してリアクティブな動作を実装できるJavaScriptフレームワーク・「Alpine.js」 - かちびと.net
Alpine.jsはHTMLの属性にディレクティブを指定してリアクティブな動作を実装できるJavaScriptフレームワークです vue.jsやreact.jsといったフレームワークのリアクティブ且つ宣言的な性質を低コストで提供してくれる、というもの 開発者はTailwind.cssのJS版のようなもの、と説明しています Alpine.jsでは13のディレクティブと、5のマジックプロパティと呼ばれるものを使う事が出来ます。Vue.jsとほぼ同じ機能を使える、という認識で良いと思います <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.10.1/dist/alpine.js" defer></script> ↑ まずはスクリプトを読みこみます 試しに何か作ってみましょう <div x-data="{selected:nul
プロダクトエンジニアリング部の海老澤です。 普段は LIFULL HOME'S の賃貸部門のフロントエンド開発をしています。 近年、LIFULL の開発部門では「開発生産性」という言葉が取り沙汰されるようになりました。 LIFULL HOME'Sの主要リポジトリは10年以上運用され続け、今も多くの開発者によって日々改修され続けています。 長い年月の中で小さな設計ミスも積み重なって大きくなり、ちょっとした実装でも入念な調査が必要となり開発生産低下の要因となっていました。 また10年以上前に採用したフレームワークで稼働しているため、今ではドキュメントを探すのも一苦労という具合です。 そこで主要開発部門では「自部門の機能はマイクロサービスへと切り離し、各々で面倒を見る」という方針になりました。 賃貸部門も同様に機能の切り離しを始め、先日「物件詳細ページ」のマイクロサービス化を行いました。 今回は
The Fediverse has been a hot topic of discussion lately, with thousands, if not millions, of new users creating accounts on platforms like Mastodon to either move entirely to "the other side" or experiment and learn about this new social network. Today we're introducing Wildebeest, an open-source, easy-to-deploy ActivityPub and Mastodon-compatible server built entirely on top of Cloudflare's Super
コンピューティング基盤部の三吉（sankichi92）です。 アークエッジ・スペースでは、衛星リモートセンシング1による地球観測データ（以下、「衛星データ」）を活用したソリューションを提供する Web GIS2 アプリの開発をはじめました。 この記事では、プロジェクトの最初期にあたり、プロダクトのさまざまな可能性を高速に検証するために行った技術的な取り組みを紹介します。 Web GIS アプリをつくる背景 プロトタイプで検証するもの スモールスタートのための技術選定 SPA PMTiles GitHub Pages 開発をはじめてからの改善 React Router 導入 S3 + CloudFront 導入 Amazon Location Service 導入 プロトタイピングの結果 今後の課題と展望 データ基盤、ジョブ管理基盤 動的タイル生成への対応 解析の高度化 Web GIS エン
こんにちは。エンジニアの中島です。 現在はアクセシビリティ推進グループ（以下推進グループ）に在籍しています。 以前同組織の紹介記事をいくつかあげましたが、その通り弊社は自社の運営するサービスをアクセシブルにするため日々奮闘しています。 www.lifull.blog www.lifull.blog 以前の記事ではどういったマインドで同組織ができたか、どのように推進しているかについて話ました。 今回は、そういった活動の中でいくつか技術的な副産物が生まれたのでその話をしようと思います。 キーボード操作編 CSSの概念距離 さいごに キーボード操作編 アクセシビリティ対応にあたって、基本的なやることの一つにUIをキーボード操作可能にするという作業があります。 自社のサービスにもキーボード操作不能ないくつかのUIの存在を認識しており、それらを実際に直していくということをしています。 修正時、場合に
ep.58 デザインとフロントエンドの関係を Tailwind CSS から考えよう | UIT INSIDE
@spring-raining が @f_subal @potato4d に Tailwind CSS やフロントエンドにおける CSS 設計について話を聞きました。 ゲスト紹介 ピクシブ株式会社 フロントエンドエンジニア Tailwind.css + classNames() を型安全に扱う TypeScript Language Service Plugin を書いた Tailwind.cssとは https://tailwindcss.com/ Utility-firstなCSSフレームワーク CSSのプロパティがそのままクラス名と紐付く設計 Atomic CSS: https://acss.io/ 高いカスタマイズ性も特長 実務で感じたTailwindの特長 pixivのデザインシステムを構築していく際の様々な問題 最初はReact componentを横展開していく計画だったが、
きっかけ 私は今まで Pages Router でプロジェクトの開発をしてきました。今の所、具体的な新規で開発する案件の話はないけど今後 App Router で開発するときにどうゆうフォルダ構成にすれば良いか悩んだからまとめようかなと思ったのがきっかけです。 環境について node: v18.18.2 npm: 9.8.1 react: 18 系 next.js: 13.5.6 具体的にどんなことに悩んだのか /app の中で style や util 系関数や component なんかも入れた方がいいの？ それとも/app を/pages と同じように扱う方がいいの？ この 2 点です。Private Folders やら Route Groups なんかもあったりして Next.js のファイルベースルーティングはいろんなことが柔軟にできるようになった印象です。 しかし、柔軟だから
おそらく日本語の商業出版の技術書ではほぼ初となる[1]、Tailwind CSSの本格的な入門書を発売します（そして私にとっては初の単著となります！）。 技術評論社様の「エンジニア選書シリーズ」という比較的新しめのレーベルです。表紙が風車なので、愛称として「風車（ふうしゃ）本」とでも呼んでもらえると喜びます！ 物理版＆電子版の両方が出ます。Amazonほか各種ECサイトなどでお求めください。 コンセプトと構成 この本はHTMLやCSSそのものの基礎は扱いません。 「すでにCSSを使ったことがあり、CSSの設計で苦しみを味わってきた開発者（本文まえがきより引用）」が対象読者です。 コンセプトとしてはTailwind CSSというフレームワークの入門書である以上に、ユーティリティファーストという思想への入門書を志向しています。全9章ですが、どの章も概ね以下の3つのテーマを巡って展開しています。
【Screenshot-to-Code】スクショを貼るとWebサイトを5秒でコピーしてくれる裏技AIを使ってみた | WEEL
【Screenshot-to-Code】スクショを貼るとWebサイトを5秒でコピーしてくれる裏技AIを使ってみた 2024 4/03 WEELメディア事業部LLMリサーチャーのゆうやです。 screenshot-to-codeというスクリーンショットを解析してHTML/Tailwind CSSに変換してくれるオープンソースアプリケーションが公開されました。 このアプリケーションは、以下の動画のようにスクリーンショットのUIをかなりの精度で再現してくれます。 画像の解析、UIの生成はGPT-4 VisionとDALL-E 3を使用しているため、超高性能なのは間違いなしです。 そんなscreenshot-to-codeは、公開から1週間も経っていないですが、GitHubのスター数は4,200を超えており、大注目されています。 今回は、screenshot-to-codeの概要や使ってみた感想を
Ant Designで始める管理画面開発
こんにちは、Ubieデザインエンジニアの takanoripです。 最近はずっと社内管理画面を開発しており、そのフロントエンド開発にAnt Design（Antd）を採用してみたので感想と注意が必要なポイントについてまとめました。 Ant Design？ Ant DesignはAnt Group（中国アリババグループの金融関連会社）が開発しているUIライブラリです。現在はReactのコンポーネントや周辺ライブラリが公開されています。 なぜAntdを選択したか 今回の管理画面開発でAntdを採用した理由は次の6つです。 コンポーネントの種類が十分豊富であること できる限り新規でコンポーネントを作らずに実装が進められることが重要 特にRange PickerやComboBoxなど複雑Form用コンポーネントが充実していること アントグループが開発をしていて十分に歴史があり現在も活発に開発がされ
Tailwind CSSにおいて、スタイルの組み合わせを抽象化したいと考えたとき、対処としてはいくつかの方法が考えられる。 もっとも一般的なのは、コンポーネントやパーシャルとして、クラス属性値とHTMLをセットで抽出する方法。 <template> <div> <img class="rounded" :src="img" :alt="imgAlt" /> <div class="mt-2"> <div> <div class="text-xs font-bold uppercase tracking-wider text-slate-600">{{ eyebrow }}</div> <div class="leading-snug font-bold text-slate-700"> <a :href="url" class="hover:underline">{{ title }}</
Claude3.5の新機能！Artifacts：Claudeとの新しい対話方法 – 完全ガイド - Sun wood AI labs.2
はじめに みなさん、こんにちは！今日は、AI技術の世界に革命を起こす新機能「Artifacts（アーティファクツ）」について、わかりやすくお話ししていきます。Claudeという人工知能と、より効果的に協力して作業ができるようになる、とてもワクワクする機能なんです。 Artifactsとは何か？ 簡単な説明 Artifactsは、Claude.aiで導入された新機能です。ユーザーがClaudeに何かを作ってもらう時、その成果物を会話とは別の専用ウィンドウで見ることができます。つまり、会話しながら同時に作品を見て編集できる、そんな魔法のようなツールなんです。 Artifactsの主な特徴 リアルタイムの表示: Claudeが作った内容をすぐに見ることができます。 編集可能: 表示された内容を自由に編集できます。 作業の継続性: 一度作ったものを基に、さらに改良を加えていけます。 Artifac
ログラスのReactの技術選定について🐳
はじめに こんにちはログラスのフロントエンドエンジニアの @Yuiiitoto です。 「次世代型経営管理クラウド」のSaaSを開発しています。 今回Reactを使って開発しているログラスのフロントエンドがどういう技術を使っているのか、なぜそれを選んだかについて解説していきます。 Reactはライブラリの数が豊富な反面で群雄割拠している領域が多く、技術選定がとても大変です。 同じ悩みを抱えるフロントエンドエンジニアの方に少しでも力になれればと思って記事にしました。 ログラスのフロントエンド 似たようなサービスの場合に特に参考にできる場合が多いと思うので、記事の前提としているサービスについて少し説明します。 ログラスはいわゆるtoBのSaaSの業務システムみたいな立ち位置です。 ほぼ全てのページに認証が入り、画面の中の要素はtoCのサイトより多めです。 Next.jsで構成されていて、SSG
Tailwind CSS実践入門 ～まず作ってから、あとで共通化する Tailwind CSS実践入門 第2章 Tailwind CSSの基本 ──開発環境へのインストール、設定ファイルの記述、エディタの設定 本章では、開発環境にTailwindをインストールする方法に加えて、設定ファイルの記述方法や、エディタの設定などについて説明します。執筆時点でのTailwindの最新バージョンである、3.2.4の使用を前提にします。 Tailwind CSSのインストール Tailwindは、さまざまな開発環境にインストールして使用できます。Tailwindに関連するアプローチとして、CSS in JSやCSS Modulesなどのツールもありますが、これらを使用できるのは一部のSPA（Single Page Application）などの環境だけに限られます。しかしTailwindであれ
v0 とは v0 は vercel 社が提供する React ベース[1]の UI を作ることができる生成 AI サービスです。 こちらの指示をもとに、 shadcn/ui や tailwind を使って UI を構築することができます。 先日、public Beta 版が公開され、会話形式で UI を逐次生成できるようになりました。 これまでは、プロンプトを v0 に投げると数パターン実装例を提案してくれていましたが、 ついに会話でやりとりをしながらコンポーネントをブラッシュアップしていくことが出来るようになりました。 早速ログインして試してみます。 できることとしては下記の通りです。(2024年9月1日現在) ジェネレーティブAIを使って、shadcn/uiとTailwind CSSに基づいたコピー＆ペーストしやすいReactコードを作成します。 プロンプトを送信するか画像をアップロー
Tailwind CSSのメリットとデメリット
フロントエンドのデベロッパーとして活躍しているAhmad Shadeed氏による、Tailwind CSSのメリットとデメリット、所感を紹介します。 Tailwind CSSの最近の人気はすごいですね。すでに使用している人、気になっている人も多いと思います。Tailwind CSSとどのように向き合っていくとよいか、そのきっかけになればと思います。 A Look at Tailwind CSS by Ahmad Shadeed Tailwind CSSについて詳しく知りたい人は、以前の記事も参考にどうぞ。 Tailwind CSSが私には合わなかった理由 Tailwind CSSのカスタマイズ方法を解説 Tailwind CSSの便利な使い方、レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる CSSを書くのが劇的に楽になる！ユーティリティファーストのCSSフレーム
Blog をリニューアルするにあたり、今までの Movable Type でテンプレート作って、という手法から、Movable Type は JSON データの書き出しだけ担当させて、フロントエンドは Astro と Tailwind CSS で開発する形に切り替えたので、その概要を簡単にメモ。 この Blog は立ち上げ当初から Movable Type で運用していますが、MT タグを書いて、テンプレートを作って、という一般的な運用っていうんですかね？ それをやめて、Movable Type は記事データの管理と JSON を書き出す役割だけにして、フロントエンドは Astro + Tailwind CSS でリニューアルしました。 面倒だったのでデザインは大きく変えず、ぱっと見はリニューアルしたのがわかりにくい感じになっていますが、Movable Type とフロントエンドを完全に分
Sailboat UI - Modern UI component library for Tailwind CSS
Build your website quickly with Sailboat UISailboat UI is a modern UI component library for Tailwind CSS. Get started with 150+ open-source Tailwind CSS components, and make it easy to build your products.
CSSにおける汎用化の先送り、ユーティリティファーストCSS、レイアウトプリミティブ - yuhei blog
CSSは普通、セレクタの記述から始まる。目の前にあるHTML片に対してどのようなスタイリングを施すかという前に、いかにしてそのHTML片を選択するかという意識が先に来る。あらかじめ完成したHTML文書へ向けてスタイルを適用していくのであればそれでうまくやれるのかもしれない。だが広く行われているウェブデザインの制作では、まずゴールとして定められた描画結果だけがあり、そこから逆算してHTMLとCSSを書き進めていく。つまり個別の結果だけがある状態で実装に取り掛かることになる。実装のために必要な構造化はたいてい後手に回る。 それでもCSSがセレクタから始まることは変わらない。実装を進めるためにはまずセレクタを書かなければならない。セレクタは規則の根幹である。バグを減らし、開発を効率的にするためには、あらゆるスタイリングの意図をセレクタに反映させるのが基本だ。しかし最初から正確にその意図を把握でき
Tailwind CSS for Railsを使って、NodeをインストールせずにTailwind CSS 3を導入する
Tailwind CSS for Railsを使って、NodeをインストールせずにTailwind CSS 3を導入する みなさんこんにちは。この記事はRuby on Rails Advent Calendar 2021の20日目の記事です。 20日は誰も埋めていなかったようなので（と言いつつもう日付も変わってしまっているのですが）、Tailwind CSS for Railsというgemについて書きます。 Tailwind CSSとRails Tailwind CSSは最近流行のCSSフレームワークで、Utility-Firstと呼ばれている思想に基づいています。これはある意味、従来のCSS設計のベストプラクティスの真逆を行くようなもので、class="flex items-baseline mt-4 mb-6 pb-6 border-b border-gray-200"みたいなスタイル
SmartHRのフロントエンドの技術的変遷 ── 技術顧問のkoba04と語るこれまでとこれから - SmartHR Tech Blog
マルチプロダクト戦略を掲げてプロダクトを急速に増やし続けている SmartHR のフロントエンド領域について、2018年から SmartHR に参加しているフロントエンドエンジニアの nabeliwo と技術顧問の koba04 が、これまでの振り返りと今後の展望を話しました。 SmartHR のフロントエンドでどんな技術が使われてきてどんな課題と向き合ってきたのか、そして今現在取り組んでいる課題や SmartHR ではどんなフロントエンドエンジニアが求められるのかなど、幅広いテーマが出てきました。 この記事ではその模様をお届けします。 目次 フロントエンドの Rails からの脱却とフロントエンド領域の確立 SmartHR UI の誕生 プロダクトの急増 複雑化する技術課題 テストの整備とロジック共通化の取り組み Next.js の導入 新たな技術的挑戦 フロントエンドミーティングの見直
not Tailwind CSS プロジェクトを Tailwind CSS に移行する機会があったのでアプローチを紹介します。 ポイント ベースが16px ではない場合、tailwind-pixel-perfect-preset で rem to px を行い、 Taiwlind CSS のサイズ指定(h-4など）を踏襲する tw- prefix をつけて既存スタイルの競合を回避する Tailwind CSS のノーマライズスタイルを無効にして既存スタイルへの影響を回避する ノーマライズスタイルをスコープ化して既存スタイルへの影響を防ぎつつ Tailwind CSS 正確なスタイルを実現する import { isolateForComponents, scopedPreflightStyles, } from "tailwindcss-scoped-preflight"; /** @ty
CloudRun + Go + Next.js で画像閲覧に特化した Twitter クライアントを作ったはなし
zenn 初投稿になります、kimihiro_n です。 先日リリースした個人開発のアプリケーションのはなしをしたいと思います。 作ったもの 最初に宣伝かねて作ったものの紹介を。 イラスト投下閲覧用に Twitter を使っているのですが、公式 Twitter だとイラスト以外の投稿もたくさん混ざって追いづらかったり、最適化の影響で見逃してしまうツイートがあったりと不便さを感じていました。 Twitter API を使ってこの辺いい感じにフィルタリングしたら快適になるんじゃないかと思い Web アプリケーションとして作ってみることにしました。 自分のタイムラインやリストをフィルタリングして表示するだけのアプリケーションですが Twitter で絵師さんを追いたいみたいな用途だと便利に使えると思うので是非試してみていただければと。 後述しますが PWA(Progressive web app
コンポーネント粒度と依存関係チェック feat. STORES予約フロントエンド - STORES Product Blog
はじめに STORES 予約 でエンジニアをしているyuta07です。 STORES 予約 の管理画面の新規開発はNext.jsを用いて開発しているのですが、日々のカジュアル面談や採用活動でフロントエンドの技術状況についての質問を受けることが増えてきました。 今回は STORES 予約 のフロントエンド開発の中でもコンポーネント粒度と依存関係チェックについて紹介します。 はじめに 主な使用技術 コンポーネントの分類 Pages Templates Organisms Molecules Atoms 依存関係チェック Eslintによる依存ルール おわりに 主な使用技術 Next.js、React、TypeScriptを採用。 スタイルはTailwind CSSを使用。 STORES 全体で統一されているconfigをユーティリティクラス（フォント・カラー等）として使用してスタイリングしてい
どうも、まさとらん（@0310lan）です！ 今回は、さまざまなWebサービスが提供する「.new」ドメインを用途別にカテゴライズしてご紹介します！ 例えば、Googleであれば「sheets.new」というドメインにアクセスすると、新規のスプレッドシートが作成できます。同じように、他のWebサービスにも多彩な「.new」ドメインが提供されています。Web開発やデザイン、ドキュメント作成など、さまざまなシーンで活用できるものばかりです。 その中でも、本記事ではなるべくログインせず、アクセスするだけで即座に起動できるWebサービスを厳選しています。 ご興味ある方は、ぜひ参考にしてください！ ■「js.new」でJavaScriptによるWeb開発をする！ 【 js.new 】 「js.new」もしくは「ts.new」とブラウザのアドレスバーに入力してアクセスすると、JavaScript /
ReactのCSSの選択肢を比較してみた
世はReact with CSS 戦国時代...! Pure CSS CSS Modules Styled Components(CSS in JS) Emotion(CSS in JS) Linaria(CSS in JS) Tailwind CSS Framework(Chakura UIなど) と、Reactと共に使うCSSの選択肢は非常に多岐に渡り、学習者を混乱に陥れることもしばしばかと思います。 私が実装経験がない Tailwind CSS Framework については今回語りませんが、それ以外のCSS実装方法を全く同じコンポーネントを実装することで比較してみました。 下記が実際にコーディングしたGitHubになります。 Pure CSS 通常のCSSです。 CSSは全てがグローバルで管理されてしまうので保守・管理にコストがかかり、崩壊しやすいです。 なのでBEMなどのCSS設
この記事では、Webデザインで注目したい最新オンラインツール48個をまとめてご紹介します。 2021年に入って公開された新しいツールやサービスが中心で、Webデザイン作業の効率化や作業スピードがアップする便利ツールが揃います。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. イラスト系ライブラリ 6. アイコンツール 7. コラボ、リモートワークツール 8. 面白、クリエイティブツール Web制作が面白いほどはかどる！便利な最新オンラインツールまとめ Web制作便利ツール SVG Shape Geneartor 3色まで選択可能でオーガニックな見た目のSVGシェイプをランダムで作成できるジェネレーターで、ランディングページなどあらゆるデザインのアクセントになりそ
この記事は BASE Advent Calendar 2021 の6日目の記事です。 フロントエンドエンジニアの @rry です。 今年の4月に BASE にジョインしてから、アクセシビリティに関する取り組みを少しずつ行ってきました。 BASE ではこれまでアクセシビリティに関する取り組みは局所的にしか行われておらず、また私自身もアクセシビリティについて知見が全くない状態でした。このような状態からアクセシビリティやっていきを具体的にどのようにして進めているかについてご紹介したいと思います。 アクセシビリティとは？何故アクセシビリティに取り組むのか？ アクセシビリティとは | ウェブアクセシビリティ基盤委員会（WAIC） 一般にアクセシビリティとは、アクセスのしやすさを意味します。転じて、製品やサービスの利用しやすさという意味でも使われます。 似た意味をもつ言葉にユーザビリティがありますが、
GitHub - ixkaito/nextsss: Next.js static site starter including full setup for TypeScript, Tailwind CSS, Google Analytics, Next SEO, etc.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
LINEヤフーのフロントエンド技術を明らかにするState of LY Frontend 2024実施レポート
LINEヤフーでは、2024年の10月に社内のWebフロントエンド開発に携わる社内のメンバーを対象に、昨今のWebフロントエンド関連のトレンドや周辺ツールの利用状況について調査するアンケート「State of LY Frontend 2024」を実施しました。これは、以前は「UIT Global Survey」とも呼ばれていた取り組みの後継でもあり、毎年社内に向けて実施されているものです（昨年度の実施レポート）。同様の取り組みとして State of JavaScript や State of CSS が知られていますが、そのLINEヤフー版と想像していただけるとわかりやすいかと思います。 今回のサーベイは、合併会社誕生後1年がたち、新会社の体制が整って以来初めて広く周知されたものとなりました。そのため、Webフロントエンド開発者だけで 342人 という、単独のグループ社員としてはあまり例
jQueryの作者による「毎日コードを書く」習慣の効果と自分で半年やってみた感想 - パンダのプログラミングブログ
毎日コードを書くという習慣 jQueryの作者John Resig氏による「Write Code Every Day」というブログを読んだ。この記事は氏のブログの紹介と、自分もかつて半年ほどやっていたので軽い振り返りだ。 氏は、初めサイドプロジェクトで休日が消費され、しかもいいコードが書けなかった時の喪失感やプレッシャーを抱えていたそうだ。 ある日、Jennifer Dewalt氏が180日間もの間、毎日何らかのサイトを作るというプロジェクトを完遂したのに触発され、John Resig氏は毎日コードを書いてみようと決心した。 自分に4つのルールを課す 毎日コードを書くという取り組みのために、4つのルールを自分に課したとのこと。 コードを毎日書く。ドキュメント、ブログやコードを追加すること 有用なコードを書く。インデントの修正やリファクタは加算しない 12時までに書くこと コードはGithu
OpenAI API と React(Next.js) を利用した簡単な画像生成アプリの作り方を、サンプルコード付きでご紹介しています。 こんにちは、アノテーション テクニカルサポートの Shimizu です。 筆者の前回の記事では OpenAI API を使用した基本的な質問アプリを Next.js で作成しました。 そこで今回は OpenAI の画像生成 API を利用して、テキストで入力した通りの画像を生成してくれるアプリを作って遊んでみました。 本記事ではサンプルコード付きで画像生成アプリの作成手順をご紹介しています。 完成品イメージ 前回と同様に Docker コンテナ上の Next.js 環境で作成したアプリを、ブラウザ上で動かすという手順です。 それでは、いってみましょう！ step1. 事前準備 まず、事前に下記を用意しましょう。 (1) OpenAI のアカウント登録、A
こんにちは、WEAR Webフロントエンドチームの吉田と大脇です。 現在WEARではNext.jsでのリプレイスが進行中です。今回はリプレイスのデザイン面における課題と解決に向けて行った取り組みを紹介します。 リプレイスの経緯や技術選定については、弊社の藤井の記事をご覧ください。 techblog.zozo.com 10年の歴史のあるアプリケーションと向き合う リプレイスにおける課題 他部署との連携 デザイナーとエンジニアの歩み寄り ミーティングで話し合ったこと ミーティングを行って得た気づき デザインツールの変遷 未来のこと、これからやっていきたいこと デザイントークンの定義 デザイン周りの負荷軽減 技術面でやりたいこと Tailwind CSS Storybook 終わりに 10年の歴史のあるアプリケーションと向き合う WEARは今年で10年目となります。Webサービスとしては長期間に
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Stimulus Features You (Didn’t) Know | Rails Designer 原文公開日: 2024/11/28 原著者: Rails Designer -- Railsフロントエンド関連記事に加えて、ViewComponentとTailwind CSSを用いた美しいUIコンポーネントを販売しています 日本語タイトルは内容に即したものにしました。 また、APIドキュメントへのリンクも追加しています。 Stimulusは、今あるHTMLで使える控えめなJavaScriptフレームワークとして喧伝されていますが、Stimulusにはおなじみの機能の他にも、あなたの知らない機能や忘れてしまった機能がいくつも詰まっています。 🔗 1: 存在確認用のプロパティ StimulusのAPI（ターゲット、CSSクラ
Well I can’t say we were really planning on it but over the last few weeks we’ve been having a ton of fun dumping new and exciting features into Tailwind and now feels like the right time to cut a release, so here it is — Tailwind CSS v2.2! We’ve built-in a new high-performance CLI tool, added ::before and ::after support, introduced new peer-* variants for sibling styling, added variants for styl
フロント学習の最高の教材集 - Qiita
はじめに 今回はフロント学習で重宝できる教材をまとめました。 軽く自己紹介として、自分は新卒でフロントエンジニアとして入社し2022年で2年目になります。 実際に実務を通す中で「この教材のおかげで実装がスムーズにできた」「この教材をやってたおかげで理解ができた」といったような場面が2年の間で多々ありました。 今回紹介する教材は自分自身が実際に使ってよかったものかつ、そのほとんどが無料で学べるor低価格の教材になっています。 「フロントエンドを網羅的に学べかつ実務の基礎作り」という目的で教材を紹介します。 この記事の主な対象者 フロントエンドの学習をこれからしていきたい人 何を学べばよいのかがわからない人 HTMLとCSSはある程度かける人 この記事の目標 フロント学習の指針が立てられる 実務現場でも活用できるスキルを学べる教材を知れる JavaScript ドットインストールのJavaSc
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Tailwind CSS のテンプレートサイトを使えば Web サイトを効率よく作成できます。簡単ではありますが個人的に素敵だと思った Tailwind CSS のテンプレートサイトをまとめてみました。 Tailwind CSS テンプレート＆ UI キットサイト Tailwind UI（有料） https://tailwindui.com/ すべてのテンプレートを使用するにはライセンス購入が必要 シンプルなデザインはとても汎用的 React や Vue を使用したテンプレートも有 Headless UI https://headles
タブは、Webサイトやスマホアプリでよく使用されるUIコンポーネントです。TailwindCSSやBootstrapなどのライブラリにも必ずありますが、再利用可能な柔軟性のあるものではありません。 スタイルを簡単にカスタマイズできる再利用可能なタブコンポーネントをVue.jsで実装する方法を紹介します。 How to Build a Tab Component In Vue.js by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 実装の概要 AppTabs.vueコンポーネントの作成 コードの解説 コンポーネントの使用方法 終わりに はじめに タブはUIでよく使用されるコンポーネントの1つで、Bootstrapのような人気のあるCSSフレームワークやTailwindUIのようなUIコンポ
This is your complete guide to CSS cascade layers, a CSS feature that allows us to define explicit contained layers of specificity, so that we have full control over which styles take priority in a project without relying on specificity hacks or !important. This guide is intended to help you fully understand what cascade layers are for, how and why you might choose to use them, the current levels
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Reimagine Atomic CSS
LIFULL HOME'S 賃貸物件詳細ページの基盤刷新について - LIFULL Creators Blog
Welcome to Wildebeest: the Fediverse on Cloudflare
サーバレスではじめる Web GIS アプリのプロトタイピング - ArkEdge Space Blog
アクセシビリティ対応のついでに色々やった話 - LIFULL Creators Blog
Next.js App Routerの場合componentはどこに置けばいいの？
【PR】『Tailwind CSS実践入門』を2024年1月26日に出版します
Tailwind CSSにおけるHTMLのコンポーネント化とCSSのコンポーネント化
Tailwind CSS実践入門 第2章 Tailwind CSSの基本 ──開発環境へのインストール、設定ファイルの記述、エディタの設定 | gihyo.jp
public beta になった v0 を試してWebサイトを作る
Astro と Tailwind CSS でこの Blog をリニューアルしました
既存プロジェクトを Tailwind CSS に段階的にマイグレーションする方法
「.new」ドメイン活用術！ログイン不要で即座に起動するWebサービスの厳選まとめ！ -
Webサイト制作の時短テク！便利な最新オンラインツール48個まとめ
2021年に行ったアクセシビリティやっていき - BASEプロダクトチームブログ
Next.js + OpenAI API で作った画像生成アプリで遊んでみた | DevelopersIO
10年続くWEARにおける、デザインシステム事始め - ZOZO TECH BLOG
Stimulusで知っておきたい10の機能（翻訳）｜TechRacho by BPS株式会社
Tailwind CSS v2.2 - Tailwind CSS
Tailwind CSS のテンプレート & UI キット集【まとめ】 - Qiita
Vue.jsで再利用可能なタブのUIコンポーネントを実装する方法を解説
A Complete Guide to CSS Cascade Layers | CSS-Tricks