Skip to content

Instantly share code, notes, and snippets.

View daformat's full-sized avatar

Mathieu Jouhet daformat

14 followers · 6 following
View GitHub Profile
@daformat
daformat / utf-spaces.js
Last active October 25, 2023 08:19
A list of the different UTF spaces
utfSpaces = [
{
name: 'Space',
utf: '\u0020',
html: [' ', ' '],
breaking: true,
width: 'Typically 1/4 em',
unicode_category: 'Separator, Space',
matched_by_s_character_class: true
},
@daformat
daformat / phoneNumberUtil.ts
Last active September 1, 2023 16:43
export type BaseCountry = {
// the ISO 3166-1 code for the country
code: string
// the name of the country (in english)
name: string
// the raw emoji for the country's flag (can be multiple codepoints)
emoji: string
// the international dialing code for the country (without the `+` prefix or escape codes)
dial_country_code: string
// the regions codes, if any
@daformat
daformat / basicXSSProtection.ts
Created July 17, 2023 04:55
const str = "<svg onload=alert(1)>";
const host = typeof document !== 'undefined' ? document.createElement("p") : undefined;
let converted
if (host) {
host.textContent = str;
converted = host.innerHTML;
} else {
converted = str.replaceAll('<', '&lt;').replaceAll('>', '&gt;')
}
console.log(converted)
@daformat
daformat / kebabize.js
Created June 28, 2023 09:46
Convert camel case to kebab case
// convert camelCase to kebab-case
const kebabize = (str) =>
str.replace(
/[A-Z]+(?![a-z])|[A-Z]/g,
(match, offset) => (offset ? '-' : '') + match.toLowerCase()
);
@daformat
daformat / svg-to-png.js
Last active June 26, 2023 08:14
(() => {
// get the original svg and clone it in a hidden container
const originalSvg = $0;
const container = document.createElement('div');
container.style = 'position: absolute; height: 1px; width: 1px; opacity: 0; overflow: hidden'
originalSvg.insertAdjacentElement('afterend', container)
const svg = $0.cloneNode(true);
container.appendChild(svg);
// cleanup funciton
@daformat
daformat / html-designMode-editor.js
Last active June 25, 2023 16:22
Add basic editing capability to any html document and web page, leveraging designMode to provide quick in-browser editor
/*
Thanks to Justin Fuller for his pen (https://codepen.io/Iamjfu/pen/oBYgWV)
*/
(() => {
const controls =
`<style>
#doc-design-mode-editor-controls {
user-select: none;
position: fixed;
@daformat
daformat / iso3166_1_countries_dial_codes_and_emojis.js
Last active December 20, 2022 16:02
/**
* Helper to get the flag emoji for a given country code
* @param {string} countryCode
* @returns {string}
*/
const getFlagEmoji = (countryCode) => {
const codePoints = countryCode
.toUpperCase()
.split('')
.map(char => 0x1f1a5 + char.charCodeAt(0));
@daformat
daformat / dom-node-highlighter.js
Last active December 4, 2022 22:03
Highlight hovered DOM node à la DevTools
(function () {
/*
This code is mostly a quick and somewhat dirty demo to explore the concept of selecting DOM nodes visually
It's far from being bulletproof and the code could definitely be cleaner.
Copy paste it into your browser javascript console then click back inside the document or hide
the devtools so you can use the keyboard shorctus to update selection, otherwise the keystrokes
will be captured by the console.
The support for text selection is still quite basic but it's included for demonstration purposes.
@daformat
daformat / use-typed-translation.ts
Last active August 28, 2022 10:55
Foundation for a TS typed translation helper with autocomplete, intellisense, and type-checking
// -----------------------------------------------------
// This is the foundation for a typed translation helper
// with autocomplete, intellisense, and type-checking
// -----------------------------------------------------
// TS playground link:
// https://www.typescriptlang.org/play?#code/PTAEFpK6dv4fAUCUAVAFgSwM6l6AC4YCmoAZgPYCuAdgCYCGhWltFlATqI0QJ4AHEvSKdGtHABtmrdqUlDOKMAHcsxHtUKUAxpQC2AySUIkANPlqnJk3CQnmeDfkPA7SOgNZZaAc2UQiEHBIbBIAQBCjDjCoGxE2HgA2vQmjFjGIuI4KiScALoAFBiEhAI4AFwgOISMXpQAbnnkkpQqAHR6+sCMwACsABwAzAAMAwBMAOwAnMAAjEODQ3OTAJQB8RhtRJQuZO4kXqLi0iybJAp5OOGoUMcSp7J7eOIirb5YOoHgAaF-YSgAFSApCgQGgKIxe5SGTxQiCRy5ADknDIKi43j8oDUGhqnB8vjwXDiACMAFaHQh4HEYUB4gnXMHAJDwoSgADKhHxfgA8pxOdzfDzyZTQABeOlcgmgAA+oAA3qAkgAPCqSwX5NUCgl87W8kU6QigAC+N2BoPBAEFaHxQA1GLYRAJmLSqNxeB8muxKAajTzQAJOJRFCwSDgLD4dJJqPRpbQw6YnUGQ1gwxbmayyMKKYaAAougA8PIAfOLQP6SMrTAw8AAlQ5cegF+l+Cx6oX8qX6nOEYug0AAfgV-dAo6VAGlLKBPCQ+JRyOX8uABxUR2PR3KAAYAEnlk4AZOqCcbN2v11vdwBhNg6ZhoSj54gFg9H1vl32PjBFpLj-LF4snmuxpJDOc4Ljy+T9mqABE0FmiCYIQtQGROi6r6+HE
@daformat
daformat / RootFontSizeSlider.js
Last active July 12, 2022 12:05
Create a html input slider to set the current html document root font-size
{
// Create a html input slider to set the current html document root font-size
// @returns the ref to the inserted DOM element
const createRootFontSizeSlider = (min = 8, max = 18) => {
const i = document.createElement("input")
i.type = "range"
i.min = `${min}`
i.max = `${max}`
i.step = "0.01"
i.style = "position: fixed; bottom: 24px; right: 24px; z-index: 2147483647"