Skip to content

Instantly share code, notes, and snippets.

Avatar
:octocat:
contributing my own part

Dan Bamikiya danBamikiya

:octocat:
contributing my own part
View GitHub Profile
@danBamikiya
danBamikiya / what-forces-layout.md
Created July 17, 2021 22:34 — forked from paulirish/what-forces-layout.md
What forces layout/reflow. The comprehensive list.
View what-forces-layout.md

What forces layout / reflow

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.

Element APIs

Getting box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
@danBamikiya
danBamikiya / dom_performance_reflow_repaint.md
Created July 17, 2021 22:34 — forked from faressoft/dom_performance_reflow_repaint.md
DOM Performance (Reflow & Repaint) (Summary)
View dom_performance_reflow_repaint.md

DOM Performance

Rendering

  • How the browser renders the document
    • Receives the data (bytes) from the server.
    • Parses and converts into tokens (<, TagName, Attribute, AttributeValue, >).
    • Turns tokens into nodes.
    • Turns nodes into the DOM tree.
  • Builds CSSOM tree from the css rules.
@danBamikiya
danBamikiya / interval.hook.ts
Created July 16, 2021 21:46 — forked from Danziger/interval.hook.ts
Declarative useTimeout (setTimeout), useInterval (setInterval) and useThrottledCallback (useCallback combined with setTimeout) hooks for React (in Typescript)
View interval.hook.ts
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,
@danBamikiya
danBamikiya / ANSI.md
Created May 30, 2021 20:27 — forked from fnky/ANSI.md
ANSI Escape Codes
View ANSI.md

ANSI Escape Sequences

Standard escape codes are prefixed with Escape:

  • Ctrl-Key: ^[
  • Octal: \033
  • Unicode: \u001b
  • Hexadecimal: \x1b
  • Decimal: 27
View Frontend development best practices (React.js).md

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.

  • React Project Structure

@danBamikiya
danBamikiya / lazyload.html
Created May 10, 2021 12:59 — forked from addyosmani/lazyload.html
Native image lazy-loading with a cross-browser fallback
View lazyload.html
<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;
@danBamikiya
danBamikiya / lcp.js
Created May 10, 2021 12:58 — forked from addyosmani/lcp.js
Largest Contentful Paint - Puppeteer
View lcp.js
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
};
@danBamikiya
danBamikiya / custom-metrics.js
Created May 10, 2021 12:57 — forked from addyosmani/custom-metrics.js
custom-metrics.js
View custom-metrics.js
[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);