- Keeping CALM: when distributed consistency is easy
- What Every Programmer Should Know About Memory
- Oxide: The Essence of Rust
- File systems unfit as distributed storage backends: lessons from 10 years of Ceph evolution
- Modern B-Tree Techniques
- In Search of an Understandable Consensus Algorithm
- The Art of Doing Science and Engineering
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
import React, { useEffect, useRef } from 'react'; | |
/** | |
* Use setInterval with Hooks in a declarative way. | |
* | |
* @see https://stackoverflow.com/a/59274004/3723993 | |
* @see https://overreacted.io/making-setinterval-declarative-with-react-hooks/ | |
*/ | |
export function useInterval( | |
callback: React.EffectCallback, |
Re: selfies
project written in CRA and PWA
-
Planning of a project
- The project planning is mostly based on Fullstack Project Planning.
For most of my projects, especially recently, I've been following a planning process that helps me breakdown the project into component parts that help me build more efficiently.
- The project planning is mostly based on Fullstack Project Planning.
-
React Project Structure
- The project structure is mostly based on React Project Structure Best Practices for Scalable Application.
A react project structure or architecture plays an important role in project maintenance. A good folder structure will help developers in the team easy to locate and easy to relate (ELER).
- The project structure is mostly based on React Project Structure Best Practices for Scalable Application.
<img data-src="unicorn.jpg" loading="lazy" alt=".." class="lazyload"/> | |
<script> | |
// Select all images with the class "lazyload" | |
const images = document.querySelectorAll("img.lazyload"); | |
// Check if the browser supports the "loading" attribute | |
if ('loading' in HTMLImageElement.prototype) { | |
// If so, we'll update all <img src> to point to the data-src instead | |
images.forEach(img => { | |
img.src = img.dataset.src; |
const puppeteer = require('puppeteer'); | |
const devices = require('puppeteer/DeviceDescriptors'); | |
const Good3G = { | |
'offline': false, | |
'downloadThroughput': 1.5 * 1024 * 1024 / 8, | |
'uploadThroughput': 750 * 1024 / 8, | |
'latency': 40 | |
}; |
[lcp] | |
const po = new PerformanceObserver(() => {}); | |
po.observe({type: 'largest-contentful-paint', buffered: true}); | |
const lastEntry = po.takeRecords().slice(-1)[0]; | |
return lastEntry.renderTime || lastEntry.loadTime; | |
[cls] | |
const po = new PerformanceObserver(() => {}); | |
po.observe({type: 'layout-shift', buffered: true}); | |
return po.takeRecords().reduce((val, entry) => val + entry.value, 0); |