lebbe

/**
 * This hook returns an URL you can use in the href-attribute of an anchor element,
 * so the provided string will be downloaded as a txt-file.
 */
function useTxtBlobifier(document: string) {
  const [loading, setLoading] = useState(true);
  const [url, setUrl] = useState('');

  // Remove the unused url instance if/when the document
  // changes, or when component unmounts.

lebbe

export default function mockLocation(
  href = 'http://www.platform.com/application/',
) {
  delete global.window.location;

  const url = new URL(href);

  const noop = () => {};

lebbe

#!/bin/bash

# Update all minor and patch versions of your own dependencies, and thereafter
# update all transitive dependencies. Use the JIRA-number as first and only argument.
# Put this, for instance, in /usr/bin and make it executable:
#
# sudo mv npmu /usr/bin/npmu
# sudo chmod 744 /usr/bin/npmu

if [ $# -lt 1 ]; then

lebbe

/**
 *Send in any js object, with strings as field values, and the keys and values will be shown
 * on screen as a "toast" for five seconds. I.e:
 *
 * showToast({
 *   action: 'This is a text',
 *   name: 'This is another text',
 * })
 *
 * will be shown as a toast on screen, with *action* and *name* with bold text, followed by

lebbe

/*
 * This is a handy tool when it comes to accessibility-proofing widgets on the web.
 * I use this whenever some element with focus is removed from the screen, and I
 * elsewise don't know which element should become focused.
 *
 * When we remove elements on the screen with focus, it is important that we give
 * another element focus instead, so that screen readers can inform the user that
 * something has happened, and so that keyboard navigation functions optimally.
 *
 * For more about operating a web-page with the keyboard and focus order, see

lebbe

/**
 * If you have links you want to open in a new browser window, but you are not
 * able to customize the link. Wrap a div around the group of links, and add
 * the returned ref as its property.
 *
 * If you have clickable elements within the link that should not be handled as
 * a navigation, you should put this property on the element:
 *
 * ```
 * onClickCapture={(e) => e.preventDefault()}

lebbe

A simple React hook for toggling something on and off with a bookmark link. If the feature is only meant for internal testing etc, this hook makes it "safe" to release a feature into production without letting end users see it. (Of course, nerdy developers with development tools will be able to find it.)

You can use a simple javascript:url as a bookmarklet that triggers a custom event. The name of the event shoud be identical with the featureName in the code below:

Drag this link to the bookmarks bar to toggle Fancy Feature in our product:

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).