DEV Community: Gabriel Mayta

Googlebot now supports latest Javascript features

Gabriel Mayta — Sat, 18 May 2019 10:24:18 +0000

Google announced at Google IO 2019 that Googlebot now supports the latest Javascript features. This is an important improvement for Frontend Developers.

This means that now we can develop Single Page Applications or use the latest browsers features like ES6, WebComponents, IntersectionObserver an so on.

Justin Fagnani

@justinfagnani

Googlebot now supports:

🧩 JS Modules
🧱 Custom Elements
🌚 Shadow DOM
🏫 Classes
🏷 Tagged Template Literals

IOW, it's ready for indexing super-modern web sites without compiling to ES5 or SSR! 🎉 twitter.com/googlewmc/stat…

00:39 AM - 08 May 2019

Google Webmasters @googlewmc
🤖 Meet the new evergreen Googlebot! 🤖 We've listened to your questions and feedback and brought modern Chromium to Googlebot - read more at our blog 👉https://t.co/nufYWOozBd

232 515

There are some limitations, for example if you are using babel for transpiling your Javascript code, you should evaluate if it's necessary. Major Browsers supports many ES6 features like fetch, promise, classes, async & await, arrow functions and many others.

Google Index Javascript

To fix Javascript issues I leave you these links:

Debugging

For debugging your pages there are two useful tools:

Javascript SEO

Javascript SEO is a series of videos presented by Martin Splitt where you can find interesting advices.

Keep calm and code!

Usare Travis con Firebase per deployare Applicazioni Frontend

Gabriel Mayta — Tue, 30 Apr 2019 16:09:04 +0000

Scrivo questo post perché in questi giorni mi sono imbattuto in un problema molto ricorrente. Ho diversi progetti su Github la maggior parte sono degli esperimenti che faccio per conto mio. Il mio obiettivo era quello di trovare una piattaforma di hosting gratuita, con supporto di Single Page Applications, integrazione con Travis e Https attivo.

Perche Travis?

Anche se è un progetto personale, non voglio perdere tempo a fare deploy manuali (spostando cartelle su Filezilla) quando ci sono sistemi di CI che mi permettono di automatizzare tutto il flusso di rilascio delle miei applicazioni. Per chi volesse approfondire su travis ecco un link.

Cercando in giro per la rete, ho trovato questa lista di possibili candidati:

Heroku
Amazon S3
Github Pages
Surge.sh
Firebase

Cominciamo con Heroku che uso già per applicazioni NodeJS, il problema è che devo creare una applicazione server per servire i miei file statici, in più la versione gratuita si spegne quando non viene utilizzata.

Amazon S3 l'ho trovato molto macchinoso e non facile da configurare.

Github Pages era l'ideale poi ho scoperto che non offre supporto a SPA. Quindi se dovete sviluppare una demo dove è presente solo una pagina può andare.

Surge.sh sembrava l'ideale, molto facile da configurare, tutto da riga di comando, ma il problema è che i siti sono lenti.

Firebase mi ha sorpreso di solito l'uso per creare REST Api, è stato molto semplice la configurazione.

Configurazione Firebase

La prima cosa che bisogna fare e creare un progetto dalla console di Firebase:

Poi bisogna installare la cli, lo potete fare da riga di commando usando npm:

npm i -g firebase-cli

Dopo l'installazione bisogna lanciare il commando per effettuare la login, verrà aperta una pagina sul browser, dovete confermare i permessi.

firebase login

Per questo esempio ho usato il seguente progetto che ho su Github ngrx-angular-example, prima di lanciare il prossimo commando dovete spostarvi nella root del progetto che volete usare.

firebase init

La console di Firebase vi mostrerà una lista di opzioni dovete selezionare "Hosting: Configure and deploy Firebase Hosting sites":

Poi vi chiederà quale cartella usare per deployare la vostra applicazione e se volete il supporto alle SPA.
Nel mio caso visto che ho usato la CLI di Angular per generare il progetto, la cartella sarà dist/ngrx-angular-example.

Alla fine della configurazione nel vostro progetto verrano inclusi da firebase 2 file:

.firebasesrc
firebase.json

All'interno di firebase.json trovate la seguente configurazione, che potete modificare quando volete:

{
  "hosting": {
    "public": "dist/ngrx-angular-example",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Configurazione Travis

Adesso che abbiamo Firebase configurato, dobbiamo creare il file .travis.yml al cui interno inserire le regole per gestire la build e poi il deploy:

language: node_js
node_js: 
  - '8'
cache: 
  - yarn
branches:
  only:
  - master
before-script: 
  - yarn
script: 
  - yarn prod
deploy:
  provider: firebase
  skip_cleanup: true
  token:
    secure: $FIREBASE_TOKEN
  project: ngrx-angular-fe-gm

Le regole sono molto semplici, nel mio caso voglio che la build si attivi solo sul branch master. Il commando da lanciare per effettuare la build del mio progetto è "yarn prod".

Nelle regole di deploy bisogna aggiungere come provider "firebase" e specificare il nome del progetto che abbiamo creato precedentemente nella console di firebase. Per creare il token potete lanciare il seguente commando e poi salvatelo da qualche parte:

firebase login:ci

Se andate sul sito di travis vi potete creare un account usando la vostra utenza di Github, accettate i permessi che vi chiederà:

Selezionate la vostra repo, in fondo a destra dovrebbe comparire la voce "more options" andate su settings e inserite la seguente configurazione:

Vi ricordate il token che avete generato prima, copiatelo dentro "Environment Variables".

Adesso che abbiamo tutto configurato non ci resta che pushare tutto su develop e poi fare una pull request su master, accettando la PR dovrebbe partire la build in automatico, andate su Travis nella sezione branches, dovresti avere una schermata simile a questa:

Se tutto va a buon fine la schermata finale dovrebbe essere questa:

Adesso che il deploy è finito tornate nella console di Firebase e aprite il vostro progetto, cliccate sulla voce di menu "Hosting" che vi manderà nella pagina dove trovate l'url del vostro sito.

Adesso potete replicare questo processo ogni volta che iniziate un progetto su Github e non lasciare i vostri progetti abbandonati. In questo modo potete anche condividerli con amici e colleghi e perché no, può servire anche da cavia per progetti futuri.

keep calm and code!

Use the platform with Web Components

Gabriel Mayta — Tue, 02 Apr 2019 21:40:58 +0000

Major browsers support many features like Classes, Arrow Functions, Spread Operator, Template Literals, Instersection Observer, Web Components and with the introduction of ES Modules we can develop Web Applications without the help of module bundlers like Webpack or Rollup.

// Detect dark theme var iframe = document.getElementById('tweet-1113016962483998720-640'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1113016962483998720&theme=dark" }

I know what do you think... Talk is cheap, show me the code!

So I created a repository to share my test with Web Components and ES Modules.
I used the Github's API to develop 3 Web Components:

    <github-profile nickname="timbl"></github-profile>
    <github-repositories nickname="timbl"></github-repositories>
    <github-followers nickname="timbl"></github-followers>

As you can see I added the nickname attribute, I used this attribute to retrieve data from Rest API. With WCs you can use html templates to handle fragments of markup to load with JS. For your information the template content is not render by the browser, but can be instantiated later or at runtime.
Below you can find the profile template:

      <template id="github-profile-template">
         <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            div {
                display: inline-block;
                padding: 20px;
                width: 240px;
                height: 300px;
                border: 2px solid #f0f0f0;
                border-radius: 4px;
                overflow: hidden;
            }
            img {
                width: 100%;
                border-radius: 50%;
            }
            h1 {
                margin-top: 20px;
                font-size: 16px;
                color: #f0f0f0;
                text-transform: uppercase;
                text-align: center;
            }
        </style>
        <div>
            <img>
            <h1></h1>
        </div>
    </template>

Below you can find the javascript classes of every WC and you can see how the templates are loaded:

Github Profile

Github Repositories

Github Followers

I developed a service function to make http calls with Fetch. This function will be load from every WC.

And then I created a script file to import my 3 Web Components, I called this file bootstrap.js:

After that I added in the bottom the bootstrap script, I used the type="module" (ES Modules) in the tag:

    <script type="module" src="bootstrap.js"></script>
</body>
</html>

If you open the index.html with your browser, you should see the following files:

To improve performance you can enable HTTPS/2 on server side like Facebook:

Conclusion

In this project I didn't use Babel, Webpack, libraries or frameworks, but I used the Web Standards and my code is working on Chrome, Safari, Firefox and Opera.
You need polyfill to support Microsoft Edge for now.

The Web is changing so fast in the last years, so maybe in some cases is better to choose the standard.

Links

Keep calm and code!

Javascript DOM Manipulation to improve performance

Gabriel Mayta — Fri, 25 Jan 2019 23:16:12 +0000

I wrote this article to show you with examples, how avoid performance issues when develop Web Applications with Vanilla Javascript.

Use selector instead nested elements

// BAD
let menu = document.querySelector('header > nav > ul.menu');

// GOOD
let menu = document.querySelector('.menu');

Avoid DOM manipulations inside loops

// BAD
for (let i = 0; i < 10; i++) {
    document.querySelector('.numbers').innerText += i;
}

// GOOD
let numbers = '';
for (let i = 0; i < 10; i++) {
    numbers += i;
}
document.querySelector('.numbers').innerText = numbers;

Don't use DOM values inside loops

// BAD
let nodes = document.querySelectorAll('.menu-items');
for (let i = 0; i < node.length; i++) { ... }

// GOOD
let nodes = document.querySelectorAll('.menu-items');
const size = nodes.length;
for (let i = 0; i < size; i++) { ... }

Use css classes instead inline styles

// BAD 
let card = document.querySelector('.card');
card.style.width = '400px';
card.style.color = '#f0f0f0';
card.style.marginTop = '10px';

// GOOD 
let card = document.querySelector('.card');
card.style.cssText = ''.concat(
    'width       : 400px;',
    'color       : #f0f0f0;',
    'margin-top  : 10px;'
);

// BETTER 
.card-custom {
    width: 400px;
    color: #f0f0f0;
    margin-top: 10px;
}

let card = document.querySelector('.card');
card.classList.add('card-custom');

Appending DOM is the most expensive operation, choose the right approach

// BAD
let container = document.querySelector('.container');
for (let i = 0; i < 1000; i++) {
    let a = document.createElement('a');
    a.text = `Row N° ${i}`;
    container.appendChild(a);
}

// GOOD
let container = document.querySelector('.container');
let html = '';
for (let i = 0; i < 1000; i++) {
    html = html.concat(`<a>Row N° ${i}</a>`);
}
container.innerHTML = html;

// BETTER
let a = document.createElement('a');
let container = document.querySelector('.container');
for (let i = 0; i < 1000; i++) {
    let cloneA = a.cloneNode(true);
    cloneA.text = `Row N° ${i}`;
    container.appendChild(cloneA);
}

// BETTER^2
let a = document.createElement('a');
let container = document.querySelector('.container');
let documentFragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
    let cloneA = a.cloneNode(true);
    cloneA.text = `Row N° ${i}`;
    documentFragment.appendChild(cloneA);
}
container.appendChild(documentFragment);

Use innerHTML only for first rendering and then use DOM methods

// BAD
let container = document.querySelector('.container');
container.innerHTML = '<input type="text" name="example" value="Hi DEVS!">';
container.innerHTML = '<input type="text" name="example" value="Bye DEVS!">';

// GOOD
let container = document.querySelector('.container');
container.innerHTML = '<input type="text" name="example" value="Hi DEVS!">';
let input = container.querySelector('input');
input.value = 'Bye DEVS!';

If you have some tips, please leave your comment.
Keep calm and code!

My New Year Resolutions for 2019

Gabriel Mayta — Mon, 31 Dec 2018 10:55:18 +0000

I want to share with you my goals for 2019. For this reason I forked this repository to get update my new year resolutions.

Help my wife to learn Html, Css and Javascript
Improve my skills with Dart and Flutter to write native apps
Write at least one article at month
Read a book a month
Improve my english ASAP 😁

and you?

My resolutions repository

Keep calm and code!

My experience with Flutter

Gabriel Mayta — Thu, 06 Dec 2018 20:37:12 +0000

Google has just released version 1.0 of their native app development framework called Flutter.

I've always been a fan of mobile apps, during my career I participated in many projects where I created apps for different companies from scratch.

In most cases I have always used web technologies like Angular / React, Css and Html and then with the help of frameworks like Apache Cordova or Phonegap you could make an hybrid app. The problem with this type of approach is that often the look & feel and the usability are affected heavily, especially with less powerful devices.

Then Facebook arrived with React Native and Microsoft with Xamarin.
Both with the same promise, allow the developer to use the same code on Android, IOS and Windows Phone (RIP).

The major supporter of React Native AirBnb in the course of 2018 announced the farewell to the Facebook home framework for several reasons including bugs and various problems.

Also in 2018 Google announces the release of the first version of Flutter in Beta. Alibaba immediately sees the potential of the new framework and adopts it for the development of a 50 million user app.

I have personally created 2 apps using Flutter, currently they are in the Android store. The learning curve is fast because it always adopts a component logic like it happens with React or Angular even if they call it Widget

The programming language it uses is Dart, object oriented so for those coming from Java or C# it is simpler. They have also introduced ready-to-use UI components that integrate the guidelines of Material Design and Cupertino, which speeds up development. The documentation is still to be improved but they are on track.

To keep you updated I recommend you follow their official channel on Youtube where they publish videos under the title of Boring Flutter Development Show.

Below I leave the links of the 2 projects that I shared on Github:

Keep calm and code!

La mia esperienza con Flutter

Gabriel Mayta — Thu, 06 Dec 2018 19:14:37 +0000

Google ha appena rilasciato la versione 1.0 del loro framework per lo sviluppo di app native chiamato Flutter.

Sono sempre stato un appassionato di app, durante il mio percorso lavorativo ho partecipato in tanti progetti dove mi è capitato di creare da zero app per aziende diverse.

Nella maggior parte dei casi ho sempre utilizzato tecnologie web come Angular/React, Css e Html e poi con l'aiuto di framework come Apache Cordova o Phonegap si creava un'app ibrida. Il problema con questo tipo di approccio è che spesso il look & feel e l'usabilità ne risentono a volte anche pesantemente, soprattutto con dispositivi meno potenti.

Poi sono arrivati Facebook con React Native e Microsoft con Xamarin.
Entrambi con la stessa promessa, permettere allo sviluppattore di usare lo stesso codice su Android, IOS e Windows Phone (RIP).

Il maggiore utilizzatore di React Native AirBnb nel corso del 2018 ha annunciato l'addio al framework di casa Facebook per diversi motivi tra cui bug e problemi vari.

Sempre nel 2018 Google annuncia il rilascio della prima versione di Flutter in Beta. Alibaba vede subito le potenzialità del nuovo framework e lo adotta per lo sviluppo di un'app da 50 milioni di utenti.

Io personalmente ho creato 2 app usando Flutter, attualmente sono nello store di Android. La curva di apprendimento è veloce perché adotta sempre una logica a componenti come succede con React o Angular anche se loro lo chiamano Widget.
Il linguaggio di programmazione che usa è Dart, object oriented quindi per chi arriva da Java o C# è più semplice. Inoltre hanno introdotto dei componenti di UI pronti all'uso che integrano le guidelines di Material Design e Cupertino, questo velocizza lo sviluppo. La documentazione è ancora da migliorare pero sono sulla buona strada.

Per tenervi aggiornati vi consiglio di seguire il loro canale ufficiale su Youtube dove pubblicano dei video sotto il titolo di Boring Flutter Development Show.

Di seguito vi lascio i link dei 2 progetti che ho condiviso su Github:

Keep calm and Code!

How to load polyfills to handle Web Components?

Gabriel Mayta — Fri, 02 Nov 2018 20:44:52 +0000

In this article I will explain you how I handled the latest ES6 and Web Components features.
If you are starting to work with Web Components you should know that they are well supported by Chrome, Firefox, Safari and Microsoft announced this year that they are working to support them.
So you don't need to load polyfills statically, increasing the weight of the final package.

For this reason I created a specific bundle to load polyfills at runtime when browsers don't support it.
I listed the most used features split by types. Below you can find the code:

As you can see I created a function where I define my WC and then I used dynamic import to enable code splitting to load all polyfills. The file contains all features that I need like fetch, es6 and WC features. Check the code:

To enable code splitting with webpack you need to install the following package:

$ npm i --save-dev @babel/plugin-syntax-dynamic-import

After that add the package in your babel setup (.babelrc or babel.config.js):

$  plugins: [
$   '@babel/plugin-syntax-dynamic-import'
$  ]

This demo works without the help of polyfills in Chrome, Safari, Firefox and Edge

If you try to launch the application with IE11, you will see the polyfill loaded:

If you need to see the code, below you can find the links of my repositories:

Are Web Components the future? I don't know but with the right approach you can build reusable components that work in all browsers without load polyfills if you don't need it.

Keep calm and code!

Create a Web Component with LitElement

Gabriel Mayta — Mon, 29 Oct 2018 14:15:21 +0000

Two weeks ago I started to play with Web Components. I think that Web Components is a great approach to build reusable components.

So I want to share with you the repositories where I worked. I also created a scaffolding to generate a custom-element with all you need.

Custom Elements:

After tried the potential of custom elements I created another project with Web Components support. For this purpose I used Lit-element a library developed by Polymer team to support Web Components.

Web Components:

While I writing this post Chrome, Safari and Firefox support Web Components and Microsoft announced they are working to bring Web Components to Edge.

If you need to support IE11 you can integrate webcomponents library that works fine.

What do you think about Web Components?