About Tom Alexander

http://teeohhem.com

Posts by Tom Alexander:

Using Frisby.js to test your API

Why test your API?

Testing an API is important because it allows you to assert that you are conforming to the interface in which you promise to deliver. Testing a the API layer explicitly allows you to catch code changes that change data types, number of return values, etc… and can be an important trigger for you to update your unit tests and API Docs.

Why can’t I just unit test?

Unit testing is intended for the developer to vet the units of their code. You should worry about testing at the *method* level and not necessarily how it all fits together. By introducing API testing, you’ll be able to get a better handle on whether you’re using appropriate mock data in your tests and asserting the correct return values.

Well can’t I just rely on automated testing instead?

Automation suites, such as Selenium do not test at the API level; rather, they test at the user interface level. Sure, you could build your own automated tool to explicitly use your API to test behavior, but again, you are not testing the purity and correctness of the API. Sure, if your test uses the API a certain way and a developer breaks it, you can detect API failures. However, these types of tests don’t necessarily check for parameter correctness and all variations of use of an API.

API Testing Example

This is where Frisby.js comes into play. Frisby.js is a JavaScript-based API testing framework that makes it incredibly simple for you to test against your API. Here is an example:

Getting set up

Install Frisby.js + Jasmine Node

Test Structure

Frisby tests require that you reference the frisby global variable. From here, you can call frisby.create to create the structure of your first test:

Write your first test

Let’s say your website allows you to check a stock price by passing in a stock symbol. This is a GET request and takes one required parameter, symbol,  and one optional parameter, timestamp. If timestamp is passed in, the API will retrieve the stock price, if available, at the given timestamp. Otherwise, it will return the latest stock price.

In this example, we used Frisby.js to assert the validity of the response both in TYPES and in values, once we could narrow the stock down to a particular time. In one short test, we tested the response code, the header contents, and the JSON body of the response. Be sure to check out the Frisby.js API for detailed descriptions on each of the statements above.

In conclusion…

In this blog post, we explored WHY we test an API vs. unit testing vs. automated testing and went through a simple example on how to write a test against a simple API. API testing is important because it will help you identify breaking API changes from code that may otherwise been unnoticed. Also, it helps you keep your mock data/unit tests up to date and identify changes needed in your API documentation.

In a future blog post, I will dive deeper into Frisby.js and show you how you can write tests that depend on one another (think OAuth tokens and needing a token for a subsequent test) as well as a few more advanced examples.

 

 

ES6 Features: Classes

Up until ES6, JavaScript lacked the ability to create classes in the way that other languages offer. Sure you could create “classes,” but it always left a sour taste in our mouths. Talk about UGLY code. Although ES6 adds the keyword, “class”, they really are syntactic sugar around the old way of doing it in ES5. You’ll notice this trend around much of ES6 features–but I digress.

Why should I care?
Classes promote structure and the new syntax covers up the yucky code behind the scenes. These new classes also promote the use of inheritance and building structured code.

Imagine a scenario, where you are creating a class to represent a user in your database.

ES5 “Classes”

Eh it’s not really that bad, but it can be really confusing. Aren’t functions functions? How is it possible to create a new instance of a function? There is a lot you can do with building objects and inheritance, by ES5 just didn’t really expose it or make it meaningful enough for novice users to understand.

ES6 Classes

Pretty cool, huh?  This looks and feels like classes in other languages and comes more natural. You explicitly define a constructor, which is how you create an instance of a class. Then you can define members of the class as you see fit (notice you do NOT need the keyword function in front of them–pretty odd and inconsistent if you ask me).

ES6 Class Inheritance

Lets say your database has another type of user called an author. Authors are users but also have additional metadata. You can use class inheritance to model this:

What did we learn here?

  1. Use the keyword “extends” to write a class that inherits from another class.
  2. The keyword “super” becomes available in the child class and can be used to call methods on the parent
  3. You can override methods from the parent class simply by defining the method in the class. Notice there is no @override annotation or anything of the sorts required.

Classes in ES6 are important because they are explicit and help promote structured code. Many JS libraries have implemented their own version of classes, such as Dojo, TypeScript, and CoffeeScript, so it will be interesting to see if those get scaled back in the future as ES6 gets closer to fruition.

Chrome is behind on implementing classes in its spec, but you can try this out on the latest FireFox today. Enjoy!

ES6 Features: Arrow Functions

ES6 introduces a concept borrowed from other programming languages, like C#, Java, and CoffeeScript, called arrow functions. An arrow function is a way to write shorthand syntax for anonymous functions, all the while keeping the same binding of “this” as the current object .

Let’s start with an example. Say you have an array that you want to iterate through and print the number to the console if x % 2 == 0. Otherwise, you’ll print the title of your widget. This is how you might do it with ES5 or below:

In ES6, you can write this with arrow functions, without the need to bind to the current object.

Advantages of arrow functions:

  1. No need to write function() as the arrow acts as a shorthand
  2. No need to bind the arrow function to the current context of “this.” It does it automatically.TL;DR: Less code = win!

Want to try it out today? The latest Firefox implements most of the arrow functions spec, as does BabelJS, which I will cover separately in another blog post. Go ahead, give it a shot in the FF developer console! And as always, check the compatibility of ES6 features here: https://kangax.github.io/compat-table/es6/

Enjoy!

Tucker Stilley custom KeyStrokes Layout For Logic Pro

In 1998, Lee Abramson a musician with ALS, released the Album “Toxic Charm” under the nom de plume “Ace Noface” and sent out a press release with the words “ALS” and “musician” in the header. Tucker Stilley  another musician with Lou Gehrig’s disease, had a news aggregator sniffing for these words contacted Abramson via e-mail telling about KeyStrokes an on-screen type-ahead keyboard that helps people with mobility impairments use their computers with one finger.

Tucker Stilley Layout

Stilley also sent out a Layout (Above) that automate and simplify common functions in Logic Pro, the Digital Audio Workstation they both use, that normally would require 2 hands. Most importantly, cut (skull/scissors) copy, and paste (school of fish).

Abramson has said “What I do musically wouldn’t be remotely possible without KeyStrokes and Tucker Stilley’s layout”

How sweet it is…

I am on a mission to lose 25lbs by November 8th for my wedding in Cancun, MX. Aside from the usual, and often forgotten, pledge to eat better and exercise, I sat down to think about what seems to always impede my progress of weight loss. While eating a donut and drinking chocolate milk, it hit me! I’m clearly not eating enough sweets! Er…wait a minute. Shit. I need to put down the sweets. I know this sounds trivial and obvious, but when’s the last the time you found it easy to not eat cake or chocolate after a meal or during the day? The more I thought about it, the more I realized that I was purely addicted to sugar.

I thought back to my childhood and how my mother used to prepare desserts after every meal. I have gotten so used to that and have carried on the tradition in my household. While I’m not the expert baker that my mother is, I often find myself munching on Oreos and other sweets after meals. After lunch, it became pretty normal for me to grab a candy bar or other chocolate to fulfill my need for dessert. I would even mask this need by buying especially sugary and sweet cereals and having a bowl after meals. “Oh, this isn’t a dessert, ” I would think to myself as I down an entire bowl of Oreo-os or Chocolate Cheerios. Heck, I would even eat a cookie or two for breakfast because who doesn’t love cookies for breakfast?

It was bad. The cravings were immensely terrible. I was addicted. Now…I have been dessert free for three weeks and it feels GREAT. Sure, I have a bite of a cookie or sweet bread every now and then, but I do NOT crave them one bit. I started counting the times where I would normally have a dessert and it’s astonishing. Whether it be impromptu visits from the future mother-in-law, weddings, or nights out a restaurant, I have passed on them all. I will continue to fight through this desire and strive for a more healthy life. It CAN be done.

I firmly believe food additions are as difficult to overcome as smoking. Give up desserts and high-sugary foods. Quit now. Don’t give yourself cheat days. Quit! Cheat days and other excuses give yourself more reasons to eat the foods which cause addiction. Give them up and you’ll be surprised how much better you’ll feel. Your cravings will be gone and you’ll start not wanting the desserts as often.

I’d love to have a discussion if anyone wants to reach out to me! Have you done this? Was it easy? What are some tips you have to offer? I’ll post a follow-up on my progress in a month or so. GOOD LUCK!

Tom

jQuery .prop(“href”) vs .attr(“href”)

jQuery .prop(“href”) is not equal to jQuery .attr(“href”)

The difference between prop and attr is that attr grabs the HTML attribute where as prop grabs the DOM property.

Example:

Be careful in your decision to use attr for referencing an href. 99% of the time, you probably want to use prop.

jQuery Plugin: Find text within selector element(s) that matches specified language and wrap it in a span[lang=langauge]

Sometimes character encoding detection in the back-end of software can be difficult. Here is a quick solution to do it in JavaScript! I’ve implemented a jQuery plugin that accepts selectors and a language, iterates through the .text() of the selectors, and wraps the text in a <span lang=””> where the lang attribute matches the language passed in. With this code, you can change fonts, apply specific actions to text (right to left or left to right), etc…

Here is an example CSS:

Currently, only hebrew and english are defined in the plugin by default, but you can pass in additional languages in the options object when you call the function. The function parameter expects an object that contains these keys

Here’s an example on how you’d call the function:

Download the code from GitHub

Things I’d like to see improve in CSS4 … Part 1

CSS3 has introduced a lot of neat and useful features, but issues still linger that make every-day development pretty difficult.

Variables/Functions

If you’ve used tools such as Sass, you might already be familiar with being able to use variables in CSS. In my mind, you can’t be considered a programming language unless you allow developers to use variables and functions. Otherwise you end up with a ton of repeated code.

Alignment!

Remember in HTML4 where it was considered correct to use <center>  to center anything horizontally and valign=”middle” to center anything vertically? It’s actually very difficult to do that with the CSS3 spec as is.

Well what about text-align: center? This works, but only on block elements. Think about that for a second…

What about vertical-align: middle? This only works on inline elements. Hmm

Right now, the *easiest* way to align anything vertically is through this set of code:

That’s no fun. And positioning something relative/absolute can have unintended consequences, especially since you’re just trying to accomplish vertical alignment.

This, in my opinion, is one of the biggest flaws in HTML/CSS development. As a developer in a fairly large team, this issue comes up on almost a daily basis.

Font Size

ems, pt, px, % and none of them are used as a standard. There are pros and cons to each of the approaches. The convention seems to be moving to percentages, but I often see unintended consequences with that as well. For instance, if I create a new class and I want it to be 110% larger than the body font size, I would define it as having a font-size:110%. The issue is, what if the parent container already has a font-size:110%? Then I am actually making the font-size 110% bigger than the parent’s 110% font-size. This gets pretty messy.

I’d like to see a hybrid approach with percentages or predefined font-px. For instance, you might be able to define these in your stylesheet:

And then in your stylesheet, you could define percentages based off of the font-size variables you define. So, for instance, if you have text underneath a header, you want it to be X % smaller than the HEADER_1_FONT_SIZE.

There are more things I will be covering in Part 2 of the blog. Stay tuned!