並び順

ブックマーク数

期間指定

  • から
  • まで

361 - 400 件 / 842件

新着順 人気順

"Tailwind CSS"の検索結果361 - 400 件 / 842件

  • Front-end development’s identity crisis

    Elly Loel Front-end development’s identity crisis 🔗 https://ellyloel.com/blog/front-end-development-s-identity-crisis/ Created on March 29, 2024 •Last modified on March 29, 2024 • Complete • BlogWorkingWeb Design I’m not a “[full-stack] developer”, regardless of what my last job title says. I’m not even a front-end developer, thanks to the JavaScript–industrial complex. I’m a front-of-the-front-e

      Front-end development’s identity crisis
    • 社内の朝カフェにモバイルオーダーを導入した話

      株式会社マイベストのエンジニア2年目になりましたkatakyoです! mybest BlogKaigi 2024 2日目を担当します! 朝カフェとは? マイベスト社員同士の交流、情報交換の場、出勤前の憩いの場として始まった社員持ち回りで行う社員のイベントです。20万円ほどするデロンギの全自動コーヒーメーカーなどを使って定時前の社員が日々交代でカフェの店長を行います!(なお、コーヒー自体は無料で提供されます) 部署によっては、検証で使用した最新の家電を試せたり、占いを行ったりと、イベント的な取り組みをしている部署もあります。 プロダクト開発部として、今回やるにあたり、カフェ店員が結構忙しいという話を店長をやった方から聞いたのと、何かできることないかなと考えて今回朝カフェに「モバイルオーダーシステム」を導入してみることにしました。 作ったもの Webサイトから飲み物をオーダーし、オーダーされた

        社内の朝カフェにモバイルオーダーを導入した話
      • TailwindCSSのapplyは何が悪いのか

        Tailwind CSS には @apply という機能がある。ユーティリティクラスをカスタムクラスの内部に「展開」するというものだ。例えば以下のようにできる。 .custom-class { max-height: 350px; &:before, &:after { content: ''; @apply block sticky left-0 right-0 -mt-2 pb-3; } } これはビルドするとこうなる。 .custom-class { max-height: 350px; } .custon-class:before, .custon-class:after { content: ''; position: -webkit-sticky; position: sticky; left: 0px; right: 0px; margin-top: -16px; displ

          TailwindCSSのapplyは何が悪いのか
        • 2021-08-03のJS: Yarn 3.0、Chrome 93 beta、cross origin iframeでのalert/prompt/confirmを削除

          JSer.info #551 - Yarn 3.0がリリースされました。 Yarn 3.0 🚀🤖 Performances, ESBuild, Better Patches, ... - DEV Community 👩‍💻👨‍💻 berry/CHANGELOG.md at master · yarnpkg/berry Node.js 10のサポート終了、.pnp.cjsにリネーム、@yarnpkg/pnpifyを3つのパッケージに分解などの変更を含んでいます。 @yarnpkg/sdks: Editor SDKs @yarnpkg/pnpify: PnPと互換性のないツールを実行するツール @yarnpkg/nm: node_modules linker また、 exportsフィールドのサポート、pnpmライクなハードリンクのサポート、シェル構文のサポート改善、 ESBuil

            2021-08-03のJS: Yarn 3.0、Chrome 93 beta、cross origin iframeでのalert/prompt/confirmを削除
          • GitHub - vercel/commerce: Next.js Commerce

            A Next.js 14 and App Router-ready ecommerce template featuring: Next.js App Router Optimized for SEO using Next.js's Metadata React Server Components (RSCs) and Suspense Server Actions for mutations Edge Runtime New fetching and caching paradigms Dynamic OG images Styling with Tailwind CSS Checkout and payments with Shopify Automatic light/dark mode based on system settings Note: Looking for Next.

              GitHub - vercel/commerce: Next.js Commerce
            • Webシステムの設計の変遷(2000年から2021年までの概観)ー 技術選定の指標 - Qiita

              1.1990年~2000年初頭:カオス・黎明期 インターネットが流行り始めた頃は、HTMLに装飾を記述し、CSSに装飾を書くなどの分離はあまり見られなかった。 また、Javascript(以下、Js)の利用も限定的で、画面の要素をJsで作ったり、ましてや、コンポーネントの発想などほぼ見られなかったように記憶している。 見た目のデザインとコード構造もカオスだった時代。 ※@error_401さんのコメントにあるように、Javaでのシステム開発が多く、Java Appletによって動的な画面作成もあった。若い人は、Appletの存在はわからないかもしれないけど、少しの間、ブラウザにもその設定があった。 また、AdobeのFlashによる動的コンテンツの作成もあった。Appletよりは長く使われており、Jsでの動的なコンテンツ作成の前には、AdobeのFlashでの開発が多かったと思う。 1-1

                Webシステムの設計の変遷(2000年から2021年までの概観)ー 技術選定の指標 - Qiita
              • Tailwind CSS 3.0 alpha1〜2の注目の新機能(5選!)をご紹介! - 虎の穴開発室ブログ

                こんにちは、虎の穴ラボ Advent Calendar 2021 - Qiita 3日目の記事です。 2日目は「T.M」さんによる MetaworkでRails開発のデバッグをしてみよう! でした。 4日目は「Y.S」さんが DenoのFFIでMySQLに接続する の記事を書かれる予定です。 はじめに Tailwind CSS v3.0 の alpha1 が 10/2、alpha2 が 11/8 に公開されました。 今回は、その中からよく使われそうな 注目の新機能を5つ厳選して、ご紹介しようと思います。 最新の Tailwind CSS がどのような機能を実装するか、興味がある方の参考になれば、、、と思います。 Tailwind CSS Ver3.0 は 12/9 (木) にリリースされる予定です。 🤞🥵 pic.twitter.com/f700zq04wh— Adam Wathan

                  Tailwind CSS 3.0 alpha1〜2の注目の新機能(5選!)をご紹介! - 虎の穴開発室ブログ
                • 開設後3週間で収益10万円を得た個人開発サイトに立ち向かった話の全部を公開する - Qiita

                  こんにちは。ぬこすけです。 みなさん、QiitaでLGTM(いいね)数4000越えしたジャバ・ザ・ハットリさんの名記事をご存知でしょうか? ジャバ・ザ・ハットリさんはエンジニアのための技術書ランキングサイト「テックブックランク」を運営していますが、私もゴリゴリライバルサイトを立ち上げたというお話をしようと思います。 立ち上げたといっても実はWebサイトを公開してから1年ほど経っているのですが、その間のサイトの収益やユーザー数などの話にも触れていきます。個人開発をしている方、あるいはこれからしようとしている方にも役立つはずなので、一読いただければ嬉しいです。 [2021年3月15日 追記] この記事を投稿してから1週間ですが、多くの反響をいただきました。 Qiitaのトレンドの載ったりTwitterでもシェアされていたり、ジャバ・ザ・ハットリさんご本人にもコメントいただけて嬉しい限りです。

                    開設後3週間で収益10万円を得た個人開発サイトに立ち向かった話の全部を公開する - Qiita
                  • Tailscan - Browser inspector for Tailwind CSS

                    The ultimate tool for Tailwind CSSBuild, design and debug your Tailwind website visually with Tailscan, right within the browser.

                      Tailscan - Browser inspector for Tailwind CSS
                    • How to use tailwindcss with AMP in a Next.js project

                      Recently, I was refactoring my blog using Next.js by a whim. There are 3 tech stacks I would use: Next.js , a popular React framework with SSG, SSR support naturally Tailwindcss , a low-level CSS framework with the utility-first concept. AMP , an HTML framework developed by Google to make your website fast and loading smoothly. However, There are so many restrictions in AMP for performance issues.

                        How to use tailwindcss with AMP in a Next.js project
                      • 次世代のCSS in JS、Panda CSSをNext.js Appルーターで使用する

                        はじめに Panda CSSはゼロランタイムで型安全、かつ高いDXを持ったCSS in JSライブラリです。 React Server Componentsの登場により、Emotionやstyled-componentsといったランタイムCSS in JSライブラリの見直しが必要になりつつあります。 Panda CSSはEmotionに依存しているChakra UIというUIコンポーネントライブラリがReact Server Componentsに対応するために独自開発したゼロランタイムCSS in JSライブラリです。 上記でReact Server Componentsの話が出たものの、Panda CSSは特定のUIライブラリを選ばず、多くのUIライブラリに対応しており、その点も魅力的です。 また、Panda CSSは以下に挙げているこれまでの様々なCSSライブラリからインスピレーショ

                          次世代のCSS in JS、Panda CSSをNext.js Appルーターで使用する
                        • 2021年に作るべき7つのフルスタックプロジェクト - Qiita

                          以下はHenry Boisdequin( dev.to / Twitter / GitHub )による記事、7 Fullstack Projects You Need to Make in 2021の日本語訳です。 どのようなフルスタックプロジェクトを作るべきか? もしこのような疑問を持ち続けているのであれば、あなたは正しい場所にいます。 私は、2021年に作るべき7つのフルスタックプロジェクトのリストをまとめました。 早速、挑戦してみましょう! E-commerce Site Eコマースサイトとは、ユーザーが商品を購入できるサイトのことです(例:Amazon、eBayなど)。 Eコマースサイトを作ることで、セキュリティ、CRUD、データベース、フロントエンドフレームワーク、状態管理など、APIやウェブサイトを作るためのあらゆる部分について学ぶことができます。 これは、フルスタックのWeb

                            2021年に作るべき7つのフルスタックプロジェクト - Qiita
                          • nakamu.life - このウェブサイトは販売用です! - nakamu リソースおよび情報

                            This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

                            • Tailwind CSSを半年使い込んで分かった便利な点 + 最新動向 - Qiita

                              概要 Tailwind CSSを半年使い込んで分かった便利な点/注意点を説明する 最新v3.0のアップデート内容を紹介する はじめに 本記事では非常に便利なCSSフレームワークであるTailwind CSSについて説明します。 筆者はフロントエンドエンジニアとして仕事/趣味でこの半年いくつかのサービスやツールを実装しましたが、そのいずれでもTailwind CSSを利用しました。その中では素のCSSを書くことはほとんどありませんでした。例えば最近リリースされたDockpit liteというツールでもTailwind CSSをフル活用しています。 以下ではこうした経験の中で見えてきたTailwind CSSの特徴、便利なポイント、注意点をご紹介していきます。 また最後に最新のv3.0のアップデート内容を紹介します。 Tailwind CSSとは Tailwind CSSの概要 Tailwin

                                Tailwind CSSを半年使い込んで分かった便利な点 + 最新動向 - Qiita
                              • スクラッチからVue.jsで作る自作ガントチャート | アールエフェクト

                                Vue.jsを利用してスクラッチからガントチャートを作成する方法を解説しています。JavaScriptのガントチャートを検索するとライブラリの利用方法を解説している記事がほとんどで作成方法を公開している記事を見つけるのは困難です。 本文書では有償・無償を問わずガントチャートのライブラリは一切利用しておらず、Vue.jsを利用してスクラッチからガントチャート の作成を行っています。 内容が比較的多いので3回に分けて文書を公開していますが、最終的には下記のようなガントチャートを作成することができます。 完成時のガントチャート 【実装するガントチャートの主な機能】 タスクバーは横方向にドラッグ&ドロップで移動することができ、移動が完了すると日付も一緒に更新されます。タスクバーの両側についている四角いボタンをドラッグ&ドロップすることでタスクの期間を変更することができ、日付も一緒に更新されます。タ

                                  スクラッチからVue.jsで作る自作ガントチャート | アールエフェクト
                                • 日本人でも英語圏で戦えることを証明したい。28歳が会社を辞め、個人開発者としてカナダでひたすらもがき続けた一年間とこれから|加藤 大志

                                  日本人でも英語圏で戦えることを証明したい。28歳が会社を辞め、個人開発者としてカナダでひたすらもがき続けた一年間とこれから 新卒で入社して4年間エンジニアとして働いてきたYahoo! Japanを退職し、約一年が経ちました。退職後は日本を離れ、カナダのバンクーバーから、大好きな個人開発に思いきり打ち込み、ひたすらプロダクトを日本ではなく、世界に公開することに専念してきました。 今回は、自分がプロダクトをローンチし続けた経緯、また、その開発のなかで出会った人たちと切磋琢磨をしていくなかで、個人開発ではなく、スタートアップとして本気で世界を獲ってみたいと思えるプロダクトに出会うまでの思いを書いていければと思います。 少し長くなりますが、アメリカや北米で勝負してみたいと考えている開発者、サービス作り大好きな方々に読んでもらえれば嬉しいです。 なぜバンクーバーなのか? 多くの人が思うと思います。

                                    日本人でも英語圏で戦えることを証明したい。28歳が会社を辞め、個人開発者としてカナダでひたすらもがき続けた一年間とこれから|加藤 大志
                                  • Laravelの認証系パッケージを整理する

                                    Laravel の認証系ライブラリは日毎に増えてて「俺Laravel詳しいんすよ」とか日々自称している自分でもよくわからなくなってきているので、ここで整理してみる。 Laravelの認証系ライブラリ(※ファーストパーティ) まずはどのくらい認証系ライブラリがあるのかをリストアップしてみます。わざわざ「ファーストパーティ」と書いてあるのは「公式ライブラリだけでこれだけある」ということを強調したいためです。 それではいってみましょう。 Laravel UI Laravel Socialite Laravel Passport Laravel Sanctum Laravel Breeze Laravel Fortify Laravel Jetstream 多いなー…。では一つずつ雑に解説していきます。 Laravel UI 一番歴史が古い認証ライブラリ。バックエンドの実装と Blade(Boot

                                      Laravelの認証系パッケージを整理する
                                    • Astro 2.0 と迫る TS 5.0 の気配など : Cybozu Frontend Weekly (2023-01-24号)

                                      Astro 2.0 と迫る TS 5.0 の気配など : Cybozu Frontend Weekly (2023-01-24号) こんにちは! サイボウズ株式会社フロントエンドエキスパートチームの Saji (@sajikix) です。 はじめに フロントエンドエキスパートチームでは毎週火曜日に Cybozu Frontend Weekly という 「1 週間の間にあったフロントエンドニュースを共有する会」 を社内でに開催しています。 今回は、2023/01/24 の FrontendWeekly で取り上げた記事や話題をまとめたものになります。 取り上げた記事・話題 Bun v0.5 | Bun Blog Bun v0.5 がリリースされました。主なアップデートは以下のようになっています。 package.json の workspaces 機能に対応 ドメイン名解決のためのビルドイン

                                        Astro 2.0 と迫る TS 5.0 の気配など : Cybozu Frontend Weekly (2023-01-24号)
                                      • Prettier 2.3. In which assignments are consistent, short keys non-breaking, and Handlebars official · Prettier

                                        This release focuses on fixing long-standing issues in the JavaScript printer. Be warned that, unfortunately, reformatting a project with the new version might result in quite a big diff. If you don’t use ignoreRevsFile to hide such wholesale changes from git blame, it might be about time. A remarkable milestone is the long-awaited release of the Ember / Handlebars formatter. It’s supposed to be t

                                          Prettier 2.3. In which assignments are consistent, short keys non-breaking, and Handlebars official · Prettier
                                        • Using Ultra, the new React web framework - LogRocket Blog

                                          Table of Contents What is Ultra? Features of Ultra Ultra vs Aleph.js The drawbacks to using Ultra Getting started with Ultra Building components in Ultra Deploying an Ultra app In the world of frontend development, React is one of the most popular libraries for developing components for web applications. React v18 includes new features, such as concurrent rendering, and it supports SSR with React

                                            Using Ultra, the new React web framework - LogRocket Blog
                                          • 個人開発のアプリを5年間で40万ダウンロードさせた話

                                            この記事は CyberAgent 22 新卒 Advent Calendar 3日目の記事です。 はじめに みなさんは個人開発をすることはありますか? また、1つの制作物についてどのくらいの期間開発を続けていますか? この記事では、個人で開発したアプリを継続的にアップデートし、5年間で40万ダウンロードを達成した事例について紹介します。 自己紹介 この記事を書いているのはこんな人です。 情報系の大学に在籍 中学生の時に Java に触れ、高校生の時にアプリ開発(Android)を始める その後、その時々の作りたいものに応じて、 iOS, Unity, Laravel, Next.js... での開発を経験 Android エンジニアとして働く予定 開発しているアプリ 「暗記メーカー」という学習支援アプリを開発しています。 このアプリは、問題集の「作成」「解答」「共有」に特化しており、テスト

                                              個人開発のアプリを5年間で40万ダウンロードさせた話
                                            • AWS Lambda Web AdapterでServerless Next.jsを実現する - Activ8 Tech Blog

                                              こんにちは、フロントエンドエンジニアの堀江(@nandemo_3_)です。 2023年6月22、23日にAWS Dev Day 2023が開催されましたが、 「モダンフロントエンド デザインパターン〜優れたUXを実現するには〜」というフロントエンドの最新動向に関するセッションがありました。 speakerdeck.com そこで、Serverless Next.jsとそれをAWSで実現するインフラストラクチャーが紹介されており、 今回は、それを具体的に実現する方法をまとめました。 はじめに まず、今回Serverless Next.jsを実現するために、AWS Lambda Web Adapterを使います。 Lambdaは、主にAPIなどのサーバサイド処理をサーバレスで実現するために使われますが、 AWS Lambda Web Adapterを用いることで、Lambda関数をWebアプリ

                                                AWS Lambda Web AdapterでServerless Next.jsを実現する - Activ8 Tech Blog
                                              • Next.js 13のappディレクトリの基礎(Layout, Suspense, Data Fetching...)

                                                Next.js 13の新機能であるappディレクトリは本記事公開時はbetaで現在も開発中ですがNext.js 13でプロジェクトを作成後にNext.jsの設定ファイルであるnext.config.jsでexperimentalとして設定を行うことで利用することができます。今後仕様が変わると思いますがappディレクトリの設定方法を中心にNext.js 13の機能説明を行っています。 プロジェクトの作成 create-next-appコマンドを利用してプロジェクトの作成を行います。プロジェクト名はnextjs-13に設定していますが任意の名前をつけてください。JavaScriptとTypeScriptのどちらかを選択することができますが本文書ではTypeScriptを選択します。プロジェクト作成時にappディレクトリを利用するかどうかも聞かれます。 % npx create-next-app

                                                  Next.js 13のappディレクトリの基礎(Layout, Suspense, Data Fetching...)
                                                • Node.js — Diving into the Node.js Website Redesign

                                                  By now you've noticed nodejs.org's fresh new look! We've taken great care in approaching this design with a nod to the past and look to the future. The site has many converging use cases, thousands of pages, and is a daily resource to many. The whole story had some dead ends and detours. But in the end it was a collective effort; coming to life with the contributions of over three dozen contributo

                                                    Node.js — Diving into the Node.js Website Redesign
                                                  • 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

                                                      Tailwind CSSをカオスにしないための5つのベストプラクティス(翻訳)|TechRacho by BPS株式会社
                                                    • Next.js + RailsでポートフォリオサイトをISR対応&メンテナンスフリー化した - Qiita

                                                      2年ほど前にNuxt.jsを使ってポートフォリオサイトを作成しました。 今回、このサイトをNext.js + Railsでリニューアルしたので、経緯を記事にまとめます。 リニューアル後のページ https://portfolio.y-uuu.net/ デザインは前回のものを踏襲していて、ほとんど変わっていません。 リポジトリ フロントエンド: https://github.com/yuuu/portfolio_v2_ui バックエンド: https://github.com/yuuu/portfolio_v2_api リニューアルの目的 Next.jsを使って何か作りたい 昨年からReactやNext.jsを触ってノウハウを蓄積するようにしています。私自身普段はRailsを使った開発をしているので、Next.jsを採用するとしたらRailsと組み合わせて使う可能性が高いです。 昨今のフロン

                                                        Next.js + RailsでポートフォリオサイトをISR対応&メンテナンスフリー化した - Qiita
                                                      • とほほのNext.js入門 - とほほのWWW入門

                                                        Next.jsとは ソースファイル インストール フォルダ・ファイル構成 App Router と Pages Router 基本ファイル ページ(page.tsx) レイアウト(layout.tsx) テンプレート(template.tsx) ローディング(loading.tsx) Not Foundページ(not-found.tsx) エラーページ(error.tsx) グローバルエラー(global-error.tsx) スタイリング CSSモジュール Tailwind CSS Sass フォルダ名 プライベートフォルダ(_xxx) ルートグループ((xxx)) ダイナミックルーティング([xxx]) ダイナミックルーティング:階層化([...xxx]) ダイナミックルーティング:パラメータ無し対応([[...xxx]]) ダイナミックルーティング:複数パラメータ([xxx]/[yy

                                                        • CSS設計は儲かるとか儲からないとか | takazudo.me

                                                          最近自分はTwitterで「CSS設計」と検索してきて出てきたツイートをしている人をひたすらフォローしていて、たぶんこの記事を見てくれている人の中にも、Takazudoになんかしらんけどフォローされたと思っている人もいるかも知れない。 それは、端的に言えば自分の書いた本がそういう人に届いたら良いなと思ってそうしている。そういうのを見ていると単純に応援したい気分になってくるし、自分の書いた本がなんか役になってくれたらありがたいなと思っている。 #CSS設計ができると儲かるのか?ただ、そういう「CSS設計」というキーワードで検索していると、CSS設計が出来ると稼げるだとか、CSSが書けると市場価値が高いとかいうツイートをしている人がいて、はーーん、そういうもんかねーーなどと考えたので、現時点での考えを書いておこうかと思った。 とりあえず「CSS設計ができると儲かるのか?」に対する今の自分の回答

                                                            CSS設計は儲かるとか儲からないとか | takazudo.me
                                                          • viteでreact(or preact)+typescript(+tailwindcss)な開発環境を構築 | DevelopersIO

                                                            吉川@広島です。 最近viteが非常に快適でハマって(良い意味の方)おり、ReactとPreactの環境構築を試してみたので備忘録がてら紹介します。 Getting Started | Vite viteには npm init vite@latest my-vue-app -- --template vue のように自分で設定することなくscaffoldする機能があるのですが、今回はこれを使わずに構築する手順を共有したいと思います。 環境 node 15.11.0 yarn 1.22.10 npm 7.18.1 vite 2.4.4 プロジェクト作成 ディレクトリを作って入ります。 mkdir my-app cd my-app 必要パッケージのインストール react, react-dom (or preact) vite (+ @vitejs/plugin-react-refresh o

                                                              viteでreact(or preact)+typescript(+tailwindcss)な開発環境を構築 | DevelopersIO
                                                            • TailwindCSS: Adds complexity, does nothing.

                                                              If you work in the front-end, you've probably heard a lot about TailwindCSS, a CSS library, much like Bootstrap. Much unlike Bootstrap, however, Tailwind takes a different approach - it is all "utility classes". And I am not a fan. I got a whiff of it and quickly learned the name is appropos: it was as welcome and useful as passed gas. Before we start, let me try to explain what a utility class is

                                                                TailwindCSS: Adds complexity, does nothing.
                                                              • React DnDを使ったので知見をまとめた - STORES Product Blog

                                                                始めに STORES 予約でエンジニアをしているTak-Iwamoto です。 今回はある項目の並び替え機能を実装する際に React DnD を使用したので、その知見について書かせていただきます。 実装した画面はこんな感じです。 ライブラリ STORES 予約の管理画面は Rails の slim -> React へのリプレイスが進行中です。 なので React のドラッグ&ドロップライブラリを検討しました。 star 数の多いライブラリは以下のものがあります。 React DnD react-beautiful-dnd React-Draggable React-Draggable は最終リリース ver が 2016/12 なので対象外として、React DnD と react-beautfiul-dnd のどちらかが候補となります。 あくまで自分の考えではありますが、それぞれの

                                                                  React DnDを使ったので知見をまとめた - STORES Product Blog
                                                                • Tailwind CSS の基本的な使い方 - コムテブログ

                                                                  Tailwind CSS とは? Tailwind CSS は、スタイリングを効率的に行える CSS フレームワークです。HTML タグ内に、規定の短いクラスを追加するだけで、多くのスタイルを適用できます。クラス名は直感的なので、CSS を書いたことがある方なら、すぐに使い方を覚えられます。

                                                                  • 【WebAssembly】ブラウザ上で動作するポーカーソルバーを開発した話

                                                                    初投稿です。数あるポーカーの変種の中で世界的に最もポピュラーなものと言ってよいテキサスホールデムにおける、数学的に最適な戦略を解くソルバーを趣味で開発したので、その技術的な部分を備忘録を兼ねて投稿してみます。非常にニッチなアプリケーションではありますが、刺さる方には刺さるんじゃないかなと期待しています。 開発したものはWebアプリケーションとなっているので、以下のリンクから試すことができます (モバイル端末向けにはデザインされていないのでご注意ください): GitHubのレポジトリはこちらです: そもそもポーカーのソルバーとは何ぞや さて、いきなり「テキサスホールデムのソルバーを作りました」と言われても多くの方にはピンと来ないと思いますので、そもそもテキサスホールデムとはどういうゲームなのか、またそのソルバーとは何なのかについてまずは軽く紹介することにしましょう。 テキサスホールデムのルー

                                                                      【WebAssembly】ブラウザ上で動作するポーカーソルバーを開発した話
                                                                    • Next.js 14 + TypeScript + Tailwind + ESLint + Prettier 環境構築手順

                                                                      Next.js プロジェクトにおけるベーシックな環境として TypeScript、Tailwind、ESLint、Prettier を導入する手順をまとめます。 また、Next.js は App Router を採用します。 前提 Node.js 20.10.0 pnpm 8.10.2 Next.js インストール 公式のコマンド通りに Next.js のプロジェクトをセットアップします。 ? What is your project named? › my-app # プロジェクト名を入力 ? Would you like to use TypeScript? › No / Yes # Yes を選択 ? Would you like to use ESLint? › No / Yes # Yes を選択 ? Would you like to use Tailwind CSS? › N

                                                                        Next.js 14 + TypeScript + Tailwind + ESLint + Prettier 環境構築手順
                                                                      • TypeScript-ESLintから $500 いただきました

                                                                        先日、TypeScript-ESLintという OSS プロジェクトから $500 いただきました。ちなみに筆者は TypeScript-ESLint のチームに所属しているわけではありません。 この記事では、改めて TypeScript-ESLint というプロジェクトの概要を説明すると共に、筆者が $500 いただいた経緯や、TypeScript-ESLint の運営状況について説明します。 TL;DR 資金に余裕があり、TypeScript-ESLint を使っている個人や企業は TypeScript-ESLint プロジェクトに寄付することを検討してください。 TypeScript-ESLint への寄付は https://opencollective.com/typescript-eslint から行うことができます。 一応明記しておきますが、筆者は今回 $500 いただきました

                                                                          TypeScript-ESLintから $500 いただきました
                                                                        • Introducing Catalyst: A modern UI kit for React - Tailwind CSS

                                                                          Today’s the day — we just published the first development preview of Catalyst, our first fully-componentized, batteries-included application UI kit for React, just in time for your holiday hacking sessions. Today’s the day — we just published the first development preview of Catalyst, just in time for your holiday hacking sessions. Catalyst is our first fully-componentized, batteries-included appl

                                                                            Introducing Catalyst: A modern UI kit for React - Tailwind CSS
                                                                          • Tailwind Builder

                                                                            Create Tailwind templates in minutes The only product for Tailwind CSS that includes a visual editor, 25+ beautiful styles, and 5,800+ UI components. Try Demo 1 Choose UI components Use ready-made UI components from the multipurpose library grouped into 20 most frequently used categories.

                                                                              Tailwind Builder
                                                                            • React CRAで簡単に設定できる!初心者向けTailwind CSSのスタイリング方法 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ

                                                                              Tailwind CSSとはなんですか? 事前準備 TailwindCSSの導入・インストール Tailwind拡張機能 最後に 前回の記事で、Reactでのスタイリング方法についていくつか紹介しました。 dev-k.hatenablog.com 本日は、初心者向けにReactのCRAで「Tailwind CSS」を設定し、スタイリングする方法についてチュートリアルを提供します。 Tailwind CSSは、Reactでのスタイリングに非常に便利なツールであり、この記事ではその設定方法について詳しく解説します。 Tailwind CSSとはなんですか? Tailwind CSSは、ユーティリティファーストのCSSフレームワークであり、コンポーネントのスタイリングを容易にし、再利用可能なコンポーネントの作成に集中できるように設計されています。 簡単に言えば、Tailwind CSSは、独自の

                                                                                React CRAで簡単に設定できる!初心者向けTailwind CSSのスタイリング方法 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
                                                                              • 進化が止まらない!Next.js13の基本機能をしっかり理解しよう | アールエフェクト

                                                                                Next.jsは現在最も人気のあるReactベースのフルスタックのJavaScriptフレームワークです。バージョンがアップする毎に新しい機能が次々に追加されNext.js13からServer ComponentsなどReactの最新機能を利用したApp Routerが登場しました。App Routerはファイル名でルーティングを設定していた既存のPage Routerとは全く異なる機能で設定方法も一から学び直す必要があります。新たにプロジェクトを作成するのであればApp Routerを利用することが推奨されていますが同時に両方の機能を利用することも可能です。 次々に新しい機能が追加される反面、ネット上に公開されている記事もすぐにOutDatedなものになっています。この文書もすぐにOutdatedなものになってしまうと思いますが現在(2023年5月)の最新バージョン13.4のドキュメント

                                                                                  進化が止まらない!Next.js13の基本機能をしっかり理解しよう | アールエフェクト
                                                                                • Flowrift

                                                                                  A library filled with Tailwind CSS UI blocks, components & templates. Browse an ever-growing UI kit inside a highly optimized app. View / copy / customize.

                                                                                    Flowrift