Quanti Strumenti per Firefox Developer Edition!

Qualche tempo fa siamo andati in diretta per il nostro webinar sugli strumenti di sviluppo messi a disposizione da Firefox Developer Edition, un browser realizzato in casa Mozilla che si focalizza al 100% ad aiutare lo sviluppatore web e mobile che è in te! Sei sicuro di conoscere tutto quello che questo browser ha da offrire?

Come potrai vedere direttamente dal video inserito qua sotto, il nostro Daniele ha fatto un ottimo lavoro nell’esporre i vari strumenti che sicuramente inizierai ad utilizzare nella tua quotidianetà, ma allo stesso tempo ci siamo accorti che per i limiti imposti dallo strumento Hangout e l’aggiunta di alcune feature nascoste veramente bene, abbiamo deciso di realizzare questo articolo nella speranza di darti una mano a comprendere al meglio alcuni aspetti che nel webinar potrebbero essere andati perduti.

Ovviamente, abbiamo inserito il video perché ti consigliamo caldamente di guardarlo e di scoprire le varie funzionalità che questo browser cmette a disposizione ma se non hai tempo o vuoi avere un assaggio di quello che potrai trovare al suo interno ho deciso anche di scrivere qualche parola in più andando ad analizzare assieme gli aspetti più interessanti e utili che possiamo utilizzare.

Cos’è e dove lo trovo?

Partiamo dal punto base di questo articolo, che cosa è e sopratutto dove puoi trovare il browser Firefox Developer Edition. Ebbene la prima domanda è stata già risposta all’interno dell’introduzione di questo artiolo perché questo browser è stato sviluppato da Mozilla con l’intento di creare un browser dedicato agli sviluppatori web e mobile.

Questa intenzione dimostra che la carriera di uno sviluppatore è più che mai di alto interesse per questa associazione e come scoprirai anche all’interno dei nostri futuri webinar è un punto sul quale ci focalizziamo molto anche noi e che desideriamo veder crescere il più possibile!

Cerchiamo di rispondere invece alla domanda dove si trova questo browser. Sicuramente avrai potuto dirti semplicemente “cerca Firefox Developer Edition con Google” e il motore di ricerca più famoso al mondo sarà in grado di darti la risposta corretta.  Ma ho deciso di semplificarti ulteriormente la vita lasciandoti questo link che ti porterà direttamente alla pagina di download per questo potente browser.

Una volta installata questa versione, che può vivere  tranquillamente a fianco della tua classica installazione Firefox, potrai assicurarti di avere un potente strumento che mira a renderti la vita più semplice. Proprio sotto questo aspetto si è focalizzato il nostro webinar e con questo articolo voglio andare ad analizzare gli aspetti più interessanti.

Tutti gli strumenti di Firefox Developer Edition

Prima di proseguire nell’elenco dei vari strumenti che questa versione del browser ci mette a disposizione vorrei parlarti subito del fatto che molto probabilmente torneremo più e più volte ad aggiornare questo articolo perché Firefox Developer Edition è in continua evoluzione!

Già dalla prima stesura di questo articolo abbiamo dovuto aggiungere nuove sezioni perché come puoi scoprire anche dal loro changelog le novità non si fanno certo aspettare e volta dopo volta ci sono nuovi interessanti strumenti e implementazioni che aiutano noi sviluppatori a lavorare al meglio.

Una delle ultime integrazioni che possiamo vedere è quella con il modulo CSS Grid che abbiamo già discusso in un precedente articolo. Mentre con altri browser abbiamo l’obbligo di modificare la configurazione con questo il modulo è già attivo e funzionante e rispetta gli standard pubblicati dalla W3C.

Ma non perdiamo altro tempo e andiamo a scoprire uno a uno gli strumenti più importanti che possiamo utilizzare oggi.

Ispeziona qualsiasi pagina web

Se utilizzi un browser serio (ovvero che comunque offre degli strumenti di sviluppo) puoi vedere il codice utilizzato per comporre la pagina web che stai analizzando. Oggi browser come Firefox, Chrome e anche il classico Internet Explorer portano con se degli strumenti di sviluppo e consultare il codice HTML e CSS standard è un gioco da ragazzi.

Però come abbiamo già discusso, non sempre utilizziamo del codice standard… Per implementare qualche effetto grafico particolare (come ad esempio le ombre avanzate con i CSS3) e mantenere pulita la nostra pagina dobbiamo utilizzare degli pseudo-elementi in grado di estendere le funzionalità di un classico elemento HTML.

Grazie a Firefox Developer Edition potrai vedere gli pseudo-elementi ::before e ::after sia all’interno del tuo codice HTML che nella sezione dedicata alle proprietà CSS applicate alla pagina. Questo è di sicuro un grande beneficio che questo browser ci fornisce dato che potremmo fare degli esperimenti dal vivo senza la necessità di dover neanche toccare l’editor di testo.

E’ anche vero che gli strumenti di ispezione della pagina non sono esclusivi per questo browser, anche se devo dire che devo ringraziare Firefox se li ho scoperti ed iniziati ad utilizzare… Fare il debug del proprio codice frontend è una cosa incredibilmente comoda e poter vedere dal vivo alcune modifiche permette anche di fare veloci test quando si ha a fianco il proprio cliente.

Una delle ultime feature che sono state implementate è proprio la possibilità di consultare le Sass Maps che rendono più semplice il debug del codice CSS generato e di applicare le modifiche nel posto giusto all’interno dei nostri file .scss.

Insomma, gli strumenti che Firefox Developer Edition ci mette a disposizione non sono affatto male, anche se al momento abbiamo guardato soltanto a quelli che permettono di modificare i linguaggi di markup delle nostre pagine. Che cosa ci aspetta se andiamo a vedere qualche linguaggio di programmazione?!?

Analizza JavaScript a tutto spiano

Come scoprirai anche all’interno del corso dedicato, JavaScript è un linguaggio fantastico!!! Dapprima snobbato soprattutto per colpa del suo utilizzo e la tendenza a “sporcare” il codice HTML, oggi sta vivendo una seconda vita ricca di interesse e ottime prestazioni.

Purtroppo non sempre debuggare questo codice risulta un compito per deboli di cuore…

Ti è piaciuto l’articolo fino a ora? Perché non ci dai una mano a crescere condividendo il nostro sito?
[social_warfare post_id=”85″]

Generalmente i meno esperti utilizzeranno la funzione alert() per avere alcune (primitive) informazioni di debug, mentre quelli che si sanno muovere meglio conoscono la potente Console presente anche tra gli strumenti da sviluppatori di questa piattaforma e che può essere sfruttata con la funzione console.log().

Se ancora non la conosci, devi sapere che la console è un potente strumento per lanciare le proprie funzioni e controllarne il codice generato, ma se hai bisogno di strumenti ancora più avanzati non disperare perché il nostro Firefox Developer Edition offre anche un completo debug JavaScript e uno strumento molto comodo che ci permette di analizzare gli eventi jQuery, che non sembra affatto male come feature 😉

All’interno del video allegato il nostro Daniele entra veramente nel dettaglio e ci spiega come utilizzare questi strumenti per debuggare completamente il codice JavaScript o jQuery e ci mostra anche come mettere in pausa l’esecuzione di questi codici per fare in modo di poter controllare al meglio quando qualcosa va storto.

Responsive View, un ottimo modo per testare il sito

Siamo in un’era del web in cui non è più possibile scrivere qualcosa come: questo sito è ottimizzato per Firefox ad una risoluzione di 1024×768, perché oltre che mandare un messaggio poco professionale è semplicemente qualcosa che il cliente non vuole!

Al giorno d’oggi esistono milioni di schermi dalle diverse dimensioni e risoluzioni. Troviamo le diverse risoluzioni dei desktop e laptop che hanno introdotto le proporzioni wide screen (16:9) rivoluzionando le proporzioni standard che erano attive da diversi anni. Allo stesso tempo ci sono milioni di tablet e smartphone che complicano ulteriormente la nostra vita andando ad aggiungere qualsiasi tipo di risoluzione immaginabile.

Creare dei siti web basandoci sulle risoluzioni non è più un percorso consigliato perché queste si differenziano talmente tanto che sono in grado di creare un’esperienza utente completamente diversa e il più delle volte anche complicata.

Per essere degli sviluppatori web pronti a tutto, ma soprattutto per essere in grado di definirsi tali, è necessario che il nostro lavoro implementi anche la realizzazione di siti web responsive ed è necessario anche avere degli strumenti che facilitano i test dei nostri risultati.

Con questa immagine voglio mostrarti quanto sia semplice gestire la finestra che permette di debuggare il nostro sito in base alle risoluzioni che preferiamo. Grazie a questa visuale possiamo prendere uno dei lati che preferiamo e creare la grandezza che preferiamo. Questo ci aiuta in particolar modo quando vogliamo semplicemente scoprire come si comporta il nostro sito web su risoluzioni non definite.

Però come puoi vedere anche dall’animazione, la visuale responsive non finisce qua il suo lavoro infatti possiamo impostare altre caratteristiche come la velocità di connessione, le dimensioni dello schermo preimpostate e molte altre caratteristiche che ci permettono di avere una versione il più verosimile possibile del comportamento del nostro sito.

Quello che ancora non ti ho detto è che potrai ispezionare il tuo codice con gli stessi strumenti che abbiamo visto poco fa. La Firefox Developer Edition è una suite completa di strumenti utili allo sviluppatore e questa responsive view è veramente fantastica.

Scopri dove si trovano i colli di bottiglia del tuo sito

Lo sviluppo web non è soltanto importante per una questione di dimensioni schermo. In fin dei conti, tutti quanti viviamo con un determinato numero di GB mensili disponibili grazie al nostro abbonamento telefonico e quando navighiamo online bisogna sempre stare attenti al nostro consumo, anche perché il peso delle pagine web è cresciuto fino a raggiungere i picchi di 2,5MB per pagina!

E con questo la mia intenzione non è tanto quella di spaventarti, ma soltanto di farti capire che il peso delle nostre pagine è un fattore molto importante sia per il rispetto degli abbonamenti dati dei nostri visitatori che per la velocità di caricamento delle nostre pagine. Non per nulla grandi aziende come Facebook e Google hanno rilasciato le proprie soluzioni per un veloce accesso da mobile ai contenuti presenti sui nostri siti web, rispettivamente gli Instant Article e AMP.

Ovviamente per quanto riguarda il peso delle nostre pagine è opportuno ricordarsi di utilizzare soltanto delle immagini ottimizzate, diminuire il numero di richieste HTTP, ridurre il numero di librerie JavaScript utilizzate dal sito web e altre accortezze che è utile tenere in considerazione.

Queste sono tutte buone pratiche che qualsiasi sviluppatore moderno dovrebbe conoscere e applicare al proprio lavoro, ma c’è un altro aspetto che è molto importante per migliorare l’esperienza dei nostri utenti e mantenere il nostro sito veloce da caricare. Ovvero conoscere dove sono i rallentamenti che il browser subisce disegnando le nostre pagine.

Ecco che questa tab all’interno del nostro Firefox Developer Edition può tornarci veramente molto utile. Al suo interno si trovano quattro strumenti molto potenti:

• Waterfall – che vediamo anche rappresentato nell’immagine ed è lo strumento che ci permette di capire quanto tempo viene speso dal browser e in quale attività.
• Call Tree – passiamo da un grafico a uno strumento che presenta le informazioni in modo tabellare con i quali possiamo fare una cosa leggermente diversa: scoprire quali sono le funzioni JavaScript (e di quali file) che rallentano maggiormente il caricamento delle nostre pagine.
• Flame Chart – sempre parlando di JavaScript, grazie a questo strumento integrato è possibile sapere per ogni millesimo di secondo quali sono state le funzioni richiamate, quanto tempo sono state in esecuzione e da quale file sono state richiamate.
• Allocations – questa opzione deve essere esplicitamente attivata dal menu prima della registrazione delle nostre performance e ci aiuta a capire quanta memoria viene allocata e da quali funzioni. Questa funzionalità è incredibilmente utile quando siamo alla ricerca di colli di bottiglia che rendono il nostro sito web “congelato” durante il caricamento e ci permette di conoscere con precisione dove andare ad operare.

Sicuramente le prestazioni dei nostri siti web sono molto importanti e di tecniche che si possono mettere in atto ne esistono moltissime. In mia opinione questi strumenti servono principalmente per riuscire a trovare quei piccoli dettagli che molto spesso possono sfuggire ai test più comuni, ma allo stesso tempo richiedono una discreta conoscenza di JavaScript e del funzionamento dei browser durante la creazione delle pagine web.

Questo non vuol dire che non dobbiamo usare questi strumenti, anche perché un motivo di rallentamento delle nostre pagine web può essere dovuto semplicemente alle proprietà che vogliamo modificare per creare delle animazioni.

Il video che ti ho inserito qua sopra è stato prodotto dalla stessa Mozilla e trovi un articolo completo che spiega tutto il processo nel dettaglio, quello che mi interessa farti capire è come anche delle piccole scelte nella creazione dei nostri CSS possono colpire il caricamento delle nostre pagine ed è importante conoscere la presenza di questi strumenti se vogliamo fornire veramente la miglior esperienza utente che possiamo creare.

Modifica le tue animazioni passo passo

Ed ecco che parlando proprio di animazioni ci avviciniamo al termine di questo articolo. Come abbiamo visto nella sezione precedente, le animazioni possono anche aiutare a dare vita alle nostre pagine web, ma molto spesso sono causa di rallentamenti perché i browser che devono disegnarle e possono durare più o meno fatica.

Però questo problema arriva soltanto dopo aver risolto il primo: ovvero dopo aver creato una bella animazione!

Ebbene sì perché tutto gli effetti che possiamo applicare con le transazioni non sono poi così complicati per i nostri fidati browser. Grazie alle transizioni possiamo applicare piccoli effetti grafici che vengono attivati soltanto con l’interazione dell’utente, creare un’animazione CSS è una cosa ben diversa.

Per prima cosa dobbiamo conoscere la sintassi che sta dietro alla regola animation e successivamente dobbiamo padroneggiare la creazione dei frame principali di animazione grazie alla at-rule @keyframe.

Districarsi in questo compito non è la cosa più semplice del mondo ma utilizzando Firefox Developer Edition (e dopo la lettura di questo articolo mi auguro proprio che tu lo faccia) sarai in grado di poter sfruttare gli strumenti dedicati alle animazioni CSS che sono inclusi all’interno di questo browser andando a ispezionare ogni millisecondo della tua animazione. Per fare questo puoi sfruttare la timeline incorporata e modificare anche le curve di Beizer che definiscono l’accelerazione e la decelerazione della tua animazione.

Insomma, ci sarebbe veramente molto da parlare sugli strumenti messi a disposizione che ti permettono di creare accattivanti animazioni ma perchè non ti metti subito alla prova? Se hai Firefox Developer Edition installato sul tuo sistema operativo (e se non lo hai ancora fatto mi auguro che tu lo faccia al più presto) è giunto il momento di scoprire il sito che è stato creato per permetterti di scoprire tutte le funzionalità che hai a tua disposizione nel debug delle tue animazioni.

Grazie a questo progetto sarai guidato passo passo alla scoperta degli strumenti disponibili e ti assicuro che il tutto viene presentato in modo incredibilmente divertente!

Conclusioni

Come succede per tutti gli articoli che pubblichiamo all’interno di SkillsAndMore, anche per questo abbiamo raggiunto la fine, significa che abbiamo discusso di tutti gli aspetti e gli strumenti che Firefox Developer Edition ha da offrirte?

Assolutamente no!

Anzi, ad essere onesto abbiamo soltanto dato uno sguardo alle potenzialità di questo browser, esistono molti altri aspetti che potremmo approfondire e che Mozilla fa molto bene nelle sue pagine. Se hai seguito uno qualsiasi dei nostri corsi hai già scoperto da solo che siamo grandi utilizzatori di questo browser e in tutta onestà stiamo anche pensando di creare un corso dedicato agli strumenti che offre.

Questo perché c’è una grande differenza tra vedere qualcuno che utilizza uno strumento e avere le spiegazioni dettagliate e conoscere le potenzialità dello stesso strumento. Forse adesso ti stai chiedendo perché non lo abbiamo ancora fatto, ci sono andato vicino?

Beh onestamente non ci siamo ancora preparati perché vogliamo sapere da te se sei interessato a questa proposta! Non è un segreto che all’interno di SkillsAndMore ascoltiamo da vicino le necessità dei nostri skillati ed è per questo motivo che vogliamo sapere da te se desideri o meno un corso dedicato al browser creato per gli sviluppatori del futuro.

Non esitare a utilizzare la sezione dei commenti qua sotto o, se sei un po’ timido, puoi sempre sfruttare il modulo che trovi nella pagina dei contatti e mandarci una mail in privato 😉

Comunque sia ti auguro un buon proseguimento nel tuo lavoro e spero di vederti nuovamente sulle pagine del nostro blog.