Skip to content

Instantly share code, notes, and snippets.

@paulirish
paulirish / what-forces-layout.md
Last active April 30, 2024 17:56
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
@ryanflorence
ryanflorence / static_server.js
Last active April 26, 2024 16:18
Node.JS static file web server. Put it in your path to fire up servers in any directory, takes an optional port argument.
var http = require("http"),
url = require("url"),
path = require("path"),
fs = require("fs")
port = process.argv[2] || 8888;
http.createServer(function(request, response) {
var uri = url.parse(request.url).pathname
, filename = path.join(process.cwd(), uri);
@xjamundx
xjamundx / blog-webpack-2.md
Last active April 21, 2024 16:20
From Require.js to Webpack - Part 2 (the how)

This is the follow up to a post I wrote recently called From Require.js to Webpack - Party 1 (the why) which was published in my personal blog.

In that post I talked about 3 main reasons for moving from require.js to webpack:

  1. Common JS support
  2. NPM support
  3. a healthy loader/plugin ecosystem.

Here I'll instead talk about some of the technical challenges that we faced during the migration. Despite the clear benefits in developer experience (DX) the setup was fairly difficult and I'd like to cover some of the challanges we faced to make the transition a bit easier.

@jhurliman
jhurliman / base64.js
Created September 29, 2011 06:39 — forked from Marak/base64.js
An extremely simple implementation of base64 encoding / decoding using node.js Buffers (plus url-safe versions)
/*
* base64.js: An extremely simple implementation of base64 encoding / decoding using node.js Buffers
*
* (C) 2010, Nodejitsu Inc.
* (C) 2011, Cull TV, Inc.
*
*/
var base64 = exports;
@Restuta
Restuta / framework-sizes.md
Last active March 7, 2024 00:01
Sizes of JS frameworks, just minified + minified and gzipped, (React, Angular 2, Vue, Ember)

Below is the list of modern JS frameworks and almost frameworks – React, Vue, Angular, Ember and others.

All files were downloaded from https://cdnjs.com and named accordingly. Output from ls command is stripped out (irrelevant stuff)

As-is (minified)

$ ls -lhS
566K Jan 4 22:03 angular2.min.js
@tagr
tagr / server.js
Created September 28, 2014 20:22
Node.js/Express: Add Expires header to /images and /stylesheets directories
/**
* Module dependencies.
*/
var express = require('express')
, routes = require('./routes')
, user = require('./routes/user')
, http = require('http')
, path = require('path');
@gasman
gasman / pnginator.rb
Created April 30, 2012 18:08
pnginator: pack Javascript into a self-extracting PNG
#!/usr/bin/env ruby -w
# pnginator.rb: pack a .js file into a PNG image with an HTML payload;
# when saved with an .html extension and opened in a browser, the HTML extracts and executes
# the javascript.
# Usage: ruby pnginator.rb input.js output.png.html
# By Gasman <http://matt.west.co.tt/>
# from an original idea by Daeken: http://daeken.com/superpacking-js-demos
@csanz
csanz / encrypt_decrypt.js
Created August 30, 2011 16:06
Simple String Encryption & Decryption with Node.js
function encrypt(text){
var cipher = crypto.createCipher('aes-256-cbc','d6F3Efeq')
var crypted = cipher.update(text,'utf8','hex')
crypted += cipher.final('hex');
return crypted;
}
function decrypt(text){
var decipher = crypto.createDecipher('aes-256-cbc','d6F3Efeq')
var dec = decipher.update(text,'hex','utf8')
@utsengar
utsengar / Sync_Async_loading_handlebars.js
Created April 2, 2012 20:41
synchronous and asynchronous loading of handlebars templates
/*
* This decorates Handlebars.js with the ability to load
* templates from an external source, with light caching.
*
* To render a template, pass a closure that will receive the
* template as a function parameter, eg,
* T.render('templateName', function(t) {
* $('#somediv').html( t() );
* });
* Source: https://github.com/wycats/handlebars.js/issues/82