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

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

@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

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

(async function () {
  async function loadFonts () {
    if (!('FontFace' in window)) {
      return;
    }

    const fonts = [
      new FontFace('theinhardt', 'url(/fonts/akzidenz-grotesk/AkzidenzGrotesk-Light.woff2)'),  // 400
      new FontFace('theinhardt', 'url(/fonts/akzidenz-grotesk/AkzidenzGrotesk-Regular.woff2)'),  // 500
      new FontFace('theinhardt', 'url(/fonts/akzidenz-grotesk/AkzidenzGrotesk-Medium.woff2)'), // 600

cvan

ttf

curl 'https://fonts.googleapis.com/css?family=Karla'

woff2

curl 'https://fonts.googleapis.com/css?family=Karla' -H 'Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8' -H 'User-Agent: AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.116'

woff

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

// Usage : less2stylusDir('../src/css/');

var fs = require('fs');

// this less 2 stylus conversion script make a stylus easy to read syntax
// - let the braces
// - replace the @ for var as $
// - let semicolons

function less2stylus(less)

cvan

View DEMO

Creating SVG templated elements

Why? Less code is sent down the wire to the user ("the client," the browser). This means faster page load times since it's less code. As a principle, a smaller and flatter DOM structure is going to perform better in the browser. In general, the larger the DOM node tree, the slower, manipulations to the structure will be more expensive by the browser's layout system.

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!