tomhicks

/*
Copy this into the console of any web page that is interactive and doesn't
do hard reloads. You will hear your DOM changes as different pitches of
audio.

I have found this interesting for debugging, but also fun to hear web pages
render like UIs do in movies.
*/

const audioCtx = new (window.AudioContext || window.webkitAudioContext)()

vay3t

Lorea El Ipsum Buqué oe hermano de finales qliao hermano despavila el moco hechiza yuta blapo, pura falacia oe soplamoco oe si zorra a treh deo saque matagatos de corte zoronca. a treh deo zoronca de vio quieee bellako oe hermano fineza. Tapizao gila caracho de vioh choro la yuta puro gile. te tiraste washas andai con meao pasa paca coshino ql soplamoco truco la legal, teñí puro frío anda a laar picao pero pa q po oe hermano. Embaraojato buqué, lorea.

Longi jato readi de corte saque hermano fineza chantar detonao fierro zorra abrazo pa lo amigo balazo pa lo enemigo zarpao. del corte de corte odio chantar oe hermano pasa paca coshino ql deja ganarme jato anda a laar jato ñoco. A treh deo despavila el moco washas tenis mano? de vio odio washas shilamediavola zoronca. zarpao te tiraste saque a treh deo embarao pasa paca coshino ql de vio abrazo pa lo amigo balazo pa lo enemigo, oe hermano puro gile deja ganarme tolompa conotao pasa paca coshino ql te tiraste.

Zarpao pipazo pela hermano oe si puro gile tapao en

samthor

// UPDATE: In 2023, you should probably stop using this! The narrow version of Safari that
// does not support `nomodule` is probably not being used anywhere. The code below is left
// for posterity.

/**
 * Safari 10.1 supports modules, but does not support the `nomodule` attribute - it will
 * load <script nomodule> anyway. This snippet solve this problem, but only for script
 * tags that load external code, e.g.: <script nomodule src="nomodule.js"></script>
 *
 * Again: this will **not** prevent inline script, e.g.:

johnelliott

import { v4 as uuid } from 'uuid';

export function generateId() {
  return uuid();
}

const v4 = new RegExp(/^[0-9A-F]{8}-[0-9A-F]{4}-4[0-9A-F]{3}-[89AB][0-9A-F]{3}-[0-9A-F]{12}$/i);

console.log(generateId().match(v4));
//console.log(generateId().length)

CodeMyUI

CSS Rain Effect

Looks best with a taller window/layout.

Rain drop elements animate down the screen, stem element inside animates to disappear toward the end of the drop's fall, splat element animates after the stem disappears.

JavaScript used to randomly position drop elements across the screen, slightly randomize their animation duration and delay, and also stagger their top position. Randomizing delay makes sure the drops don't fall in one sheet, randomizing duration keeps them from falling in the same constant synchronization. Staggering top position makes it so the splats don't fall in a single line.

Splatters are unfortunately disabled by default as it is rather intensive and significantly lowers framerate on most machines (in Chrome that is--FireFox and Edge are smoother actually). You can hit the splat toggle to turn it on. The effect is achieved by putting a dotted border-top on an ellipse element, and animating it from scale(0) to scale(1). You can get a better look at it by enabli

JuanJo4

/* 
    Node.js, express, oauth example using Twitters API
    
    Install Dependencies:
        npm install express
        npm install oauth
    
    Create App File:
        Save this file to app.js
    

marcysutton

NOTE: This is no longer an experiment! You can use the accessibility inspector in Chrome Devtools now, including a fantastic color contrast inspection tool. Read more: https://developers.google.com/web/updates/2018/01/devtools#a11y

---

Just like any good element inspector helps you debug styles, accessibility inspection in the browser can help you debug HTML and ARIA exposed for assistive technologies such as screen readers. There's a similar tool in Safari (and reportedly one in Edge) but I like the Chrome one best.

As an internal Chrome experiment, this tool differs from the Accessibility Developer Tools extension in that it has privileged Accessibility API access and reports more information as a result. You can still use the audit feature in the Chrome Accessibility Developer Tools, or you could use the aXe Chrome extension. :)

To enable the accessibility inspector in Chrome stable:

KittyGiraudel

/* bling.js */

window.$ = document.querySelectorAll.bind(document);

Node.prototype.on = window.on = function (name, fn) {
  this.addEventListener(name, fn);
};

NodeList.prototype.__proto__ = Array.prototype;

fay-jai

import React from "react";
import { render } from "react-dom";

const ParentComponent = React.createClass({
  getDefaultProps: function() {
    console.log("ParentComponent - getDefaultProps");
  },
  getInitialState: function() {
    console.log("ParentComponent - getInitialState");
    return { text: "" };

danielgtaylor

Moving to ES6 from CoffeeScript

I fell in love with CoffeeScript a couple of years ago. Javascript has always seemed something of an interesting curiosity to me and I was happy to see the meteoric rise of Node.js, but coming from a background of Python I really preferred a cleaner syntax.

In any fast moving community it is inevitable that things will change, and so today we see a big shift toward ES6, the new version of Javascript. It incorporates a handful of the nicer features from CoffeeScript and is usable today through tools like Babel. Here are some of my thoughts and issues on moving away from CoffeeScript in favor of ES6.

While reading I suggest keeping open a tab to Babel's learning ES6 page. The examples there are great.

Punctuation

Holy punctuation, Batman! Say goodbye to your whitespace and hello to parenthesis, curly braces, and semicolons again. Even with the advanced ES6 syntax you'll find yourself writing a lot more punctuatio