acdlite

Demo: Coordinating async React with non-React views

tl;dr I built a demo illustrating what it might look like to add async rendering to Facebook's commenting interface, while ensuring it appears on the screen simultaneous to the server-rendered story.

A key benefit of async rendering is that large updates don't block the main thread; instead, the work is spread out and performed during idle periods using cooperative scheduling.

But once you make something async, you introduce the possibility that things may appear on the screen at separate times. Especially when you're dealing with multiple UI frameworks, as is often the case at Facebook.

How do we solve this with React?

dmnsgn

A non-exhaustive list of WebGL and WebGPU frameworks and libraries. It is mostly for learning purposes as some of the libraries listed are wip/outdated/not maintained anymore.

Engines and libraries ⚙️

Name	Stars	Last Commit	Description
three.js	![GitHub

vlucas

import { createCipheriv, createDecipheriv, randomBytes } from "crypto";

const ENCRYPTION_KEY: string = process.env.ENCRYPTION_KEY || ""; // Must be 256 bits (32 characters)
const IV_LENGTH: number = 16; // For AES, this is always 16

/**
 * Will generate valid encryption keys for use
 * Not used in the code below, but generate one and store it in ENV for your own purposes
 */
export function keyGen() {

JohnEarnest

////////////////////////////////////////////////////////////////////////////
//
//   Node.js HTTP file server example.
//
//   Serves documents via GET requests with CORS headers and (if enabled)
//   additionally permits writes via POST requests.
//
//   Before using, PLEASE be aware of the security risks associated with
//   running a server like this on publicly accessible machines!
//

cecilemuller

How to setup Let's Encrypt for Nginx on Ubuntu 18.04 (including IPv6, HTTP/2 and A+ SLL rating)

---

Virtual hosts

Let's say you want to host domains first.com and second.com.

Create folders for their files:

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

domenic

function processBodyChunkwiseWithProgress(res, processChunk) {
  const dummyEventTarget = document.createElement("div"); // why isn't EventTarget constructible? :(

  const lengthComputable = res.headers.has("Content-Length");
  const total = res.headers.get("Content-Length") || 0;
  let loaded = 0;
  
  // Using http://underscorejs.org/#throttle
  const fireProgressThrottled = _.throttle(fireProgress, 50, { trailing: false });

haasn

Firefox bullshit removal

Updated: Just use qutebrowser (and disable javascript). The web is done for.

mnot

Edward Snowden at IETF 93

Edward Snowden answered questions after a showing of CITIZENFOUR at the IETF93 meeting; this is a transcript of the video recording.

For more information, see the Internet Society article.

• Introduction
• Scale of Pervasive Monitoring
• Returning to the US
• Preserving the Internet

paulirish

/* bling.js */
window.$ = document.querySelector.bind(document);
window.$$ = document.querySelectorAll.bind(document);
Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); };
NodeList.prototype.__proto__ = Array.prototype;
NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); };