Boring Rails: Skip the bullshit and ship fast Learn about the boring tools and practices used by Basecamp, GitHub, and Shopify to keep you as happy and productive as the day you typed rails new What's the secret sauce? Majestic Monoliths riding on vanilla Rails Boring Backends with Postgres, Redis, and Sidekiq JavaScript Sprinkles with Hotwire, TurboDrive, and Stimulus Avoid CSS Hell with Tailwind
GitHub - withastro/astro: Build fast websites, faster. 🚀🧑🚀✨ 読みはじめた時点でのコミットは`21926278ba664d8362694efe51943968dfcb4b26`で、バージョンでいうと`1.0.0-beta.9`です。（めちゃめちゃ頻繁に更新されるので、今はもう最新ではないはず） はじめに 最近のAstroですが、順調にメジャーリリースを目指して開発中です。 the official Astro v1.0.0 release will be available on June 8, 2022. https://astro.build/blog/astro-1-beta-release/ という感じなので、コードを読むのにも丁度いいかなと。 もちろんバグやら挙動不審なところは散見されるものの、Partial Hy
「表題の構成で自社サイトをずっと公開する」と言って全く進まず、まさかの2020年を終えようとしています。 年末にじっくり進めるべくShifter Advent Calendar 17日目を担当し、気合いをいれたいと思います。 このブログの手順どおり進められれば、 WordPress を Headless CMSとして利用可能な「Shifter Headless」とeコマースサービスである「Shopify」を使ってヘッドレスメディアコマースサイトを公開まで持っていけるはずです！ ヘッドレスメディアコマースは勝手に造語してしまってるのですが、ECサイトとブログが合わさったサイトだと思ってもらえれば幸いです。 はじめに、今回完成したデモサイトはこちらです。 https://shifter-headless-gridsome-shopify.vercel.app/ システムアーキテクチャ図はこんな
GitHub - tailwindlabs/tailwindcss-forms: A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.
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
ReactとTailwind CSSフレームワークを使い天気のアプリケーション作成を通してReact Hooks、Fetch関数、propsなどのReactの基本的な使い方を紹介しています。 React.js環境にCSSフレームワークのTailwind CSSの設定を行った後、Tailwind CSSで作成したWeatherコンポーネントを作成します。作成したWeatherコンポーネントからAPI経由でOpenWeatherサービスから天気情報を取得して、4つの都市の天気情報をブラウザ上に表示させます。 Reactの基本的な知識のみで作成することができるのでReact入門者の人向けの文書になっています。 ４つの都市の天気を表示 天気アプリケーションを作成する中で以下のことを学ぶことができます。 React環境でのTailwind CSSの設定方法Tailwind CSSの使い方APIを使っ
version: "3" services: front: build: . tty: true ports: - "3000:3000" # 開発用 - "4000:4000" # 本番用 volumes: - ./app/myapp:/app # ./app/{プロジェクト名}:/app command: yarn dev Dockerfileでは、ECSなどを利用することを想定して、本番環境が構築できるコマンドを記述します。この段階では、Dockerfileは未完成であり、「10. package.json修正」で完成させます。 ベースイメージは、現段階で安定版のnode:16.14.2を利用します。 イメージを軽量にするため、alpine型を利用します。 docker-compose.ymlでは、開発環境時のコマンドを記述します。 command(CMD)は、Dockerfileと
フロントエンド技術選定のヒント 【令和五年度版】 - KAKEHASHI Tech Blog
こちらの記事は カケハシ Advent Calendar 2023 の 4日目の記事になります。 こんにちは。カケハシでエンジニアをしている今川です。 今回はこれからフロントエンドの技術選定をする方向けに、どんな技術・ツールを使えばいいかのヒントになるような記事を書いていきたいと思います。 ただし、本記事では個人的な好みというよりは、npm trendsやGitHub Star Historyなど客観的な指標からどんな技術が世間に受け入れられているかの比較にしていきたいです。 もちろん数値などの比較以外に、ドキュメントを読んだり使ってみたりすることも重要だということは言うまでもないと思います。あくまでも今回の記事が知らないライブラリを知る機会だったり、ヒントになれば幸いです。 もくじ パッケージマネージャ ランタイム フロントエンドフレームワーク レンダリングフレームワーク ビルドツール
さてさて、Laravel 8.xがリリースされてしばらく経ちましたが、やはり驚きとともに迎えられたのがログインパッケージJetstreamではないでしょうか。 というのも、Jetstreamはインストールするだけでスマホのアプリと連携した２段階認証を実装していたりと、とても多機能だからですね。 そして、今回の記事はこのJetstreamにある機能をつけてみたくなったことが始まりでした。 それは・・・・・・・ マルチ認証 です。 ここで言うマルチ認証とは、一般的なusersテーブルにroleデータもたせたものではなく、全く別のモデルをいくつか使った「本格的な」マルチ認証です。 この方式のメリットとしては、各モデルで保持するデータが別でもOKという点です。（例えば、芸人ユーザーなら「師匠の名前」、ミュージシャンなら「担当パート」という具合に専用のデータを持たせていいということになります） そこ
Vueエンジニアが使うReactが難しい
こんにちは！プロ雀士兼プログラマーのおおのです。 早いもので、初めてHello World!を目にしてもうすぐ2年。そろそろ駆け出しエンジニアを名乗れなくなりそうですが...今までNuxtを使用してVueのコードばかり書いてきた私が、新たにReactに挑戦してみたので、そこで苦労したことについて書いていこうと思います。 1.コンポーネントの書き方 まず最初に違うのは、コンポーネントをどう書くか。 Vueではtemplate、script、CSSを順に書いていく、シンプルな記述で1コンポーネントにまとめることができたのですが、Reactでは最初にscriptの記述をしたり、CSSフレームワークを使用する際の記述など、慣れるのに少々時間がかかりました。 初心者の私にはscriptの記述すら戸惑いだったのですが、ここは先人のお力を借りることでスムーズに溶け込むことができました。 (参考記事:Vu
ハッカー専用パズルゲームを作ったので全てネタバレする
💰作ったもの💰 仕様 Account Number(数字8桁) と Password(数字4桁) によるログイン認証 Account Number は全て存在する(8桁なので全口座数は1億口) Password を3回間違えるとロック(再試行不可)される [裏設定] 銀行口座を模している為、もちろんパスワードが流出したら他者もログイン可能 ユーザーはどんな攻撃手法を用いても良い。 最近話題の1段階認証を突破してみようというパズルゲーム。 システム構成 JSフレームワーク: Nuxt.js 2.14.5(Vue.js 2.x) トランスパイル: TypeScript 4.0 CSSフレームワーク: TailwindCSS ホスティング: Vercel お馴染みの構成を選択したが、Vue.jsの使用については少し後悔している（後述） 以下ネタバレ 想定する解法 基本的には以下の2つと考えて
週刊Railsウォッチ: RubyのGCが高速化、RuboCopのストレスを減らす4つの方法、Defensive CSSほか（20220712後編）｜TechRacho by BPS株式会社
週刊Railsウォッチについて 各記事冒頭には🔗でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを（鍋のように）社内有志でつっついたときの会話の再構成です👄 お気づきの点がありましたら@hachi8833までメンションをいただければ確認・対応いたします🙏 TechRachoではRubyやRailsなどの最新情報記事を平日に公開しています。TechRacho記事をいち早くお読みになりたい方はTwitterにて@techrachoのフォローをお願いします。また、タグやカテゴリごとにRSSフィードを購読することもできます（例:週刊Railsウォッチタグ） 🔗Ruby 🔗 Ruby 3.2.0-devのRust版YJIT ISUCONのために真面目に調べた / “Ruby 3.1.2 with YJIT vs
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
Last year we released Tailwind UI — a huge directory of professionally designed UI examples built with Tailwind CSS. Up until now, all of the examples in Tailwind UI have been pure HTML which is sort of the lowest common denominator for all web developers, and makes it possible to adapt them to any templating language or JavaScript framework. Today we’re excited to add first class support for Reac
[React] HTML Drag and Drop API を使ってテーブルの列を入れ替える | DevelopersIO
最終的な動作の画像と完成物は以下になります。 完成したコード 実際の動作サンプル ここでは少しずつ、作業手順をおって解説していきます。 導入 https://github.com/hbsnow/template-nextjs-tailwindcss 上記のテンプレートを使用しています。ここでは導入についての解説しません。 また、このページ内で記載しているコードについては一部簡略化のため省略している箇所があります。すべてのコードについてはそれぞれリンクにある GitHub のコミットログで確認できます。テストコードはこの記事では長くなってしまうため記載していませんが、GitHub で確認できます。 ドラッグ機能は未実装状態の DraggableTable コンポーネントを追加する まずはドラッグ機能のない状態の DraggableTable コンポーネントを追加していきます。 commit
![[React] HTML Drag and Drop API を使ってテーブルの列を入れ替える | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/406d924d7d4c6327201a8281e75820982243f551/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F01%2Freact.jpg)
週刊Railsウォッチ: Ruby 3.3.0-preview3リリース、IRBのオートコンプリート強化ほか（20231127後編）｜TechRacho by BPS株式会社
週刊Railsウォッチについて 各記事冒頭には🔗でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを（鍋のように）社内有志でつっついたときの会話の再構成です👄 お気づきの点がありましたら@hachi8833までメンションをいただければ確認・対応いたします🙏 TechRachoではRubyやRailsなどの最新情報記事を平日に公開しています。TechRacho記事をいち早くお読みになりたい方はTwitterにて@techrachoのフォローをお願いします。また、タグやカテゴリごとにRSSフィードを購読することもできます（例:週刊Railsウォッチタグ） 🔗Rails 🔗 動画『Ruby on Rails: The Documentary』（Ruby Weeklyより） つっつきボイス:「YouTubeで見
TailwindCSS vs. UnoCSS
I’m a long time TailwindCSS user and a huge fan of utility CSS in general. I’ve rarely felt a strong need to switch, but UnoCSS has been on my mind for a bit. I got around to using it properly, so I thought it’d be fun to write up my thoughts on both in detail. This article includes a lot of small nitpicky stuff that may not matter to others, but for me, the more I can reduce microfriction, the be
【Next.js,microCMS,AWS】 ポートフォリオサイトを作ってAWS サーバーレスアーキテクチャでデプロイ - Qiita
【Next.js,microCMS,AWS】 ポートフォリオサイトを作ってAWS サーバーレスアーキテクチャでデプロイS3TypeScriptCloudFrontNext.jsmicroCMS はじめに エンジニアを目指し始めて初のポートフォリオサイトを作成しました。 背景としてはインターンを始めて実務につく機会をいただき、本格的な制作物を作れるようになってきたので、形に残したいと思いポートフォリオサイトを作成することを決意しました。 また今後お仕事を自分で獲得したいと考えており、そのために本格的に準備を進めたいと思いました。 まだまだ未熟ですが見て頂けると幸いです。 使用した技術 Next.js TypeScript tailwindcss microCMS AWS S3 AWS CloudFront GitHub Actions figma 制作ポイント デザイン デザインを考える上で
Cloudflare Workersはサーバレスエッジコンピューティングサービスです。そしてデータの永続的保存オプションとして以下が用意されています。 KV : key-value型永続ストレージ R2 : AWS S3互換ストレージ Durable Objects : オブジェクトストレージ D1 : エッジで動作するSQL Liteデータベース(2023/02/05 時点でアルファ版です） Queues : ジョブのキューイング この記事ではKVを使ってJavaScriptで簡単なTodoを作ってみます。記事前半分の土台となっているのはこのブログですが、英語であり、また手順として少し初心者にハードルが高く、Cloudflareのバージョンアップにより画面イメージも変更となっているため再構成しています。 後半部分は少し難易度があがりますが、追加シナリオです。ぜひ挑戦してみてください。 な
TailwindTemplates
Lightning fast prototyping A repository of free components built with tailwindcss. Every component is responsive, customizable and carefully crafted for your use.
概要 React + tailwindcss のプロジェクトで、LPとかでよく見る「要素が画面内に入ったらシュッとフェードインする」挙動を実現したいと思いました。ググって引っかかってくる知見は jQuery をつかおうみたいな記事ばかりだったので、個人開発で現在使用している[1] Next.js + tailwindcss での構成でいい感じにできた実装を共有します。どなたかの参考になれば幸いです。 Tl;dr 以下の実装で AwesomeHogeComponent が画面に表示されたら下からシュッとフェードインする挙動を実現できるFadeInBottomコンポーネントを作成できました。 const AwesomeFadeInComponent: React.FC = () => { return ( <FadeInBottom> <AwesomeHogeComponent /> </Fa
Radix UI と Tailwind CSS を使用して構築された再利用可能なコンポーネント！「shadcn/ui」 - ソフトウェア開発者のための OSS、まとめてみました！
概要 Web アプリやサービスを開発する際、UI 構築はどのように行っていますでしょうか？ 私自身は普段から React.js や Next.js を使用しており、UI 構築は Tailwind CSS を利用したり MUI を利用して簡単に作成してしまうことが結構多いです。 ja.reactjs.org nextjs.org tailwindcss.com mui.com そんな自分ですが、いつもと同じようなフレームワークだったりデザインを利用しているとどのサービスも同じような感じになってしまうのが欠点ですよね。 いつもと同じようなサービスやアプリにならないよう、新しいフレームワークだったりデザインセットがないか GitHub 上で探していたところ、良さそうなデザインセットを見つけることができましたので、今回はこちらについてご紹介したいと思います。 今回ご紹介する OSS は、Radix
BLOG ブログ ホーム ブログ css設計・命名規則の歴史(BEM・OOCSS・SMACSS・FLOCSS・tailwindcss) 前置き css設計・命名規則の件ですが、マークアップする上で避けては通れない比較的面倒な悩み事です。 案件によってはクライアント様側からのルールが決められている場合もあり、その場合はそのルールに則って構築すれば済むことですが、一般的にはマークアップする方にお任せされることも多いですね。 その場合、個人の好みだったり、その時の流行りなどから、悪く言えば適当に設計されることも多いかと思います。 なんだったら「css設計ってナニ？」的な場合も多々見受けられます… 新規構築も、運用も1人で全て行うような案件であれば問題ないとも言えますが、チームでの構築や運用は別の方(もしくは別会社の方)が行うような場合は、その設計自体や命名規則などがハッキリとしたルールに則ってい
週刊Railsウォッチ: RailsにHealthControllerが追加、Active RecordのNormalizationほか（20230207前編）｜TechRacho by BPS株式会社
週刊Railsウォッチについて 各記事冒頭には🔗でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを（鍋のように）社内有志でつっついたときの会話の再構成です👄 お気づきの点がありましたら@hachi8833までメンションをいただければ確認・対応いたします🙏 TechRachoではRubyやRailsなどの最新情報記事を平日に公開しています。TechRacho記事をいち早くお読みになりたい方はTwitterにて@techrachoのフォローをお願いします。また、タグやカテゴリごとにRSSフィードを購読することもできます（例:週刊Railsウォッチタグ） 🔗Rails: 先週の改修（Rails公式ニュースより） 公式更新情報: Ruby on Rails — An endpoint for uptime mo
Why I Don't Like Tailwind CSS | Aleksandr Hovhannisyan
You’re at a restaurant, and there’s an odd item on the menu that you’ve never heard of before, but it piques your interest. It sounds like it might be worth a try, though you’re not sure. When the waiter approaches your table, you inquire about the dish; he notes that while most people are initially repulsed by its appearance, they should still give it a try because the chef swears that it’s supre
Makefiles for Web Work
make is a build tool that’s been around since the 1970s. It was originally designed for automating the building of C programs: installing dependencies, running tests, and compiling binaries. These days, web projects involve many of the same steps: installing node_modules, running linters and tests, starting dev servers, and compiling files with esbuild or Rollup. The default choice for automating
こんにちは。アイレットデザイン事業部のマークアップ/フロントエンドエンジニアの工藤です。アイレットデザイン事業部ではINSIDE UI/UXと題して、所属デザイナーとエンジニアがデザイン・SEO・アクセシビリティ・UI/UXなどそれぞれスペシャリティのある領域に対する知見を幅広く発信しています。 さて、今回は管理が比較的難しく、また軽量化が難しいCSSをリファクタリングする方法について書いていきます。 CSSは技術的負債が発生しやすい言語である CSSはwebサイトの見た目/スタイルを定義するシンプルな言語です。しかし、そのシンプルさゆえに技術的負債が発生しやすい言語であるとも言えます。 なぜでしょうか？それはCSSのCascading（下方階層式）な特性にあります。つまりCSSファイルの一部にレイアウト崩れを引き起こす間違った記述があったとしても、より高い詳細度を設定するか、同一ファイル
🚀 Super excited to announce: ♿️ React Aria — Accessible UI primitives for your design system. 👑 React Stately — State and core logic for your design system. 🌈 React Spectrum — Adobe’s design system. Learn more: https://t.co/ucVguh3rqp Github: https://t.co/e8aOfLgCVK — Devon Govett (@devongovett) July 15, 2020 7月15日にAdobeのデザインシステム react-spectrum がリリースされました。 デザイン製も優れていますが、他の部分でのクォリティーが個人的にショックだった
Laravel Inertia.jsでのCRUD処理の理解(Jetstream+Vue.js利用) | アールエフェクト
Laravelのバージョン8から登場したInertia.jsを利用してデータの一覧表示、データ作成、更新、削除をどのように行うのか知りたいという人もいるかと思います。新しい技術にはまだ手を出したくないと尻込みしている人もInertia.jsの基本的なCRUDの処理方法が理解できればInertia.jsを使ったアプリケーション作成にチャレンジしてみようと思うかもしれません。ぜひ本書を利用してInertia.jsのCRUD操作を学び今後Inertia.jsの技術を習得するべきかどうかの判断に利用してください。 本文書ではLaravel8から新たに追加されたJetStream＋Inertia.jsを利用した環境を構築してできるだけシンプルなコードを使ってCRUD処理(Create, Read, Update, Delete)の方法を説明します。CRUD処理の中ではJetStreamに含まれるPr
Tailwind CSS v3.3: Extended color palette, ESM/TS support, logical properties, and more - Tailwind CSS
Tailwind CSS v3.3 is here — bringing a bunch of new features people have been asking for forever, and a bunch of new stuff you didn’t even know you wanted. Tailwind CSS v3.3 is here — bringing a bunch of new features people have been asking for forever, and a bunch of new stuff you didn’t even know you wanted. Extended color palette for darker darks: New darker 950 shades for every color. ESM and
Tailwind CSS is a utility first CSS framework that allows developers to design custom web components without switching to a CSS file. In this tutorial, you will learn how to install Tailwind CSS in React and how you can use it to build a simple React page. Why Use Tailwind CSS? There are already a lot of CSS frameworks that simplify how developers design web pages. So why should you use Tailwind C
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
はじめに 今回はじめてNext.jsを使用したアプリの開発をしました。 今まではReactとViteという組み合わせで作成することが多かったので、Next.jsに慣れておらず、苦戦しながらもなんとか作成をすることができました。 開発したアプリの詳細とNext.jsを使ってみた所感を共有したいと思います。 アプリのご紹介 概要 Qiita と MicroCMS の API を利用してブログや記事を掲載するサイトです。 使用している技術スタック - 環境 Next.js: v14.2.6 firebase: 10.13.0 - 言語 typescript: 5.3.3 - ライブラリ react: 18.2.0 react-hook-form: 7.52.2 react-markdown: 9.0.1 react-dom: 18.2.0 - CSS tailwindcss: 3.4.10 da
週刊Railsウォッチ: Crystal言語作者がRubyを愛する理由、TypeScript 4.6リリースほか（20220309後編）｜TechRacho by BPS株式会社
週刊Railsウォッチについて 各記事冒頭には🔗でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを（鍋のように）社内有志でつっついたときの会話の再構成です👄 お気づきの点がありましたら@hachi8833までメンションをいただければ確認・対応いたします🙏 TechRachoではRubyやRailsなどの最新情報記事を平日に公開しています。TechRacho記事をいち早くお読みになりたい方はTwitterにて@techrachoのフォローをお願いします。また、タグやカテゴリごとにRSSフィードを購読することもできます（例:週刊Railsウォッチタグ） 🔗Ruby 🔗 strings-truncation: 長い文字列を...で省略（Ruby Weeklyより） つっつきボイス:「エンコーディングにUTF
npm audit fix --force しても直らない！〜TypeScriptとReact/Next.js本5章で発生した問題を解決する
{ "name": "can-badge-market-nextjs", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint --dir src", "format": "next lint --fix --dir src", "storybook": "start-storybook -p 6006", "build-storybook": "build-storybook", "test": "jest" }, "dependencies": { "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@m
JSer.info #570 - Tailwind CSS v3.0がリリースされました。 Tailwind CSS v3.0 – Tailwind CSS 指定したクラス名から対応するクラスを生成するJust-in-Time Modeのエンジンが刷新されています。 またBox Shadow Colorの追加、CSS Scroll Snapのサポート、Multi-column layoutのサポートなどが行われています。 その他には実験的にRTLとLTR modifiersのサポート、開発用のビルドが不要なCDNがサポートされています。 Installation: Play CDN - Tailwind CSS Create React App 5.0 がリリースされました。 Release v5.0.0 · facebook/create-react-app webpack 5、Jest
Auth0 React SDKが登場して, Reactで作成したSPAへの組み込みがより簡単になりました. 認証や認可, ログイン処理はアプリケーション開発者の頭痛のタネであります. Auth0はそれらに対する解決を提供するプラットフォームであると同時にアプリケーションを簡単にベストプラクティスにそわせてセキュアに設計するためのSDKも提供しています. 様々な種別のSDKを提供しているのですが, SPAでAuth0を利用する場合はAuth0 Single Page App SDKが提供されています. これはどのようなライブラリやフレームワークを利用したSPAであってもうまく動作します. Auth0 React SDKはReact Custom HooksとHOCを提供しており, これを利用することでセキュアなアプリケーションがSPA SDKより少ないコードでかけます. SPA SDKとの違
Wordleという、いくつかのヒントをもとに5文字の英単語を当てるゲームがあります。 ヒントには次のような物があります。 正解の単語に含まれない文字 正解の単語に含まれる文字 正解の単語に含まれて、位置が一致した文字 これらの情報を元に英単語の辞書から候補となる単語を検索するアプリケーションを作りました。 次にスクリーンショットを表示します。 上から 正解の単語に含まれない文字 正解の単語に含まれる文字 正解の単語に含まれて、位置が一致した文字 を入力して検索すると、候補になる文字列を表示します。 このアプリケーションは辞書を検索するだけです。 辞書も5文字の英単語に限定されているので、せいぜい4500語です。 ブラウザに配信するスクリプトに埋め込める分量です。 つまり辞書と検索機能の両方をブラウザだけで完了出来る小さなアプリケーションです。 現在RubyのWebAssemblyバイナリが
サイボウズでkintoneのデザインシステム開発をしているトビ（@0b1tk）です。こんにちは。 今回はデザイントークン、特にセマンティックトークンの命名方法について掘り下げます。 まずはデザイントークンの定義について、W3Cから設立されたデザイントークンの仕様策定をするコミュニティ「Design Tokens Community Group」の定義を引用いたします。 Design tokens are indivisible pieces of a design system such as colors, spacing, typography scale. （訳：デザイン・トークンとは、色、スペーシング、タイポグラフィ・スケールなど、デザインシステムを構成する不可分の要素のことである） Design Tokens Community Group このデザイントークンの名前づけについて
Font Size - Tailwind CSS
CommunityGetting StartedInstallationEditor SetupUsing with PreprocessorsOptimizing for ProductionBrowser SupportUpgrade GuideCore ConceptsUtility-First FundamentalsHover, Focus, and Other StatesResponsive DesignDark ModeReusing StylesAdding Custom StylesFunctions & DirectivesCustomizationConfigurationContentThemeScreensColorsSpacingPluginsPresetsBase StylesPreflightLayoutAspect RatioContainerColum
先日リリースされたばかりのReactベースのフレームワークRemixでWebアプリケーションをつくるための下準備について。今回はTailwindを利用したスターターキットを用意していきます。 はじめに こんにちはCX事業本部MAD事業部の森茂です。 社内はre:Invent一色ですが、フロントエンドエンジニアとしてもReact Conf 2021を前に盛り上がりたい！ということであえて先日リリースされたReactベースのフレームワークRemixについての記事を投下していきたいと思います:) 準備編として風呂敷を広げてみたのですが、今回はRemixで開発をはじめる前の下準備の紹介記事となります。次にどんな方向へ行くのかはまだわかりません? Remixについての紹介はこちら 今回はRemixを使ってWebアプリケーションをつくる際のスターターキット的なものを用意してみます。なお、スタイリングに
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Boring Rails: Skip the bullshit and ship fast
Astro のコードを読む Part.1 - console.lealog();
Shifter Headless と Gridsome とShopifyでヘッドレスメディアコマースサイトを1日でつくる - necco note | necco inc.
React + Tailwind CSS+APIで天気アプリケーション作成 | アールエフェクト
DockerでNext.js+TailwindCSS開発環境をチーム開発を意識して構築してみた
【Laravel Jetstream】複数モデルでログインできるようにする（Multi Auth）
UIツールキット「NextUI」のバージョン2.0が公開、CSSフレームワークをTailwindCSSに切り替え
Tailwind UI: Now with React + Vue support - Tailwind CSS
Cloudflare Workers と KV でTodoListアプリを作る
React + tailwind css で画面表示されたら下の方からシュッと出てくるやつを実装
css設計・命名規則の歴史(BEM・OOCSS・SMACSS・FLOCSS・tailwindcss)
CSSリファクタリングの方法論とお役立ちツール | iret.media
Adobe製デザインシステム「React Spectrum」がすごいので紹介したい - Qiita
A Beginner's Guide to Tailwind CSS in React
GitHub - rails/tailwindcss-rails
【Next.js + Typescript】ブログサイトを個人開発 - Qiita
2021-12-15のJS: Tailwind CSS v3.0、create-react-app v5.0.0、CLSの改善
React向けの新しいAuth0 SDKが登場してました | DevelopersIO
Wordle攻略用のアプリケーションをruby.wasmで作りつつ貢献した話 - Qiita
デザイントークンの効果的な命名方法｜トビ / KazuhiroTobita
RemixでつくるWebアプリケーション〜準備編〜 | DevelopersIO