Building a chat - Browser Notifications with React, Websockets and Web-Push 🤯
Nevo David for novu Posted on Aug 22, 2022 • Updated on Sep 26, 2023 • Originally published at novu.co Building a chat - Browser Notifications with React, Websockets and Web-Push 🤯 Like this article? Follow me on X: https://x.com/nevodavid What is this article about? We have all encountered chat over the web, that can be Facebook, Instagram, Whatsapp and the list goes on. Just to give a bit of co
React-Hook-Form APIを使って、ボタンによるフォーム値の操作を行ってみた | DevelopersIO
こんにちは。データアナリティクス事業本部 サービスソリューション部の北川です。 react-hook-formはReact用のフォームバリデーションライブラリになります。一から実装するよりも、フォーム値の管理や検証が容易になります。ドキュメントも見やすく、人気の高いライブラリです。 今回は、react-hook-formで提供されているAPIをいくつか使用して、ボタンによるフォームの操作を、簡単にまとめてみました。 基本的な使用方法 Next.jsプロジェクトを作成します。 npx create next-app --ts プロジェクトに移動し、react-hook-formをインストールします。 yarn add react-hook-form register react-hook-formでは、useFormフックを使用して、フォームの値を管理します。 register()の引数に、
[Rust] 開発環境と実行環境が違う場合のビルド方法 | DevelopersIO
Introduction 私の場合、主にM1 Macを使って開発しています。 先日Linux環境で動作させるRustプログラムを作成する必要があったので 開発環境構築まわりを調べたところ、 いくつかの方法があり、それぞれ試してみたので それらの方法について紹介します。 ある程度の規模であればCIとか使ってちゃんとやるべきな気がしますが、 そこまでするほどでもない規模のものなので、 CIを使う以外のもう少しお手軽な方法を紹介してます。 Environment OS : MacOS 12.4 Docker : 20.10.17 Rust : 1.62.1 IDE : VS Code 1.70.1 Mac(apple silicon)でRustコードを記述、 実行はLinux(x86)で行う想定です。 Build in various ways EC2でビルド & Remote SSHで接続 わ
![[Rust] 開発環境と実行環境が違う場合のビルド方法 | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/dd5670c7677ae91c06d8d1435b350baf9e3cff8a/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2020%2F09%2Frust-logo-1200x600-1.png){kind=logo}
2022-08-18のJS: Astro 1.0、Node.js 16.17.0、DenoとBunの今後の予定
JSer.info #605 - React/Vue/svelteなどのUIフレームワークを利用でき、コンテンツファーストのウェブサイト向けフレームワークであるAstro 1.0がリリースされました。 Astro 1.0 | Astro betaからの変更点としてSSR Buildsの追加、画像の最適化をする<Image>と<Picture>の追加、MDXサポート、Vite 3.0へアップグレードが行われています。 Astro 1.0 Beta Release | Astro マイグレーションガイドは次のページに公開されています。 Migration Guide 🚀 Astro Documentation Node.js v16.17.0がリリースされました。 Node v16.17.0 (LTS) | Node.js Node.js 18からのbackportが中心となりますが、uti
Cheat sheet for React Part I (Updated August 2022)
Would you like to learn React as rapidly as possible? In order to offer you a thorough review of every React topic you'll need to understand in 2022, I've put together a really handy cheatsheet. If you liked it, wait for my next article. The good news is that it is beginner-friendly and I covered a really simple concept. The Game begins here! Create a React App Create React App provides a pleasant
7/25に発売されたばかりの、TypeScript/React/Next.js本読んでみた感想（随時更新）
7/25に発売されたばかりの、TypeScript/React/Next.js本読んでみた感想（随時更新） 9/4 moleculesの実装進める、問題点解決？ 9/3 どーしても直せないので方針変更。一度styled-components導入。 8/29 6.6途中。ドロップダウンまで実装。 8/26 わからんところ復習したり。 8/25 6.5章完了まで。しかしわからんことだらけ 8/24 6.5章途中まで。Atoms/TextAreaまで実装。 8/23 6.5章途中まで。Atoms/Buttonの実装に苦戦中。 8/22 5章完了、昨日放置した問題の解決。 8/21 5章途中、storybookインスコした直後まで 8/20 コンポーネントテスト追加、コメント指摘反映 8/19 4章途中(4.4コンポーネントテスト直前まで完了） 8/18 3章完了 8/17 3章途中（React全
Build fast React Native apps with AWS Amplify
Overview In this article, we will be building a mobile application with React Native using Expo SQLite adapter as a storage adapter for DataStore. By the end of the of article, you will be able to build a contact app using the SQLite adapter for storage as shown in the video below: Expo enables developers to create hybrid JavaScript applications from the comfort of their terminals. Expo has an ada
あるWebサービスの開発メモ・React v18 から v17 へのダウングレードについて - Qiita
あるWebサービスの開発メモ・目次ページに戻る なぜダウングレードするのか 2022年3月に React v18 が公開されました。はじめはこれを利用していたのですが、mui を使っていくなかで原因不明のエラーが発生してしまい、React v18 から v17 にダウングレードして開発を進めていました。 その後 React v18 を使用する際に mui のインストール時にオプションを追加することでエラーを回避できることを知り、React v18 に再挑戦しました。 動作検証したところ、mui の問題は回避できましたが、新たな問題が起きてしまいました。 本サービスでは Swiper コントロールを利用しているのですが、React v18 では autoplay が動作しなくなってしまい、検討した結果、再度ダウングレードすることにしました。 「どうやってダウングレードするんだっけ？」というこ
tRPCとnext.jsの組み合わせで、withTRPCを使うほどでもない時のライトに使う方法
next.jsのAPI周りは気軽に使えて便利なのだが、型周りを考えるとちょこちょこ事故が起きやすい箇所になる。 tRPCを利用するとかなり堅牢なAPIを作ることができる ざっくりtRPCとnext.jsにおける利用について 軽くtRPCとnext.jsとの組み合わせについてかいつまむと、下記のような形になる 名前の通りTypeScriptを利用したRPCを行うためのライブラリ エンドポイントを一つに固定してクライアントでも利用することで型を共有できるもの next対応についてはUsage with Next.jsとしてドキュメント化されてるぐらいがっちりサポートされている next.jsの普通のAPIのルーティングとは異なるため、/api/trpc/[trpc]のような形でエンドポイントを一つに絞って利用する Contextのような機能もあって、複数のAPIの共通処理を一括管理できるところ
"React での ASP.NET Core" テンプレートで生成されるプロジェクトの仕組みを調べてみた | @jsakamoto
C#、ASP.NET、TypeScript、Angular を中心にプログラミングに関した話題を諸々。 by @jsakamoto
WebAuthnで"Client-side discoverable Credential"の挙動を確認する(非対応環境)
ritouです。 今回は何をするのか 前回、"Client-side discoverable Credential"に対応している環境での挙動を確認しました。 今回は"Client-side discoverable Credential"に対応していない環境での挙動を確認します。 Android端末でChromeとFirefoxの挙動を見てみます。 "Client-side discoverable Credential" を指定して PublicKey 作成 これに対して "preferredでやれ" とリプライもらったりしましたが、 仕様通り option.authenticatorSelection.residentKey の値によって動作が変わります。 required 対応していない環境ではエラーになります This value indicates the Relying P
React + Rails + AWS Fargate の構成を実現したい - 01 バックエンド環境構築編(Docker + Rails) - Qiita
概要 本記事のゴール 以下を参考にDocker + Railsの環境構築を行う。 以下つまづいた点をメモする。 つまづいた点 1. Dockerfileの修正 参考のDockerfileだとエラーが発生したので、修正 FROM ruby:2.6.6 ENV LANG C.UTF-8 ENV TZ Asia/Tokyo RUN mkdir /app WORKDIR /app ADD Gemfile /app/Gemfile - RUN apt-get update -qq && \ - apt-get install -y build-essential \ - libpq-dev \ - sudo \ - gem install bundler:2.0.1 + RUN apt-get update -qq + RUN apt-get install -y build-essential l
React + FastAPI で画像のアップロード&保存機能を実装 - Qiita
はじめに Reactの初学者です。 画像のアップロードと保存機能を実装する際に結構詰まったので、備忘録として残しておきます。 フロントエンドはReact、バックエンドはFastAPIで実装します。 コードは初心者っぽいところが多いと思われます。ご了承ください。 React まずは全体のコード。 formタグ内で画像を選択した後、Submitボタンを押すとAPIリクエストが送信されます。 import React from 'react' import { useState } from 'react' import 'bulma/css/bulma.min.css' // css export const SubmitImage = () => { const [image, setImage] = useState() const [errorMessage, setErrorMessa
PydanticがRustで爆速になるという話 - Qiita
はじめに 最近ポッドキャスト聴く時間が少し減ってしまったんだけど、久しぶりに Talk Python to Me を聴いたらPydanticの話題でした（エピソードのリンクはこちら）。作者のSamuel Colvinさんが秋に予定しているメジャーバージョンアップの話をし始めたのですが、冒頭で「コアをRustで実装して17倍速くなる」と言っていて、リンク張られていたドキュメントを読みました。この記事はそこで語られていた内容を中心にPydantic v2についてご紹介します。 Pydanticとは v2の話の前に、そもそもPydanticとは何かについて簡単に触れておきます。PydanticはPythonの型ヒント情報を使ってデータバリデーション（データの妥当性検証）を行うライブラリです。予めデータの構造を定義しておいて、入力されたデータがその構造に合っているかを調べてくれます。 例えば、id
Rustでファミコンとスーパーファミコンのエミュレーターを書いた
ゲームボーイエミュレーター、ゲームボーイアドバンスエミュレーターに続いて、Rustでファミコンエミュレーター"Sabicom"とスーパーファミコンエミュレーター"Super Sabicom"を書きました。 名前にRustっぽさを出してみました。 前回作ったマルチエミュレーターMERUのコアとして実装したので、ステートセーブや巻き戻しなどの機能も使えます。MERUの対応コアはこれで4つになりました。 こちらからWindowsとLinuxのプリコンパイルバイナリがダウンロードできるようになっています。 他のプラットフォームおよびソースコードからコンパイルする場合は ファミコンとスーパーファミコンどちらも一通り本体の機能は実装してあるつもりです。スーパーファミコンは割と細かいところまでちゃんと動くようにしてあるはずなので、動かなかったり表示がおかしかったりするソフトがあればバグですので、ぜひご報
Reactにおける状態管理の動向を追ってみた
こんにちは、@nerusanです。 皆さんは、状態管理ツールなどは使っておられますでしょうか。 例えば、有名なところでは、Redux, Recoilなどがあります。 今回は、Reactにおける状態管理についての動向を知ることで、なぜ、Reduxが使われるようになったのか？何をReduxなどのグローバルな状態管理ライブラリで扱えばいいのか？現状どうなっているのか？を調べたので、記事にしたいと思います！ 自身の解釈なので、もしかしたら、誤ったことを言っている可能性もあるので、その際はご指摘いただければと思います m(- -)m SPAの流行り SPAとはSingle Page Applicationの略であり、新しいページに移動する際、サーバからページを再読み込みするのではなく、JavaScriptを使って、クライアント側のブラウザで動的にページを書き換えるアプリケーションを指します。ページご
第6回 Rustが今、流行っている理由とは | gihyo.jp
【話し手】 吉川 哲史（YOSHIKAWA Satoshi）フェアリーデバイセズ㈱プロダクト開発部部長／プログラマー。自社製品へRustを導入し、自らも実装を行う。書籍『実践 Rust プログラミング入門』共著、技術書典『機械学習の炊いたん』共同執筆。 Twitter @emergent GitHub emergent URL http://nitamago.org/ 本コーナーでは技術へのタッチポイントを増やすことを目標に、各分野で活躍されている方をお迎えします。 今回のテーマはRustです。効率的で信頼性が特徴と言われているRustを商業サービスに組み込んだ吉川さんに、Rustの魅力を伝えていただきます。 はじめてのRust 日高：まずはRustとの出会いからうかがえますか。 吉川：現職に就くちょっと前の話になります。転職活動をしているときのコーディング試験対策で勉強し始めていたんです
Next.js の Middleware を使ってサクッと迷惑 Bot たちを追い払う - Qiita
こんにちは。ぬこすけです。 皆さんは Bot のアクセスに悩まされたことはありますか？ 私はあります。 私が個人開発しているサイトでも Bot からガンガンアクセスがきます。 1ページリクエストすると画像や js ファイルなどの追加のリクエストも走るのでやっかいです。 私のサイトは Cloud Run で動かしていますが、リクエストに比例して料金が加算するようにしているので、 Bot からの余計なリクエストを抑えてお財布に優しくしたいところです。 一方で、 Next.js のバージョン 12.2 で Middleware という機能が安定版としてリリースされました。 この Middleware という機能を使えば、 ユーザーからのリクエストが来た時にページを返却する前にコードを実行することができます。 例えば、ユーザーエージェントを判定してリダイレクトをしたり、Basic認証をかけたり、み
ReactのOSSを Amplify でホスティングしてみた – BMI Calculator編 | DevelopersIO
テクニカルサポートチームの川崎です。 React の OSS は Amplify でホスティング可能のはず、ということで、Amplify OSS ホスティング チャレンジ の第3弾 です。 （第1弾、第2弾） 対象とするOSS BMI は Body Mass Index （ボディ・マス・インデックス） の略称で、おなじみの体格指数のことです。 BMI Calculator は、身長と体重を入力すると、BMI の履歴を記録し、グラフに表示することができる、React 製の OSS アプリです。 残念ながら、GitHub のページのデモアプリへのリンクは 2022年8月23日現在、リンク切れになっていました。 フォークする GitHub の自分のリポジトリに フォーク します。private リポジトリを利用します。 # bareモードで clone する git clone --bare h
React + TypeScript: Apollo Clientのフラグメントで操作間のフィールドを共有する - Qiita
Apollo ClientはReactで使える状態管理ライブラリです。ローカルとリモートのデータをGraphQLで扱えます。本稿は公式サイトの「Fragments Share fields between operations」にもとづいて、複数のクエリや変更の操作間でフィールドをどう共有するかについての解説です。Apollo Clientでクエリを使うための基礎はすでに学んだことが前提となります(まだの方は先に「React + TypeScript: Apollo ClientのGraphQLクエリを使ってみる」をお読みください)。ドキュメントの邦訳ではなく、日本語で説明し直しました。原文から省いた部分もあり、逆にわかりにくいところは補っています。 GraphQLのフラグメントは、複数のクエリと変更の間で共有できるロジックの一部です。つぎのコード例は、NamePartsフラグメントの宣言
5分ではじめるAuth0アプリ - Qiita
IDaaSとして有名な認証サービス「Auth0」を触ってみました。その過程のメモ書きです。 スムーズに行けば５分くらい(?)でアプリのファーストコールができそうです。 以下、手順です。 Auth0 のアカウントを作成する ダッシュボードの情報を確認する ダッシュボードからApplicationを登録 サンプルアプリをダウンロード npmコマンドで関連ファイルをダウンロード server.js の configを書き換え 起動 前提条件・環境は以下としました。 node.js + Express でローカル起動 Macを利用 Auth0が配布しているサンプルアプリを利用 Auth0のアカウントを作成する Auth0のトップページにアクセスして「Sign up」をクリックします。 https://auth0.com/jp アカウント作成方法を選ぶ。今回はGoogle アカウントを利用しました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sketchy Rumor Suggests 10th-Generation iPad Will Have Touch ID Power Button and Landscape FaceTime Camera
Spring Authorization Server 1.0 Planned for November 2022
Hackers are using this sneaky exploit to bypass Microsoft's multi-factor authentication
react-pdf-viewer/react-pdf-viewer: A React component to view a PDF document - Realtime JSer.info
Using TypeScript With React and KendoReact Components
Implementing A Reset Password Feature With Next.js Dynamic Routes — Smashing Magazine
RustなWASMでweb-sysのgetElementByIdやquerySelectorの結果得られるElementから適当なHtmlInputElement等へ参照する型を変換する方法 - Qiita
Rust 众
241 npm and PyPI packages caught dropping Linux cryptominers
How to Create a Collapsible Navigation Menu Using React
DockerでVite(React)のサーバーが立ち上がっているのにアクセスできない - Qiita
Migrating from Create React App (CRA) to Vite
More than 200 cryptomining packages flood npm and PyPI registry
Release v1.9.0-alpha.0 · reduxjs/redux-toolkit - Realtime JSer.info