Technology

Never trust user input, Angular $digest errors, and Just fix the bugs

July 26, 2018

Well readers this is the last what did you learn post for the summer as next week officially starts fall. Where did the summer go! Well here is what I learned this week.

User Input, never trust it

We are developing a REST(sort of) api for our angularjs application and a few times we query by url based upon user input.

A simple example is a form where a user does a lookup based upon some sort of key.

/Resource/UserKey

Now if the user types say UserKey/ the query will work correctly however if you need to post UserKey/ to the backend for some reason it clearly does not match UserKey. Always sanitize user input.

AngularJs $digest() Errors

Chances are during your utalization of the awesome angularjs framework you will eventually encounter the dreaded Error: 10 $digest() iterations reached. Aborting! error. This usually happens if you modify scope values in a watch function which causes an infinite $digest() loop. Recently we encountered this error and for the life of us could not locate the cause.

Here is the simplified example

<div ng-app="" ng-init="items = []; id= 0">
    <input type="text" ng-model="text"/>
    <input type="button" ng-click="id = id+1; items.push({text: text, id: id})" value="Add"/>
    <ul>
        <li ng-repeat="item in items">
            {{item.text}}
        </li>
    </ul>
    <h1 ng-show="items | filter: {id: 1}">List Has Something</h1>
</div>

If you run this example you will see the <h1/> tag displays correctly but you will constantly receive digest errors. Any idea what the cause? It took me a few bug fighting sessions until I discovered it as well. It is caused from the expression in the ng-show which filters the list. If you change the expression to

<h1 ng-show="(items | filter: {id: 1}).length > 0">List Has Something</h1>

The digest error disappears (fixed example). From my understanding this happens because of the way angularjs internally tracks the expression. When you call filter it will return a new array each time so angular constantly does a digest since it changes after each iteration.

Just Fix the Bugs

In our backlog we have a few small bugs that always seem to get shuffled to the bottom as no one wants to work on them as bug fixes are not fun. Well let me just say just fix them the amount of time that is wasted talking about the small bugs you might as well just fix it, close it down, and move on.

Input Type Date

I love the date input type it offers so much convenience to your users when they have to deal with dates as it will open the date picker for iOS.

Some things you need to handle

  • If you are binding to the date type in a browser that supports the date type, you need to supply the value in yyyy-mm-dd
  • If you need to supply your own custom calendar (custom style or added text) you need to apply custom css provided in this answer to hide browser controls in chrome.
  • Handle timezone correctly, we ran into an error where if the user would type in a date it would display the previous date because the timezone was missing from the raw value.

Twilio Now Supports MMS

This week at twiliocon they introduced the ability to send MMS messages via their messaging API. How cool is that? Now we can send pictures of kittens to your phone when you receive a low balance alert (I kid!). I am curious how we can utilize mms in a creative fashion for an online banking application.

Random idea: Two factor, we send you an apple you type or reply apple to log into the site

No Comments

Leave a Reply