mzabriskie

build/
node_modules/

robinrendle

Fixing our local environment with Browsersync

Whenever we change our templates we still have to use our build script and this can get annoying. Thankfully with webpack-dev-server and BrowserSync we can fix this:

npm i -D browser-sync browser-sync-webpack-plugin webpack-dev-server

BrowserSync will act like a proxy, waiting for webpack to do its thing and then reloading the browser for us.

oanhnn

Problem

I have two Github accounts: oanhnn (personal) and superman (for work). I want to use both accounts on same computer (without typing password everytime, when doing git push or pull).

Solution

Use ssh keys and define host aliases in ssh config file (each alias for an account).

How to?

1. Generate ssh key pairs for accounts and add them to GitHub accounts.

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

magnetikonline

AWS CLI S3 usage examples

• Local dir to remote bucket sync
• Local dir to remote bucket copy with gzip content encoding header
• Remote to remote bucket copy

Local dir to remote bucket sync

$ aws s3 sync \

mitchwongho

# Assuming an Ubuntu Docker image
$ docker run -it <image> /bin/bash

ebidel

Web Components Resources

Specs / standardization

W3C Introduction to Web Components - explainer/overview of the technologies

• Custom Elements
• HTML Imports
• Shadow DOM
• CSS Scoping Module

simonewebdesign

/*
Common vector operations
Author: Tudor Nita | cgrats.com
Version: 0.51

*/
function Vec2(x_,y_)
{
this.x = x_;
this.y = y_;

shawnbot

Finding the Simulator

You can test with the iOS Simulator that comes with Xcode. Navigate to the Xcode app in the Finder, right click and select "Show Package Contents":

Then navigate to Contents > Applications, and open the shortcut to "iPhone Simulator" (it may be called "iOS Simulator" depending on which version of Xcode you're running):

addyosmani

/*

limitLoop.js - limit the frame-rate when using requestAnimation frame
Released under an MIT license.

When to use it?
----------------
A consistent frame-rate can be better than a janky experience only 
occasionally hitting 60fps. Use this trick to target a specific frame-
rate (e.g 30fps, 48fps) until browsers better tackle this problem