Javascript Global Error Handler

Today i’have created a simple class to log in the backend the javascript error, so i can have a real time monitoring of how error appear to the users.

We can use a window.onerror and the addEventListener rewrite.

Window.onerror has been available in most browser, but the argument that are passed on each browser are different:

BrowserMessageURLlineNocolNoerrorObj
Firefox
Chrome
Edge
IE 11
IE 10
IE 9, 8
Safari 10 and up
Safari 9
Android Browser 4.4

This is my class with a _wrap function, and a SendError that trasmit the data on the backend

In the message we put the stacktrace.
To use it at the init of your application:
let handlerError = new HandlerError();

Write to me if you have some suggestion to improve it.

WordPress Plugin Creation Tutorial – Simplest way

Today I asked myself how to explain to a junior, how to create a wordpress plugin, the simplest way. Without the inclusion of complex structures with public folder, includes, ….., but something very very simple.

Below I will explain how to create a plugin to manage some date, in this example is a Sport Race:
– Create Sport Race
– Insert members of a Sport Race
– Show table with Sport Race, and manage data (bulk delete)
– Show table with Sport Race, and manage data (bulk delete)
– Upload media using WordPress System (media manager of wordpress)

You can download it on: GITHUB

The structure of the project in the Plugin name directory is:

As you can see, a simple list of file with no directory

My project as two section: Sport Race and Members
Each section is composed by two file: _page.php and _table.php
And a file of system: plugin_activation.php

For example now analyze two file: sportrace_page.php and sportrace_table.php

For the sportrace_table.php will explain in the next article how to create a table, now take a look at file, is very simple.
For now i will explain how to use it in the sportrace_page.php

At top of page we put

For the inclusion of table put:

In the plugin_activation.php you can find the mysql create query and the menu inclusion!

Let’s start to create your wordpress plugin! Simple and Fast!

Angular 6 – ADAL Dynamic Parameter initialization

We have seen in the previous article, how to implement the ADAL Authentication in Angular 6.

Now we can see, how to do, for init the ADAL Module with dynamic parameter, for example we can take them from database, or json file configuration.

We must to open the app.module.ts
Search the “imports” line, where we have write:

As we can see, the parameter are static, now we want to take them from a web service.

We must to change the “forRoot” function, and pass a function that return the object with parameter configuration

If you have compile error build for example:
Function expressions are not supported in decorators in ‘ɵ0’

Build with:

Enjoy!

Angular 6 – ADAL Authentication

Today i want to talk to you about Microsoft ADAL (Azure Active Directory Authentication Library).
ADAL allows users to authenticate in Active Directory (AD) local or in the cloud and take token to protect the API.

How can i do to integrate it in a Angular 6 app?

1) Install the js library microsoft-adal-angular6

2) Open app.component.ts
2.1) Import the microsoft adal

2.2) In the export class AppComponent change the constructor

3) Open app.module.ts
3.1) Import the microsoft adal

3.2) We must to change our routes

3.3) In NgModule import library

If you want an example Angular 6 ADAL App click here.

Angular 6 Material – MatDatePicker italian format dd/MM/yyyy

Material Angular is very very useful library to generate beautiful app with material design and use all the power of angular.
Today we can see how to set the format for the MatDatePicker with dd/MM/yyyy so how to customize it, then you can change it.

In our Angular 6 project we must to install moment.
So execute in our project directory:

Then we must to open our
app.module.ts

At the end all the date in our project became with the format dd/mm/yyyy!!
Some question contact me.

Angular 6 – IE 11 method fill not supported

You have created your angular app and now you have some error about method fill, for example: “Object doesn’t support property or method ‘fill'”.
Line that fail: var HEADER_FILLER = new Array(HEADER_OFFSET).fill(null); (Angular core).

Don’t worry the solution is easy. You must open your file on: src/polyfill.ts
At line 21 of the file you see:

/** IE9, IE10 and IE11 requires all of the following polyfills. **/

and many “import ‘core-js/es6/BLABLA’” commented.

You must to uncomment all:

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

Build and fun!

Complete Guide Ionic 3 Firebase with cordova plugin firebase

Okay let’s start to integrate in our Ionic 3 app the Firebase Google Cloud Message with the cordova plugin firebase.
In the Ionic 3 we can found the native integration with this plugin. For the documentation click here.
It work with IOS 10 and IOS 11 and latest version of Android, i have tested it.

In this guide we can see:
Install cordova plugin firebase on Ionic app
Setting cordova plugin firebase on Ionic app
Setting Firebase Cloud Message

 

Install the Ionic Firebase module

We must to install the npm library and the cordova plugin so let’s start to execute this command:

Then we must to use it on our app, so let’s start to include it in our app.module.ts, import it and then add into “providers” section.

 

Setting cordova plugin firebase on Ionic app

Now we can use it in our app.component.ts, for the grant permission, registration of token.
This is a simplest installation, import it, add in the constructor, and then use this.firebase to attach at the event.

For IOS is very important the method “grantPermission”

Now we must to setting up the account on the firebase cloud messaage, so we can generate two files:
google-services.json (Android)
GoogleService-Info.plist (IOS)

We can add this file in the root directory, with the config.xml and package.json file.

Setting Firebase Cloud Message

To setting up the firebase account remind to this guide: https://engineering.hexacta.com/managing-push-notifications-with-ionic2-3698249c07a

Remember, is very important that you upload you APN CERTIFICATE IOS, if you not load it the notifications not work.
This guide: https://firebase.google.com/docs/cloud-messaging/ios/certs

 

If you have some question write me.

LINQ on Nodejs With node-linq

In this days that i have some free time on my “drawing realtime app” project, i have added a managment of the object with the linq.

In c# i use even the linq, but in javascript this is the first time that i use it with success.
Because i have tested https://linqjs.codeplex.com/ some some some times ago but with big object is obviously slow, is even “client side”.

But now with nodejs i can use the linq “server side”, i have seen some library but in my opinion the best is node-linq created by the wearefractal.
Is fast, the docs are good (but they can insert more).

For example i have used it for extract all the action taken in a “drawing room”, for the date i have used timestamp:

var arrRoom = new LINQ(registerRoomAction).Where(function(roomAction) { return (roomAction.room == socket.room && roomAction.date > singleClient.lastupdate && roomAction.date < now); }).OrderBy(function(roomAction) {return roomAction.date;}).Select(function(roomAction) {return roomAction.data;}).ToArray();

 

So if you want to exract only an item you can use Single():

var singleClient = new LINQ(clients).Where(function(client) { return (client.username == username); }).Select(function(client) {return client;}).Single();

 

It is very fast and simple, if you use linq on c#, you are no problem to use it.

For some question you can contact me, i respond to you.