Merged master

Author: chicio

CHANGELOG.md

@@ -1,6 +1,7 @@
 # Change Log
 All changes to Chicio coding will be documented in this file.
 
+<<<<<<< HEAD
 ## [1.2.0](https://github.com/chicio/chicio.github.io/releases/tag/1.2.0)
 Release date: 2019-03-10.
 
@@ -11,6 +12,13 @@ Release date: 2019-03-10.
 
 #### Fixed
 - install process now uses pages gem with bundler installation for gulp build
+=======
+## [1.1.6](https://github.com/chicio/chicio.github.io/releases/tag/1.1.6)
+Release date: 2019-03-03.
+
+#### Added
+- new pages-gem release
+>>>>>>> master
 
 
 ## [1.1.5](https://github.com/chicio/chicio.github.io/releases/tag/1.1.5)

_drafts/2019-04-26-flow-javascript-types.md

@@ -1,7 +1,7 @@
 ---
 layout: post
-title: "TypeScript vs Flow"
-description: "In this post I will do a brief comparison between Flow and TypeScript"
+title: "Flow, the static type checker for Javascript: How to use it and a brief comparison with TypeScript"
+description: "In this post I will talk about how I used Flow to do static type checking on the JS ofa project andI will also do a brief comparison with its main rival TypeScript"
 date: 2019-04-26
 image: /assets/images/posts/appium.jpg
 tags: [web development, javascript, typescript]
@@ -13,4 +13,9 @@ authors: [fabrizio_duroni]
 
 *In this post I will do a brief comparison between Flow and TypeScript.*
 
----
+---
+
+In my daily job at [lastminute.com group](https://lmgroup.lastminute.com/ "lastminute.com group") I usually work with TypeScript. Instead, my personal website (the one where you are reading this article), has been developed using JavaScript for the client side part.  
+As you may already know Javascript is untyped, so it doesn't have static typing. This could lead to bug and it becames more error prone proportionally to the increase of the source code base. As I already explained [in another post](https://www.fabrizioduroni.it/2018/07/04/react-native-typescript-existing-app.html), TypeScript is a typed superset of Javascript that compiles to plain Javascript for any browser, any host and any OS (open source). TypeScript is basically “Javascript on steroid”: it provides optional, static type checking at compile time. Since it is a superset of JavaScript, all JavaScript code is valid TypeScript code.  
+As a consequence of the fact that I already use Typescript during my daily job I started to think if there was another way to have static type checking on my Javascript code already in place for my website. You know, if you already know a tool or a programming language you want to try the other technologies you could find on the market so you're prepared for the future in your career :relaxed:. This is the reason why I decided to use [Flow](https://flow.org/) for my website Javascript source code.  
+What is [Flow](https://flow.org/)?......

_includes/version.txt

@@ -1 +1 @@
-1.1.5
+1.1.6

…3-15-github-pages-progressive-web-app.md …3-03-github-pages-progressive-web-app.md_drafts/2019-03-15-github-pages-progressive-web-app.md renamed to _posts/2019-03-03-github-pages-progressive-web-app.md _drafts/2019-03-15-github-pages-progressive-web-app.md renamed to _posts/2019-03-03-github-pages-progressive-web-app.md

@@ -1,10 +1,10 @@
 ---
 layout: post
-title: "Transform your Github Pages blog into a Progressive Web App"
+title: "Progressive Web App: an app-like experience for your website users"
 description: "In this post I will talk about how I transformed my blog on Github Pages and Jekyll into a PWA."
-date: 2019-03-15
+date: 2019-03-03
 image: /assets/images/posts/pwa-logo.jpg
-tags: [pwa, web development, javascript],
+tags: [pwa, web development, javascript]
 comments: true
 seo:
  - type: "BlogPosting"
@@ -15,8 +15,8 @@ authors: [fabrizio_duroni]
 
 ---
 
-In the last few years the gap in terms of features available between web apps and mobile native apps has decreased more and more. Indeed a new standard is emergin that try to basically close this gap: Progressive Web App, PWA.
-What is a Progressive Web App :heart_eyes:? Let's see how Google defines it on its [developer site](developers.google.com "google developer pwa"):
+In the last few years the gap in terms of features available between web apps and mobile native apps has decreased more and more. Indeed a new standard is emerging that tries to basically close this gap: Progressive Web App, PWA.
+What is a Progressive Web App :heart_eyes:? Let's see how Google defines it on its [developer site](https://developers.google.com/ "google developer pwa"):
 
 >Progressive Web Apps are user experiences that have the reach of the web, and are:
 >
@@ -25,13 +25,13 @@ What is a Progressive Web App :heart_eyes:? Let's see how Google defines it on i
 >* Engaging - Feel like a natural app on the device, with an immersive user experience.
 >* This new level of quality allows Progressive Web Apps to earn a place on the user's home screen.
 
-What does basically means? PWAs are web application that combine the best of the web and the best of native mobile apps. They can reach a vast user base (as all web apps) but they also have native alike features like:
+What does it basically means? PWAs are web applications that combine the best of the web and the best of native mobile apps. They can reach a vast user base (as all web apps) but they also have native alike features like:
 
 * they can work offline
 * they can use hardware capabilities and are they able to receive push notifications
 
 Soooo I started to think: "Whoah, I can modify my blog/website to become a PWA, so that I can explore this new technology and I can also have something that 'feels like an app' for my blog!!!".  
-So how is it possible to transform a site build with Jekyll and published on Github Pages in a basic PWA? In this post I will show you how I did it (and this article is part of the PWA described here).  
+So how is it possible to transform a site built with Jekyll and published on Github Pages in a basic PWA? In this post I will show you how I did it (and this article is part of the PWA described here).  
 To create a basic PWA I need 3 things:
 
 * publish the site on HTTPS
@@ -58,7 +58,7 @@ A typical manifest file includes the following informations:
 * `theme_color`, that sets the color of the tool bar, and may be reflected in the app's preview in task switchers.
 
 There are also other options that could be set, like for example the `orientation`, if you want to enforce a specific orientation of your app. You can find a complete description of the fields above in the [Google Web Fundamentals - Web App Manifest](https://developers.google.com/web/fundamentals/web-app-manifest/ "Web app manifest") article.
-So I created all the assets needed for the my web app manifest (a new set of icons of different dimensions) and I put it in the root of my website. Below you can find the entire JSON.
+So I created all the assets needed for my web app manifest (a new set of icons of different dimensions) and I put them in the root of my website. Below you can find the entire JSON.
 
 ```json
 {
@@ -94,7 +94,7 @@ So I created all the assets needed for the my web app manifest (a new set of ico
 }
 ```
 
-One important thing to note is that not all the platforms adhere to the web app manifest standard. In fact Apple and Microsfot still uses some custom meta tags to define the icon of the Progressive Web App. So besides the web app manifest, to make my PWA works the same way on all the platforms I had to add the following meta tag in the head of my pages.
+One important thing to note is that not all the platforms adhere to the web app manifest standard. In fact Apple and Microsoft still use some custom meta tags to define the icon of the Progressive Web App. So besides the web app manifest, to make my PWA work the same way on all the platforms I had to add the following meta tag in the head of my pages.
 
 ```html
 <link rel="apple-touch-icon" href="/assets/images/apple-touch-icon.png">
@@ -132,7 +132,7 @@ As you can see there's a list of meta tags named `apple-touch-icon` specific for
 
 A service worker is the heart of a Progressive Web App. Let's see the definition of what is a service worker taken from the [Google Web Fundamentals - Service worker](https://developers.google.com/web/fundamentals/primers/service-workers/ "Service Worker").
 
->A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction. Today, they already include features like push notifications and background sync. In the future, service workers might support other things like periodic sync or geofencing. ... is the ability to intercept and handle network requests, including programmatically managing a cache of responses.
+>A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction. Today, they already include features like push notifications and background sync. In the future, service workers might support other things like periodic sync or geofencing. ... is the ability to intercept and handle all the network requests, including programmatically managing a cache of responses.
 
 Whoooaaa!!! :open_mouth: Basically service workers let your web app inherit some features that are tipically found only in a native mobile app:
 
@@ -148,7 +148,7 @@ Anyway, there are some particular features of a service worker you must be aware
 
 So how do I created the service worker for my blog? I started by adding a `sw.js` file to the root of project. This is the standard position for a service worker source code. Then I added the registration script before the end of the body of my pages. Below you can find the registration script.
 
-```javascript
+```html
 <script>
   if('serviceWorker' in navigator) {
     navigator.serviceWorker
@@ -168,7 +168,7 @@ Then I started to write my service worker. To do that, first I studied the lifec
 
 So in the install event I followed the standard approach:
 
-* I opened the cache for my blog pwa with name `chicioCodingCache{% include version.txt %}`, where version.txt is a file that is automatically filled with the latest tag number on each `npm version` execution.
+* I opened the cache for my blog pwa with name {% raw %}`chicioCodingCache{% include version.txt %}`{% endraw %}, where version.txt is a file that is automatically filled with the latest tag number on each `npm version` execution.
 * I added to the cache the files needed to make my pwa works (css and js of the site, and in the future also a HTML scaffolding structure :stuck_out_tongue_winking_eye:).
 
 In the activate event I added a strategy to manage the old caches: I just delete them and I kept only the new one created during the install phase.
@@ -186,12 +186,12 @@ Below you can find the complete implementation of the service worker.
 ---
 importScripts('/cache-polyfill.js');
 
-const siteCacheName = 'chicioCodingCache{% include version.txt %}';
+const siteCacheName = {% raw %}'chicioCodingCache{% include version.txt %}';{% endraw %}
 const dependenciesUrls = [
   "/favicon.ico",
-  {% include service-worker-home-urls.js %}
-  {% include service-worker-blog-urls.js %}
-  {% include service-worker-css-urls.js %}
+  {% raw %}{% include service-worker-home-urls.js %}{% endraw %}
+  {% raw %}{% include service-worker-blog-urls.js %}{% endraw %}
+  {% raw %}{% include service-worker-css-urls.js %}{% endraw %}
 ]
 
 self.addEventListener('install', (event) => {

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "fabrizio-duroni",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "description": "Fabrizio Duroni aka 'chicio' website",
   "main": "index.js",
   "scripts": {