Skip to content

Instantly share code, notes, and snippets.

@c-kick
c-kick / zha_ikea_tradfri_4button_remote_color.yaml
Last active Sep 7, 2022 — forked from orcema/zha_ikea_tradfri_4button_remote_color.yaml
blueprint zha_ikea_tradfri_4button_remote_color
View zha_ikea_tradfri_4button_remote_color.yaml
blueprint:
name: ZHA - IKEA TRADFRI - 4 Button Remote - Color Lights
description: This automation simulates the use of the IKEA TRADFRI remote control
connected through ZHA. Original blueprint by orcema, modified by hnldesign/c-kick,
- added brightness and color control inputs (for usage with IKEA TRADFRI bulbs)
- more fine-grained dimming
- color_temp changing
domain: automation
input:
remote:
@c-kick
c-kick / hnl.stickyStuck
Created Jun 21, 2022
adds class 'stuck' to elements that are stuck. Uses Bootstraps' `position-sticky` class as a selector.
View hnl.stickyStuck
const stickes = document.body.querySelectorAll('.position-sticky');
window.addEventListener('scroll', function(){
stickes.forEach(function(el){
el.classList.toggle('stuck', el.getBoundingClientRect().top === parseInt(window.getComputedStyle(el).top, 10));
});
});
@c-kick
c-kick / hnl.setBreakpoints.js
Last active Mar 23, 2022
setBreakpoints - Adds the current breakpoint-name (as specified in the 'breakpoints' const) to the body class and notifies anyone listening of the change via the 'breakPointChanged' event.
View hnl.setBreakpoints.js
/** This script adds the current breakpoint-name (as specified in the 'breakpoints' const)
* to the body class and notifies anyone listening of the change via the 'breakPointChanged' event.
*
* Default breakpoint names and cutoff pixel values taken from Bootstrap 5's default responsive breakpoints:
* https://getbootstrap.com/docs/5.0/layout/breakpoints/
*
* Usage:
* - include the script into your page and the class is updated, and will continue to update whenever
* the width of the window changes enough to trigger another breakpoint.
* - optionally listen for the event via:
@c-kick
c-kick / csp-generator.php
Last active Dec 10, 2020
Generates a Content Security Policy using easy definable arrays. See code docs for example.
View csp-generator.php
/**
* CSP Generator v0.2 (C) 2020-10-12 hnldesign.nl / Klaas Leussink
* @param array $rules
* Rules, specified as an array with rulesets (array) or rules (string). Note that 'hosts' are specified as an array inside the ruleset:
* note: it's easier to define hosts in the $domains array (see second param)
* array(
* 'default-src' => array (
* 'self',
* 'data',
* 'unsafe-eval',
@c-kick
c-kick / hnl.debounce.v4.js
Last active Aug 19, 2022
JavaScript function prototype debouncer v4.1 - debounces functions that are prone to repetitive calling (on events such as mousewheel, orientationchange, resize, etc). Demo: https://code.hnldesign.nl/demo/hnl.debounce.html
View hnl.debounce.v4.js
/**
* JavaScript function prototype debouncer 4.2 - 2010-2021 hnldesign.nl - Klaas Leussink
* Demo: https://code.hnldesign.nl/demo/hnl.debounce.html
*
* Based on code by Paul Irish and the original debouncing function from John Hann
* http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
* Register deBouncer as a function prototype.
*
* All debounced variants of the function (depending on the supplied debouncing parameters (see below)
* are stored inside a 'dbObj' Object inside the debounced function.
@c-kick
c-kick / hnl.doubleClickTap.js
Created Oct 14, 2020
This jQuery script enables doubleclick and doubletap (mobile) behaviour, without the need for global variables. It does not rely on jQuery’s ‘dblclick’ handler, but needs to be binded to the regular ‘click’ event.
View hnl.doubleClickTap.js
$(document).on('click', '#MyDoubleClickElement', function () {
var t = $(this), doubleClickInterval = 500; //set up base vars
var lastTouch = t.data('lastTouch') || 0, time = new Date().getTime(); //check when this element has been clicked last
t.data('lastTouch', time); //store this click time
if (time - lastTouch < doubleClickInterval && lastTouch !== 0) { //check if time between this and previous click exceeds the threshhold. If there is no last click registered, don't handle the callback
//do your stuff here (execute a callback)
alert("Double click!");
}
});
@c-kick
c-kick / hnl.checkStuck.js
Created Oct 14, 2020
This small jQuery function checks if elements that are positioned as sticky (position: sticky;) are, in fact, in their ‘stuck’ position. It’s a very simple check where the script checks if the element’s position is equal to its ‘top’ CSS variable. If it is, it adds the class you specify (argument className), and if not, removes it.
View hnl.checkStuck.js
$.fn.checkStuck = function (className) {
$(this).each(function() {
var t = $(this); //preselect
t.toggleClass(className, (parseInt(t.css('top'), 10) === t[0].getBoundingClientRect().top));
});
}
@c-kick
c-kick / hnl.debounce.v3.js
Last active Nov 23, 2020
JavaScript function prototype debouncer v3.0 - debounces functions that are prone to repetitive calling (on events such as mousewheel, orientationchange, resize, etc)
View hnl.debounce.v3.js
/**
*
*
* DEPRECATED, SEE NEW VERSION AT https://gist.github.com/c-kick/d359fce36257cf4c9fb5ea5f2c0033b6
*
*
* JavaScript function prototype debouncer 3.0 - hnldesign.nl
* Based on code by Paul Irish and the original debouncing function from John Hann
* http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
* Register deBouncer as a function prototype.
@c-kick
c-kick / hnl.prime.js
Last active Oct 14, 2020
Prime (progressive/responsive image enabler) is a JavaScript script I wrote, that allows for progressive and responsive image loading, potentially saving over 80% of a page's size and speed. See: http://www.hnldesign.nl/work/code/prime/
View hnl.prime.js
/*!
* PRIME - Progressive-Responsive Image Enabler - v2.2.10 - 8/10/2020
* http://code.hnldesign.nl/demo/hnl.prime.html
*
* Copyright (c) 2014-2020 HN Leussink
* Dual licensed under the MIT and GPL licenses.
*
* Example: http://code.hnldesign.nl/demo/hnl.prime.html
*
* Feature notes:
@c-kick
c-kick / hnl.mobileConsole.js
Last active May 28, 2022
NOTE: V2 Released! Seehttps://github.com/c-kick/mobileConsole hnl.mobileConsole.js - extends JavaScript's console to display a visual console inside the webpage. Very usefull for debugging JS on mobile devices with no real console. Info and demo: http://www.hnldesign.nl/work/code/mobileconsole-javascript-console-for-mobile-devices/
View hnl.mobileConsole.js
/*!
*
* NEW VERSION AT https://github.com/c-kick/mobileConsole
*
* hnl.mobileConsole - javascript mobile console - v1.3.8 - 04/01/2021
* Adds html console to webpage. Especially useful for debugging JS on mobile devices.
* Supports 'log', 'trace', 'info', 'warn', 'error', 'group', 'groupEnd', 'table', 'assert', 'clear'
* Inspired by code by Jakub Fiala (https://gist.github.com/jakubfiala/8fe3461ab6508f46003d)
* Licensed under the MIT license
*