I have moved this over to the Tech Interview Cheat Sheet Repo and has been expanded and even has code challenges you can run and practice against!
\
All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.
elem.offsetLeft
,elem.offsetTop
,elem.offsetWidth
,elem.offsetHeight
,elem.offsetParent
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>JS Bin</title> | |
</head> | |
<body> | |
<script id="jsbin-javascript"> |
This proposal is not longer active. Context: https://twitter.com/siddharthkp/status/909818777314902016
This is a CFP for ReactiveConf open call for lightning talks. If you'd like to see this talk become a reality, please ⭐️ star this gist. #ReactiveConf
If you're on your phone, please request the desktop site to star this gist 😇
This is a proposal for ReactiveConf 2017 open call for Lightning talks. If you'd like to make this talk happen, please 🌟 this gist and retweet my tweet. 🙏
If you're on your phone, please request the 🖥 desktop site to star this gist 😇
I would talk about some myths on Jest & Enzyme. Moreover to stop the comparison of Jest and Enzyme. Instead would focus on how they can work together to test well your React Components. The talk would focus on "How Jest and Enzyme complement each other" and can help you test React components in a better way.
- If you are writing tests: you are already winning.
- If you are not writing tests:let me encourage you to start.
- Jest.
- Snapshot Testing.
addEventListener('fetch', event => { | |
event.respondWith(handleRequest(event.request)) | |
}); | |
async function handleRequest(request) { | |
const url = new URL(request.url); | |
const host = request.headers.get('x-host'); | |
if(!host) { | |
return new Response('x-host header missing', {status: 403}); | |
} |
Priority Hints is rolling out to Chrome in the 101 release which is currently available in the Dev/Beta channel of Chrome and available in WebPageTest when using the Chrome Canary
browser selection.
To make it easier to experiment with priority hints (particularly for LCP images) without making production changes, I set up a couple of public Cloudflare Workers that can be used dynamically with WebPageTest to inject priority hints into existing pages and to preload arbitrary images when combined with WebPageTest's overrideHost
script command.
There is a cloudflare worker at hint.perf.workers.dev
that will take a CSS selector from the x-hint
HTTP header and add fetchpriority=high
to any elements in the HTML that match the selector. The easiest way to experiment with this is to use Chrome's dev tools locally, identify the element that hosts the imag