Skip to content

Instantly share code, notes, and snippets.

View cvan's full-sized avatar
🚌
🌊

Christopher Van Wiemeersch cvan

🚌
🌊
427 followers · 554 following
View GitHub Profile
@cvan
cvan / with-dynamic-route-hydrated.js
Created January 1, 2021 18:11
next.js dynamic routes wait for hydration to complete
import React, { useEffect, useState } from 'react';
import { withRouter } from 'next/router';
// @example `"/films/[slug]"`
const IS_DYNAMIC_ROUTE = urlPathname => String(urlPathname).includes('[');
// Usage in your dynamic-route components:
// @example
// export default withDynamicRoute(Page);
@cvan
cvan / is-dynamic-route.js
Created December 5, 2020 02:42
is dynamic next.js route
/**
* Identify `/[param]/` in route string.
* @see https://github.com/vercel/next.js/blob/master/packages/next/next-server/lib/router/utils/is-dynamic.ts#L7
*
* @param {route} The value from next/router's `route.asPath` (e.g., `/browse/[listingId]`).
* @returns {boolean} True if the route looks like a Next.js dynamic route.
*/
const TEST_ROUTE = /\/\[[^/]+?\](?=\/|$)/;
export function isDynamicRoute(route) {
return TEST_ROUTE.test(route);
@cvan
cvan / adb-commands.md
Created September 16, 2020 02:02
useful adb commands
@cvan
cvan / cypress-debug.js
Created August 28, 2020 20:20
cypress helpers
const enableCypressDebug = win => {
if (process.env.DEBUG === '1') {
win.localStorage.setItem('debug', 'cypress:*');
}
};
beforeEach(enableCypressDebug);
@cvan
cvan / nodemon-safe-kill.js
Created August 7, 2020 19:52
if (process.env.NODE_ENV === 'development') {
// This helps for nodemon to not be prematurely killed.
// See nodemon's docs: https://github.com/remy/nodemon/blob/master/README.md#controlling-shutdown-of-your-script
// Adapted from source: https://www.benjiegillam.com/2011/08/node-js-clean-restart-and-faster-development-with-nodemon/
const gracefulShutdown = cb => {
setTimeout(() => {
process.exit(0);
cb();
}, 5000);
};
@cvan
cvan / strip-trailing-slashes-in-url.js
Created July 28, 2020 23:48
strip trailing slashes in a URL (JavaScript)
const stripTrailingSlashesInUrl = str => str.replace(/\/+$/g, '');
@cvan
cvan / strip-html-comments.js
Created July 21, 2020 23:24
strip html comments javascript
function stripHtmlComments(html) {
// Remove HTML comments (useful for removing developer-facing comments from production HTML markup).
return html.replace(/<!--[\s\S]*?(?:-->)/g, '');
}
@cvan
cvan / parse-a-single-qs-value.js
Created July 7, 2020 02:14
JS regex one-liner for query-string value parsing
// Just replace `placeholder_name` with the actual key for which you want its value.
var placeholderName = decodeURIComponent((window.location.search.match(/[?&]placeholder_name=([^&]+)/)||['', ''])[1]);
@cvan
cvan / useMedia-hook.js
Created July 1, 2020 20:15
useMedia - React hook for `window.matchMedia` for matching media-query
function useMedia(mediaQuery) {
const match = () => {
if (!window.matchMedia) {
return false;
}
return window.matchMedia(mediaQuery).matches;
};
const [value, set] = useState(match);
@cvan
cvan / theinhardt-fontfix.scss
Created May 27, 2020 21:56
http://text-crop.eightshapes.com/?typeface-selection=custom-font&typeface=Inter&custom-typeface-name=Theinhardt&custom-typeface-url=https%3A%2F%2Faalto.com%2Fassets%2Ffonts%2Ftheinhardt%2FTheinhardt-Regular.woff2&custom-typeface-weight=400&custom-typeface-style=normal&weight-and-style=100&size=36&line-height=1.2&top-crop=4&bottom-crop=14
@mixin text-crop($line-height: 1.3, $top-adjustment: 0px, $bottom-adjustment: 0px) {
// Configured in Step 1
$top-crop: 4;
$bottom-crop: 14;
$crop-font-size: 36;
$crop-line-height: 1.2;
// Apply values to calculate em-based margins that work with any font size
$dynamic-top-crop: max(($top-crop + ($line-height - $crop-line-height) * ($crop-font-size / 2)), 0) / $crop-font-size;
$dynamic-bottom-crop: max(($bottom-crop + ($line-height - $crop-line-height) * ($crop-font-size / 2)), 0) / $crop-font-size;