arn4v

@import 'styles/variables.scss';
@import 'styles/mixins.scss';

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  @include smooth-font-rendering;
}

arn4v

type AnyPromiseFunction = (...params: any[]) => Promise<any>;

export function withPerformanceMonitoring<
  T extends AnyPromiseFunction,
  ReturnAwaited = Awaited<ReturnType<T>>
>(name: string, func: T): T {
  const wrapped = async (...params: Parameters<T>): Promise<ReturnAwaited> => {
    const timerName = `Loader performance: ${name}`;

    console.time(timerName);

arn4v

arn4v

Roadmap

Currently focussing on table-stakes.

Editor Interface

• Project settings
  • Frame rate
  • Aspect ratio
• [🚧] Asset Manager

arn4v

const getVideoThumbnails = (src: string) => {
	let w: number, h: number;
	const aspectRatioDivisionMultiple = 2.5;
	let screenshotCount = 0;
	const screenshots: string[] = [];
	const canvas = document.createElement("canvas");
	const video = document.createElement("video");
	video.autoplay = false;
	video.muted = true;
	video.src = src;

arn4v

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "title": "Generated schema for Root",
  "type": "object",
  "properties": {
    "port": {
      "type": "number"
    },
    "db": {
      "type": "object",

arn4v

const sizeToTimeEstimate = {
  xs: 1,
  s: 2,
  m: 4,
  l: 12,
  xl: 24,
};

const timeMap = Object.entries(
  Array.from(

arn4v

Option A

import { Tabs } from "ui-library";
import { css } from "ui-library/stitches.config";
import { useRouter } from "next/router";

export function OptionA() {
  const router = useRouter();

arn4v

/* Ultra lightweight Github REST Client */
// original inspiration via https://gist.github.com/v1vendi/75d5e5dad7a2d1ef3fcb48234e4528cb
const token = 'github-token-here'
const githubClient = generateAPI('https://api.github.com', {
  headers: {
    'User-Agent': 'xyz',
    'Authorization': `bearer ${token}`
  }
})

arn4v

const { renderToStaticMarkup } = require("react-dom/server.node");
const { createElement } = require("react");
const { default: Jazzicon, jsNumberForAddress } = require("react-jazzicon");
const { JSDOM } = require("jsdom");

const el = createElement(Jazzicon, {
  diameter: 100,
  seed: Math.round(Math.random() * 10000000),
});