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

@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

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

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

show me all the Tailwind CSS classes to use in my project

which CSS selectors to use? this shows all the (non-dynamic) options generated from your project's tailwind.config.js.

rogden/tailwind-config-viewer is the best. run from the command line:

npx tailwind-config-viewer -o 

cvan

#!/bin/bash

# Adapted from
# https://gist.github.com/LukeZGD/0f5ba45494912c419f59bd8178ab57bd

# If you like this script and my work on libimobiledevice, please
# consider becoming a patron at https://patreon.com/nikias - Thanks <3

REV=1.0.10-cvan
export MACOSX_DEPLOYMENT_TARGET=10.13

cvan

var queryParams = window.location.search.substr(1).split('&').reduce(function (qs, query) {
  var chunks = query.split('=');
  var key = chunks[0];
  var value = decodeURIComponent(chunks[1] || '');
  var valueLower = value.trim().toLowerCase();
  if (valueLower === 'true' || value === 'false') {
    value = Boolean(value);
  } else if (!isNaN(Number(value))) {
    value = Number(value);
  }

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

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

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