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:

freem

/* NOTICE: THIS WAS MADE BACK IN 2017, OF COURSE IT'S NOT GOING TO WORK WELL NOW THAT TWITTER'S FUCKED THINGS UP */
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("twitter.com") {
  [data-component-context="suggest_recap"],
  [data-component-context="suggest_who_to_follow"],
  [data-component-context="suggest_activity"],
  [data-component-context="suggest_activity_tweet"],
  [data-component-context="suggest_recycled_tweet_inline"],
  [data-component-context="suggest_recycled_tweet"]{

graceavery

alias accio=wget
alias avadaKedavra='rm -f'
alias imperio=sudo
alias priorIncantato='echo `history |tail -n2 |head -n1` | sed "s/[0-9]* //"'
alias stupefy='sleep 5'
alias wingardiumLeviosa=mv

alias sonorus='set -v'
alias quietus='set +v'

ftrain

;; This is at: https://gist.github.com/8655399

;; So we want a rhyming dictionary in Clojure. Jack Rusher put up
;; this code here:
;; 
;; https://gist.github.com/jackrusher/8640437
;;
;; I'm going to study this code and learn as I go.
;;
;; First I put it in a namespace.

obskyr

// ==UserScript==
// @name        Jitai
// @version     1.3.2
// @description Display WaniKani reviews in randomized fonts, for more varied reading training.
// @author      Samuel (@obskyr)
// @copyright   2016-2018, obskyr
// @license     MIT
// @namespace   http://obskyr.io/
// @homepageURL https://gist.github.com/obskyr/9f3c77cf6bf663792c6e
// @icon        http://i.imgur.com/qyuR9bD.png

katowulf

// assumes you add a timestamp field to each record (see Firebase.ServerValue.TIMESTAMP)
// pros: fast and done server-side (less bandwidth, faster response), simple
// cons: a few bytes on each record for the timestamp
var ref = new Firebase(...);
ref.orderByChild('timestamp').startAt(Date.now()).on('child_added', function(snapshot) {
  console.log('new record', snap.key());
});

dergachev

Let's say you're using Ubuntu 13.04 (Raring Ringtail, released in April 2013) and it just went End-of-Life on you, because it's supported for only 6 months, and the deprecated packages are taken down after 12 months.

You'll probably figure this out the hard way. When you run sudo apt-get update, it will eventually report these errors:

Ign http://archive.ubuntu.com raring-updates/universe Sources/DiffIndex
Err http://security.ubuntu.com raring-security/main Sources
  404  Not Found [IP: 91.189.91.15 80]
Err http://security.ubuntu.com raring-security/universe Sources
  404  Not Found [IP: 91.189.91.15 80]

sk22

var elements = Array.from(document.querySelectorAll('.js-link-block'))
elements.map(function (element) {
  var nameElement = element.querySelector('.chartlist-name')
  return nameElement && nameElement.textContent.replace(/\s+/g, ' ').trim()
}).forEach(function (name, i, names) {
  if (name !== names[i + 1]) return
  var deleteButton = elements[i].querySelector('[data-ajax-form-sets-state="deleted"]')
  if (deleteButton) deleteButton.click()
  location.reload()
})

jonathanmoore

Share Counts

I have always struggled with getting all the various share buttons from Facebook, Twitter, Google Plus, Pinterest, etc to align correctly and to not look like a tacky explosion of buttons. Seeing a number of sites rolling their own share buttons with counts, for example The Next Web I decided to look into the various APIs on how to simply return the share count.

If you want to roll up all of these into a single jQuery plugin check out Sharrre

Many of these API calls and methods are undocumented, so anticipate that they will change in the future. Also, if you are planning on rolling these out across a site I would recommend creating a simple endpoint that periodically caches results from all of the APIs so that you are not overloading the services will requests.

Twitter

hdragomir

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