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

walter0331

const useSlot = (children) => {
  /**
   * map slots
   */
  const slots = React.Children.toArray(children)
    .reduce((result, child) => {
      if (child.props && child.props.slot) {
        result[child.props.slot] = child;
      } else {
        result.default.push(child);

getify

Some things that are "better" with this BetterPromise implementation:

• BetterPromise # then(..) accepts a BetterPromise (or Promise) instance passed directly, instead of requiring a function to return it, so that the promise is linked into the chain.

  var p = BetterPromise.resolve(42);
  
  var q = Promise.resolve(10);
  
  p.then(console.log).then(q).then(console.log);

CMCDragonkai

https://babeljs.io/docs/usage/polyfill/ vs https://babeljs.io/docs/plugins/transform-runtime

The main difference is that polyfill works for all polyfills but must be installed as a production dependency. And you need to use import 'babel-polyfill'; to make it work. And it will pollute the global scope.

The transform-runtime provides many of the same features, but won't provide special functions like array.includes() or array.values(). So it's safer to use inside a library.

If you're building an app, you can use babel-polyfill. If you're building a library, make sure not to use babel-polyfill, and only the transform-runtime.

You'll need to find alternatives for implementing any of the functions like array.includes or array.values().

Rich-Harris

Note: I'm not involved in Prepack in any way — please correct me if I say anything incorrect below!

A few people have asked me if Prepack and Svelte are similar projects with similar goals. The answer is 'no, they're not', but let's take a moment to explore why.

What is Prepack?

Prepack describes itself as a 'partial evaluator for JavaScript'. What that means is that it will run your code in a specialised interpreter that, rather than having some effect on the world (like printing a message to the console), will track the effects that would have happened and express them more directly.

So for example if you give it this code...

montanaflynn

Concurrency in JavaScript

Javascript is a programming language with a peculiar twist. Its event driven model means that nothing blocks and everything runs concurrently. This is not to be confused with the same type of concurrency as running in parallel on multiple cores. Javascript is single threaded so each program runs on a single core yet every line of code executes without waiting for anything to return. This sounds weird but it's true. If you want to have any type of sequential ordering you can use events, callbacks, or as of late promises.

MichalZalecki

/* VT100 terminal reset (<ESC>c) */

console.log('\033c');

/* numbers comparations */

> '2' == 2
true

> '2' === 2

LeCoupa

// Date Object CheatSheet
// The Date object is used to work with dates and times.
// More: http://www.w3schools.com/jsref/jsref_obj_date.asp


// 1. Instantiating a Date.


var date = new Date();
var date = new Date(milliseconds);

staltz

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

---

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

---

keeguon

[ 
  {name: 'Afghanistan', code: 'AF'}, 
  {name: 'Åland Islands', code: 'AX'}, 
  {name: 'Albania', code: 'AL'}, 
  {name: 'Algeria', code: 'DZ'}, 
  {name: 'American Samoa', code: 'AS'}, 
  {name: 'AndorrA', code: 'AD'}, 
  {name: 'Angola', code: 'AO'}, 
  {name: 'Anguilla', code: 'AI'}, 
  {name: 'Antarctica', code: 'AQ'},