交差オブザーバー API - Web API | MDN
交差オブザーバー API (Intersection Observer API) は、ターゲットとなる要素が、祖先要素または文書の最上位のビューポートと交差する変化を非同期的に監視する方法を提供します。 従来、ある要素の可視状態、あるいは 2 つの要素の相対的な可視状態を検出することは困難であり、その解決策は信頼性が低く、ブラウザーやアクセスするサイトの動作が重くなる傾向がありました。ウェブが成熟していくにつれて、このような情報の必要性は高まっていきます。交差情報 (Intersection information) についての情報は次の理由から必要とされています。 ページがスクロールした際の画像やその他のコンテンツの遅延読み込み。 「無限スクロール」をするウェブサイトを実装し、スクロールに従って次々とコンテンツを読み込んで、ユーザーがページの切り替えをせずに済むようにすること。 広告費を
React Bootcamp | The Best Way to Learn React
If you're struggling with React, it's not you. It's your process.If you spend your time...Reading boring, out-of-date articles Fixing errors you don't understand Difficulty coding without a tutorial Get ready to spend hundreds of hours doing these 3 things over and over. How many $1,000s is all that wasted time worth to you? Welcome to a better way to learn React.Imagine if you...Coded with an exp
microCMS + Next.jsでJamstackブログを作ってみよう
この記事は10月1日に行われたJamstackオンラインワークショップ #4「microCMS × Next編」の内容を記事にしたものです。 microCMSとNext.jsを組み合わせて、Jamstackなブログを作成することができます。 こちらが本ワークショップのイベントページです。 Jamstackオンラインワークショップ #4「microCMS × Next編」 前提下記のバージョンで開発を行っています。バージョンの差異によって若干機能が異なる可能性があります。 Next 10.0.1react 17.0.1react-dom 17.0.11. Next.jsプロジェクトを用意するまずは、Next.jsのプロジェクトを作成していきます。プロジェクトの雛形を作成するCLIがあるので、コマンドを入力して作成していきましょう。 $ npx create-next-app microcms
Masonryレイアウトをたった3行のシンプルなCSS Gridで簡単に実装できるようになります
Masonryレイアウトとは、画像やカード型コンテンツをレンガ状に敷き詰めて配置するレイアウトです。Pinterestなどで見かける、高さが異なるカードを順番に配置するテクニックです。 今までは、JavaScriptで実装したり、Flexboxでも少し複雑なCSSで実装したりでしたが、CSS Grid Layout Module Level 3のドラフトが先日公開され、Masonryレイアウトをたった3行のCSS Gridで簡単に実装できるようになります。
Jasper - A flexible and powerful issue reader for GitHub
You will be able to read, track and discover many active issues very flexibly by using Jasper in GitHub. It is enabled by a powerful function called "Stream" of Jasper. example repo:nodejs/node is:issue label:bug You can use the GitHub Search query to create various criteria, such as issues I created, pull requests of nodejs/node, bug labeled issues, etc. to view issues and receive update notifica
Next.js+TypeScriptでパスのaliasを設定する - Qiita
Next.js + TypeScript のプロジェクトで相対パス辛いなとなったので、そのエイリアスの設定方法 import { SomeComponent } from '@/components/SomeComponent みたいなやつです Next.js での path alias with absolute imports の example があります https://github.com/zeit/next.js/tree/master/examples/with-absolute-imports const path = require('path') module.exports = { webpack(config, options) { config.resolve.alias['@'] = path.join(__dirname, 'src') return conf
Next.jsでimportのaliasを貼るのに割とハマった話 - Qiita
Next.jsでimportのaliasを貼る時に、自分がハマったのでその時に解決した方法を解説していきます。 手順だけ知りたい人は手順から読んでください。 この記事で解説する手順はTypeScriptを利用している時に綺麗にできる方法です。 TypeScriptなんて使ってないぞと言う人は下の背景とまとめだけ読んでいただければいい方法が見つかるかもしれません。 背景 TypeScriptを導入したプロジェクトでは~にsrcディレクトリなどのaliasを貼るのにいろいろな場所にコンフィグを書かなければいけません。 多くの記事で紹介されているのはtsconfig.jsonとwebpack.config.jsに設定を記述してeslint-import-resolver-webpackを使って解決する方法です。 それぞれのファイルでは以下のように記述します。
Reactでよく使う classnames を置き換えるライブラリ。その名も「clsx」 - Qiita
import clsx from 'clsx'; // Strings (variadic) clsx('foo', true && 'bar', 'baz'); //=> 'foo bar baz' // Objects clsx({ foo:true, bar:false, baz:isTrue() }); //=> 'foo baz' // Objects (variadic) clsx({ foo:true }, { bar:false }, null, { '--foobar':'hello' }); //=> 'foo --foobar' // Arrays clsx(['foo', 0, false, 'bar']); //=> 'foo bar' // Arrays (variadic) clsx(['foo'], ['', 0, false, 'bar'], [['baz
async/awaitを利用したコードのエラーハンドリング - Qiita
async/awaitを使ったコードのエラーハンドリングのもやもや es6で導入されたasync/await、皆さん使われていますか？ かつてのコールバック地獄から始まり、Promiseを経てこのasync/awaitが使えるようになったことで、非同期処理はとてもシンプルに書けるようになりました。 しかしこのasync/awaitですが、特にexpressなどを使ったサーバーサイドで書いている時にエラーハンドリングどうしたら良いか困ったりした経験はないでしょうか？ 内部的にはPromiseが使われているので、要はPromiseのエラーハンドリングと同じなのですが、僕は当初もやもやしていました。 もやもやその1： catchした後も実行が止まらない… 例えば下記みたいなコードを書いた経験がある方もいるのでは？ 私も最初書きましたｗ const getItem = async(req, res
Firebase 匿名認証でログイン後、メールとパスワードで匿名アカウントを永久アカウントに変換する - Qiita
はじめに アプリなんかで「最初は匿名認証で、後からアカウント登録してもらう」と言う手順を踏みたい場合があったりする。 公式さんではこのように説明される。 匿名ユーザーがアプリへ登録した後、新しいアカウントの下で引き続き従来の作業を行えるようにしなければならない場合があります。たとえば、アプリへの登録前にユーザーがショッピング カートに追加したアイテムを、新しいアカウントのショッピング カートにも入れておく、といったケースです。ステップは次のとおりです。 匿名アカウントを永久アカウントに変換する 僕の場合はアカウント登録のハードルを下げたかったから、この方法を使おうと考えた。 多くの人にとっては 新規アプリダウンロード→アカウント登録が必要→「めんどくせ〜。即アンインストール！」 と言った感じで、ノリでダウンロードしたアプリは中々使用してもらえないw そして僕が運営しているアプリ「〇活カレン
WordPressの Docker環境が簡単に。wp-envを使ってみよう | ともすた
WordPressの Docker環境が簡単に。wp-envを使ってみようWordPressのテーマやプラグインを作る場合、XAMPPや MAMPなどの仮想環境ソフトで作るとか、Dockerで作るなど色々な方法があります。 そんな中、WordPressの開発チームで公…www.youtube.com WordPressのテーマやプラグインを作る場合、XAMPPや MAMPなどの仮想環境ソフトで作るとか、Dockerで作るなど色々な方法があります。 そんな中、WordPressの開発チームで公式で開発環境を整備するためのソフトウェア「WordPress/env(wp-env)」をリリースしているので、これを利用して開発環境を整えてみましょう。 Dockerをセットアップする wp-envは、Dockerを利用するため、まずはこれをセットアップしましょう。Dockerの公式サイトから「Get
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - karl-run/react-bottom-scroll-listener: A simple listener component that invokes a callback when the webpage is scrolled to the bottom.
Infinite Loading – SWR
メンテナンスページ | Good.Hackerセブ島のWEB屋
API ドキュメント
https://prakhar.me/react-tags/example
React Tag Input - Component
React.js ライブラリ「react-tag-input」を使用してタグの作成フォームを実装する
GitHub - react-tags/react-tags: A fantastically simple tagging component for your projects
GitHub - GA-MO/react-confirm-alert: react component confirm dialog.