Frontend
-
Griglia Less in Magento2
Il frontend di Magento2 ha una griglia? No. O meglio, non per il frontend, l’unica cosa che ha è un mixin per “facilitare” la struttura di layout classici a 1, 2 o 3 colonne. Ecco perché nella documentazione non c’è nulla a riguardo. Come usare il mixin per il layout Posto che saranno molto rari i casi i cui sarà necessario usarlo, il mixin che fa la magia si trova alla riga 107 di _lib/web/css/source/lib/layout.
-
Il footer di Magento 1 è un blocco cachato
Scrivo questo articolo su un argomento che non è particolarmente appassionante, né complesso, né vasto eppure ci sono inciampata almeno due volte con grande frustrazione e so per certo che non è successo solo a me. Quindi scrivo qualche riga così di sicuro non me lo dimenticherò più. L’argomento è la cache del footer di Magento 1, dal punto di vista di un frontend developer che crede di aver a che fare con una richiesta molto semplice e malauguratamente abbassa la guardia.
-
Breakpoint, media query e mixin guard su Magento2
La ragione per cui in magento2 bisogna usare una sintassi così lunga per creare una media query (da qui in avanti “mq”): .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { … } al posto della più semplice: @media screen and (min-width: 1024px) { … } nativa di css va ricercata nel modo in cui i less vengono assemblati e compilati da Magento2. Magento, lo dice nella sua documentazione, vuole evitare migliaia di @media query statements sparsi per tutto il codice, ma preferisce raggruppare in un unico punto tutte le regole di una specifica media query.
-
Live reloading con Gulp e Magento
Se si deve progettare un nuovo tema utilizzando un task runner, potrebbe risultare molto comodo integrare un sistema di live reloading combinato con il task watch, sopratutto se si utilizzano più schermi. Con gulp vi sono due tool molto famosi: Livereload e BrowserSync. Livereload: è un plugin gulp che fa un update live dei file. Si possono specificare manualmente i file oppure collegarlo al task watch per aggiornare i file modificati.
-
Responsive o adaptive?
Responsive e adaptive web design sono due approcci diversi per raggiungere lo stesso risultato: realizzare un design che possa offrire all’utente un sito che si adatta nel migliore dei modi al dispositivo che sta utilizzando. Ci viene spesso chiesto quale sia la differenza e quale sia la scelta migliore tra queste, nelle prossime righe proviamo a fare un po’ di chiarezza. Partiamo con l’origine dei due termini. Responsive web design (RWD) “Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking.
-
Electron – Una nuova era per le applicazioni desktop
figure{ text-align: center; } figure img { margin: 0.5em; } Quando si vuole sviluppare un’applicazione desktop la prima cosa a cui si pensa è per quale sistema operativo svilupparla, quale linguaggio usare ed opzionalmente a quale base dati si ha bisogno di connettersi. Il mondo dell’informatica intanto si sta evolvendo verso l’utilizzo di applicazioni web per la loro semplicità di distribuzione e aggiornamento, la compatibilità con ogni sistema operativo e la superfluità di un’installazione, allora perché non sfruttare questa tecnologia?
-
Gestire gli assets statici con multipli ambienti con Magento 1
Magento 2 ha introdotto tantissimi cambiamenti nella vita di noi sviluppatori Magento, primo fra tutti la quasi obbligatorietà di interfacciarsi con task runner, gestore di pacchetti, compilazione degli assets statici, ambienti diversificati (sviluppo, produzione). Abbiamo già visto in diversi articoli come è possibile replicare alcune di queste caratteristiche anche su Magento 1. In questo articolo vedremo come poter gestire gli assets statici diversificandoli in base all’ambiente di sviluppo, e nel prossimo articolo, in base al tema/sottotema nel caso di template adaptive.
-
From the Front 2016
Giovedì e venerdì della settimana scorsa il reparto frontend di Bitbull si è allontanato dalle tastiere per partecipare al From the Front 2016, uno dei più importanti eventi nazionali dedicati al mondo del frontend development. Il titolo di questa edizione è stato “The frontend guide to life, the universe, and everything”, ispirato al libro e film The Hitchhiker’s Guide to the Galaxy (non sono mancati maglietta e stickers a tema) e si è svolta nella splendida location degli anni precedenti, il teatro Duse di Bologna.
-
Lavorare con le email in Magento 2
Nonostante l’approccio nello sviluppo frontend delle email non sia ancora cambiato a distanza di anni, Magento 2 ha introdotto alcune tecnologie “recenti” nella gestione del frontend delle sue email transazionali. In questo articolo vedremo le tecnologie e le scelte adottate da Magento2 per lo sviluppo delle email, analizzandone pregi e difetti. Come sono organizzate le email Le email di Magento 2 (per numero e tipologia) sono rimaste pressochè le stesse di Magento 1, sebbene siano state distribuite seguendo la nuova struttura del frontend.
-
Bower spiegato ai back end developer
Bower è un gestore di pacchetti per il web, che comprende, tra gli altri, librerie JS e CSS, come Composer lo è per PHP. Perché usare Bower? Se utilizziamo spesso librerie di terzi nei nostri progetti, che vengono rilasciate con nuove versioni periodicamente, è utile avere un gestore di pacchetti perché ci consente di tenere aggiornate le nostre librerie all’ultima versione oppure di tornare indietro a specifiche versioni. Inoltre è molto utile usato insieme ad un task runner come Grunt o Gulp perché è possibile specificare tutte le librerie dipendenti all’interno del file bower.