Skip to content

Instantly share code, notes, and snippets.

Out of box, Pay it forward

Jbee JaeYeopHan

Out of box, Pay it forward
View GitHub Profile
gaearon /
Last active Sep 2, 2020
A Gentle Introduction to Prepack, Part 1


When this guide is more complete, the plan is to move it into Prepack documentation.
For now I put it out as a gist to gather initial feedback.

A Gentle Introduction to Prepack (Part 1)

If you're building JavaScript apps, you might already be familiar with some tools that compile JavaScript code to equivalent JavaScript code:

  • Babel lets you use newer JavaScript language features, and outputs equivalent code that targets older JavaScript engines.
egardner / deepequal.js
Created May 22, 2017
Simple deep equality comparison in Javascript (ES5+)
View deepequal.js
// Deep Equality comparison example
// This is an example of how to implement an object-comparison function in
// JavaScript (ES5+). A few points of interest here:
// * You can get an array of all an object's properties in ES5+ by calling
// the class method Object.keys(obj).
// * The function recursively calls itself in the for / in loop when it
// compares the contents of each property
// * You can hide a "private" function inside a function of this kind by
View es6-ajax-request.js
export default class Ajax {
get(url, callback) {
let xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');'GET', url);
xhr.onreadystatechange = () => {
if (xhr.readyState > 3 && xhr.status === 200) {
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
paulirish /
Last active Oct 27, 2020
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
View security.conf
# config to don't allow the browser to render the page inside an frame or iframe
# and avoid clickjacking
# if you need to allow [i]frames, you can use SAMEORIGIN or even set an uri with ALLOW-FROM uri
add_header X-Frame-Options SAMEORIGIN;
# when serving user-supplied content, include a X-Content-Type-Options: nosniff header along with the Content-Type: header,
# to disable content-type sniffing on some browsers.
# currently suppoorted in IE > 8
jareware /
Last active Oct 27, 2020
Advanced SCSS, or, 16 cool things you may not have known your stylesheets could do

⇐ back to the gist-blog at

Advanced SCSS

Or, 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.

I've been using SCSS/SASS for most of my styling work since 2009, and I'm a huge fan of Compass (by the great @chriseppstein). It really helped many of us through the darkest cross-browser crap. Even though browsers are increasingly playing nice with CSS, another problem has become very topical: managing the complexity in stylesheets as our in-browser apps get larger and larger. SCSS is an indispensable tool for dealing with this.

This isn't an introduction to the language by a long shot; many things probably won't make sense unless you have some SCSS under your belt already. That said, if you're not yet comfy with the basics, check out the aweso

You can’t perform that action at this time.