Create reusable Tailwind CSS + React components – TWC
Supercharge React + Tailwind CSSTWC is a lightweight library to create Tailwind CSS Components in one line, write less code and build faster. import * as React from "react"; import clsx from "clsx"; const Card = React.forwardRef< HTMLDivElement, React.HTMLAttributes<HTMLDivElement> >(({ className, ...props }, ref) => ( <div ref={ref} className={clsx( "rounded-lg border bg-slate-100 text-white shad
2023 年、改めて React と Elm Architecture を比較する - ジンジャー研究室
最近 React のドキュメントが新しくなったということで読んでみた。第一印象としては、とにかく懇切丁寧で React というか JavaScript すら初心者という読者でも基礎的な考え方が身に付くようになっている。ただ、深い内容まで読み進めると「同じ Virtual DOM のフレームワークでも Elm とだいぶ違うな」と改めて思った。 これはどちらが良いとか悪いということではなく、一長一短あると思う。筆者は長いこと Elm を使ってきたが React も嫌いではなく、趣味を含め色々な場面で重宝している。ただ、 Elm Architecture の提供するシンプルな仕組みには依然として価値があると思っており、それがあまり世の中に知られていないのが勿体無い。というのが、この記事を書こうと思った動機である。 昔は「部分的に取り入れても Elm メリットは享受できないから Elm やってよ」
GitHub - omnivore-app/omnivore: Omnivore is a complete, open source read-it-later solution for people who like reading.
Omnivore is a complete, open source read-it-later solution for people who like text. We built Omnivore because we love reading and we want it to be more social. Join us! Highlighting, notes, search, and sharing Full keyboard navigation Automatically saves your place in long articles Add newsletter articles via email (with substack support!) PDF support Web app written in Node.js and TypeScript Nat
自社メディアを ISR を使って爆速にした話
メディアの紹介 Beyond Magazine というメディアを自社で展開しています。 紙の雑誌を長年やっていたメンバーで作っている web メディアで、グラフィックがいけてるので見てみてください。 技術的には、Shifter Headless をバックエンド（CMS）として、Next.js でメディア本体を描画しています。 もともとのアーキテクチャとしてはこんな感じでした。 課題 速度（特に FCP）が遅いときだと数秒かかる Shifter が落ちるとサイト全体が落ちてしまう（しかも割と頻繁に落ちる） という課題がありました。 ISR の導入 導入の経緯 原因としては、リクエストの都度、Shifter Headless から同期的に記事データをフェッチしてから SSR して返すという仕様になっていたことが大きかったです。 Shifter Headless を導入した意図の一つですが、コメ
Next.js 12
As we announced at Next.js Conf, Next.js 12 is our biggest release ever: Rust Compiler: ~3x faster Fast Refresh and ~5x faster builds Middleware (beta): Enabling full flexibility in Next.js with code over configuration React 18 Support: Native Next.js APIs are now supported, as well as Suspense <Image /> AVIF Support: Opt-in for 20% smaller images Bot-aware ISR Fallback: Optimized SEO for web craw
なぜメモ化を行う必要があるのか？メモ化の意義について考える。
こんにちは、株式会社スタメンでフロントエンドエンジニアをしている@0906kokiです。 今回の記事ではReactを使用する際に、なぜメモ化をする必要があるかについて書きたいと思います。 この記事を書こうかなと思った背景としては、普段Reactでコーディングをしている中で、「ここはレンダリングが不要だからメモ化する必要がある」とか「関数が再生成されてしまうからuseCallbackを使おう」みたいにメモ化していたのですが、そもそもメモ化をすることでどんなメリットがあるのか実感をしていなかったからです。 「たしかにメモ化をすることでレンダリングが抑えられるが、DBによるボトルネックやN+1などと比較して重要なことなのか？」「レンダリングを抑えることのコストに時間を割くのであれば、別の部分にコストを払った方が費用対効果はあっているのではないか？」などと、メモ化をするコストに疑問を持っていました
150万MAUのNuxt.js製サービスを機能開発を止めずに1ヶ月&1人でNext.jsに置き換えた話
Nuxt.js で開発されていたAI受診相談ユビーのフロントエンドを Next.js で作り直しました。 まだまだ仮説検証を繰り返すフェーズのスタートアップのため、機能開発を止めて一気に置き換えることはできず、機能ごとに少しずつ置き換えてリリースをしました。結果、5人のプロダクト開発チームによる機能開発と並走して、全体の移行を1人で1ヶ月の短期間で終わらせることができたので、その意思決定や過程、工夫を紹介します。 移行前の課題 まず前提として、移行前の Nuxt.js による実装は 2018 年に立ち上がったもので、当時 toC の Web サービスを持っていなかった Ubie が ほぼ 1 人の小さいチームで PoC 的に作り始めたものでした。また、当時の Next.js は今ほど多機能ではないプレーンなフレームワークでした。 これらを踏まえて、当時の状況で MVP を最速で作るための技
stand.fmアプリのパフォーマンス改善話「推測するな、計測せよ」｜Takahiko Wada
(このnoteはstand.fm engineeringマガジンの記事です) stand.fm エンジニアの和田(@takahi5)です。 今回はReact Nativeアプリののパフォーマンス改善について書きたいと思います。主にレンダリング周りの改善です。 アプリを開発していてユーザーや社内のメンバーから「アプリが重い！」と言われたことはないでしょうか？僕はよくあります笑 今回はstand.fmのライブ配信機能で実施したパフォーマンス改善について、ボトルネックの特定からその改善まで、実例に触れながらご紹介したいと思います。 アプリが重い！？ただこの「アプリが重い！」にもいろいろパターンがあります。 - ボタンをタップしたときの反応が遅い - アニメーションがカクカクする - ローディングがなかなか終わらない - 起動に時間がかかるなどなど、一言で「重い」と言っても、詳しく聞いてみると色々
React Navigationで画面遷移を実現する
今回はReact Nativeにおける画面遷移の方法を解説します。モバイル向けのアプリはパソコン向けのアプリとは違い、1画面あたりの役割や情報量を減らして、画面遷移をたくさん行うように設計することが多くなりがちです。そのため、画面遷移ライブラリは重要な役割を担っています。サードパーティの画面遷移ライブラリで人気のものはいくつかありますが、今回はReact Navigationを採用して、複数の画面遷移パターンについて解説していきます。 対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactを用いたJavaScriptアプリケーション開発の未経験者 前提環境 筆者の検証環境は以下の通りです。 macOS Catalina 10.15 Node.js 12.4.0／npm 6.9.0 expo-cli 3.11.9 expo 36.0.0（React Native 0.61
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://x.com/gorilla0513/status/1782985206456344705?s=12&t=WLoQjPOJLfZ0ZJFtTOS7aw
drawdb/package.json at main · drawdb-io/drawdb
GitHub - xyflow/xyflow: React Flow | Svelte Flow - Powerful open source libraries for building node-based UIs with React (https://reactflow.dev) or Svelte (https://svelteflow.dev). Ready out-of-the-box and infinitely customizable.
GitHub - adrianhajdin/iphone: Recreate the Apple iPhone 15 Pro website, combining GSAP animations and Three.js 3D effects. From custom animations to animated 3D models, this tutorial covers it all.
GitHub - kriasoft/react-starter-kit: The web's most popular Jamstack front-end template (boilerplate) for building web applications with React
https://twitter.com/d151005/status/1766128024339308920
GitHub - latentcat/uvcanvas: An React.js component library for beautifully shaded canvas https://uvcanvas.com
TanStack | High Quality Open-Source Software for Web Developers
https://airbnb.io/visx/
GitHub - carbon-design-system/carbon: A design system built by IBM
GitHub - antonioru/beautiful-react-hooks: 🔥 A collection of beautiful and (hopefully) useful React hooks to speed-up your components and hooks development 🔥
