DmitrySoshnikov

@kangax's ES6 quiz, explained

@kangax created a new interesting quiz, this time devoted to ES6 (aka ES2015). I found this quiz very interesting and quite hard (made myself 3 mistakes on first pass).

Here we go with the explanations:

Question 1:

(function(x, f = () => x) {

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

ayamflow

Because I keep forgetting that stuff...

Diffuse

light that will be reflected on different surfaces

Specular

"mirror-like" reflection of light

occlusion / culling

objects outside of viewport should not be rendered

lucastswick

// To enable Cat mode in Google's I/0 2015 experience (https://events.google.com/io2015/), copy/paste this gist into your console before loading the experiment (ie before clicking the animated mixer button).
// Thanks to https://gist.github.com/tdreyno/b6de4902c7e886f94b67 for the hints.

window.experiment.getAudioDefinitions = function() {
  return {
    audioSprite: { resources: ["cataudiosprite.mp3"],spritemap: {
            "arp_synth_A-sharp": {
                start: 0,
                end: 1.0971428571428572,
                loop: !1

jsturgis

var mediaJSON = { "categories" : [ { "name" : "Movies",
        "videos" : [ 
		    { "description" : "Big Buck Bunny tells the story of a giant rabbit with a heart bigger than himself. When one sunny day three rodents rudely harass him, something snaps... and the rabbit ain't no bunny anymore! In the typical cartoon tradition he prepares the nasty rodents a comical revenge.\n\nLicensed under the Creative Commons Attribution license\nhttp://www.bigbuckbunny.org",
              "sources" : [ "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" ],
              "subtitle" : "By Blender Foundation",
              "thumb" : "images/BigBuckBunny.jpg",
              "title" : "Big Buck Bunny"
            },
            { "description" : "The first Blender Open Movie from 2006",
              "sources" : [ "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" ],

patriciogonzalezvivo

Please consider using http://lygia.xyz instead of copy/pasting this functions. It expand suport for voronoi, voronoise, fbm, noise, worley, noise, derivatives and much more, through simple file dependencies. Take a look to https://github.com/patriciogonzalezvivo/lygia/tree/main/generative

Generic 1,2,3 Noise

float rand(float n){return fract(sin(n) * 43758.5453123);}

float noise(float p){
	float fl = floor(p);
  float fc = fract(p);

eprothro

Overview

The below Sass+Compass/Ruby can be used to:

• Generate retina and non-retina sprite maps
• Allow a single style class to provide retina and non-retina support, per image
• Automatically generate those sprite style classes

Example markup for a retina supported menu button:

%a.icon-hamburger

howlingblast

Function::property = (prop, desc) ->
  Object.defineProperty @prototype, prop, desc

class Person
  constructor: (@firstName, @lastName) ->
  @property 'fullName',
    get: -> "#{@firstName} #{@lastName}"
    set: (name) -> [@firstName, @lastName] = name.split ' '

p = new Person 'Leroy', 'Jenkins'

alex

Guide to how fucked is SSL?

Thanks to Jacob Kaplan-Moss, Donald Stufft, David Reid, Allen Short, Zain Memon, and Chris Armstrong for review.

This is a guide for technical individuals to understand in what circumstances SSL communications are secure against an observer-in-the-middle (for all intents and purposes: the NSA).

domenic

"use strict";

// Domenic needs a Tweeter
function Domenic(tweeter) {
  this.tweeter = tweeter;
}
Domenic.inject = ["tweeter"];

Domenic.prototype.doSomethingCool = function () {
  return this.tweeter.tweet("Did something cool!");