Författare: Freja Busby

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

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?

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!

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!

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!

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!  

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!