Ali Stump alisonailea

How to Eyeball Your ‘This’ Context in Javascript

by zach.dev

The early programmer struggles with the Javascript keyword this. But understanding your this context is easier than it seems.

This is all about where a function is invoked. Often, early programmers worry about where the function was declared. Perhaps the function was declared in a specific file or a particular object. Surely this changes it's this!

Nope.

##Jama and Ractive.js

Jama has been originally focused on hiring full stack/Java developers. As of May 2012 the first full time front end developer was hired, and I was hired shortly after in July. Jama is mostly a monolithic ExtJS application which is great if you know nothing about front end development and want something up relatively quickly and easily and do not understand how to build structure your own HTML/CSS well.

Our goal was to replace ExtJS but rebuilding the application from the ground up was not an option. So we devised a plan to utilize Ext Containers that would simply render on the page and allow us to use whatever we wanted in them. This allows us to start granular and slowly start replacing larger and larger Ext components.

Another part of the application was already built with AMD modules so in order to encourage module reuse we extend Ext container, and implement a few methods to pull in an AMD module, pass in configuration data that may be still coming from the Ext world, bind to nec

	function decorate(tag, template) {
	customElements.define(tag, class extends HTMLElement {
	constructor() {
	super();
	this.attachShadow({ mode: 'open' });
	}

	connectedCallback() {
	let root = this.shadowRoot;
	if(!root.firstChild) {

	module.exports = function(mixin, value){
	switch(value){
	case "full":
	var rule = {flex: "0 0 100%"};
	break;
	case "1of2":
	var rule = {flex: "0 0 50%"};
	break;
	case "1of3":
	var rule = {flex: "0 0 33.3333%"};

	.gradient-animation( @start, @end, @transTime ){
	background-size: 100%;
	background-image: linear-gradient(@start, @end);
	position: relative;
	z-index: 100;
	&:before {
	background-image: linear-gradient(@end, @start);
	content: '';
	display: block;
	height: 100%;