KrofDrakula

import { useCallback, useEffect, useState } from 'react'

type UrlInput = Parameters<typeof fetch>[0]

type Overrides = {
  fetch?: typeof fetch
  onError?: (arg: unknown) => void
}

export const useRequest = <T>(url: UrlInput, overrides?: Overrides) => {

KrofDrakula

Run with deno:

deno task deps <path to source dir>

KrofDrakula

export const isAbortError = (err: unknown): err is Error =>
  (err as Error)?.name == 'AbortError'

export const abortableFetch = (
  url: RequestInfo | URL,
  options?: RequestInit | undefined,
  fetchImpl?: typeof fetch
): [promise: Promise<Response>, abort: (reason?: any) => void] => {
  const controller = new AbortController()
  options = { ...options, signal: controller.signal }

KrofDrakula

interface Set<T> {
  map: <V>(
    this: Set<T>,
    mapper: (this: Set<T>, value: T, index: number, set: Set<T>) => V
  ) => Set<V>;
  filter: (
    this: Set<T>,
    predicate: (this: Set<T>, value: T, index: number, set: Set<T>) => boolean
  ) => Set<T>;
  reduce: <V>(

KrofDrakula

Strategies for disabling autofill prompts in browsers

This document gathers possible mitigation strategies when dealing with browser or extension provided autofill suggestions that impact usability of a given website's UI and UX.

You should apply the least amount of workaround you can get away with, since it could affect the accessibility of your website when taken too far. Always verify your application with your intended audience in mind.

Disabling autofill with standard HTML attributes

• autocomplete="off"
• autocomplete="new-password"

KrofDrakula

export const fetchWithTimeout = (
  uri: RequestInfo,
  timeout: number,
  options: RequestInit = {}
): [Promise<Response>, () => void] => {
  const controller = new AbortController();
  const timer = setTimeout(controller.abort, timeout);
  const promise = fetch(uri, { ...options, signal: controller.signal });
  promise.finally(() => clearTimeout(timer));
  return [promise, controller.abort];

KrofDrakula

import { JSX } from 'preact';
import { useEffect, useState } from 'preact/hooks';

export const useAwait = <T,>(value: Promise<T>) => {
  const [isFulfilled, setFulfilled] = useState<boolean>(false);
  const [resolved, setResolved] = useState<T>(undefined);
  const [rejected, setRejected] = useState<any>(undefined);

  useEffect(() => {
    // tslint:disable-next-line: no-floating-promises

KrofDrakula

Navigation

Action	Keys
move view around	WASD / arrow keys / right click drag
rotate view	middle mouse drag
zoom view	scroll wheel

Interface

KrofDrakula

To calculate flat shading (an approximation that works well for small flat faces), you need:

• a vector pointing towards the light source from the center of the surface you want to shade,
• a vector representing the normal of the surface to be rendered.

The first one is easily calculated:

var faceCenter = [x1, y1, z1];
var light = [x2, y2, z2];

KrofDrakula

Rendering performance on WebKit

Please send any feedback on this article to Klemen Slavič

UPDATE: I'm currently in the process of updating the article, as my assumptions about the inner workings of WebKit are incorrect. I will update this article with the relevant facts and provide concrete information in place of my guesstimates below.

I've recently stumbled upon an interesting discovery regarding image rendering performance in most WebKit browsers. Namely, I've been developing a sprite animation component to implement a GIF animation replacement with better compression and performance, where I noticed that some animations appeared to be janky when using multi-frame spritesheets and clipping rectangles. Here's what I found out.

But first, a quick rundown of the basic functioning of the WebKit engine as I understand it.