loklaan

Common HTML element reference

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

---

loklaan

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "default": {
    "pages": [
      {
        "url": "/my-url/",
        "is_indexable": true
      }
    ]

loklaan

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

loklaan

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

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

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

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

/*
|-------------------------------------------------------------------------------
| 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

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

function build_pack () {
  echo "Building & packing \"$(basename $(pwd))\"" && \

  yarn build && npm pack && \

  echo "Packed! Bai!"
}

function link_pack () {
  package_name="${1:?required}"