Skip to content

Instantly share code, notes, and snippets.

View loklaan's full-sized avatar
🐛
"You find the weirdest bugs 🎖" – Other Engineers

Lochlan Bunn loklaan

🐛
"You find the weirdest bugs 🎖" – Other Engineers
View GitHub Profile
@loklaan
loklaan / readme.md
Last active February 2, 2024 04:19
Using the ElementRef<> type util

Common HTML element reference

// BEFORE
const htmlRef = useRef<HTMLDivElement>()
// AFTER
const htmlRef = useRef<ElementRef<'div'>>() //     <-- such convenience

@loklaan
loklaan / pages_under_test.schema.json
Last active August 6, 2023 22:19
JSONSchema: Pages Under Test
{
"$schema": "http://json-schema.org/draft-07/schema#",
"type": "object",
"default": {
"pages": [
{
"url": "/my-url/",
"is_indexable": true
}
]
@loklaan
loklaan / machine.js
Last active June 2, 2021 23:52
Generated by XState Viz: https://xstate.js.org/viz
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
@loklaan
loklaan / hackz.js
Last active November 17, 2019 18:34
Hackz for DevShop
function productWorkWeek () {
/*
* On any good product day you start by drinking that sweet bean juice; oh the
* joys of a socially accepted chemical addiction hehe.
*/
startTheDayWithCoffee();
return function finishWorkWeekEarly () {
window.cancelAnimationFrame(window.savepointLolJokeThisIsRealLife);
}
@loklaan
loklaan / import-notes-to-evernote.scpt
Created May 30, 2018 01:03
Import Notes to Evernote
tell application "Notes"
set theMessages to every note
repeat with thisMessage in theMessages
set myTitle to the name of thisMessage
set myText to the body of thisMessage
set myCreateDate to the creation date of thisMessage
set myModDate to the modification date of thisMessage
@loklaan
loklaan / 2.element-styles.jsx
Created November 20, 2017 05:07
Brief showcase of all styling sources exposed by element-styles.
import { styled, StylesProvider } from 'element-styles'
// 1. Default styles
const defaults = {
container: { border: 'solid 3px currentColor', background: 'white' },
inner: { color: 'currentColor' }
}
@styled(defaults)
class Button extends Component { ... }
@loklaan
loklaan / 1.element-styles.jsx
Last active November 20, 2017 05:06
Essentials to element-styles: the styles function.
import { styled } from 'element-styles'
@styled()
class Button extends Component {
render () {
const { styles, children, ...props } = this.props;
return (
<button {...props} {...styles('container')}>
<span {...styles('inner')}>{children}</span>
@loklaan
loklaan / jest-resolver.js
Created October 20, 2017 00:03
Jest Resolver w/ module field support
/*
|-------------------------------------------------------------------------------
| Custom 'module resolver' for Jest
|-------------------------------------------------------------------------------
|
| Forked from Jest, this is the default 'resolver' with the added benefit of
| remapping the "main" field to the value of the "module" field, when present.
|
*/
@loklaan
loklaan / README.md
Last active May 8, 2018 06:13
svg.js meets Hitch Logo

SVG Animation Attempts

Approaches Taken

  1. Tried Wilderness - wasn't documented well enough
  2. Tried pure css @keyframes - animations too complex to express with abstraction
  3. Tried SVG SMIL - pretty good but Edge doesn't support
  4. Quickly tried svg libs that can animate & ease:
    • Attributes like fill, opacity, etc
  • Points from a path, eg. d attr
@loklaan
loklaan / build-pack-commands.sh
Last active March 12, 2019 03:55
Build, pack & link npm packages.
function build_pack () {
echo "Building & packing \"$(basename $(pwd))\"" && \
yarn build && npm pack && \
echo "Packed! Bai!"
}
function link_pack () {
package_name="${1:?required}"