Archive for the ‘javascript’ Category

js packages and security

Posted: October 15, 2018 in ECMAScript 6, javascript

Nowadays JavaScript is on the top of the mind of everyone on Digital World. This humble language is something clients and developers follow and that is the main language for all the generation millennial of developer’s.

When JavaScript had scale to the podium of the top languages and being a language available to use on the forntend, on the backend and app level  package distribution had start to be a standard also.

NPM is the most common package manager used by JavaScript community. 6 months ago in a project where security was one of the main concerns i discover something i would like to share today.

If you can upload and modify packages is possible to have security breaches or the induction of attacks via js package. Since developers are bringing NPM or other source JavaScript packages they can been bringing also security themes.

That’s way i decided to write this post to help you with a clue off how to see if you can or not believe in one or more packages giving you a new best practice.

The best way to grant protection of the packages you are bringing on to the project, with identified package references at the package.json file is to check for security news of vulnerability.

If you are using a version older then the version 6 of NPM you should check package security using th efollowing trick.

  1. install the node security platform : ‘npm install -g nsp’
  2. wait for the installation of the package
  3. use nsp chck to grant that every module that is obtain by package and refered in the package.json is vulnerabilities free

If you are using Node 6 or a biger version, NSP had become built in feature, so you have a new command ‘npm audit’ that allow to make a security audit.

To run one off this method’s should be a recurrent task on a JavaScript project even if you are behind the trenaches of a framework (React, Angular, Vue.js)

If you are using a compiler or a DEVOPS with autonation process you should include this validation in the built of the solution.



Today i had the chance to be the speaker of a live stream  Masterclass on the Microsoft Journey to WebSummit initiative.

The topic of my Masterclass was Progressive Web Application introductions and the long path we had walk until this moment. In my opinion Progressive Web Apps may really be the best big thing on Mobile development.


The thing that i had learned while i had been experiencing and digging the PWA concepts is that to be succeeded we most have control of the Mobile Web technical bases and also the PWA Concepts.

In this session the main focus was the angular stones of PWA, and how to build your first PWA, i had spend also sometime around Service Workers that more then a buzz word is the hotwst thing in Web development.

The session was deliver in English and since i hadn’t have any opportunity to interact with the audiance, i was litle seek and a development tool error didn’t allow me to build a full demo from scratch.

You can download the slides of my session and reuse it if you need from

I would share in the next posts some basic concepts and development pratices to:

  • Windows Hosted Web APPS
  • Progressive Web APPS
  • Service Workers


For some reason almost all solutions we have online use Google Maps to show maps, or allow the user to calculate. After a recent full FrontEnd project with some pure WebDeveoper’s and Microsoft consulting, i think i finally found why.

bing maps

Essentially i think is because almost Web and Script developer’s use Google Maps API at a long time and don’t know how to start with this platform.

In my opinion Bing Maps can be also very interesting to use on a Website depending on the geography or Goals off the project.

In this post we will try to give you a clue off how to start with the use off this Maps platform and also the potential off the platform.

bing mapssite

The main house off Bing Maps resource center os the site where you have a lot off cool and easy to read documentation.

Bing Maps API are available for integration using:

  • JavaScript
  • XAML
  • WebAPI
  • Windows Store apps controls

In this post we will focus our attention on the JavaScript integration off Bing Maps. To start we will do a quick and guided exercise to allow the use off Bing Maps as illustrated on the first image in this post.

In this exercise we will consider JavaScript and HTML as main development language to integrate BingMaps.

To simplify development Microsoft had release an approach off integration based on controls, this option simplifies a lot our Work.

First of all let’s learn how to instantiate the Maps API and the needed control. So in the Head tag of our HTML let’s instantiate the Maps API and the Bing Maps control.

<script type=’text/javascript’ src=’; async defer>

The Script tag links our WebPage to the Maps API and refer’s whats the JavaScript Function that will be called to instantiate our Maps control. In our case we are saying that the Map Control functionality will be injected by calling the GetMap function.

In the HTML we will elect a HTML tag to host the Maps control, the selected tag should be a tag with a container genesis, from a semantic Principle i sugest to use a Div. As an example we would have.

We should have a way to easy identify and manipulate the element so we had used an id to mark the element and become easy to manipulate the control without errors. We had also use an css class to give some styling to the map.

Like in other frameworks to use BingMaps API and Controls we should have a register acount, so we need to ask for a key to use the API. To ask your API key you should go the licensing bing WebSite to understand the terms and conditions and also the rules of the framework usage  (


After you have the API key is time to build our Map Callback function, for a organization reason we will create a separated file for this. The first action we should consider is to call the Map Control Constructor to inject in to the DIV the MAP surface.

function GetMap() {
//Create an instance off a Bing Map 8 control (passsing the id off the div containing the map and the bing maps credentials)
var map = new Microsoft.Maps.Map(‘#contactMap’, {
credentials: ‘put the credentials you have’,
zoom: 16});

The parameters passed to the constructor are the identifier of the HTML tag that will render the Maps logic, the development keys and the inital zoom level.

using a variable to save a pointer to the mapcontrol is very useful to grant that we can call methods over the Map control to obtain information and change options, in our case we will define the zoom boundaries and to put a pin on an address.

//set initial zoom boundaries to grant a good experience to be defined with the design
maxZoom: 22,
minZoom: 8

The map Pin in Bing Maps are treated as autonomous entities you can have different pins representation and different actions. To create a new Pin over the Map we have first to instantiate the object

var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), {
icon: ‘iconpinmapa.png’, //using PNG as pin
anchor: new Microsoft.Maps.Point(12, 39)

After that we can put the pin over the map.


To define a new pushpin we have the need to define what are the point where the pushpin should be present. The Microsoft.Mas.Point is the object that represents a point on the Map.

So at this moment we would have a BingMap in a web Page with a local marked. let´s see all the code together

<!DOCTYPE html>

<html lang=”en” xmlns=””&gt;
<meta charset=”utf-8″ />
<title>bing Maps for a contact adddress pin</title>
<link rel=”stylesheet” type=”text/css” href=”stylesMap.css”>
<script type=’text/javascript’ src=’main.js’>
<script type=’text/javascript’ src=’; async defer>

<h1>Presenting a contact Map </h1>
Example off a bing map instance pointing to the address:


And the JavaScript file:

// JavaScript source code

//Function associated with the creation off a Contactpin Map
function GetMap() {
//Create an instance off a Bing Map 8 control (passsing the id off the div containing the map and the bing maps credentials)
var map = new Microsoft.Maps.Map(‘#contactMap’, {
credentials: ‘AhgeX3IV-9M5Ssvz4NLBdtxk1zF8o1qO5KCB9sAr2S8NT0zUe_tMCv8cG4umDSgq’,

zoom: 16


//set initial zoom boundaries to grant a good experience to be defined with the design
maxZoom: 22,
minZoom: 8

//Add your costume pin to the map

var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), {
icon: ‘iconpinmapa.png’, //using PNG as pin
anchor: new Microsoft.Maps.Point(12, 39)


And we are done with our first exercise, is very easy right?! Maybe next time you need some map you can now consider this platform, for me BingMaps object-oriented approach make him very easy and high extensible and configurable. Other strong point is the fact that Bing Maps has different integrations support and the API follows the same API approach for the different platforms.




Soon i will bring you more informtion off what i had been discovering and playing lately, until then there is some clues.

A lot had been said lately about Windows 10 and even UWP development model and all the story off the new app model had been almost 90% of times told using XAML as the main language.

I think this has been done this way essentially (also taking my example in the talks and seminars about UWP I had been done lately) because is easier to explain the changes and the Architecture of Windows 10 using C# and XAML. Something that as been in the air and some architects and developers heads is what had happen to Language projection system and the availability to build native apps using HTML and javascript as the main development language?


The image above illustrates in a simplified way the form how Windows 8.1 development model was organized when we talk about Universal Windows Store APPS, nowadays the support had been maintained but the target of our development had become the Universal Windows Platform.



The good news is that all the development techonologies and the hot feature of having HTL and Javascript as a equal citizen on the Windows platform development had been maintained, also the support for the development using C++.

This is great because there are apps where Xaml is great and a way to go and then there are other type off apps where HTML and JavaScript can have greater benefits. What had change was the introduction of the UWP and the change of or development target.

Now that we have already clean up the noise in the air and had read the good news let’s talk about the great news J.

Last Month had been launched WinJS 4.0 with Is great once we have Windows 10 almost in all our pc’s.

WinJs 4.0 full supports Windows 10 features and take benefits from the One Platform features, but was been released with support to the latest versions of the Browsers including the new Microsoft Edge.

Besides off performance and new controls from my point off view the biggest improvements of WinJS 4.0 is the wrappers available over other great JavaScript technologies such as:

  • Angular JS;
  • KnockoutJS;

And off course being a Javascript platform it also supports the interaction with other great script libraries like JQuery or TypeScript.

New blocks on the playground

The WinJs also brings some new control blocks like:

PivotCostumer header areas;

SplitViewToggle Control: Supports Pane Style navigation pattern over SplitView;

New visual for the Hub Control;

At the structure level had been also some changes with WInJS 4.0 we must opt-in to styling each element we create in place of using new attributes only available at the WinJs Universe. Can look like a small change but this feature brings a lot of benefits especially in terms of other libraries compatibility and easier usage off CSS native cascating mechanism.

One new best practice that is directed related with the UWP and the vast type of devices supported in Windows 10 is the usage off the plataform detection using the WinJS instruction WinJS.Utilities.isPhone, nowadays this should be made detecting the capabilities available in the device or by adaptative development.

Other fantastic news is that the product team of WinJS had open moe than ever to the communities the information about the state off the art, so you have a changelog that is updated in real time on and they are already working on version 4.0.1.

You can get the latest version of WinJS for web from or for apps from the SDK.

Some Things that worth your attention

Like in the past there still some Controls that exist on XAML that are not available on WinJS for the same reasons happening in the past is the case off the calendar or datepicker.

As the top reason Product Group Team said that for this kind of technology theres so many options

there are some great references for WinJS 4.0:

Winjs everywhere:


ChangeLog WinJS:

A preview to WinJS 4.0:

So take some action and strat building with WinJS 😉

Javascript Promise Pattern

Posted: February 11, 2013 in javascript

One of the things i usually talk about when referring to JavaScript programming is design and implementation pattern.

From all the JavaScript patterns out there one had been over spotlights lately because is very popular among Windows 8 HTML5 developer’s. One thing that many people don’t know is that the WinJS Windows 8 Promises are not more than an implementation of a JavaScript design pattern.

Promise Pattern can be very useful when programming in JavaScript  even if you are using JavaScript on the web. Basically a promise is an object that represents a future result (that’s way in many books some authors call them future), that will be obtained in a near future.

The promise pattern offer’s a way to use callbacks in a friendly and readable way. We can also see Promises as a more elegant way to do callbacks in JavaScript.

Let’s see an example:

operation1(params1) {

  async_task(params1, function() {
    operation2(params2) {
               async_task(params2, function() {
                   //do something
If you look carefully to the example you will see that you have a async chain call stack, this is a dummy example but if you imagine in some real scenarios this can become truly confuse, especially if you have some future need of extend the code. When thinking in an implementation based on Promise we are talking in a much clean way to solve the problem, next you have the pseudo code who solves the same problem we previously had.

function operation1(params1) {

  var promise = new Promise()
  async_task(params1, function() {
    // ...
  return promise;
function operation2(params2) {
  var promise = new Promise(this)
  async_task(params2, function() {
    // do something
  return promise;



The Promise pattern allow us to have a representation of a long runing process, instead of blocking and waiting for never ending loops. You can see the application of this pattern to JQwuery and other’s in