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

Restuta

Below is the list of modern JS frameworks and almost frameworks – React, Vue, Angular, Ember and others.

All files were downloaded from https://cdnjs.com and named accordingly. Output from ls command is stripped out (irrelevant stuff)

As-is (minified)

$ ls -lhS
566K Jan 4 22:03 angular2.min.js

treshugart

import hify from './create-element';
import React from 'react';
import { render } from 'react-dom';

const h = hify(React.createElement.bind(React));

class Test extends HTMLElement {
  static observedAttributes = ['attr']
  attributeChangedCallback (name, oldValue, newValue) {
    this.innerHTML = `Hello, ${this.getAttribute('attr')}!`;

ibraheem4

Installing Postgres via Brew

Pre-Reqs

Brew Package Manager

In your command-line run the following commands:

1. brew doctor
2. brew update

jamiebuilds

A Redux Story

Developer: "Doo Doo Doo... Working on the new Redux rewrite. Gotta write some fetch actions..."

FETCH_USERS -> function fetchUsersAction() {...}
FETCH_PAGES -> function fetchPagesAction() {...}
FETCH_FRIENDS -> function fetchFriendsAction() {...}
FETCH_GROUPS -> function fetchGroupsAction() {...}
FETCH_EVENTS -> function fetchEventsAction() {...}

jamiebuilds

The Challenge

Compare two (or more) tools that are trying to solve a similar set of problems, without discussing any of the following:

• Community
• Programming Language
• Documentation/Examples/Demos/etc
• Stars/Forks/Downloads/Issues/PRs/Stack Overflow Answers/etc
• Age/Maturity of tool

chrissm79

// create relay environment
import { RelaySnapshot } from './RelaySnapshot'
import { RecordSource } from './RecordSource'
import { Store } from './Store'

export const environment = new Environment({
  network: Network.create(fetchQuery),
  store: new Store(new RecordSource()),
})

sibelius

import React, { useRef, useState } from 'react';

import { Typography } from '@material-ui/core';
import TextField from '@material-ui/core/TextField';
import CircularProgress from '@material-ui/core/CircularProgress';
import Autocomplete, {
  AutocompleteChangeDetails,
  AutocompleteChangeReason,
  AutocompleteProps
} from '@material-ui/lab/Autocomplete';

Offirmo

Resources for learning JavaScript (and its ecosystem) in 2020

• Links are introduced in suggested order of reading
• Intended target: someone knowing to program but not in JavaScript

Why?

1. Why investing in JavaScript? BLOG POST IN PROGRESS

Fundamentals

1. A re-introduction to JavaScript (JS tutorial) https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript

challapradyumna

ARG GOLANG=1.13.8-buster
FROM golang:${GOLANG} as builder

RUN apt-get update && apt-get install -qy build-essential software-properties-common gcc make sudo

ENV CGO_ENABLED=1 GOOS=linux GOARCH=arm64
RUN go get -u -v google.golang.org/grpc && \
    git clone --depth 1 --branch v20.07.2 https://www.github.com/dgraph-io/dgraph/ && \
    cd dgraph && \
    make dgraph