DEV Community: Andrea Barghigiani

The no BS guide to show your impact with XYZ Framework

Andrea Barghigiani — Tue, 21 Apr 2026 09:40:19 +0000

How many times have you lost a promotion because you weren't able to describe your contributions to a project? Or even worse, has it never happened that you couldn't quickly present the impact you had with your last team during an interview?

I know the feeling, because I felt it more times than I'd like to admit.

For most of my career all that mattered was the quality of my code and how clear I was able to produce commits and documentation for my team.

While this made me "famous" around colleagues, it didn't help to spread my name in management. The people my promotion depended on almost didn't even know that I existed.

And this is mostly because I didn't pick up the habit to track my contributions, relying only on my memory. And it didn't help much.

Keeping track of your contributions is probably the most important aspect of your work as engineer, otherwise you'll be among the 90% that suffer from memory fade.

You can't expect your manager to check the PR description that you crafted for your team.

That's why in this article I want to talk to you about a framework, that Google used internally, that will help you not only to pick up the habit of keeping all your contributions in the same place but will help you translate our tech-jargon into clear goals relevant for the business.

Aren't frameworks full of fluff?

Let me just say: not everyone.

As a fellow engineer I do share with you doubts about the need to apply a framework while describing our successes, but the thing is similar as when we learn a new language, if we're serious about our career growth we have to adapt the way we share our accomplishments.

Let's put this into practice. Read this out loud: "Improved search feature."

As an engineer I am pretty sure your first question was "how?" We are more curious about what the improvement was and how it was applied, than the business implication behind it.

And that's fine, you're an engineer after all and you want to learn new things and help your teammates. But when you want to share your wins among other departments you have to write the information in a way that is gonna be easily understandable by them. Try to read the following: "Reduced search latency by 65%, increasing user retention 12% by implementing Elasticsearch caching."

How does it sound? Do you think that even less technical people will be able to understand the impact of your work?

I think so.

Let's dive a bit deeper into the structure of this message.

What's this XYZ?

The XYZ formula is a three-part structure for describing impact: Accomplished [X] as measured by [Y] by doing [Z]. Google popularized it. Engineering teams at Dropbox, GitLab, and most high-growth startups now expect it in performance reviews and resumes.

Here's why it works: it forces you to translate tasks into outcomes with proof attached.

Most engineers list what they did.

High-performers list what changed.

And not what changed in terms of the amount of lines, or metrics that are tightly connected with our code. High-performers are able to understand what the business really takes care of. In the example above, they don't care if you implemented Elasticsearch caching, their main interest goes to the increase of user retention that this implementation was able to bring. You added Elasticsearch almost for fun, and to let other departments know that you master such technology.

The Formula in Practice

Let's try with another example. You've just implemented new CI templates and parallelization to cut deployment times, how would you add it in your brag document?

"Worked on CI/CD improvements to speed up deployment time."

That's it? Outside your team, who even knows what a CI is?

But the thing is that you have to make these accomplishments understandable from someone that doesn't know our entire tech stack. So in order to do so we have to think about how we can implement the XYZ formula, here's how I reason about when I want to translate one of my contributions in a way that everyone can understand.

Component	What It Answers	Example
X	What outcome happened?	"Increased deployment frequency 2x"
Y	How do you know?	"Cut build times 25%"
Z	What did you actually do?	"Introduced CI templates and parallelized jobs"

Now that we have done this exercise, making it more understandable is the easy part: "Cut build times 25% by introducing CI templates and parallelized jobs, enabling a 2x increase in daily deployment frequency."

Compare that to the previous, don't you think that's a great improvement?

Why This Matters for Performance Reviews

If you are working in a company that is taking care of you and wants to know how you improve inside the company, you most likely have at least a couple of performance reviews per year.

The issue is that managers handle dozens of engineers at once. Your job is to hand them a structured, evidence-based narrative they can defend in that room.

The "Chores vs. Wins" Problem

Engineers often write: "I was busy this quarter: fixed bugs, attended standups, reviewed PRs."

Management hears: "This person performed their job description."

What they need to hear: "This person moved the needle on company goals."

That's your main goal with a brag document: show off how you helped the company in reaching their goals task after task. Letting them know that you mastered a new framework is not relevant for the type of goals they have to track.

Finding the right balance with the 70/30 Rule

I know what you're thinking: I can't list all my contributions following this formula, it is simply impossible.

And I do agree with that, part of our work needs to live in learning. We need to learn new concepts, frameworks or simply keep up to date our knowledge; otherwise we will be outdated in the next few years.

What I am trying to say here though is that we need to find the right balance, and as in many other cases the Pareto Principle here plays a great role (even though we changed it slightly).

Here's how to balance an effective self-evaluation:

70% concrete wins with metrics
30% genuine growth areas

Connect both to quarterly objectives or team KPIs. This shows you're not just completing tasks but driving the company's mission.

Quantifying "Glue Work"

As we just stated, not all impact is quantifiable—especially because not all impact happens in code.

During your career you'll frequently find yourself mentoring colleagues, improving processes, or participating in cross-functional initiatives. These aren't easy to quantify, but if you want to make a good impression you have to do it anyway.

Here's how to think through each type and transform vague descriptions into XYZ bullets that actually land.

Mentorship

Let's say you spent six months helping a junior engineer get up to speed. Your instinct might be to write:

Before: "Mentored junior team members and helped them grow."

Nice. But grow how? And who cares?

Ask yourself: what changed because of your mentorship? Did they ship features independently? Did they start reviewing others' code? Did team velocity improve once they stopped blocking on you?

After: "Mentored 2 junior engineers to independent project ownership through weekly 1:1s and pair programming, increasing team project completion rate 20% as they began owning features without escalation."

Notice what happened here. The Z (weekly 1:1s, pair programming) is the activity everyone does. The Y (20% completion rate increase) and X (independent ownership) are what actually matter to management.

Process Improvements

You automated something boring that was eating everyone's time. Your first draft:

Before: "Built automation scripts to improve team efficiency."

Okay, but what was the cost of not having automation? And what did "efficiency" actually mean?

Think in terms of time returned, errors prevented, or frustration reduced. Can you count hours saved per week? Did error rates drop because humans were removed from the loop?

After: "Automated vendor payment reconciliation workflow, eliminating 40 man-hours of manual data entry monthly and reducing payment processing errors 15%."

The Z here is specific (vendor payment reconciliation). The Y has two metrics—hours saved and error reduction. The X is implied: more reliable operations with less manual labor.

Cross-Functional Coordination

You played the diplomat between teams that don't usually talk to each other. Your default description:

Before: "Facilitated communication between engineering and product teams."

Everyone says this. It means nothing.

What was the actual outcome? Did a project ship faster because you resolved blockers? Did feature quality improve because requirements got clarified earlier? Did you prevent a deadline slip?

After: "Coordinated launch initiative between engineering, product, and design teams by implementing shared project dashboard and weekly syncs, delivering high-priority mobile feature 2 weeks ahead of schedule with 30% fewer post-launch bugs."

Here the Z shows you didn't just "facilitate"—you built infrastructure (dashboard, syncs). The Y has speed (2 weeks early) and quality (30% fewer bugs). The X is hitting a business deadline that mattered.

The Pattern for Glue Work

Every time you do work that doesn't produce a commit, ask three questions:

What was broken before? (Context for why your effort mattered)
What did you actually build/change? (Your Z—specific tools, processes, structures)
What became possible after? (Your X and Y—time saved, people unblocked, risks avoided)

Glue work only looks invisible if you describe it vaguely. Get specific about the mechanism you created and the downstream effects it produced.

Building Your Brag Sheet

Don't wait for review season. Track monthly:

Projects completed → What metrics changed?
Technical decisions → What alternatives did you reject and why?
Collaboration → Who did you unblock? What processes did you improve?
Mentorship → Who leveled up because of you?

Pull from: calendars, project trackers, commit history, incident post-mortems, Slack threads where you solved problems.

Quick Reference: XYZ Builder

Template: Accomplished [X] as measured by [Y] by doing [Z]

Before: "Improved search features"

After: "Reduced search latency 65% (Y) by implementing Elasticsearch caching (Z), resulting in 12% improvement in user retention (X)"

Checklist for every bullet:

[ ] Starts with outcome (X), not activity
[ ] Includes a number (Y): %, $, time, count
[ ] Describes specific technical action (Z)
[ ] Could pass through an ATS without buzzwords
[ ] Answers "so what?" without requiring explanation

The Bottom Line

The XYZ framework isn't resume decoration; it's a professional habit. Engineers who master it don't just do good work; they make that work legible to the people who decide on promotions, budgets, and hiring.

Start with your last three projects. Rewrite them as XYZ bullets. Put them in front of a manager or peer. If they ask follow-up questions, your Y isn't strong enough. If they glaze over, your X isn't concrete enough. Iterate until the impact is undeniable.

A Tool for the Habit

Here's the problem: you won't remember the details three months from now. That 65% latency improvement? You'll recall you did something with search, but the exact metric, the technical approach, the business outcome? All of it fades.

I've been there.

That's actually why I started building CareerCraft.ing.

It's a personal vault that captures your wins as they happen; PRs, commits, mentorship moments, process improvements. An MCP server extracts impact from your workflow only when you trigger it. No background scraping, no surveillance. Then the XYZ engine transforms your raw notes into the kind of bullets that actually get read.

Because tracking your career shouldn't be another chore. It should be automatic.

I will release this tool in Q2. In the meantime, use the XYZ framework to build your brag sheet and subscribe to the waitlist.

Consigli allo sviluppatore web per creare un forte posizionamento.

Andrea Barghigiani — Tue, 18 Feb 2020 11:34:09 +0000

Trovare il giusto posizionamento è un'attività incredibilmente importante per qualsiasi professionista e per lo sviluppatore web è ancora più importante!

In questo video troverai alcuni suggerimenti che devi assolutamente mettere in pratica se vuoi differenziarti dalla concorrenza e ottenere i clienti che ti meriti.

Abbiamo anche lanciato un corso gratuito dal titolo: Dal niente al cliente - Trova il tuo cliente ideale in 15 giorni

Vieni a scoprire le importanti lezioni che puoi apprendere e ricordati di iscriverti sul nostro canale YouTube per restare aggiornato con gli ultimi consigli.

Perché dovresti prendere in considerazione Genesis

Andrea Barghigiani — Mon, 15 Apr 2019 06:52:08 +0000

Sviluppi con WordPress da diversi anni e nella creazione dei temi hai sempre scelto _s come starter theme? Forse non è la scelta migliore…

Iniziare il proprio lavoro di sviluppo temi con uno starter theme è sicuramente una mossa intelligente, soprattutto se ci troviamo a muovere i primi passi all’interno di una piattaforma che non padroneggiamo completamente.

In fin dei conti avere a disposizione uno starter theme ci permette di conoscere da vicino come viene creato un tema WordPress.

Si investono molte nottate a studiare tutto il codice, le funzioni e le logiche che giudano lo starter theme per poi…

Rimuoverne metà perché il nostro progetto è molto semplice!

Personalmente mi sono trovato molte (forse troppe) volte in questa condizione.

Negli anni ho avuto anche la cattiva idea di usare diversi starter theme e nonostante trovassi ogni volta i benefici appena descritti, la fine era sempre la stessa.

Dovevo rimuovere il codice che non utilizzavo!

Questo perché, un po’ come i temi multipurpose su ThemeForest, uno starter theme deve aiutare lo sviluppatore a creare velocemente un nuovo tema.

Il problema è che non sapendo cosa deve realizzare lo sviluppatore, lo starter theme si trova nella scomoda posizione di includere il più possibile lasciando da parte le cose più opinionabili: come per esempio i CSS!

Gli starter theme di WordPress sono incredibilmente utili per velocizzare il nostro lavoro, peccato che nel 90% dei casi dobbiamo rimuovere tutto il codice che non viene utilizzato e i CSS sono praticamente inesistenti.Click To Tweet

Peccato che i CSS sono, almeno per il mio punto di vista, uno degli aiuti più importanti che uno sviluppatore potrebbe avere!

Portriamo però a termine questo mio piccolo rant perché non mi sto affatto lamentando, tutto quello che hai letto fino ad ora mi è servito per “preparare il terreno” per descriverti come sono arrivato alla conclusione che leggerai più avanti.

Attenzione, link di affiliazione presenti.

Mi sembra giusto avvisarti che i link che puntano verso StudioPress o il framework Genesis sono link di affiliazione. A te non cambia nulla mentre io farò qualche euro se decidi di acquistare.

Se la cosa non ti piace puoi sempre fare copia/incolla del seguente link: https://www.studiopress.com/.

Perché hai bisogno di un framework

Con la sezione precedente penso di averti fatto capito che, per quanto apprezzi gli starter theme, oggi non li uso più.

Preferisco non usarli perché ho trovato una soluzione che soddisfa le mie esigenze , una soluzione che mi offre una code base solida e che al tempo stesso non si mette tra i piedi facendomi risparmiare tempo.

Ho trovato un framework!

Se ancora non sai cosa sia un framework dedicato allo sviluppo di temi WordPress ecco la mia definizione non ufficiale:

Un framework non è altro che un insieme di “aiuti” che mirano a rendere più semplice la vita dello sviluppatore.

Andrea Barghigiani

Ovviamente la mia scelta, Genesis, non è l’unico framework creato per questo scopo ma è quello che ho deciso di utilizzare per molti motivi, quelli dedicati allo sviluppo sono solo una parte.

Esistono framework che includono di tutto.

Framework che non si concentrano soltanto sullo sviluppo di un tema ma che inseriscono funzionalità avanzate sia nel backend che nel frontend, a mio avviso queste funzionalità dovrebbero far parte di un plugin…

Avere a che fare con framework così “potenti” mi ha sempre fatto preoccupare un po’.

Eppure il framwork dovrebbe essere una cosa semplice che si posiziona tra il nostro WordPress e l’aspetto frontend di un tema.

Un framework deve fornire le sue funzionalità basandosi sull’infrastruttura sulla quale si appoggia , non dovrebbe rivoluzionarla.

Come StudioPress definisce il suo framework Genesis.

Io ho scelto Genesis perché rispecchia questo fondamentale aspetto.

Negli anni abbiamo visto moltissimi framework nascere (e morire) perché non rispettavano questo concetto fondamentale.

Come succede nei linguaggi di programmazione dove esistono decine di framework, queste soluzioni aggiungono nuove funzionalità al linguaggio ma utilizzano sempre le strutture che gli sono state fornite alla partenza.

Se un framework modifica le logiche base di un linguaggio perde la capacità di essere chiamato in questo modo.

Sarebbe soltanto un nuovo linguaggio.

Perché ti consiglio di scegliere Genesis come framework?

Arriviamo al vero punto cruciale di questo articolo: perché ti sto consigliando Genesis?

Te lo sto consigliando perché se lo acquisterai passando da uno dei miei link potrò guadagnare qualcosa con l’affiliazione?

Assolutamente no!

Utilizzo il mio link di affiliazione perché sto parlando di un progetto commerciale e non trovo niente di male se guadagno qualche euro dal tuo acquisto.

Ti consiglio Genesis perché credo veramente che sia il miglior framework in circolazione.

Però non voglio che tu creda alla mia parola soltanto perché l’hai letta su questo sito.

Quello che desidero è che tu sia in grado di prendere una scelta con la tua testa e per fare questo condividerò con te le motivazioni che mi hanno spinto ad acquistare il piano Pro Plus.

Di seguito troverai alcune delle mie risposte ai temi più caldi che ho sentito pronunciare quando mi sono confrontato con altri sviluppatori ma prima di affrontarli voglio condividere con te quelli che considero essere i punti a favore nella mia scelta.

Se poi vuoi condividere la tua opinione con il sottoscritto e con i lettori di questo blog la sezione dei commenti è al tuo servizio.

Genesis è qua per restare!

Se poco più di un anno fa mi avessi chiesto quali fossero i miei sentimenti nei confronti di StudioPress e del suo framework Genesis ti avrei detto:

Adoro il framework ma non so dove vuol andare l’azienda.

Per lavoro utilizzo Genesis da più di 3 anni e lo conosco per sentito dire da più di 6.

Ho visto le sue diverse trasformazioni e durante il 2017 e il 2018 avevo notato che i rilasci del framework si erano rallentati e che l’azienda stava cercando modi alternativi per monetizzare.

StudioPress è una delle prime (se non la prima) theme shop apparse nel web, forse se oggi ci sono tante aziende che vendono temi WordPress il merito è anche di Brian Gardner (il fondatore).

Essere i primi a volte significa fare delle scelte sbagliate.

Una delle scelte sbagliate che sono state fatte è non impostare un abbonamento.

Hai capito bene.

Se vai su StudioPresss e acquisti uno dei suoi child theme (basta anche il solo framework) oltre ad ottenere la versione odierna del tema avrai accesso a vita anche ai futuri aggiornamenti.

Io sono stato testimone di questa realizzazione perché negli anni ho visto nascere soluzioni dove Copyblogger Media (l’azienda alle spalle di StudioPress e altri servizi) cercava di trasformare queste vendite in un guadagno ricorrente.

Il primo tentativo fu fatto creando la piattaforma Rainmaker e poi promuovendo l’opzione StudioPress Sites, una soluzione che integrava Genesis al potente hosting gestito dalla stessa azienda.

Per un certo periodo StudioPress stava valutanto anche la possibilità di inserire un rinnovo annuale!

Per fortuna niente di tutto questo è successo. Anzi per StudioPress le cose sono andate ancora meglio!

StudioPress è stata acquisita da WP Engine 🎉

Se non la conosci, WP Engine è un’azienda che offre ottimi piani di hosting dedicati a WordPress e per amplicare la propria offerta e ritagliarsi una fetta di mercato ha scelto di acquisire StudioPress con tutti i suoi dipendenti.

Parlando di hosting io preferisco SiteGround ma questa è una storia per un altro articolo.

Spero di averti fatto capire che StudioPress e di conseguenza Genesis ormai sono qua per restare e rappresentano un importante punto di riferimento nell’ecosistema WordPress vantando più di 200.000 clienti con più di 500.000 siti attivi.

Genesis è in continuo sviluppo

Continuando a parlare delle motivazioni che mi continuano a convincermi nei confronti dell’utilizzo di Genesis bisogna dire che, soprattutto dopo l’acquisizione, questo framework è tornato in attivo sviluppo.

Genesis sta per raggiungere la versione 2.10 e c’è da dire che negli ultimi rilasci sono state rilasciate funzionalità davvero interessanti, soprattutto per noi sviluppatori!

Una delle funzionalità più interessanti è stata l’integrazione di un sistema di onboarding esclusivo.

Sicuramente implementare un sistema di onboarding è molto più utile agli sviluppatori di temi Genesis che vengono venduti attraverso un marketplace ma è comunque una figata pazzesca!

All’installazione di un child theme Genesis che supporta questa funzionalità il nostro utente si troverà di fronte questo benvenuto che gli consentirà di installare i plugin necessari e importare il contenuti di esempio.

Tempo fa parlammo proprio di una caratteristica simile con la TGM Activation Library ma è incredibilmente più bello vedere queste funzionalità all’interno del framework che stiamo utilizzando.

Gli aggiornamenti su Genesis non terminano certo qua, tornerò a parlare più avanti di quelli più interessanti perché il prossimo punto che voglio condividere con te lo ritengo ancora più importante.

Ottimizzazioni SEO a portata di mano

So benissimo che al giorno d’oggi non esiste tema che non dichiara “SEO optimized” o qualcosa del genere.

Il problema principale è che non riusciamo a capire quanto il tema è stato ottimizzato per la SEO e soprattutto quali sono gli strumenti che ci vengono forniti per adattare questa ottimizzaizione alle nostre necessità.

Il problema di molti temi che si vendono come SEO optimized è che usano questi termini soltanto come una feature.

Un aspetto che il loro tema ha esclusivamente.

La realtà è che oggi qualsiasi tema dovrebbe essere ottimizzato per la SEO.Click To Tweet

È semplicemente un byproduct dell’essere uno sviluppatore di temi.

Quello che Genesis fa di diverso è che offre degli strumenti per personalizzare le ottimizzazioni SEO in base alle nostre necessità.

Se non conosci questo aspetto, il framework Genesis offre dei filter hook per personalizzare lo Schema.org presente nelle nostre pagine, te ne parlo nel dettaglio in questo articolo.

Oltre a questo gli strumenti integrati dedicati alla SEO vengono disattivati automaticamente se si installa un plugin più specifico come Yoast SEO. Questo ci permette di eseguire soltanto il codice necessario.

Un framework basato sulla piattaforma

All’inizio di questo articolo ti ho confessato le mie frustrazioni quando vedo un framework che cerca di reinventare la ruota.

Framework che cercando di prendere l’approccio iniziale nello sviluppo WordPress e lo stravolgono perché pensano di aver trovato la soluzione perfetta.

Ogni volta che vedo un framework del genere mi chiedo: perché non avviano un proprio CMS?

Voglio dire, se la struttura sulla quale ti basi non ti piace, perché utilizzarla?

Forse perché oggi WordPress copre più di un terzo del web?

Quello che apprezzo nel lavoro svolto dagli sviluppatori Genesis è che basano il proprio framework sulla struttura sulla quale si basano.

Genesis infatti rispetta al 100% la WordPress way e fa un grande uso degli hook che questo CMS mette a disposizione.

Quello che apprezzo nel lavoro svolto dagli sviluppatori Genesis è che basano il proprio framework sulla struttura sulla quale si basano. Genesis infatti rispetta al 100% la WordPress way e fa un grande uso degli hook che questo CMS mette a disposizione.

Ti ho già parlato di quanto sia bello sviluppare con Genesis e come sia possibile fare affidamento alle sue strutture per creare i propri child theme.

Sto anche valutando la creazione di un corso dedicato quindi se sei interessato non ti dimenticare di commentare questo articolo!

Una community affiatata pronta ad aiutarti

Quello che ancora non ti ho detto è che la community intorno a Genesis è veramente fantastica!

Acquistando anche solo il framework avrai accesso al forum privato dove troverai tutte le risposte che desideri.

In molti casi non avrai neanche bisogno di pubblicare la tua domanda perché ti basterà una semplice ricerca per trovare decine di utenti che hanno già incontrato e risolto il tuo stesso problema.

Con oltre 50.000 discussioni pubblicate troverai sicuramente quello che stai cercando.

Ma il materiale dedicato a Genesis non finisce qua!

Dall’acquisizione di WP Engine il team di sviluppatori ha aperto una GitHub Page dove condivide esclusivamente materiale dedicato agli sviluppatori, il sito StudioPress presenta una generosissima sezione dedicata alla documentazione e per finire esistono decine di gruppi Facebook dedicati al framework, con il più importante che conta più di 10.000 utenti!

Se scegli Genesis non sarai mai solo 😂

Un child theme per ogni esigenza

L’ultimo vantaggio che voglio discutere con te nella scelta di Genesis è proprio la grande scelta di child theme che offre

Come dicevo prima nella mia critica contro gli starter theme, se utilizziamo queste soluzioni abbiamo nel 99% dei casi un tema privo di qualsiasi stile. Tutto il codice che troviamo al loro interno è codice PHP.

La componente CSS si limita, al massimo, nell’implementare un sistema di griglie. Oggi anche inutile grazie alle CSS Grid.

Per fortuna che con Genesis tutto è diverso!

Con Genesis ho a disposizione dei bellissimi temi che posso utilizzare per avviare velocemente il mio progetto.

La diferenza tra framework e starter theme si nota proprio da questa componente.

Uno starter theme è una soluzione che ci permette di avviare velocemente lo sviluppo di un tema ma che ci lascia completamente da soli quando dobbiamo applicare uno stile grafico al progetto.

StudioPress ha all’attivo decine di child theme che possono essere utilizzati con Genesis e molti di questi si presentano anche con caratteristiche esclusive (rigorosamente aggiunte via plugin) per specifiche tipologie di attività.

Come dicevo anche prima, la cosa più bella di tutte è che con l’acquisto del pacchetto Pro Plus si accede a tutti i temi offerti da StudioPress senza alcun costo aggiuntivo.

Particolarmente suggerito se vuoi avviare la tua attività da freelancer o utilizzare Genesis nella tua web agency.

Critiche da parte degli sviluppatori

Onestamente ho trovato alcune difficoltà nel trovare dei consigli sul NON utilizzare Genesis come framework per lo sviluppo di temi WordPress.

Non perché voglio dipingere Genesis come la miglior cosa accaduta al web dopo WordPress, semplicemente perché tra i miei contatti ho trovato soltanto due punti a sfavore, uno dei quali è un’incomprensione.

Ho anche provato a cercare sul web why not use Genesis framework ma i risultati di questa ricerca hanno soltanto confermato ulteriormente le mie idee.

Non sono stato in grado di trovare dei punti a sfavore oltre ai seguenti.

Genesis non è un framework open source

Per gli amanti del software open source questo potrebbe sembrare un punto a sfavore ma la realtà dei fatti è ben diversa.

Genesis è un framework open source sotto licenza GPL!

Quello che magari in molti non capiscono è che la distribuzione di questo framework è diversa.

La scelta di StudioPress è molto commerciale, infatti è difficile trovarlo liberamente scaricabile, ma con l’acquisto non si ottiene soltanto l’accesso al codice sorgente ma anche a tutto il supporto e l’affiatata community!

Considerando poi che il costo è molto vantaggioso e che è un investimento unico che dura tutta la vita , credo che ti sia molto semplice capire che il ritorno di investimento è molto vantaggioso.

È difficile operare all’interno di `wp_content`

L’unica altra critica che ho ricevuto da parte di uno sviluppatore nei confronti di Genesis è da parte di Daniele Scasciafratte durante lo sviluppo di un plugin dedicato alla creazione di unGlossario.

Se vogliamo vederlo come un problema, Genesis usa degli hook diversi rispetto al classico WordPress per mostrare il contenuto.

Probabilmente tu NON AVRAI questo problema!

C’è da dire che si incontra questo aspetto soltanto se dobbiamo fare grosse operazioni sul contenuto. Il plugin di riferimento analizza tutte le parole presenti nel testo di un articolo, per questo motivo sono state incontrate tali difficoltà.

Dall’avvento di Gutenberg la musica sta cambiando e vedendo la rapidità dei lavori in casa StudioPress prevedo che tra non molto avremo un miglioramento anche in questo contesto.

Conclusioni

Arriviamo al punto finale di questo articolo, il punto all’interno del quale tu prenderai la tua scelta.

Userai Genesis nel tuo lavoro?

Quello che spero di aver fatto scrivendo questo articolo è di averti fornito tutte le informazioni di cui hai bisogno per prendere una scelta.

Anche se ovviamente il mio punto di vista è di parte, come ti ho già detto uso Genesis per qualsiasi lavoro WordPress incontro, credo di aver elencato tutti i vantaggi e svantaggi con un punto di vista abbastanza critico.

Il mio intento non è quello di guadagnare con i link di affiliazione che ho inserito in questo articolo, il mio intento (un po’ come per ogni articolo che viene pubblicato su questo sito) è quello di esserti di aiuto.

È quello di condividere con te esperienze che ho già fatto e le scelte che ho preso.

Se poi tu non usi Genesis per qualche motivo che non ho elencato, ti chiedo di aggiungere la tua esperienza nei commenti. Così facendo aiuterai il sottoscritto e i lettori di questo blog a comprendere meglio le potenzialità e i limiti di questo framework.

Infine, se l’articolo ti è piaciuto, perché non lo condividi con amici e colleghi? Non soltanto aiuterai questo blog ad aiutare più persone ma anche i tuoi colleghi scopriranno che tu ti mantieni aggiornato 😉

L'articolo Perché dovresti prendere in considerazione Genesis proviene da SkillsAndMore.

L’introduzione al terminale che avrei desiderato

Andrea Barghigiani — Mon, 08 Apr 2019 06:27:15 +0000

Essere in grado di utilizzare il terminale è essenziale per qualsiasi sviluppatore web desideri approfondire le proprie conoscenze e velocizzare il proprio lavoro.

Sono sicuro che sei un bravo sviluppatore e che da anni crei le tue applicazioni web senza problemi ma potresti comunque non aver mai sentito parlare del terminale.

In questo articolo il mio compito sarà quello di guidarti alla conoscenza di questo potente strumento e di aiutarti a muovere i primi passi al suo interno così da aiutarti a velocizzare il tuo lavoro e a utilizzare gli strumenti più potenti sul mercato.

Dimentico forse di dire che stiamo parlando di uno strumento gratuito che puoi installare in qualsiasi sistema operativo?!?

Ok penso di aver appena rimediato al mio dubbio.

Adesso è giunto il momento di porsi la domanda delle domande:

Che cosa è un terminale?

Per rispondere è necessario tornare indietro nel tempo, alle prime versioni dei computer che erano collegati a uno schermo.

Lasciamo da parte tutta l’era dei computer programmabili con schede perforate che risulta irrilevante per questo argomento.

A quei tempi poter eseguire delle interfacce grafiche come quelle di adesso era troppo dispendioso (in termini di risorse) e nessuno aveva ancora pensato di creare un desktop environment in grado di sovrapporre finestre, impostare immagini di sfondo e aprire applicazioni con un doppio clic.

Non c’era bisogno di alcun desktop!

A parte il consumo di risorse, ai tempi non si pensava che per usare meglio un computer fosse necessario qualcosa di diverso dal terminale.

Anche se molto meno potenti dello smartphone che porti in tasca, i computer di allora erano in grado di svolgere le stesse operazioni che riteniamo comuni.

Soltanto non avevano bisogno di una Graphic User Interface (o GUI).

Operazioni come l’invio di una mail, la scrittura di codice o mandare un file in stampa venivano svolte interamente da terminale.

Nonostante l’indiscusso successo delle GUI che hanno avvicinato l’uso dei computer a qualsiasi tipo di persona, il terminale è sempre installato sui nostri sistemi operativi e possiamo usarli quando desideriamo.

Ci sono un paio di motivi che ritengo importanti che mi spingono a scrivere questo articolo e consigliarti questo potente strumento:

attraverso il terminale puoi fare molte più cose che con una GUI – vuoi sincronizzare un sito locale con uno online? Vuoi installare dei pacchetti npm per la tua applicazione? Hai bisogno di eseguire specifici workflow con Gulp? Puoi fare tutto questo e molto altro dal terminale! In alcuni casi esistono delle GUI che ti facilitano nel compito da svolgere ma nessuna ti offrirà tutte le funzionalità che avrai a disposizione eseguendo i comandi dal terminale.
il terminale permette di automatizzare i task più ripetitivi – sono sicuro che anche tu come sviluppatore sei sempre alla ricerca di automazioni che possono aiutarti nel tuo lavoro. Ebbene imparare a usare bene il terminale ti aiuterà anche in questo!

Chiunque potrà trovare altri motivi che in grado di validare la mia tesi ma preferisco passare direttamente all’azione e parlarti di alcuni dei comandi più interessanti.

Imparare a usare il terminale ha una sua curva di apprendimento, non te lo nascondo, ma se sai programmare gran parte dello sforzo lo hai già fatto e i benefici che potrai ottenere dall’uso di questo strumento ti aiuteranno a capire ancora meglio come funziona il tuo computer e il server online che ospita il tuo sito web.

Attenzione: esistono diversi tipi di terminale

Stiamo parlando di uno strumento che è stato inventato decine di anni fa ed è normale trovare diverse versioni e approcci. Apro questa parentesi per dirti che non devi preoccuparti se esistono diversi approcci.

A noi sviluppatori web questa varietà nelle versioni del terminale non interessa molto perché di base tutte comprendono la sintassi che possiamo usare in un caomune terminale Bash (il più diffuso).

Primi comandi da terminale

Come succede molto spesso i primi passi che facciamo in qualsiasi campo possono (talvolta) risultare noiosi o ripetitivi.

Quello che ti consiglio fin da ora è non perdere le speranze perché questi sono i comandi fondamentali che userai più frequentemente e che ti consiglio di imparare per bene.

Padroneggiarli ti permetterà inoltre di comprendere la logica che sta alla base nell’uso del terminale, grazie a questi concetti imparerai a utilizzare naturalmente anche i comandi più avanzati scoprendo facilmente i loro dettagli.

Il primo passo è non aver paura del terminale perché anche se questo strumento non presenta tutti i menu e le grafiche alle quali siamo stati abituati.

Diventa un vero cucciolone se impariamo a parlarci.

A prima vista può sembrare uno strumento molto “tetro”. Generalmente la sua impostazione di default comporta l’uso di un colore di sfondo molto scuro (o chiaro) che presenta strane stringhe che a prima vista non hanno significato.

Con l’immagine sopra ho cercato di introdurti alle informazioni principali che il terminale offre:

iMac-di-Andrea il nome del computer sul quale stiamo lavorando – questo è molto utile perché con il terminale possiamo facilmente connetterci e gestire i nostri server online,
~ la cartella nella quale stiamo lavorando – il terminale non è in grado di mostrare una finestra con i file contenuti all’interno di una cartella e per questo motivo è utile sapere velocemente dove siamo (nello screenshot è presente il carattere ~ (tilde) che indica la cartella home dell’utente loggato),
abarghigiani nome dell’utente loggato – il terminale è uno strumento nato principalmente su sistemi UNIX, tra i sistemi più famosi a portare la multiutenza all’interno dei sistemi operativi. Sapere “chi siamo” ci aiuta a eseguire i comandi corretti,
$ ruolo utente loggato – anche se non è proprio la definizione corretta, il simbolo che si presenta nel terminale ci aiuta a capire quale sono i permessi che ha a disposizione l’utente loggato per lavorare sul computer. Con il simbolo $ (dollaro) si identifica un utente comune mentre con il # viene indicato l’utente amministratore che può fare qualsiasi cosa.

Adesso che sei in grado di capire le informazioni che che ti vengono fornite dal terminale è giunto il momento di scoprire quali sono i primi comandi che puoi utilizzare.

Muoviti tra file e cartelle

Tra i comandi più utili che potrai imparare possiamo mettere sicuramente quelli che ci permettono di capire dove siamo e che ci aiutano a muoverci all’interno del nostro sistema operativo.

Il terminale ci consente di muoverci facilmente all'interno del nostro sistema operativo, sia questo il computer nel quale stiamo sviluppando o un server online che esegue la nostra applicazione web.

Questo perché, appena aperto, il terminale ci fa trovare all’interno della cartella home dell’utente che sta utilizzando questa applicazione ma non sempre salviamo al suo interno i file sui quali stiamo lavorando.

Per rendere l’apprendimento il più utile e divertente trovi una lista dei comandi più interessanti seguita da un piccolo paragrafo dove descrivo come questi comandi si possono usare assieme.

Pronto per questo esperimento?

Perfetto.

Iniziamo con la lista di comandi che useremo per questo esempio:

pwd (print working directory) – il terminale è in grado di farci sapere il nome della cartella dalla quale stiamo lavorando ma può capitare di avere più cartelle con lo stesso nome. Ecco che il comando pwd può aiutarci mostrando l’intero percorso che identifica univocamente il tuo file.
ls (list directory contents) – sapere dove siamo non è sufficiente se non sappiamo quali file e cartelle sono contenute. Ecco che il comando ls viene in nostro soccorso elencando tutti i file e cartelle (volendo anche quelli nascosti) che contiene la cartella dove ci troviamo.
cd (change directory) – tutto il nostro filesystem è organizzato in cartelle, ecco perché questo è uno dei comandi più fondamentali. Digitando cd <nome-cartella> sarai in grado di entrare all’interno della cartella e fare quello che desideri.

La precedente non è una lista completa dei comandi che ci vengono messi a disposizione dal terminale ma sono sicuramente quelli che ci permettono di muovere i primi passi e di rispondere alle domande fondamentali come:

Dove mi trovo?

Quali file ho a disposizione?

Come mi sposto da una cartella a un altra?

Verso la fine di questo articolo ti elencherò altri comandi molto utili da usare ma adesso è giunto il momento di fare l’esempio pratico di cui ti parlavo.

Caso d’uso per i comandi principali del terminale

Ecco un piccolo esempio che mira a descriverti un vero caso d’uso dove è preferibile avere a propria disposizione il terminale piuttosto che qualsiasi altra applicazione con GUI.

In questo esempio io sto lavorando alla creazione del nuovo tema per questo portale.

Dopo qualche ora di lavoro torno sul mio terminale e vedo che sono nella cartella skillsandmore. Il problema è che sul mio sistema ho diverse cartelle con questo nome, mi trovo all’interno di quella dove salvo i documenti relativi al progetto o in quella dell’installazione WordPress?

Per saperlo tutto quello che devo fare è digitare pwd.

Il terminale risponde con il seguente percorso: /Users/abarghigiani/Coding/skillsandmore. Dato che la cartella Coding/ è quella che utilizzo per lo sviluppo dei siti web; a questo punto so di trovarmi all’interno della cartella che contiene l’installazione WordPress.

Sapere dove sono è utile, però devo continuare a sviluppare il mio tema che prende il nome di sam-2019/.

Se non conoscessi la struttura di un’installazione WordPress dovrei lanciare diverse volte il comando ls per scoprire quali sono i file e le cartelle presenti e muovermi successivamente al loro interno con il comando cd.

Per fortuna conosco bene questa struttura, le installazioni WordPress sono molto simili tra loro (a meno di modifiche), quindi a questo punto so che la cartella che contiene il tema si trova dentro la cartella themes/ che a sua volta si trova all’interno della cartella wp-content/.

Tutto quello che devo fare adesso è utilizzare il comando cd e passargli il percorso relativo dalla mia posizione per aprire la cartella sam-2019.

$ cd wp-content/themes/sam-2019

Nel terminale inserisco cd wp-content/themes/sam-2019 e il gioco è fatto.

Il tuo percorso potrebbe essere diverso!

Ovviamente gli esempi precedenti (e quelli successivi) fanno riferimento al percorso dei miei progetti. I percorsi sul tuo computer potrebbero essere diversi.

Se ho dei dubbi, una volta entrato nella cartella, posso sempre eseguire il comando pwd per conoscere il percorso completo alla posizione in cui mi trovo.

Adesso ho la possibilità di vedere tutti i file del mio tema con un semplice ls ma come posso fare per lavorare al suo interno?

Ho bisogno di un editor di codice e la cosa bella è che grazie ad Atom posso aprire questa cartella direttamente da terminale e mettermi subito a lavorare senza neanche dover cercare il mouse.

Tutto quello che devo fare è digitare atom . e il mio editor di codice si aprirà automaticamente con i file della cartella presente nel mio terminale.

Caratteri speciali, opzioni e consigli utili

Spero che l’esempio pratico sia servito a farti capire meglio le potenzialità del terminale e anche se al momento può sembrare un approccio meno intuitivo ti invito a continuare la lettura perché il terminale dona un immenso potere che può veramente aiutarti nello sviluppo!

Come ti ho detto più volte in questo articolo, il terminale può aiutarci ad automatizzare i compiti più ripetitivi ma prima dobbiamo conoscere alcuni concetti base sul suo uso.

Al momento hai eseguito nel tuo terminale (se stai seguendo passo passo) tutti i comandi che ti ho proposto basandoti sulla fiducia ma sapevi che il terminale contiene la miglior documentazione disponibile sui comandi che puoi usare?

Potenti strumenti e un’approfondita documentazione all’interno dello stesso strumento, mica male questo terminale 😉

Puoi accedere alla documentazione di qualsasi comando a tua disposizione precedendolo con man.

Per esempio se nel terminale digiti man ls e successivamente premi il pulsante Invio ecco cosa ti troverai di fronte:

Non è la documentazione più bella che puoi trovare ma è tutto ciò che ti serve per chiarire velocemente i tuoi dubbi.

Prima di approfondire le informazioni che troverai al suo interno mettiamo subito in chiaro come uscire dalla documentazione.

Tutto quello che devi fare è premere il pulsante q della tua tastiera.

Le informazioni principali che troverai al suo interno sono il nome completo del comando, la sintassi utilizzata per personalizzare il suo comportamento e la lista completa di tutte le opzioni che puoi utilizzare.

Le opzioni di un comando

Le opzioni di permettono di modificare il risultato standard di un comando. Ti ricordo che con ls siamo in grado di elencare tutti i file presenti in una cartella ma hai notato che ti viene fornita soltanto una lista di nomi senza distinzione tra cartelle e file?

Inoltre cosa dovresti fare se desideri organizzare questi file in colonne per facilitarti la lettura?

Ecco che le opzioni risultano veramente interessanti!

Per esempio se aggiungo -al al comando ls il terminale mi mostrerà anche i file nascosti e i permessi applicati a file e cartelle.

Come puoi vedere adesso abbiamo molte più informazioni rispetto all’esecuzione di un classico ls. Con queste opzioni possiamo facilmente scoprire quali sono i file nascosti nella cartella (sono quelli che iniziano con un .) e anche quali sono le cartelle e quali semplici file (grazie alla d che sta per directory presente nella prima colonna).

Esistono molte altre opzioni interessanti che ti invito a scoprire andando a consultare la documentazione del comando con man ls perché adesso voglio introdurti un altro importante concetto del terminale.

Caratteri Speciali

Se hai guardato con attenzione la lista degli elementi elencati precedentemente avrai notato che i primi due file sono . e .., ma cosa sono?

Questi sono i primi due caratteri speciali che hai incontrato utilizzando il terminale. Il punto . è una scorciatoia che ci permette di fare riferimento alla cartella in cui siamo (ecco perché il comando atom . ha aperto la finestra dell’editor con i nostri file al suo interno).

L’altro carattere, i due punti .., è una scorciatoia che ci permette di fare riferimento alla cartella superiore a quella che stiamo consultando.

È una scorciatoia incredibilmente utile perché posso muovermi con un singolo cd .., ma questo è soltanto l’inizio.

L’uso dei .. ci permette di navigare facilmente all’interno di un progetto perché possono essere concatenati e farci navigare più cartelle alla volta.

Però questi non sono gli unici caratteri speciali che puoi passare in un terminale. Ti faccio una veloce lista dei più comuni:

~– indipendentemente dalla tua posizione all’interno del sistema questo carattere punterà sempre alla home dell’utente che è loggato. Quindi anche se stai lavorando sul terminale e devi tornare alla tua home (o semplicemente farci riferimento per costrire un percorso) puoi usare questo carattere.
# – anche se è più usato quando si creano degli script che ci facilitano la vita (il terminale può essere programmato) con questo carattere specifichiamo l’inizio di un commento in singola linea mentre, come già visto, se è il nostro terminale che mostra questo carattere significa che lo stiamo usando come amministratori.
\ – il backslash viene utilizzato come carattere di escape, questo ci permette di costruire stringhe complesse o soltanto selezionare il nome di file o cartelle contenenti degli spazi. Spesso lo puoi vedere in azione quando premi TAB per avviare l’autocompletamento di Documents/File\ Name\ 1\ def.pdf

Esistono molti altri caratteri utili che puoi usare all’interno di un terminale ma sto scrivendo molto e forse ti sto confondento un po’ le idee.

Facciamo una cosa, io ora voglio mostrarti alcuni usi pratici in cui il terminale vince 10 a 0 rispetto a qualsiasi altro strumento con GUI in termini di velocità (e in mia opinione anche in facilità di utilizzo).

Se l’articolo ti è piaciuto e vuoi scoprire meglio come usare il terminale al massimo commentalo o scrivimi una mail così capirò chiaramente quanto interesse c’è dietro questo argomento.

Piccoli esempi in cui è utile conoscere il terminale

All’interno di questa sezione finale dell’articolo voglio mostrarti alcuni esempi pratici in cui la conoscenza del terminale semplifica la nostra vita da sviluppatori.

Esistono migliaia di casi d’uso per i quali il terminale risulta essere lo strumento migliore da usare e in molti è l’unico strumento che puoi usare.

Creazione di uno script Bash

Sicuramente questo non è un argomento che interessa tutti noi ma voglio proportelo come primo perché avere la possibilità di creare degli script che automatizzano il nostro lavoro può essere molto comodo.

Creare degli script Bash ci aiuta infinitamente quando dobbiamo compiere azioni ripetitive all'interno del terminale.

Sono convinto che sai bene che per installare WordPress in locale esistono molte soluzioni.

C’è chi utilizza MAMP, altri Local by Flywheel mentre altri ancora (come il sottoscritto ed Eugenio) preferisce affidarsi a una macchina Docker configurata per bene.

Ora, configurare diversi container Docker per avere un’installazione WordPress funzionante è un compito molto arduo per il sottoscritto che non ha profonde conoscenze sulla gestione di un server web ma per altri è un gioco da ragazzi.

Conoscere i server e il terminale rende possibile creare un semplice script Bash che guida anche un tonto-Docker come il sottoscritto a installare WordPress completamente funzionante (anche con strumenti utilissimi come WordMove).

Avviare un preprocessore CSS

Nel corso dedicato al preprocessore Sass (che sto rilanciando proprio adesso) ti ho presentato Prepros, un’applicazione che ti aiuta a sviluppare compilando al posto tuo i file .scss in classici fogli di stile .css perfettamente comprensibili da qualsiasi browser.

Sicuramente avere un’applicazione con una GUI può essere un aspetto comodo quando ci approcciamo ad un nuovo workflow ma spesso queste soluzioni sono poco performanti e poco configurabili.

Avere il controllo del proprio terminale ti consente di accedere a strumenti che prendono il nome di task automation, ovvero delle regole che vengono eseguite dopo qualche varizione nei file presenti nel progetto.

Grazie a Gulp, uno dei task runner più famosi, puoi configurare il tuo ambiente di sviluppo in modo che esegua le seguenti operazioni ad ogni modifica oppure lanciandoli singolarmente:

ottimizzazione immagini – puoi far eseguire delle ottimizzazioni sulle immagini in modo che il loro peso sia minore senza perdita di qualità.
browser live reload – incredibilmente comodo quando si sviluppa! Praticamente ogni volta che modifichi qualcosa il browser si ricarica automaticamente mostrandoti le modifiche effettuate!
compilare Sass in CSS – forse la cosa più “standard” da fare con un task manager è proprio la generazione automatica dei file .css ogni volta che vengono salvate modifiche nei file .scss che compongono il progetto.

Questi sono soltanto alcune delle attività che puoi avviare automaticamente grazie a Gulp e la cosa più bella è la sua facilità di utilizzo.

Prima di metterti al lavoro non devi far altro che scrivere gulp (oppure gulp <nome-task>) all’interno della cartella che contiene il progetto e il gioco è fatto!

Ovviamente questa sezione rappresenta soltanto un esempio e non è stato spiegato l’approccio pratico a questa soluzione.

Se sei curioso di sapere come configurare il tuo ambiente di sviluppo per sfruttare Gulp commenta questo articolo o iscriviti alla nostra newsletter, in entrambi i casi ti contatterò per farti sapere quando pubblicherò l’articolo dedicato a questo potente task runner!

Connettersi a un server remoto

Un altro aspetto in cui il terminale mostra il meglio di sè è quado abbiamo la necessità di collegarci a un server remoto e dobbiamo fare alcune operazioni.

Sono sicuro che sai benissimo che molti hosting mettono a disposizione dei pannelli di gestione per i propri server, Plesk e cPanel sono i più comuni, pannelli che permettono di fare molte operazioni:

modificare la versione PHP in esecuzione
navigare i file salvati nel nostro spazio
impostare e leggere caselle email
…

In effetti questi pannelli ci offrono delle interfacce per fare praticamente qualsiasi cosa ma, come già detto nei confronti delle GUI, molto spesso per arrivare a questi comandi abbiamo un’esperienza più lenta perché siamo costretti ad aprire un browser e puntarlo sull’indirizzo giusto, eseguire il login, entrare nel nostro pannello e trovare la funzionalità di cui abbiamo bisogno.

Con il terminale tutto questo non succede perché non dovrai far altro che utilizzare il comando ssh per collegarti in modo sicuro al tuo server online e utilizzare i comandi per applicare modifiche instantanee al tuo server.

$ ssh <utente>@<server> -p<porta>

Ecco la sintassi che ti permetterà di collegarti al tuo server online, sempre se il tuo hosting ti permette di farlo.

Modificare un database WordPress

Voglio concludere con un comando incredibilmente utile che puoi installare sia sul tuo ambiente di sviluppo in locale che all’interno del tuo server online (anzi molti hosting, come SiteGround, preinstallano questo comando).

Lo strumento al quale faccio riferimento è WP CLI e ci permette di fare tutto quello che WordPress ci permette di fare dalla sua bacheca e anche molto di più!

Partiamo subito dal tallone di achille quando lavoriamo in un ambiente di sviluppo locale che dovrà essere spostato successivamente online.

A meno che tu non usi la tecnica dei Virtual Host il dominio che usi nel tuo ambiente di sviluppo sarà diverso da quello sul quale pubblicarai il sito e dato che WordPress salva queste informazioni nel database dovrai sostituire questi riferimenti.

Facciamo un esempio pratico, io uso Docker per creare i miei ambienti di sviluppo e lo script con il quale li creo genera la URL http://0.0.0.0:8080 che mi consente di visualizzare il sito in sviluppo.

Però il mio cliente desidera pubblicare il proprio sito sul dominio https://pianteefiori.it ed ha già installato il proprio certificato di sicurezza per una connessione in HTTPS.

Come posso risolvere questo problema?

Come consigliato più volte anche all’interno di questo blog, potrei caricare file e database e inserire questo script PHP per modificare i domini con una GUI web, però torniamo ai problemi di velocità e immediatezza…

Ecco allora che un bel comando come wp search-replace torna veramente utile!

Tutto quello che devo fare, una volta caricati file e database sul server online, è collegarmi a questo via SSH e lanciare il seguente comando:

Una volta che il server avrà finito di eseguire questo comando mi fornirà una comoda tabella che comunicherà quante e dove sono state le stringhe cambiate.

Conclusioni

Siamo giunti al termine di questo articolo e, come sempre, se sei arrivato a questo punto ti ringrazio di cuore. Spero veramente che tu abbia potuto capire meglio il potere di questo importante strumento.

Usare un terminale è incredibilmente comodo perchè una volta messa da parte la paura di usarlo tutto diventa un gioco da ragazzi!

Ti consiglio di iscriverti alla newsletter perché l’argomento terminale verrà sicuramente trattato nuovamente in futuro in modo da mostrarti ancora meglio come questo strumento potrà beneficiare la tua vita di sviluppatore.

Se sei rimasto con qualche curiosità o dubbio usa pure la sezione dei commenti qua sotto, sarò più che felice di aiutarti a migliorare la tua comprensione.

10 librerie Sass che ti aiutano nello sviluppo CSS

Andrea Barghigiani — Mon, 11 Mar 2019 07:18:15 +0000

Oggi non parleremo di tecniche ma di soluzioni. Soluzioni che altri sviluppatori hanno creato e condiviso con noi e che rappresentano degli approcci davvero interessanti nello sviluppo dei nostri CSS.

Se ancora non conosci Sass ti dico subito che stai facendo un grosso errore e mi offri la possibilità di sponsorizzare il mio corso dedicato 😂

Stai facendo un errore perché ad oggi scrivere i tuoi CSS così come sono stati standardizzati dal W3C è una grossa perdita di tempo.

Per quanto sia utile ed essenziale partire dalle basi, bisogna dire che la sua sintassi e la sua logica non riesce più a mantenere il passo con i tempi.

Non mi credi?

Guarda il nostro webinar per capire in quanti modi utilizzare Sass è più utile (e veloce) rispetto allo scrivere del classico CSS.

Prima di scrivere questo articolo mi sono messo a cercare in lungo e in largo nella fitta rete che è Internet alla ricerca di articoli e repository GitHub contenenti intelligenti soluzioni che il linguaggio Sass ha permesso di sviluppare.

Quella che troverai qua sotto è una lista delle dieci librerie (o framework) che ho trovato più interessanti e che ho pensato che valesse la pena di elencare.

Ti dico subito che se in questo elenco non trovi una delle soluzioni che tu usi con più piacere non esitare a farmelo notare aggiungendo il link e la motivazione all’interno della sezione commenti che troverai in fondo a questo articolo.

Prima di iniziare vorrei dirti che in questo articolo, piuttosto che inserire i vari link che puntano al file .zip, ho preferito inserire i link ai singoli repository GitHub in modo da permetterti di utilizzare ancora più facilmente queste soluzioni.

Inverti gli elementi di un sito con Bi-App

Ho deciso di inserire la libreria Bi-App come prima perché il suo funzionamento è tanto semplice quanto interessante.

Ti è mai capitato di dover sviluppare un sito che sia consultabile sia per chi legge da sinistra verso destra (left-to-right) e viceversa (right-to-left)?

Se il tuo mercato si riferisce principalmente a quello italiano molto probabilmente non è una cosa che hai fatto spesso ma sono sicuro che questa soluzione potrebbe tornare molto comoda per tutti gli sviluppatori che si trovano a realizzare portali di grosse dimensioni.

Dico questo perché grazie a Bi-App avrai la possibilità di creare due fogli di stile che permettono di adattare il tuo contenuto in base al verso di lettura del tuo utente.

Dal punto di vista dello sviluppatore dovrai soltanto utilizzare i mixin di questa libreria, tu sarai libero di scrivere un singolo file Sass e nel momento della compilazione questa libreria utilizzerà i mixin che hai utilizzato per fare automaticamente tutte le operazioni di mirroring al posto tuo, l’unica cosa che ti resterà da fare è richiamare il file CSS appropriato a secondo della geolocalizzazione del visitatore 😀

Tutti i bottoni che vuoi con… Buttons

I bottoni sono degli elementi incredibilmente importanti in qualsiasi progetto web. Sono talmente importanti che alcune volte sono in grado di delineare i successi e gli insuccessi delle conversioni di un’azienda.

Proprio per questo e molti altri motivi mi sono trovato spesso a desiderare un tool che mi aiutasse a crearli e modificarli velocemente. Per fortuna mia ho incontrato Buttons!

Molti anni fa l’unica soluzione era quella di affidarsi a un programma di grafica, o anche a un grafico di professione, e doversi poi caricare i vari file immagine per poter personalizzare il nostro layout.

Oggi invece possiamo utilizzare direttamente il CSS e creare diverse versioni del pulsante utilizzando la stessa sintassi HTML.

Quello che vedi qua sopra è solo un piccolo esempio di quello che puoi realizzare con questa libreria ma ti consiglio di consultare il progetto perché sono sicuro che troverai il tipo di bottone che risponde meglio alle tue esigenze!

Gestisci le tue media query facilmente con @include-media

Partiamo subito dicendo che questa libreria è nata da un’attenta analisi di librerie che erano già presenti sul mercato e viene motivata la sua creazione all’interno di un completo articolo su CSS-Tricks.

Esistono alternative!

All’interno di questo articolo ti presento la libreria @include-media ma come scoprirai dallo stesso articolo che ti ho appena presentato, esistono molte alternative.

Una caratteristica che apprezzo moltissimo in questa libreria è la possibilità di inserire le media query direttamente all’interno del selettore che stiamo utilizzando.

Quindi, al posto di dover organizzare tutto il nostro codice per rispettare la chiamata @media possiamo gestire le varie opzioni responsive mentre gestiamo le regole CSS di uno specifico elemento.

Cerchiamo di fare un piccolo esempio per comprendere il suo funzionamento.

Per prima cosa abbiamo la possibilità di creare delle variabili che saranno più semplici da ricordare e richiamare al posto del classici px:

$breakpoints: (phone: 320px, tablet: 768px, desktop: 1024px);

Come puoi vedere la dichiarazione dei vari breakpoint è molto intuitiva e sfrutta le Sass Data Map, argomento che abbiamo già trattato in un precedente articolo.

Ma torniamo all’uso di questa semplicissima libreria, una volta definiti i nostri breakpoint siamo in grado di richiamare le nostre media query singolarmente:

@include media(">phone", "<=tablet") {
    width: 50%;
}

Come dicevo prima la cosa più bella è scrivere le nostre media query direttamente all’interno dell’elemento che stiamo personalizzando.

Ecco un esempio:

.box{

  @include media(">phone") {
    background-color: red;
  }

  @include media(">tablet") {
    background-color: green;
  }

  @include media(">desktop") {
    background-color: blue;
  }

}

Come puoi vedere con i tuoi stessi occhi, a conferma di quanto detto precedentemente, utilizzando questa libreria non avrai la necessità di creare singolarmente le media query e di ripetere i selettori dei tuoi elementi al suo interno.

Tutto quello che devi fare è inserire il mixin media all’interno dell’elemento e scrivere le modifiche necessarie.

Sono sicuro che adesso ti stai chiedendo come verrà sviluppato il foglio CSS risultante, studiamolo assime:

@media (min-width: 321px) {
  .box {
    background-color: red;
  }
}
@media (min-width: 769px) {
  .box {
    background-color: green;
  }
}
@media (min-width: 1025px) {
  .box {
    background-color: blue;
  }
}

Ed ecco che, una volta compilato il nostro codice Sass, avremo a disposizione le singole media query e i selettori che rispondono a tale misura verranno spostati al suo interno.

Preoccupato per il numero di media query?

Se la quantità di media query presenti all’interno del tuo file CSS ti preoccupa potresti dare un’occhiata a questo pacchetto npm la cui unica funzionalità è quella di raggruppare tutte le media query inserite nel progetto.

In quest’ultima frase ho utilizzato il plurale perché grazie a Sass non dovremo preoccuparci di quante media query vengono create, probabilmente starai pensando che il CSS generato sarà un casino con moltissime media query ripetute a giro per il documento.

Invece grazie al pacchetto npm appena presentato possiamo dormire sonni tranquilli perché sarà in grado di “spostare” i vari selettori all’interno delle media query adeguate senza andare ad appesantire inutilmente il CSS risultante.

Crea animazioni keyframe facilmente con Kf

Ormai dovresti essere abituato ai nostri articoli e continui richiami nei confronti degli effetti di animazione che puoi creare con il tuo codice, ma in questo contesto ti voglio presentare una libreria che ti permetterà di utilizzare una serie di effetti pronti all’uso.

Se sei un assiduo lettore del nostro blog ti dovresti ricordare che non troppo tempo fa abbiamo parlato diAnimate.css, un semplice insieme di classi CSS che ti permettono di animare facilmilmente i tuoi elementi.

Ma con Kf stiamo prendendo un approccio differente e molto più personalizzabile.

Come spesso accade quando lavoriamo con Sass questa soluzione permette di avere un alto grado di personalizzazione sia lato codice che negli effetti veri e propri.

Questa libreria ci permette di utilizzare un’innovativa sintassi per la realizzazione dei nostri effetti, sintassi che risulta essere molto più semplice da gestire rispetto al classico@keyframes.

.single-selector div {
  $animation-map: (
    margin-left: (0ms: 0%, 3000ms: 100%)
  );

  @include kf($animation-map);
}

Anche questa libreria, come la precedente dedicata alle media query, utilizza le Data Map che risultano molto interessanti e come puoi vedere, ci permettono di dichiarare delle animazioni anche per singole proprietà.

Ovviamente non sei obbligato a selezionare soltanto un elemento, potresti selezionare gli elementi contenuti ed animarli singolarmente:

.multiple-selectors {
  $animation-map: (
    '.a': (margin-left: (0ms: 0%, 3000ms: 100%)),
    '.b': (margin-left: (0ms: 100%, 2000ms: 0%))
  );

  @include kf($animation-map);
}

Insomma sicuramente si tratta di una libreria diversa da quelle copia/incolla come per esempio Animate.css però se guardiamo l’altro lato della medaglia scopriamo un altissimo livello di personalizzazione e una profonda gestione sulle nostre animazioni.

Migliora il ritmo verticale con TypeSettings

Riflettiamo per un attimo, in molti ci ricordano che sul web Content is King ma se questo contenuto non è facilmente consultabile da parte dei nostri lettori, come facciamo a dargli tutta questa importanza?

Tutti gli sforzi che facciamo nella creazione del nostro contenuto verranno semplicemente sprecati!

Ecco che una libreria come Typesettings viene in nostro soccorso offrendoci una serie di mixin che ci aiutano a gestire al meglio lo spazio verticale presente nel nostro testo.

Questa può sembrare una cosa da poco ma ti invito a controllare il semplice codice di configurazione per scoprire tutto il lavoro che ti verrà semplificato grazie all’integrazione di questa libreria!

Griglie verticali con SassLine

Devo confessarti che a prima vista questa libreria può sembrare molto simile alla precedente, in fin dei conti anche lei si occupa di realizzare delle griglie verticali ma ad essere onesto, durante le fasi di test, ho trovato incredibilmente utile la possibilità di visualizzare la griglia che stavo generando.

Con l’immagine che ti ho appena inserito volevo mostrarti la semplicità di utilizzo. Ad ogni modifica avrai la possibilità di visualizzare la griglia e osservare nel dettaglio il ritmo verticale della tua pagina.

Griglie responsive grazie a Susy

Passiamo dalle griglie verticali a griglie ancora più interessanti, quelle che permettono di creare il layout della tua pagina web.

Abbiamo già analizzato Susy all’interno del corso dedicato a Sass dove ti ho mostrato quanto sia semplice da configurare e da utilizzare.

La sua caratteristica più interessante è il fatto di poter gestire sia la griglia che le modifiche responsive del tuo layout con dei mixin semantici!

Praticamente non avrai più bisogno di utilizzare dei nomi senza senso e neanche ti dovrai sbattere a calcolare le larghezze da utilizzare con la tua calcolatrice.

Grazie a Susy non dovrai far altro che creare la tua Sass Map, in grado di definire le basi del layout per il tuo progetto, e potrai delegare tutta la complessità ai mixin di questa soluzione.

Susy si è aggiornato!

Susy ha raggiunto la versione 3 e adesso, al posto di utilizzare i float, ci permette di dichiarare facilmente le nostre CSS Grid o strutturare il layout con Flexbox.

Vai a scoprire il progetto su GitHub e approfondisci la sua conoscenza all’interno del nostro corso 😉

Scut, una raccolta di utility per i tuoi CSS

Passiamo dalle librerie dedicate a una singola soluzione ad altre che ti permettono di fare un po’ tutto.

Scut è una soluzione incredibilmente interessante perché oltre ai mixin ci mette a disposizione delle funzioni che ci facilitano alcuni compiti.

Ti è mai capitato di dover creare un progetto in em o rem per il quale avevi a disposizione soltanto un file Photoshop?

Sono sicuro che sei diventato matto a calcolare le varie corrispondenze.

Ebbene, grazie a Scut tutto questo sarà un lontano ricordo perché offre le funzioni px-to-em e px-to-rem che fanno proprio questo!

Ovviamente al suo interno troverai anche dei mixin utili che, ad esempio, ti permettono di poter creare dei cerchi o triangoli con del semplice codice Sass.

Ti consiglio caldamente di dare un’occhiata a questa soluzione perché offre utili strumenti anche per la gestione del layout delle tue pagine.

Separatori angolari con Angled Edges

Esistono sicuramente molte soluzioni che ci permettono di creare degli elementi storti all’interno delle pagine web che creiamo.

In alcuni casi vengono usate direttamente immagini in SVG che si adattano bene alle varie risoluzioni degli schermi mentre altre soluzioni utilizzano gli pseudo-elementi ::before e ::after.

Non conosci gli pseudo-elementi?

Leggi subito il nostro articolo dedicato e scopri in quanti modi questi possono aiutarti durante lo sviluppo!

Per applicare un effetto come quello mostrato nell’immagine precedente non devi far altro che usare il mixin dedicato. Ecco un esempio:

@include angled-edge($location, $hypotenuse, $fill);

Grazie a questa sintassi vengono create delle immagini SVG che vengono inserite all’interno del CSS grazie a data:image, una soluzione che ci permette di creare le immagini leggendo il codice SVG inserito.

Ti consiglio di provare questa libreria perché con un semplice mixin ci aiuta a creare accattivanti soluzioni per i nostri layout.

Bourbon, una libreria piena di sorprese!

Ti confesso che uso raramente questa libreria, ero un grande fan di Compass ma da quando sono venuto a conoscenza dell’interruzione nel suo sviluppo ho iniziato a cercare alternative.

Sono entrato in un vero e proprio universo perché in molti hanno cercato di colmare il vuoto lasciato da Compass ma in Bourbon ho trovato tutto quello che cercavo.

Infatti Bourbon è una libreria incredibilmente leggera che offre moltissimi mixin utili come quello per aggiungere i puntini di sospensione nei nostri testi oppure quello che ci permette di modificare facilmente i nostri pulsanti.

Oltre a questo un’apprezzata caratteristica di questa libreria è che risulta essere facilmente estendibile.

Infatti il focus principale di Bourbon è quello di presentare mixin e funzioni di comune utilità ma non si spinge alla creazione di griglie o di elementi complessi.

Per queste necessità il team di Bourbon ha creato le seguenti librerie specifiche:

Neat – semplice gestione delle griglie (usa ancora i float)
Bitter – una soluzione molto simile al Normalize.css

Insomma se non hai tempo da perdere e vuoi una libreria all-in-one che ti può aiutare nel tuo lavoro hai trovato quello che ti serve 😃

Conclusioni

Con questo articolo abbiamo visto alcune delle soluzioni più interessanti che, grazie a Sass, potrai integrare e utilizzare nel tuo lavoro di tutti i giorni.

Abbiamo visto più o meno tutte le utility che ci permettono di velocizzare la creazione dei nostri progetti ma ci tengo a dirti che non abbiamo visto tutto!

Ci sono altre librerie che non ho messo in evidenza in questo articolo ma che puoi trovare in questo repository costantemente aggiornato.

Quello che ho voluto fare con la stesura di questo articolo è aiutarti a capire che conoscere Sass è veramente importante per il tuo lavoro , in fin dei conti ormai è uno standard e anche se i CSS stanno aggiungendo nuove soluzioni interessanti (come per esempio le Custom Properties) difficilmente raggiungerà lo stesso livello di Sass.

Se senti la necessità di metterti in pari e vuoi scoprire al meglio questa soluzione non posso fare a meno di ricordarti che abbiamo realizzato un corso appositamente per te, spero che lo troverai utile e che migliorerà veramente il tuo lavoro; proprio come ha fatto per il sottoscritto.

Se poi hai altre librerie che usi quotidianamente e delle quali mi vuoi parlare, non esitare a farlo sfruttando i commenti che trovi qua sotto, io e gli altri lettori te ne saremo infinitamente grati!

L'articolo 10 librerie Sass che ti aiutano nello sviluppo CSS proviene da SkillsAndMore.

Rendi compatibile il tuo tema con Gutenberg!

Andrea Barghigiani — Tue, 26 Feb 2019 08:59:31 +0000

Recentemente abbiamo assistito a una grande trasformazione nel mondo WordPress, dalla versione 5 è stato introdotto un nuovo editor che ha completamente rivoluzionato la piattaforma. Sei sicuro che il tuo tema sia compatibile?

Se come molti altri Skillati sei uno sviluppatore e crei temi WordPress per i tuoi clienti questa novità ti interessa da vicino e in questo articolo ti spiego come rendere compatibili i tuoi temi!

Dalla versione 5 la piattaforma WordPress trovi incluso un nuovo editor che sostituisce il classico TinyMCE, conosciamolo da vicino.

TinyMCE e Gutenberg a confronto

Con questa immagine mostro il cambiamento che hanno subito gli editor nelle nuove installazioni WordPress, un cambiamento per il quale dobbiamo preparare noi stessi e i nostri clienti.

Se ti stai chiedendo se questa novità può essere disattivata la risposta è sì e potrai farlo in qualsiasi momento installando questo plugin, anche se a mio avviso sarebbe molto meglio abbracciare questa novità, capire quali benefici porta per i nostri clienti e indagare sugli step necessari per rendere il nostro tema compatibile con questo nuovo strumento.

All’interno di questo articolo troverai le stesse informazioni che ho condiviso durante un workshop allo scorso WordCamp Torino 2018 ma che mi trovo a pubblicare all’interno di questa piattaforma perché non è stato possibile farne una registrazione.

Ti spiegerò nel dettaglio i passaggi necessari per rendere il tuo tema compatibile con Gutenberg ma se sei più interessato al gist della questione puoi consultare le slide dell’intervento.

Che cosa è Gutenberg?

Partiamo con il rispondere alla domanda delle domande cercando di capire che cosa propone questo nuovo editor.

Chiunque abbia usato il classico editor WordPress sa che è senza ombra di dubbio un buon editor e che può essere arricchito di funzionalità attraverso una serie di plugin aggiuntivi presenti nel repository di plugin.

Se ancora non lo sai, l’editor che sei abituato a utilizzare durante la scrittura dei tuoi articoli o nelle più recenti widget Testo che sono state introdotte nella versione 4.8 non è uno strumento sviluppato all’interno dell’ecosistema WordPress , piuttosto durante la creazione di questo CMS è stato scelto di utilizzare un potente editor WYSWYG Open Source: TinyMCE.

Data la diffusione di WordPress (oggi utilizzato nel 33.3% dei siti web) e la necessità di avere strumenti in grado di aiutare anche il novizio a creare pagine web le strade di TinyMCE e della nostra amata piattaforma si sono iniziate a dividere.

Non mi fraintendere TinyMCE è un ottimo editor di testo e ha una grande compatibilità che consente di creare documenti web leggibili praticamente su qualsiasi dispositivo ma le necessità degli utenti WordPress si sono evolute nel tempo, evolute in una direzione diversa da quella del classico editor.

Per anni gli sviluppatori WordPress hanno cercato di colmare queste lacune introducendo gli shortcode nel tentativo di “semplificare” l’inserimento di elementi complessi all’interno di questo editor.

Sono nati shortcode per tutte le necessità, alcuni servono per inserire contenuti presenti nella stessa piattaforma (come per esempio i prodotti di un eCommerce), altri invece per richiamare risorse esterne come video YouTube (oggi molto meno utilizzati grazie agli oEmbed) mentre altri ancora venivano usati soltanto per scopi stilistici (molto utilizzati purtroppo da Page Builder costruiti male).

Insomma tutta questa frammentazione ha rappresentato un grande problema di usabilità e se aggiungiamo a questo l’impossibilità di avere un’anteprima istantanea del nostro lavoro si capisce da soli che l’esperienza di creazione all’interno di WordPress è stata fin ora limitata.

Ecco perché oggi viene sviluppato il nuovo editor che ha preso il nome di Gutenberg!

L’intenzione di questo nuovo editor è quella di semplificare la creazione delle pagine web all’interno di questa piattaforma.

Inizialmente il suo approccio era dedicato a trasformare l’esperienza di inserimento contenuto in qualcosa di ancora più intuitivo (da qui il nome), creando un’esperienza di scrittura simile a Medium e adottate oggi anche su altre piattaforme, come per esempio LinkedIn.

Durante le sue evoluzioni però si è scoperto che gli utenti volevano qualcosa in più , al giorno d’oggi chi scrive sul web non vuole soltanto inserire del testo ma desidera costruire contenuti dinamici e accattivanti che li aiutino a mantenere viva l’attenzione dei lettori.

Ed ecco che è stato introdotto il concetto di _ Blocchi _.

All’interno di Gutenberg ogni tipologia di contenuto è un blocco. Non importa se stiamo parlando di un titolo, un paragrafo, un’immagine, un video YouTube o una Call to Action; tutto è un blocco e tutto viene inserito con gli stessi strumenti.

Questo approccio, che può piacere o meno, è diventato uno standard all’interno di creazione contenuti in WordPress e ci sta aiutando ad allontanarci sempre più velocemente alle vecchie soluzioni degli shortcode offrendo, al tempo stesso, delle funzionalità che non avevamo ancora visto in un editor.

In questo articolo ti ho promesso di spiegarti come sia possibile preparare il tuo tema all’avvento di Gutenberg ed è quello che sono pronto a fare.

Se vuoi seguire passo passo i blocchi di codice che ti presenterò più avanti ti consiglio di installare l’ultima versione di WordPress, in questo modo potrai testare dal vivo tutte le modifiche che faremo in questo articolo.

Come preparare i tuoi temi WordPress a Gutenberg

La prima buona notizia è che qualsiasi tema è compatibile con tutti i blocchi Gutenberg. Questo perché la funzione utilizzata per richiamarli all’interno delle nostre pagine è sempre the_content(), la classica funzione che qualsiasi loop richiama per ottenere i contenuti salvati nel database collegati a una pagina.

Però se questo articolo non finisce qua un motivo c’è, anche se i nostri temi sono in grado di richiamare i contenuti salvati con questo nuovo editor non necessariamente sono in grado di sfruttare tutte le nuove caratteristiche.

Ecco perché ho organizzato il restante contenuto in diverse sezioni che ti permetteranno di consultare velocemente gli argomenti di tuo interesse, partendo da un piccolo consiglio sull’organizzazione del tuo codice.

Aumentiamo l’organizzazione separando i file

Creare un tema WordPress non è più semplice come una volta e basta guardare l’evoluzione del nostro functions.php per capire che è fin troppo semplice arrivare a diverse migliaia di righe di codice, cosa che rende la consultazione del file stesso molto pesante.

Per questo motivo prima ancora di parlare di come attivare alcune delle funzionalità più interessanti di questo nuovo editor voglio fornirti un suggerimento che puoi trovare anche nel codice del functions.php del famoso tema _s, ovvero voglio consigliarti di separare il tuo codice all’interno di diversi file inclusi nel tuo tema in modo da poter mantenere il tuo codice il più organizzato possibile.

Per fare questo tutto quello che devi fare è fare affidamento alla funzione get_template_direcoty() e richiamare il file all’interno del quale dichiarerai tutte le personalizzazioni e le funzioni che hanno a che fare con Gutenberg.

Seguendo l’esempio di _s anche io ho creato una cartella inc/ interna al mio tema e ho aggiunto quanto segue:

<?php // Inserito soltanto per la colorazione della sintassi
/**
 * Codice aggiuntivo per Gutenberg
 */
if ( defined( 'GUTENBERG_VERSION' ) ) {
   get_template_directory() . '/inc/gutenberg.php';
}

Ti consiglio di inserire tutto il codice relativo a Gutenberg nel file inc/gutenberg.php, o almeno questo è l’approccio che prendiamo in questo articolo.

Ti consiglio di seguire questa buona pratica perché ti aiuterà a mantenere più organizzato il codice del tema e in futuro sarà più semplice poter modificare le porzioni necessarie.

Dichiara la compatibilità con le immagini wide e full

Adesso che abbiamo preparato il campo e creato un file interamente dedicato alla compatibilità con Gutenberg è giunto il momento di iniziare a personalizzare il tema con una delle funzionalità più richieste: la possibilità di inserire delle immagini “out-of-shape” che si estendono oltre la larghezza del nostro contenuto.

Come puoi notare qua sopra, l’immagine è leggermente più larga rispetto al contenuto della pagina e anche se gli sviluppatori di temi hanno cercato hack e soluzioni alternative per raggiungere questo risultato, grazie a Gutenberg tutto questo è nativo e potrà essere attivato a discrezione dell’utente.

Questo perché Gutenberg inserisce due nuovi allineamenti per le nostre immagini, anche se in realtà sono allineamenti disponibili in altri blocchi.

Queste sono le due nuove icone che verranno inserite all’interno degli allineamenti dei blocchi compatibili e come suggerisce il nome stesso permettono di inserire un blocco rendendolo più grande del contenuto (wide) oppure gli forniscono la possibilità di occupare tutta la larghezza della finestra (full).

Da questa definizione è ovvio pensare che questi tipi di allineamento funzionano benissimo all’interno di siti monocolonna ma potresti essere in grado di sfruttarli altrettanto bene.

Non ti spaventare, è solo CSS!

Questi nuovi allineamenti sono soltanto delle regole CSS che potrai personalizzare attraverso il tuo tema.

Venendo al succo della questione è giunto il momento di chiedersi: _ come posso attivare questa nuova feature? _

È giusto porsi questa domanda perché anche se hai installato Gutenberg nella tua piattaforma o se usi l’ultima versione WordPress, questi nuovi allineamenti non saranno presenti nel tuo tema.

Come già successo per altre nuove funzionalità messe a disposizione dei temi, come per esempio l’uso del title-tag, delle post thumbnails o delle strutture in HTML5 (giusto per citarne alcune), il tema che stiamo sviluppando deve dichiarare il proprio supporto a una specifica caratteristica e può farlo grazie alla funzione add_theme_support() dichiarando al suo interno quale funzionalità supporterà.

Nel caso dei nuovi allineamenti wide e full non dovrai far altro che aprire il tuo file inc/gutenberg.php e inserire quanto segue:

<?php // Inserito soltanto per la colorazione della sintassi
/**
 * Dichiaro supporto per le funzionalità di Gutenberg
 */
add_action('after_setup_theme', 'sam_add_gutenberg_support');
function sam_add_gutenberg_support(){

  // Dichiaro supporto per allineamenti wide e full
  add_theme_support('align-wide');

}

Se sei uno sviluppatore WordPress esperto dovresti esserti accorto di una cosa, per usare add_theme_support() non è necessario alcun hook e magari la presenza di add_action( 'after_setup_theme') ti ha incuriosito (o fatto storcere il naso).

Quando si tratta di Gutenberg preferisco inserirlo perché, come vedrai negli altri esempi, torneremo a dichiarare nuove compatibilità con le funzionalità Gutenberg e per mantenere il mio codice organizzato al meglio ho preferito fare in questo modo.

Adesso che abbiamo dichiarato la compatibilità con questi nuovi allineamenti puoi usarli subito?

Beh per usarli puoi anche usarli perché Gutenberg presenterà le due nuove icone relative agli allineamenti ma WordPress non fa altro che aggiungere le classi .alignwide e .alignfull, come per qualsiasi altro allineamento, saremo noi sviluppatori che dovremmo aggiungere il codice CSS che permette di applicare questo effetto.

Piccoli aggiornamenti

In queste ultime settimane è stata aggiunta la possibilità di richiamare gli stili dei blocchi presenti in Gutenberg anche nel frontend attraverso l’istruzione add_theme_support('wp-block-styles') offrendo un buon punto di partenza da personalizzare.

Se vuoi personalizzare questi nuovi allineamenti puoi usare il seguente codice come punto di partenza.

.alignfull {
  margin-left: calc(50% – 50vw);
  margin-right: calc(50% – 50vw);
  width: auto;
  max-width: 1000%;
}

.alignwide {
  margin-left: calc(25% – 25vw);
  margin-right: calc(25% – 25vw);
  width: auto;
  max-width: 1000%;
}

.alignwide img,
.alignfull img {
  display: block;
  margin: 0 auto;
}

Questo è il codice CSS che sto usando nei miei esperimenti per dare la possibilità alle immagini di crescere oltre il contenuto. Sentiti libero di usarlo come meglio credi.

Proponi una palette di colori dedicata

Adesso che abbiamo visto la prima accattivante funzionalità introdotta da Gutenberg, continuiamo il nostro viaggio andando a scoprirne un’altra che da sviluppatore non aprezzo molto ma che riconosco essere incredibilmente utile per tutti gli utenti che desiderano aggiungere colore alle proprie pagine.

Anche questa è una funzionalità molto utile perché, assieme alle Drop Cap, aiuta l’utente a creare delle sezioni molto più accattivanti all’interno dei propri articoli.

La scelta del colore è molto importante e anche se esistono degli avvisi che ci aiutano a scegliere il contrasto migliore, il mio timore è che si potranno sempre fare “dei macelli”.

La cosa buona è che come creatori di temi adesso possiamo suggerire dei colori specifici e inibire la possibilità di aggiungerne di nuovi!

L’esperienza è molto semplice perché basta tornare sul nostro inc/gutenberg.php e aggiungere una nuova add_theme_support() alla funzione precedente. Ecco il codice completo all’interno del quale è presente anche la dichiarazione di compatibilità con i nuovi allineamenti.

<?php // Inserito soltanto per la colorazione della sintassi

/**
 * Dichiaro supporto per le funzionalità di Gutenberg
 */
add_action('after_setup_theme', 'sam_add_gutenberg_support');
function sam_add_gutenberg_support(){

    // Dichiaro supporto per allineamenti wide e full
    add_theme_support('align-wide');

    // Dichiaro i colori da usare nel template
    add_theme_support( 'editor-color-palette',
    array(
      array(
          'name' => 'Verde SAM',
          'slug' => 'verde-sam',
          'color' => '#1ABC9C',
      ),
      array(
          'name' => 'Arancione SAM',
          'slug' => 'arancione-sam',
          'color' => '#EF6C00',
      ),
      array(
          'name' => 'Bianco',
          'slug' => 'white',
          'color' => '#FFF',
      ),
      array(
          'name' => 'Grigio',
          'slug' => 'grigio',
          'color' => '#333',
      ),
    )
  );

    // Disabilito la scelta dei colori
    add_theme_support( 'disable-custom-colors' );

}

La dichiarazione dei colori suggeriti avviene in pieno stile WordPress, come già visto per le WP_Query, basta un array per suggerire i dettagli relativi al nome suggerito.

Per esempio se uso i colori Arancione SAM come sfondo e Bianco per il colore del testo nella creazione di un blocco di testo WordPress genererà per me le seguenti classi che potrò personalizzare nel mio CSS: .has-arancione-sam-background-color e .has-bianco-color.

Oltre a questo abbiamo anche disabilitato la possibilità di scegliere altri colori, in questo modo il nostro cliente utilizzerà soltanto i colori definiti in-brand. Questo è stato possibile grazie a add_theme_support('disable-custom-colors' ).

Gestisci le misure standard di un testo

Man mano che ci addentriamo nelle nuove funzionalità introdotte da questo potente editor le caratteristiche che vediamo possono sembrare semplici ma è proprio l’approccio più corretto dato che saranno utilizzate quotidianamente dagli utenti WordPress.

Con questo editor gli utenti possono anche modificare la grandezza del testo usando uno slider o i comodi bottoni che ne indicano la taglia.

.has-small-font-size{ … }

.has-large-font-size{ … }

.has-larger-font-size{ … }

In questo modo se l’utente sceglie una taglia di font possiamo tranquillamente sovrascrivere gli stili di Gutenberg con le classi che ti ho presentato qua sopra.

Questo è un passaggio molto semplice che comunque volevo presentarti per facilitarti il lavoro.

Comprendi la struttura generale di un blocco

Ora se devo essere onesto con te, non ci sono altre grandi funzionalità per le quali dobbiamo dichiarare la nostra compatibilità con Gutenberg.

Fintanto che gli stili inclusi in add_theme_support('wp-block-styles') non copriranno tutti i blocchi, almeno quelli considerati presentazionali come descritto su GitHub, noi sviluppatori dovremo sviluppare gli stili per presentare al meglio il contenuto inserito dal nostro utente.

Per questo motivo ritengo che sia una buona occasione studiare velocemente come Gutenberg crea questi blocchi nel frontend del sito.

<figure class="wp-block-image aligncenter">
  <img src="…" alt="…" class="wp-image-39" srcset="…" sizes="…" width="1000" height="500">
  <figcaption>…</figcaption>
</figure>

Uno dei primi blocchi che voglio analizzare è quello dedicato all’inserimento di un’immagine.

A differenza del vecchio TinyMCE, con il nuovo editor l’inserimento di un’immagine con didascalia ci mette a disposizione un elemento <figure> che contiene la classe .wp-block-image e le altre classi dedicate all’allineamento.

Per nostra fortuna però Gutenberg viene già con altri interessanti blocchi dedicati alle immagini perché oltre agli allineamenti che abbiamo già conosciuto, ci offre un blocco del tutto nuovo:

<div class="wp-block-cover-image has-background-dim-40 has-background-dim" style="background-image:url(…)">
    <p class="wp-block-cover-image-text">…</p>
<div>

Il codice presentato qua sopra viene generato dal nuovo blocco Copertina, un blocco che per la prima volta ci permette di scrivere sulle immagini e creare anche accattivanti effetti di parallasse!

Oltre alla classe .wp-block-cover-image questo elemento presenta altre classi molto interessanti come .has-background-dim e .has-background-dim-40 che ci permettono di personalizzare questo elemento grazie alle impostazioni dedicate presenti nell’editor.

In questo caso le classi aggiuntive permettono di aggiungere un livello più scuro sopra l’immagine e impostare la sua trasperenza al 40% ma in altri casi, come nel paragrafo azzurro presentato precedentemente, permettono di passare ben altre informazioni senza dover aggiungere alcun attributo style ai nostri elementi.

Forse hai già capito come mai ti sto presentando così tanti esempi di blocchi nel frontend ma lascia spazio per un ultimo blocco di codice.

<blockquote class="wp-block-quote">
    <p>…</p>
    <cite>…</cite>
</blockquote>

Da sempre citare qualcuno è una parte integrante della nostra scrittura. Ecco perché il nuovo Gutenberg ci offre un blocco che rispetta anche la corretta sintassi di utilizzo.

Conclusioni

Gutenberg è un progetto in continua evoluzione e in un solo anno sono state create ben 30 release, quindi ti posso assicurare che questo non è un post definitivo e che man mano tornerò a parlare più nel dettaglio di questo strumento perché farà parte della nostra piattaforma preferita.

Già ora ci sarebbero alcune interessanti funzionalità che vorrei descriverti ma dato che abbiamo già superato le 2500 parole ritengo che sia il momento giusto di salutarci e lasciarti l’opportunità di farmi sapere che ne pensi.

Io mi sto documentando molto su questo strumento perché voglio capire meglio come sia possibile creare i nostri blocchi e lasciare da parte tutti i vecchi shortcode e widget che nei prossimi anni andranno in pensione.

Stavo anche valutando la possibilità di creare un corso dedicato a questo argomento.

Tu che ne pensi?

Vale la pena per te imparare a creare i tuoi blocchi e integrare questo strumento all’interno dei tuoi temi o sarà una cosa che disattiverai all’interno delle installazioni WordPress dei tuoi clienti?

L'articolo Rendi compatibile il tuo tema con Gutenberg! proviene da SkillsAndMore.

Comprendi MySQL in WordPress e ottimizza le query

Andrea Barghigiani — Sat, 28 Jul 2018 08:56:50 +0000

Foreword: So che su dev.to vengono condivisi principalmente articoli in inglese ma vorrei iniziare a condividere delle porzioni di articoli che pubblico su SkillsAndMore per vedere se l'audience italiana di questa community li apprezza. Fatemi sapere che ne pensate con un commento ;)

Leggi l'articolo completo: https://skillsandmore.org/comprendere-mysql-wordpress/

WordPress è sicuramente una piattaforma molto potente che permette a chiunque di creare il proprio sito web e offre agli sviluppatori un gran numero di funzioni che richiamano automaticamente gli elementi di una pagina, ma c’è qualcosa che si cela dietro le quinte e che è meglio che tu conosca nel dettaglio.

Alcune funzioni come the_title() o the_content() ci permettono di inserire rispettivamente il titolo e il contenuto di uno specifico articolo o pagina e semplificano sicuramente il nostro lavoro. Devi sapere che queste informazioni provengono dal database MySQL che salva al suo interno tutte le informazioni relative alla tua installazione WordPress.

Il database MySQL è un componente essenziale per la tua installazione WordPress, in molte occasioni mi riferisco a questo come alla memoria di un sito web perché al suo interno vengono salvate tutte le informazioni relative all’installazione e al suo utilizzo.

Introduzione alle tabelle WordPress

I database possono contenere al loro interno diverse tabelle che organizzano le informazioni contenute grazie all’aiuto di righe e colonne. Qua sotto puoi vedere una piccola porzione della tabella wp_posts e a breve ti spiego come è organizzato l’intero database WordPress.

Le tabelle servono a definire delle aree particolari all’interno delle quali si desidera salvare un determinato tipo di informazione. Facciamo un esempio dal vivo, poco fa ti ho detto che WordPress è in grado di salvare un gran numero di informazioni, tra i primi elementi che dicevo erano presenti gli articoli.

Come ormai dovresti sapere, ogni articolo ha diverse sezioni come: titolo, corpo, categorie, tag e qualsiasi altro campo che il tuo tema o un plugin ti permette di aggiungere.

Per esempio dopo aver scritto il tuo articolo, quando premi per la prima volta il bottone salva WordPress andrà a inserire alcune informazioni (chiamati anche record nel gergo dei database) all’interno della tabella wp_posts mentre altre verranno salvate all’interno di wp_postmeta.

Quante tabelle ha WordPress?

Se devo essere sincero, la struttura del database di questa piattaforma non è molto complessa, infatti in un’installazione di base troveremo uno schema di questo tipo (tra parentesi trovi il nome delle tabelle che troverai nel tuo database MySQL):

Articoli (wp_posts)
Commenti (wp_comments)
Utenti (wp_users)
Meta Articoli (wp_postmeta)
Meta Commenti (wp_commentmeta)
Meta Utenti (wp_usermeta)
Opzioni (wp_options)
Link (wp_links)
Tassonomie (wp_termmeta, wp_terms,wp_term_taxonomy, wp_term_relationship)

Come puoi vedere, con solo 12 tabelle WordPress è in grado di funzionare offrendo già un gran numero di servizi!

Come fare una query MySQL in WordPress

Chi ha sviluppato siti in PHP e MySQL prima dell’avvento dei CMS Open Source, si ricorderà benissimo la funzione mysql_query() (oggi addirittura deprecata) che permetteva di inviare una query al database MySQL e salvare il risultato all’interno di una variabile per usarla successivamente all’interno della pagina.

Che tu ti ricordi o meno la presenza di questa funzione, il mio intento era soltanto quello di farti capire che con il linguaggio PHP abbiamo alcune funzioni che permettono di collegarsi al database mentre grazie a WordPress ne abbiamo altre.

Le prime che mi vengono in mente sono:

$wpdb->get_var() – grazie al metodo get_var() è possibile inserire una query SQL, selezionare la colonna e la riga interessata per ottenere il valore cercato;
$wpdb->get_row() – con questa sarà invece possibile selezionare una intera riga. Ad esempio, potresti avere l’id di un utente e utilizzare questo metodo per andare a prendere delle informazioni presenti nella sua riga;
$wpdb->get_col() – invece di una riga, con questo puoi usare la tua SQL per selezionare soltanto una colonna.

Nella pagina del Codex troverai moltre altre funzioni utili e magari anche più adatte ai tuoi scopi ma siamo qua per capire come WordPress può essere di nostro aiuto soprattutto se non abbiamo a nostra disposizione grandi conoscenze MySQL.

L’aiuto delle Classi WP_*

Ogni Loop non è altro che una query MySQL generata automaticamente dalla piattaforma WordPress.

Sicuramente le query generate da uno sviluppatore esperto saranno più ottimizzate rispetto a quelle generate da una macchia (infatti spesso una macchina non può battere un essere umano in creatività), ma questo rappresenta un vantaggio per tutti noi piccoli sviluppatori che si trovano a lavorare con clienti che richiedono sempre di più ma sono disposti a spendere sempre meno.

Come puoi vedere WordPress ha pensato un pò a tutto e grazie alle cache sarai in grado di ottimizzare il tuo lavoro.

Vieni a leggere l'articolo completo!

Questa è soltanto una porzione dell'articolo pubblicato su SkillsAndMore. Se ti ho incuriosito ti consiglio di venire a leggere questo o gli altri articoli presenti all'interno del nostro blog.

Se invece desideri migliorare le tue conoscenze sullo sviluppo web puoi venire a consultare i nostri corsi. Ci impegniamo molto a pubblicare dei contenuti che siano utili e pratici in modo da aiutarti nel tuo lavoro.

Piaciuto l'articolo?

Fammelo sapere lasciando il tuo commento o una tua reazione!

DEV Community: Andrea Barghigiani

The no BS guide to show your impact with XYZ Framework

Aren't frameworks full of fluff?

What's this XYZ?

The Formula in Practice

Why This Matters for Performance Reviews

The "Chores vs. Wins" Problem

Finding the right balance with the 70/30 Rule

Quantifying "Glue Work"

Mentorship

Process Improvements

Cross-Functional Coordination

The Pattern for Glue Work

Building Your Brag Sheet

Quick Reference: XYZ Builder

The Bottom Line

A Tool for the Habit

Consigli allo sviluppatore web per creare un forte posizionamento.

Perché dovresti prendere in considerazione Genesis

Perché hai bisogno di un framework

Perché ti consiglio di scegliere Genesis come framework?

Genesis è qua per restare!

Genesis è in continuo sviluppo

Ottimizzazioni SEO a portata di mano

Un framework basato sulla piattaforma

Una community affiatata pronta ad aiutarti

Un child theme per ogni esigenza

Critiche da parte degli sviluppatori

Genesis non è un framework open source

È difficile operare all’interno di wp_content

Conclusioni

L’introduzione al terminale che avrei desiderato

Che cosa è un terminale?

Primi comandi da terminale

Muoviti tra file e cartelle

Caso d’uso per i comandi principali del terminale

Caratteri speciali, opzioni e consigli utili

Le opzioni di un comando

Caratteri Speciali

Piccoli esempi in cui è utile conoscere il terminale

Creazione di uno script Bash

Avviare un preprocessore CSS

Connettersi a un server remoto

Modificare un database WordPress

Conclusioni

10 librerie Sass che ti aiutano nello sviluppo CSS

Inverti gli elementi di un sito con Bi-App

Tutti i bottoni che vuoi con… Buttons

Gestisci le tue media query facilmente con @include-media

Preoccupato per il numero di media query?

Crea animazioni keyframe facilmente con Kf

Migliora il ritmo verticale con TypeSettings

Griglie verticali con SassLine

Griglie responsive grazie a Susy

Scut, una raccolta di utility per i tuoi CSS

Separatori angolari con Angled Edges

Bourbon, una libreria piena di sorprese!

Conclusioni

Rendi compatibile il tuo tema con Gutenberg!

Che cosa è Gutenberg?

Come preparare i tuoi temi WordPress a Gutenberg

Aumentiamo l’organizzazione separando i file

Dichiara la compatibilità con le immagini wide e full

Proponi una palette di colori dedicata

Gestisci le misure standard di un testo

Comprendi la struttura generale di un blocco

Conclusioni

Comprendi MySQL in WordPress e ottimizza le query

Introduzione alle tabelle WordPress

Quante tabelle ha WordPress?

Come fare una query MySQL in WordPress

L’aiuto delle Classi WP_*

Vieni a leggere l'articolo completo!

Piaciuto l'articolo?

È difficile operare all’interno di `wp_content`