Skip to content

Instantly share code, notes, and snippets.

@necolas
necolas / snippet.js
Created June 14, 2011 20:36
Optimised async loading of cross-domain scripts
/*
* Updated to use the function-based method described in http://www.phpied.com/social-button-bffs/
* Better handling of scripts without supplied ids.
*
* N.B. Be sure to include Google Analytics's _gaq and Facebook's fbAsyncInit prior to this function.
*/
(function(doc, script) {
var js,
fjs = doc.getElementsByTagName(script)[0],
@mkristian
mkristian / pom-compass.xml
Last active August 2, 2016 14:28
using gem-maven-plugin to compass compile or execute sass. sass with gem dependency within plugin and compass with global compile dependency (which is also added to the java-classpath and not so nice)
<?xml version="1.0"?>
<project
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"
xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<modelVersion>4.0.0</modelVersion>
<groupId>com.example</groupId>
<artifactId>example</artifactId>
<version>0.0.36</version>
@zenorocha
zenorocha / multiple-3rd-party-widgets.js
Last active October 4, 2024 14:04
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);
@scottjehl
scottjehl / noncritcss.md
Last active August 12, 2023 16:57
Comparing two ways to load non-critical CSS

I wanted to figure out the fastest way to load non-critical CSS so that the impact on initial page drawing is minimal.

TL;DR: Here's the solution I ended up with: https://github.com/filamentgroup/loadCSS/


For async JavaScript file requests, we have the async attribute to make this easy, but CSS file requests have no similar standard mechanism (at least, none that will still apply the CSS after loading - here are some async CSS loading conditions that do apply when CSS is inapplicable to media: https://gist.github.com/igrigorik/2935269#file-notes-md ).

Seems there are a couple ways to load and apply a CSS file in a non-blocking manner:

@paulirish
paulirish / what-forces-layout.md
Last active April 19, 2025 04:59
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
@lg
lg / cloudy-gamer-launcher.sh
Last active April 28, 2021 14:25
Easily start/stop Paperspace and Parsec instances
#!/bin/bash
#
# CloudyGamerLauncher by Larry Gadea
# Easily start/stop Paperspace and Parsec instances
#
# Make sure to fill out the variables below. For the machine id, use the
# 8-letter identifier for the machine on Paperspace (ex. PS8RGDUY)
#
# Note: Requires Paperspace API key (generate one in account settings)
@sindresorhus
sindresorhus / esm-package.md
Last active April 21, 2025 02:29
Pure ESM package

Pure ESM package

The package that linked you here is now pure ESM. It cannot be require()'d from CommonJS.

This means you have the following choices:

  1. Use ESM yourself. (preferred)
    Use import foo from 'foo' instead of const foo = require('foo') to import the package. You also need to put "type": "module" in your package.json and more. Follow the below guide.
  2. If the package is used in an async context, you could use await import(…) from CommonJS instead of require(…).
  3. Stay on the existing version of the package until you can move to ESM.