paulirish

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

WebReflection

#!/usr/bin/env bash

# A basic Self Signed SSL Certificate utility
# by Andrea Giammarchi @WebReflection

# https://www.webreflection.co.uk/blog/2015/08/08/bringing-ssl-to-your-private-network

# # to make it executable and use it
# $ chmod +x certificate
# $ ./certificate # to read the how-to

sebmarkbage

var Bar1 = base => class extends base {
  componentWillMount(){
    super.componentWillMount();
    console.log('Bar1');
  }
};

var Bar2 = base => class extends base {
  componentWillMount(){
    super.componentWillMount();

addyosmani

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

NV

var style = document.createElement('style')
var iframe = document.createElement('iframe')
document.body.appendChild(iframe)
iframe.contentDocument.documentElement.appendChild(style)
iframe.style.display = 'none'

style.textContent = 'a {color: red}'
style.sheet // CSSStyleSheet
style.sheet.cssRules[0].cssText // 'a { color: red; }'
style.sheet.cssRules[0].selectorText // 'a'

hofmannsven

Git

Global Settings

• Related Setup: https://gist.github.com/hofmannsven/6814278
• Related Pro Tips: https://ochronus.com/git-tips-from-the-trenches/
• Interactive Beginners Tutorial: http://try.github.io/
• Git Cheatsheet by GitHub: https://services.github.com/on-demand/downloads/github-git-cheat-sheet/

Reminder

Press minus + shift + s and return to chop/fold long lines!

ChaseFlorell

// tries to execute the uri:scheme
function uriSchemeWithHyperlinkFallback(uri, href) {
    // set up a timer and start it
    var start = new Date().getTime(), 
        end, 
        elapsed;

    // attempt to redirect to the uri:scheme
    // the lovely thing about javascript is that it's single threadded.
    // if this WORKS, it'll stutter for a split second, causing the timer to be off

cobyism

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).