danBamikiya

• 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

danBamikiya

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

DOM Performance

• 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

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

Core Knowledge:

• Microsoft's DevOps Definition - What Is DevOps
• The Three Ways
• The Five Ideals

Books:

• The Phoenix Project - Gene Kim et. al.
• The Unicorn Project - Gene Kim
• The DevOps Handbook - Gene Kim et. al.
• Continuous Delivery: Reliable Software Releases through Build, Test, and Deployment Automation

danBamikiya

ANSI Escape Sequences

Standard escape codes are prefixed with Escape:

• Ctrl-Key: ^[
• Octal: \033
• Unicode: \u001b
• Hexadecimal: \x1b
• Decimal: 27

danBamikiya

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

  • 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).

danBamikiya

<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

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

[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);