Sassyブログ

埼玉県在住のシステムエンジニアです。基本的にはIT技術関連の内容を中心に発信していきます。たまにゲーム関連ネタも載せます

Webフロントエンド

レンダリングブロックせずにCSSを非同期的に読み込ませる簡単なテクニック

はじめに preloadやpreconnectのResourse Hintsを使う? media属性とonload属性を使った非同期読み込みテクニック 最後に はじめに CSSは画面描画をブロックするリソースとして扱われます。 developers.google.com 今回はパフォーマンス改善の一環としてCSS…

ブラウザやタブを閉じたり、画面内でコンテンツを切り替えたりするときに非同期処理をしたい場合はsendBeacon使いましょう

掲題の通りなのですが、ブラウザやタブを閉じるタイミングや画面内で別コンテンツに切り替える場合に その時の状態のデータをWebAPIリクエストしたりしたい場合ってありますよね? JavaScriptのAjax通信なんかは基本非同期なので、これをそのままブラウザや…

href属性に設定される「javascript:void(0)」とは?

今回はフロントの小話です。 私自身サーバーサイドのエンジニアのため、 あまり意識してこなかったのですが、 たまにHTMLで以下のような記述を見かけます。 <a href="javascript:void(0);" id="btn" class="btn" onclick="sample();">~</a> href属性に設定されている「javascript:void(0);」という記述 まだエンジニア歴の浅い方は気にな…

create-react-appを使用してReactアプリのフロントエンド開発環境を導入しよう

目次 目次 1.まず初めに 1-1.開発環境マシンスペックについて 2.開発環境構築手順 2-1.WebStormをインストールしよう 2-2.node.jsをインストールしよう 2-3.create-react-appをインストールしよう 2-4.Reactアプリのスケルトンを作成しよう 2-5.アプリを起動…

jQueryを使用して、開いたタブを記憶させる方法

目次 目次 1.実装概要 2.実装方法 2-1. 使用ライブラリ 2-2. 実装例 1.実装概要 JavaScriptで開いたタブを記憶させて、ブラウザを閉じたり、新規タブで開きなおしても 前回開いたタブがフォーカスされるようにしたい場合に今回の実装が役に立つかと思います…