lukehoban

Note: Up to date version now at https://github.com/lukehoban/es6features

ECMAScript 6

Introduction

ECMAScript 6 is the upcoming version of the ECMAScript standard. This standard is targetting ratifcation in December 2014. ES6 is a significant update to the language, and the first update to the language since ES5 was standardized in 2009. Implementation of these features in major JavaScript engines is underway now.

See the draft ES6 standard for full specification of the ECMAScript 6 language.

ES6 includes the following new features:

ThomasBurleson

/**
 * Traditional solution: For-loop usage
 */
function buildEpisodes(markers) 
{
  var result = [],i, newEpisode;
  
  if (markers && markers.length > 0) {
    for (i = 0; i < markers.length; i++) {
      newEpisode = makeEpisode(markers[i]);

madrobby

  <!-- iPhone 6 Plus -->
  <link href="startup-image-1242x2148.png"
    media="(device-width: 414px) and (device-height: 736px)
      and (-webkit-device-pixel-ratio: 3)"
    rel="apple-touch-startup-image">

bobbygrace

Hello, visitors! If you want an updated version of this styleguide in repo form with tons of real-life examples… check out Trellisheets! https://github.com/trello/trellisheets

---

Trello CSS Guide

“I perfectly understand our CSS. I never have any issues with cascading rules. I never have to use !important or inline styles. Even though somebody else wrote this bit of CSS, I know exactly how it works and how to extend it. Fixes are easy! I have a hard time breaking our CSS. I know exactly where to put new CSS. We use all of our CSS and it’s pretty small overall. When I delete a template, I know the exact corresponding CSS file and I can delete it all at once. Nothing gets left behind.”

You often hear updog saying stuff like this. Who’s updog? Not much, who is up with you?

maarten00

/**
 * Copy of Excel's PMT function.
 * Credit: http://stackoverflow.com/questions/2094967/excel-pmt-function-in-js
 *
 * @param rate_per_period       The interest rate for the loan.
 * @param number_of_payments    The total number of payments for the loan in months.
 * @param present_value         The present value, or the total amount that a series of future payments is worth now;
 *                              Also known as the principal.
 * @param future_value          The future value, or a cash balance you want to attain after the last payment is made.
 *                              If fv is omitted, it is assumed to be 0 (zero), that is, the future value of a loan is 0.

s2t2

jwplayer('player').setup({ ... });

//
// Q: under which conditions does jwplayer return the duration of the current video?
//

console.log(jwplayer('player').getState(), jwplayer('player').getDuration())
"IDLE" -1 // fail

jwplayer('player').play(true)

spiralx

if (!Object.assign) {
  Object.defineProperty(Object, 'assign', {
    enumerable: false,
    configurable: true,
    writable: true,
    value: function(target) {
      'use strict';
      if (target === undefined || target === null) {
        throw new TypeError('Cannot convert first argument to object');
      }

PurpleBooth

Project Title

One Paragraph of project description goes here

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

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

juanbrujo

// Shortcut to get elements
var $ = function(element) {
  if (element.charAt(0) === "#") { // If passed an ID...
    return document.querySelector(element); // ... returns single element
  }
  return document.querySelectorAll(element); // Otherwise, returns a nodelist
};