How To Post Data With Fetch API To An ExpressJS API Endpoint

Let’s start by assuming that our app is set up and express is running.

We need to have a route to

app.post("/capture", homeController.getPostRequests);

Let’s define our controller under src/controllers/homeController.ts:

import { Request, Response } from "express";

export let getPostRequests = (req: Request, res: Response) => {
  console.log(req.body); // Data coming from the frontend
  res.json({ "message": "got it", other: [ 1, 2, 3 ]  });
};

And import it in server.ts:

import * as homeController from "./controllers/homeController";

In the frontend we’ll have:

fetch("https://localhost:3000/capture",
{
  method: "POST",
  headers: {
    'Accept': 'application/json, text/plain, */*',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ user: "mimo", "email": "[email protected]", "more": [ "a", "b", "c" ] })
})
.then(res => res.json() )
.then(data => { console.log(data) }) // Logs data coming from server

How to create a SSL certificate for localhost development in NodeJS/Express/TypeScript

Generate the required SSH keys. In the process we’ll be asked for a few questions about the organisation etc.

openssl req -x509 -newkey rsa:2048 -keyout keytmp.pem -out cert.pem -days 365
openssl rsa -in keytmp.pem -out key.pem

Now we have our certificates ready for use.

In our index.ts:

import * as https from "https";
import * as fs from "fs";
import * as express from "express";

// expressJS options
const httpsOptions = {
  key: fs.readFileSync("/Users/mimo/.openssl/key.pem"),
  cert: fs.readFileSync("/Users/mimo/.openssl//cert.pem"),
  requestCert: false,
  rejectUnauthorized: false
};

const server = https.createServer(httpsOptions, app).listen(app.get("port"), function() {
  console.log("server started at port 3000");
});

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