addyosmani

Route-based chunking

Many of us building single-page apps today use JavaScript module bundling tools that trend towards a monolithic "bundle.js" file including the full app and vendor code for multiple routes. This means if a user lands on any arbitrary route they need to wait for a large bundle of JS to be fetched, parsed and executed before the application is fully rendered and interactive.

This is a little backwards, especially when apps are used under real-world network (3G) and device

acdlite

// getComponent is a function that returns a promise for a component
// It will not be called until the first mount
function asyncComponent(getComponent) {
  return class AsyncComponent extends React.Component {
    static Component = null;
    state = { Component: AsyncComponent.Component };

    componentWillMount() {
      if (!this.state.Component) {
        getComponent().then(Component => {

vasanthk

System Design Cheatsheet

Picking the right architecture = Picking the right battles + Managing trade-offs

Basic Steps

1. Clarify and agree on the scope of the system

• User cases (description of sequences of events that, taken together, lead to a system doing something useful)
  • Who is going to use it?
  • How are they going to use it?

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

learncodeacademy

##what are generators##

• They're pausable functions, pausable iterable functions, to be more precise
• They're defined with the *
• every time you yield a value, the function pauses until .next(modifiedYieldValue) is called

var myGen = function*() {
  var one = yield 1;
  var two = yield 2;
  var three = yield 3;
 console.log(one, two, three);

MattSurabian

Are your feelings hurt?

If you rushed through David Shariff's JS Quiz or are just new to JS they might be. I know mine were. After I dried my eyes, I took the quiz again, this time very slowly trying to get at the meat behind each answer. Below is my attempt to explain each question's answer and offer some interesting permutations so that others can move beyond their hurt feelings and come out the other side better JS developers.

I initially thought I'd turn this into a blog post but think it's probably better as a gist.

Question #1

Don't over think it.

var foo = function foo() {

kevin-smets

Default

Powerlevel10k

getify

var a = Array( 3 );
a; // []
a.length; // 3
a.map( function( v, idx ){ return idx; } ); // [ ] <-- WTF?

var b = Array.apply( null, Array(3) );
b; // [undefined,undefined,undefined]
b.length; // 3
b.map( function( v, idx ){ return idx; } ); // [0,1,2] <-- :)

makenova

Difference between Debounce and Throttle

Debounce

Debounce a function when you want it to execute only once after a defined interval of time. If the event occurs multiple times within the interval, the interval is reset each time.
Example A user is typing into an input field and you want to execute a function, such as a call to the server, only when the user stops typing for a certain interval, such as 500ms.

Throttle

potfur

window.S = function(s) {
    return document[{
        '#': 'getElementById',
        '.': 'getElementsByClassName',
        '@': 'getElementsByName',
        '=': 'getElementsByTagName'}[s[0]]
        || 'querySelectorAll'](s.slice(1))
};

// [S('#header'), S('.container'), S('?div')]