Skip to content

Instantly share code, notes, and snippets.

View messenjer's full-sized avatar

Mathieu Laurent messenjer

View GitHub Profile
@paulirish
paulirish / rAF.js
Last active June 11, 2024 14:29
requestAnimationFrame polyfill
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
// MIT license
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
@jonjaques
jonjaques / bookmarklet.js
Last active May 5, 2024 21:07
jQuery Bookmarklet Template w/ Async Loading
// You create your bookmarklet by instantiating
// a new Bookmarklet function, then pass in the options like so.
// This example checks to see if the var is already defined, and makes
// sure not to overwrite it. This could happen if the user clicks on
// the bookmarklet more than once.
MyBookmarklet = MyBookmarklet || (MyBookmarklet = new Bookmarklet({
// debug: true, // use debug to bust the cache on your resources
css: ['/my/style.css'],
js: [],
@pfulton
pfulton / webkit-svg-heightfix.js
Created December 11, 2012 15:31
Webkit SVG height bugfix
// jQuery fix for Webkit SVG height bug.
// Documented here: https://bugs.webkit.org/show_bug.cgi?id=82489 & http://www.brichards.co.uk/blog/webkit-svg-height-bug-workaround
// Found via: http://stackoverflow.com/questions/7570917/svg-height-incorrectly-calculated-in-webkit-browsers
function fixWebkitHeightBug(){
var svgW = 658;
var svgH = 500;
var curSVGW = $('#svg-container').width();
var newSVGH = heightInRatio(svgH,svgW,curSVGW);
@zenorocha
zenorocha / multiple-3rd-party-widgets.js
Last active November 14, 2022 12:18
Loading multiple 3rd party widgets asynchronously
(function() {
var script,
scripts = document.getElementsByTagName('script')[0];
function load(url) {
script = document.createElement('script');
script.async = true;
script.src = url;
scripts.parentNode.insertBefore(script, scripts);
@Integralist
Integralist / Description.md
Last active April 25, 2020 16:20
This is how BBC News currently implements it's Image Enhancer for responsive images. Note: this is a completely rebuilt version of the code so the BBC's original source code doesn't actually look anything like the below example.

The BBC has a server-side image service which provides developers with multiple sized versions of any image they request. It works in a similar fashion to http://placehold.it/ but it also handles the image ratios returned (where as placehold.it doesn't).

The original BBC News process (and my re-working of the script) follows roughly these steps...

  • Create new instance of ImageEnhancer
  • Change any divs within the page (which have a class of delayed-image-load) into a transparent GIF using a Base64 encoded string.
    • We set the width & height HTML attributes of the image to the required size
    • We know what size the image needs to be because each div has custom data-attr set server-side to the size of the image
    • We then set a class of image-replace onto each newly created transparent image
  • We use a 250ms setTimeout to unblock the UI thread and which calls a function resizeImages which enhances the image-replace images so their source is now set to a URL whe
@jeresig
jeresig / cookiebot.js
Last active October 5, 2023 12:20
Simple bot for CookieClicker: http://orteil.dashnet.org/cookieclicker/ How to use: Paste the following into the JavaScript console in your browser and run it. To start the bot type: "CookieClicker.start();" to stop it do: "CookieClicker.stop();" (or just reload the page).
CookieClicker = {
start: function() {
this.clickInterval = setInterval(function(){
// Click the large cookie as fast as possible!
document.getElementById("bigCookie").click();
}, 1);
this.goldInterval = setInterval(function(){
// Click the golden cookie
var shimmer = document.getElementsByClassName("shimmer")[0];
@jrburke
jrburke / gist:7455354
Last active February 11, 2024 23:18
Use of IDs instead of URLs for HTML resources

Design forces:

  • ECMAScript (ES) Module Loader API is coming. The ES module ID syntax are strings that are just treated as string IDs and not paths.
  • Existing JS module experience in CommonJS/Node/AMD worlds of using module IDs that are resolved to a URL/path for fetching.
  • Better package managers are coming for front end web apps. These package managers install assets by IDs not by paths.
  • For front end code, baseURL + moduleID + '.js' is likely the default ID-to-URL resolution, but other declarative config could be possible for browser-based ES Module Loaders. Examples of useful declarative config in this area are the problems solved via common AMD loader config

So it will be common in JS code to use string IDs, and not URLs to refer to dependency resources.

With the coming of web components and custom elements, it will be possible for a custom element to depend on other custom e

@paulrouget
paulrouget / ff.md
Last active May 14, 2024 02:30
Hacking Firefox
@davestewart
davestewart / broadcast-channel.md
Last active May 14, 2024 18:53
Example of using BroadcastChannel to communicate with pages in the same domain

screenshot

@loilo
loilo / pass-slots.md
Last active June 13, 2024 02:34
Vue: Pass Slots through from Parent to Child Components

Vue: Pass Slots through from Parent to Child Components

The Situation

  • We've got some components A, B and C which provide different slots.
    const A = {
      template: `<div><slot name="a">Default A Content</slot></div>`
    }

const B = {