Service Worker スクリプトのインストールと更新処理
Service Worker の実装が主要ブラウザで揃い始めて盛り上がってきましたね。その流れに便乗して久しぶりに Service Worker の仕様や実装に関する記事を書いてみました。今回は Service Worker スクリプトのインストールと更新処理についてです。 この記事は Service Worker スクリプトを少しでも手書きして動かしたことがある人を想定読者にしています。Service Worker について全く知らない人はまず別の入門記事を参照してください。また、細かいことを気にせずに Service Worker を使いたい人は Workbox といったライブラリやフレームワークの利用をおすすめします。 更新履歴 2019/09/24: Chrome 78 から importScripts() も更新対象になりました。それについて加筆しました。 2018/06/07:
PLAIDがNode.jsを採用し、5年間で12万行書いてわかったこと | PLAID engineer blog
Node.jsをリアルタイム解析サービスの開発で5年間使って知ったメリットやデメリットを紹介します。大規模な解析サービスをNode.jsで記述する上での工夫などについても解説しています。
TypeScriptで MessagePack encoder/decoder を実装した - Islands in the byte stream
npm install @msgpack/msgpack でインスコできます。NodeJS v12 でベンチマークしたかぎり、JSONと同程度の速度で、これまで最速といわれてきた msgpack-lite よりもさらに少しだけ高速です。 github.com もともとこのリポジトリには uupaaさんによる実装（tagged as classic) があったんですが、メンテされなくなって久しく npmjs.com にもリリースされていないという状況でした。 https://github.com/msgpack/msgpack-javascript/tree/classic その後kawanetさんが msgpack-lite を実装したのが2015年。これが2019年現在、もっとも週間ダウンロード数の多いMessagePack for JSの実装です。 msgpack-lite ピュアJa
JavaScript の並列処理機能を味見してみる
この記事は “A Taste of JavaScript’s New Parallel Primitives” の抄訳です。 まとめ：複数の Worker と共有メモリを利用して、本当の意味で並列アルゴリズムの JavaScript 実装を可能にするために、JavaScript の基本機能を拡張しようとしています。 複数コアを用いた計算 JavaScript (JS) は成熟しました。モダンな Web ページのほとんど全てで、大量の JavaScript が利用され、それらが動作するのは当たり前のことになっています。また JS の適用領域も拡大しています：クライアントサイドでは、Facebook や Lightroom が行っているように画像処理が JavaScript で実装されていますし、Google Docs のようなブラウザで動作するオフィススイートも JS で実装されています。P
Introduction | このリポジトリについて
このリポジトリについて JavaScriptステップアップ勉強会で利用するサンプルコードと説明の時に利用してる資料一式になります License The MIT License (MIT) Copyright (c) 2016 Hiroshi Oyamada Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish,
Havoc Pennington「同期的コールバック、非同期コールバック 」 - 以下斜め読んだ内容
ometer.com 2011.07.24のブログエントリ Callbacks, synchronous and asynchronous : Havoc's Blog 2011年7月からnodeコアチーム７人のうちの１人になってたid:koichik（@koichik）さんが良記事認定してたエントリ コアチームの人たちは、Joyentからは２人。ryan(@ryah)、npmの人（@izs)。Cloudkickからも２人。Bert Belder(@piscisaureus)にPaul Querna。それにBen NoordhuisとFelix Geisendörferに@koichik。 informativeな内容だが歯が立たない。けど何とか斜め読んでみた 以下斜め読んだ内容 このエントリ コールバック使ったAPIデザインで守った方がいいルール２つ 同じテーマで細々したところは前に書い
複雑GUIの会を主催した - No Regrets in Bathing
「GUIの雑談を無限にしたいなぁ」と思い、会を開催しました。 twipla.jp 上記のイベントページを立てて、Twitter上で募集をかけたところ、 この内容だけでピンと来てしまったガチ勢が9人も集まりました。 ドローツールやマインドマップ、作曲ツール等を自作するフルスクラッチマンたちです。 予約したルノアールの会議室は過密状態になってしまいました。 （もう少し広い部屋にしておけば…と後悔しました） （ルノアールです） #複雑GUI会 pic.twitter.com/XDGWs3EwZd— みやおか (@miyaoka) May 2, 2019 職人タイプの方が多かったので終始和やかな雰囲気でしたが、 やはり実装に深入りしていくことが多く、あまりの情報密度に 私も話についていくのが大変だったと自白しておきます。 あと、なぜか開催前に「バウンディングボックス大会」が行われる雰囲気が醸成され
SPAじゃないプロジェクトのための控えめなJavaScriptフレームワーク「Stimulus」 - yuhei blog
ReactやAngularのように、アプリ内のすべてのHTMLをJavaScript側で管理して描画するアプローチは大げさすぎる。ほとんどの場合において。 もちろん一定以上の複雑さがあればその辺のJavaScriptフレームワークを使った方が良い。が、それがやり過ぎになるプロジェクトは多い。というかその方が多い。それでも、それらのアプローチではやり過ぎになってしまう場合でも、秩序のあるコードを書き続けられないと当然苦しい状態へ向かう。 この微妙な（そして多数派であるはずの）環境を適度に管理できる枠組みが必要だ。これまでちょうどいい解決策を見つけられずに苦労してきた。Web Componentsは課題を解決するかもしれないがまだ来ない。そこで出会ったのがStimulusだ。 いわく、Stimulusは既存のHTMLのための控えめなJavaScriptフレームワーク。サーバーサイドレンダリング
JavaScriptの読み込みにおける非同期スクリプト注入の悪影響 | POSTD
Synchronous（同期）スクリプトは効率が悪い。というのも、ブラウザにDOM構築をさせ、スクリプトを読み込ませ、残りのページをリロードする前に実行してしまいます。今さらな話ですが、これがわれわれプログラマがasynchronous（非同期）スクリプトをよく使うようになった理由です。ここに分かりやすい例があります。 <!-- BAD: blocking external script --> <script src="http://somehost.com/awesome-widget.js"></script> <!-- GOOD: remote script is loaded asynchronously --> <script> var script = document.createElement('script'); script.src = "http://somehos
Self host Polyfill.io
Published: 15. January 2018 • Updated: 2. February 2023 • javascript, selfhost When you develop a web application and want to support older browsers but also want to use the latest browser-features, you often need polyfills that implement new features in older browsers. One common approach with polyfills is to bundle them together with the application. The problem is that this increases the bu
WebAssembly 開発環境構築の本
この文章は Rust を用いた WebAssembly の開発環境を構築する手法を紹介するために作成されました. ハッシュタグ: #WASMの本紹介記事: WebAssembly 開発環境構築の本を公開しました - mizdra's blog# 本書の目的Rust を用いた WebAssembly の開発環境を構築する手法を知ることモジュールバンドラと連携する方法を知ることTypeScript と連携する方法を知ることWebAssembly を利用していて陥りやすい罠を知ることWebAssembly に関する情報を調べる方法を身につけること# 本書でやらないことWebAssembly/Rust/JavaScript の文法や機能の解説が目的ではない Rust からコンパイルして生成された WebAssembly を JavaScript から利用する方法を解説する文法や機能については, W
Node.js製CLIフレームワークoclifを試す - dackdive's blog
はじめに Heroku が oclif という CLI フレームワークをオープンソースとして公開したという記事を読みました。 Heroku CLI や Salesforce DX のベースにもなっているらしい。 どんなもんか触ってみます。 （oclif は (The) Open CLI Framework の略のようです。読み方がわからない。。。） oclif の特徴 手を動かす前に、どういった特徴があるのか公式ドキュメントに目を通してみます。 Features · oclif: The Open CLI Framework Super Speed コマンド実行時のオーバーヘッド（？）がほとんどなく、また依存パッケージもほとんどない 実行されるコマンドだけ require されるので、たくさんのコマンドからなる巨大 CLI でも単一コマンドの CLI と速度が変わらない CLI Gener
JavaScriptのコードとService Workerをユーザーに近いCDNのエッジで実行可能。Cloudflareが「Cloudflare Workers」を提供開始
CDNプロバイダのCloudflareは、同社が提供するグローバルなコンテンツデリバリーネットワーク（CDN）のエッジにおいて、開発者がJavaScriptのコードを配置し実行できる新機能「Cloudflare Workers」の一般提供を開始したと発表しました。 Cloudflare Workersを利用すると、開発者はネットワークの向こう側にあるクラウドではなく、利用者にもっとも近いCDNのエッジに位置するCloudflareのデータセンター内でJavaScriptのコードを実行できるようになります。 これによってクライアントに対して非常に高速にレスポンスを返すことができ、広範囲に分散された高い冗長性を持つ分散システムが構築可能になります。 同社は日本を含む世界中に127のデータセンターを展開しています。 「クラウドの夢」、Cloudflare Workersでできること Cloudf
ServiceWorker as a Service, または Universal ServiceWorker という発想 - mizchi's blog
ServiceWorker とは本質的に リクエスト＆レスポンスモデルであるので、それをサーバーサイドで実装で一種のサーバーロジックとして動かしてしまって良いはずだ ー という発想に目から鱗だったので、ちょっと考えてみたいと思う。 www.publickey1.jp ここで試せる。 https://cloudflareworkers.com/#a9bc9ef6b4248289c71518581df30bc7:https://tutorial.cloudflareworkers.com Cloudflare はCDN業者なので、 それに特化して Service Worker as a Service みたいな表現はしていないが、実態としてはサーバーサイド ServiceWorker だ。Fastly では varnish のミドルウェアなどでキャッシュ破棄設定のロジックやリダイレクトを書いて
Metaballs
Metaballs, not to be confused with meatballs, are organic looking squishy gooey blobs. From a mathematical perspective they are an iso-surface. They are rendered using equations such as f(x,y,z) = r / ((x - x0)2 + (y - y0)2 + (z - z0)2). Jamie Wong has a fantastic tutorial on rendering metaballs with canvas. We can replicate the metaball effect using CSS & SVG by applying both blur and contrast fi
次のリリースであるwebpack 4の主な変更点まとめ - 技術探し
移行ガイド abouthiroppy.hatenablog.jp ドワンゴのアドベントカレンダーの17日が空いているので本来その予定で書かれた記事ではないですが、そこに埋めます。 2日連続になってしまった。。 qiita.com Happy Xmas, Noders! #Nodejs pic.twitter.com/Rsxr8SbeUz— hiroppy😶 (@about_hiroppy) 2017年12月24日 さて、今年は、webpack3.0.0が2017/06にリリースされました🎉 (現在、3.10.0) medium.com After we released webpack v2, we made some promises to the community. We promised that we would deliver the features you voted
PageSpeed Insightsのスコアを上げるために具体的にやったこと - astamuse Lab
こんにちは。デザイン部でフロントエンドエンジニアをしているkitoです。今回は、Webサイトの高速化を行う際にひとつの基準になりえるPageSpeed Insights について、主にフロントエンドで行える具体的な施策とともにご紹介したいと思います。 PageSpeed Insightsとは？ PageSpeed Insightsは、Googleが提供しているWebサイトのパフォーマンスをスコア化して具体的な改善案を提案してくれるサービスです。スコアの範囲は0～100ポイントで、85ポイント以上が良好とされています。85ポイント以上のスコアであったとしてもPageSpeed Insightsは継続的に改良されているので、定期的にチェックすることをお勧めします。試しにhttps://developers.google.com/speed/pagespeed/insights/に行き、任意のサ
Node.js Performance 改善ガイド - from scratch
Node.js Performance 改善ガイド Memory の場合 メモリリークかどうかを特定する メモリリークではない場合 CPU の場合 どこの処理に時間がかかっているのかを確認する v8 simple profiler flame graph を取得する File の場合 大きなサイズのファイルをどうしても扱う時 Network の場合 keepalive を on にする その他: 全体的にパフォーマンスを改善するためにやること JIT が効いているかを確認する clusterが使えないか検討する C++ addons vs JavaScript libraries まとめ 参考資料 Node.js Performance 改善ガイド この記事は Node.js 2 Advent Calender の 5日目の記事です。 qiita.com Node.js のパフォーマンスに
Flutter for JavaScript Developers | HackerNoon
Too Long; Didn't Read<a href="https://flutter.io/" target="_blank">Flutter</a> is a cross-platform mobile app SDK for building high-performance, high-fidelity, apps for iOS and Android, from a single codebase. Flutter is a cross-platform mobile app SDK for building high-performance, high-fidelity, apps for iOS and Android, from a single codebase. Also from the docs: Flutter includes a modern react
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - reg-viz/reg-cli: 📷 Visual regression test tool.
