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

Finding the real position of an element with respect to the document

The first attempt when trying to get the position of an element with respect to the document has been to use the getBoundingClientRect method.

Element.getBoundingClientRect and Element.getClientRects

Continue reading Finding the real position of an element with respect to the document

Understanding MouseEvent properties clientX and pageX

I am working in a section of the application which is going to require the user to be able to do a number of different operations. What I need to use for this are different kinds of MouseEvent properties, however it is important understanding them to use them in the most effective way.
Continue reading Understanding MouseEvent properties clientX and pageX

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.

Event.isTrusted property from UI Events shipped in Chrome 46

Working on a large JavaScript project is not easy. We need fine tuning in everything we do, and sometimes we need to distinguish between a user-generated event and an event generated by a script.
Why is this important? Because the ability to distinguish between a user initialized action and a scripted one can make the difference to optimize the UI.

Continue reading Event.isTrusted property from UI Events shipped in Chrome 46

The most efficient way to listen for a resize

In Android when the keyboard shows up, the size of the window will change triggering a resize event on the window.
When the resize event would get fired on a mobile device?

  • When the keyboard shows up
  • When rotating the device
  • When the browser window shrinks because the user uses a multiwindow view

Now we want to listen to this event just once and then act, avoiding to do too much because it would impact on the frame-rate of our application. I could argue here that the keyboard component will only fire one window resize event however this cannot be guaranteed; In the Android market there are literally thousands of different keyboards and might be that one of them is going to fire the resize event more than once, causing difficult to debug behaviors once they get reported by a user.

Also another scenario would be that two resize events are quite close for example when the user does some operations it will hide and show the keyboard quite quickly, firing the event at least twice in few milliseconds.

We need to use setTimeout and clearTimeout in a clever way:


function actionOnResize (e) {
  // do stuff
  console.log('do something');
};
var action;
window.addEventListener('resize', function (e) {
  clearTimeout(action);
  action = setTimeout(function () {
    actionOnResize(e);
  }, 50);
}, false);

A perfect delay

Depending on the application specifications you need to find a good delay for this to fire accordingly. In my scenario a delay of 50ms has been what I needed for.

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

Showing errors after the user finishes typing with angularjs

I really like the inline form validation pattern: as the user finishes typing the validation on that input is immediately performed. This improve the user experience, by:

  • a 22% increase in success rates,
  • a 22% decrease in errors made,
  • a 31% increase in satisfaction rating,
  • a 42% decrease in completion times, and
  • a 47% decrease in the number of eye fixations. (source alistapart.)

Continue reading Showing errors after the user finishes typing with angularjs

Same functionality, same UI, but different controller in AngularJS

I am relatively new to AngularJS, but I don’t miss occasion to be surprised by the simplicity of this spectacular framework.

First of all we define a service which contains the functionality we need. In this case is a “Welcome panel”, where it’s visibility can be managed from different points.
Continue reading Same functionality, same UI, but different controller in AngularJS

Setting Page titles with AngularJS

Factories

In AngularJS if we want to share informations across multiple controllers we should use factories.

I needed to change the page titles from multiple locations, so I made use of an extremely simple factory. We are going to use a local variable, named title which contains the title, and two exposed methods: title, which is going to be in charge of returning the title, and setTitle which we’ll call from the controllers to change the title page.
Continue reading Setting Page titles with AngularJS