codesandtags

/*------------------------------------------
  Responsive Grid Media Queries - 1280, 1024, 768, 480
   1280-1024   - desktop (default grid)
   1024-768    - tablet landscape
   768-480     - tablet 
   480-less    - phone landscape & smaller
--------------------------------------------*/
@media all and (min-width: 1024px) and (max-width: 1280px) { }
 
@media all and (min-width: 768px) and (max-width: 1024px) { }

codesandtags

// (c) 2017 Yami Odymel
// This code is licensed under MIT license.
package main

import (
	"fmt"
	"html"
	"strconv"
)

codesandtags

Monolith

The Monolithic Ball of Mud

• The Ball Of Mud represents the worst case scenario for a Monolith. Also called as Spaghetti Code.
• No clear isolation in the application.
• Complex dependencies where everything depends on every other thing.
• Hard to understand and harder to modify.

Cleaning Up The Ball Of Mud

• To clean up the ball of mud we introduce isolation into the application by dividing the application along clear domain boundaries.
• We introduce packages and libraries that help isolate related pieces of code. They provide a clean and consistent interface.

codesandtags

const getFormattedDay = (stringDate) => {
	const date = new Date(stringDate);
	const options = {
	  weekday: 'short', 
	  month: 'short', 
	  day: 'numeric' ,
	  hour: '2-digit',
	  minute: '2-digit',
	  second: '2-digit',
	  year: 'numeric', 

codesandtags

// Generate unique IDs for use as pseudo-private/protected names.
// Similar in concept to
// <http://wiki.ecmascript.org/doku.php?id=strawman:names>.
//
// The goals of this function are twofold:
// 
// * Provide a way to generate a string guaranteed to be unique when compared
//   to other strings generated by this function.
// * Make the string complex enough that it is highly unlikely to be
//   accidentally duplicated by hand (this is key if you're using `ID`

codesandtags

codesandtags

// Probabilities
const getRandomNumberOneToHundred = () => Math.random() * 100;
const keys = {
	arrowLeft  : { key : "ArrowLeft", keyCode : 37, code: 37 },
	arrowUp    : { key : "ArrowUp", keyCode : 38, code: 38 },
	arrowRight : { key : "ArrowRight", keyCode : 39, code: 39 },
	arrowDown  : { key : "ArrowDown", keyCode : 40, code: 40 },
	one  : { key : "1", keyCode : 49, code: 49 },
	two  : { key : "2", keyCode : 50, code: 50 }
}

codesandtags

// Probabilities
const getRandomNumberOneToHundred = () => Math.random() * 100;
const keys = {
	arrowLeft  : { key : "ArrowLeft", keyCode : 37, code: 37 },
	arrowUp    : { key : "ArrowUp", keyCode : 38, code: 38 },
	arrowRight : { key : "ArrowRight", keyCode : 39, code: 39 },
	arrowDown  : { key : "ArrowDown", keyCode : 40, code: 40 },
	one  : { key : "1", keyCode : 49, code: 49 },
	two  : { key : "2", keyCode : 50, code: 50 }
}

codesandtags

// The selectors
const yesButton = document.querySelector('[aria-label="Like"]');
const noButton = document.querySelector('[aria-label="Nope"]');
const getRandomNumberOneToHundred = () => Math.random() * 100;

// Logic
const MINIMUM_NUMBER_OF_PHOTOS = 3;
const RANDOM_PROBABILITIES = 80;
const MILISECONDS_TO_CLICK = 2000;
const getNumberOfPhotos = () => {

codesandtags

/*
  Chrome does not let you modify the keyCode prop when you trigger it, so it defaults to 0. 
  You can use this code to trigger a keydown with a char code of 0 in chrome. 

  If you use initKeyEvent instead of initKeyboardEvent, it will work in FF 
  (the bellow example would trigger keydown with a char code of 65 in FF).
*/

document.addEventListener( 'keydown', function( event ){
  console.log( event.keyCode )