Riot är ett litet mjukvaruföretag som för närvarande består av endast fem personer. Utan ingenstans har detta team tappat två webbutvecklingsprogram för Mac-användare som har blåst bort mig. Det här är en appkategori som enligt min åsikt inte har fått mycket sant innovation de senaste åren och uppenbarligen är de goda människorna på Riot ute med att ändra det, för deras idéer är verkligen unika och otroligt användbara.
Idag tar vi en kort titt på både Hammer och Anvil för att se vad de gör och hur de kollektivt kan förbättra ditt arbetsflöde, särskilt om du är en frontend utvecklare som arbetar med statiska webbplatser.
Hammare
Först upp är Hammer, ett riktigt steg framåt inom området statisk platsutveckling. Om du älskar den typ av saker som PHP gör, men antingen inte känner till PHP eller helt enkelt inte vill röra med det i dina små projekt, kommer du att älska Hammer.
Vad är det?
Låt oss börja med att diskutera vilken Hammer som inte är. Det är inte en IDE eller textredigerare. Du behöver inte ge upp Sublime Text 2 för att kunna använda det (vilket är jättebra), det pluggar rätt in i ditt befintliga arbetsflöde och fungerar tillsammans med dina favoritweb dev-appar, oavsett vad de är.
Nu frågar du igen, hur mycket är Hammer? Kort sagt, det är en kompilator. Det fungerar som en slags hemmabas för ditt webbdesignprojekt. När du gör ändringar kompilerar Hammer dina filer. Om du till exempel använder Sass eller CoffeeScript, kommer de automatiskt att sammanställas till CSS och JavaScript.
Det är allt?
Nej. Hammer är inte bara en annan Codekit-konkurrent. Det lägger till begreppet kompilator genom att tillhandahålla speciell syntax som du kan använda i ditt arbete som styr hur dina filer byggs.
Vilken typ av speciell syntax frågar du? Vad sägs om att HTML innehåller det som låter dig automatiskt bädda in HTML-dokument till varandra utan PHP eller en servermiljö? Eller kanske du vill använda smarta filvägar som automatiskt hittar specifika tillgångar, även när de flyttas? Vill du ha en sida av HTML-variabler med det?
?Stäng ytterdörren? du säger. Nej, jag ska hålla dörren svängd bred. Hammer gör allt detta och mer. Låt oss se hur.
Komma igång med Hammer
Efter att ha laddat ner och lanserat Hammer så ser vi det här:
Här har vi ett trevligt och vänligt startfönster som uppmanar oss att antingen skapa ett nytt projekt eller släppa in ett befintligt projekt. Jag ska skapa ett nytt projekt eftersom det finns många fina saker som händer att du ska se.
Skapa ett nytt projekt
När jag klickar på? Skapa nytt projekt? mapp, välj sedan ett namn och en plats för projektet, Hammer kommer till jobbet och skapar en imponerande liten katalog med startfiler.
Inne i huvudprojektfilen hittar du en index.html-fil med tre mappar: tillgångar, Bygg och innehåller. Var och en av dessa är förfyllda med startfiler för att hjälpa dig att komma igång.
Det viktigaste området av intresse här är? Bygga? mapp, det här är katalogen där din färdiga, statiska HTML-webbplats kommer att placeras i alla dess snygga sammanställda ära.
Hooking med din favorit textredigerare
Som jag nämnde tidigare är Hammer byggt för att fungera bra med ditt nuvarande arbetsflöde. När du har skapat ditt projekt klickar du på den lilla appikonen längst upp till höger om gränssnittet för att välja redigeraren som du ska använda.
Nu med projektet valt i vänster sidofält, slår du Kommando-E och det projektet kommer att öppnas i din valda app, Sublime Text 2 i mitt fall.
Freaking Awesome Egenskaper
Det är svårt att inte göra en dubbelupptagning när du ser Hammers funktioner. De är bra. Verkligen riktigt bra. Jag pratar voodoo att du aldrig trodde att du skulle kunna göra bra. Låt oss ta en titt på några av de bästa delarna.
HTML inkluderar
Om vi öppnar den automatiskt genererade HTML-filen som följde med vårt nya projekt, så ser vi det här (det här är hela filen):
Detta bör vara din reaktion:? WTF? Var är all koden? Vänta, gör det vad jag tycker det gör? Japp.
Utan någon kunskap om PHP och utan att installera någon form av lokal servermiljö kan vi dra nytta av begreppet modulbaserad utveckling.
Om du är så van vid statiska sidor som du inte har någon aning om vad som händer, låt mig bryta ner det. Inne i? Innehåller? mappen är en uppsättning HTML-filer. Ta till exempel filen _header.html. Vi har ett kopia av detta som kan infogas i så många sidor som vi vill. Om du placerar den i tio HTML-filer, uppdaterar du huvudhuvudfilen, alla tio andra HTML-filer uppdateras vid kompilering.
Allt du behöver för att utföra denna imponerande prestation är ett anpassat fragment som kommer i form av en HTML-kommentar. Här är tre exempel:
Följderna här borde blåsa ditt sinne. Jag kan verkligen inte uttrycka hur mycket av ett språng framåt här representerar för statiska platser.
variabler
?Men vänta!? du säger. ? Du kan inte använda samma exakta rubrik i varje fil !? Du är en skarp en. Åtminstone måste du anpassa titeltaggen så att varje sida är annorlunda. Så vad nu? Är kapten Hammer besegrad?
Frukt inte, jag håller på att visa dig hur du använder variabler i din HTML. I stället för att skriva en verklig titel i din HTML-headerfil för huvud, kan du helt enkelt skapa variabel som så:
Nu när vi kör ett inlägg i vår headerfil kan vi anpassa den variabeln. Vi gör detta med en enda rad överst i vår HTML-fil för destinationen.
Den övre raden i det här kodfältet berättar att Hammer ska ersätta titeln $ titeln med? Design Shack ?. Nu kan jag ha en inkluderad headerfil som är anpassad på en sida. Jag sa till dig att den här grejen var fantastisk.
?Duktig? Paths
Nästa är smarta vägar. Dessa är enkla att förstå och super praktiska.I grund och botten kan du gräva långa filvägar när du länkar till dina olika resurser för att använda? @ Pathen? syntax.