重たい処理を裏に回してサイトの読み込みを爆速にするライブラリ「Partytown」使ってみたレビュー
デロイトとGoogleの調査(PDF)によって、ウェブサイトへのアクセス数や滞在時間はページの読み込み速度に大きな影響を受けることが判明しています。できるだけ読み込み時間を短く抑えたいものですが、長年ウェブサイトを運営しているとさまざまなしがらみによってアナリティクスなどのサードパーティスクリプトが増加し、どんどん読み込み速度が遅くなってしまうことも。そうしたサードパーティースクリプトの処理をサービスワーカーに任せることで読み込み速度を爆速にしてくれるのが「Partytown」です。 Welcome To Partytown https://partytown.builder.io/ ウェブの世界では基本的にJavaScriptでしかプログラミングを行えませんが、このJavaScriptはシングルスレッドで実行されており、つまり同時に一つの処理しか行えないようになっています。多数のスクリプ
業務ができる中級者になるためのJavaScript入門（DOM編）
✨無料公開中✨ 業務ができる中級者になるためのJavaScript入門の第2弾となります。何度学んでも今一つ理解できないDOMに関して、できるだけわかりやすく説明しています。 業務ができる中級者になるためのJavaScript入門（文法編） https://zenn.dev/books/568dd4d86562a1/edit ✨開発環境に役立ててください✨ 👾 やっぱりwebpackがわからない（エピソード1） https://zenn.dev/antez/articles/58307946cf4f3e 👾 やっぱりwebpackがわからない（エピソード2） https://zenn.dev/antez/articles/638382faa06bd7 👾 そもそもnpmからわからない https://zenn.dev/antez/articles/a9d9d12178b7b2 ✨Wo
VS Codeの中でJavaScript/Node.jsのデバッグまでする（ひとり DevTools Advent Calendar 2020 – 21日目） | Ginpen.com
21 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 Chrome DevTools を使ってクライアント側に限らずサーバー側もデバッグできるんですが、それはそれとして開発中はエディターで開いたソースコードと行ったり来たりするのが面倒です。 VS Code なら Chrome DevTools （の機能）と連携して、エディター内でブレイクポイントを設置するなどできます。ちなみに DevTools の画面は今回出てきません。 先にまとめ サーバー側もクライアント側も VS Code からデバッグできる ブレイクポイントの設置 変数の閲覧 ログ出力 Run パネルからデバッグ設定を作成、デバッグ実行 Next.js などビルドを行うものも、ファイル出力できれば デモプロジェクト よければこちらご利用ください。JavaScript と No
sass-loader で dart-sass を使う - Qiita
モチベーション node-sass 、結構イライラポイントが多くて、代替手段があるなら乗り換えたいなあなんて思ってたところに dart-sass がナウでヤングだぜみたいな話を小耳に挟んだので、使ってみることにした。 ちなみに node-sass に感じていたイライラポイントは、以下の通り。 インストールが遅い Node.js のバージョンが上がりたてのとき、だいたいインストールで死ぬ dart-sass がナウでヤングな理由については、 Feature Watch: CSS Imports and CSS Compatibility とかを読んで欲しい。 要約すると、LibSass や Ruby Sass に搭載されていない機能が、先行的に積まれてるみたいなことらしい。( プレーンな CSS のインポートをサポートするとかなんとか) モチベとしては、「 node-sass でコケたときに
Site.js - 静的/動的サイトまでこなせるJavaScriptフレームワーク MOONGIFT
最近は静的サイトフレームワークが多数出てきています。確かに便利なのですが、拡張していく中でダイナミックな部分が欲しくなることもあるでしょう。そんな時に別途APIサーバを立てるのも面倒です。 そこで使ってみたいのがSite.jsです。静的サイト開発から動的サイトまでこなせるJavaScriptフレームワークです。 Site.jsの使い方 こちらは最低限のWebサイト。 スタッツとしてアクセスを見られる機能もあります。 Site.jsはsiteコマンドを使ってベースになる静的サイトを作ったり、開発用サーバを立ち上げることもできます。ダイナミックな処理もJavaScriptで書きますが、コード量は最低限です。WebSocketも利用できます。 Site.jsはJavaScript製のオープンソース・ソフトウェア（GNU Affero General Public License）です。 Site
アニメーション実装の選択肢のひとつになると思う。Lottieを試してみた。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
サイト制作時に今は当たり前のようにおしゃれなアニメーションがついてる時代がきましたね。 CSS3で実装できることも増え、あんまりゴリゴリJavaScriptでってことは減ってきてる気がします（もちろん必要なときはいっぱいあるのでケースバイケースですが）。 制作者としては、意図した通りのアニメーションをつくりたい、それもなるべく手間をかけずに、という思いがあるのではないでしょうか。 そんな悩みを解決してくれるかもしれない「Lottie」を試してみました！ ※今回、After Effectsの使い方はありません、ごめんね。JavaScript側の組み込み方の説明です。 Lottieとは Airbnb制作のiOSやAndroidにも対応したアニメーション用のライブラリです。Adobe After Effectsで作ったアニメーションを、そのままWebにもってこれるやつらしい。 一部使えない機能も
フロントエンドエンジニアにとっての2019年。アンケート結果から分析するイマドキのウェブ制作 - ICS MEDIA
ウェブ業界の当たり前だと思っていることでも、同業他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・ この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載第5回目となる本記事ではウェブ業界の「フロントエンドエンジニアにとっての2019年」と題してアンケート結果を紹介します。 JSでブラウザ挙動をどうやって防ぐ？ ウェブページでインタラクションを作るときに、ブラウザのデフォルト挙動が邪魔になることがあります。たとえば、aタグのリンクはJavaScriptでキャンセルでき、自前の処理に置き換えることができます。 ブラウザ挙動のキャンセルのやり方にはさまざまな手段があるのですが、主流のやり方はどれでしょうか？ addEventListener()メソッドやonclick属性のイベントについて質問しました。 187票の回答があり「ret
ken-burns-slideshow - ケン・バーンズ効果を実現できるWebコンポーネント MOONGIFT
ケン・バーンズ効果という演出を知っていますか。複数を写真がある時、それを単に差し替えるだけでなく、ズームや左右上下にゆっくりとアニメーションしながら切り替えることで、単なる写真に命を与えると言われています。ケン・バーンズ監督が映画の中で使っていたことでそう呼ばれています。 そんなケン・バーンズ効果を手軽に実現できるWebコンポーネントがken-burns-slideshowです。 ken-burns-slideshowの使い方 デモです。写真がゆっくり動きつつ、差し替わっているのが分かるでしょうか。 速度を変えたり、アニメーションする方向の指定もできます。 フィルターを通すこともできます。これは白黒の例です。 ken-burns-slideshowは以下のようなHTMLで指定します。 <ken -burns-carousel images="https://source.unsplash.
pikapkg - Webpack不要。npmライブラリをWebブラウザで利用する MOONGIFT
現在、多くのJavaScriptライブラリがnpmで配布されています。Webブラウザ向けであってもnpmで配布されており、それらをgulpやWebpackによって一つのライブラリにしています。これは毎回のセットアップが面倒です。 そこで使ってみたいのがpikapkgです。特定のディレクトリにライブラリをダウンロードし、Webブラウザからすぐに利用できるようにしてくれます。 pikapkgの使い方 pikapkgを使ったコードです。moduleで使うのでimport構文が使えます。Webpackなどと異なり、web_modulesというディレクトリを相対で指定します（ディレクトリ名は変更可能です）。 import {slugy} from './web_modules/slugy.js'; import timeago from './web_modules/epoch-timeago.js
Textblock
This page was set using Textblock. Adjust your viewport width – or device orientation – to see it in action. Textblock calculates your setting based on minimum and maximum values for font size, line height, variable grades, and container width: minimum/maximum font sizeminimum/maximum line heightminimum/maximum container widthminimum/maximum grades (variable fonts only)To Initialize, add the eleme
Sassのモダンなコンパイル環境が3分で作れるParcel入門 - 独自設定ファイルは不要 - ICS MEDIA
ウェブ開発ではSass、TypeScriptなどの言語のコンパイルや、出力ファイルの最適化、ローカルサーバーの起動などさまざまな作業が求められます。現在は、それらの作業を自動化するwebpackやGulp.jsがよく使われています。 webpackにはwebpack.config.js、Gulp.jsにはgulpfile.jsという設定ファイルがそれぞれ必要で、両ツールともその使用方法を覚える学習コストがあります。 Parcelパーセルというツールを使うと、webpackやGulp.jsのような独自の設定ファイルを使うことなく、各種言語のコンパイルやバンドルができるようになります。バンドルとは、複数のファイルを1つにまとめることを指します。Parcelとは、設定ファイルが不要で高速なウェブアプリケーションのバンドルツール。次のようなことが可能です。 Sassのコンパイル Autoprefi
いまさら始めるGulpでWordPressテーマ開発 | オレインデザイン
今回はGulpの導入から最低限の活用部分まで、どうやったら使えるのか・使えるようになるのかを紹介してみたいと思… こちらを元にして、今回はWordPressテーマのGulp開発環境を作ってみようと思います。といっても、ベースはすでに出来上がっているので、少し変更を加えたりする程度になります。 あと、環境としてはLocal by Flywheelを使うことを想定しています。 内容としては、 WordPress開発環境を作るベースの環境を作る 自動でrtl.cssを書き出す 監視タスクを作る というような感じになります。他のSassコンパイルやJavaScriptの結合・圧縮部分は前回のコードに書き出し先を変更したりする程度で大丈夫です。では始めていきましょう。 WordPress開発環境を作るベースの環境を作る まずは、前回作った環境のpackage.jsonとgulpfile.jsをコピー
[JS]スマホに最適化された優れもの！さまざまなチャートやグラフを実装できるCanvasベースのライブラリ -F2
チャートやグラフは、さまざまなスマホアプリで見かけます。 スマホのデバイスに対してデザイン、インタラクション、パフォーマンスに最適化されたチャートやグラフを実装するHTML5 Canvasベースのライブラリを紹介します。 Node.js、React Nativeなどに互換性もあり、50種類以上のチャートやグラフを簡単に利用できます。 スマホ向けのデザイン デザインはスマホに最適化されており、軽快なインタラクションでデータをより自然に表示します。 スマホに最適化されたパフォーマンス 軽量で、素晴らしいレンダリングのパフォーマンスを実現。 互換性 HTML5のCanvasベースで実装されており、Node.js、React Nativeで実行することもできます。 ライセンス MITライセンスで、個人でも商用でも無料で利用できます。 F2のデモ まずはスマホのアプリでよく見かける、美しいデザインと
![[JS]スマホに最適化された優れもの！さまざまなチャートやグラフを実装できるCanvasベースのライブラリ -F2](https://cdn-ak-scissors.b.st-hatena.com/image/square/38d845daa3306af6511040b4844ec0fb7250d64c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018083111.png)
カウントダウンやタイマーなど、時間コンテンツなら何でも任せろのシンプルな軽量スクリプト -EasyTimer.js
時間を表示させるカウントダウン、タイマー、ストップウォッチなどのコンテンツなら何でも任せろのシンプルな軽量スクリプトを紹介します。 単体のスクリプトとして利用でき、時間を使ったWebページを実装する際に重宝すると思います。 EasyTimer.js EasyTimer.js -GitHub EasyTimer.jsの特徴 EasyTimer.jsのデモ EasyTimer.jsの使い方 EasyTimer.jsの特徴 リフレッシュの間隔は、時、分、秒、1/10秒に設定できます。 タイマーの開始、停止、一時停止など、すべてのタイプでイベントが設定できます。 カスタムコールバックを定義することができ、タイマーのリフレッシュごとに実行されます。 タイマーには、経過とカウントダウンの2種類があります。 開始時間と目標時間を設定できます。 EasyTimer.jsのデモ デモでは、EasyTimer
Prettier - JavaScriptのコードを見やすく整形
JavaScriptは人によって書き方が変わる言語でもあります。企業によっては基準を設けたりしますが、それでもLint系で注意するのが精一杯でしょう。見づらいコードはそれだけバグをはらみやすく、システムの品質を低下させます。 そこで使ってみたいのがPrettierです。JavaScript用のコード整形ツールです。 Prettierの使い方 左側が元コード、右側が変換後のコードです。 引数の与え方などが大きく変わっています。 配列なども綺麗に並んでいます。 Prettierを使うとルールに合わせてコードを変換してくれます。改行やインデントでの整形になるので、動作が変わることはありません。インデントはタブか空白か選択できたり、ダブルクォートかシングルクォートかといった指定もできます。パーサーも指定できるので、自社好みのカスタマイズもできるでしょう。 Prettierはnode/JavaScr
Yarn - 次世代のJavaScriptライブラリ管理
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました JavaScriptのライブラリ管理としてはnpmまたはBowerがよく使われています。npmを使っていて思うのはインストールにかかる時間がとても長いということです。ライブラリをインストールするのに長時間待たされてイライラした経験がある方は多いのではないでしょうか。 そこで使ってみたいのがYarnです。npmと同等に扱え、さらに高速でセキュアなライブラリ管理システムです。 Yarnの使い方 Yarn自体はnpmなどでインストールできます。インストールしたらnpmと同じように初期化をします。 $ yarn init yarn init v0.15.1 question name (test-yarn): question version (1.0.0): question descr
moji - JavaScriptによる全角/半角の文字種変換 MOONGIFT
Webの入力フォームでイライラさせられるのは半角、全角の判定ではないでしょうか。データベースに入れる際にデータを統一したいだけで、利用者に対して苦痛を押しつけています。解決する手段など幾つもあるにも関わらずです。 今回はJavaScriptによる文字種変換ライブラリ、mojiを紹介します。 mojiの使い方 mojiはnpmでインストールできます。後は以下のように使います。 > var moji = require('moji'); undefined > moji('ＡＢＣＤ０１２３４').convert('ZE', 'HE').toString(); 'ABCD01234' > moji('ABCD01234').convert('HE', 'ZE').toString(); 'ＡＢＣＤ０１２３４' > moji('アイウエオ').convert('ZK', 'HK').toStrin
optimize-js - JavaScriptのコードを最適化して初回実行を高速化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました JavaScriptはWebブラウザで標準サポートされている唯一のプログラミング言語です。そのため書けるという人は多いのですが、自信をもってパフォーマンスの高いコードが書けると言い切れる人は少ないのではないでしょうか。 そんな方に使ってみて欲しいのがoptimize-jsです。既存のJavaScriptを最適化し、高速化するライブラリです。 optimize-jsの使い方 optimize-jsはnpmでインストールできます。 npm install -g optimize-js 後は処理対象のファイルを指定すると、標準出力で最適化されたコードが返ってきます。 optimize-js input.js > output.js 実際に試すと、括弧の付き方が変わっています。 $ dif
Eruda - スマートフォン向けのコンソール
スマートフォンのブラウザでJavaScriptをデバッグしたり、スタイルの確認を行うのは非常に面倒です。わざわざUSBケーブルで母艦とつながないといけないですし、ケーブルがない状態でデバッグなどほぼ考えられないでしょう。 そこで使ってみたいのがErudaです。スマートフォン用のJavaScriptコンソールです。 Erudaの使い方 Erudaを起動するには右下のアイコンをタップします。 Erudaを起動しました。まずはコンソール。 JavaScriptを実行できます。 ネットワーク。 エレメント。 リソース。 ユーザエージェントなど。 ブラウザがサポートしている機能について。 設定。全画面ではなく半分の高さに調整できます。 ErudaはいわばDevToolsのモバイル最適化版と言えます。全機能が実装されている訳ではありませんが、開発時にちょっと便利になりそうな機能が備わっています。開発時
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue で地図を表示する無料で最短の道 - Qiita
