jakearchibald

Fun with Mutation Observers

I’ve been having a play around with Mutation Observers this morning, trying to work out when notifications happen and what happens when removing a node that was just added.

If you’re unfamiliar with Mutation Observers, they let you receive notifications when an element, or elements, have been modified in a particular way (here's an intro to Mutation Observers from Mozilla).

Observing mid-parsing

Consider this:

efedorenko

// Turns out this function already exists in Sass: mix(fg, bg, %) (http://d.pr/mGqa)

// Alpha blending

@function blend($bg, $fg) {

	$r:   red($fg) * alpha($fg) +   red($bg) * (1 - alpha($fg));
	$g: green($fg) * alpha($fg) + green($bg) * (1 - alpha($fg));
	$b:  blue($fg) * alpha($fg) +  blue($bg) * (1 - alpha($fg));

jklein

# -*- mode: ruby -*-
# vi: set ft=ruby :

# Vagrantfile API/syntax version. Don't touch unless you know what you're doing!
VAGRANTFILE_API_VERSION = "2"

Vagrant.configure(VAGRANTFILE_API_VERSION) do |config|
  # All Vagrant configuration is done here. The most common configuration
  # options are documented and commented below. For a complete reference,
  # please see the online documentation at vagrantup.com.

threepointone

// inifinite scrolling of content without extra wrappers 
const { render, findDOMNode  } = ReactDOMFiber

class App extends React.Component {
  render() {
  // wrap the root element with an Intersection Observer, exposing .observe for children
    return <Intersection>
      <div style={{ height: 200, overflow: 'auto' }}>
        <Page offset={0} count={10} />
      </div>

timkelty

# Note that while this file is in our config folder, it is
# symlinked to our site folders, so paths are relative from there

# Require gems and Compass plugins
# require 'rgbapng'
# require 'compass-fancybox-plugin'
require 'compass-growl'

# General
output_style = :expanded

connrs

if (!document.querySelectorAll) {
    document.querySelectorAll = function(selector) {
        var doc = document,
            head = doc.documentElement.firstChild,
            styleTag = doc.createElement('STYLE');
        head.appendChild(styleTag);
        doc.__qsaels = [];

        styleTag.styleSheet.cssText = selector + "{x:expression(document.__qsaels.push(this))}";
        window.scrollBy(0, 0);

westonruter

<?php
/*
Usage:
	cache_fragment_output( 'unique-key', 3600, function () {
		functions_that_do_stuff_live();
		these_should_echo();
	});
*/

function cache_fragment_output( $key, $ttl, $function ) {

RichardLitt

How To Deprecate A Repository on GitHub

A simple checklist for deprecating a repository. See https://github.com/RichardLitt/knowledge/blob/master/how-to-deprecate-a-repository-on-github.md.

Deprecating a project no one uses

• Change the GitHub description. This is often the first thing people see for the repository, and the first line that people will see if looking at the repository in the Organization view. The most important thing to do is to add the word DEPRECATED at the front of the description. This clearly marks it will not be updated. You can also add an emoji to it. ⛔️ DEPRECATED <former description> makes it pop out a bit more.
• Add GitHub topics: deprecated, obselete, and archived are all good ones.
• Edit the title of the README. Remove the current title, and instead write # DEPRECATED.

scottjehl

/*!
 An experiment in getting accurate visible viewport dimensions across devices
 (c) 2012 Scott Jehl. 
 MIT/GPLv2 Licence
*/

function viewportSize(){
	var test = document.createElement( "div" );

	test.style.cssText = "position: fixed;top: 0;left: 0;bottom: 0;right: 0;";

bendc

// array utils
// =================================================================================================

const combine = (...arrays) => [].concat(...arrays);

const compact = arr => arr.filter(Boolean);

const contains = (() => Array.prototype.includes
  ? (arr, value) => arr.includes(value)
  : (arr, value) => arr.some(el => el === value)