Skip to content

Instantly share code, notes, and snippets.

View donbrae's full-sized avatar

donbrae

6 followers · 19 following
View GitHub Profile
@donbrae
donbrae / similarText.js
Last active January 16, 2024 12:58
JavaScript function which mimics PHP’s `similar_text()`.
// Source: ChatGPT 4
function similarText(first, second) {
// Check for null, undefined, or empty string inputs
if (first === null || second === null || typeof first === 'undefined' || typeof second === 'undefined' || first.trim().length === 0 || second.trim().length === 0) {
return { matchingCharacters: 0, similarityPercentage: 0 };
}
// Type coercion to ensure inputs are treated as strings
first += '';
second += '';
@donbrae
donbrae / Reactive UI with Proxy object.html
Last active March 8, 2023 08:24
Reactive UI with Proxy object
<!DOCTYPE html>
<html lang="en">
<head>
<title>Reactive UI with Proxy object</title>
</head>
<body>
<!-- Comment which got me thinking: https://news.ycombinator.com/item?id=35062021 -->
<p>Count:
<span id="count"></span>
</p>
@donbrae
donbrae / Useful regular expressions.md
Last active April 8, 2024 10:58
Some regular expressions for finding patterns in text.
  • Find all references to filenames ending in .js: [^ ]+\.js
  • Find all blank lines: ^\r?\n\r?
  • Wildcard (any character and newlines): (.|\n)+?
    • Eg find all <td>s, regardless of content: <td>(.|\n)+?</td>
      • Include attribute(s): <td(.|\n)+?>(.|\n)+?</td>
  • Convert getComputedStyle(foot1).left to foot1.getBoundingClientRect().x: find getComputedStyle\((.+?)\).left and replace it with $1.getBoundingClientRect().x
  • Remove all <a> tags, leaving just the anchor tag text: find <a[^>]*>(.*?)</a> and replace with $1
    • Only links that start with the string /foo: <a href="/foo[^>]*>(.*?)</a>
  • Find all URLs: \b(https?):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|]
    • All URLs ending in .jpg: \b(https?):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|](\.jpg)
@donbrae
donbrae / Apple Music desktop keyboard shortcuts.md
Last active July 6, 2022 18:58
Basic but useful keyboard shortcuts for the Apple Music macOS desktop client, with the ex-Spotify user in mind.
  • Command + L: go to the current song
    • I use this when I’m listening to something and searching for something else, and then want to get back to the currently playing song in the context in which I started playing it (e.g. from an album or playlist)
  • Command + F: search
    • Similar to Command + L or Command + K in Spotify
  • Command + Option + F: find in playlist
    • Similar to Spotify’s Filter function
  • Command + [: go back (à la Safari)
  • Doesn’t work universally, or at least not like it does in Safari or Spotify
@donbrae
donbrae / Basic Adobe Illustrator keyboard shortcuts.md
Last active July 16, 2022 15:41
Useful keyboard shortcuts for Illustrator.
  • V: Selection tool
  • A: Direct Selection tool (more fine-grained selection)
  • Command + U: Smart Guides snapping on/off
  • Command + G: group selected objects
  • Command + Shift + G: ungroup selected objects
  • Tab: show/hide panels and other UI elements
  • Command + Shift + /: search all menu items (this works in all native Mac apps)
  • Command + `: cycle through tabs
  • Command + Option + P > Edit Artboards: resize drawing canvas. Drag to required size then hit Escape
@donbrae
donbrae / cool-bg-color-gradient.css
Last active July 8, 2022 08:02
Cool background gradient from https://getbootstrap.com.
.foo {
--color0: 214, 51, 132; /* --bd-pink-rgb */
--color1: 255, 255, 255; /* --bs-white-rgb */
--color2: 13, 110, 253; /* --bs-primary-rgb */
--color3: 255, 228, 132; /* --bd-accent-rgb */
--color4: 112.520718, 44.062154, 249.437846; /* --bd-violet-rgb */
background-image: linear-gradient(
180deg,
rgba(var(--color1), 0.01),
rgba(var(--color1), 1) 85%
@donbrae
donbrae / getType.js
Last active July 6, 2022 19:02
Get type of object.
// Source: https://github.com/cferdinandi/reef/commit/20e47e2b6e797e5201da1d8b2e7fb02504a25c6f#diff-26a6046c932328aabcf6b2db468298d6958105007730a04f6e1b942d7d916f07R43-R50
function getType(obj) {
return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
}
@donbrae
donbrae / highlight-string.html
Last active July 5, 2022 11:47
Some JavaScript for finding and highlighting a string on the page.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Highlight element</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Find and highlight string" />
<style type="text/css">
html {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue;
@donbrae
donbrae / js-getelements-perf-test.txt
Last active July 17, 2022 12:25
`getElementById` vs `querySelector` vs `getElementsByClassName` vs `getElementsByName` vs `getElementsByTagName`.
https://measurethat.net/Benchmarks/ShowResult/170533
Test name | Executions per second
-----------------------------------------------
getElementById | 9,737,553 ops/sec
getElementsByName | 6,090,861 ops/sec
querySelector | 5,577,396 ops/sec
getElementsByTagName | 4,900,635 ops/sec
getElementsByClassName | 4,736,003 ops/sec
@donbrae
donbrae / loop.js
Last active July 17, 2022 12:25
Basic looping in JavaScript.
// Loop array
const foo = ["ane", "twa", "three"];
foo.forEach(item => console.log(item));
// Loop DOM elements
document.querySelectorAll('.foo').forEach(el => {
el.classList.add('bar'); // Add class, for example
});