Marcus Lilja marcuslilja

## what-forces-layout.md

      
              1 file
            
          
              813 forks
            
          
              106 comments
            
          
              8093 stars
            
          
                paulirish
                / what-forces-layout.md
            
            
              Last active
              May 16, 2024 19:29
            
              
                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


## gulpfile.js
var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var browserify = require('browserify');
var watchify = require('watchify');
var babel = require('babelify');

function compile(watch) {
  var bundler = watchify(browserify('./src/index.js', { debug: true }).transform(babel));

## folder-structure.md

      
              1 file
            
          
              151 forks
            
          
              64 comments
            
          
              1080 stars
            
          
                ryanflorence
                / folder-structure.md
            
            
              Last active
              May 17, 2024 02:07
            
          
    Folder Structure

Please note

While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.
Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.

  
## react-app-file-structure
.
├── actions
├── stores
├── views
│   ├── Anonymous
│   │   ├── __tests__
│   │   ├── views
│   │   │   ├── Home
│   │   │   │   ├── __tests__
│   │   │   │   └── Handler.js

## gist:2597326

      
              1 file
            
          
              166 forks
            
          
              26 comments
            
          
              689 stars
            
          
                liamcurry
                / gist:2597326
            
            
              Created
              May 4, 2012 19:56
            
              
                Vanilla JS vs jQuery
              
          
    Moving from jQuery

Events

// jQuery
$(document).ready(function() {
  // code
})

  
## ios-8-web-app.html
<!doctype html>

<!-- http://taylor.fausak.me/2015/01/27/ios-8-web-apps/ -->

<html>
  <head>
    <title>iOS 8 web app</title>

    <!-- CONFIGURATION -->

## Gemfile
source "http://rubygems.org"
group :development do
  gem 'rake'
  gem 'guard'
  gem 'coffee-script'
  gem 'rb-fsevent'
  gem 'rb-inotify'
  gem 'compass', '0.11.5'
  gem 'sass', '3.1.5'
  gem 'guard-compass'

## jquery.support.cssproperty.js
/**
 * jQuery.support.cssProperty
 * To verify that a CSS property is supported
 * (or any of its browser-specific implementations)
 *
 * @param p css property name
 * @param rp optional, if set to true, the css property name will be returned
 * instead of a boolean support indicator
 * @return {mixed}
 *
	var gulp = require('gulp');
	var sourcemaps = require('gulp-sourcemaps');
	var source = require('vinyl-source-stream');
	var buffer = require('vinyl-buffer');
	var browserify = require('browserify');
	var watchify = require('watchify');
	var babel = require('babelify');

	function compile(watch) {
	var bundler = watchify(browserify('./src/index.js', { debug: true }).transform(babel));
	.
	├── actions
	├── stores
	├── views
	│ ├── Anonymous
	│ │ ├── __tests__
	│ │ ├── views
	│ │ │ ├── Home
	│ │ │ │ ├── __tests__
	│ │ │ │ └── Handler.js
	<!doctype html>

	<!-- http://taylor.fausak.me/2015/01/27/ios-8-web-apps/ -->

	<html>
	<head>
	<title>iOS 8 web app</title>

	<!-- CONFIGURATION -->
	source "http://rubygems.org"
	group :development do
	gem 'rake'
	gem 'guard'
	gem 'coffee-script'
	gem 'rb-fsevent'
	gem 'rb-inotify'
	gem 'compass', '0.11.5'
	gem 'sass', '3.1.5'
	gem 'guard-compass'
	/**
	* jQuery.support.cssProperty
	* To verify that a CSS property is supported
	* (or any of its browser-specific implementations)
	*
	* @param p css property name
	* @param rp optional, if set to true, the css property name will be returned
	* instead of a boolean support indicator
	* @return {mixed}
	*