Skip to content

Instantly share code, notes, and snippets.

View dotproto's full-sized avatar

Simeon Vincent dotproto

230 followers · 13 following
View GitHub Profile
@dotproto
dotproto / unicode_string_comparison.js
Last active January 20, 2017 02:38
Examining raw unicode values and their normalized forms. TL:DR; comparing unicode strings using a `.normalized()` and `. localeCompare()`
// References
//
// - https://tc39.github.io/ecma262/#sec-ecmascript-language-types-string-type
// - http://unicode.org/reports/tr15/#Norm_Forms
// - http://unicode.org/faq/normalization.html#7 (What is the difference is between W3C normalization and Unicode normalization?)
// - https://developer.mozilla.org/en-US/docs/Web/API/DOMParser
//
// Resources
//
// - http://stackoverflow.com/questions/8936984/uint8array-to-string-in-javascript
@dotproto
dotproto / class-to-element.js
Created February 8, 2017 10:30
Hlper that attempts to convert a custom element class' name into a valid custom element name.
// PCENChar comes from the Custom Element spec
// PCEN = Potential Custom Element Name
// https://www.w3.org/TR/custom-elements/#custom-elements-core-concepts
const PCEN_CHAR = /[-a-z._0-9\u00B7\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u037D\u037F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD\u10000-\uEFFFF]/
const VALID_PCEN = new RegExp(`^[a-z]${PCEN_CHAR.source}*-${PCEN_CHAR.source}*$`)
const CAPS = /([A-Z])/g
const INNER_CAPS = /((?!^|[a-z]))([A-Z])/g
function classNameToElementName(Class) {
@dotproto
dotproto / setup.js
Created March 14, 2017 21:19
https://esbench.com/bench/58c851a299634800a0347a42
// TODO: I was going through various alternative forms when I realized I was spending too much time on this.
let data = {
"a": "alpha",
"b": "beta,",
"c": "gamma",
"d": "delta",
"e": "epsilon",
"g": "eta",
"h": "theta",
@dotproto
dotproto / hash-utils.js
Created June 9, 2017 21:19
Hash utils
// Generate a random hex string of the specified length
var randomHashReadable = function(length = 32) {
const hashLength = Math.ceil(length / 2);
const buffer = crypto.getRandomValues(new Uint8Array(hashLength));
const hex = [].slice.call(buffer).map(val => val.toString(16).padStart(2, '0'));
return hex.join('').substring(0, length);
};
var randomHash = (length = 32) => {
return hex = [].slice.call(crypto.getRandomValues(new Uint8Array(Math.ceil(length / 2)))).map(val => val.toString(16).padStart(2, '0')).join('').substring(0, length);
@dotproto
dotproto / look_into.md
Last active August 26, 2017 00:46
Stuff I should look into.

Project ideas

  • Project boilerplate that has all the basics set up including
    • Set up CI - or at least provide instructions to make it as painless as possible
    • Watch task for linter
    • Watch task for unit tests
    • Integration test
    • Using headless Chrome to do screenshot diffing for CSS regressions
    • Precommit hooks and/or CI hooks for prettier
@dotproto
dotproto / typeface_advice.md
Last active December 3, 2017 22:07

On Dec 3, 2017 [I asked Marcin Wichary][request] for advice on "font design" and he suggested I check out [Zach Leatherman's thread][zach_thread] where he asked a very similar question.

Books

  1. [How to create typefaces: from sketch to screen][book1]
  2. [Counterpunch][book2]
  3. [Designing Type][book3] by Karen Cheng
  4. [While You're Reading][book4] by Gerard Unger
  5. [Essential Type: An Illustrated Guide to Understand and Using Fonts][book5] by Tony Seddon
  6. [Lettering for Reproduction][boo6] by David Gates
@dotproto
dotproto / merge.js
Last active April 26, 2018 21:17
Merge async iterators
(async function() {
console.clear();
class Deferred {
constructor() {
this.promise = new Promise((resolve, reject) => {
this.resolve = resolve;
this.reject = reject;
});
}
@dotproto
dotproto / index.css
Created July 10, 2018 18:18 — forked from stereokai/index.css
Trigonometry in CSS
//----------------------------------*\
// TRIGONOMETRY FUNCTIONS
//----------------------------------*/
// # Trigonometry in CSS
//
// - Through Taylor/Maclaurin polynomial representation: http://people.math.sc.edu/girardi/m142/handouts/10sTaylorPolySeries.pdf
// - Useful if you don't want to use JS.
// - With CSS Variables.
// - `calc()` can't do power (x ^ y) so I used multiplication instead.
@dotproto
dotproto / background.js
Created February 26, 2020 08:53
Simple Chrome Extension messaging demo modeled after the TCP/IP handshake (SYN, SYN-ACK, ACK)
// Copyright 2020 Google LLC.
// SPDX-License-Identifier: Apache-2.0
// Start synchronizaiton on browser action click
chrome.browserAction.onClicked.addListener(function(tab) {
console.log('Handshake initiated: BG sending SYN');
chrome.tabs.sendMessage(tab.id, { type: 'bg-syn' });
});
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
@dotproto
dotproto / LICENSE
Last active July 16, 2020 14:09
MV3 webRequest demo. To view the console, you may need to manually open devtools for the service worker. On Chrome, visit chrome://serviceworker-internals and search for the service worker registered to `chrome-extension://<extension-id>/` where extension-id is the ID of your extension.
Copyright 2020 Google LLC
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,