gugadev

Enable tab completion for JSX with Emmet in Atom

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

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

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

#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.

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

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

Image source

https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png

Try resize it!

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

Wallpapers

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

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {

	'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'

	/* 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)); };

	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')
	};