ultrox

import { createFactory, Component } from 'react'

export const withContext = (childContextTypes, getChildContext) => BaseComponent => {
  const factory = createFactory(BaseComponent)
  class WithContext extends Component {
    getChildContext = () => getChildContext(this.props)

    render() {
      return factory(this.props)
    }

ultrox

Stuff I did

Here is some of the stuff I did over the years

Video

• Understand 'this' in js

Open Source

• axa: Generator for utilities
• blog: Fixing layout shift caused by fonts
• blog: Add Minimal Dark mode

ultrox

module Main exposing (..)


type alias Bar =
    { baz : String }


type alias Foo =
    { bar : Bar }

ultrox

module Main exposing (..)
-- This code needs following dependencies: 
-- elm/browser 1.0.2
-- elm/html 1.0.0
-- elm/http 2.0.0
-- elm/json 1.1.3
-- elm/random 1.0.0
-- krisajenkins/remotedata 6.0.1
-- NoRedInk/elm-json-decode-pipeline/ 1.0.1
-- Can try it here: https://ellie-app.com/nBCdHpv2jRta1

ultrox

{-
I got frustrated about how Http.get works, so I expanded all the function in Elm core to get to the bottom of line
-}
expectJson : (Result Error a -> msg) -> Decode.Decoder a -> Expect msg
expectJson toMsg decoder =
  let
    decodingResult string =
      case (Decode.decodeString decoder string) of
        Ok v ->
          Ok v

ultrox

-- This is from https://www.linkedin.com/learning/learning-sql-programming-8382385/
-- There where no postgres so I adjusted it to work strait up.

CREATE TABLE states (
	state_name	VARCHAR(50),
	state_abbrev	CHAR(2),
	region	         VARCHAR(50),
	division	VARCHAR(50)
);

ultrox

import type { PathLike } from "fs";
import fs from "fs";
import path, { parse } from "path";
import * as E from "fp-ts/lib/Either";
import { pipe } from "fp-ts/function";
import { object } from "firebase-functions/v1/storage";
import { objectHasProp } from "~/lib/utils";
import * as IE from "fp-ts/IOEither";

main();

ultrox

Flexbox Emmet Expansions

display

expansion: d:f, df:
display: flex;

flex-direction

expansion: fxd:r, fxdr:

ultrox

:root {
    --none: linear(0, 1);
    --power1-in: linear( 0, 0.0039, 0.0156, 0.0352, 0.0625, 0.0977, 0.1407, 0.1914, 0.2499, 0.3164, 0.3906 62.5%, 0.5625, 0.7656, 1 );
    --power1-out: linear( 0, 0.2342, 0.4374, 0.6093 37.49%, 0.6835, 0.7499, 0.8086, 0.8593, 0.9023, 0.9375, 0.9648, 0.9844, 0.9961, 1 );
    --power1-in-out: linear( 0, 0.0027, 0.0106 7.29%, 0.0425, 0.0957, 0.1701 29.16%, 0.2477, 0.3401 41.23%, 0.5982 55.18%, 0.7044 61.56%, 0.7987, 0.875 75%, 0.9297, 0.9687, 0.9922, 1 );
    --power2-in: linear( 0, 0.0014 11.11%, 0.0071 19.24%, 0.0188 26.6%, 0.037 33.33%, 0.0634 39.87%, 0.0978 46.07%, 0.1407 52.02%, 0.1925 57.74%, 0.2559 63.49%, 0.3295 69.07%, 0.4135 74.5%, 0.5083 79.81%, 0.6141 85%, 0.7312 90.09%, 1 );
    --power2-out: linear( 0, 0.2688 9.91%, 0.3859 15%, 0.4917 20.19%, 0.5865 25.5%, 0.6705 30.93%, 0.7441 36.51%, 0.8075 42.26%, 0.8593 47.98%, 0.9022 53.93%, 0.9366 60.13%, 0.963 66.67%, 0.9812 73.4%, 0.9929 80.76%, 0.9986 88.89%, 1 );
    --power2-in-out: linear( 0, 0.0036 9.62%, 0.0185 16.66

ultrox

// Simple
type Prettify<T> = {
  [K in keyof T]: T[K]
} & {}

// Recursive
type Prettify<T> = T extends {} ? {
  [K in keyof T]: Prettify<T[K]>
} & {} : T