tldraw SDK
Add a tldraw canvas to your React app in just 5 minutes. You can use the tldraw SDK to craft infinite canvas experiences for the web. It's perfect for collaborative whiteboards but you can use it for lots of other things, too. By the end of this guide you will have made something that looks like this: 1. Installation Set up a React project however you normally do. We recommend Vite. Install the tl
GitHub Packagesを使用してprivateなnpmパッケージとして公開する
同じ内容の記事がいくつも公開されていますが、実際に試してみたら結構はまったので備忘録として残します。 やりたいこと GitHub Packagesにプライベートで公開したnpmパッケージを、複数のアプリケーションで使用する。 npmなどのレジストリから取得しているパブリックなパッケージと同じように、自作パッケージをGitHub Packagesからバージョン指定してインストールできるようにする。 GitHub Packagesとは GitHub PackagesはGitHubが提供しているレジストリ。 GitHubのユーザーまたはOrgに閉じたパッケージを公開できる。 パッケージをGitHub Packagesへパッケージ公開 package.json の設定 公開するパッケージの package.json に以下の情報を設定する。 name: パッケージ名 フォーマット: @<スコープ>
pipのキャッシュの管理 - methaneのブログ
MySQL 8.4がリリースされて、定番の「mysqlclient をインストールしたんだけど動かない」という報告が来た。これはpipが以前にビルドしたバイナリをキャッシュして再利用しているためで、前のバージョンのlibmysqlclientにリンクしたバイナリなのでバージョンアップしたら当然動かなくなる。 この解決方法と合わせて、pipのキャッシュについて簡単に説明していこうと思う。 pip.pypa.io 2種類のキャッシュ pipのキャッシュには2種類ある。HTTPレスポンスを保存するHTTPキャッシュと、ソースパッケージをビルドした結果を保存するwheelキャッシュだ。 wheelが提供されていたらHTTPキャッシュのみが使われる。wheelキャッシュはソースパッケージからインストールするときしか使われない。 最近はpure PythonパッケージでもWheelを提供することが増え
Wallaby - Immediate JavaScript test feedback in your IDE as-you-type
Wallaby.js is a developer productivity tool that runs your JavaScript and TypeScript tests immediately as you type, highlighting results in your IDE right next to your code. Test execution results, including code coverage, are displayed and updated in realtime right where you need to see them — in your code editor, next to the line of code that you're editing. Say goodbye to context switching. The
Reactivated — Zero-configuration Django and React
from django.http import HttpRequest, HttpResponse from django.shortcuts import redirect from . import forms, templates def home_page(request: HttpRequest) -> HttpResponse: form = forms.SignUpForm(request.POST or None) if form.is_valid(): form.save() return redirect("profile") return templates.HomePage(form=form).render(request) import React from "react"; import {CSRFToken, Form, templates} from "@
Storybook Test ruuner で安定した Visual Regression Testing を行う
はじめに 株式会社ナレッジワーク Engineering Division のわだまる（@wadackel）です。 ナレッジワークの Web フロントエンド開発では、Storybook を活用したコンポーネント開発を行っています。そして、昨年末により良いコンポーネント開発の基盤整備を進めるべく @storybook/test-runner（以降 Storybook Test ruuner）を導入しました。導入目的としては主に、各 Story に対するスモークテスト、play 関数を活用したコンポーネントテストを行うことです。 さらに、ナレッジワークでは前述した通常のコンポーネントテストに加えて、reg-suit と storycap を利用した Visual Regression Testing（以降 VRT）を行っています。 これまでは Storybook を活用したテストは VRT の
How to make Storybook 2-4x faster
Storybook 7.6 contains massive performance improvements. Most will become the default in our next major release (Storybook 8.0), but you can adopt them today by opting in manually. Here’s how to get started! ⛳️ --test flag for 2-4x faster test builds 🩺 2.2x faster React docgen 🧳 Streamline essential addons 🌐 SWC for 50% faster Webpack projects 🔬 @storybook/test for more streamlined and perform
Reactで実装したフォームのパフォーマンスが問題になるのはなぜか
RelayHub合同会社の久保田光則です。 Reactでフォームを効率よく実装するためのライブラリとして、React Hook FormやReact Final Form、TanStack Formなどがあります。これらのライブラリは、フォームを効率よく実装できる枠組みを提供してくれるだけではなく、高速なフォームを実装するための方法も提供してくれます。 で、この記事ではReact Hook Formとかそういうライブラリの使い方というよりかは、そもそもなぜReactで実装したフォームのパフォーマンスが問題になりやすいのか、その辺りの事情について解説します。 Reactのレンダリングの仕組み Reactでは皆さんご存知のとおり、仮想DOMと呼ばれるDOMに似た構造のオブジェクトを生成してレンダリングを行います。Reactのコンポーネントはレンダリングするたびにそのコンポーネントに対応する仮想
GitHubのデータセンターでは、Mac miniを分解して取り出したメイン基板をラックマウントに使っている
GitHubのデータセンターでは、Mac miniを分解して取り出したメイン基板をラックマウントに使っている GitHubは、コードのビルドやテスト環境などで使えるGitHub-hosted runnerとして、Apple M1チップによる「M1 macOSランナー」を提供しています。 このM1 macOSランナーの実行環境として同社のデータセンターには大量のMac miniが稼働していますが、同社が先月（2023年12月）に公開した動画によると、この大量のMac miniはラックマウントのために分解されてメイン基板が取り出され、専用のシャーシに納められていると説明されています。 GitHubはどのようにしてMac miniをデータセンター内でラックマウントしているのか、動画の内容を紹介しましょう。 Mac miniを分解、メイン基板を専用シャーシに組み込む あるGitHubのオフィス。こ
Refine | Open-source Retool for Enterprise
The sweet spot between low-code and full-code.Drag-and-drop tools shine initially but collapse under the weight of complexity. Refine offers comparable speed at the start and infinite scaling in the long run. Business applications not only share fundamental UI elements, but also the underlying logic.Stop writing repetitive code for CRUD, security and state management. Let Refine automatically tran
VRTツールとしてLost Pixelを使ってみたらいい感じだった
Lost Pixel Lost PixelとはWeb UIのビジュアル回帰テスト(VRT)のためのツールであり、キャプチャの撮影と差分の検出を一つのプロセスで行うことができるオープンソースライブラリです。 Web UIのVRTというと、storycap + reg-suit や、Playwrightのスナップショット機能、または Chromatic のようなサービスを思い浮かべる方も多いと思いますが、まさにそれらの類似ツールにあたるものであると捉えていただいて差し支えありません。 本記事では具体的な導入手順などは省き、Lost Pixelの特徴や他の類似ツールとの比較、または筆者の用途とカスタマイズについて紹介します。 記事を読んで、実際に導入を検討される場合のインストール方法やセットアップに関しては、公式のドキュメントを参照してください。 また、Lost Pixelにはプラットフォームモ
第794回 Ubuntu Sway Remixで日本語入力を整える | gihyo.jp
今回はWaylandコンポジターでありタイル型ウィンドウマネージャーであるSwayを採用したUbuntu Sway RemixにFcitx5をインストールし、動作させる方法を紹介します。 SwayとUbuntu Sway Remix Swayはウィンドウマネージャーです。Waylandコンポジターであり、GNOMEのようにXセッションとの切り替えができるわけではありません。つまりは常にWaylandセッションを使用することになります。そしてタイル型ウィンドウマネージャーとして有名なi3を置き換えられるとのことで、強力なタイルサポートがあります。 Ubuntu Sway RemixはそんなSwayを採用したリミックス（非公式派生版）です。インストール「は」簡単に行なえます。 今回はUbuntu Sway RemixにFcitx5をインストールし、日本語入力環境を整えます。Waylandの最前
個人開発の SwiftUI アプリのアーキテクチャを MVVM から MV にした - maiyama4's blog
概要 SwiftUI Advent Calendar 2023 の 21 日目です。 最近趣味で iOS の podcast クライアントを SwiftUI で作っているのですが、やってみると podcast クライアントはアプリとしてそれなりに難しいことがわかってきました。作っているうちにどんどん状態管理が複雑になってきて、個人開発でなぜこんなにがんばりが必要なんだと思って開発が止まっていたのですが、最近 iOS 17 の登場をきっかけにアプリを全般的に書き直すことにして、同時にアーキテクチャを変えてみました。これにより構成がシンプルになって開発効率が上がり、開発を再開することができました。具体的には、 from: １画面に１つ ViewModel（ObservableObject）を作り、 View から ViewModel を監視する MVVM to: View から直接 Model
家に警官が来て危なかった話｜やーこ
父の誕生日に父の顔がプリントされたTシャツを贈ろうと制作会社に画像を送り依頼したところ、添付画像を誤り近所のオヤジの顔がプリントされたTシャツが届いた。 父に贈る訳にもいかず、かといって近所のオヤジに「あなたの顔のTシャツです」などと何の前触れもなく押し付ける訳にもいかず、Tシャツはその行き場を無くした。 その後、長雨により洗濯物を溜め込みすぎ、近所のオヤジTシャツはあれど長袖の服が無いという危機を迎えた。 半袖で震えながら部屋中を探し回ったところ昔父が買ったサンタの衣装が出てきたので、それで凌ぐ事にした。 しかし部屋は寒く、激しく動き回る事で暖をとっていると友人から美味しい唐揚げを作ったのでお裾分けすると電話が入った。 私は舞い上がり唐揚げの到着を玄関で待機し、インターホンが鳴ると共に扉を開けた。 しかし、そこには友人の姿はなく警官が立っていた。 警官もまさか民家から妙に汗で湿ったサンタ
VScodeだけでGit操作を完結させるのだ～～ッ!!
VScodeだけでGit操作を完結させる方法について書くのだ。 👀その前に！ この記事は、以下の2つの拡張機能がインストールされている前提で進めるのだ。 Git Graph - Visual Studio Marketplace GitLens — Git supercharged - Visual Studio Marketplace インストールしておいてほしいのだ。 ✅ステージング(git add ◯） 以下のようにするのだ。 ＋ボタンをクリック：ステージングする ーボタンをクリック：ステージングを解除する ▲ステージング→解除 ✅コミット名を自動でつける 右にある✨ボタンを押すと、コミット名を自動で決めてくれるのだ👇 ▲この例だと、変更内容が意味不明すぎて変なコミット名になってるし、現状英語だけみたい？ これは、GitHub Copilotの機能なのだ。 ✅コミット(git c
React Server Components のテスト手法
React Server Components のテスト手法 2023.11.26 現代におけるコンポーネントのテストは Testing Library を用いてテストを行うことが一般的です。しかし、2023 年 11 月現在、Testing Library はまだ Server Components のテストを十分にサポートしていません。そのため、Server Components のテストを行うには、別の方法を用いる必要があります。この記事では、Testing Library を用いずに Server Components のテストを行う方法について説明します。 現代では React におけるコンポーネントのテストは Testing Library を用いて、ユーザーの視点からテストを行うことが一般的です。getByRole のようなユーザーの視点のセレクタなどを提供しているため、実装
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.js App Router Training
GitHub - ajeetdsouza/zoxide: A smarter cd command. Supports all major shells.
GitHub - bvaughn/react-resizable-panels
cleave-zen - Format input text content when you are typing