Implementing an efficient LRU cache in JavaScript
Where we discover how to harness the power of JavaScript's typed arrays to design our very own low-cost pointer system for fixed-capacity data structuresTable of Contents The LRU cacheImplementing a LRU cacheDoubly-linked listsLRU Cache list operationsImplementing doubly-linked lists in JavaScriptA custom pointer systemIs it really worth the hassle?Concluding remarksMiscellanyAbout evictions & spl
Snyk research team discovers severe prototype pollution security vulnerabilities affecting all versions of lodash | Snyk
ProductsProducts What is Snyk? Developer-first security in action
The cost of JavaScript in 2019 · V8
Show navigation Note: If you prefer watching a presentation over reading articles, then enjoy the video below! If not, skip the video and read on. “The cost of JavaScript” as presented by Addy Osmani at #PerfMatters Conference 2019.One large change to the cost of JavaScript over the last few years has been an improvement in how fast browsers can parse and compile script. In 2019, the dominant cost
Object.fromEntries · V8
Object.fromEntries is a useful addition to the built-in JavaScript library. Before explaining what it does, it helps to understand the pre-existing Object.entries API. Object.entries #The Object.entries API has been around for a while. Chrome: supported since version 54Firefox: supported since version 47Safari: supported since version 10.1Node.js: supported since version 7Babel: supported For each
Array.prototype.flat and Array.prototype.flatMap · V8
Show navigation Array.prototype.flat #The array in this example is several levels deep: it contains an array which in turn contains another array. const array = [1, [2, [3]]]; // ^^^^^^^^^^^^^ outer array // ^^^^^^^^ inner array // ^^^ innermost arrayArray#flat returns a flattened version of a given array. array.flat(); // → [1, 2, [3]] // …is equivalent to: array.flat(1); // → [1, 2, [3]]The defa
Bringing service workers to Google Search | web.dev
Background Search for just about any topic on Google, and you're presented with an instantly recognizable page of meaningful, relevant results. What you probably didn't realize is that this search results page is, under certain scenarios, served by a powerful piece of web technology called a service worker. Rolling out service worker support for Google Search without negatively impacting the perfo
How to Use the Web Share API | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. The Web Share API is one that has seemingly gone under the radar since it was first introduced in Chrome 61 for Android. In essence, it provides a way to trigger the native share dialog of a device (or desktop, if using Safari) when sharing content — say a link or a contact card — directly from a w
Unpacking hoisting
The following sections describe the behavior of some of these constructs in more detail. const and let: temporal dead zone # For JavaScript, TC39 needed to decide what happens if you access a constant in its direct scope, before its declaration: { console.log(x); // What happens here? const x; } Some possible approaches are: The name is resolved in the scope surrounding the current scope. You get
Enabling Modern JavaScript on npm - JASON Format
Modern JavaScript syntax lets you do more with less code, but how much of the JavaScript we ship to users is actually modern? For the past few years we’ve been writing modern JavaScript (or TypeScript), which is then transpiled to ES5 as a build step. This has let the “state of the art” of JavaScript move forward at a faster pace than could have otherwise been achieved while supporting older brows
Dive into IndexedDB
Dive into IndexedDB IndexedDB is one of the storage capabilities introduced into browsers over the years. Here's an introduction to IndexedDB, the Database of the Web supported by all modern Browsers Introduction to IndexedDB Create an IndexedDB Database How to create a database Adding data into a store Adding data when the store is created, initializing it Adding data when the store is already cr
Improving third-party web performance at The Telegraph
At The Telegraph we’re currently going through a process of rebuilding our public-facing website. This gives us the opportunity to take learnings from the existing build but also write some of the code from scratch. You can see our progress so far on pages such as Gaming and Culture. We can monitor the impact this has on metrics across usability, performance and accessibility. We’re incredibly pas
イメージで伝われ！図解JavaScriptの非同期処理 - メモを揉め
ものすごい久しぶりのブログ更新になってしまいましたが、今回はJavaScriptの非同期処理について書いてみたいと思います。 このテーマはうまく説明できない部分が毎回ちょいちょいあるのですが、こうしてまとめることで頭の中が整理されていくということもあるので、最後まで頑張りたいと思います。 前提としてブラウザの実装の詳細や仕様については分からない部分も多いため、間違っている部分もあるかもしれません。 もし、お気づきの点などありましたら、教えていただけると助かります。 目次 目次 同期と非同期の比較その1 同期的実行 非同期的実行 同期的実行 非同期的実行 同期と非同期の比較その2 同期的実行 非同期的実行 並行処理と並列処理 非同期API 非同期APIの特徴 その他の非同期API addEventListenerに渡したコールバックの同期的実行 非同期処理のユースケース コールバック Pro
WebAssembly at eBay: A Real-World Use Case
From the time it was announced, WebAssembly caused a huge buzz in the front-end world. The web community readily embraced the idea of taking code written in programming languages other than JavaScript and running that code in the browser. Above all WebAssembly consistently guarantees native speeds much faster than JavaScript. At eBay, we were no different. Our engineers were very excited about thi
SPAにおける状態管理:関数型のアプローチも取り入れるフロントエンド系アーキテクチャの変遷｜ハイクラス転職・求人情報サイト AMBI（アンビ）
こんにちは、小林（@koba04）です。 本記事では、シングルページアプリケーション（以下、SPA）における状態管理について解説します。 GmailやTwitterは、SPAとして構築されている代表的なWebアプリケーションであり、スムーズなページ遷移をSPAによって実現しています。またElectronやPWA（Progressive Web Apps）の登場により、複雑なアプリケーションをWebの技術を使って構築する場面も増えてきました。 これらの複雑なアプリケーションにおいては、既存のページ単位での状態管理の考え方では対応が難しくなります。 そこで今回は、具体的なフレームワークも取り上げながら、Webフロントエンドにおける状態管理のアプローチについて紹介します。 フロントエンドでの状態管理の複雑化 ページの単位を超えた状態の保持 モデルとビューによる処理の分割 イベントの管理が複雑にな
Folding the DOM • Josh W. Comeau
Filed underReactoninMay 19th, 2019.May 2019.Last updatedoninSeptember 13th, 2024.Sep 2024. IntroductionIn my day-to-day life as a front-end developer, I generally treat CSS as a collection of 2D layers. Other than reordering them using z-index, I don't often move things in 3D space. And yet, for years now, browsers have bundled in a surprisingly capable 3D CSS engine! Someone even built an experim
【SSRも】Fleur − 新しいFluxフレームワーク【イケる】 - pixiv inside
みなさんこんにちは！ VRoid Hubでフロントエンドエンジニアをしている花倉ミツカ (a.k.a. ラグ)です 🙌 今回のpixiv insideはちょっとだけお仕事から離れて(ガチ)アイスブレイクです。私が1年ほど開発しているFluxフレームワーク、Fleur (フルール, @fleur/fleur)について、その設計や使い方についてご紹介させていただきます！ 目次 どういうフレームワーク？ 実際の使い方 質問 まとめ どういうフレームワーク？ pixiv Sketchで採用されている Fluxible というFluxフレームワークを参考に、「書きやすさ」と「現代的な機能の採用」の二点を重視してTypeScriptでフルスクラッチしました。（Fluxibleは私が知ってる中で一番"整っている"フレームワークだと思っています♨） Fleurの大規模なプロダクションでの採用実績はまだあ
[Web フロントエンド] 状態更新ロジックをフレームワークから独立させる - 株式会社カブク
はじめに はじめまして。 null です。最近の悩みは 2 歳半の息子が言うことを聞いてくださらないことです。 2 歳児もそうなのですが、 ソフトウェアフレームワークに振り回されてるって感じること、稀によくありませんか？？ ある程度の学習コストがかかるのは当然としても、冗長な書き方を要求されるわ、かゆいところに手が届かないわ、実データ投入したらパフォーマンス問題だらけだわ、バージョンアップしたら動かなくなるわで、あぁ私いま振り回されてるなぁ、みたいな。 「じゃあ使わなければいい」「じゃあ自分で作ればいい」という話ではなく、「必要以上には依存しない方が無難だよね」「フレームワークの外へ切り出せるところは切り出してみよう」という話をします。 続きを 3 行で 状態更新ロジックってフレームワーク非依存にできそうだよね でもフレームワークによって状態をイミュータブル（状態更新=状態オブジェクト生成
![[Web フロントエンド] 状態更新ロジックをフレームワークから独立させる - 株式会社カブク](https://cdn-ak-scissors.b.st-hatena.com/image/square/897d9c48832ba7e3a66c89a7941ffe151d3d8705/height=288;version=1;width=512/https%3A%2F%2Fwww.kabuku.co.jp%2Fwp%2Fwp-content%2Fuploads%2F2019%2F05%2Fcut20_bunsin-1200x801.jpg)
Renato Athaydes
Comparing JVM alternatives to JavaScript Written on Wed, 17 Apr 2019 21:11:00 +0000 (Last updated on Sun, 21 Apr 2019 19:56:00 +0000) I am mostly a backend developer, but every now and then I need to do some frontend work. Even if just for personal use. For that reason, I’ve been following developments in the JavaScript world from a distance, but I dislike much of what I see. The thing I dislike m
A Real-World Comparison of Front-End Frameworks with Benchmarks (2019 update)
By Jacek Schae Also available in: Turkish — thanks to @erdenizZz, Portugues — thanks to @felipefialho For the third time, we are comparing Front-End frameworks by using the Real World example apps. RealWorld example app gives us: RealWorld App Something more than a “todo”. Usually “todos” don’t convey enough knowledge and perspective to actually build real applications. Standardized A project that
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
An introduction to the MediaRecorder API