HTML Fire e Javascript Editor sono app di Chrome per Editor in Real Time.

Come visualizzare immediatamente il risultato di un codice HTML, CSS e Javascript con le applicazioni di Chrome HTML Fire e Javascript Editor.

Con questo articolo inizio una serie di post su alcune interessanti estensioni (o applicazioni) che possono sostituire dei programmi del computer o dei tool online utilizzati da blogger dilettanti e professionisti. Per testare il funzionamento di un codice con linguaggio HTML i meno esperti lo pubblicano in un post di un blog di prova mentre quelli con qualche conoscenza in più possono usufruire di uno dei tanti strumenti online. Il più sofisticato è Codepen che però serve anche per la condivisione di tali codici.

HTML Fire è una applicazione di Chrome che ci permette di vedere in tempo reale il risultato visivo di un codice HTML. Per la sua installazione si va su +Aggiungi

quindi si va nuovamente su Aggiungi. HTML Fire è una applicazione che può essere aperta da desktop anche senza aprire il browser Chrome. Da Desktop si clicca sulla icona con 9 quadretti multicolori oppure da Chrome cliccando sempre sulla stessa icona ma in alto a sinistra

Ricordo che tutte le estensioni e applicazioni di Chrome possono essere abilitate o disabilitate singolarmente aprendo la pagina chrome://extensions/ oppure andando su Menù > Altri Strumenti > Estensioni.  Dopo aver cliccato su HTML Fire si apre una pagina come questa

 

che è divisa in due parti. Nella parte alta con sfondo rosa si incolla il codice e nella parte bassa si visualizza come il browser lo traduce. Si può spostare il cursore per avvicinare codice e rendering visivo. Si tratta di una app che non ha bisogno della connessione a internet per funzionare.

HTML Fire però ha la limitazione di fare il rendering solo dell'HTML e non legge il javascript. Per avere uno strumento paragonabile a Real Time Editor bisogna quindi usare un'altra app. 

Javascript Editor è l'app che fa al caso nostro perché legge HTML, CSS e Javascript.

Si va su Aggiungi poi di nuovo su Aggiungi. Anche questa app di Chrome si può aprire cliccando sulla icona delle applicazioni visibile in alto a sinistra di Chrome o nella barra di stato di Windows.

Si incolla separatamente HTML, CSS e Javascript nei rispettivi campi quindi si ha il risultato

Il test è stato fatto con lo script del countdown personalizzato per Natale. Per visualizzare il campo del CSS si deve cliccare su Less. Entrambi le app presentate possono essere disabilitate quando non servano ma per la mia esperienza non appesantiscono Chrome in modo sensibile.