lebbe

Mock latency without setTimeout

I needed to test the presence of a "loading-indicator" in a widget that posted data. Usually I would have done this with window.setTimeout or something similar: The timeout simulates the time it takes to complete the network call. But I find that running the whole test suite for my application takes a long time, and I wanted to avoid these arbitrary timeout lengths.

Instead I wanted more control of when the loading is done: What if I could hold onto the "loading"-phase in the application until the exact moment I was done checking the presence

lebbe

<Table data={data} columns={columns} />

lebbe

When relying on an object in useEffect dependency array

I found this method the best, to ensure that the object is actually different. The "compareObjects" function doesn't have to nest deep in this example, because the object is restricted to only have strings as field-values (this is not checked in runtime, mind you).

lebbe

import { throttle } from 'lodash'
import { useEffect, useRef, useState } from 'react'

export type DraggableProps = {
    onMouseDown: (e: React.MouseEvent) => void
    style: { top: number; left: number }
}

export default function useDraggable(): DraggableProps {
    const [mouseDown, setMouseDown] = useState(false)

lebbe

import { useEffect, useRef, useState } from 'react';

/**
 * This hook uses the browsers native lazy load functionality for images, if present.
 * If not, it uses the IntersectionObserver as a fallback, and make sure the browser
 * load the image when it is within 500px to the viewport.
 * If the browser neither supports lazy loading of images, nor IntersectionObserver, it
 * will fallback to just loading the image straight away.
 *
 * It is super-easy to use. Just spread the hook into the <img>-tag:

lebbe

/**
 * Dette programmet sorterer varer på kolonial.no.
 * Du må gå helt inn i en spesifikk kategori før du starter sorteringen.
 *
 * Kjør programmet ved å åpne opp utviklerverktøy, og lim koden inn i konsollet.
 * Når du vil sortere en annen kategori senere, holder det å trykke "Pil opp"
 * og så "Enter" for å sortere på nytt.
 *
 * ALL BRUK GJØRES PÅ EGET ANSVAR. Denne koden er med vilje IKKE gjort om til
 * noen browser-plugin. Med en gang kolonial.no gjør kode-endringer kan dette

lebbe

/*

This is the most basic setup you need in express 4 for listening on POST and GET.

*/
var express = require('express');
var bodyParser = require('body-parser');

var app = express();

lebbe

/* Write out for months.  */

var dates = [];


$('.js-stream-item ._timestamp').each(function() {
	dates.push(new Date($(this).data('time-ms')));
});

var data = {};

lebbe

	/**
	 *
	 */
	function promiseNode(name, attributes) {
		/**
		 *
		 */
		return function (content, beforeInsideOrAfter) {
			var start = '<' + name;
			var end = '</' + name + '>';

lebbe

window.setInterval(function() {
	var levelColors = [], m = Math;

	function getLevelColor(level) {
		if(levelColors[level] === undefined) {
			levelColors[level] = (m.PI * m.random()).toString(16).slice(-2);
		}
		return levelColors[level];
	}