jacopotarantino

// this function is highly complex. it has a cyclomatic complexity rating of 7.
// it's performance is fine but it's very difficult to read and maintain.
// rating generated by this quick tool: http://jshint.com/
function do_something (config) {
  if (config.prop1) {
    if (config.prop2) {
      if (foo === bar) {
        blah()
      }
    }

jacopotarantino

// java style
export class PWOService {
  private selectedStyle;

  public storeSelectedStyle(style) {
    this.selectedStyle = style;
  }

  public getSelectedStyle() {
    return this.selectedStyle;

jacopotarantino

// progressive anagram generator

// a function that takes in a list of words
// and returns a tree structure with an anagram letter at the head of each branch

function mapWordsToLetterFrequency (source_words) {
  return source_words.reduce((accumulator, current_word) => {
    current_word.letters.forEach(letter => {
      if (!accumulator[letter]) {
        accumulator[letter] = 0

jacopotarantino

/* what do each of these statements return?
   (assume that they are evaluated individually but in order.)
*/

const foo = 'asdf'; //=> ?

foo.bar = 12345; //=> ?

foo; //=> ?

jacopotarantino

((global) => {

  function getTemplate () {
    return fetch('http://backend-php-test.prod.dcos.triplelift.net/ad-experience/template')
    .then(function(response) {
      return response.json();
    });
  }

  function getContent () {

jacopotarantino

// assume this is our original translate function
const translate = (key) => {
  return key.split('.').reduce((acc, current) => {
    return acc[current];
  }, english);
}

// an example of a dictionary of i18n strings with nested properties
const english = {
  foo: {

jacopotarantino

so, in earlier angular1 code, we would list all of the dependencies of a controller in an array where the last item in the array is the controller to inject them into. it looked like this:

someModule.controller('MyController', ['$scope', 'dep1', 'dep2', function MyController ($scope, dep1, dep2) {
  // do something...
}]);

this pattern works but it's ...not great. right? tons of nesting, repetition, people unfamiliar with javascript would be very confused. so then we started using injection syntax.

jacopotarantino

I've seen others struggle(and have struggled myself) with media queries and gigantic CSS files separately and together. I recently learned that CSS import statements support media queries and have done so for a long time (see: https://developer.mozilla.org/en-US/docs/Web/CSS/@import). In other implementations I've seen this ability being used for including external stylesheets into a stylesheet the developer actually controls. I'd like to propose a system where developers use CSS imports by default in order to minimize the amount of data sent to clients and in order to better structure our CSS. An example index.css file and small.css (included file) is show in this gist. Structuring our files this way means that the initial CSS payload is only 306 bytes. Anything more than that is only included if it's relevant to the current client. We can also inline this initial block into the `` of the html removing a single network request from the initial

jacopotarantino

const safe_read = (object, property) => {
    try {
        return property.split('.').reduce((acc, current) => {return acc[current] || undefined}, object)
    } catch(e) {
        return null
    }
}

jacopotarantino

// determines number of times you should roll a die to determine if it is "fair"
const find_number_of_rolls = (number_of_sides, required_confidence) => {
    const allowed_deviation = 1 - required_confidence
    const expected_value_per_side = 1/allowed_deviation
    const rolls = expected_value_per_side * number_of_sides

    return Math.round(rolls)
}

// rolls array takes the form: value_of_side(int)[]