Tre sätt kod kan underlätta ditt jobb - redan idag

Posted on April 24, 2016

En crash course för nybörjaren

Någonsin surfat runt och helt plötsligt mötts av ett fönster av kod utan att du vet vad som hänt? Lätt att tro det värsta, men nej, du har inte blivit hackad. Faktum är att du har råkat plocka fram ett kraftfullt verktyg inom utvecklarvärlden - nämligen komponentgranskaren. Det många inte vet om är att vem som helst faktiskt kan gå in och titta på den kod som en hemsida är uppbyggd av. Det gäller ALLA hemsidor. I de flesta moderna webbläsare finns en komponentgranskare numera installerad, och med hjälp av den kan man se koden som hemsidan består av. Självklart är komponentgranskaren mycket användbar inom utvecklarvärlden, men det finns faktiskt flera tillfällen där även icke-programmerare kan ha glädje av den. I detta inlägg listar jag tre av dem!

1. Plocka fram en gömd mailadress
Har du någonsin försökt hitta en mailadress till någon, men det enda som finns är en “push to email”-knapp som är direkt kopplad till Outlook? Problemet är att om du inte använder Outlook eller liknande program så går det inte att maila via knappen, och du kan heller inte se mailadressen. Irriterande kan tyckas, men det finns en sätt att komma runt detta!

SÅ GÖR DU
Om du högerklickar på mailknappen (se bild) och klickar i “Inspektera/Inspect element” (i sv/eng Chrome) kommer den kodsträng som hör till knappen att blåmarkeras. Om du letar lite kommer du att hitta en mailadress som är direkt kopplat till knappen, i detta fall "hello@tjejerkodar.se”. TA DA, lätt som en plätt.

(Genväg: Istället för att klicka "Inspektera" kan du också direkt klicka "Kopiera e-postadress". Detta var dock en bra och enklare uppstartsövning inför nästkommande två.)

2. Extrahera data från en lista av valalternativ
En gång blev jag ombedd att göra en konkurrentanalys över vilka länder som olika aktörer fanns tillgängliga i. Ett enkelt sätt att hitta information om detta var i drop-down listan när man registrerade sig som kund, dvs den långa listan med länder som valalternativ i registreringsformuläret. Istället för att manuellt skriva ner alla dessa länder så kunde jag extrahera datan direkt ur internetläsaren.

SÅ GÖR DU
För att ta fram datan gör du exakt likadant som i föregående steg, dvs högerklicka på den komponent som du vill få fram information om och klicka i “Inspektera/Inspect element”. Återigen markeras den kodsträng som hör till drop down-listan. I det här fallet gömmer sig en hel del mer kod inom den markeringen. Resterande kod får du fram genom att klicka på den lilla triangeln framför “select”. Nu kan du se en lång lista av länder. Kopiera blåmarkeringen och klistra in i excel. Med lite snygga excel-formler kan du sedan extrahera ut landskoderna (SE, DK, FI osv) och göra en snabbare jämförelse (eller vad det nu är du vill göra).

3. Se vilken färgkod som används
Den översta rutan i komponentgranskaren visar HTML-koden som hemsidan är uppbyggd av, medan den undre rutan visar vilken CSS sidan är uppbyggd av. HTML bestämmer hur sidan ska agera och vad den ska vara uppbyggd av. CSS bestämmer hur delarna som finns på sidan ska se ut, exempelvis vilken färg och font rubriken ska ha. Om du hittar en färg online som du vill använda dig av kan du hitta färgkoden direkt i komponentgranskaren. Detta är framför allt användbart för designers.

SÅ GÖR DU
Högerklicka på rubriken, eller vad det nu är du vill undersöka, och klicka i “Inspektera/Inspect element”. Det som är blåmarkerat är själva HTML-koden som bestämmer vilken rubrikklass (H1 i detta fall) och vilken text som ska stå i rubriken. Om du tittar längre i rutan under ser du vilken CSS-kod som är kopplad till rubriken, dvs hur rubriken ska vara stylad. Där ser du att färgkoden som använts är #bf1d7a (rosa) och fonten är “Varela round”.

Det många heller inte vet att det går att ändra i koden direkt i komponentgranskaren. Genom att ändra färgkoden direkt i komponentgranskaren kan du se hur hemsidan skulle se ut med en annan färg på rubriken. Du kan också testa att lägga in en annan font och ändra fontstorlek.

Vill du lära dig mer?
Att laborera runt i komponentgranskaren är faktiskt ett mycket bra sätt att komma igång med att lära sig programmering. Där går det att se direkt vilken kod som tillhör vilken komponent, och vad som händer om man ändrar något. Sugen på att börja laborera med något enkelt? Kika in komponentgranskaren på sajten vecka.nu!

Maria Selting

Maria är den före detta Handelsstudenten som på grund av bristande utvecklingsresurser (à la klassiskt tech Stockholm-problem) fick lära sig enklare programmering för att slippa flaskhalsar i sitt arbete. Sedan dess har hon fortsatt att intressera sig för teknik i alla dess former, både ur ett konceptuellt businessperspektiv ner till minsta trackingkod. Om dagarna arbetar Maria med growth på iZettle och på fritiden är hon med och driver Tjejer kodar som PR-ansvarig. Är du intresserad av att gästblogga? Hör av dig till Maria på maria@tjejerkodar.se.

Twitter: mariaselting