DEV Community: Michele Da Rin

Set a shared background in your Flutter app

Michele Da Rin — Sat, 12 Sep 2020 10:00:00 +0000

In the last months I started building apps for my clients in Flutter, I have to say that for the time being I’m in love with this library that Google has built. But I was having an hard time figuring out how to set a background that would persint in various pages of my app.

Keep reading to learn how I did it in my latest apps.

Photo by Efe Kurnaz on Unsplash

Understading flutter: Widgets

Flutter is made of Widgets , these are like lego bricks , you put one above each other to build your unique app interface.

The basic widget of Flutter is MaterialApp if your using Material design, this widget tells how to render the App on the phones and which pages you can navigate to, if you use named navigator (highly recommended).

Scaffold widget to the rescue

Another basic widget that you’ll find in every Flutter application is Scaffold, it lets you put your widgets on the screen, and it has natively implementations of AppBars, BottomNavigationsAppBars and Drawers. That’s really something awesome.

So lets keep it up, each Scaffold has one required field: body, it’s a generic Widget that’ll be put at the top left on your screen if you don’t tell nothing to Flutter.

Here’s an example:

import 'package:flutter/material.dart';

class MyScaffold extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: Container(
          child: Text('Hi world!'),
        ));
  }
}

This basically tells to render a Text on the top left of your screen. See it yourself:

That been said it’s time to pass to the argument of this post, how can we use the informations we have to share an image as background throughout our application?

The answer is quite simple really, all we have to do is use another basic flutter’s widget: Stack.

Another widget: Stack

What Stack allows us to do is to simply put widgets on top of each other.

There are three ways to render our widgets in flutter: Row, Column and Stack , but that’s not the argument of this post and the informations about these widget can be easily seen on flutter documentation.

How can we use Stack for our porpuse

What can we do now is use the Scaffold widget to render a body with a Stack by default, and the stack children being an Image widget and a Container widget.

The Image widget will render an image which will cover all of our phone’s screen and the Container will take all the screen’s space to render other widgets on top of ou image, using it as a background.Here’s the code:

import 'package:flutter/material.dart';

class MyScaffold extends StatelessWidget {
  final Widget child;
  final String image;

  ModelToysScaffold(
      {@required this.child,
      this.image = 'assets/images/background.png',});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(), =>
      body: Stack(
        children: [
          Positioned(
            top: 0,
            child: Image.asset(
              image,
              height: MediaQuery.of(context).size.height,
              width: MediaQuery.of(context).size.width,
              fit: BoxFit.cover,
            ),
          ),
          Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            child: child,
          ),
        ],
      ),
    );
  }
}

Here’s the result:

What do you think of this approach?

Let me know in the comments! 😉

How to Create your first GatsbyJS Plugin

Michele Da Rin — Tue, 15 Oct 2019 12:23:42 +0000

This article has been previously been published on my main blog

Questo articolo è stato pubblicato precedentemente nel mio blog principale

In the latest article, I introduced the new (proposed) web standard per Web Monetization. In this new article, we'll see how we can create a simple GatsbyJS Plugin to inject the Web Monetization Meta Tag using the SSR APIs.

Photo by Hans-Peter Gauster on Unsplash

Create the plugin files

We can read from the official plugins docs that a plugin project has to comprehend some files:

package.json - required this can be an empty object ({}) for local plugins. Also, your package.json file should have the following properties:
- name is used to identify the plugin when it mutates Gatsby’s GraphQL data structure if name isn’t set, the folder name for the plugin is used
- main is the name of the file that will be loaded when your module is required by another application if main isn’t set, a default name of index.js will be used if main isn’t set, it is recommended to create an empty index.js file with the contents //no-op (short for no-operation), as seen in this example plugin
- version is used to manage the cache — if it changes, the cache is cleared if version isn’t set, an MD5 hash of the gatsby-* file contents is used to invalidate the cache omitting the version field is recommended for local plugins
- keywords is used to make your plugin discoverable plugins published on the npm registry should have gatsby and gatsby-plugin in the keywords field to be added to the Plugin Library
gatsby-browser.js — usage details are in the browser API reference
gatsby-node.js — usage details are in the Node API reference
gatsby-ssr.js — usage details are in the SSR API reference

For the sake of this plugin, we'll use only the SSR APIs, therefore, the only file we need to have is the gatsby-ssr.js' one.

Using SSR APIs

As already said we'll create a plugin that'll need only the SSR APIs, GatsbyJS expose these APIs:

In our plugin, we'll use only the onPreRenderHTML in order to add the Web Monetization Meta Tag in the <head> section of our pages.
This API gives us an Object containing two methods and a string that we can use to do what we need:

getHeadComponents - return the headComponents array, formed by ReactNode objects
replaceHeadComponents - Takes an array of components as its first argument which replaces the headComponents array which is passed to the html.js component.
pathname - Is the current path that's being generated by Gatsby SSR APIs

You can read more on these in the official docs.

Create our SSR file

At the end our gatsby-ssr.js should look like this:

const React = require("react");

export const onPreRenderHTML = (
  { reporter, getHeadComponents, replaceHeadComponents, pathname },
  pluginOptions
) => {
  if (process.env.NODE_ENV !== `production`) {
    reporter.warn("non production environment");
    return null;
  }

  if (!pluginOptions.paymentPointer) {
    reporter.warn(
      `Payment Pointer is not defined, add it to your gatsby-config.js file.`
    );
    return null;
  }

  if (pluginOptions.excludedPaths && pluginOptions.excludedPaths.length > 0) {
    const excludedPaths = pluginOptions.excludedPaths;
    let isExcluded = excludedPaths.filter(path => pathname.match(path)).length > 0;

    if (isExcluded) {
      return null;
    }
  }

  const headComponents = getHeadComponents();

  const webMonetizationTag = (
    <meta name="monetization" content={pluginOptions.paymentPointer} />
  );

  headComponents.push(webMonetizationTag);

  replaceHeadComponents(headComponents);
};

This plugin adds the Web Monetization Meta Tag only when it's run on peoduction environment (when we use gatsby build, for example) and accepts an array of strings (excludedPaths), in its configuration, which tells which paths should not have the meta tag.

Use the plugin in your Gatsby Site

In order to use your new plugin you have to install it through npm first:

npm i gatsby-plugin-web-monetization

And then you have to add it in your gatsby-config.js file like you already do for all the other plugins.
This plugin in particular can be instantiated like this:

module.exports = {
  // Other content ...
  plugins: [
    // Other plugins ...
    {
      resolve: `gatsby-plugin-web-monetization`,
      options: {
        paymentPointer: `YOUR_ILP_PAYMENT_POINTER`,
        excludedPaths: ['exclude', 'path'] // Optional
      }
    }
  ]
};

Publish your new plugin on NPM

In order to publish your new plugin on NPM and make it discoverable by its users, you should first add the fields said above in your package.json file and then you can run npm publish from the root of your project to publish your new plugin to NPM register. (You have to be logged in to NPM of course 😉)

That's all 😎😎😎

Congratulations! You've created and published your first GatsbyJS plugin.

The plugin can also be found on my GitHub, leave a ⭐ if you find it useful! 😻

The Future of Web Advertisement: Web Monetization

Michele Da Rin — Sat, 12 Oct 2019 05:19:50 +0000

This article has been previously published on my main blog.

Questo articolo è disponibile anche in italiano sul mio blog principale.

There's a new (proposed) web standard about advertising on the web. It's called Web Monetization, let's see what's all about.

Photo by Wendong Yao on Unsplash

What is Web Monetization

Web Monetization is a

proposed browser API that uses ILP (Interledger Protocol) micropayments to monetize a site. It can be provided through a polyfill or an extension, but the goal is to eventually implement it directly into the user's browser.

Motivation

The ability to transfer money has been a long-standing omission from the web platform. As a result, the web suffers from a flood of advertising and corrupt business models. Web Monetization provides an open, native, efficient, and automatic way to compensate creators, pay for API calls, and support crucial web infrastructure.

How Web Monetization can improve users satisfaction

Web Monetization can improve the user overall satisfaction with your web content because he won't be persecuted by your ads, and you still will make money from him.

In fact, Web Monetization offers the user to choose where its web monetization funds should go when navigating the web.

Web Monetization Wallets

At the moment these are the Web Monetization Wallets (wallets that accepts ILP Payments):

XRP Tipbot

GateHub

Stronghold

Web Monetization Providers

At the moment of writing this article, the only known Web Monetization Provider is Coil.

Coil, like Medium, is a platform when a person can share articles (or web monetized links) and offers a monthly fee for viewing a sort of pro members' articles only and for paying those web monetized links that you visit.

How do I web monetize my own content? 💰

Implementing Web Monetization is quite easy, in fact, this consists in adding only a line to your html files. This new line is called Web Monetization Meta Tag.

Setup a Web Monetization Wallet

In order to receive payments you need to set up a Web Monetization Wallet, you can use one of the above.

Get your payment pointer

When you finish to set up your new account you'll receive a Payment Pointer. A Payment Pointer looks like this:

$coil.xrptipbot.com/C3adA1B9Q5qMu4Z3i4Bfhw

Generate your Meta Tag

The Meta tag is the tag we're going to add to our web monetized web pages. This looks like this:

<meta
  name="monetization"
  content="$coil.xrptipbot.com/C3adA1B9Q5qMu4Z3i4Bfhw">

The tag's name have to be monetization

Add your new Meta Tag to your pages

Copy your Meta Tag and add it to your websites' <head> section. It should look like the example below:

<!doctype html>
<html>
  <head>
    <title>Web Monetized Site</title>
    <meta
        name="monetization"
        content="$coil.xrptipbot.com/C3adA1B9Q5qMu4Z3i4Bfhw">
  </head>
  <!-- Other content -->
</html>

Congratulations! Your website is now Web Monetized. 😎😎😎

News From Firebase Summit 2019

Michele Da Rin — Sat, 05 Oct 2019 15:02:51 +0000

This article has been previously published on my main blog.

Questo articolo è disponibile anche in italiano

The Firebase Summit 2019 took place on the 26th of September in Madrid and I had the honor to attend. In this article, I'll talk about the various (and cool) new features that have been announced.

There has been a lot of news on this event, let me tell you about them:

A quick video introduction by Firebase

The opening keyonote of the Firebase Summit

Firebase Emulator Suite

One of the most interesting additions is Firebase Emulator Suite, this suite will let the developer have faster and safer development experience and don't forget about the speed gained since you'll have everything locally with Hot Reloading when your Cloud Functions or your Security Rules change.

You'll find a very detailed guid on the new google.dev firebase codelabs 🤩🤩🤩

Firebase Extensions

Another cool update are the Firebase Extensions, these will let you add some functionalities (like translating, resizing images, etc.) without writing a single line of code. Firebase has released these open source, and it plans to let developers create their own extensions, how modular!

Google Analytics for Firebase

Introduction to Google Analytics for Firebase

Another great addition is the possibility to add Google Analytics to your web and native applications. It's a great addition because it'll let you create custom audiences based on your users' usage (and we'll see why this it's important next).

Remote Config

Also, Remote config is being added to Web projects, it'll let you change the look and feel of your apps by enabling them in just a click, selecting the audience you want to see the changes. You can use the audiences created with Analytics to have a better reach too.

Firebase Cloud Messaging

Firebase Cloud Messaging will be added to Web Projects too, and it'll let yuo send targeted Messages to users that use your app. It's just like Push Notifications, but better! 💌💌💌

Firebase App Distribution

Firebase App Distribution will let you release an early preview of your apps to the users you want, and it'll let you see all the stats about the usage of these previews.

Firebase Test Lab

Firebase Test Lab is a cloud-based app-testing infrastructure. With one operation, you can test your Android or iOS app across a wide variety of devices and device configurations, and see the results - including logs, videos, and screenshots - in the Firebase console.

Firebase Test Lab at Firebase Summit

Test Lab uses real, production devices running in a Google data center to test your app. The devices are flashed with updated APIs and have customizable locale settings, allowing you to road-test your app on the hardware and configurations it'll encounter in real-world use

Firebase Predictions

Firebase Predictions applies machine learning to your analytics data to create dynamic user segments based on your users' predicted behavior. These predictions are automatically available for use with Firebase Remote Config, the Notifications composer, Firebase In-App Messaging, and A/B Testing. You can also export your app's Predictions data to BigQuery for further analysis or to push to third party tools.

That's all

That's all from Firebase Summit, but consider registering to my newsletter if you want to keep updated on Firebase News and Tutorials 😍😍😍

Painless Angular SSR with Nginx/Apache/Firebase & Angular CLI

Michele Da Rin — Mon, 12 Aug 2019 10:46:36 +0000

This article has been previously published on my main blog

So you're building a new, phantasmagorical web site (let's say a brand new e-commerce for those absolutely unknown books that you find beautifully written) and you need your future clients to find it on the first search page on Google.

Photo by Alev Takil on Unsplash

After a lot of research, you decided to use Angular as FE framework because you think it's the best fit for that e-commerce, but when you finally deploy it on production and you search it you don't find even if it's some time that's been published, what's going on?

Google recently updated its crawler to pre-render javascript Single Page Applications like Angular ones, but this technology doesn't always work well (and you need to know that not everybody uses Google to surf the Internet).

Angular Universal to the rescue

Fortunately, the Angular Team built a nice (after some initial troubles) tool that helps us, a tool called Angular Universal.

Setting things up

Setting Angular Universal up is relatively easy, you just to type a single command in your terminal

ng add @nguniversal/express-engine --clientProject "your project that neeeds SSR"

This little command generates some files in your src/ folder:

main.server.ts - Bootstrapper of the server app
app/app.server.module.ts - Server-side app module
server.ts - Express web server
ts.config.server.json - Typescript config for your server app
webpack.server.config.js - Webpack server configuration

Verify if the SSR app works

To verify if your brand new Server-Side rendered app will work type in your terminal

npm run build:ssr
npm run serve:ssr

If all works well (you'd be really lucky) you should see the app working on localhost:4000, else continue reading to know some error catching.

Catching SSR errors

There are plenty of errors that could occur while trying to build our SSR app, let's try to understand the most common ones.

Using browser only namespaces

When the app is running in our server there are some standard objects that we cannot use, ie window, so we can do two things:

Inject false objects to "deceive" the server and make our app working even on the server-side, to do this simply add these lines before the express() initialization in your server.ts file:

...
const domino = require('domino');
const fs = require('fs');
const path = require('path');
const templateA = fs.readFileSync(path.join('dist/browser', 'index.html')).toString();
const win = domino.createWindow(templateA);
win.Object = Object;
win.Math = Math;
global['window'] = win;
global['document'] = win.document;
global['branch'] = null;
global['object'] = win.object;
const app = express();
...

Detect the parts where you're using these objects and make them run only in your browser app.
In this case Angular makes us available two methods isPlatformBrowser and isPlatformServer exposed by @angular/common.
Here's a little example:

import { Component, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
    constructor(@Inject(PLATFORM_ID) private platformId: any) {}

    onActivate(event: any) {
        if (isPlatformBrowser(this.platformId)) {
            const scrollToTop = window.setInterval(() => {
                const pos = window.pageYOffset;
                if (pos > 0) {
                    window.scrollTo(0, pos - 50);
                } else {
                    window.clearInterval(scrollToTop);
                }
            }, 16);
        }
    }
}

This snippet runs the scrollTop only if this code runs on the browser.

Finish this all: Deploy to production

The best part arrived, the part where I'll walk you through server configuration, isn't it awesome?

Apache Configuration

If you're using Apache as the webserver you need to create or modify your .htaccess file:

<IfModule mod_rewrite.c>
 RewriteEngine On
 # If an existing asset or directory is requested go to it as it is
 RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
 RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
 RewriteRule ^ - [L]

 RewriteRule ^ /dist/browser/index.html
</IfModule>
<VirtualHost *:80>
 ServerName example.com # <-- modify here
 ServerAlias www.example.com # <-- modiy here
 <Proxy *>
  Order allow,deny
  Allow from all
 </Proxy>
 ProxyPreserveHost On
 ProxyRequests Off
 ProxyPass / http://localhost:4000/
 ProxyPassReverse / http://localhost:4000/
</VirtualHost>

<VirtualHost *:443>
 ServerName example.com # <-- modify here
 ServerAlias www.example.com # <-- modify here
 <Proxy *>
  Order allow,deny
  Allow from all
 </Proxy>
 ProxyPreserveHost On
 ProxyRequests Off
 ProxyPass / https://localhost:4000/
 ProxyPassReverse / https://localhost:4000/
</VirtualHost>

Nginx configuration

In case you using Nginx instead you need to configure the configuration under the /etc/nginx/sites-available/www.example.com file:

upstream your_upstream_config {
 server 127.0.0.1:4000;
}

server {
 listen 443 ssl http2;
 server_name www.example.com; # <--- modify here
 root /home/"your user"/path/to/dist/browser;
 location / {
  try_files $uri $uri @backend;
 }

 location @backend {
  proxy_pass http://your_upstream_config;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_set_header Host $http_host;
  proxy_http_version 1.1;
  proxy_set_header X-NginX-Proxy true;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "upgrade";
  proxy_cache_bypass $http_upgrade;
  proxy_redirect off;
  proxy_set_header X-Forwarded-Proto $scheme;
 }
}

server {
 listen 80;
 server_name www.example.com # <-- modify here
 return 301 https://$server_name$request_uri?;
}

Bonus - Firebase config 🤩🤩🤩

If you're using Firebase hosting there are some things we have to add and two ways you can accomplish what you've already done with Apache or Nginx: AppEngine or Cloud Functions.

Polyfills your firebase project

Firebase uses Websockets and XHR not included in Angular that we need to polyfill. So we run in our terminal:

npm install ws xhr2 bufferutil utf-8-validate -D

and we add these two new lines to our server.ts files:

(global as any).WebSocket = require('ws');
(global as any).XMLHttpRequest = require('xhr2');
...

Deploy on AppEngine

Add a app.yaml at the root of the project with this line:

runtime: nodejs10

And then, after you install the Google Cloud CLI, run in your terminal:

gcloud app deploy

We also need to change the start script in our package.json:

// ...
"scripts": {
  "start": "npm run serve:ssr",
  // ...
},
// ...

And that's all, you should see your app running on Google Cloud! 👌

Using Firebase Cloud Functions

In order to deploy our app using Firebase Cloud Functions we to need to init it and modify some files:

To init Firebase run

firebase init

and select hosting and functions

Then modify your funtions/package.json file:

{
  "hosting": {
    // ...
    "rewrites": [
      { "source": "**", "funtion": "ssr" }
    ]
  },
    // ...
}

Remove your express listener in server.ts:

// Start up the Node server
// app.listen(PORT, () => {
//   console.log(`Node Express server listening on http://localhost:${PORT}`);
// })

Update your webpack.server.config.js:

output: {
  // Puts the output at the root of the dist folder
  path: path.join(__dirname, 'dist'),
  library: 'app',
  libraryTarget: 'umd',
  filename: '[name].js',
},

Make sure to rebuild your app running npm run build:ssr

We then move in our functions directory to install fs-extra

cd functions
npm install fs-extra --save

The Firebase function needs to access our built app, so let's create a simple node script called cp-angular,js that copies our app in the functions folder:

const fs = require('fs-extra');

(async() => {

    const src = '../dist';
    const copy = './dist';

    await fs.remove(copy);
    await fs.copy(src, copy);

})();

Then in our functions/package.json we add a build script:

{
  "name": "functions",
  "engines": {
    "node": "10"
  },
  "scripts": {
    "build": "node cp-angular && tsc"
  }
}

Then we can finally write our functions, so our functions/index.js file will look something like this:

import * as functions from 'firebase-functions';
const universal = require(`${process.cwd()}/dist/server`).app;

export const ssr = functions.https.onRequest(universal);

To verify that all is working right you can use these commands:

cd functions
npm run build
firebase serve

And if all looks good just deploy it:

firebase deploy

Done! 😎

That's all, you're now a master of Angular Universal!

How I Built an Interactive Map from Scratch

Michele Da Rin — Tue, 30 Jul 2019 15:33:27 +0000

This article has been previously published on my main blog.

The other day I needed to complete a task for a client, this task consisted of creating an interactive map based on a static SVG. In this article, I'll explain how I accomplished the job 👌

Photo by Andrew Stutesman on Unsplash

First things first

The problem was that the map used wasn't interactive at all, to show the selected regions you needed to add CSS classes, and there could be only one selected region at one time.
So I searched the Internet for maybe one angular library that could fit my needs, but, unfortunately, without results 😢

Let's create a new Angular lib

So I said to myself: Why not create a new library yourself? and that was it, I opened up my terminal and I typed

ng new lib @daudr/interactive-italy

(Yes, I started this project with only Italy in mind, but interchangeable maps are coming, stay tuned! 😉)

Create the main component

So I started creating the main component of the library, interactive-italy.component.ts, but what's really is this component?
The answer is simpler than you think, firstly I had to find the right SVG image, and being a noob in all of that I decided to look upon the Internet and I found just what I needed:

Thanks Wikimedia ❤

The only problem was the map wasn't interactive.

<svg
  width="460.30981"
  height="562.58575"
>
  <path
  *ngFor="let region of regions"
  [attr.d]="region.d"
  [attr.title]="region.title"
  (click)="onRegionClick(region.title)"
  [ngClass]="{ selected: region.title | selected: selectedRegions }"
  />
</svg>

It's all here, just that.

Create the data

But let's find out what powers it:
The regions object represents an array that contains all the regions of the map as SVG's paths

export const REGIONS: Region[] = [
  {
    d:
      'm 374.27021,304.03051 1.36,6.34 2.24,5.51 6.27,11.18 7.01,7.71 8.24,6.15 0.87,2.33 3.67,3.53 0.33,1.35 5.56,3.7 5.16,1.83 0.21,4.85 3.43,2.43 0,0 -1.17,1.85 0.91,0.84 -2.84,1.96 -2.3,2.84 -0.82,3.1 -2.36,1.66 -1.72,3.73 -4.76,5.13 -2.04,-0.37 0.79,-0.64 -1.07,-4.29 -1.1,-1.07 -2.44,-1.62 -1.05,1.32 -0.57,-0.22 -0.98,-2.19 -1.24,0.13 -0.94,-1.26 -2.91,2.38 -1.43,2.22 -2.22,0.15 -0.42,0.9 1.25,3.55 1.52,0.89 -0.42,1.03 -0.85,-0.13 -0.25,-1.01 -0.67,1.24 -1.99,0.05 -0.63,2.64 -0.79,-2.07 -1.16,0.09 -0.87,2.4 -1.33,0.05 -0.28,1.46 -1.87,-0.98 -2.1,0.52 0,0 -2.49,-3.27 -1.96,0.19 -2.4,-1.41 -1.03,0.65 -1.33,-0.4 -1.75,-3.31 -1.32,0.73 -1.07,-1.18 -1.78,-0.49 -1.06,2.09 -4.05,1.35 -1.48,-0.93 -0.73,-1.81 -1.84,-0.43 -1.48,-1.43 -1.73,-0.7 -1.4,1.36 -1,-3.63 1.28,-2.29 -1,-1.41 -1.01,0.18 -1.98,-2.28 -0.9,0.37 -7.65,-4.49 -2.03,-0.72 -0.02,1.24 -2.38,-0.64 -1.41,-2.25 0.15,-4.92 0.78,0.36 2.08,-1.78 0.05,-2.39 1.73,-0.13 6.56,3.53 1.24,-0.77 1.69,0.62 1.07,-2.23 1.5,-0.29 -0.53,-0.71 1.83,-0.33 -1.93,-1.22 -0.3,-1.63 -2.43,-0.84 -2.58,-2.54 -0.65,-3.28 -3.74,-2.48 2.08,-2.33 -3.99,-3.74 3.18,-2.42 -0.1,-2.38 -1,-1.86 1.03,-0.58 0.76,-2.76 2.75,1.04 0.61,-0.73 1.35,0 0.58,0.98 1.5,-0.77 2.26,0.31 1.35,-1.17 0.76,-3.43 -1.99,-0.63 -1.15,-1.37 0.54,-1.68 0,0 0,0 0,0 0,0 0,0 1.66,0.48 1.88,-1.33 0.57,0.46 0.6,-2.37 2.37,-0.39 0.3,-2.49 1.34,-1.49 0.24,-1.44 2.08,1.13 2.37,-1.11 0.67,0.94 1.35,-0.17 2.01,-0.94 0.46,-2.21 0.68,-0.38 2.78,-0.18 2.11,-1.41 4.99,-1.07 0,0 z',
    title: 'Abruzzo'
  },
  {
    d:
      'm 457.43021,430.14051 -0.33,-1.23 1.34,-1.23 1.95,-0.38 4.65,0.78 2.51,-0.9 1.45,1.05 1.69,-0.91 -0.16,-0.95 1.67,-0.43 -0.18,-0.76 0.82,0.29 1.42,-0.85 2.3,1.65 1.74,0.3 0.24,1.03 1.26,0.3 0.61,2.35 0.62,-0.42 1.84,1.5 -0.64,1.04 0.3,1.55 -1.79,2.05 -1.51,-0.27 0.61,1.13 5.59,2.38 1.59,1.51 2.14,-1.96 2,0.65 2.94,6.46 6.56,6.05 0.78,1.74 1.53,0.42 3.48,-4.04 2.04,2.47 -0.06,-1.89 0.97,-0.26 0.85,1.33 0.11,-1.74 1.69,0.73 1.01,-0.64 0.17,0.99 1.17,0.7 0.54,-0.74 2.92,2.22 -1.03,0.51 1.22,1.41 -0.9,3.62 0.92,2.05 -0.63,0.46 -0.43,2.89 0.96,1.01 -0.44,0.81 1.16,0.88 -0.96,2.08 0.86,0.94 1.7,-0.43 1.77,1.07 0.37,1.62 1.74,1.47 0.78,1.86 0,0 -3.94,5.64 -4.81,10.36 -2.29,1.67 0,0 -2.72,-0.95 -3.12,0.97 -3.08,-1.02 -1.91,0.37 -0.66,-1.11 -0.63,1.47 0.22,2.84 -1.03,2.22 0.26,2 -3.05,5.44 1.11,1.14 -0.44,1.32 -2.14,-2.39 -2,-0.18 -2.93,0.66 -0.02,1.75 -2.78,-1.27 -1.04,1.08 -4.8,0.26 -1.55,-1.74 0.37,-0.62 -0.85,-1.6 1.24,-2.23 -1.16,-0.32 -1.49,0.85 -0.69,-0.96 -1.85,-0.3 -1.43,1.23 -0.62,-0.87 -0.93,0.49 -0.9,-0.94 -1.68,0.18 -2.35,2.53 -0.95,2.6 0,0 -1.79,-3.55 -2.1,-1.92 -0.14,-1.48 -1.68,-0.98 0,0 1.69,-1.01 -1.27,-1.38 1.21,-0.34 1.56,-2.12 -0.32,-2.91 1.62,-1.65 -0.14,-1 3.47,-1.48 -0.52,-1.23 0.93,-0.83 -0.04,-1.42 -0.61,-1.15 -2.93,-0.85 -0.14,-1.32 -1.64,-1.51 -0.05,-2.56 -2.1,-0.76 -1.6,-2.14 -2.06,-1.03 -0.48,-1.73 -2.17,-1.71 0.72,-1.08 -1.35,-3.21 0.7,-0.82 -4.35,-2.63 0.73,-2.02 1.65,-1.01 0.06,-0.81 -5.93,-3.85 0.17,-4.85 -0.82,-0.07 0.22,-1.18 -2.06,-1.27 2.1,-0.15 0.12,-2.14 -1.02,-0.52 0.43,-0.66 4.79,1.08 0.64,-0.35 -0.23,-1.16 2.96,-1.29 2.26,-5.87 z',
    title: 'Basilicata'
  },
  ...
]

And then comes the logic behind all

If we add some logic we have our full component

export class InteractiveItalyComponent {
  public regions = REGIONS;
  public selectedRegions: string[] = [];

  @Output() regionsChange = new EventEmitter<string[]>();

  onRegionClick(region: string) {
    const index = this.selectedRegions.indexOf(region);
    index === -1 ? this.selectedRegions.push(region) : this.selectedRegions.splice(index, 1);

    this.regionsChange.emit(this.selectedRegions);
  }
}

But don't forget the utilities

I just added a pipe know if a region has been selected:

export class SelectedPipe implements PipeTransform {
  transform(value: string, regions: string[]): boolean {
    return regions.indexOf(value) !== -1;
  }
}

And that's it! We built a fully interactive map of Italy just from an SVG image, isn't that cool? 😎

As a reminder I published this Angular library on NPM as Open Source, so check it out if you want!

@daudr/interactive-italy on NPM

Also, let me know if you'd like to read how to publish an Angular library on NPM

ngFor Done Right

Michele Da Rin — Thu, 04 Jul 2019 12:33:05 +0000

This article has been previously published on my main blog

When dealing with lists in templates, ngFor saves us a lot of time, but it could be a real pain if used wrong, read this article to know hot use it right.

Photo by Kolleen Gladden on Unsplash

All the information on this article can also be found in the official docs

Prerequisites

During this guide we will use an interface that represents our lists' object, let's call it Item, that'll look something like this:

export interface Item {
  _id: string
  name: string
}

and we will use some utils mock and functions that'll help us later:

export const items: Item[] = [{ _id: "a2fHdS8P", name: "Mike" }]

export const makeRandomId = (): string => {
  let result = ""
  const characters =
    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"
  const charactersLength: number = characters.length
  for (let i = 0; i < 8; i++) {
    result += characters.charAt(Math.floor(Math.random() * charactersLength))
  }
  return result
}

export const makeRandomName = (): string => {
  const names = [
    "Sara",
    "Mattia",
    ...
  ]

  return names[Math.floor(Math.random() * names.length)]
}

export const itemsLong: Item[] = [
  {
    _id: makeRandomId(),
    name: makeRandomName(),
  },
  {
    _id: makeRandomId(),
    name: makeRandomName(),
  },
  ...
]

First of all trackBy

trackBy is a function that defines how to track changes for items in the iterable. That means that we can use it to know exactly which element in a list are being changed, after a network call or whatsoever.
We implement it by defining a function in our .ts file:

trackByFunction (index, item) {
  return item._id;
}

then in your .html add your new function

<div *ngFor="let item of items; trackBy: trackByFunction"></div>

Doing this lets your app be more performant as it doesn't need to reload all of your view but only the element that's being changed.

even and odd comes next

The variables even and odd are mainly used for styling the components.
For example, when we have a table and we want to make it more readable we can use these variables to change the background color of the rows.

In your html

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr
      *ngFor="let item of items; trackBy: trackBy; odd as odd; even as even"
      [ngClass]="{ 'odd': odd, 'even': even }"
    >
      <td>{{ item._id }}</td>
      <td>{{ item.name }}</td>
    </tr>
  </tbody>
</table>

And in your css/scss file

.odd {
  background-color: rgba(255, 0, 255, 0.45);
}

.even {
  background-color: rgba(0, 0, 0, 0.45);
}

The result will be something like

Tell me about first and last

Just like even and odd, first and last variables are used for styling purposes too.
Let's use the already created table and set the classes only for the first and last row:

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr
      *ngFor="let item of items; trackBy: trackBy; first as first; last as last"
      [ngClass]="{ 'first': first, 'last': last }"
    >
      <td>{{ item._id }}</td>
      <td>{{ item.name }}</td>
    </tr>
  </tbody>
</table>

.first {
  background-color: rgba(0, 0, 255, 0.45);
}

.last {
  background-color: rgba(0, 255, 0, 0.45);
}

That'll look like this

Don't forget the index

The index property does exactly what you think it does, it tells the index of the element in a list.
Maybe it's the property that's being used the most when we are dealing with lists, just think if you want to lay your lists' element in defined rows using css.

<mat-list>
  <mat-list-item *ngFor="let item of items; trackBy: trackByFunction; index as index">{{ item.name }} index is {{ index }}</mat-list-item>
</mat-list>

All the code used in this guide can be found on Stackblitz and GitHub

Write your first transaction on the Libra Network

Michele Da Rin — Tue, 25 Jun 2019 08:02:21 +0000

This article has been previously published on my main blog

The other day I published an article about the Libra Network, today we'll see how to build a transaction on it.

Libra logo

Installing the testnet locally

Today we won't use Move, the new programming language created to build modules in the Libra Network, but only the terminal (at the moment the only OS supported are Linux and macOS).
To install the testnet you need some prerequisites:

git installed on your machine;
Homebrew installed if you're using macOS

Clone the Libra Core GitHub repository

To install locally the testnet just run this command on your terminal

git clone https://github.com/libra/libra.git

Setup

To setup Libra Core, go into the libra directory and run the setup script to install the dependencies, run these commands on your terminal

cd libra
./scripts/dev_setup.sh

The script simply does these things:

Installs rustup - rustup is an installer for the Rust programming language, which Libra Core is implemented in.
Installs the required versions of the rust-toolchain.
Installs CMake - to manage the build process.
Installs protoc - a compiler for protocol buffers.
Installs Go - for building protocol buffers.

Troubleshoot

If the setup fails, try to run these others commands:

Update Rust:

Run rustup update from your libra directory.

Re-run setup script from your libra directory:

./scripts/dev_setup.sh

Build Libra CLI Client and Connect to the Testnet

To connect to a validator node running on the Libra testnet run the command:

./scripts/cli/start_cli_testnet.sh

This command builds and runs the client utilizing cargo (Rust's package manager) and connects the client to a validator node on the testnet.

Once the client connects to a node on the testnet, you will see the following output. To quit the client at any time, use the quit command.

usage: <command> <args> 
Use the following commands: 
account | a   Account operations
query | q   Query operations
transfer | transferb | t | tb
  <sender_account_address>|<sender_account_ref_id>
  <receiver_account_address>|<receiver_account_ref_id>
  <number_of_coins> [gas_unit_price (default=0)]
  [max_gas_amount (default 10000)] Suffix 'b' is for blocking.  
  Transfer coins from account to another.
help | h   Prints this help
quit | q!   Exit this client
Please, input commands:
libra%

Troubleshoot

If you are experiencing build failures, try to remove the cargo lock file from the libra directory:

rm Cargo.lock

If your client did not connect to the testnet:

Check your internet connection.
Ensure that you are using the latest version of the client. Pull the latest Libra Core and rerun the client:

./scripts/cli/start_cli_testnet.sh

Create new accounts

Once your client is connected to the testnet, you can run CLI commands to create new accounts. I'll walk you through creating accounts for two users.

Step 1: Check if the client is running

A libra% command line prompt indicates that your Libra CLI client is running. To see the help information for the account command enter "account" as shown below:

libra% account
usage: account <arg>
Use the following args for this command:
create | c   Create an account. Returns reference ID to use in other operations
list | la   Print all accounts that were created or loaded
recover | r <file path>   Recover Libra wallet from the file path
write | w <file name>   Save Libra wallet mnemonic recovery seed to disk
mint | mintb | m | mb <receiver account> <number of coins>   Mint coins to the account. Suffix 'b' is for blocking

Step 2: create the first account

Note that creating an account using the CLI does not update the blockchain, it just creates a local key-pair.
To create the first account, enter this command:

libra% account create

This command will generate an output like this:

>> Creating/retrieving next account from wallet
Created/retrieved account #0 address 1h3n34fafae4147b2a105a0be2f91238adcfaaadf93fc0868e7a0253c4a8

#0 is the index of the account, and the hex string is the address of the account. The index is just a way to refer to the account. The account index is a local CLI index that can be used in other CLI commands for users to conveniently refer to the accounts they have created. The index is meaningless to the blockchain. The account will be created on the blockchain only when either money is added to the account via minting, or money is transferred to the account via a transfer from another user. Note that you may also use the hex address in CLI commands. The account index is just a convenience wrapper around the account address.

Step 3: create the second account

To create the second account, repeat the account creation command:

libra% account create

[Optional] Step 4: list accounts

To list the accounts you have created, enter this command:

libra% account list

This is what you'll see:

User account index: 0, address: 3ed8e5fafae4147b2a105a0be2f81972883441cfaaadf93fc0868e7a0253c4a8, sequence number: 0
User account index: 1, address: 8337aac709a41fe6be03cad8878a0d4209740b1608f8a81566c9a7d4b95a2ec7, sequence number: 0

The sequence number for an account indicates the number of transactions that have been sent from that account. It is incremented every time a transaction sent from that account is executed and stored in the blockchain.

Add Libra Coins to the accounts

Minting and adding coins to accounts on testnet is done via faucet. Faucet is a service that runs along with the testnet. This service only exists to facilitate minting coins for testnet and will not exist for mainnet. It creates Libra with no real-world value. Assuming you have created two accounts, with index 0 and index 1 respectively, you can follow the steps below to add Libra to both accounts.

Step 1: Add Libra Coins to the accounts

To mint Libra and add to the first account, enter this command:

libra% account mint 0 125

0 is the index of the account.
125 is the amount of Libra to be added to the account.

A successful account mint command will also create the account on the blockchain.

Sample output on success:

>> Minting coins
Mint request submitted

Note that when the request is submitted, it means that it has been added to the mempool (of a validator node on testnet) successfully. It does not necessarily imply that it will be successfully completed. Later, we will query the account balance to confirm if minting was successful.

To mint Libra and add to the second account, enter this command:

libra% account mint 1 50

1 is the index of the account.
50 is the amount of Libra to be added to the account.
A successful account mint command will also create the account on the blockchain. Another way to create an account on the blockchain is to transfer money from the any other account.

Step 3: Check an accounts' balance

To check the balance in the first account, enter this command:

libra% query balance 0

Sample output on success:

Balance is 100

Submit a transaction

libra% query sequence 0
>> Getting current sequence number Sequence number is: 0
libra% query sequence 1
>> Getting current sequence number Sequence number is: 0

In query sequence 0, 0 is the index of the first account. A sequence number of 0 for both the accounts indicates that no transactions from either one of the accounts have been executed so far.

Transfer money

To submit a transaction to transfer 10 Libra from the first account to the second, enter this command:

libra% transfer 0 1 10

0 is the index of the first account.
1 is the index of the second account.
10 is the number of Libra to transfer from the first account to the other account.

This will generate:

>> Transferring
Transaction submitted to validator
To query for transaction status, run: query txn_acc_seq 0 0 <fetch_events=true|false>

You can use the command query txn_acc_seq 0 0 true (transaction by account and sequence number) to retrieve the information about the transaction you just submitted. The first parameter is the local index of the sender account, and the second parameter is the sequence number of the account.

You just submitted your transaction to a validator node on testnet, and it was included in the mempool of the validator. This doesn't necessarily mean your transaction has been executed. In theory, if the system were slow or overloaded, it would take some time to see the results, and you may have to check multiple times by querying the accounts. To query an account with index 0, you can use the command query account_state 0.

The Blocking Transfer Command: You can use the transferb command (as shown below), instead of the transfer command. transferb will submit the transaction and return to the client prompt only after the transaction has been committed to the blockchain.

libra% transferb 0 1 10

Query sequence number after transfer

libra% query sequence 0
>> Getting current sequence number Sequence number is: 1
libra% query sequence 1
>> Getting current sequence number Sequence number is: 0

The sequence number of 1 for the first account (index 0) indicates that one transaction has been sent from that account so far. The sequence number of 0 for the second account (index 1) indicates that no transaction has been sent from that account so far. Every time a transaction is sent from an account, the sequence number is incremented by 1.

Check the accounts' balance after the transfer

To check the final balance in both accounts, query the balance again for each account as you did in this step. If your transaction (transfer) executed successfully, you should see 90 Libra in the first account and 60 Libra in the second account.

libra% query balance 0
Balance is: 90
libra% query balance 1
Balance is: 60

Congratulations!

You have successfully executed your transaction on the Libra testnet and transferred 10 Libra Coins!

The new Facebook cryptocurrency: Libra

Michele Da Rin — Thu, 20 Jun 2019 08:41:28 +0000

This article was previously published on my main blog.

Recently Mark Zuckerberg has announced Facebook's new cryptocurrency called Libra, let's see what it is.

Photo by Joshua Hoehne on Unsplash

Libra, the new Facebook cryptocurrency

The mission of Libra is simple and clear:

A simple global currency and financial infrastructure that empowers billions of people.

Libra is a stable coin, meaning that, unlike Bitcoin, it doesn't have the volatility but has a reserve backed by real assets that maintain stable its value.
With Libra, Facebook is creating also an association, The Libra Association, with the purpose of regulating the growth of Libra itself. These are the 27 founding members:

Payments: Mastercard, PayPal, PayU (Naspers' fintech arm), Stripe, Visa

Technology and marketplaces: Booking Holdings, eBay, Facebook/Calibra, Farfetch, Lyft, MercadoPago, Spotify AB, Uber Technologies, Inc.

Telecommunications: Iliad, Vodafone Group

Blockchain: Anchorage, Bison Trails, Coinbase, Inc., Xapo Holdings Limited

Venture Capital: Andreessen Horowitz, Breakthrough Initiatives, Ribbit Capital, Thrive Capital, Union Square Ventures

Nonprofit and multilateral organizations, and academic institutions: Creative Destruction Lab, Kiva, Mercy Corps, Women's World Banking

Facebook will try to extend this list to a total of 100 members before Libra's release, planned in the middle of 2020.

How do I start with the Libra Network

The Libra Network is based on smart contracts, like Ethereum and uses a Byzantine Fault Tolerant (BFT) proof of stake, the one that NEO uses.
Here you will find a simple guide that illustrates how to start your local testnet and familiarise with the Libra Network.

The Move programming language

Alongside Libra a new programming language will be released: Move.

This programming language will let developers implement custom "smart contracts" for this new ecosystem.

There are two important building blocks that will appear in almost any transaction script: the LibraAccount.T and LibraCoin.T resource types. LibraAccount is the name of the module, and T is the name of a resource declared by that module. This is a common naming convention in Move; the "main" type declared by a module is typically named T.

This is an example from the Move website:

// Simple peer-peer payment example.

// Use LibraAccount module published on the blockchain at account address
// 0x0...0 (with 64 zeroes). 0x0 is shorthand that the IR pads out to
// 256 bits (64 digits) by adding leading zeroes.
import 0x0.LibraAccount;
import 0x0.LibraCoin;
main(payee: address, amount: u64) {
  // The bytecode (and consequently, the IR) has typed locals.  The scope of
  // each local is the entire procedure. All local variable declarations must
  // be at the beginning of the procedure. Declaration and initialization of
  // variables are separate operations, but the bytecode verifier will prevent
  // any attempt to use an uninitialized variable.
  let coin: R#LibraCoin.T;
  // The R# part of the type above is one of two *kind annotation* R# and V#
  // (shorthand for "Resource" and "unrestricted Value"). These annotations
  // must match the kind of the type declaration (e.g., does the LibraCoin
  // module declare `resource T` or `struct T`?).

  // Acquire a LibraCoin.T resource with value `amount` from the sender's
  // account.  This will fail if the sender's balance is less than `amount`.
  coin = LibraAccount.withdraw_from_sender(move(amount));
  // Move the LibraCoin.T resource into the account of `payee`. If there is no
  // account at the address `payee`, this step will fail
  LibraAccount.deposit(move(payee), move(coin));

  // Every procedure must end in a `return`. The IR compiler is very literal:
  // it directly translates the source it is given. It will not do fancy
  // things like inserting missing `return`s.
  return;
}

The Libra Association

The Libra Association will be based in Geneva, Switzerland (considered by Libra founding members a neutral state, the ideal for this new "neutral" stable coin).

The Libra Association is an independent, Swiss not-for-profit organization with the mission to empower billions of people through the creation of a simple global currency and financial infrastructure. The association membership is made up of the validator nodes of the Libra network. Initially, these are global companies, social impact partners (SIPs), and academic institutions — the Libra Association's Founding Members. Eventually, the association will include any entity that operates a validator node and holds sufficient stake in Libra.

Calibra: The Libra wallet

Facebook is also creating a wallet for Libra, called Calibra.

Calibra is a

Facebook subsidiary whose goal is to provide financial services that will let people access and participate in the Libra Network

Calibra is still in its early development stage, its release is planned in 2020, so the real experience can change a lot from now on, but as we can read from the Facebook announcement:

From the beginning, Calibra will let you send Libra to almost anyone with a smartphone, as easily and instantly as you might send a text message and at low to no cost. And, in time, we hope to offer additional services for people and businesses, like paying bills with the push of a button, buying a cup of coffee with the scan of a code or riding your local public transit without needing to carry cash or a metro pass

Conditional Polyfill in Angular v7

Michele Da Rin — Mon, 20 May 2019 12:46:41 +0000

This article was previously published on my main blog.

If you have a project that's based on Angular v7 and don't have the chance to upgrade to the upcoming v8 or you want to test one of the most useful small features of the future version here you will find how to do it.

Photo by Ahmad Odeh on Unsplash

The trick

In the development of Angular, we’re using TypeScript with a lot of modern JavaScript features. Not all of them are supported by the users’ browsers so that’s why as part of the production build we ship a file called polyfills.js.

Over the past couple of years, browsers started implementing a lot of these APIs. The chances are that a user who’s on the latest version of Chrome, for instance, will not need any of the ES2015 polyfills that we ship as part of polyfills.js. Instead, their browser will support them natively. This makes large portion of the content of polyfills.js obsolete and unnecessary.

That’s why, starting from Angular CLI 7.3.0, it was introduced conditional polyfill loading! As part of the default build process, Angular CLI will produce two bundles polyfills.js and es2015-polyfills.js. polyfills.js includes only the polyfills required by the browsers which have all the ES2015 features implemented natively. In contrast, es2015-polyfills.js contains all the polyfills from polyfills.js + ES2015 ones (such as Map, Set, etc).

The result should be your index.html's body looking like this:

<body>
  <app-root></app-root>
  <script type="text/javascript" src="runtime.***.js"></script>
  <script type="text/javascript" src="es2015-polyfills.***.js" nomodule></script>
  <script type="text/javascript" src="polyfills.***.js"></script>
  <script type="text/javascript" src="main.***.js"></script>
</body>

On the snippet above, you can see that Angular CLI has added the nomodule attribute to the es2015 polyfills tag. This attribute let the browsers download and execute the script only if it doesn't recognize the module script web api, this means that the browser is old 👌

You might be wondering: all my users are with modern browsers, why would I have to wait for the CLI to produce es2015-polyfills.js that will never be in use? If you’re really thinking this, then you’re a happy developer. If you want to ignore ES2015 polyfills completely, then build your application running:

ng build --es5BrowserSupport=false

By setting the --es5BrowserSupport flag to false, Angular CLI will produce only polyfills.js which contains the polyfills required by ES2015 enabled browsers, but your app won't work properly on those old browsers anymore.

If you don't want to set the property every time you run the build command, you can directly modify the property in your angular.json file:

"projects": {
    "project-name": {
      ...
      "architect": {
        "build": {
          ...
          "options": {
            ...
            "es5BrowserSupport": false,

This trick lets you save the scripting of about 60Kb of javascript 😎