Uno sguardo in: The Kit Language

Diciamo che stavi costruendo prototipi per un sito Web con file HTML . Hai circa 10 pagine HTML o giù di lì e queste pagine condividono alcuni componenti comuni come Intestazione, Barra laterale e Piè di pagina.

Ora arriva il problema: se apporti una modifica a questi componenti condivisi, potresti doverli modificare anche negli altri file . È controproducente e una grande perdita di tempo.

Per evitare questo, puoi provare i motori di template . Ci sono una serie di motori di modelli là fuori, ognuno con le sue caratteristiche distintive. In questo post ti illustreremo quello che abbiamo scoperto essere il più semplice ma potente: Kit .

Cos'è il kit?

Kit è un linguaggio proprietario di Codekit che consente di importare variabili e file in HTML. È scritto con estensione .kit . Usando Codekit, può quindi essere compilato in un file HTML su un file salvato.

variabili

Le variabili del kit non sono impostate in pietra; possono essere definiti con la notazione $ o @ . Quindi, se usi Kit insieme a LESS, puoi nominare le tue variabili con la notazione @ per seguire la convenzione LESS. Allo stesso modo, puoi usare $ per Sass. I valori possono essere assegnati con due punti, segno di uguale o spazio. Di seguito sono riportati alcuni esempi:

Tuttavia, vale la pena notare che è possibile impostare solo una variabile per commento, quindi il seguente esempio non funzionerà come variabile.

Importare

Con la lingua del kit, puoi importare qualsiasi tipo di file inclusi .html, .txt, .kit e anche .php . Per importare i file, puoi usare @import o @include .

Inoltre, a differenza della definizione delle variabili, puoi importare più file in una riga, in questo modo:

Al momento del salvataggio, Codekit catturerà il contenuto di questi file e li aggiungerà al file.

Utilizzo del kit

Quindi abbiamo visto cosa Kit ha da offrire. Potrebbero non essere molto, ma sono certamente abbastanza potenti da semplificare la vita quando si gestiscono un sacco di file HTML.

In uno scenario pratico, possiamo suddividere il nostro documento in diversi file, ad esempio: header.kit, footer.kit, head.kit, opening.kit, closing.kit e closing.kit . Importeremo questi file nelle nostre pagine in modo che quando apportiamo una modifica, si applichino su tutte le pagine.

Apertura e chiusura del documento

Sono sicuro che i nomi dei file sono piuttosto auto-esplicativi riguardo a cosa stanno portando i file, tranne (forse) il file opening.kit e il file closing.kit .

Nel nostro esempio qui sotto, il file opening.kit contiene il Doctype, il tag di apertura HTML e il tag di apertura del corpo. In questo file, importiamo anche head.kit che contiene tutto ciò che è head.kit nel elemento, e può anche definire diverse variabili globali che possono essere ereditate attraverso tutti i file, in questo modo:

Nota che ho aggiunto anche due variabili: @body_class nel tag body e @page_name nel tag title. Queste variabili ci permetteranno di impostare diverse classi e nomi di pagine tra le pagine. Se abbiamo due pagine denominate index.kit e about.kit, in ognuno di questi file possiamo impostare i valori di queste due variabili in questo modo:

index.kit

about.kit

Quando abbiamo salvato i file, Codekit sostituirà le variabili che abbiamo inserito nel tag body e il title con quei valori. Una cosa da notare però è che le variabili devono arrivare prima dell'inserimento di opening.kit, altrimenti non verranno prese in considerazione.

Conclusione

Come accennato in precedenza, Kit potrebbe essere il più semplice linguaggio di template disponibile. Utilizza solo il tag di commento HTML e offre una grande flessibilità nella definizione di variabili e nell'importazione di file.

Essere in grado di utilizzare variabili e importare file in HTML significa che possiamo aumentare la nostra produttività, dal momento che non dobbiamo più cambiare i nostri codici più volte in più file, il che richiede molto tempo. Inoltre, ci consente anche di rendere il nostro progetto modulare e quindi più gestibile.

5 miti sulla carriera che devono essere sballati

Sei un neo-laureato con gli occhi spalancati che cerca di diventare un membro produttivo della società? O forse sei qualcuno che ha fatto una scelta di carriera sbagliata e ora vuole ricominciare da capo? Sarà una corsa dura visto che sei limitato solo al tuo livello, alle tue abilità e al tuo livello di esperienza, giusto ?Sb

(Consigli tecnici e di design)

8 potenti estensioni di codice di Visual Studio per sviluppatori front-end

Sebbene Microsoft abbia rilasciato la prima versione stabile di Visual Studio Code, il suo potente editor di codice solo pochi mesi fa, a marzo 2016, ha già molte estensioni disponibili che possono portare l'esperienza di codifica al livello successivo. Le estensioni ufficiali del codice di Visual Studio sono ospitate nel marketplace di Visual Studio, molte delle quali possono essere di grande aiuto per gli sviluppatori web.

(Consigli tecnici e di design)