GitHub - dotenvx/dotenvx: a better dotenv–from the creator of `dotenv`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
エラーや非同期処理をより安全に扱うための TypeScript ライブラリ Effect-TS
TypeScript の型システムを活用して、本番のアプリケーションにおける実用的な問題を解決することを目指しています。Effect-TS は、以下のような特徴を備えています。 並行性（concurrency）：Fiber ベースの並行モデルにより、高いスケーラビリティと低レイテンシを実現 コンポーザビリティ（composability）：小さく再利用可能なパーツを組み合わせることで、メンテナンス性、可読性、柔軟性の高いソフトウェアを構築する リソースの安全な管理（resource-safety）：処理が失敗したとしても、安全にリソースを開放する 型安全性（type-safety）：TypeScript の型システムを活用した型推論と型安全性に焦点を当てている エラー処理（error handling）：構造化された信頼性の高い方法でエラーを処理する 非同期性（asynchronicity
React Testing Libraryの使い方 - Qiita
Robin Wieruch氏によるHow to use React Testing Library Tutorialを著者の許可を得て意訳しました。 誤りやより良い表現などがあればご指摘頂けると助かります。 原文： https://www.robinwieruch.de/react-testing-library Kent C. Dodds氏によるReact Testing Library (RTL)がAirbnbのEnzymeに取って代わるものとしてリリースされました。EnzymeはReact開発者にReactコンポーネント内部をテストするためのユーティリティを提供しますが、React Testing Libraryは一歩さがって、「Reactコンポーネントを完全に信頼するためにはどうテストすべきか」を問いかけます。コンポーネントの実装の詳細をテストするのではなく、React Testi
GitHub - gcanti/fp-ts: Functional programming in TypeScript
Functional programming in TypeScript 📢 Important Announcement: fp-ts is Joining the Effect-TS Ecosystem! We are excited to announce that the fp-ts project is officially merging with the Effect-TS ecosystem. This is a significant step forward in the functional programming landscape, bringing together two powerful libraries under one roof. Giulio Canti, the author of fp-ts, is being welcomed into t
Seneca, a microservices toolkit for Node.js
Design, develop and organize your code Seneca is a microservices toolkit for Node.js. It helps you write clean, organized code that you can scale and deploy at any time. $ npm install seneca --save Seneca is a microservices toolkit for Node.js. It provides plugins that look after the foundations of your app. This leaves you free to focus on the real, business code. No need to worry about which dat
React Hook Formハマりどころとベストプラクティス
初めに React Hook Form（以後、RHF）はとても便利なバリデーションライブラリですが、非制御コンポーネント前提なのでRHFのAPIを通して全ての操作を行うことになります。 そのうえで、自分なりにつまづいたところやわかりづらかったところをまとめました。 個人的に結構このライブラリを扱うのに苦労しているので、皆さんもコメントで自分なりのハマりどころを書いたり、新しく記事にしたりしてネット上に知見が溜まればなと思っています。 ハマりどころ useFormのdefaultValuesは動的に変更しない これしっかりドキュメントに書いてあるんですが、defaultValuesを変更したい場合はresetAPIを使いましょう。 悪い例 このようにAPIからデータが返ってくるまで適当な初期値を渡しちゃうような設計だと、APIからデータが返ってきてもフォームの値が変わらないということがありま
FullCalendar - JavaScript Event Calendar
npm install @fullcalendar/angular import { Component } from '@angular/core' import { CalendarOptions } from '@fullcalendar/angular' @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { calendarOptions: CalendarOptions = { initialView: 'dayGridMonth', events: [ { title: 'event 1', date: '2019-04-01' }, { title: 'e
React Chartライブラリを比較してみた | DevelopersIO
こんにちは。データアナリティクス事業本部 サービスソリューション部の北川です。 最近、ReactのChartライブラリについて調べる機会があったので、その時の共有です。 今回は、以下の４つを使用してみました。 Recharts react-chartjs-2 nivo victory Recharts https://github.com/recharts/recharts 特徴 React コンポーネントとして使え、素の SVG の描画をサポート 画面に表示したいコンポーネントを宣言するだけで描画可能 Next.jsでは、動的インポートを使用(アラートのみのため、使用しなくても使えることは使えます) TypeScript組み込み チャートAPI ＊ 棒グラフ、円グラフなどの基本的なチャートは省きます FunnelChart SankeyChart RadarChart Treemap デ
グーグルが開発した画像圧縮ツールSquoosh。フロント開発向けにNode.jsで扱う方法まとめ - ICS MEDIA
グーグルが開発した画像圧縮ツールSquoosh。フロント開発向けにNode.jsで扱う方法まとめ 『Squooshスクーシュ』というGoogleが開発した画像圧縮ウェブアプリがあります。ブラウザで変換結果を見ながら圧縮設定ができるので、画像圧縮の難しい知識を持たない方でも使いやすいことが特徴です。圧縮だけでなく、WebPなどの各種フォーマットへの変換・リサイズといったこともできる便利ツールです。 このSquooshをNode.jsで扱える『libSquoosh』が存在します。libSquooshは大量の画像を一括で圧縮、WebPへの変換、リサイズなどの処理をこれ1つで完結できるのがポイントです。昨今のウェブはページの読み込み時間が重視される傾向があります。画像のファイルサイズは読み込み時間に大きく影響するため、画像圧縮は重要なテクニックです。libSquooshをwebpack・Viteと
Game of Codes project
"Over the years, observing the world of technology, I could not help but feel that it is a great material for creating a separate universe that could become the basis for an extremely interesting story. Using real data, such as the number of NPM downloads, stars on github or website traffic, I tried to measure the "power" of a given technology and visualize it with quasi-historical maps."
Game of Codes – プログラミングツールやライブラリの勢力を表した架空の世界地図
Game of Codes は、プログラミング技術の人気度を基に勢力争いを架空の地図に表すというプロジェクトです。 フロントエンドJavaScriptライブラリ2021の勢力地図(クリックでオリジナルを表示)がこれ。 React が帝国であるのに対し、Angular, Vue, jQuery が王国、Svelte が公国なのは「規模感」だそうなので、国名はデータからプログラムが決めているわけではないようです。 各国のサイズは過去12か月間の npm でのダウンロード数をベースにしているそうです。 What if #javascript libraries were countries? Will the #React Empire dominate the world? Will the Kingdom of #Vue stop the invasion? Will Kingdom of
Reactベースのスプレッドシートのようなライブラリを作った話
あけましておめでとうございます🎍 Zennに書くのは初めてなのでお手柔らかにお願いします🙏 最近 お金がもらえる とても良いプラットフォームがあると聞いたのでこちらに書いてみることにしました👻 冗談はさておき、スプレッドシート便利ですよね。 こんなに便利なものなのでWebアプリケーションにも組み込みたいくらいなんですが、要望を満たしてくれるような高機能なライブラリはだいたい有料です😢 かねてより使いたいと思っていたHandsontableも有料版だけになってしまいました🥺 というわけで文句ばっか言っていても始まらないので自分で作ってみることにしたというのが事の経緯です。 デモ で、出来上がったのがこちらです🤲 Chromeだとiframeの埋め込み越しにセルのドラッグができないみたいなので直接CodeSandboxに行くか、別のブラウザでアクセスしてください😿 (Drag A
React向けライブラリを解説～フォームの状態管理を助けるFormikとは？
昨今、WebアプリケーションのフロントエンドをReactで作成する機会は少しずつ増えてきました。Reactそのものは状態管理とUIを効率的にひもづけるためのフレームワークですが、その周辺には、複雑な状態管理を効率化するライブラリやきれいなUIを提供してくれるライブラリなど、魅力的なライブラリが数多く存在しています。本連載では、そんなライブラリを1つずつ、実例を添えて解説することで、現場で課題に出会った際に適切なライブラリを選択できる力を養います。第1回となる今回は、入力フォームについて扱います。 対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactを用いたJavaScriptアプリケーション開発の経験者 前提環境 筆者の検証環境は以下の通りです。 macOS Catalina 10.15.7 Node.js 14.14.0／npm 6.14.8 React 17.0.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Divz - Scroll, Swipe & Zoom on the 3D Z-Axis
GitHub - tremorlabs/tremor: React components to build charts and dashboards
Lexical
現場で役立つ！ React向けライブラリ詳説一覧
Radix UI
GitHub - cozmo/jsQR: A pure javascript QR code reading library. This library takes in raw images and will locate, extract and parse any QR code found within.
React-pdf