How to display fontawesome icomoon and font icons on a Windows 10 with blocked untrusted fonts

Windows 10 has a mode to disable font-loading from external sources, such as emails when the font has to be fetched outside of the installed fonts. This feature is meant to prevent from attacks coming from untrusted fonts.

The icons in our UI are made with a font file. We used icomoon, but if Windows 10 is set up with the same set similar to projects like fontawesome. We use custom fonts with icomoon.

However, this brings problems with displaying our UI in Firefox and IE11.

How can we solve this problem? The Microsoft recommended way it is to either install the font in the system or whitelist the application that needs that font.

We thought of three ways, at least initially:

  • Install the font
  • Use an SVG file
  • Propose the customer to whitelist the browser to let them use our app. This is the last option as it would make the setting less secure.

Continue reading How to display fontawesome icomoon and font icons on a Windows 10 with blocked untrusted fonts

Forcing Chrome to use the GPU to improve performances on redraw

In Chrome for Android I am working with large images. What we want it is the ability for the user to resize the image properly in a smooth way. For small images this works quite fine, however when it comes to large images, for example images captured from device’s camera, this operation is not really smooth.

To force Chrome to use the GPU, all we need is a CSS transform property applied to the image, for example:


transform: translate3d(0, 0, 0);

This will improve drastically the perceived smoothness of the image while working with it. Even if the CSS transform property it is not going to change anything on how the image is displayed or rendered, it will force the GPU to take care of the rendering, making the transition much smoother.

Inserting images from the camera into the document using a WebView

The steps a user follows to insert images into the document are:

  • Tap on a file input button
  • Choose to use the camera roll
  • Read the image
  • Insert the image into the document.

Continue reading Inserting images from the camera into the document using a WebView

Using the page visibility API in an AngularJS project

The page visibility api allows developers and designers to
control when the user is actually on the page, and when the user is away, for example the tab is
opened but not in focus, or the browser is minimized.

The first use I did of this api is to interrupt server side refreshes of the data, while the user is
not on the page, to avoid consumption of server side resources.

The specification gives us two tools: the first one is a variable document.hidden which is
true if the page is not on focus, and false while the user is actually on the page. The second tool we have is
an event: visibilitychange which tells us when to look for the value of that variable.

So far so good, but how can we use this?
Continue reading Using the page visibility API in an AngularJS project

Using effective promise caching in factories with AngularJS

I needed a way to cache the results from a factory, minimizing the number of requests server side. I started from a simple factory called User, which were simply fetching data from a remote resource:

myApp.factory('User', ['Restangular',
  function (Restangular) {

  return {
    getUser: function () {
    return Restangular.all('user').getList().then(function (user) {
      return user[0].email;
    });
    }
  };
  }
]);

Not really efficient: the user, which does not change during the session were fetched every time.

AngularJS provide the promise/deferred $q module, which allows much more modularity to our code. So my first real attempt to cache the result have been:

myApp.factory('User', ['Restangular', '$q',
  function (Restangular, $q) {
  var userCache;
  return {
    getUser: function () {
    var deferred = $q.defer();
    if (!userCache) {
      Restangular.all('user').getList().then(function (user) {
      userCache = user[0].email;
      deferred.resolve(user[0].email);
      });
    } else {
      deferred.resolve(userCache);
    }
    return deferred.promise;
    }
  };
  }
]);

The downside of this approach is that until the cache is not populated, every time this factory is called the request is performed any way. Because of that I was getting a number of server side requests, since I use this factory to fetch user permissions to display or hide components in my SPA UI.

I am been struggling with this problem, leading me to this question on StackOverflow.

In the end I figured out that is possible to build an array of promise objects, and resolve them all when the server side result is ready:

myApp.factory('User', ['Restangular', '$q',
  function (Restangular, $q) {
    var userCache, promises = [];
    return {
      getUser: function () {
        var deferred = $q.defer();

        if (promises.length > 0) {

          console.log('%cAdd to queue', 'color:orange;');
          promises.push(deferred);

        } else if (!userCache) {

          promises.push(deferred);
          console.log('%cFetch from live', 'color:red');
          Restangular.all('user').getList().then(function (user) {
            var i;
            userCache = user[0].email;
            for (i = promises.length; i--;) {
              console.log('%cYay! Resolving the existing promises with a single server side request', 'color:white;background:deepskyblue');
              promises.shift().resolve(userCache);
            }
          });

        } else {

          console.log('%cFetch direct from userCache', 'color:green');
          deferred.resolve(userCache);

        }

        return deferred.promise;

      }
    };
  }
]);

Let’s have a look at the code:

I define the two variables

var userCache, promises = [];

outside the returned object, to avoid subsequent overwrite of those variables.

The next step is to have a different promise for each request we get. So we define the deferred object inside the closure of our factory. Now we have to save that object, in order to be able to resolve it.

What we do is:

  1. If the promises array exists we add the new promise to the queue:

    if (promises.length > 0) { promises.push(deferred); }

  2. If the promises array is not populated (promises.length === 0) we check if the userCache variable contains some values. If it doesn’t then we have to fetch it from server side.
  3. The last scenario is when userCache exists, and then we can resolve the promise directly.

This list of steps misses something: when the promises added to the array are resolved?

Looking harder in what happens inside the fetch you can figure out yourself:

Restangular.all('user').getList().then(function (user) {
  var i;
  userCache = user[0].email;
  for (i = promises.length; i--;) {
    console.log('%cYay! Resolving the existing promises with a single server side request', 'color:white;background:deepskyblue;font-weight:bold;');
    promises.shift().resolve(userCache);
  }
});

When the server respond we resolve the chain of promises with the result just fetched, therefore minimizing the number of requests and improving the speed and user experience considerably.