Skip to content

Instantly share code, notes, and snippets.

View cvan's full-sized avatar
🚌
🌊

Christopher Van Wiemeersch cvan

🚌
🌊
View GitHub Profile
@cvan
cvan / export-301-redirects.js
Created May 12, 2020 23:58
copy URL redirects from 301 Redirects WordPress plugin
// Paste into your DevTools Console.
list = $$('input[name*="301_redirects[request]"]').map(src => src.value ? `${src.value} ${src.closest('div').querySelector('input[name*="301_redirects[destination]"]').value}`
: '').filter(Boolean).sort().join('\n');
copy(list);
@cvan
cvan / object-flatten.js
Created April 16, 2020 00:10
flatten a nested JavaScript object to a flatten one-level object
// Adapted from source: https://stackoverflow.com/a/19204980
const flatten = (function(isArray, wrapped) {
return function(table) {
return reduce('', {}, table);
};
function reduce(path, accumulator, table) {
if (isArray(table)) {
const length = table.length;
describe('test', () => {
const mockFetchPromise = () =>
Promise.resolve({
ok: true,
json: () => Promise.resolve({}),
status: 200,
statusText: 'OK'
});
beforeEach(() => {
@cvan
cvan / css-ios-pwa-viewport.css
Created April 3, 2020 22:14
CSS for env(safe-area-inset-top) for iOS "Add to Homescreen" / PWA; standalone styles
@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
cvan / capture-errors-safari-ios-webview.js
Created April 3, 2020 02:00
capture JavaScript errors (useful for debugging Safari webviews - e.g., Chrome for iOS)
/**
* Hijacks `window.onerror` for debugging Chrome for iOS (WebView) via `chrome://inspect`.
*
* @returns {string|undefined}
*/
window.onerror = function(message, url, lineNumber, columnNumber, error) {
console.error(
[
['Error message:', message].join(' '),
['URL:', url].join(' '),
@cvan
cvan / using-disabled-buttons-in-forms.md
Last active March 31, 2020 19:02
form usability: on using `<button disabled>`

thesis

from a usability perspective, the pattern of using <button disabled> states for form validation causes cognitive overload because users have to infer the validation requirements of a form.

an appropriate use of <button disabled> is when an active <button> changes temporarily <button disabled> when some action is being processed (e.g., image uploads, payment verification) that should block the submission of the form.

recommendations

use the browser's built-in HTML5 form validation (e.g., ). clicking on an always-active in a `` validates all fields w/ constraints and will present the user with native error messages. (the error strings can be customised but not the styles.)

@cvan
cvan / postcss.config.js
Created March 31, 2020 17:02
postcss, tailwind
const isProd = process.env.NODE_ENV === 'production';
const options = {
purgecss: {
// Docs for PurgeCSS:
// - https://purgecss.com/configuration.html#options
// Consider:
// - https://github.com/americanexpress/purgecss-loader
// - https://frontstuff.io/how-i-dropped-250-kb-of-dead-css-weight-with-purgecss
// - https://gorails.com/episodes/purgecss
@cvan
cvan / alt-production-mode-firebase-rules
Last active June 22, 2024 07:04
Firebase security rules for Test Mode and Production Mode (defaults) for https://console.firebase.google.com
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if false;
}
}
}
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true