Skip to content

Instantly share code, notes, and snippets.

View lebbe's full-sized avatar

Lars-Erik Bruce lebbe

View GitHub Profile
@lebbe
lebbe / useDraggable.ts
Last active November 24, 2021 20:54
A react hook for making draggable components
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
lebbe / useLazyload.tsx
Last active October 12, 2021 16:24
Lazyload react hook
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
lebbe / kolonial_sortering.js
Created March 20, 2017 10:57
Sorter varer på kolonial.no.
/**
* 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
lebbe / basicServer.js
Last active August 29, 2015 14:21
Creating a basic web-app in express+family
/*
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
lebbe / twitter-miner.js
Last active August 29, 2015 14:15
Poor mans twitter mining tool
/* Write out for months. */
var dates = [];
$('.js-stream-item ._timestamp').each(function() {
dates.push(new Date($(this).data('time-ms')));
});
var data = {};
@lebbe
lebbe / weird.js
Created December 4, 2014 13:04
Recursive DOM node promises stuff
/**
*
*/
function promiseNode(name, attributes) {
/**
*
*/
return function (content, beforeInsideOrAfter) {
var start = '<' + name;
var end = '</' + name + '>';
@lebbe
lebbe / psyche.js
Created October 7, 2014 13:09
Transform any web-page into a psychedelic experience
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];
}
/**
* Detects whether the PDF.js Chromium extension is installed in the browser.
* Example: isPDFJSExtensionInstalled(function(result) { alert('Is PDF.js installed? ' + result);});
*
* @param {function(boolean)} callback - Called when the detection completed.
*
* Author: Rob Wu <rob@robwu.nl> (https://robwu.nl)
*
* Made synchronous by a handwaiving Lebbe
*
@lebbe
lebbe / includeJquery.js
Created August 8, 2014 12:09
A little snippet to make sure that jQuery is loaded before running code.
(function($, callback) {
if($) {
callback();
return;
}
var script = document.createElement('script');
script.src = '//code.jquery.com/jquery-1.11.1.min.js';
script.onload = callback;
document.getElementsByTagName('body')[0].appendChild(script);
})(window['jQuery'], function() {
@lebbe
lebbe / har.html
Last active August 29, 2015 14:04
Create a simple overview over network resources with a HAR-file from chrome debugger.
<!DOCTYPE html>
<html>
<head>
<script src="test.har"></script>
<script type="text/javascript">
// Insert "var test = " at the very beginning of the HAR-file
var entries = test.log.entries;