Skip to content

Instantly share code, notes, and snippets.

View lebbe's full-sized avatar

Lars-Erik Bruce lebbe

View GitHub Profile
@lebbe
lebbe / useTxtBlobifier.tsx
Created September 5, 2023 16:03
React hook for turning a string into a downloadable txt-file
/**
* 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
lebbe / mock.location.js
Created August 7, 2023 14:18
Location mocker (for use with jest or other test tools)
export default function mockLocation(
href = 'http://www.platform.com/application/',
) {
delete global.window.location;
const url = new URL(href);
const noop = () => {};
@lebbe
lebbe / npmu
Last active August 7, 2023 09:25
Automatically perform npm updates and make it a pull request
#!/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
lebbe / toast.js
Created May 22, 2023 12:56
Show a toast for five seconds, for debugging etc
/**
*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
lebbe / findPreviouslyFocusableElement.js
Created January 31, 2023 11:32
Find previous focusable sibling
/*
* 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
lebbe / useOpenLinkInNewWindow.ts
Last active January 13, 2023 15:56
Open link in new window via a hook
/**
* 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
lebbe / 01useFeatureToggle.md
Last active January 13, 2023 11:59
A hook for simple bookmarked-based feature toggling

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
lebbe / Mock latency without setTimeout.md
Last active January 4, 2023 14:11
Mock latency without setTimeout

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

<Table data={data} columns={columns} />
@lebbe
lebbe / Readme.md
Last active May 23, 2022 11:50
Object as dependency in a useEffect

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