Tailwind CSSチーム、GitHubスター数2.4万超のUIコンポーネント集「Headless UI」をメジャーアップデート
5月8日、Tailwind LabsはReact用の「Headless UI v2.0」をリリースした。 Headless UIとは、Tailwind CSSベースのUIコンポーネント集である。 Tailwind CSSチーム自身が開発を行っており、GitHubスター数も2.4万を超えるなど、高い人気を博している。 このアップデートは、開発者がより少ないコードでより良い開発体験を実現できるようにするための多数の改善を含んでいる。 主な更新点は以下の通りだ。 組み込みアンカーポジショニングのサポート 新しいチェックボックスコンポーネントの追加 HTMLフォームコンポーネントの拡充 状態検出の向上 コンボボックスリストの仮想化 新しいウェブサイトと改善されたドキュメント 組み込みアンカーポジショニングのサポート Floating UIがHeadless UIに直接統合され、Menu、Popov
こんにちは。ナレッジワークの torii です。 最近、プロジェクトで使用している TypeScript の型検査にかかる時間を 3 割ほど短縮することに成功しました。 参考までにどのようにボトルネックを調査して改善に繋げたのかを書いてみます！ きっかけ 改善のきっかけは、たまたまネットを徘徊していて見つけた Zenn 記事でした。 （素晴らしい記事をありがとうございます！） これを読んで「自社のプロダクトでも型検査にかかる時間を短縮できるのでは？」と思い立ち、試してみたところ実際に改善に役立てることができた、というのがこの記事の概要になります。 改善対象 改善対象は、弊社のメインプロダクトであるナレッジワークのフロントエンドです。現在マルチプロダクト化に向けたコード分割に取り組んでいる最中ですが、執筆時点はモノリシックな構成となっています。 改善前の TypeScript ファイルは自動
meta社製StyleXやChakraチームのPanda CSSなど、CSSフレームワーク界隈は大盛り上がり。そんな各CSSフレームワークはどのような仕組みで動いているのか、自らも「Kuma UI」というCSSフレームワークを作っている観点から深掘りしていきます
2024-04-19に開催されたBARフロントえんどう #2 「CSS Library / Framework」（サイボウズ）での登壇資料です。 イベント → https://cybozu.connpass.com/event/311066/
CAMELORSは、同社の運営するフリーランス・複業・副業の求人マッチングサービス「SOKUDAN（ソクダン）」に掲載されている実際のフリーランス・副業案件に基づいて作成した、2024年のフリーランス・副業における「案件が多いフレームワークランキング（プログラミング言語）」を、4月16日に発表している。 同ランキングでは、「React」が案件比率38.9％で1位を獲得し、平均月収でも111万円で1位となった。以下、「Vue.js」（20.5％）、「Laravel」（13.6％）が続いている。 Reactは、Google、Facebook、Instagramなどの大手企業で採用されている人気の高いJavaScriptフレームワークで、Webアプリケーション開発やモバイルアプリ開発に広く使用される。 Vue.jsは、Webアプリケーション開発に特化したJavaScriptフレームワークで、Re
当てはめるだけで小学生でもロジカルな文章が書ける…ハーバード大で教えられている｢オレオ公式｣のすごさ 1日10分書く習慣が頭脳を鍛える
「ロジカルな構成」をカンペキにする アメリカの大手新聞「ニューヨーク・タイムズ」などで活躍するジャーナリストのダニエル・コイルさんは、超一流の人たちがどうやって才能をみがいてきたのかが気になっていました。そして、世界中のスポーツチーム、音楽学校、一流進学校などを取材した結果、こんな結論にたどり着いたのです。 「才能とは、生まれつきのものだけではなく、練習でみがかれるものである」 ダニエル・コイルさんがたどり着いた超一流の人たちの才能開発のひみつは、その才能を開花させるために一番重要なスキル（能力）を、まずはとことんみがくということでした。そのスキルを最大値で発揮できるようになるまで、小さなことから毎日少しずつ地道に練習を重ねるのです。 たとえば、テニス選手なら、まずは「サーブのトス」を、バスケットボールの選手なら「レイアップシュート」だけを、目を閉じていてもできるくらいに練習しなさいという
まずはじめ React に焦点を置き、昨今のフロントエンドでどのようなフレームワークが選択肢にあげられるのかについて紹介します。続いて、技術選定を行う際に、どのようなことを考えるべきかについて話します。最後にこれまで話した点を踏まえて、私が実際に技術選定を行った際にどのような選択をしたのか実践的な内容について触れたいと思います。
GitHub - langgenius/dify: An Open-Source Assistants API and GPTs alternative. Dify.AI is an LLM application development platform. It integrates the concepts of Backend as a Service and LLMOps, covering the core tech stack required for building generative
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
GitHub - panjf2000/gnet: 🚀 gnet is a high-performance, lightweight, non-blocking, event-driven networking framework written in pure Go./ gnet 是一个高性能、轻量级、非阻塞的事件驱动 Go 网络框架。
gnet is an event-driven networking framework that is ultra-fast and lightweight. It is built from scratch by exploiting epoll and kqueue and it can achieve much higher performance with lower memory consumption than Go net in many specific scenarios. gnet and net don't share the same philosophy about network programming. Thus, building network applications with gnet can be significantly different f
PowerShellに関しては、2021年に1回まとめたのだが、あれから3年も経過したので最新情報も含めて、簡単に解説したい。なお、それぞれのこれまでの経緯などは、過去記事に記載しているので参考にしてほしい。 ●あらためて「PowerShell」の現状と登場後の経緯を整理する https://ascii.jp/elem/000/004/052/4052789/ 結論から言えば、PowerShellには、Windowsに同梱されている「Windows PowerShell」と、ユーザーがインストールする必要がある「PowerShell」がある。コマンドラインを使う頻度が高いようならば、最新のPowerShellをインストール、そうでなければWindows PowerShellで十分である。 PowerShellのインストーラーなどに表示される奇妙な人物イラストを見たことがある人もいるだろう。
GitHub - paveldedik/ludic: Lightweight framework for building dynamic HTML pages in pure Python.
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
米Microsoftは、大規模言語モデル（LLM）のアプリへの迅速な統合を可能にするSDK（統合開発環境）である「Semantic Kernel」向けJavaライブラリのリリース候補「Semantic Kernel for Java 1.0.0-rc2」を、3月5日（現地時間）に公開した。 Semantic Kernel for Javaは、開発者がJavaでコーディング中にAIを活用できるようにするオープンソースのライブラリで、Java 8以降と互換性があり、幅広いJavaアプリケーションに対応している。AIサービスをJavaプロジェクトに統合することによって、使い慣れたJava開発環境を犠牲にすることなく、AIとLLMの可能性を最大限に引き出せるようになる。 Microsoftは、Semantic Kernel for Javaの可能性をただちに理解できるようにすべく、サンプルコードを
「Tailwind CSS実践入門」出版記念イベントの基調講演で使用したスライドです。 イベント詳細 → https://pixiv.connpass.com/event/310073/ 書籍 → https://gihyo.jp/book/2024/978-4-297-13943-8
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
CursorでClaude3を使う
を使うとできます。OpenRouterはopenaiと同じAPI仕様で様々なモデルを利用できるサービスです。 Cursorの設定項目です。 これを以下の様に謀ればOKです。 OpenAI API Key: <YOUR_OPENROUTER_API_KEY> Override OpenAl Base URL: https://openrouter.ai/api/v1 New Model Name: anthropic/claude-3-opus OpenRouterの方のAPI KeyはSign Up後にメニューのKeyから作成してください。クレジットも購入してください。 他のモデルのモデル名は https://openrouter.ai/docs#models から拾ってください。 設定するとこうなります。API Keyをコピペした後は"→"をクリックしている方がいいかも？ 使えるようにな
GitHub - wxt-dev/wxt: ⚡ Next-gen Web Extension Framework
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
NIST サイバーセキュリティフレームワーク 2.0を解説｜約10年ぶりの大幅改訂、押さえるべき要点とは？
HOME NRIセキュア ブログ NIST サイバーセキュリティフレームワーク 2.0を解説｜約10年ぶりの大幅改訂、押さえるべき要点とは？ 2024年2月26日、NIST（米国立標準技術研究所）は、「NIST サイバーセキュリティフレームワーク（NIST Cybersecurity Framework：NIST CSF）」のバージョン2.0を正式に公開した。2014年4月に初版であるNIST CSF 1.0が公表されて以来、約10年ぶりの大幅改訂である。 本記事では、NIST CSF 2.0における主な改訂のポイントと、特にインパクトの大きい6つ目の新機能「GV（統治）」について解説する。 ▶「経営層が納得するセキュリティ報告」を読む はじめに 2020年代に入り、新たな生活様式の変化に起因する脅威の発生、世界各国での深刻かつ大規模なサイバー攻撃の急増、生成AIなど新技術の普及に伴うリス
to B プロダクトで Vite + React Router を採用して半年後の感想 / Impressions after 6 months of using Vite + React Router
2024/02/28 「TechBrew in 東京 〜フロントエンド技術選定、その後どうなった？〜」で発表したスライドです。 https://findy.connpass.com/event/310614/ 参照したURL - Plainのフロントエンドにおける技術選定(2023年8月版) - ROUTE06 Tech Blog - 「作ってから売る」と「売ってから作る」と「売れるようにしてから作る」 ～技術の社会実装のための『開発』～ - Speaker Deck - React プロジェクトを始める – React - フロントエンドの移り変わりは早すぎるのか Zenn
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
NIST Releases Version 2.0 of Landmark Cybersecurity Framework
NIST’s cybersecurity framework (CSF) now explicitly aims to help all organizations — not just those in critical infrastructure, its original target audience — to manage and reduce risks. NIST has updated the CSF’s core guidance and created a suite of resources to help all organizations achieve their cybersecurity goals, with added emphasis on governance as well as supply chains. This update is the
Observable Framework
The best dashboards are built with code. Create fast, beautiful data apps, dashboards, and reports from the command line. Write Markdown, JavaScript, SQL, Python, R… and any language you like. Free and open-source. Observable Framework is an open-source static site generator for data apps, dashboards, reports, and more. Framework includes a preview server for local development, and a command-line
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
【fabric】複雑なタスクをAIが自動化、人間の能力を拡張するオープンソースAIを使ってみた 2024 2/22 WEELメディア事業部LLMライターのゆうやです。 fabricは、誰でも人生や仕事を向上させるために使用できる、オープンソースAIフレームワークです。 このフレームワークは様々なタスクをパターン分けしており、文章の要約や動画の抽出といったタスクを簡単に実行できるほか、それらのパターンを組み合わせて高度なタスクをこなすこともできます。 以下の動画は実際に動作している様子です。 引用元：https://github.com/danielmiessler/fabric?tab=readme-ov-file#fabric-is-an-open-source-framework-for-augmenting-humans-using-ai fabricのGithubのスター数は、4,
Hono v4
YAPC::Hiroshima 2024 前夜祭 Feb 9, 2024. Yusuke Wada
GitHub - honojs/honox: HonoX - Hono based meta framework
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
ウクライナ軍に入隊したアジャイルコーチが、さまざまなメソッドを駆使して中隊長としてのリーダーシップを実現した話（前編）
ウクライナ軍に入隊したアジャイルコーチが、さまざまなメソッドを駆使して中隊長としてのリーダーシップを実現した話（前編） アジャイル開発の代表的な方法論であるスクラムをテーマに、都内で1月に開催されたイベント「Regional Scrum Gathering Tokyo 2024」で、経験豊富なアジャイル開発のエキスパートとしてウクライナを拠点にアジャイルコンサルタントをしていたドミトロ・ヤーマク（Dmytro Yarmak）氏が、ロシア軍の侵攻後にウクライナ軍に入隊し、中隊長としてリーダーシップを発揮するためにさまざまなメソッドを駆使して軍隊の組織を変革していった経験を語ったセッション「A True Story of Agile Coaching in Ukrainian Armed Forces」が行われました。 軍隊という、企業とは異なる構造や目的を備えた組織で、しかも多くの民間人が入
Tailwind CSS はすべてをユティリティクラスで書くという特性上、HTML にはクラスがたくさん書かれることになります。1 つの要素に対してクラスがたくさん並んでいると、視覚的にどのようなスタイルが適用されているのかを把握するのが難しくなります。条件によってクラス名を付け替える処理を行っていると更に複雑になります。 <button className={` ${variant === "primary" && "border border-blue-500 bg-blue-500 text-white"} ${ variant === "secondary" && "border border-gray-500 bg-gray-500 text-white" } ${variant === "default" && "border border-gray-500 bg-white
Ruby on Railsはどのように生まれ、発展してきたのか［前編］。作者DHH氏やコアチームが語る動画「Ruby on Rails: The Documentary」が公開
「1999年か2000年頃、私は37signalsというWebデザイン企業を経営していました。2人のビジネスパートナーとWebデザインを受注していたのです」（Fried氏） Fried氏は本業とは別に再度プロジェクトとしてオンライン書籍データベースの開発に取り組んでいました。開発はPHPで行っていたものの、Fried氏はプログラミングでつまづきます。 当時はまだStackOverflowのような技術的な質問に答えてくれる掲示板などなかった時代。Fried氏はブログに「誰かこの問題を解決する方法をご存じですか？」と書き込みます。 するとデンマークからメールが届きます。メールを書いてきたのがDHH氏でした。 「私は（37signals社の）Signal vs. Noiseというブログを以前から熱心にフォローしていました」とDHH氏。 「ブログで彼の質問を見て、私は『おお、この答えを知っているぞ
Mamba UI
Kickstart your next website in minutes Mamba UI is a free, open-source collection of UI components and templates based on Tailwind CSS. Make the web your playground Easy to use UI elements based on Tailwind CSS Mamba UI is a toolkit for developers and designers to make creating interfaces easier. We have some of the most popularly used components to help you get started. Everything is modular and
iDraw.js | iDraw.js
iDraw.jsDrawing easier on the web. A simple JavaScript framework for Drawing on the web.
商用利用無料！ コピペで簡単に実装できる、Tailwind CSSで実装されたUIコンポーネントが150種類以上！ -Mamba UI
Webサイトやスマホアプリでよく使用されるUIコンポーネントとテンプレートをTailwind CSSベースで実装したコレクションを紹介します。 コードはHTMLとVueとJSXに対応しており、Tailwind CSSを用意しておけばコピペで簡単に利用できます。 Mamba UI Mamba UI -GitHub Mamba UIの特徴 Mamba UIの使い方 Mamba UIのコンポーネント Mamba UIの特徴 Mamba UIは、Webサイトやスマホアプリによく使用されるUI要素をTailwind CSSベースで実装したオープンソースのコレクションです。すべてのコンポーネント・テンプレートはHTMLとCSSで実装されており、Tailwind CSSのおかげで複雑なCSSルールを記述する必要はありません。 Tailwind CSSはユーティリティファーストのCSSフレームワークなので
Webフロントエンド入門
まずはじめに HTML、CSS、JSを学んだ後にモダンなweb制作を行う上でこれから何を学べばいいだろうと手探り状態だった過去があるので、今同じ悩みを抱えている方に向けてこの記事を書こうと思いました。また、自分自身が2023年に多くのことを学んだのでそれの整理になればという思いもあります。 あと、いいね、コメントいただけると記事作成の励みになります😇 この記事の対象者 HTML, CSS, JSはある程度理解した モダンなWeb制作を行いたい これから学ぶべき技術 React, Next.js 一度は聞いたことある人も多いと思います。これは、Webサイトを効率的に開発することを目的に作られたJSのフレームワーク(正確にいうとReactはライブラリ)です。 ReactはFacebook社が開発したもので、それをVercel社がより使いやすくしたものがNext.jsです。 作成するものによっ
2023年も終わりに近づき、この1年間に収集したツールを振り返りながら、Web制作に役立つお気に入りを見つけてみましょう。 素晴らしい新ツールや素材がたくさんリリースされ、選定にはたっぷり時間がかかりましたが、カテゴリ別に幅広くセレクションできました。 本当に役立つかどうかだけを考え、「これ、神ツール。」と思えるものをピックアップ。 話題の的だったAIをうまく活用すれば、ワークフローを格段にスピードアップさせ、面倒な作業もストレスなくこなすことができます。 この記事では、そんなあなたの役に立つ2023年公開のWebデザイン制作ツールや素材をまとめてご紹介します。 整理したカテゴリは以下の通り。
一休レストランで Next.js App Router から Remix に乗り換えた話 - 一休.com Developers Blog
このエントリーは一休.com Advent Calendar 2023の15日目の記事になります。 CTO 室の恩田です。 現在は一休レストランのフロントエンドのリアーキテクトを手がけています。 今日はその中で Next.js App Router から Remix に乗り換えた話をご紹介したいと思います*1。 背景 6日目の記事で香西から紹介させていただきましたが、2023年10月に一休レストランのスマートフォン用レストラン詳細ページをリニューアルしました。 一休レストランの Rust バックエンドが正式リリースされました。https://t.co/7N4VGv5ej9 このページのスマートフォンビューはバックエンドが Rust で書かれた GraphQL になってます— naoya (@naoya_ito) 2023年10月4日 ちなみにフロントエンドも、旧バージョンは Nuxt v2
Axon Framework で簡単にEventSourcing+CQRSなアプリケーションを作る - エムスリーテックブログ
この記事はエムスリーAdvent Calendar 2023の13日目の記事です。 こんにちは、製薬企業向けプラットフォームチームエンジニアの桑原です。 前回のJJUG CCC の登壇についてのブログで Axon Framework について軽く触れました。今回はAxon Frameworkがどのようなもので、どういった使い方をするかを紹介したいと思います。 背景：CommandとQueryに最適なモデルが異なる CommandとEvent追記型との相性は良かった QueryがEvent追記型との相性は良くなかった 苦肉の解決策 Axon Framework ざっくりアーキテクチャ Command EventからReadModelへのマッピング Query まとめ 参考記事 We are Hiring! 背景：CommandとQueryに最適なモデルが異なる 上述のリンクで紹介したメッセー
フロントエンドの新規開発でNext.jsの採用を見送った話 - バイセル Tech Blog
※こちらはバイセルテクノロジーズ Advent Calendar 2023の10日目の記事です。 前回の記事は、金澤さんのAuth0とEntra IDを扱うプロダクト同士を繋げるためのIstio設定あれこれでした。 はじめに こんにちは、開発3部の神保です。 バイセルでは、お客様宅への出張訪問による買取が買取チャネルの主力となっています。現在開発3部の弊チームでは、この出張訪問買取で使用されるWebアプリケーション「Visit」の新規開発を進めています。 VisitのフロントエンドにはReactを採用しましたが、Next.js等のフレームワークは使用せず、Vite + ReactによるSPA (Single Page Application)構成を選択しました。 技術選定の過程では、社内での採用事例などからNext.jsも検討の対象となりましたが、最終的にはその採用を見送る結論に至りました
Introcusion つい先日、「Rust版のRails」ともいわれている、 Locoというフレームワークを教えてもらいました。 Railsは昔ちょっとさわった程度なのですが、 Rustで手軽にRailsライクなアプリ開発はおもしろそうなので、 試してみました。 Loco? Locoについて簡単に説明します。 このblog記事で、Locoって何？ なんでRustなの？とか誰のためのフレームワーク？みたいなことが書いてあります。 軽く説明すると、↓です。 Locoって何？ Loco は、Rails からインスピレーションを得た Rust用のWebフレームワーク ほぼすべての Rails 機能が含まれている Controllerとaxum経由のルーティング ActiveRecordライクにSeaORMでモデル操作 rrgenでコード生成 その他いろいろ。詳しくは元記事で RubyでいいならR
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypeScript の型検査にかかる時間を短縮した話
現代CSSフレームワークの内部実装とその仕組み
Tailwind CSSを本気でカスタマイズする方法
フリーランス・副業における案件数の多いフレームワーク第1位は？ CAMELORSが発表
【やじうまPC Watch】 .NET FrameworkをWindows 95にバックポートした強者現る
React フレームワークの 動向と選定基準
Ntex
PowerShellの今を見る 2つあるPowerShellはどっち使えばいい？ (1/2)
Microsoft、「Semantic Kernel for Java 1.0」のリリース候補を公開
『Tailwind CSS実践入門』 出版記念基調講演
Webフレームワーク「Astro」を便利に使う～環境のカスタマイズとAstro 4.3までの新機能まとめ～
GitHub - kolodny/safetest
【fabric】複雑なタスクをAIが自動化、人間の能力を拡張するオープンソースAIを使ってみた | WEEL
Tailwind CSS を使う時に一緒に入れたいライブラリ
Adobe、新しいUIデザインシステム「Spectrum 2」を発表 ～2024年Web製品より順次展開／アクセシビリティ、親しみやすさ、クロスプラットフォーム一貫性の3点が軸
便利で差がつく、ずるいWeb制作ツール・素材90選【2023年ベスト】
RailsライクなRustのWebフレームワーク 「Loco」 | DevelopersIO