danBamikiya

FWIW: I'm not the author of the content presented here (which is an outline from Edmond Lau's book). I've just copy-pasted it from somewhere over the Internet, but I cannot remember what exactly the original source is. I was also not able to find the author's name, so I cannot give him/her the proper credits.

---

Effective Engineer - Notes

• By Edmond Lau
• Highly Recommended 👍
• http://www.theeffectiveengineer.com/

What's an Effective Engineer?

danBamikiya

/* Learning about arrays of objects	*/
const contacts = [
	{
		firstName: "Kristian",
		lastName: "Vos",
		number: "unknown",
		likes: ["JavaScript", "Gaming", "Foxes"]
	},

	{

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

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

<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

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

ANSI Escape Sequences

Standard escape codes are prefixed with Escape:

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

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

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

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.