Vi gillar smarta verktyg

16 aug 2017

Semestern är slut och hösten närmar sig. Och visst kan det kännas lite trögt att komma igång? Då är det skönt med verktyg som gör jobbet både snabbare och effektivare. Jesper är en av våra Front End-utvecklare och berättar mer om en favorit.

Överblick med Browsersync

Browsersync är ett smidigt verktyg som vi Front End-utvecklare använder i nästan alla projekt. Det gör det möjligt att utveckla och granska våra projekt snabbare, samtidigt som samma webbsida kan kontrolleras på flera enheter samtidigt.

 

När man anpassar en hemsidas utseende brukar man göra det med CSS eller SCSS-kod. Varje gång det görs en ändring i koden måste sedan hemsidan uppdateras i webbläsaren för att kunna se resultatet. Det manuella arbetet, och att ständigt byta mellan olika fönster, betyder förstås onödig tid. Med Browsersync syns istället resultatet av koden direkt, utan manuell uppdatering och utan fönsterbyte.

 

Synka utan uppladdning

Verktyget låter oss också synkronisera en hemsida, som utvecklats lokalt, till andra enheter utan att behöva ladda upp projektet på en server. Det är förstås mer effektivt att kunna se alla ändringar i realtid för flera enheter samtidigt. När vi gör en ändring i koden så ändras alltså utseendet direkt, både i dator, mobil och/eller surfplatta.

 

Man kan förstås även använda Browsersync för andra filer, till exempel HTML. Skillnaden är att CSS laddas in på sidan utan att webbläsaren uppdateras, vilket oftast är nödvändigt för andra filer. Med verktygets hjälp så uppdateras alltså webbläsaren automatiskt, även vid ändring av exempelvis en HTML-fil för alla de enheter som är anslutna.

 

Stör inte besökaren

Browsersync har också en smart proxy-funktionalitet. Den låter oss jobba mot en publik hemsida med egna, lokala filer utan att det påverkar våra besökare. Om vi exempelvis vill ändra menyns utseende på strateg.se så kan vi använda en lokal fil för att redigera och utveckla i lugn och ro, samtidigt som vi behåller själva innehållet på sidan. Det gör att vi på ett smidigt sätt kan testa ny kod utan att ladda upp några filer och utan att störa våra besökare.

 

 

Jesper Johansson

Front End developer

Mail: jesper.johansson@strateg.se

Github: www.github.com/jesper-johanssonlänk till annan webbplats, öppnas i nytt fönster