ycmjason

Time	Events
50 million years ago	The Giant’s Causeway was formed. Located on the north-east coast of Northern Ireland, the Giant’s Causeway is a land formation of columns made from volcanic lava.

ycmjason

Reasons to hate safari as a frontend developer / Why Safari is the new IE

This is an on-going list of things that I constantly find missing in Safari, (and possibly ways to work around them)

RegExp Positive/Negative Lookbehind

I cannot believe my eyes when positive/negative lookbehind is still not available on safari. Here is how you can work around it:

Instead of

ycmjason

const routes = [
  {
    path: '/',
    element: <App />,
    errorElement: <CircularProgress />,
    children: [
      {
        index: true,
        element: <LandingPage />,
      },

ycmjason

<script lang="ts">
import { computed, PropType, defineComponent } from 'vue';
import { RouterLink, useLink } from 'vue-router';
import type { RouterLinkProps } from 'vue-router';

declare module 'vue-router' {
  interface _RouterLinkI {
    props: {
      [k in keyof RouterLinkProps]-?: {
        type: PropType<RouterLinkProps[k]>;

ycmjason

export const groupBy = <X, K extends PropertyKey>(
  getKey: (x: X) => K,
  xs: readonly X[],
): { readonly [k in K]?: readonly (X | undefined)[] } => {
  const grouped: { [k in K]?: (X | undefined)[] } = {};

  for (const x of xs) {
    const key = getKey(x);
    grouped[key] ??= [];
    // we have initialised ^ so grouped[key] won't be undefined

ycmjason

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

ycmjason

type OmitRecursive<T extends object, O extends string> = Omit<
  { [K in keyof T]: T[K] extends object ? OmitRecursive<T[K], O> : T[K] },
  O
>

const removeKeysRecursive = <T extends object, K extends readonly string[]>(
  object: T,
  keys: K,
): OmitRecursive<T, K[number]> => {

ycmjason

This file contains some config files.

ycmjason

export const requestAnimationFrameRecursive = (
  fn: (
    highResTimestamp: DOMHighResTimeStamp,
    additionalInfo: {
      stop: () => void;
      totalTimelapse: DOMHighResTimeStamp;
      timelapseSinceLast: DOMHighResTimeStamp;
    },
  ) => void,
  o?: {

ycmjason

<div ref="container">
  <Card v-for="(card, i) of cards" ref="cards">
    <IntersectionObserver :getTarget="() => this.$refs.cards[i]" @intersect="liftCard" @disintersect="unliftCard" />
    ...
  </Card>
</div>


<!-- vs -->
<div ref="container">