Författare: Freja Busby

Tack för mig

Nu har Boot Campet kommit till sitt slut. Med vemod måste jag säga hej då till alla fina klasskamrater, två riktigt duktiga lärare och självklart de tre personerna som får hela Technigo att flyta, Hanna, Sandra och Siri.

Nu ska jag försöka smälta all kunskap som regnat över mig under 12 veckors tid. Jag ska också försöka ta några dagar ledigt från kodandet. Jag tror dock att jag hittas djupt nedsjunken i ett javascript error om bara några timmar.. Det finns så mycket som jag vill lära mig mer om, som jag vill testa, som jag vill skapa!

Jag tänkte ge några allmänna tips till er som vill lära er programmering eller till och med ska gå detta Boot camp i höst:

  1. Våga!
    Vill du lära dig? Kör på! Du har ingenting att förlora. Programmering är för alla kön, etniciteter och personlighetstyper. Glöm den stereotypiska programmeraren som sitter i mörkret i en källare med en jolt cola. Vi ser alla olika ut, har olika egenskaper och olika erfarenheter.
  2. Ta pauser!
    Pauser är underskattat. När man fastnar i ett problem vill man gärna inte släppa det innan det är löst. Men ta några minuter och gör något annat, koden blir tydligare då och oftast löser man problemet efter en paus.
  3. Ta hjälp av, och hjälp, andra!
    Man lär sig så otroligt mycket av att hjälpa andra och förklara kod. Att hjälpa varandra gör att man utvecklas så mycket snabbare. Och våga fråga, det är oftast andra som vill fråga exakt samma sak som du, men inte vågar.
  4. Har du ingen att fråga? Prata högt!
    Att prata med sig själv om sitt problem är förvånansvärt effektivt. Det är som att man förklarar för sig själv och genom det förstår koden, på något magiskt vis.
  5. Ta dig tid att göra andra saker som du gillar!
    När man kodar har man ofta ett väldigt hög fokus och man fastnar lätt, plötsligt har flera timmar flugit förbi. Ta dig tid till att träna, umgås med vänner eller bara att chilla på soffan. Utan återhämtning kan man inte ge 100%
  6. GE INTE UPP!
    Du kommer klara det! I perioder känns det som att inget går som du vill, men jag lovar, av alla fel man gör, lär man sig massor.

Som avslut vill jag gärna visa upp mitt slutprojekt som jag har byggt.
Det är en hemsida där du kan hitta Second hand butiker i Stockholm. Jag vill med detta göra det enklare och roligare att shoppa begagnade kläder och saker. Tanken är att sidan i framtiden ska vara användarbaserad, så användare ska kunna lägga till nya butiker, kommentera och ge betyg på butikerna. I detta skede ser den ut såhär:

Tack för den här tiden! Jag hoppas att ni har fått en tydlig bild för hur det är att gå på Technigos Boot Camp. Vi ses kanske igen, någon gång i framtiden!
Ni får mer än gärna höra av er om ni har frågor angående kursen eller allmänt. Ni når mig via linkedin eller instagram 

Och juste, kika gärna på min portfolio, där finns en del av de projekten som jag/vi byggt under kursen: frejabusby.se

Hej då!

Användarvänlighet på webben

Cirka 20% av Sveriges befolkning, i åldrarna 16-64 år har någon typ av funktionsnedsättning. Vilket innebär att man använder sina enheter på annat vis, i jämförelse med normen, exempelvis enbart via tangentbordet eller med hjälp av specialdesignade hjälpmedel. För att alla ska ha samma möjligheter på webben behöver alla hjälpas åt och ha detta i åtanke när man designar eller utvecklar siter och applikationer.  ‍

Vi hade turen att få gå på en föreläsning inom användarvänlighet förra veckan. Föreläsningen var anordnad av Technigo/Tjejer kodar hos Google Digitalakademin (Googles nyöppnade utbildningscenter). Marcus Linder, senior utvecklare från Kundo, med spetskompetens inom ämnet gick igenom vad man ska ha i åtanke, främst ur en webbutvecklares perspektiv.

Det finns flera olika anledningar till att man kan ha svårt att navigera och interagera på en site eller applikation. Exempelvis så kan man vara blind, färgblind, ha reumatism, dyslexi eller liknande. Detta ställer självklart krav på användarvänligheten på siten.

Frågor man kan ställa sig själv när man utvecklar:

  • Kan man navigera enbart med tangentbordet?
  • Kan man förstår budskapet om man inte ser färger eller kontraster?
  • Fungerar Screen readers på siten?
  • Finns det alt-text på bilderna?
  • Är texterna tydliga – i lagom storlek och i en lättläst font?

Första steget är att ha detta i åtanke. Nästa steg är att testa och se om siten håller måtten. Det kan man göra på lite olika sätt. Man kan testa en hel del själv, exempelvis att navigera enbart med tangentbordet, eller läsa upp innehållet på sidan med en Screen reader. Utöver detta så finns det också hjälpmedel som kan ge hintar om vad som kan behöva förbättras. Här är några olika: Wave , W3C Validation  och en lista över andra verktyg: W3C verktygs lista. Du kan också använda Lighthouse i Chrome (via Chrome DevTools i inspektor-läget).

Som nybörjare är det svårt att veta hur man kan göra sin site mer användarvänlig. Svenska företag måste vanligtvis följa riktlinjer som gäller utefter WCAD 2.1 Level, som du kan läsa mer om via länken. Utöver tipsen ovan kan man också läsa mer här: Webbriktlinjer, webbriktlinjer/webbdirektivet

Under föreläsningen fick vi också se en video från Apple, som ger en gnutta förståelse till varför detta är så himla viktigt! Se videon här

Nu är det knappt två veckor kvar(!!!!) 
Slutprojekten är i full gång och alla är taggade på att snart få visa sina nya skills på sina tidigare eller nya arbetsplats. 

Vad är Node.js

Hittills på Boot campet har det varit fokus på Frontend utveckling, denna vecka har vi tagit det första steget över till server-sidan, med hjälp av Node.js.

Vad är Node.js?
Node.js är en open source-plattform där man kör Javascript på servernivå. Node.js använder Chrome V8 Javascript-motor som översätter Javascript till så kallad maskinkod/machine code, så din server kan köras. Paypal, Uber, Linkedin och Netflix är några exempel på företag som använder Node.js.

Vad kan man göra med Node.js?
Med hjälp av Node.js kan man med Javascript, bygga komplicerade applikationer som dynamiskt anpassar data beroende på ex. användaren.
Det kan vara allt från: logins, specifikt innehåll för specifika användare och olika typer av spel   till: lagring av kreditkort och chattfunktioner – listan kan göras otroligt lång! 
För att bygga funktioner som de ovan, räcker oftast inte vanilla Javascript eller React (som jag tidigare skrivit om här på bloggen), utan man behöver en server. På servern kan man lagra data som man sedan kan använda i sitt program eller applikation.

Varför ska man använda Node.js?
Node.js har många fördelar, både för användaren och för dig som utvecklare. Här följer några exempel:

  • Inlärningskurvan är lägre än att lära sig ett helt nytt programmeringsspråk.
  • Man kan bygga en snabbare applikation, med mindre kod, på kortare tid än med andra språk.
  • Med Node.js får vi en ren och mer konsekvent kod eftersom allt är skrivet i samma språk, Javascript!
  • Man vinner prestanda genom så kallat ”non-blocking IO” och ”Event loop”, väldigt enkelt förklarat så innebär detta att data hämtas från server, under tiden som data hämtas fortsätter applikationen att köra nästa instruktion. Den stannar alltså aldrig upp för att vänta på data (som i många andra programmeringsspråk för server-sidan) – applikationen blir i och med detta mycket snabbare. 

Npm – Nodes ”pakethanteringsystem” 
En viktigt del när man jobbar med Node.js är npm (Node Package Manager). Npm innehåller paket med färdig kod som man kan återanvända i sitt projekt – så kallade packages. Detta underlättar då du snabbare kan lösa problem, genom att någon annan redan har en lösning som de laddat upp som ett package.  Du kan då ladda ner paketet, implementera och anpassa det efter din applikation. Det finns hundratusentals paket och det kommer dagligen upp nya.

Vill du veta mer?
Här kommer några lästips:
Få en förståelse för hur Chrome V8 fungerar
Introduktion till server-sidan
Kom igång med Node.js
Mer om npm

Nu är det bara tre veckor kvar innan vi är ”färdiga” Frontend utvecklare.  Jag är så peppad med samtidigt känner jag redan lite separationsångest. Jag kommer sakna detta underbara gäng så mycket!

CSS Grid – Framtidens sätt att layouta

CSS Grid är relativt nytt i frontend-världen. Det började utvecklas för några år sedan och fick under förra året stor uppmärksamhet. Sedan dess har Grid tagit stora kliv mot att bli en standard inom CSS. Det som stoppar Grid från att användas på daglig basis är att det fortfarande saknar stöd i vissa webbläsare. Det går dock framåt i rask takt. Jag tror att vi inom något år kommer se ett flitigt användande av CSS Grid. 

Vi har denna vecka haft turen att kunna ägna en hel dag till att lära oss CSS Grid. En senior frontend utvecklare kom och besökte oss för en genomgång i hur det fungerar. Sedan fick vi göra en individuell uppgift där vi layoutade med hjälp av Grid. Kursen har ett stort fokus på det praktiska, vilket är perfekt för mig eftersom jag lär mig bäst genom att testa mig fram till olika lösningar.

Innan jag visar resultatet av uppgiften kanske ni vill veta mer om vad CSS Grid faktiskt är   
Grid är som sagt ett nytt sätt att skapa layouts med CSS. Man kan med detta skapa en ”rutnäts”-baserad layout som byggs upp via kolumner och rader.  Det innebär att man nu kan styla både vertikalt och horisontellt, på ett betydligt enklare sätt. En annan viktig del är att man kan ändra ordningen på sina objekt helt oberoende av ordningen i dokumentobjektmodellen (DOM). Man kan också kombinera Grid med exempelvis Flexbox och float om man skulle vilja.  Sammanfattningsvis kan du, med hjälp av Grid, lättare bygga avancerade layouter.

Exempel på layouts som du enkelt kan skapa med Grid:

Och mitt resultat av uppgiften:


Vill du veta mer?
Här kommer några lästips:
W3Schools CSS Grid
MDN web docs – CSS Grid Layout

Nästa vecka kör vi äntligen igång med Node.js, det ska bli så spännande! ⚡ Vi hörs snart igen

Vad är egentligen React?

Ofta när man läser, pratar eller hör om Javascript nämns också frameworks och Javascript bibliotek. Det finns oändligt många och det är lite av en djungel. React som är skapat av Facebook är ett av dem. Det används idag bland annat av Instagram, Uber, Airbnb och självklart Facebook själva. React ökar i popularitet för varje dag som går och det känns som att alla pratar om det!

Men vad är egentligen React? 
React är ett effektivt och flexibelt Javascript bibliotek som används för att bygga användargränsnitt. Enkelt förklarat är ett Javascript bibliotek ett typ av bibliotek som har färdiga funktioner man använder sig utav när man skriver Javascript. Ett bibliotek gör det alltså enklare att skriva komplex kod. Ett annat populärt bibliotek är Jquery och populära frameworks är Vue.js och Angular.

Det är dock en delad åsikt om React är ett framework eller ett Javascript bibliotek. Många säger att det flyter någonstans mittemellan och har suddat ut gränsen mellan ett bibliotek och ett framework. Jag har utgått ifrån vad som står på reactjs.org, där de definierar React som ett bibliotek.  

Så, som nybörjare borde jag lära mig React?
En fundering som lätt uppstår om man är nybörjare är om man ska använda sig av ett framework, Javascript bibliotek eller lära sig vanilla Javascript (som det kallas när man enbart använder ren Javascript) först. Detta var en fråga jag funderade mycket på när jag på egen hand försökte lära mig Javascript. Efter att ha frågar runt och läst artiklar är min slutsats: lär dig gärna grunderna i Javascript först och implementera sedan ett framework eller bibliotek till din kunskapsbank. Anledningen är enkel, kan du grunderna i Javascript kommer du troligtvis ha lättare att förstå och använda olika frameworks och bibliotek, för du förstår grundkonceptet. Även på react.org förespråkas det att först lär sig grunderna i Javascript, innan man ger sig på att använda React. Vissa tycker dock att man kan köra direkt på ett framework, för då kan man troligtvis ge sig på komplex kod snabbare. 

På Boot Campet ingår två sprintar med fullt fokus på React. Vi är nu halvvägs in i den andra sprinten av dessa två. Det är superkul och utmanande, på ett (oftast) roligt vis.  Hittills har vi bland annat gjort en klocka, som man kan pausa och starta igen, en momskalkylator och en radio som hämtar in kanaler från SR:s API.

Här nedan ser ni min klocka som jag skapat:

Vill du veta mer?
Här kommer några lästips:
Lär dig React
Vad är skillnaden mellan ett Javascript bibliotek och ett Framework?
Varför har React blivit så populärt?

Vi är halvvägs!

Det känns otroligt, sex veckor, av tolv, har nu passerat. Det känns som flera månader, samtidigt som det känns som några få dagar. Jag har spenderat (i princip) varje dag sedan i början på mars med att lära mig kod. Nu, när halva tiden har gått har jag smått panik.  Är vi klara och redo för en ny utmaning om bara sex veckor? Ska vi stå på egna ben och göra detta på daglig basis? 

Jag har tänkt tillbaka på dessa veckor och på vad vi har hunnit gå igenom, vad vi har åstadkommit och vad vi har lärt oss. Femton individuella projekt och tre teamprojekt med fokus på HTML, CSS, vanilla Javascript och React. Jag har läst, jag har googlat, jag har lyssnat, jag har förklarat och jag är lärt mig! Jag har lärt mig så otroligt mycket på denna korta period.   Jag trodde knappt det var möjligt innan denna kurs. Det har dock kostat en del blod, svett och tårar för att komma så långt som vi gjort. Man får inte kunskapen gratis. 

Ett effektiv sätt att utvecklas på, som visat sig vara ett perfekt verktyg för mig, är att berätta och förklara för andra. Eller om andra inte finns i närheten, förklara för sig själv! Man måste förstå sin kod in i minsta detalj för att kunna förklara för någon annan så hen förstår. Vilket innebär att du själv måste förstå vad och varför du skrivit din kod på det sättet som du gjort. För tro mig, det finns hundratals olika sätt att skriva kod, som genererar i princip samma resultat. 

För att bearbeta de veckor som gått har vi denna vecka fått påbörja våra portfolios. Det som framöver ska bli fönstret till vår kunskap. För er som inte vet vad en portfolio är så är det (oftast) en hemsida där man visar upp projekt som man gjort via utbildning, jobb eller på sin fritid. Att gå igenom uppgifterna igen och sammanställa dem har hjälpt mig att på något vis bunta ihop allt och samtidigt sortera upp all kunskap, som en typ av repetition. Perfekt timing, såhär halvvägs in i kursen. 

Varje dag är jag lika taggad på ny kunskap, nya utmaningar och nya problem som ska lösas. Och nej, jag ljuger faktiskt inte nu. Kan jag ha hittat mitt drömyrke!? 

Psst.. är du sugen på att ansöka till nästa Boot Camp? 
Ansökan öppnar nästa torsdag, den 19 April.
Läs mer här!

Företagssamarbeten – en inblick i branschen

Tolv veckor, sex sprintar och sex olika samarbeten med företag. Från dag ett, under hela kursen så delas vi in i team och gör projekt åt företag, ett nytt för varje sprint. 

Vi har hittills jobbat med Google, Record Union och nu, Tictail. Tre olika branscher, olika företagskulturer och i varierande storlekar. Variationen mellan de olika företagen känns nyttig. Den matar oss med information om hur det är att jobba som utvecklare på dessa företag och hur olika det kan vara från företag till företag.

Efter vår förra demo hos Record Union

Under en sprint spenderar vi två arbetsdagar på det företag som vi samarbetar med. Vi får lära känna företaget, jobba på våra projekt, få hjälp av duktiga utvecklare, men också få en inblick i hur en arbetsdag ser ut hos dem.

Vi blir bjudna på Lunch hos Tictail 

När vi har kommit i mål med vårt projekt är det dags för demo och code reviews. Båda dessa delar är ett väldigt viktigt inslag i Boot Campet, enligt mig. Genom detta reflekterar vi över projektet, vi lär oss att prata om vår kod och vårt resultat. Detta är en betydande egenskap i ett teach-team, man måste kunna diskutera sin kod och reflektera över vad som var bra och mindre bra. Att dessutom få feedback från riktigt duktiga utvecklare är väldigt givande och utvecklande. 

Philip på Tictail hjälper mig att lösa ett problem i koden

Under sprint 3 samarbetar vi med Tictail. I detta projekt kommer vi bygga en egen webshop genom deras API. Rent tekniskt är fokuset på att jobba med API genom React . Så spännande och roligt! Vi har tillbringat en arbetsdag hos Tictail hitills. Under den dagen lyckades vi komma en bra bit på projektet – allt tack vare deras duktiga utvecklare, som la ner otroligt med energi på att lära och hjälpa oss framåt. 

Att under hela kursen få samarbeta med små, som stora företag känns otroligt positivt! Det ger en tydlig inblick i branschen och hjälper oss att knyta kontaker. Vem vet, ni kanske hittar mig på Google, Tictail eller Record Union i framtiden. 

Två företagsprojekt är klara, ett är under arbete. Vilket betyder att vi har tre to go. Så nyfiken på vilka de andra företagen kommer att vara!

Fantastiska och mirakulösa Javascript

Första veckan med Javascript har nått sitt slut. Funktioner, variabler, arrays, loopar och vad är egentligen ett objekt? Frågorna har varit många och stämningen har stundvis varit låg. Jag förstår, att om man aldrig har sett Javascript innan så är detta överväldigande. Under våra individuella uppgifter har det varit hög koncentration, stundvis bryts tystnaden av ett argt “Nej!” eller ett uppgivet “Va? Varför hände detta?”  Lyckan är dock total när man får något att fungera, då hörs det glädjerop och lättnande suckar. Våra lärare påminner oss minst en gång om dagen om att Javascript har en brant inlärningskurva, men bitarna kommer falla på plats och ni kommer tycka att det är logiskt. Och plötsligt gör bitarna det, det lovar jag!

Karin & Erika är glada över att deras Javascript fungerar som den ska!

När jag sökte till Technigo hade jag redan bra kunskap inom HTML och CSS, även en grundförståelse för Javascript. Jag har haft svårt att på egen hand lära mig tankesättet med Javascript dock, vilka delar ska ligga vart, vilka funktioner ska köras när. Men i slutet på denna vecka så fick jag en “aha-upplevelse”, jag börjar greppa detta. När man får någon typ av förståelse, varesig det handlar om vad en variabel är eller när man använder en array, så är det ren och skär lycka man känner! Det där som jag för några månader, veckor eller dagar sedan inte kunde greppa alls, börjar jag nu förstå. Och då känner man sig så himla grym!

Men vad är egentligen Javascript? 
Javscript är ett objektorienterat skriptspråk som körs direkt i webbläsaren. Med Javascript kan man bygga mer eller mindre komplexa funktioner som modifierar hemsidan eller applikationer när en användare interagerar med den.

En av de individuella uppgifterna denna vecka var att bygga en pizzabot. Den skulle enbart erbjuda tre olika sorters pizzor. Den skulle även räkna ut det sammanlagda priset (80kr styck) och hur lång tid pizzorna skulle ta att tillaga.  Se mitt resultat nedan. 

Sharing is caring! Något som är extremt viktigt när man lär sig något nytt tillsammans med andra är att dela med sig av sin kunskap. Detta är väldigt betydelsefullt inom webbutveckling. Utvecklingen går fort och det kommer hela tiden nya saker att lära sig. I klassen är vi väldigt duktiga på detta. Vi hjälper varandra att utvecklas och nå våra mål, tillsammans. Vi har ett öppet klimat där vi vågar fråga varandra och på det sättet utvecklas och lära oss snabbare.

Tycker du Javascript verkar intressant?
Här kommer några lästips:
W3Schools – Javascript
MDN – Inroduktion till Javascript

Nästa vecka jobbar vi vidare med Javascript. Boot campet har verkligen börjat på riktigt, nu kör vi!

Google – vår första demo

Mitt hjärta bankar, jag är helt torr i munnen. Vi ska om några minuter, presentera vårt första teamprojekt för sex stycken utvecklare på Google. Vi är på Googles kontor i Stockholm, här erbjuds de anställda ett eget gym, restaurang med gratis frukost och lunch, häftiga miljöer och en frihet som många drömmer om. Vår klass har precis fått en rundtur på kontoret och ska nu kliva in i ett mötesrum för att presentera våra projekt och få feedback av erfarna utvecklare. Jag är riktigt nervös, att presentera vår demo på engelska är en stor utmaning för mig.

Vi sätter oss vid det avlånga bordet som fyller nästa hela rummet. Utvecklarteamet presenterar sig, berättar om deras arbete och individuella erfarenheter. De är avslappnade, skämtar och bjuder på sig själva. Atmosfären i rummet är gemytlig och rogivande. Jag blir lugnare, det här kommer nog gå bra trots allt.

Klassen har sedan två veckor tillbaka blivit uppdelade i fyra grupper. Projektet har gått ut på att göra en re-make på en av Googles siter. Fokus ska vara på koden, inte på designen. Utöver individuella uppgifter, lektioner och gästföreläsningar så är det detta vi har jobbat med under de två första veckorna på kursen. Alla grupper har kämpat på hårt och visar upp riktigt bra resultat. Google-teamet verkar tycka detsamma, de är imponerade över vad vi åstadkommit på så kort tid och så tidigt in i kursen.

Nedan ser mitt och min grupps resultat, till vänster är Googles sida, till höger är vår. Självklart är den även responsiv och funkar på alla enheter.

Efter presentationer och code reviews samlas vi på Technigos kontor igen. Stämningen är bra, alla är glada och peppade, vi är nu klara med sprint ett!   Dags för reflektion och uppladdning inför nästa sprint, med nya projekt och en ny demo, för ett nytt spännande företag. Nu med Javascript i fokus. 

Jag är så taggad!  

Följ mig under mina 12 veckor på Technigos Boot Camp

På mattelektionerna i skolan tyckte jag bäst om problemlösning. Ni vet de där uppgifterna där man skulle lista ut varför Anna först hade 6 kakor och sedan, efter ett antal händelser, enbart hade 2 kakor kvar. Detta tror jag, såhär i efterhand, var ett första tecken på att jag skulle börja gilla kod – för jag gillar problemlösning!

Jag bestämde mig innan jul, efter flera års intresse för kod, för att satsa fullt ut och ansöka till Technigos Boot Camp. Tolv intensiva veckor, för att nå en dröm, att blir junior Frontend-utvecklare.

Första veckan, med fokus på HTML och CSS har nu nått sitt slut. Den har inneburit nervositet, skratt, stress, förvirring och glädje. Tolv personer med olika bakgrunder och erfarenheter har tillsammans tagit sig igenom tre individuella uppgifter och påbörjat sina team-projekt som nästa vecka ska presenteras för Google.

En av de individuella uppgifterna denna vecka innebar att skapa ett responsivt nyhetsflöde, det vill säga, ett nyhetsflöde anpassat för alla enheter.   Detta genom att bland annat jobba med Media queries. En viktigt del var också att förstå hur man jobbar med positionering genom CSS. Uppgifterna är anpassade för olika nivåer, då det även finns så kallade streach goals – vilket är perfekt, då vissa av oss är helt nybörjare och andra har erfarenhet sedan tidigare.

Här ser ni ett exempel på hur man kan använda Media Queries:

Det denna kodsnutt gör är att ändra färgen på alla H1:or (titel-element) för olika enheter. Direktöversatt står det: Om enheten är mellan 600px och 900px bred (standard för plattor) så ska alla H1:or vara röda . Om bredden på enheten skulle vara större än 900px (desktop) ska alla H1:or vara gröna.

På den här videon ser ni mitt resultat av uppgiften!

 Vill du lära dig mer om Media Queries?
Här kommer några lästips:
W3Schools – Responsive Web Design
CSS-tricks – Media Queries
MDN – Media Queries

Tjejer Kodar kurser inom HTML och CSS:
Bygg din första hemsida – online kurs
Fokus på frontend i Berlin

Vi hörs igen om en vecka!

Tjejer Kodar är ett initiativ organiserat av Technigo AB.
Org. nr 559051-8030, Asogatan 122, 116 24 Stockholm


© Tjejer Kodar