Skip to content

Instantly share code, notes, and snippets.

View vincentorback's full-sized avatar
🌻

Vincent Orback vincentorback

🌻
View GitHub Profile
@vincentorback
vincentorback / imageBrightness.js
Last active March 8, 2024 18:15
Get Image Brightness
function getImageBrightness(imageSrc, callback) {
var img = document.createElement('img'),
colorSum = 0,
i = 0,
len,
canvas,
ctx,
imageData,
data,
brightness,
@vincentorback
vincentorback / focusable-selectors.js
Created November 10, 2023 14:54
Focusable selectors
const not = {
inert: ':not([inert]):not([inert] *)',
negTabIndex: ':not([tabindex^="-"])',
disabled: ':not(:disabled)',
}
export const FOCUSABLE_SELECTORS = [
`a[href]${not.inert}${not.negTabIndex}`,
`area[href]${not.inert}${not.negTabIndex}`,
`input:not([type="hidden"]):not([type="radio"])${not.inert}${not.negTabIndex}${not.disabled}`,
@vincentorback
vincentorback / .deploy
Created September 7, 2020 08:50
Github Action - Deploying Bedrock WordPress website
name: Build and deploy
on:
push:
branches: [master]
pull_request:
branches: [master]
jobs:
build:
@vincentorback
vincentorback / debounce-es2015.js
Last active September 28, 2023 16:24
Smarter debouncing
export function debounce (fn, wait = 1) {
let timeout
return function (...args) {
clearTimeout(timeout)
timeout = setTimeout(() => fn.call(this, ...args), wait)
}
}
@vincentorback
vincentorback / getWeekNumber.js
Last active August 9, 2023 08:34
getWeekNumber.js
function getWeekNumber(d) {
d = new Date(+d) // Copy date so don't modify original.
d.setHours(0, 0, 0, 0) // Reset hours.
d.setDate(d.getDate() + 4 - (d.getDay() || 7)) // Set to nearest Thursday: current date + 4 - current day number and make Sunday's day number 7
var yearStart = new Date(d.getFullYear(), 0, 1) // Get first day of year
var weekNo = Math.ceil((((d - yearStart) / 86400000) + 1) / 7) // Calculate full weeks to nearest Thursday
return weekNo // Return week number
}
var date = new Date()
@vincentorback
vincentorback / getTextLines.js
Created January 11, 2023 19:36
Check if textNode has text on multiple lines
// console.log(getTextLines(querySelector('span')))
// returns number of lines
function collapseWhiteSpace(value) {
return value.trim().replace(/\s+/g, ' ')
}
function getTextLines(textNode) {
if (textNode.nodeType !== 3) {
return false // Only text nodes allowed
@vincentorback
vincentorback / wp-notify-if-using-simple-quotes.js
Last active December 29, 2022 16:56
Show warning notifications when user, in WordPress gutenberg editor, uses words or phrases in content. For example ' and " when they should be using ` or ”.
const warnAbout = [
{
id: 'single_quote_notice',
needle: '"',
haystack: 'text',
message: "Content includes simple quotation marks: '. Did you mean ’ ?",
dispatched: false,
},
{
id: 'double_quote_notice',
@vincentorback
vincentorback / regex-background-position.md
Last active December 29, 2022 14:44
Common regex patterns

Background position (50% 50%)

/(\d{1,2}\% \d{1,2}\%)/g

@vincentorback
vincentorback / wp-limit-image-sizes.php
Last active December 29, 2022 14:44
Limit wordpress image sizes based on save data header
<?php
/**
* Limit image srcset width
* @link https://developer.wordpress.org/reference/hooks/max_srcset_image_width/
*/
function limit_image_srcset_width( $max_width = 2048, $size_array = [] ) {
$saveData = (isset($_SERVER["HTTP_SAVE_DATA"]) && stristr($_SERVER["HTTP_SAVE_DATA"], "on") !== false) ? true : false;
return $saveData ? 652 : $max_width;
}
@vincentorback
vincentorback / react-native-transparent-image.js
Last active December 29, 2022 14:43
React native transparent image using canvas
import React from 'react'
import { Animated } from 'react-native'
import Canvas, { Image as CanvasImage } from 'react-native-canvas'
const TransparentImage = ({ source, width, height, backgroundColor }) => {
const fadeAnim = React.useRef(new Animated.Value(0)).current
return (
<Animated.View
style={{