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
@rwjblue
rwjblue / ember-master-in-ember-cli-app.md
Last active October 10, 2016 23:01
Developing on Ember master (linked locally), with an Ember CLI application.

From a terminal run the following commands:

git clone git@github.com:emberjs/ember.js
cd ember.js
npm install
npm start

While that is running open another terminal and run the following (starting from the ember.js folder you cloned a moment ago):

@annevk
annevk / gist:3db3fbda2b95e5ae9427
Last active August 29, 2015 14:01
Platform requests to TC39
  • IO streams. (Domenic is leading an effort on GitHub. This is high priority, like promises was last year.)
  • Asynchronous iteration (event streams?). (Database cursor, going through a directory, going through entries in storage, scanning TV channels.)
  • A plan around distinct Error types and detection (e.g. for APIs that can fail in multiple ways where you might want to recover from certain class of errors; think network APIs, databases)
  • A better way to define ES APIs than WebIDL. (Part of the problem here is lack of maintenance. So maybe it's as "simple" as finding someone.)
var Link = React.createClass({ /* magic */ });
var Routed = { /* magic */ };
var App = React.createClass({
mixins: [Routed],
render: function() {
return (
<Root path="/">
<About path="about"/>
@omo
omo / gist:9986103
Created April 5, 2014 01:08
HTML Imports: Discussion over Async/Progressive Loading

HTML Imports: Discussion over Async/Progressive Loading

There are concerns around HTML Imports that does sync or blocking loading as the default. I’d like to address these concerns. Especially I’d like to understand the actual use cases that “sync” loading hurts. This document aims to be a portal of that effort.

What to Block

Before discussing use cases, let’s clarify which part of page loading process HTML Imports possibly blocks. The blocking model of HTML Imports is modeled after the one for external stylesheets. There are two main bits of the blocking:

The <script> elements

"Model-dependent query param stickiness"

The question of whether query param controller properties are preserved/restored/reset when navigating away/back/between routes is a tricky one, but the sensible default seems to be "model-dependent stickiness", whereby query params are stick unless you're switching the model of the current or parent routes. There's more that could be said about this but here's a quick summary of my plan:

  • We need a dictionary to store QP state scoped to a model
var get = Ember.get, set = Ember.set, doc = document;
var FastSelectComponent = Ember.Component.extend({
items: null,
valuePath: 'value',
labelPath: 'label',
value: null,
selected: null,
tagName: 'select',
@ebidel
ebidel / Web Components Resources.md
Last active February 27, 2023 22:04
List of resources related to Web Components