jordansinger

import SwiftUI
import PlaygroundSupport

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

chriseidhof

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

samarpanda

Performance matters

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

srdjan

100+ different js counter apps...

paulirish

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

ldong

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

jlongster

  // 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;
          }

imjasonh

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

sebmarkbage

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

addyosmani

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