(by @andrestaltz)
If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.
(by @andrestaltz)
If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.
(function (context, trackingId, options) { | |
const history = context.history; | |
const doc = document; | |
const nav = navigator || {}; | |
const storage = localStorage; | |
const encode = encodeURIComponent; | |
const pushState = history.pushState; | |
const typeException = 'exception'; | |
const generateId = () => Math.random().toString(36); | |
const getId = () => { |
/* bling.js */ | |
window.$ = document.querySelectorAll.bind(document); | |
Node.prototype.on = window.on = function (name, fn) { | |
this.addEventListener(name, fn); | |
} | |
NodeList.prototype.__proto__ = Array.prototype; |
[ | |
{ | |
"code": "AAA", | |
"lat": "-17.3595", | |
"lon": "-145.494", | |
"name": "Anaa Airport", | |
"city": "Anaa", | |
"state": "Tuamotu-Gambier", | |
"country": "French Polynesia", | |
"woeid": "12512819", |
// max-INP: | |
(()=>{let o=globalThis;return void 0===o.winp&&(o.winp=0,new PerformanceObserver(n=>{for(let e of n.getEntries()){if(!e.interactionId)continue;o.winp=Math.max(e.duration,o.winp);let r=o=>o<=200?"color: green":o<=500?"color: yellow":"color: red";console.log(`%c[Interaction: ${e.name.padEnd(12)}] %cDuration: %c${e.duration}`,"color: grey; font-family: Consolas,monospace","",r(e.duration))}}).observe({type:"event",durationThreshold:0,buffered:!0})),o.winp})(); | |
// interactionCount | |
performance.interactionCount; |
// Cribbed this from: | |
// https://web.dev/debug-web-vitals-in-the-field/#usage-with-the-web-vitals-javascript-library | |
export function getSelector(node, maxLen = 100) { | |
let sel = ''; | |
try { | |
while (node && node.nodeType !== 9) { | |
const part = node.id ? '#' + node.id : node.nodeName.toLowerCase() + ( | |
(node.className && node.className.length) ? | |
'.' + Array.from(node.classList.values()).join('.') : ''); |
A few conversations have circled around user-side structural profiling. For context, see React PR #7549: Show React events in the timeline when ReactPerf is active
One particular concern is the measurement overhead. This gist has a benchmarking script (measure.js
) for evaluating overhead and initial results.
Runs about 0.65µs per mark()
call. Naturally, that's ~= an overhead of 1ms for 1500 mark()
s.
This article has been given a more permanent home on my blog. Also, since it was first written, the development of the Promises/A+ specification has made the original emphasis on Promises/A seem somewhat outdated.
Promises are a software abstraction that makes working with asynchronous operations much more pleasant. In the most basic definition, your code will move from continuation-passing style:
getTweetsFor("domenic", function (err, results) {
// the rest of your code goes here.