Rik rikschennink

## observe.js
// Elements with `data-observe` toggle `data-visible`
// between `true` and `false`

if ('IntersectionObserver' in window) {
  const callback = (entries, observer) => {
    entries.forEach(entry => {
      entry.target.setAttribute('data-visible', entry.isIntersecting)
    })
  }


## observer.js
/**
 * Used for inter-object communication.
 * (Semi-)drop in replacement for Rik Schennink's Observer.
 *
 * Implementation differences:
 * - ES6
 * - The use of WeakMaps
 * - inform() and conceal() don't return a boolean indicating success.
 * - Subscription fn's are called with seperate arguments, instead of one data parameter. This is backwards compatible.
 *

## visually-hidden.css
/**
 * = Visually Hide text
 *
 * Text remains accessible to AT such as Screen Readers
 * Updated version:
 * Taken from http://hugogiraudel.com/2016/10/13/css-hide-and-seek/
 *
 * ------------------------------------------------------------------------- */
.visually-hidden {
  border: 0 !important;

## functional-composition-with-functor-map.js
//  add :: Number -> Number -> Number
var add = function(left) { return function(right) { return left + right } };

//  multiply :: Number -> Number -> Number
var multiply = function(left) { return function(right) { return left * right } };

//  map :: (a -> b) -> Functor a -> Functor b
var map = function(fn, val) { return val.map(fn) };

//

## what-forces-layout.md

      
              1 file
            
          
              806 forks
            
          
              106 comments
            
          
              8069 stars
            
          
                paulirish
                / what-forces-layout.md
            
            
              Last active
              April 19, 2024 14:42
            
              
                What forces layout/reflow. The comprehensive list.
              
          
    What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.
Element APIs

Getting box metrics


elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent


## index.html
<!doctype html>
<html>
<head>
    ...
    <script>
        (function(d){
            if (!('querySelector' in d && 'addEventListener' in window)) return;
            d.documentElement.className += ' has-js';
            d.addEventListener('DOMContentLoaded', function() {
                var s = d.createElement('script');

## pragmatic-touch-icons.md

      
              1 file
            
          
              7 forks
            
          
              8 comments
            
          
              122 stars
            
          
                davidhund
                / pragmatic-touch-icons.md
            
            
              Last active
              September 4, 2020 15:42
            
              
                Pragmatic Touch Icons
              
          
    NOTE I'm trying to find the most optimal fav/touch icon setup for my use-cases. Nothing new here. Read Mathias Bynens' articles on re-shortcut-icon and touch icons, a FAQ or a Cheat Sheet for all the details.
I'd like to hear how you approach this: @valuedstandards or comment on this gist.
The issue

You have to include a boatload of link elements pointing to many different images to provide (mobile) devices with a 'favicon' or 'touch icon':
![Touch Icon Links](https://o.twimg.com/2/proxy.jpg?t=HBj6AWh0dHBzOi8vcGhvdG9zLTYuZHJvcGJveC5jb20vdC8yL0FBRGFGY1VRN1dfSExnT3cwR1VhUmtaUWRFcWhxSDVGRjNMdXFfbHRJWG1GNFEvMTIvMjI3OTE2L3BuZy8xMDI0eDc2OC8yL18vMC80L1NjcmVlbnNob3QlMjAyMDE1LTA0LTE0JTIwMTYuNTYuMjYucG5nL0NNejBEU0FCSUFJZ0F5Z0JLQUkvNGR1eDZnMzZmYnlzYWI3

  
## html-escape.md

      
              1 file
            
          
              5 forks
            
          
              2 comments
            
          
              29 stars
            
          
                WebReflection
                / html-escape.md
            
            
              Last active
              August 21, 2022 16:27
            
              
                How to escape and unescape from a language to another
              
          
    update
I've created a little repository that simply exposes the final utility as npm module.
It's called html-escaper

there is basically one rule only: do not ever replace one char after another if you are transforming a string into another.

  
## DropboxIgnore.md

      
              1 file
            
          
              11 forks
            
          
              9 comments
            
          
              72 stars
            
          
                idleberg
                / DropboxIgnore.md
            
            
              Last active
              June 4, 2023 12:02
            
              
                Ignore node_modules/bower_components folders in your Dropbox
              
          
    This script scans your Dropbox (or any given folder) for folders stored in the ignore array and excludes them from syncing. Makes use of the official Dropbox CLI
I'm a beginner at bash, so all improvements are welcome!
#!/bin/bash

set -e

# SETTINGS

  
## sm-annotated.html
<script type="text/javascript">
    (function () {
      "use strict";
      // once cached, the css file is stored on the client forever unless
      // the URL below is changed. Any change will invalidate the cache
      var css_href = './index_files/web-fonts.css';
      // a simple event handler wrapper
      function on(el, ev, callback) {
        if (el.addEventListener) {
          el.addEventListener(ev, callback, false);
	// Elements with `data-observe` toggle `data-visible`
	// between `true` and `false`

	if ('IntersectionObserver' in window) {
	const callback = (entries, observer) => {
	entries.forEach(entry => {
	entry.target.setAttribute('data-visible', entry.isIntersecting)
	})
	}
	/**
	* Used for inter-object communication.
	* (Semi-)drop in replacement for Rik Schennink's Observer.
	*
	* Implementation differences:
	* - ES6
	* - The use of WeakMaps
	* - inform() and conceal() don't return a boolean indicating success.
	* - Subscription fn's are called with seperate arguments, instead of one data parameter. This is backwards compatible.
	*
	/**
	* = Visually Hide text
	*
	* Text remains accessible to AT such as Screen Readers
	* Updated version:
	* Taken from http://hugogiraudel.com/2016/10/13/css-hide-and-seek/
	*
	* ------------------------------------------------------------------------- */
	.visually-hidden {
	border: 0 !important;
	// add :: Number -> Number -> Number
	var add = function(left) { return function(right) { return left + right } };

	// multiply :: Number -> Number -> Number
	var multiply = function(left) { return function(right) { return left * right } };

	// map :: (a -> b) -> Functor a -> Functor b
	var map = function(fn, val) { return val.map(fn) };

	//
	<!doctype html>
	<html>
	<head>
	...
	<script>
	(function(d){
	if (!('querySelector' in d && 'addEventListener' in window)) return;
	d.documentElement.className += ' has-js';
	d.addEventListener('DOMContentLoaded', function() {
	var s = d.createElement('script');
	<script type="text/javascript">
	(function () {
	"use strict";
	// once cached, the css file is stored on the client forever unless
	// the URL below is changed. Any change will invalidate the cache
	var css_href = './index_files/web-fonts.css';
	// a simple event handler wrapper
	function on(el, ev, callback) {
	if (el.addEventListener) {
	el.addEventListener(ev, callback, false);