React Query を使っていて気になった SWR とのいくつかの違い | DevelopersIO
MAD 事業部の高橋ゆうきです。 REST API である場合、プライベートでは SWR を使うことが多いのですが、昨年から案件では React Query を使っているのでいくつかの違いを感じることがありました。ここでは React Query のドキュメントにある表 から気になった違いをいくつかピックアップしてみます。 比較 Query Key Change Detection React Query - Deep Compare (Stable Serialization) SWR - Shallow Compare Deep Compare (Stable Serialization) 2021 年 2 月 20 日現在上記のように記載されていますが、SWR も 1.1.0 以降は ドキュメントにも記載されているように、stable serialization となっています。 Q
Form Validation Using JavaScript's Constraint Validation API
Form validation is one of the primary reasons to use client-side JavaScript. It can prevent user entry errors before your app attempts to submit data to the server. But… client-side validation is not a substitute for server-side validation! Always check incoming user data on the server. Not every request will come from a browser nor will every browser run validation code. Client-side validation is
JS Self-Profiling API In Practice
Nic Jansma (@nicj) is a software developer at Akamai building high-performance websites, apps and open-source tools. Table of Contents The JS Self-Profiling API What is Sampled Profiling? Downsides to Sampled Profiling API Document Policy API Shape Sample Interval Buffer Who to Profile When to Profile Specific Operations User Interactions Page Load Overhead Anatomy of a Profile Beaconing Size Comp
APIキーもログインも不要！完全無料で使える天気予報API「Open-Meteo」を使ってみた！ -
どうも、まさとらん（@0310lan）です！ 今回は、誰でも無料で使える天気予報APIを提供してくれるWebサービスをご紹介します！ 面倒なユーザー登録やAPIキーの設定などが不要で、欲しい天気情報のパラメータを含めたURLを好きなように構成するだけで簡単にJavaScriptから制御できるのが特徴です。 日本はもちろん、世界中の詳細な天気情報を取得できるのでご興味ある方はぜひ参考にしてみてください！ 【 Open-Meteo 】 ■「Open-Meteo」の使い方 それでは、「Open-Meteo」をどのように使えばいいのか詳しく見ていきましょう！ 「Open-Meteo」が提供する天気予報APIを利用するにあたり、何か特別な登録や申請は必要ありません。もっと言えば、ユーザー登録も不要でAPIキーもありません。 非営利プロジェクトであれば誰でも自由に使うことが可能で、以下のエンドポイント
yahooのルビ振りAPIは思っていたより面白い - Qiita
動機 前回はdocomoの形態素解析apiを使ってみる。 ルビ振りAPIのパラメータを見てみたら面白い項目があったので試してみたいと思います。 yahooのルビ振りAPI 入力されたテキストに対してルビをつけて返してくれます。 パラメータについて 今回少し変わってると感じたのは、gradeパラメータです。 小学校何年生までの漢字にルビをつけるか、という粒度で設定ができます。 もし、gradeで3を設定すると、1~2年生で習う漢字にふりがなをつけず、 それ以上の難しさの漢字にのみルビをつけてくれます。 1: 小学1年生向け。漢字（注2）にふりがなを付けます。 2: 小学2年生向け。1年生で習う漢字にはふりがなを付けません。 3: 小学3年生向け。1～2年生で習う漢字にはふりがを付けません。 4: 小学4年生向け。1～3年生で習う漢字にはふりがなを付けません。 5: 小学5年生向け。1～4年生
Storybook First な開発のススメ
Storybook first な開発とは Storybook での呼び出され方を意識しながらアプリケーションコードを書くことをそのように呼んでいます。 道具に設計がひきづられるのはアンチパターンと言われそうな気もするのですが、コンポーネントのカタログを整備していくことは、コンポーネントが良い感じに再利用可能な形で分離できるということでもあり、やっていくとむしろ正道に近づいていくと思います。 Storybook First のコンポーネント設計や型定義をすると、パーツに限らず Storybook でカバーできる範囲が広がり、ページそのもののサンドボックスを作れます。 そして API がない状態でもデータを使って開発ができたり、特定のスナップショットの再現やタイムトラベルに近いことも可能になるというメリットがあります。 つまり、ただのコンポーネントカタログとしてではなく、開発のためのサンドボ
How Netflix Scales its API with GraphQL Federation (Part 1)
Netflix is known for its loosely coupled and highly scalable microservice architecture. Independent services allow for evolving at different paces and scaling independently. Yet they add complexity for use cases that span multiple services. Rather than exposing 100s of microservices to UI developers, Netflix offers a unified API aggregation layer at the edge. UI developers love the simplicity of w
GitHub - lspgn/edge-sql: Cloudflare Workers providing a SQL API
I had an idea. Here's a little backstory. Many services provide a REST API on top of a SQL database. For certain datasources, flexibility in terms of queries is key. Often those use-cases are dashboard prototyping, for example with Grafana. This data is usually read-only statistical datasets where the user needs to run many queries in order to troubleshoot an issue or just find the best visualizat
Promise のキャンセルについて - Qiita
[ English version ] JavaScript と Node.js についてのこの徹底した投稿では、Promises のキャンセルの歴史、なぜNode.jsに関係があるのか、そして async/await APIで使おうとしたときに注意すべきことについて学ぶことができます。 この投稿は、JavaScript の Promise API をよく理解していて、 Node.js の経験がある方のためのものです。 歴史 2014 年に Promise API がブラウザに導入されて以来、人々は Promise で他に何ができるかを調べていました。ブラウザに最初に登場した関連APIは、HTTP リクエストのための fetch() でした。 HTTP リクエストの問題は、サーバーのリソースを消費することであり、サーバーに送信されるリクエストの数が多い場合はお金がかかります。このため、特に
Why use GraphQL? | Apollo GraphQL Blog
Before there was GraphQL, there was REST. In recent years, REST has become the dominant API style for building backend web services. With REST, you could signal the type of request we want to make (ex: GET, POST, PUT, or DELETE) and the resource we’d like to fetch or interact with (ex: /api/pets/1) using an HTTP method and a URL. It’s a great approach (and one we initially used at StockX for sever
Async Clipboard APIでJavaScriptからクリップボードを操作する
JavaScriptからのクリップボードの操作は、長いあいだ開発者たちに切望されていました。かつてはFlashを使って実現するハックなどがありましたが、各ブラウザがexecCommandによるクリップボード操作を実装したことで、現在は落ち着きつつあります。 ただ、APIが綺麗に整備されているとは言いにくく、あまり現代的ではありません。そこで、スマートかつ現代的にクリップボードを扱うことができる、Async Clipboard APIの実装が進みつつあります。 Async Clipboard APIはその名の通り非同期でクリップボードを扱うAPIです。Async Clipboard APIはPromiseを返すので、直感的に扱えるようになっています。 従来のAPIでも、execCommandを用いることによってクリップボードを操作することができました。しかし、バグが多くブラウザ間の整合性が取
SWR vs React Query - fsubal
#フロントエンド （※ この記事は API およびそこから導かれる設計のしやすさ観点での比較をしています。実際にキャッシュが有効に効いたか、などについてはまた別の機会に ） 動機 SPA の状態管理に必ずしも Redux いらないんじゃね問題 Redux が嬉しいのってクライアントサイドでモリモリ状態が変わる画面だけじゃん、みたいなアレ 検索結果の一覧みたいなページに Redux を使うの意味なかった 本当に必要なとこだけ使うようにしたい ほとんどのケースで欲しいのって React 向けの API クエリキャッシュ これまでは Redux の Store を単なるキャッシュとして使ってたが、違うよね 候補 ↑ みたいな話でよく上がるオルタナティブとして SWR と React Query がある これら 2 つを比較する。 TL;DR SWR の方が王道感を感じるけど、思ったより #rea
データ収集の基本と「JapanTaxi」アプリにおける実践例
データ収集の基本として、データソース毎に典型的なデータ収集方法を整理して説明しています。またJapanTaxiアプリにおいてどのように実践しているかを説明しています。
Apple declined to implement 16 Web APIs in Safari due to privacy concerns
Apple declined to implement 16 Web APIs in Safari due to privacy concerns Apple said these 16 new Web APIs add new user fingerprinting opportunities for online advertisers. Apple said this week that it declined to implement 16 new web technologies (Web APIs) in Safari because they posed a threat to user privacy by opening new avenues for user fingerprinting. Technologies that Apple declined to inc
Async Clipboard API
Safari 13.1 adds support for the async Clipboard API. This API allows you, as web developers, to write and read data to and from the system clipboard, and offers several advantages over the current state of the art for reading and writing clipboard data via DataTransfer. Let’s take a look at how this new API works. The API The Clipboard API introduces two new objects: Clipboard, which is accessibl
リモートのデータ取得のためのフックライブラリの SWR を使ってみる | メルカリエンジニアリング
こんにちは。Mercari Advent Calendar 2019 の 17 日目は Web UX Team 所属の @lightnet328 がお送りします。 どのようにリモートのデータを取得して管理するかは SPA 構成の Web フロントエンドにおいて大きなテーマの 1 つだと思います。最近では Apollo Client のようにデータ取得のためのクライアントとデータ管理のためのキャッシュ機構が一体化したライブラリが出てきています。 本稿で紹介する zeit/swr (以下、SWR) もそのような特徴を持っています。SWR はその名が示すとおり HTTP の stale-while-revalidate (略すと swr) というキャッシュ戦略に影響を受けているため、先に HTTP の state-while-ravalidate について紹介します。 HTTP の Cache-
Vue.js 3.0で搭載される Composition APIをリリースに先駆けて試してみた - SMARTCAMP Engineer Blog
スマートキャンプでBiscuetのエンジニアをしている中川です。 本記事はスマートキャンプ Advent Calendar 2019 - Qiitaの19日目の記事です。 現在弊社のプロダクトであるBOXILとBiscuetは、そのどちらの開発チームもVue.jsを使用して開発しています。 Vue.jsの学習コストの低さやコンポーネント指向は少人数のチームでユーザーに素早く価値を届けていきたい弊社の開発においても重宝しています。 さてそんなVue.jsですが、2020年のQ1にバージョン3.0が正式リリースされることが予告されており、正式リリースに先駆けて目玉機能のひとつであるComposition APIが公開されました。 Composition API RFC | Vue Composition API ドキュメントやAPIリファレンスのみならず、バージョン2系でプラグインとして利用で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
オープンデータ、使ってほしいけどオススメしづらい3つの理由
Lambdaで6MBを超えるデータをReturnできなかったので、S3のPre-Signed URLを使った話 | DevelopersIO
GitHub - appsmithorg/appsmith: Platform to build admin panels, internal tools, and dashboards. Integrates with 25+ databases and any API.
