Apr 15, 2014

Here’s how it works 1

  1. Instead of asking users for a password when they try to log in to your app or website, just ask them for their username (or email or mobile phone number).
  2. Create a temporary authorization code on the backend server and store it in your database.
  3. Send the user an email or SMS with a link that contains the code.
  4. The user clicks the link which opens your app or website and sends the authorization code to your server.
  5. On your backend server, verify that the code is valid and exchange it for a long-lived token, which is stored in your database and sent back to be stored on the client device as well.
  6. The user is now logged in, and doesn’t have to repeat this process again until their token expires or they want to authenticate on a new device.
  1. article on medium regarding going passwordless for web apps

Feb 11, 2014

Stress testing

Or torture testing, a form of deliberate intense and thorough testing to determine the stability of a given system or entity. It involves testing beyond normal operational capacity, often to a breaking point, in order to observe the results.

Software commonly used for stress testing

  • Prime95
  • Intel Burn Text
  • Memtest86+
  • LinX
  • OCCT
Nov 13, 2013

Imperative vs Declarative Animations 1

Imperative is animation with JavaScript

Declarative is animation via CSS

Running animations imperatively runs in JavaScript on the browser’s main thread. You may experience jank, or unwanted hiccups and bad performance due to other elements doing style calculations, layout and painting.

Running them declaratively allows the browser to optimize the animations. It can create layers if necessary and run some operations separate from the main thread which gives good performance. The drawback is that there’s a lack of expressiveness compared to animating via JavaScript. Authoring animations can get complex and error-prone.

May 23, 2013

I needed this pattern the other day when I was tasked to build out some functionality for a site utility that emails a report to a set user. The Lazy Function Pattern allows a function to be redefined after first pass. This is great for initialization code where assignment happens on first run or useful for cross-browser feature detection to check what is supported and apply execution based on browser.

Sample code

var person = function() {
  var bornDate = new Date();

  person = function() {
      return bornDate;
  }

  return person();
};

Breakdown of code

When we first call person(), the variable bornDate is assigned the current Date/time. person is then reassigned to a new function object with the bornDate variable in it’s closure. The return value at this point will now always be what is within the person variable reassignment, which is bornDate.

Subsequent calls will now always return with the variable bornDate value that is within its closure.

Promise

Another way to look at this function is that the outer first assigned to person is a “promise”. It promises that the first time it is run it will redefine person to a more useful function.

Cross-browser use

Using the lazy function definition pattern is great when you want to run browser-specific code when doing initial checks. This pattern is efficient because it will only run the check once and each subsequent call to it will execute the browser specific code. Win!

Personal application

The other day I was building out a function for a page utility that created a mailto link of a report for a button. The actual mailto body was a concatenated url encoded string from the contents of the report. I only want this mailto link building to occur once if the user clicks the button, and I save on code execution if the user never even clicks the button, making the utility slightly more performant. This was a good candidate for lazy function definition so that initial click will build the mailto link and would then resolve, and any subsequent links would just have the link resolution occur. Good to know this pattern is available. I can’t wait to use it.

May 6, 2013

OOCSS methodology helps to break up your css code so that you can logically separate objects into modules and classes for reuse and to avoid duplicating code.

Instead of:

#button {
  width: 200px;
  height: 30px;
  background-color: red;
  border: 1px solid green;
  box-shadow: rgba(0, 122, 244, .5) 2px 2px 5px;
}

#box {
  width: 100px;
  height: auto;
  background-color: red;
  border: 1px solid green;
  box-shadow: rgba(0, 122, 244, .5) 2px 2px 5px;
}

You would write this to reuse code and also to separate how these tie in logically (applying one skin to multiple objects that appear the same):

.button {
  width: 200px;
  height: 30px;
}

.box {
  width: 100px;
  height: auto;
}

.skin {
  background-color: red;
  border: 1px solid green;
  box-shadow: rgba(0, 122, 244, .5) 2px 2px 5px;
}