craigmr

The Bits and Bytes of JavaScript

Summary

The bitwise operators (&, |, ^, >>, <<, ~) and raw binary are some of the least understood and used features in JavaScript, however they are all around you. Inherited from C, bitwise operators give you the power to quickly encode and process complex datasets. CSS hex/rgba colors, unicode (UTF8), emjios, base64 files, streaming videos, 2d and 3d games, and setting file permissions are all examples the magic of bits, bytes, and bitwise operators. Using UT8 as an example we will cover the basics of binary and logical operations. From there we'll explore more advance usages for bitmasks, flags, protocol buffers, and learn about shared buffered arrays in future versions of JavaScript.

craigmr

const accessor = {
  isEntityCached(schema, id) {
    const key = schema.getKey();
    const entities = this.entities.get(key);
    return entities ? entities.has(id) : false;
  },
  getEntity(schema, id) {
    const key = schema.getKey();
    return this.entities.getIn([key, id]);
  },

craigmr

Since the creation of advance framworks like React, Angular, Polymer, and others web development is evoluting by focusing on component based development for large SAPs. These components allow developers to create modular, single focused pieces of functionality that are easy to maintain and adapt. Browser vendors recongize the power of components and are working on supporting native web components. While support is growing for native componets, directives in Angular give developers the power to create web components today. Directives are the most misunderstood and mysterious feature of Angular, but contains the some of most power and functionality. This talk will show how moving your functionality away from ng-controller and into directives will provide the flexibilty and modularity needed for modern SAPs.

Craig Simpson is the lead frontend developer for PureCars in Atlanta and has been developing frontends for 10 years. He is a fan of both React and Angular, advocate for UI/UX, and believes TDD and continous

craigmr

<div style="width:300px; height:250px; text-align: center;">
  <a href="http://play.captionable.com/widget/charliereid/link" target="_blank" style="padding: 0;margin: 0;">
    <img src="http://play.captionable.com/widget/charliereid/image" alt="Can you guess the caption?" height="250" width="250">
  </a>
</div>

craigmr

<!-- Start Captionable Widget Tag -->
<script>
  var username = 'charliereid';
  var width = 300;
  var height = 250;
  document.write('<iframe src="http://play.captionable.com/widget/'+ encodeURI(username) +'?w='+ width +'&h='+ height +'" width="'+ width +'" height="'+ height +'" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no" allowtransparency="true"></iframe>');
</script>
<!-- End Captionable Widget Tag -->

craigmr

//So writing out the arrays like this works but will lead to bugs b/c since allQueries is just conversionTotalsQueries and conversionTypeQueries
//combined you might forget to update one array. To prevent that just concat the two.
var allQueries = [conversionsQueryMonth, leadsQueryMonth, actionsQueryMonth, conversionsQueryDay, leadsQueryDay, actionsQueryDay];
var conversionTotalsQueries = [conversionsQueryMonth, conversionsQueryDay];
var conversionTypeQueries = [actionsQueryMonth, actionsQueryDay, leadsQueryMonth, leadsQueryDay];

//refactored to use less code and prevent bugs
var conversionTotalsQueries = [conversionsQueryMonth, conversionsQueryDay];
var conversionTypeQueries = [actionsQueryMonth, actionsQueryDay, leadsQueryMonth, leadsQueryDay];
var allQueries = conversionTotalsQueries.concat(conversionTypeQueries); //Returns new array so conversionTotalsQueries is not modified

craigmr

angular.module('valueIntelligence.test', [])
  .config(function(VIBirstProvider) {
    VIBirstProvider.setConfig({
        url: ''
    });
  });

angular.module('valueIntelligence.test').provider('VIBirst', function(){
  var saConfig = {};
  

craigmr

var zipCodeData = {
  '30324': {
    value: 10
    //Etc.
  }
};

var map = new google.maps.Map(document.getElementById('map-canvas'), {});
var zipPolys = createZipPolygons(map);

craigmr

(function nonFunctionalExample(){
  this.breadCrumb = []; //<-- external state
  
  this.node = {
    name: "Child",
    parent: {
      name: "Parent"
    }
  };
  

craigmr

/**
 * calculatePromise() Use promises to get x and y values, now we can run our 
 * async tasks in parallel using Promise.all. Once we have both values
 */
function calculatePromise() {
  var y = new Promise((resolve, reject) => {
    setTimeout(() => resolve(2), Math.random() * 1000);
  });

  var x = new Promise((resolve, reject) => {