Amatörutvecklare och entusiast

Från noll till koll

För det egna nöjets skull

Projekt

Bokarenan

Håll koll på vad du läst och vad du vill läsa härnäst. Sprunget ur min vilja att läsa mycket och bevara upplevelserna.

Bakom Femte Arenan

Möt skaparen

Anders Björkland
Anders Björkland
Kodarentusiast

Från bloggen

Fler projekt för lärande

Som jag inledde denna vecka så har jag fullt upp med att göra web-design projekt på freeCodeCamp. I måndags gjorde jag klart min Tribute-sida till Horizon Zero Dawn. När jag gjorde den så såg jag det som en övning i att jobba med grid-areas och animationer.

Bild

Igår gjorde jag klart det andra projektet som var ett undersökningsformulär. Utmaningen med det tyckte jag var att få till en fungerande och okej design. Den går att hitta på femtearenan.se/survey.

Bild

Jag jobbade en del med att få till cirklarna för att bryta upp enformigheten av formuläret. Jag använde mig av position:absolute på dem. Utmaningen var att få cirklarna att stanna kvar på samma ställen när man ändrar storleken på fönstret. Jag fick till det. Jag har däremot upptäckt att den teknik jag har tillämpat har dock visat sig fungerar mindre bra på mobiler. Och detta för mig över till det tredje projektet som jag jobbar med idag.

Idag har jag jobbat med designen på en produktsida för valfri produkt. Jag kommer under kvällen jobba med att implementera designen med HTML och CSS. Med erfarenheten från förra projektet så har jag valt att först få till sidan så att den ska fungera på mobiler (mobile first).

Nu får vi se hur det går att implementera det hela! Det och ett par andra projekt skriver jag om på fredag. Vi ses då!

Att lära sig skillnaden på upp och ned

Den här veckan har jag fokus på web-design och responsiva sidor. Som led i #100DaysOfCode går jag igenom freeCodeCamp:s utbud med fokus på frontend. Jag har 5 uppgifter att genomföra i den kurs som kallas Responsive Web Design.

De 5 uppgifterna, varav den första är påbörjad:

  • Tribute. Jag har valt att göra en hyllning till Horizon: Zero Dawn. Dess aktuella form (f.n. inte klar, 17 februari 2020) återfinns på femtearenan.se/tribute.
  • Survey Form.
  • Product Landing Page.
  • Technical Documentation.
  • Personal Portfolio.

Målet är att få alla fem klara denna vecka. Men för det så behöver jag färdigställa en sida per dag. Jag har fokuserat en del på att använda nya tekniker som jag har lärt mig på den första uppgiften. Förhoppningsvis innebär det att jag lättare kan implementera rätt tekniker på de efterföljande uppgifterna.

Så vad har jag lärt mig då? Framförallt har allt med CSS animation varit nytt för mig. Det har inneburit att jag lärt mig om keyframes, timing, cubic Bezier curves, med mera. Jag har också lärt mig en del om CSS Flex. Med tanke på att jag framförallt har använt mig av CSS Grid så har detta varit nyttigt för mig. Men jag lärde mig trots detta även något nytt om Grid. Det jag lärde mig var att äntligen förstå vilka siffror det är som utgör hur mycket en cell ska uppta av kolumner och rader. Jag har trott att det har haft att göra med hur många kolumner (eller rader) en cell ska uppta (minus ett). Men det visade sig att siffrorna egentligen relaterar till tänka linjer som omger respektive kolumn. Ta första kolumnen som exempel. Den utgörs av linje 1 och 2.

Det var allt för idag. Ni kan fortsätta kolla på tribute-sidan om hur det hela utvecklas. På onsdag har jag tänkt att jag ska kunna presentera uppgift 2 och 3. Vi ses då!

Vad jag vill göra med JavaScript

Denna fredag skriver jag om tänkta projekt där jag kan få användning av JavaScript. Men jag skriver också om att gå tillbaka lite i tiden och repetera HTML och CSS, samt risker med att bara söka på sådant som man just nu försöker göra.

I 10 dagar nu har jag övat med JavaScript utan att egentligen göra något som är direkt relevant för frontend-projekt. Istället har fokus legat på att lära mig syntax och problemlösning. Det kommer nu närmast en vecka då jag repeterar HTML och CSS innan jag återvänder till JavaScript. Under tiden underhåller jag tanken om vad jag kan göra med JS. Här kommer således lite tankar som jag har:

  • AJAX till Bokarenan
  • Statistik med visualisering och enkel linjär regression
  • Masken

AJAX till Bokarenan
Asynchronous JavaScript and XML (AJAX) är användbart om man vill uppdatera en webbsida utan att användaren behöver uppdatera hela sidan på nytt. Istället kan AJAX användas för att uppdatera enstaka element.
Bokarenan finns flera ställen där det kan användas. Det kan handla om att kontrollera om ett användarnamn är upptaget när man registrerar sig. Då behöver inte användaren trycka på Registrera bara för att få ett meddelande att namnet är upptaget och användaren måste välje ett annat.
Ytterligare kan Ajax användas som sökningsförslag, men jag får se hur jag skulle vilja implementera en sådan lösning.
En till idé är att lägga till en omdömesfunktion för recensioner. Då skulle användare kunna visa om de tycker att någon recension var hjälpsam eller rolig. AJAX skulle då kunna uppdatera databaseb i bakgrunden utan att behöva uppdatera webbsidan.

Statistik
Ni som följt min blog ett tag vet att jag haft en viss relation med statistik här. Jag har gått från enklare deskriptiv statistik (med prat om histogram och hypoteser) till prat om chi2-fördelning samt inslag av prediktiv statistik i form av linjär regression. Ett pågående projekt jag har är att dokumentera min vikt före löpturer med olika distans och jämför detta med vikt efter. Med JavaScript kan jag visa ett plottdiagram där viktskillnaden ställs mot distans som jag sprungit. En linjär regressionsanalys skulle nog vara möjlig att göra även det i JavaScript.

Masken
För att spel och programmering är kul! Varför inte göra ett enkelt spel med JavaScript?

Men innan jag fokuserar på något av dessa projekt kommer jag att repetera HTML och CSS utifall att jag missat något grundläggande. Jag har redan hittat saker jag undgått att lära mig tidigare. En sådan sak är CSS variabler. Jag trodde tidigare att detta bara var en sak som fanns i SASS (som har ett slags pseudo-CSS som kan kompileras till CSS). Ytterligare upplever jag att jag bygger på mitt CSS för Bokarenan till en allt mer svåröverskodlig kod och har behov att lära mig att strukturera det hela lite bättre. Så detta är något som jag har missat när jag bara har sökt efter enskilda saker jag vill göra.

Denna veckan har jag gett en snabb överblick på objektorienterad- och funktionell programmering samt en försmak på vad jag skulle vilja använda JavaScript till. Kommande vecka kommer jag fortsätta gå igenom HTML och CSS för att förhoppningsvis förenkla strukturen för Bokarenan samt göra den smidigare att använda på mobiler. Vi får se vad mer jag kommer att ha lärt mig. Trevlig helg, allihopa!