cvan

Last Updated: March 2023

IMPORTANT: Ignore the out-of-date steps below for getting Chromium keys.

Instead, read this up-to-date guide (Jan 2023) written by @LearningToPi.

P.S. Thank you to every contributor below who provided tips over the years on what should be a straightforward process: setting up Chromium for local development.

Long live the web!

cvan

Setup

Using Homebrew on Mac OS X:

brew install jq

Add these aliases to your profile (e.g., ~/.zshrc, ~/.bashrc, ~/.profile, etc.):

alias hurlp='pbpaste | jq ".log.entries" | tee >(jq --raw-output "[.[] | .request.url] | sort | unique | .[]")'

alias hurld='pbpaste | jq ".log.entries" | jq --raw-output "[.[] | .request.url] | sort | unique | .[]" | harurls | tee >(xargs -n 1 curl -O $1)'

cvan

Instructions

CloudFlare is an awesome reverse cache proxy and CDN that provides DNS, free HTTPS (TLS) support, best-in-class performance settings (gzip, SDCH, HTTP/2, sane Cache-Control and E-Tag headers, etc.), minification, etc.

1. Make sure you have registered a domain name.
2. Sign up for CloudFlare and create an account for your domain.
3. In your domain registrar's admin panel, point the nameservers to CloudFlare's (refer to this awesome list of links for instructions for various registrars).
4. From the CloudFlare settings for that domain, enable HTTPS/SSL and set up a Page Rule to force HTTPS redirects. (If you want to get fancy, you can also enable automatic minification for text-based assets [HTML/CSS/JS/SVG/etc.], which is a pretty cool feature if you don't want already have a build step for minification.)
5. If you

cvan

if (!('performance' in window)) {
  window.performance = {
    now: function() {
      return +new Date();
    }
  };
}

function trace(text) {
  console.log((window.performance.now() / 1000).toFixed(3) + ": " + text);

cvan

• https://github.com/opencollective/opencollective-frontend
  • @formatjs/intl-relativetimeformat
  • @material-ui/core
  • @opencollective/taxes
  • @rebass/grid
  • @sentry/browser
  • @sentry/node
  • @styled-icons/boxicons-regular
  • @styled-icons/fa-brands
  • @styled-icons/fa-solid

cvan

var canvas = document.createElement('canvas');
var gl;
var debugInfo;
var vendor;
var renderer;

try {
  gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
} catch (e) {
}

cvan

@supports (padding-top: constant(safe-area-inset-top)) {
  body {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
}

@media (display-mode: fullscreen) {
  body {
    padding: 0;
  }

cvan

"Post-symbolic communication" in Virtual Reality

I've selected a few important passages from Jaron Lanier's 2010 book, You Are Not a Gadget (pages 123-125) that speak specifically to "post-symbolic communication" in Virtual Reality (and the inspiration: cephalopods and neoteny).

The problem is that in order to morph in virtual reality, humans must design morph-ready avatars in laborious detail in advance.

We can learn to draw and paint, or use computer graphics design software, but we cannot generate images at the speed with which we can imagine them.

Suppose we had the ability to morph at will, as fast as we can think.

cvan

    // References used:
    // - https://yesviz.com/devices.php
    // - https://ricostacruz.com/til/css-media-query-breakpoints
    // - https://tailwindcss.com/docs/responsive-design/#customizing-breakpoints
    screens: {
      '2xs': { min: '300px' },
      xs: { max: '575px' }, // Mobile (iPhone 3 - iPhone XS Max).
      sm: { min: '576px', max: '897px' }, // Mobile (matches max: iPhone 11 Pro Max landscape @ 896px).
      md: { min: '898px', max: '1199px' }, // Tablet (matches max: iPad Pro @ 1112px).
      lg: { min: '1200px' }, // Desktop smallest.

cvan

// Custom Cypress No-Motion helper
//
// To reduce flakiness in Cypress tests caused by motion,
// force disable all CSS transitions and animations.
//
// revised: 2023-03-15
// credits: @ypresto

function disableMotion(win) {
  const injectedStyleEl = win.document.getElementById('__cy_disable_motion__');