SleepScore Labs Data Dashboard in Angular 2

In April of 2017, I was tasked with design and development of a data visualization dashboard for new customers of SleepScore Max, a non-contact sleep improvement system. Designed for both iOS and Android users, my role was to build a web application which would compliment this sleep solution experience by connecting the dots between sleep data and pragmatic advice in a more robust fashion.

I took it upon myself to go head first into Angular (granted my previous experience with AngularJS) but I got a first-hand view of how different both JavaScript frameworks were.

SleepScore Max login page written in Angular.

SleepScore Max login page written in Angular.

I kickstarted this project prior to the full standardization of Angular CLI so I was pretty much left to my own devices on how to properly build and deploy this application into a cloud instance.

I credit PluralSight author Deborah Kurata as the initial key to making this project work. Specifically, her course in Angular: Getting Started was a jaw-dropping course on Angular’s moving parts. Needless to say, now that I have both AngularJS and Angular perspectives, my best assessment on distinguishing between AngularJS and Angular is that while AngularJS thinks of drafting features from controllers and scope, with Angular you need to abstract those things via components.

To dumb it down for me, I’ve come to think of a component as simply a web page (the overall object), while the super powers you write inside of that web page act as the methods and properties of that web page. Coming to that conclusion wasn’t linear. I needed to dive into TypeScript since it is the driving force in authoring modern Angular apps.

I’m still tinkering with TypeScript and have a long way to go to understand its full value but I definitely became a fan simply because it makes a JavaScript author a bit less error prone. Let’s face it, web browsers are still running JavaScript in ES5 and not ES6. Having that superset above JavaScript to reinforce little things like the data-type of an object is awesome and learning how to write a component in TypeScript helped reinforce how I’ve dumbed down the difference between AngularJS and Angular.

A splash of jQuery animation for the sleep score petals, CSS styling to chart out the breakdown all inside of an Angular dashboard.

A splash of jQuery animation for the sleep score petals, CSS styling to chart out the breakdown all inside of an Angular dashboard.

Yes, this dashboard is also responsive.

Yes, this dashboard is also responsive.

What’s next? I’m already thinking about the upgrade path into Angular version 5, smoothening out continuous integration and making Angular CLI the gold standard for facilitating all portions of this project.


Responsive Web Design for

3 years ago, Thermo Fisher Scientific (previously Life Technologies) was tasked with enhancing its original mobile experience integration which leveraged Moovweb’s cloud platform. It was a good solution in getting the domain introduced into browsers outside of desktop, specifically mobile and tablet devices but it certainly came with its own set of constraints.

While Moovweb was an excellent platform for enhancing on mobile conversion rates it came at the cost of scalability and ease of maintenance. The overall platform required you to maintain two separate codebases—your desktop HTML and Moovweb’s SDK, which effectively transformed your HTML into mobile-friendly elements. It was also a page-by-page type deal. Every page would require its own transformation. Every transformation was its own subset of code. The first two waves for those previous projects had the strictest of intentions on mobile-optimizing eCommerce related workflows for all regions but in English only (e.g. checkout flows). It was not enough. The domain needed more flexibility in a web property that could display well to a majority of legacy and evergreen browsers as well being agnostic of device type.

Because of these limitations the Responsive Project for was designed to effectively address the following constraints:

  • Reduce dependency on additional vendor code.
  • Generate mobile, tablet and desktop experiences from one codebase.
  • Scale solutions which would be available globally and not just page-by-page.
  • Responsive interfaces for all regions, all languages.
  • Extend the experience beyond eCommerce: content authored areas and channels outside of B2C.

The domain is huge and its attached ecosystem is a collection of multiple applications owned by multiple teams with their own standard of implementation. Adding to that loophole, not every application in the domain was a candidate for this new responsive experience. From June 2016 and forward, our team had to break features down into chunks.

It was agreed that the header, navigation and footer would be the first to address as this was considered the foundation for everything else to work. Each app would rope this subset of components based under their back-end constructs (e.g. Java, ColdFusion, etc.). This took 3+ months. Not an easy feat if you consider the amount of tooling currently being offered from these areas. You have a series of controls for search tools, commerce and deep links into areas such as login and Order Support.

Real estate doesn’t come cheap with smaller screen sizes. The basics needed to be in order first. In essence, an organized CSS media query strategy for an agreed set of breakpoints and a baseline approach for DOM manipulation in the event this choice ever needed to be made.

Listed below were some saving grace plugins, libraries and frameworks from the open source world which allowed us to get our job done:

  • Bootstrap 2.3.2 – the overall HTML, CSS and JS framework for delivering responsive enabled user interfaces. Keep in mind that support for legacy browsers in IE8+ was priority. Also, since the domain is driven from a desktop-first approach this framework was still considered standard.
  • jQuery 1.8.1 – a minor upgrade path for better DOM selector performance. Originally, 1.8.0 was elected to be the global jQuery library available but that caused problems for older Internet Explorer browsers with .ready() firing prematurely. See jQuery defect 12282.
  • Responsive HTML Tables – a CSS technique which turns table elements into div blocks with labels being controlled through data attributes.
  • TableHeadFixer – a jQuery plugin which was modified in-house to give content authors more flexibility in drafting HTML tables with features such as locked table headers or columns.


Debugging Tips and Tricks

Writing code is only one small piece of being a developer. In order to be efficient and capable at our jobs, we must also excel at debugging. When I dedicate some time to learning new debugging skills, I often find I can move much quicker, and add more value to the teams I work on. I have a few tips and tricks I rely on pretty heavily and found that I give the same advice again and again during workshops, so here’s a compilation of some of them, as well as some from the community. We’ll start with some core tenets and then drill down to more specific examples.

Debugging Tips and Tricks

Back to Basics: Scoping And Hoisting

So, fellow JavaScript developers, my name is Fox Reymann, and tonight I’m going to present a talk, Ace JavaScript Interviews, Scoping and Hoisting. If any of you think the talk is too simple, let me start with a quiz. I have some code here, and as you can see, there’s a function. I’m running the function. I could…yeah, okay. So, we have an anonymous function. Okay, I have a function. I’m running the function, and I’m console logging x. So, what is going to be console log when I run this program? You have 10 seconds to look at the code and think. Okay, who’s for 10? Okay. Okay. Who’s 1? Undefined? Gs? Okay, so, yes, it’s 10, so no. Yes and no. It’s not Gs, not 1, not undefined. It’s 10. If you don’t know why, you will understand after the talk. If you listen carefully, yes. So, scope is a visibility of variables defined in one part of the program to another part of the program. So, if you have a variable A, can you use it above in the code, below in some function in a class, anywhere. So, here in my program, I’m defining a variable a. What would be the scope of this variable? Yes, it’s global. Now, there’s a function B, variable B. What is going to be a scope of this variable? – [Men] [Crosstalk] – Function scope, correct. This will be visible everywhere in this function, here, here, and also here. Yes, perfect. Boom, boom, boom. Function c, we are defining a variable with “let” and the constant with “const.” What is going to be a scope of these two, of this variable and this constant? – [Crosstalk] – A statement scope, you don’t call it a statement. Yes, please? – [Inaudible: 00:02:49] – Block, yes. Do you know why they change this [inaudible 00:02:54], and now it’s a block scope? – [Inaudible: 00:02:57] – I don’t know, but I think they tried to make it just more similar to other programs, I think, just so guys from Java C# can…they can think that…they can understand JavaScript. They don’t understand it anyway, because you need to understand JavaScript to understand the JavaScript, but they tried to make some attempt to make JavaScript more like Java? Stupid idea, and yes, so, now there’s another example. Function D, I’m running function D, and I’m console logging D. What is going to be console logged? – [inaudible 00:03:37] – Error, reference error, correct. Let me just prove it to you. I need to just comment out this console log before, so, where’s the function D? Blah, blah, blah, blah, blah. Function D. Reference error D is not defined, yes. Sorry, guys, my F function doesn’t work. Enter my bash profile. Okay, so, I’m going to comment this statement. What is going to be console log now? – [Crosstalk] – Undefined, yes. Most people say it’s undefined, yes. That’s correct. Do you know why? – [Inaudible 00:04:31] – No, no, no. I… I’m giving the talk. I will explain. This is because of hoisting, behavior specific to JavaScript, which means moving declarations of variables to the top of their scope. So, in this case, declaration of definition, declarations of this variable is here, because this variable has a function scope. And here in the code, the [inaudible 000:05:04] is defined with 10. So, when you declare a variable, it’s declared, but it’s undefined. You console logged it. It’s undefined in here, so now when I will run the program, it will say undefined. You can see it here. Okay, let me just comment it out. Next, boom, boom, boom, boom, boom. What’s going to be console logged? What’s going to happen? – [Inaudible 00:05:38] – Correct, because this function is also hoisted. So, in program languages without hoisting, you do B in error, but here this function is moved to the top of the current scope, so, to the top of the program even before the title of the talk. Now a function FF. – Undefined. – Undefined, you say. – [Crosstalk] – Yes, I got you. Nobody knows, okay. Yeah. – [Crosstalk] – No, the function is the closest answer. Yes, I will show you FF is not a function type error, yes, because this variable is declared at the top of the program, somewhere at the top. And here the function is being assigned to this variable. Here it’s undefined. You try to run undefined as a function, and you have a type error. Oh, nothing else, almost the end of the talk. Now I will explain you why this is 10. Now all of you should understand why this is 10, even guys that thought it’s 1 or Gs. So, in this code, this variable, X, is a function scope. New to hoisting, it’s being declared in here. After declaration it’s being undefined. Now give this statement which says if not X, so, if not undefined, which is equal to true. So, each statement is being executed. X is 10, and now when I console log, yes, it’s 10. Thank you, guys.

Back to basics of JavaScript.