useRenderInfo React Hook – useHooks
Description: The useRenderInfo hook is useful for tracking and logging rendering information in a component. It keeps track of the number of renders, the time elapsed since the last render, and the timestamp of the current render. This hook is particularly helpful during development as it provides insights into the rendering behavior of a component, allowing developers to optimize performance and
会社の支給PCがMacBook Pro M1なので、新しく開発環境を構築した話 - 食べチョク開発者ブログ
こんにちは。 今年の年始からジョインした遠藤です。 さて、入社したところ会社支給のMacBook ProがM1チップのものでした。 はい、現状は開発環境で苦労するとか色々噂を聞くやつです。 実際に試したのですが、 現状の開発環境構築スクリプト、手順書が一切使えない VitualBox, Vagrantは利用不可 Dockerは利用可能ではあるが、一部イメージが対応されてない 古いパッケージは動かす手段がない などなど、通常ではぶつからない問題にぶつかります。 食べチョクでは、 Ruby Node.js MySQL Redis ElasticSearch Kibana を利用しています。 この辺りをメインに話つつ、Intel版とこんな風に違うのかっていう辺りの雰囲気を感じ取っていただければと思います。 どこに開発環境を構築するか まず、どこで開発環境を構築するかを考えてみたいと思います。 ロ
IEからEdgeへの転送を開始 | Web品質Blog | ミツエーリンクス
先だって「IE」で一部のサイトを開くと「Edge」に転送--脱IEの一環で - ZDNet Japanなどで報道されていたとおり、一部のサイトに関してInternet Explorer（以下「IE」）でアクセスされた際、Microsoft Edge（以下「Edge」）で開くよう転送する処理がスタートしていますが、その対象サイトに当サイト（mitsue.co.jpドメイン）が追加されました。 IEとEdgeの両方がインストールされた環境において、上述の転送が有効であることを既に確認しています。これは当社からの申請に基づくもので、必要な手続きの詳細はMoving users to Microsoft Edge from Internet Explorer - Microsoft Edge Development | Microsoft Docsにある通りです。11月23日にメールで申請をしまし
BASEの日付ライブラリについて - BASEプロダクトチームブログ
自己紹介 こんにちは。BASE株式会社のフロントエンドチームの谷口です。 本日は、BASEのフロントエンドで使用している日付ライブラリについてお話しします。 BASEの日付ライブラリについて BASEでは、frontendという領域が出来始めた当初、最もメジャーな日付ライブラリであるmoment.jsを使用していました。 その後、デザインコンポーネントの開発など、frontend領域が成長していく中で より使い勝手の良い別の日付ライブラリが検討され、date-fnsが採用されました。 現時点で、ほぼ全てのコードがdate-fnsに移行済みです。 date-fnsについて date-fnsについて少し説明すると、公式にもありますが下記のような特徴が上げられます。 moment.jsやday.jsがDateオブジェクトをラップして扱うのに対し、純粋な関数を必要な分だけ読み込んで使用することが出
SSR / SSGの理解を一段深ぼる: BFFアーキテクチャ
BFFとは Backend for Frountendの略で、UI/UXを向上させる目的でフロントエンド専用のサーバーを用意したアークテクチャパターンです。 Webアプリケーションサーバーは下記の処理を行います。 リクエストを受ける DBからデータの取得・更新 ページを構築 (これはクライアントですることも) ページ or データの返却 このうち、「DBからデータの取得・更新」とそれ以外をフロントエンドとバックエンドの役割に明確にわけます。 BFFの役割となるサーバーをクライアントをWebサーバーの間に設け、「リクエストを受ける」と「ページ or データの返却」、場合によっては「ページの構築」をここで処理します。 こうすることで、これまでリクエストというUX関わる部分をフロントエンドエンジニアの責務に移行することができます。 ページの構築をクライアントではなくサーバーで行う場合、これもBB
渋谷駅前の線路沿いに長芋やラズベリーが生えている
何かに詳しい人と街を歩くのは楽しい。極まった知識からおこぼれをもらいつつ、街にちがった一面を見せてもらうのだ。 今回、野草の専門家に案内してもらったのはなんと渋谷駅。再開発で盛り上がる渋谷だが、植物視点で歩くとまた別の盛り上がりを見せていた。街の見方がガラリと変わった。 渋谷で有用な植物を求めて 今回案内してくれるのは「ハーブ王子」と著書に銘打たれてしまっている山下智道さん。『なんでもハーブ284』という煩悩を２周半くらい回った数のハーブを紹介した本が今度出るのだという。 ハーブの専門家である山下智道さん、デイリーポータルZウェブマスターの林さんと渋谷駅を歩く 大北「ハーブ王子のハーブの定義ってそもそもなんなんですか？」 山下「ハーブ王子、忘れてましたその呼び名（笑）。ただの植物野郎ですから。ハーブは役に立つ植物のこと、ほとんどの有用植物はそうですね。食べられる以外に防虫したり染料にしたり
webpack@5の主な変更点まとめ - hiroppy's site
予定では、明日の 10 日に webpack のメジャーバージョンである v5 がリリースされますが、まだエコシステムが安定していない可能性があるため、注意してアップグレードを行ってください。 webpack 5 release plan · Issue #11406 · webpack/webpack TL;DR: release planned for 2020-10-10 After nearly 1 year of beta testing and about 2 years of devel... change log: https://github.com/webpack/changelog-v5 移行ガイド: https://webpack.js.org/migrate/5 追加機能 Persistent Caching このバージョンからは今までメモリ上でしか行ってなかった
VS Code内でブラウザ画面プレビューとDevTools表示、そのままコード編集もできるVS Code拡張「Microsoft Edge Tools for VS Code」正式版に
VS Code内でブラウザ画面プレビューとDevTools表示、そのままコード編集もできるVS Code拡張「Microsoft Edge Tools for VS Code」正式版に マイクロソフトは、コードエディタのVisual Studio Code（以下VS Code）とWebブラウザのMicrosoft Edgeを組み合わせて、Webアプリケーションの開発を効率的に行えるVS Codeの拡張機能「Microsoft Edge Tools for VS Code」正式版のリリースを発表しました。 Are you a fan of the browser developer tools but not a fan of switching from editor to browser to use them? We heard you! Today we moved the "Mic
【30分で読める】プロスポーツクラブにおけるサポーターの存在｜Subaru Mikami
はじめに僕は2018年11月から2年弱にわたって、J2クラブの経営に関わり、マネジメント側からクラブを見てきました。2020年8月末にクラブを退職してからは、フロントスタッフ向け・スポーツ選手向けに2本のNOTEを投稿させていただきましたが、今回は「プロスポーツクラブにおけるサポーターの存在」をテーマに書いてみようと思っています。 「サッカーの仕事がしたい」と前職で勤めていた証券会社を辞めて、当時J２昇格を決めたばかりのFC琉球のフロントスタッフの一員として働くことを決めました。しかし、そこで待っていたのは、サッカーの仕事以上と思える情熱的な仕事でした。 学生時代に好きでハマっていた「サカつく」というゲームですが、実際に似たような立場で仕事をして、思うのは、Jクラブの場合は「街つく」の方が近いということです。クラブは、地域に愛され、地域のシンボルになり、街の象徴となる存在を目指すのです。
Next.js + TypeScriptのプロジェクトにJestを導入する - Qiita
この記事の概要 Next.js + TypeScriptのプロジェクトにJestを導入する手順を解説した記事です。 対象読者 Next.jsを触った事がある人 TypeScriptの基礎的な知識がある人 Jestについて基礎的な知識がある人 この記事を書こうと思った動機 最近Next.jsで個人開発を始めました。 Next.jsはReactベースのフレームワークです。 Reactの create-react-app に似たcreate next-appというコマンドがあります。（プロジェクトのテンプレートを自動生成するツールです） ただしReactの create-react-app と違ってテスト実行環境は用意されていません。 そこでJESTを導入する手順を残しておきます。 実行環境 Node.js 14.15.3 Next.js 11.1.2 React 17.0.2 具体的な手順とゴ
高木浩光＠自宅の日記 - テレフォンバンキングからのリバースブルートフォースによる暗証番号漏えいについて三井住友銀行に聞いた
■ テレフォンバンキングからのリバースブルートフォースによる暗証番号漏えいについて三井住友銀行に聞いた 先週から、「ドコモ口座不正引き出し事件」の原因として、被害の発生した銀行が4桁数字の暗証番号で認証処理していたことが取りざたされており、リバースブルートフォース攻撃の手口が暗証番号特定の手段として使われた可能性について、テレビのワイドショーでも扱われるなど、世間での認知がかつてなく高まっている。 そこで、この機会に、昔から存在していたテレフォンバンキングの危険性について、銀行側に抗議すれば今ならご理解いただけるのではないかと考えた。この問題は十数年前にも銀行側に伝えているが、サービスを止めるわけにもいかないし、電話経由での自動処理による攻撃は考えにくいと当時は考えられたのか、対処されることはなかった。2020年の今日、電話経由のサイバー攻撃は技術面で十分に容易に可能となっていると考えられ
Sass: @import
Sass extends CSS’s @import rule with the ability to import Sass and CSS stylesheets, providing access to mixins, functions, and variables and combining multiple stylesheets’ CSS together. Unlike plain CSS imports, which require the browser to make multiple HTTP requests as it renders your page, Sass imports are handled entirely during compilation. Sass imports have the same syntax as CSS imports,
生活と意見: ソーシャルディスタンスなどと称してユーザー名や文章にスペースを挟む行為についての苦情
covid19-twitter-research_01.md 生活と意見: ソーシャルディスタンスなどと称してユーザー名や文章にスペースを挟む行為についての苦情 更新履歴 2020-05-13 追記 継続して観測していて、対応が行われたアカウントの記録などを残している https://twitter.com/bulkneets/status/1259419102851903490 FAQとして「機械が人間の都合に合わせろ」に対する反論を取り急ぎ置いておく 走り書きで書いた https://twitter.com/bulkneets/status/1260524434256879617 https://twitter.com/voqn/status/1259515760986095617 記事下部に、フィードバックなどを追記した。 はじめに この文章は mala (twitter: @bul
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「フロントエンド領域」を再定義する
Test your web app locally, share changes with others, then deploy live | Firebase Hosting
普段使いから始めるNext.js
<btn open />
【2021年最新】GSAPの「ScrollTrigger」を使って爆速でスクロールアニメを実装する
Going Full Static · Nuxt Blog
GitHub に Push するだけで、レンタルサーバーにサイト公開してみた
