EDIT: An additional project has been added as an example: Apartmentfy If you want to build an application or a website you need to take care of many things and in that sea of options which component library, css or ui framework will take a big role in the final version of your product. I have tried some component libraries like Material UI, Antd, React Boostrap and other CSS frameworks like styled
【ハンズオン】RemixでTODOアプリを作ってReactの違いを体感しよう【TypeScript/Supabase/TailwindCSS】 - Qiita
【ハンズオン】RemixでTODOアプリを作ってReactの違いを体感しよう【TypeScript/Supabase/TailwindCSS】TypeScriptハンズオンRemixtailwindcssSupabase はじめに Reactを使っていてステートがクライアントとサーバーで辻褄が合わなくなった そんな経験がReactをある程度使ったことがある人はおそらく経験したことがあるはずです。 Reactにおいて状態管理は誰でも使いやすく直感的である半面、クライアントとサーバーの状態を意識する必要が有ります。 どのタイミングでステートの変更をサーバーでも行うのか難しく思う場面もしばしばあります。 今回は最近巷でReactと並んで見かけるようになったRemixについてハンズオン形式で学べるような記事を書いていきます。 ハンズオンを通してRemixの特徴であったり、SupabaseやTail
背景と実施したこと TailwindCSSを使用してPCレイアウトのWebサイトのレスポンシブ対応を実装しました。 今回は静的コンテンツの配置を横並びから縦並びに変えるという内容のみ実施しています。 CSSは少し苦手意識があったのですが、TailwindCSSを使うとかなりローコストかつシンプルに記述できたので そのノウハウを主に初心者の方向けに記述していきたいと思います。 目次 概要 前提とやりたいことの整理 考え方の整理 実際のコード例 補足とまとめ 概要 TailwindCSSを使ったレスポンシブ対応の実際のコード例と考え方を初心者向けに記載するよ。 画面表示上、横並びだったものをスマホレイアウトにすると縦並びにする、という例で説明するよ。 メディアクエリの使い方とはもちろんだけど、HTMLタグの記載の順番を意識することがポイントだよ。 前提とやりたいことの整理 【前提】 + Tai
Tailwind Variantsに触れてみる
本記事執筆時点(2023.6.3)において、Tailwind Variantsのバージョンはv0.1.5となっています。 Tailwind Variantsとは Tailwind Variants a first-class variant API library for TailwindCSS. 引用元: https://www.tailwind-variants.org/docs/introduction ドキュメントに書かれているように、Tailwind VariantsはTailwindCSSの機能とファーストクラスのVariant APIを組み合わせた技術です。TypeScriptベースで作成されているので型安全であり、特定のフレームワークに依存しないユーティリティライブラリとなっています。 ここで登場したVariant APIという言葉ですが、これはStitchesというCSS
本文書は、Taliwind CSSをこれまで使ったことがない人向けの入門者向けの内容になっています。記事を2回にわけて説明を行っていますが、1回目の本文書はTailwind CSSの環境の構築を行い基本的な設定とカスタマイズ方法について説明を行います。2回目では本文書では触れていないFlexboxやブレイクポイント、レスポンシブデザインについて、実践的なナビゲーションバーを作成しながらTailwind CSSの理解を深めていきます。 タイトル通り利用者が爆増中で次々と新たしい機能が追加されています。現在の最新バージョンはv3です。本文書はv2.xの時に作成したので記載している内容もv3.4.3ではより簡単な方法で設定できたり以前のバージョンでできなかったことができるようになっています。しかしUtilify Classという根本は変わっていないので基礎を学ぶための情報は記載されています。
No RailsConf
2021 was an incredible year for Ruby on Rails. We started it off still celebrating the third major version of Ruby, and left it with the accomplishment of the seventh major version of Rails. Together, these releases sparked a renewed enthusiasm for building modern web applications with Ruby on Rails, unlike anything I can recall since the late oughts. The moment was finally right, and we were righ
CSSフレームワーク Tailwind CSS の作者の一人であるアダム・ワザン(Adam Wathan)氏の行為を非難する記事が公開され、コミュニティ内で議論が炎上しています。 「TailwindCSS: 複雑性を足すだけで、何もしていない」という刺激的なタイトルの4月20日のブログ記事が発端。 記事のタイトルが「釣りっぽい(click-bait)」であることは議論の双方が認めるところですが、この記事をツイッター上で5月7日にリツイートしたのがtwitterで10万人のフォロワーを持つフロントエンド開発者でインフルエンサーのサラ・スエイダン(Sara Soueidan)氏。 このツイートは炎上の初期に消されてしまっているのですが、特に追加のコメントもなく上記の記事を紹介しただけだったよう。しかし、このRT に対し、TailwindCSS の作者であるワザン氏が反応。 Thanks for
Today we are extremely happy to finally announce Docusaurus 2.0! 🥳️ At Meta Open Source, we believe Docusaurus will help you build the best documentation websites with minimal effort, letting you focus on what really matters: writing the content. After 4 years of work, 75 alphas and 22 betas, the next generation of Docusaurus is ready for prime time. From now on, we now plan to respect Semantic V
はじめに この記事はTailwindCSSが最近流行ってるけどなんで流行ってるの？という疑問をいただいた、フロントエンドエンジニア歴3年ほどの人間が調べてわかったことをまとめた記事です。以下のようなことがわかります。 TailwindCSSとは一体なんなのか？ CSS設計とは違うの？Bootstrapなどとの違いは？ どんな背景があって流行るようになってきているのか考察 Design Systemとの相性は？ TailwindCSSとは一体なんなのか？ ものすごくざっくりまとめるとユーティリティクラスの詰め合わせのライブラリと表現できるのかなと思いました。 以下のTailwindCSSの公式ドキュメントに書いてあることについて軽くまとめます。 https://tailwindcss.com/docs/utility-first まずはコードを見てみる まずTailwindを使わない普通のH
技術選定の際には絶対に知っておきたいウェブ開発・機械学習・科学計算に役立つ便利な技術を動画でサクッと学び始められる「Udemy」新生活応援セール【Julia・GraphQL・BERTなど】
何かと生活が変わることが多い春という季節は、新たな技術を学び始めるタイミングにピッタリと言えます。しかし、独学というのは少し分からない点が出てくるだけで挫折してしまいがちなもの。そこで活用できるのが書籍よりも圧倒的な情報量をもつ「ムービー」という形式で学習を進められ、分からない点は講師に直接質問できるオンライン学習プラットフォームの「Udemy」です。ちょうどUdemyは3月26日(金)まで新生活応援セールをやっているとのことで、知っておくと便利な技術から機械学習の論文を解説するような難しめの講座まで、さまざまな講座をピックアップしてみました。 オンラインコース -世界最大級のオンライン学習プラットフォーム- Udemy https://www.udemy.com/ ・目次 ◆1：オリジナルデザインのサイトを作れるCSSフレームワーク「tailwindcss」とCSSをまとめて学んでいく講
TL;DR 無駄な買い物チェッカーを作ったよ！緊急度,重要度,欲求度,代替可能度の４軸から無駄かどうかを判断するよ フロントエンドではRemixで開発、フォームライブラリはConformがよかったよ Cloudflareは最高でした。 はじめに どうも、やまぐちです。 エンジニアの皆さん、技術のキャッチアップってどうやってますか？ とりあえずチュートリアルやってみますか？ 技術ブログを読むだけで済ましていますか？ この辺りどうもモチベーションが湧かないんですよね。チュートリアルやっても身についている感覚がないんですよ。 最近Xのタイムラインを眺めていると、React界隈では今はRemixが流行りらしいし、ついでにCloudflareも、安い、速い、便利、で個人開発でめっちゃナウくてイケてるらしいじゃないですか。 んー、モダンでナウい、イケてる技術スタックを使えるようになりたい！！ そんな時
はじめに 今回初めて個人開発で作ったサービスを公開します。今までも何回かトライしていたのですが、なかなか公開までに至らないうちに、なにか問題にぶちあたったり、時間がかかりすぎて情熱が冷めてしまったりしていたので、今回はまずはスモールスタートで公開して改善していくことを心がけました。大体今回の公開まで、開発を始めてから1ヶ月程度になります。毎日朝4時半に起きて、子どもたちが起きる7時過ぎまでを開発時間として取り組んできました。 どんな人向け？ 自分で作っているサービスの開発ロードマップをユーザーに公開するために、都度ブログを書いたりするのも大変ですよね。もし、自分のサービスのソースコードをGithubで管理していたとして、Github Issuesを見せるとしてもGithubに馴染みのない人にとっては読みにくいですし、外に出すサービスであればあるほど、Githubのレポジトリは非公開になって
Tailwind CSSでデザインシステムを構築する［後編］ ～デザイントークンを定義するときに何を議論すべきか 2024年1月26日発売の『Tailwind CSS実践入門』の第9章「ユーティリティファーストでデザインシステムを構築する」の一部を、前後編の2回に分けて掲載します。ユーティリティファーストというTailwind CSSの発想を活かしたデザインシステム構築の最初の一歩をまとめたものです。開発者がデザインルールをTailwind CSSの設定に落とし込む過程はもちろん、デザイナーが開発者とどのように協力しあうべきかについても論じています。 本記事の内容は、書籍の最終章に当たる部分です。ほかの章の内容に言及していたり、書籍内ですでに使われた用語が説明なく登場したりするのを防ぐため、書籍の原文から一部を変更しています。 前回の記事の最後で、デザインシステムを構築する際にコンポーネン
Tailwind CSSはユーティリティクラスのフレームワークですが、すべてのスタイルは用意されていません。カラーを増やしたり、ブレイクポイントを増やしたり、マージンやパディングの値を増やしたり、カスタマイズ方法を紹介します。 また、Tailwind UIのUIコンポーネントをそのまま使用すると、似たデザインになってしまうことがあります。そんな時にもカスタマイズができると独自のデザインで実装できます。 Customizing Tailwind CSS by allround.io 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Tailwind CSSのカスタマイズの準備 スペースとブレークポイントをカスタマイズ ベースのスタイルを拡張 プリセットの使用と作成 終わりに はじめに Bootstrapの黄金期のように、T
Tailwind.css + classNames() を型安全に扱う TypeScript Language Service Plugin を書いた - じっくりコトコト
とりあえず動いた。プロジェクト内の tailwind.config.js を見て classNames() に tailwind のクラスではない文字列が渡ったらその場で警告する pic.twitter.com/587SrTx8h9— f_subal🍚🐿 (@f_subal) 2020年8月14日 名前は irontail です。出オチです。 モチベ 業務で Tailwind.css を使う機会が増えてきました。 自分のチームでも少しづつ使ってますが、他にも社内の古いプロジェクトでン年前の CSS で消耗している人々に助け舟として勧めたりしています。 記述量が少ないとかより、過去の CSS を消し去って低いコストでまともにするツールとして好んでいる面があり、React プロジェクトでの CSS Modules からの移行先として、個人的には styled-components よりも好
【freee / ICS / Ubie / RAKSUL】 デザインシステム構築の様々なアプローチ 「Design System Build #01」勉強会レポート｜RAKSUL DESIGN
【freee / ICS / Ubie / RAKSUL】 デザインシステム構築の様々なアプローチ 「Design System Build #01」勉強会レポート 近年、国内外の様々な企業のプロダクト開発に導入されている「デザインシステム」。「デザインシステム」を導入することで、デザイナーやエンジニアの開発生産性や効率性を高めたり、ユーザー体験の一貫性を提供できたりと、様々なメリットがある一方で、事業内容や成長フェーズ、組織構造などによってデザインシステムの目指すべきカタチは異なり、正解や完成がないことから、悩みを抱えている企業や開発者は少なくありません。 そこでラクスル株式会社（以下、RAKSUL）は、デザインシステムのコミュニティ「Design System Build」を立ち上げ、2022年8月23日に“デザインシステム構築の様々なアプローチ”をテーマに勉強会を開催しました。 この
こんにちは！@Ryo54388667です!☺️ 普段は都内でフロントエンドエンジニアとして業務をしてます！ 主にTypeScriptやNext.jsといった技術を触っています。 今回はレスポンスの遅いAPIをリクエストしたときのローディングUIを紹介したいと思います。 📌 作ろうと思った背景 きっかけは生成AIのエージェントAPIを利用するとき、レスポンスを待つ時間が非常に長かったからです。。😇 生成AIのプロダクトではプロンプトを解析したり、最適な問い合わせ先を判断したり、オリジンにリクエストするなど、さまざまな処理を行う(オーケストレーションレイヤー)関係でレスポンス時間が遅くなることがあります。これをなんとかしたいと思ったのがきっかけです。 昨今の開発では、UXをいかに上げるかが求められているように感じます。できることが格段に上がったとしても、UXが悪くて利用されなくなっては本末
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を横展開していく計画だったが、
[[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
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であれ
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 }}</
こんにちは。エンジニアの中島です。 現在はアクセシビリティ推進グループ（以下推進グループ）に在籍しています。 以前同組織の紹介記事をいくつかあげましたが、その通り弊社は自社の運営するサービスをアクセシブルにするため日々奮闘しています。 www.lifull.blog www.lifull.blog 以前の記事ではどういったマインドで同組織ができたか、どのように推進しているかについて話ました。 今回は、そういった活動の中でいくつか技術的な副産物が生まれたのでその話をしようと思います。 キーボード操作編 CSSの概念距離 さいごに キーボード操作編 アクセシビリティ対応にあたって、基本的なやることの一つにUIをキーボード操作可能にするという作業があります。 自社のサービスにもキーボード操作不能ないくつかのUIの存在を認識しており、それらを実際に直していくということをしています。 修正時、場合に
まずは下記のツイートをご覧ください。 すごい便利そうですよね。これで紹介されてた機能を実際に使ってみたので紹介します。 登場人物の紹介 tldraw と draw-a-ui と makereal.tldraw.com の整理を先にしておきます。 tldraw tldraw そのものにこの機能はありません。 tldrawはホワイトボードを作成するためのReactライブラリです。 下記がサンプルです。 miro ライクなホワイトボードを少ないコードで実装できます。 draw-a-ui tldraw と gpt-4-vision api を使って、描いたワイヤーフレームを元にhtmlを生成するアプリが draw-a-ui です。 git cloneして下記コマンドで簡単にローカルで試すことができます。 makereal.tldraw.com makereal.tldraw.com は draw-
テーブルの実装には、react-data-table-componentや、MUIのDataGrid、MantineUIのMantineDataTableなどが用いられてきました。 今回はテーブルのHeadressUIライブラリであるTanstackTableと、RadixUIとTailwindCSSで実装したコンポーネント群であるshadcn/uiを使って、簡単なテーブルを作ります。 shadcn/uiについて Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source. あなたのアプリにコピー＆ペーストできる、美しくデザインされたコンポーネント。アクセスしやすい。カスタマイズ可能。オープンソース。（機械翻訳） shadc
Next.js + Storybook Addon | Storybook: Frontend workshop for UI development
A no config Storybook addon that makes Next.js features just work in Storybook Storybook Addon Next ⚠️ DEPRECATED ⚠️ This addon has been deprecated in favor of @storybook/nextjs which is the Storybook official addon for supporting Next.js features in Storybook. It supports everything storybook-addon-next does and much more! I even worked on developing this with them so you should be in good hands.
Blog をリニューアルするにあたり、今までの Movable Type でテンプレート作って、という手法から、Movable Type は JSON データの書き出しだけ担当させて、フロントエンドは Astro と Tailwind CSS で開発する形に切り替えたので、その概要を簡単にメモ。 この Blog は立ち上げ当初から Movable Type で運用していますが、MT タグを書いて、テンプレートを作って、という一般的な運用っていうんですかね？ それをやめて、Movable Type は記事データの管理と JSON を書き出す役割だけにして、フロントエンドは Astro + Tailwind CSS でリニューアルしました。 面倒だったのでデザインは大きく変えず、ぱっと見はリニューアルしたのがわかりにくい感じになっていますが、Movable Type とフロントエンドを完全に分
Web Componentsは10年ほど前に提唱されたブラウザのコンポーネント技術の総称です。自分でタグを作ってHTMLを拡張していける技術なのですが、ブラウザの対応や仕様の確定などに時間がかかり、なかなか実用に至りませんでした。 私もずっと忘れていたのですが、React/Vueに疲れたなーと考えていたところ、ふと思い出し調べ直してみると、既に安定してProduction readyなのに情報が少なくすごくもったいなかったので、自分で調べつつ色々書き残すことにしてみました。 Web Componentsの誤解名前は聞いたことはあっても使ったことがある人はまだ少ないWeb Components。私も認識違いがありました。 UIコンポーネントを作る仕組みだから自分で作ることはないCSSをページをまたがって使い回すことがあるなら楽になります CSSで!important を書いてたらWebCom
GitHub - refinedev/refine: A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility.
Refine is a React meta-framework for CRUD-heavy web applications. It addresses a wide range of enterprise use cases including internal tools, admin panels, dashboards and B2B apps. Refine's core hooks and components streamline the development process by offering industry-standard solutions for crucial aspects of a project, including authentication, access control, routing, networking, state manage
はじめに こんにちは！ 犬専用の音楽アプリ オトとりっぷでエンジニアしています、足立です！ この記事では、Next.jsのReact Server Components(RSC) で使用可能なゼロランタイムCSS in JSライブラリを比較します。 目次 モチベーション 使えるライブラリたち 選定基準 選定結果 比較結果 書き味 パフォーマンス Dynamic Styling 結論 モチベーション みなさん、Next.jsのReact Server ComponentsのStyleをどうやるか問題に悩んでおられますね？ 私もどれを使えばいいのかわからずNext.js公式に見に行くと、App Routerで使用できるものとして、以下のライブラリを上げています。 が、React Server Componentsではnot supportedと記載されており、まだまだ未整備な状況のようです。
3Dシーンを作ってすぐ公開 Three.js+Gatsby+TypeScriptによるモダンWebXRテンプレート - Qiita
この記事はWebXR Tech Tokyo #1の発表で使用いたしました。 イベントを企画いただいた運営の皆様、会場を盛り上げていただいた参加者の皆様、ありがとうございました！ 2020/7/12追記 こちらのテンプレートがGatsby公式に追加されました。引き続きご利用いただけると幸いです。 https://www.gatsbyjs.org/starters/shunp/gatsby-three-ts-plus/ この記事でできるようになること Three.jsを使った3Dウェブページをモダンな技術スタックを使って簡単に開発・公開できるようになります。オリジナルテンプレートを使うことでスムーズに始められ、またGatsbyを用いることで自分好みのカスタマイズを簡単に加えることが可能です。 以下のサンプルシーンは予めテンプレートに組み込まれております。本記事での解説に加え、必要に応じてテンプ
CloudRun + Go + Next.js で画像閲覧に特化した Twitter クライアントを作ったはなし
zenn 初投稿になります、kimihiro_n です。 先日リリースした個人開発のアプリケーションのはなしをしたいと思います。 作ったもの 最初に宣伝かねて作ったものの紹介を。 イラスト投下閲覧用に Twitter を使っているのですが、公式 Twitter だとイラスト以外の投稿もたくさん混ざって追いづらかったり、最適化の影響で見逃してしまうツイートがあったりと不便さを感じていました。 Twitter API を使ってこの辺いい感じにフィルタリングしたら快適になるんじゃないかと思い Web アプリケーションとして作ってみることにしました。 自分のタイムラインやリストをフィルタリングして表示するだけのアプリケーションですが Twitter で絵師さんを追いたいみたいな用途だと便利に使えると思うので是非試してみていただければと。 後述しますが PWA(Progressive web app
Rails: webpack(er)に乗り換える25の理由（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: 25 reasons to switch to Webpack(er) - rossta.net 原文公開日: 2020/03/02 著者: I'm Ross Kaffenberger サイト: rossta.net webpack/Webpackerで使える有用なツールも本記事で多数紹介されています。 画像は元記事からの引用です。 最近こんなことをよく聞かれます。「webpackとかWebpackerで頑張る価値ってあるの？」 よい質問だと思います。そして私の短い回答は「イエス」です。 近年JavaScriptコミュニティにおける認知度が急上昇していることで、フロントエンド開発用のツール、開発エクスペリエンス、最適化に巨大なイノベーションが続いています。 Railsはかつて最前線に躍り出ていました。登場した当時のRailsアセッ
この記事は BASE Advent Calendar 2021 の6日目の記事です。 フロントエンドエンジニアの @rry です。 今年の4月に BASE にジョインしてから、アクセシビリティに関する取り組みを少しずつ行ってきました。 BASE ではこれまでアクセシビリティに関する取り組みは局所的にしか行われておらず、また私自身もアクセシビリティについて知見が全くない状態でした。このような状態からアクセシビリティやっていきを具体的にどのようにして進めているかについてご紹介したいと思います。 アクセシビリティとは？何故アクセシビリティに取り組むのか？ アクセシビリティとは | ウェブアクセシビリティ基盤委員会（WAIC） 一般にアクセシビリティとは、アクセスのしやすさを意味します。転じて、製品やサービスの利用しやすさという意味でも使われます。 似た意味をもつ言葉にユーザビリティがありますが、
TSKaigi 2024 で話した「Prettier の未来を考える」という発表のスピーカーノートです。スライドは こんにちは、今日は「Prettierの未来を考える」というタイトルでお話させていただきたいと思います。 鈴木 颯介と言います。ユビー株式会社でプロダクト開発エンジニアとして働きながら、筑波大学でパソコンの勉強をしています。オープンソースソフトウェアが好きで、今日お話するPrettierのメンテナーをしたり、トランスパイラのBabelのコミッターをしたりしています。最近はWebKitのJSエンジンにたくさんパッチを投げたりしています。 私が働いているユビーは、TSKaigiのGold Sponsorをさせてもらっています。ブースがあります。ユビーのグッズの他に、Prettierのステッカーも配布しておりますので、興味がある方はぜひお立ち寄りください。 まず、Prettierにつ
Rewind-UI - A fully customizable React-TailwindCSS component library
Rewind-UI is a React component library that provides a set of accessible, reusable, and customizable components to help you build your next project. We've designed our components to be flexible and easy to use, so you can focus on what matters most: building great user experiences. Getting started with Rewind-UI is easy! Simply install the package using your package manager of choice, and you're r
Announcing Parcel CSS: A new CSS parser, compiler, and minifier written in Rust!
I'm very excited to announce @parcel/css, a new CSS parser, compiler, and minifier written in Rust! Check it out on GitHub, or try a live demo right in your browser. Parcel CSS has significantly better performance than existing tools, while also improving minification quality. In addition to minification, Parcel CSS handles compiling CSS modules, tree shaking, automatically adding and removing ven
Remixで個人開発をしたので技術スタックを紹介
しおりモ！ まずは開発しているサービスの紹介をします。 「しおりモ！」は本に関するメモをいい感じ（当社比）に記録するためのサービスです。元々読書中に気に入ったセリフや後から読み直したい箇所を手帳や他のサービスにメモしていました。しかし、あとで見返すときにどの本のどのページか分かりづらい/検索がしづらかったので、自分が使いやすいサービスを開発することにしました。一応本についてのメモとは謳っているものの、通常のメモ帳サービスとしても使えるはずです。 まだ初期機能（メモの追加、編集、削除と検索）の実装が終わった段階です。これからも細かい機能追加を色々したいとは思っています。ただ、とりあえず自分で使う分には最低限のところは終わったので、あとはのんびりやっていくつもりです。SEO対策とかOGPの設定はしていません。 よかったら使ってみてください。 メモの作成 メモの検索 メモの編集 Remix せっ
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
Tailwind CSS とは 迅速かつ簡単にデザインシステムを構築するためのユーティリティ を提供するフレームワークです。 これだけではよくわかりませんね。 そこでまずは、TailwindのUtility Firstの概念を、例を交えて説明していきます。
フロント学習の最高の教材集 - Qiita
はじめに 今回はフロント学習で重宝できる教材をまとめました。 軽く自己紹介として、自分は新卒でフロントエンジニアとして入社し2022年で2年目になります。 実際に実務を通す中で「この教材のおかげで実装がスムーズにできた」「この教材をやってたおかげで理解ができた」といったような場面が2年の間で多々ありました。 今回紹介する教材は自分自身が実際に使ってよかったものかつ、そのほとんどが無料で学べるor低価格の教材になっています。 「フロントエンドを網羅的に学べかつ実務の基礎作り」という目的で教材を紹介します。 この記事の主な対象者 フロントエンドの学習をこれからしていきたい人 何を学べばよいのかがわからない人 HTMLとCSSはある程度かける人 この記事の目標 フロント学習の指針が立てられる 実務現場でも活用できるスキルを学べる教材を知れる JavaScript ドットインストールのJavaSc
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Why you should use Chakra UI in React
TailwindCSSのレスポンシブデザイン - Qiita
利用者爆増中 初めてでもわかるTailwind CSS入門 基礎編 | アールエフェクト
Tailwind CSS批判ブログ記事の紹介ツイートへの攻撃で作者が炎上
Announcing Docusaurus 2.0 | Docusaurus
TailwindCSSって何？なんで流行ってるの？｜F Lab｜Fixel株式会社
最近流行りのRemixとCloudflareをキャッチアップするために一個アプリ作った話
Github Issuesをキレイに外部公開するサービス「2go」作ってみた - Crieit
Tailwind CSSでデザインシステムを構築する［後編］ ～デザイントークンを定義するときに何を議論すべきか | gihyo.jp
Tailwind CSSのカスタマイズ方法を解説、基本的な機能を維持しつつ、スタイルを変更・追加するテクニック
処理時間が長いAPIをリクエストしたときのローディングUIについて
Reimagine Atomic CSS
Tailwind CSS実践入門 第2章 Tailwind CSSの基本 ──開発環境へのインストール、設定ファイルの記述、エディタの設定 | gihyo.jp
Tailwind CSSにおけるHTMLのコンポーネント化とCSSのコンポーネント化
アクセシビリティ対応のついでに色々やった話 - LIFULL Creators Blog
図からプログラムを自動生成してくれるmakereal ( tldraw )について
Next.js + shadcn/ui + TanStackTableでモダンなテーブルを作ろう
Astro と Tailwind CSS でこの Blog をリニューアルしました
今なら使えるWebComponents｜masuidrive
App Router時代のゼロランタイムCSS in JSに何を使えばいいの？
2021年に行ったアクセシビリティやっていき - BASEプロダクトチームブログ
TSKaigi 2024 Prettierの未来を考える スピーカーノート
Tailwind CSS v2.2 - Tailwind CSS
TailwindCSS入門 ~ Utility First + デザインシステムの構築 ~ - Qiita