Navigation API による「JS での画面遷移」と SPA の改善 | blog.jxck.io
Intro 従来の History API を改善する Navigation API の仕様策定と実装が進んでいる。 これは、 History API の使いにくかった部分を補うだけではなく、「JS で画面遷移をする」という現状のミッシングピースに取り組み、 SPA が抱える多くの問題だけでなく MPA すら改善する可能性がある。 この API の目的と仕様を解説しつつ、実装のメモを残す。 画面遷移と SPA の軌跡 Web は HTML の取得と描画を繰り返す、画面遷移(Navigation)を前提としたアーキテクチャ(のちに SPA からの逆算で MPA と呼ばれる)が基本であり、ブラウザなどの実装もそれに最適化されている。 一方「アプリケーション」の設計手法をそのまま Web に持ち込んだ SPA は、この Navigation によってもたらされる UX の低下を防ぐ部分がある一方
pzuraq | Four Eras of JavaScript Frameworks
April 25, 2022 Four Eras of JavaScript Frameworks April 25, 2022 I started coding primarily in JavaScript back in 2012. I had built a PHP app for a local business from the ground up, a basic CMS and website, and they decided that they wanted to rewrite it and add a bunch of features. The manager of the project wanted me to use .NET, partially because it’s what he knew, but also because he wanted i
JSの非同期処理を理解するために必要だった知識と学習ロードマップ
はじめに JavaScript の非同期処理を学習してみて「ある程度自信を持って理解できたと言える」状態に到達したので、その感想とまとめの学習ロードマップとその中でどのような知識が必要になるかを紹介したいと思います。 あるいは、自分が実際に学習してきた道筋に基づいているのでショートカットとして参考にしてもらったり、使えるリソースなどの情報が共有できると思います。もしくは「JavaScript 初心者が非同期処理を理解できるようになるまでの道筋」というストーリーで１つのサンプルとして見ていただけるといいかもしれません。 ChangeLog 大きな変更のみをトラッキングしています。 2022-11-16 本の内容を反映させた追記・修正を追加 2022-05-21 構成を修正 「V8 エンジンから考える」の項目を追加 2022-04-30 「イベントループの共通性質」の項目を追加 「ロードマップ
Locale Aware Sorting in JavaScript
This post is part of my Byte Series, where I document tips, tricks, and tools that I've found useful. ProblemWhen building a localized JavaScript web-app, the default sorting logic for strings doesn't quite yield the results that you might expect. For example, take the following example… let strings = [ "nop", "NOP", "ñop", "abc", "abc", "äbc" ]; strings.sort(); console.log(strings); // ['NOP', 'a
textareaをカスタマイズできるReact用のライブラリを作成しました
HTMLのtextarea要素では、テキスト単位で色をつけたりイベントハンドリングしたりなどすることは、通常の方法では出来ないことは皆さんご存知かと思います。それを(擬似的に)可能にするライブラリを作成しました。 もしよろしければスター、使用した上でフィードバックなどいただけると非常にありがたいです。 Demo テキストを装飾したり(textareaに見えないかもしれないですがtextareaです)、 キャレットの位置にメニューを表示したり、 テキストにカーソルを乗せた時にTooltipを出したり、 アイデア次第で色々と出来ると思います(もちろん原理上不可能なことはありますが…)。 同様のことは、例えばSlateなどのライブラリを使用しても実現可能だと思いますが、こちらの方が断然軽量でバンドルサイズに何倍も差があります(現在約3.0kB gzipped)。なのでエディタライブラリを持ち出す
Web パフォーマンスとプロダクト KPI の相関を可視化する話 2022ver - ドクターズプライム Official Blog
@1000ch (id:hc0001) です。技術顧問業としては広報周りの戦略を考えていることが多いのですが、今日はエンジニアリングの話です。 ドクターズプライムのプロダクト開発の中でも、パフォーマンス上の課題を発見して改善に取り組むことがあります。今回は @oinume (id:oinume) さんから 「この辺りの実装が問題になっていそう…」 という相談があったので、私がアプリケーション全体を眺めてボトルネックになっている箇所をいくつかピックアップし修正方針を提案したのですが、 実装を修正する前に 「まずは継続的にモニタリングできる環境を準備してパフォーマンスの前後がわかるようにしましょう」 ということで原点回帰した話です。 Core Web Vitals でリアルユーザーモニタリング パフォーマンス指標とプロダクト KPI の選定 リアルユーザーモニタリングと合成モニタリング データ
音声入力でメモを書けるウェブアプリを書いた、x-callbackを使ったアプリケーション連携
voicodという音声入力でメモを書けるシンプルなウェブアプリケーションを書きました。 音声入力でメモができるシンプルなアプリケーションを書きました。https://t.co/EHSKnNKNaL x-callbackを使ってショートカット.app 等と連携すれば、入力内容をNotionに保存したりできます。 Note: SpeechRecognitionに対応したブラウザ(ChromeやSafari)が必要 Source: https://t.co/NnzXVjlGnF pic.twitter.com/yzoA3VIzzl — azu (@azu_re) February 10, 2022 SpeechRecognitionというウェブブラウザで音声認識をするAPIを使っているので、このAPIに対応しているブラウザが必要になります。 具体的にはGoogle ChromeやSafariなど
How Prime Video updates its app for more than 8,000 device types
At Prime Video, we’re delivering content to millions of customers on more than 8,000 device types, such as gaming consoles, TVs, set-top boxes, and USB-powered streaming sticks. When we want to do an update, every one of those devices requires a separate native release, posing a difficult trade-off between updatability and performance. In the past year, we’ve been using WebAssembly (Wasm), a frame
Mocking With Undici Like a Pro
Undici is a fast, reliable, and spec-compliant HTTP/1.1 client that is written from scratch and represents the evolution of the Node.js HTTP stack. It is quickly becoming one of the most popular packages out there, with almost half a million weekly downloads on npm. And if you don’t believe us, check out this tweet from Node.js TSC member Matteo Collina. Because Undici re-invents HTTP primitives a
Remix vs Next.js
Easily the biggest question we get asked is something like: How is Remix different from Next.js? It appears we have to answer this question! We'd like to address it directly and without drama. If you're a fan of Remix and want to start tweeting smug reactions to this article, we kindly ask that you drop the smugness before hitting the tweet button 🤗. A rising tide lifts all boats. We've been frie
Form Validation Using JavaScript's Constraint Validation API
Form validation is one of the primary reasons to use client-side JavaScript. It can prevent user entry errors before your app attempts to submit data to the server. But… client-side validation is not a substitute for server-side validation! Always check incoming user data on the server. Not every request will come from a browser nor will every browser run validation code. Client-side validation is
Reactを取り巻く状態管理の潮流を学ぼう。HooksやServer Componentsなどの登場で何が変わるか｜ハイクラス転職・求人情報サイト AMBI（アンビ）
Reactを取り巻く状態管理の潮流を学ぼう。HooksやServer Componentsなどの登場で何が変わるか Reactを取り巻く状態管理のアプローチは変化を続けていますが、いま知っておくべき手法とはどのようなものでしょうか。小林 徹（@koba04）さんに、現在、そしてこの先の状態管理について執筆いただきました。 こんにちは、小林（@koba04）です。 2019年5月に『SPAにおける状態管理:関数型のアプローチも取り入れるフロントエンド系アーキテクチャの変遷』という記事を書きましたが、そこから2年以上が経過し、Reactを用いた状態管理は大きく変わりました。本記事ではReactを取り巻く状態管理の変遷について解説します。 広がるReduxの採用 Hooksの登場 コンポーネントツリーから独立した状態管理 Concurrent Featuresによる新しいユーザー体験 状態とキャ
Replit — Ace, CodeMirror, and Monaco: A Comparison of the Code Editors You Use in the Browser
EngInfraAce, CodeMirror, and Monaco: A Comparison of the Code Editors You Use in the Browser I’ve been working on Replit for roughly six years now, and as the team has grown, I’ve focused on the IDE (what we call the workspace) portion of the product. Naturally, I was increasingly preoccupied with the code editor. While we’ve considered creating a code editor that meets our needs, the complexity i
JS Self-Profiling API In Practice
Nic Jansma (@nicj) is a software developer at Akamai building high-performance websites, apps and open-source tools. Table of Contents The JS Self-Profiling API What is Sampled Profiling? Downsides to Sampled Profiling API Document Policy API Shape Sample Interval Buffer Who to Profile When to Profile Specific Operations User Interactions Page Load Overhead Anatomy of a Profile Beaconing Size Comp
2021 JavaScript Rising Stars
Welcome to the 6th edition of the JavaScript Rising Stars, our annual round-up of the JavaScript landscape. If you took a break to escape the JavaScript fatigue in 2021, you are in the right place! We'll be talking about meta frameworks, the need for speed and all-stars are joining forces at tech companies. But first, we have a new "champion" this year, that no one expected, and it's a command lin
ブラウザバック時の表示を最適化する Yahoo!ニュースの取り組み事例
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo!ニュース を担当しているエンジニアの喜楽です。 今回は、Yahoo!ニュースが取り組んでいるブラウザバック時の表示最適化手法について紹介します。 なぜブラウザバック時の挙動に注目するのか ユーザーがYahoo!ニュースのページを閲覧し、別のページに遷移する方法は大きく分けて以下の2つが考えられます。 （A） リンクをたどってページを遷移する （B） ブラウザーのナビゲーションボタンまたはスワイプ操作によって遷移する 「戻る」による遷移（ブラウザバック） 「進む」による遷移（ブラウザフォワード） Yahoo!ニュースでは総PVのうち一定程度が(B)のブラウザバックまたはブラウザフォワードによるページ遷移時のも
今年のオープンソース活動振り返り @ 2021
2021年のオープンソース活動の振り返り記事です。 今までの振り返りの一覧です。 今年のオープンソース活動振り返り @ 2020 | Web Scratch 今年のOSS活動振り返り @ 2019 | Web Scratch 今年のOSS活動振り返り @ 2018 | Web Scratch 今年のOSS活動振り返り @ 2017 | Web Scratch 今年のOSS活動振り返り @ 2016 | Web Scratch 今年のOSS活動振り返り @ 2015 | Web Scratch 今年のOSS活動振り返り @ 2014 | Web Scratch 2021年のGitHubのPublicなContributionsは8000~9000ぐらいを推移していました。 Privateリポジトリも含めると大体1.5倍ぐらいなので、これは2020年と大体同じ比率なようです。 データの取得には
Node.js と ID について - Qiita
[ English Version ] 2020年の 「Promise のキャンセルについて」ブログ記事に続き、これもまた基本的なトピックとして深く掘り下げていきたいと思います。 アイデンティティ（略称ID）、つまりあるものを識別する方法は、ほとんどのツールがすぐに提供してくれるので、普段考える必要はありません。しかし、私たちはユーザーのために作っているのです。人間です。ID は、URL であったり、レシートであったりと、ユーザーの目に触れることが多く、そのときにIDの形が実際の違いを生むことがあります。 この記事を読んでいただければ、このトピックが魅力的であることに同意していただけると思います。その後、あなたはIDを同じように見ることができなくなるに違いありません。 この記事のコードは、関連する github レポ に掲載されています。 Classic ID's, auto increm
DevTools の Web 技術でできている部分を覗き見る - polamjaggy
この記事ははてなエンジニア Advent Calendar 2021 の 22 日目の記事です。 昨日の記事は id:shimobayashi さんの アジャイル推進活動にここ1年で吉兆がみえてきた要因について - 下林明正のブログ でした。 Chrome の DevTools の UI 部分は Web 技術でできています。Web 技術でできているので、DevTools を DevTools で inspect することもできます。 example.com を inspect している画面を inspect している様子 このことを知ったのは、10MB くらいある JavaScript ファイルにブレークポイントを貼りつつデバッグしていたら DevTools が固まるようになってしまい、ブレークポイントを解除しようにもその前に DevTools がフリーズしてしまうので詰んだ……、という出
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
从 Turborepo 看 Monorepo 工具的任务编排能力 · Issue #13 · worldzhao/blog