En titt inn i: Kitsspråket

La oss si at du var å bygge prototyper for et nettsted med HTML- filer. Du har omtrent 10 HTML-sider eller så, og disse sidene deler noen vanlige komponenter som Header, Sidebar og Footer.

Nå kommer problemet: Hvis du gjør en endring i disse delte komponentene, kan du ende opp med å endre dem i de andre filene også. Det er kontraproduktivt og stort spild av tid.

For å unngå dette kan du prøve ut templerende motorer . Det finnes en rekke templerende motorer der ute, hver med sine særegne egenskaper. I dette innlegget skal vi gå deg gjennom en som vi har funnet å være den enkleste men likevel kraftige: Kit .

Hva er Kit?

Kit er et proprietært språk av Codekit som bringer variabel og fil import evne til HTML. Den er skrevet med en .kit . Ved hjelp av Codekit kan den deretter kompileres til en HTML-fil ved en filsparing.

variabler

Kitvariabler er ikke satt i stein; de kan defineres med $ eller @ notasjonen. Så, hvis du bruker Kit sammen med MINDRE, kan du navngi variablene dine med @ notasjonen for å følge MINDRE konvensjonen. På samme måte kan du bruke $ for Sass. Verdiene kan tilordnes med kolon, like tegn eller mellomrom. Nedenfor er noen eksempler:

Det er imidlertid verdt å merke seg at du kanskje bare angir en variabel per kommentar, slik at følgende eksempel ikke fungerer som en variabel.

Import

Med Kit-språket kan du importere alle typer filer, inkludert .html, .txt, .kit og til og med .php . For å importere filer kan du bruke @import eller @include .

Videre, i motsetning til å definere variabler, kan du importere flere filer i én linje, slik som:

Ved lagring vil Codekit gripe innholdet i disse filene og legge dem til filen.

Bruke Kit

Så vi har sett hva Kit har å tilby. De kan ikke være mye, men de er absolutt kraftige nok til å gjøre livet enklere når man håndterer en haug med HTML-filer.

I et praktisk scenario kan vi bryte dokumentet ned i flere filer, for eksempel: header.kit, sidebar.kit, footer.kit, head.kit, opening.kit og closing.kit . Vi vil importere disse filene til våre sider, slik at når vi gjør en endring, gjelder den på alle sidene.

Dokument åpning og avslutting

Jeg er sikker på at filnavnene er ganske selvforklarende hva filene bærer, med unntak av (kanskje) opening.kit og closing.kit .

I vårt eksempel nedenfor inneholder filen open.kit Doctype, HTML-åpningstaggen og åpningslegemet. I denne filen importerer vi også head.kit som inneholder alt som er pakket inn i element, og kan også definere flere globale variabler som kan arves gjennom alle filene, slik som:

Merk at jeg også har lagt til to variabler: @body_class i @page_name og @page_name i titteltaggen. Disse variablene vil tillate oss å angi forskjellige klasser og sidenavn på tvers av sidene. Hvis vi har to sider kalt index.kit og about.kit, kan vi i hver av disse filene sette verdiene for disse to variablene slik:

index.kit

about.kit

Når vi har lagret filene, erstatter Codekit de variablene vi har lagt inn i kroppsmerket og title med disse verdiene. En ting å merke seg er at variablene må komme før inkludering av opening.kit, ellers vil de ikke bli plukket opp.

Konklusjon

Som tidligere nevnt, kan Kit være det enkleste templerende språket som er tilgjengelig. Den bruker bare HTML-kommentarkoden, og gir stor fleksibilitet når det gjelder å definere variabler og importere filer.

Å kunne bruke variabler og importere filer i HTML betyr at vi kan øke vår produktivitet, da vi ikke lenger må endre koder flere ganger i flere filer, noe som er svært tidkrevende. I tillegg tillater det oss også å gjøre prosjektet modulært, og dermed mer overkommelig.

Opprett egendefinerte Høyreklikk-kontekstmenyer med justContext.js

Hver nettleser har en standard kontekstmeny . Dette vises når brukeren høyreklikker hvor som helst på en side, og den har vanligvis de samme alternativene, for eksempel "kopi", "lagre" eller "inspiser element".Med justContext-biblioteket kan du bygge spesialiserte kontekstmenyer for elementer på nettstedet ditt. Di

(Tekniske og design tips)

Analyseverktøy for Google+ Markedsførere - Best Of

Google+ pleide å bli sett på som en Internett-ekvivalent av en spøkelsesby, med for få brukere til å være nyttig som markedsføringsplattform. Men i løpet av 2013 begynte den oppfattelsen sakte å forandre seg. For det første rapporterte Global Web Index at Google+ hadde overtatt Twitter for å bli det nest mest brukte sosiale nettverket. Da begynt

(Tekniske og design tips)