adambankin

Webstack Front-End Build Process

Overview of Flow

When we run rock build it performs the following tasks for front-end:

Build

1. rock --runtime=node08 run grunt build
   • Use Grunt and Bower to download all front-end dependencies;
   • Organize the downloaded files on the file system.

adambankin

Email

to 'ab@cd.com' (success)

{
	"lightbox": {
		"is_saved": 0,
		"images": {
			"errors": {},
			"items": [{
				"cropped": {},

adambankin

Send/Email

Found in www/shutterstock/comps/email_lightbox.md

{
	type: "server/invalid",
	text: "{% i18n INVALID_EMAIL_SHORT %}Please enter a valid email address.{% endi18n %}"
}

all other errors seem to be handled in client JS with

adambankin

function correctPaths (buildValues) {
  var keys = Object.keys(buildValues);

  keys.forEach(function (key) {
    buildValues[key] = buildValues[key].map(function (path) {
      return path.replace(/^example\//, '');
    });
  });

  console.log(buildValues);

adambankin

require(['stuff'], function (stuff) {
	var $el = $(stuff.id);
	
	return {
		myFunction: function () {
			stuff.doSomething(function () {
				$el.addClass('stuff');
			});
		}
	}

adambankin

function MyClass () {}
MyClass.prototype.doSomething = function (item1, item2, item3) {
	this.result = item1 + item2 + item3;
};

function MyComposedClass () {}
MyComposedClass.prototype.doSomethingElse = function () {
	MyClass.prototype.doSomething.apply(this, arguments);
}

adambankin

var parseDate = (function () {
	// test if `valueOf()` returns as UTC or Local time
	var isUTCTime = ((new Date(Date._parse('2015-03-23T00:00:00'))).valueOf() === (new Date(Date.UTC(2015, 2, 23, 0, 0, 0))).valueOf());
	
	// chrome, safari and opera return UTC time so we need to convert it to Local time
	function utcDate (str) {
		var date = localDate(str);
		return new Date(date.valueOf() + (date.getTimezoneOffset() * 60000));
	}
	

adambankin

function parseDate (str) {
	return new Date(Date._parse(str.replace('T', ' ').replace('-', '/')));
}

adambankin

/*
Open a page in Chrome and go to about:blank
Then, in Dev Tools, paste the code below into the console

After 10 seconds you'll see <div id="myElement"> in the console
*/

(win => {
	win.obj = {
		fetch: o => setTimeout(o.success, 10000)

adambankin

var createElements = (function (document) {
	var div = document.createElement('div');

	return function (str) {
		var dF = document.createDocumentFragment();

		div.innerHTML = str;

		while (div.firstChild) {
			dF.appendChild(div.firstChild);