basecss basecss

Performance matters

https://speedcurve.com/blog/
https://calendar.perfplanet.com/2017/an-audit-of-boomerangs-performance/
Time to interactive - Measuring more of the user experience - https://calendar.perfplanet.com/2017/time-to-interactive-measuring-more-of-the-user-experience/
PERCEPTION MATTERS: MAKING RUM MORE REAL - https://blogs.akamai.com/2018/04/perception-matters-measure-perceived-performance.html
Web performance made easy - https://developers.google.com/web/updates/2018/08/web-performance-made-easy
Url not working - https://developer.akamai.com/blog/2017/04/12/gauge-user-experience-time-interactive/
Github containing most suggestions around perf - https://github.com/fabkrum/web-performance-resources
Frontend performance checklist - https://github.com/thedaviddias/Front-End-Performance-Checklist

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

Download videos from egghead

Go to the egghead website, i.e. Building a React.js App

run

$.each($('h4 a'), function(index, video){
  console.log(video.href);
});

React (Virtual) DOM Terminology

In React's terminology, there are five core types that are important to distinguish:

ReactElement / ReactElement Factory
ReactNode
ReactComponent / ReactComponent Class

React Elements

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

	import SwiftUI
	import PlaygroundSupport

	struct Desktop: View {
	var body: some View {
	ZStack {
	// Image(uiImage: #imageLiteral(resourceName: "IMG_6281.JPG"))
	Color(UIColor.systemBlue)
	macOS()
	}

	import Combine
	import CoreFoundation
	import CoreGraphics
	import CoreText
	import Darwin
	import Foundation
	import SwiftUI
	import UIKit
	import os.log
	import os

	// Simple wrapper to use bootstrap's grid system to position elements side-by-side
	var VerticalFieldsElement = React.createClass({
	render: function() {
	return dom.div(
	{ className: 'clearfix' },
	React.Children.map(this.props.children, function(child) {
	if(!child) {
	return child;
	}

	* {
	font-size: 12pt;
	font-family: monospace;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	color: black;
	cursor: default;
	}