Skip to content

Instantly share code, notes, and snippets.

@mythz
mythz / xhr.js
Created November 2, 2011 19:05
Standalone jQuery-like Ajax Client
//Adds $.xhr and jQuery-like $.ajax methods to the prescribed namespace.
//Inspired from David Flanagans excellent cross-platform utils http://www.davidflanagan.com/javascript5/display.php?n=20-1&f=20/01.js
//Includes underscore.js _.each and _.extend methods
//modified to behave like jQuery's $.ajax(), not complete.
(function($) {
var win=window, xhrs = [
function () { return new XMLHttpRequest(); },
function () { return new ActiveXObject("Microsoft.XMLHTTP"); },
function () { return new ActiveXObject("MSXML2.XMLHTTP.3.0"); },
function () { return new ActiveXObject("MSXML2.XMLHTTP"); }
@marcedwards
marcedwards / high-dpi-media.css
Last active November 19, 2023 12:56
A CSS media query that captures almost all high DPI aware devices.
/* ---------------------------------------------------------- */
/* */
/* A media query that captures: */
/* */
/* - Retina iOS devices */
/* - Retina Macs running Safari */
/* - High DPI Windows PCs running IE 8 and above */
/* - Low DPI Windows PCs running IE, zoomed in */
/* - Low DPI Windows PCs and Macs running Firefox, zoomed in */
/* - Android hdpi devices and above */
@cobyism
cobyism / gh-pages-deploy.md
Last active May 25, 2024 08:30
Deploy to `gh-pages` from a `dist` folder on the master branch. Useful for use with [yeoman](http://yeoman.io).

Deploying a subfolder to GitHub Pages

Sometimes you want to have a subdirectory on the master branch be the root directory of a repository’s gh-pages branch. This is useful for things like sites developed with Yeoman, or if you have a Jekyll site contained in the master branch alongside the rest of your code.

For the sake of this example, let’s pretend the subfolder containing your site is named dist.

Step 1

Remove the dist directory from the project’s .gitignore file (it’s ignored by default by Yeoman).

@joyrexus
joyrexus / README.md
Last active May 3, 2024 10:41 — forked from liamcurry/gist:2597326
Vanilla JS equivalents of jQuery methods

Sans jQuery

Events

// jQuery
$(document).ready(function() {
  // code
})
@sstur
sstur / dom-to-json.js
Last active October 8, 2023 04:17
Stringify DOM nodes using JSON (and revive again)
function toJSON(node) {
let propFix = { for: 'htmlFor', class: 'className' };
let specialGetters = {
style: (node) => node.style.cssText,
};
let attrDefaultValues = { style: '' };
let obj = {
nodeType: node.nodeType,
};
if (node.tagName) {
@dstroot
dstroot / app.js
Created July 13, 2014 16:29
Gulp, BrowserSync, Node, and Nodemon all working in harmony. ;)
/**
* World's simplest express server
* - used to serve index.html from /public
*/
var express = require('express');
var serveStatic = require('serve-static');
var app = express();
app.use(serveStatic(__dirname + '/public'));
@rafszul
rafszul / index.html
Created March 1, 2015 00:16
svg animated bubbles
<div class='header'>
<h1>konstanzer schülerparlament</h1>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
@paulirish
paulirish / what-forces-layout.md
Last active May 28, 2024 21:13
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
@sgnl
sgnl / README.md
Last active November 9, 2022 21:48
Setting up SASS (SCSS) files with gulp, gulp-sass, and Browser Sync!

Create a new temp project

  1. $ mkdir sass_gulp_workshop
  2. cd into the new directory
  3. Initialize NPM: $ npm init --yes
  4. Install gulp and gulp-sass packages: $ npm install -D gulp gulp-sass browser-sync
  5. Update package.json's scripts section with this key-value pair: "scripts": { "dev": "gulp" }
  6. Recreate this file structure in this directory:
  • public (directory)
    • css (directory)
    • index.html (file)
@dtomasi
dtomasi / default
Last active December 8, 2023 04:20
Brew Nginx PHP7
server {
listen 80;
server_name localhost;
root /Users/YOUR_USERNAME/Sites;
access_log /Library/Logs/default.access.log main;
location / {
include /usr/local/etc/nginx/conf.d/php-fpm;
}