Skip to content

Instantly share code, notes, and snippets.

View cvan's full-sized avatar
🚌
🌊

Christopher Van Wiemeersch cvan

🚌
🌊
423 followers · 551 following
View GitHub Profile
@cvan
cvan / gmaps-gesture-options.js
Created November 20, 2019 05:03
JS option to hide the Google Maps helper interstitial (`Use ⌘ + scroll to zoom the map`)
const googleMapsOptions = {
// Hide the Google Maps helper interstitial (`Use ⌘ + scroll to zoom the map`). See https://developers.google.com/maps/documentation/javascript/interaction#understand-the-terminology
gestureHandling: 'greedy'
};
@cvan
cvan / tailwind.config.js
Created October 21, 2019 23:45
tailwind CSS breakpoints (including iPhone 11 Pro Max)
// References used:
// - https://yesviz.com/devices.php
// - https://ricostacruz.com/til/css-media-query-breakpoints
// - https://tailwindcss.com/docs/responsive-design/#customizing-breakpoints
screens: {
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.
xl: { min: '1159px' }, // Desktop wide.
@cvan
cvan / tailwind.config.js
Last active February 12, 2025 20:46
tailwind CSS breakpoints (including iPhone 11 Pro Max)
// 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
cvan / tailwind-css-grid.css
Created October 19, 2019 01:36
https://tailwindcss.github.io/plugin-examples/#css-grid
.grid {
display: grid;
}
.grid-dense {
grid-auto-flow: dense;
}
.grid-gap-0 {
@cvan
cvan / spacing-helpers.scss
Created October 9, 2019 04:46
tailwindcss-like SASS helpers
$spacings: (
xxl: 110,
xl: 80,
l: 60,
m: 40,
s: 20,
xs: 10,
xx: 8,
);
@cvan
cvan / index.css
Created October 9, 2019 02:56
CSS debugging tool: a visual `font-size` helper
[data-font-size]:after {
background: rgba(255,50,190,.9);
color: #fff;
content: attr(data-font-size);
}
@cvan
cvan / fontface-loading.js
Created October 8, 2019 23:24
loading fonts with JavaScript using `new FontFace` (to avoid FOUF)
(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
cvan / debug.css
Created October 3, 2019 06:32
debug helper
[data-debug-mode='true'] * {
outline: 1px solid cyan !important;
}
[data-debug-mode='true'] body:before {
background: rgb(0,0,0,.85);
color: #fff;
content: 'standard';
transition: all 1s;
font-weight: 100;
@cvan
cvan / get-root-origin.js
Created September 3, 2019 03:15
get root domain from URL (JavaScript) for setting `Domain` in `Cookie` header
const getOrigin = str => str.replace(/.*\/\//, '').replace(/:.+/, '').replace(/\/.+/, '');
const getOriginRoot = (str) => {
const originFull = getOrigin(str);
if (!originFull.includes('.')) {
return str;
}
const originFullChunks = originFull.split('.');
const originRoot = originFullChunks.slice(originFullChunks.length - 2, originFullChunks.length).join('.');
return originRoot;
@cvan
cvan / web-push-examples.md
Last active June 28, 2019 16:39