davidgljay

import config from '../config'

let components = {}

//For each component in the config fiel into an object
for (var i = config.length - 1; i >= 0; i--) {
	components[config[i].name] = require(config[i].path).default
}

export default components

mxstbr

Enable tab completion for JSX with Emmet in Atom

This guide assumes you have the emmet and language-babel packages already installed in Atom

1. Open the keymap.cson file by clicking on Atom -> Keymap… in the menu bar
2. Add these lines of code to your keymap:

'atom-text-editor[data-grammar~="jsx"]:not([mini])':

amysimmons

#Understanding closures, callbacks and promises

For a code newbie like myself, callbacks, closures and promises are scary JavaScript concepts.

10 months into my full-time dev career, and I would struggle to explain these words to a peer.

So I decided it was time to face my fears, and try to get my head around each concept.

Here are the notes from my initial reading. I'll continue to refine them as my understanding improves.

paulmsmith

'atom-text-editor[data-grammar="text html nunjucks"]:not([mini])':
    'tab': 'emmet:expand-abbreviation-with-tab'

'atom-text-editor[data-grammar="source nunjucks"]:not([mini])':
    'tab': 'emmet:expand-abbreviation-with-tab'

#https://github.com/atom/autocomplete-plus/issues/86#issuecomment-82661027
'atom-text-editor.autocomplete-active:not([mini])':
  'tab': 'autocomplete-plus:confirm'

Restuta

Below is the list of modern JS frameworks and almost frameworks – React, Vue, Angular, Ember and others.

All files were downloaded from https://cdnjs.com and named accordingly. Output from ls command is stripped out (irrelevant stuff)

As-is (minified)

$ ls -lhS
566K Jan 4 22:03 angular2.min.js

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

uupaa

Image source

https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png

Try resize it!

• ![](https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png | width=100)

brettlangdon

Wallpapers

Install with git git clone https://gist.github.com/85942af486eb79118467.git ~/Pictures/wallpapers

paulirish

/* bling.js */
window.$ = document.querySelector.bind(document);
window.$$ = document.querySelectorAll.bind(document);
Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); };
NodeList.prototype.__proto__ = Array.prototype;
NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); };

couto

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var folders = {
    APP: path.resolve(__dirname, '../app'),
    BUILD: path.resolve(__dirname, '../build'),
    BOWER: path.resolve(__dirname, '../bower_components'),
    NPM: path.resolve(__dirname, '../node_modules')
};