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

regex VS CSS

När jag skrev i onsdags hade jag fått klart prototypen för min Slinky-sida. Det var kul att forma sidan i Adobe XD. Jag fick jobba med snygga färger och kombinera elementen på ett stilrent och enkelt sätt. Sedan ska bara allt ihop implementeras.

Jag hade blivit rik från erfarenheten från tidigare projekt att jag denna gång skulle fokusera på att göra sidan så att den först och främst fungerar på en telefon. Så efter att ha lagt till alla HTML-element så började jag lägga till CSS för att styla sidan med mobil i åtanke. Och det gick relativt bra. Men det var innan jag visste att det är stor skillnad att ha sidan i ett litet fönster (för att imitera en mobil) mot att simulera en mobil. Detta var antagligen den skillnad som hade varit bra om jag hade koll på när jag gjorde mitt föregående projekt.

Av en slump så råkade jag trycka på Toggle Device Toolbar i webbläsarens utvecklarverktyg. Det som hände sedan var att mitt fönster började simulera en mobilskärm. Jag kunde då se att allt det jobb jag hade gjort med CSS för Slinky inte alls skulle passa så bra på en mobilskärm. Det innebar att jag fick göra många justeringar för att få det hela rätt. Men jag fick det rätt till slut!

Nästa utmaning med Slinky-sidan var att jag denna gång skulle ha ett navigationsfält som var fäst vid toppen, och som jag ville uppdara för att indikera var på sidan man var. Om var högst upp skulle Home vara upplyst. Om man sedan scrollade ned en bit så skulle istället Science lysas upp. Jag behövde googla lite grann och fann lösningen. Det handlar om att hämta y-koordinat för där respektive Home– eller Science-avsnittet börjar. Sedan jämföra om den nuvarande scoll-positionen är lika med eller större än den koordinaten. Ytterligare ville jag ta höjd för att y-koordinaten för respektive avsnitt kan ändras om läsfönstret ändras, så därför behöver jag uppdatera den informationen. Min implementering, och källa för inspirationen för att lösa det hela står här nedan:


        let homeLink = document.getElementById("home-link");
        let scienceLink = document.getElementById("science-link");
        let aboutLink = document.getElementById("about-link");
        

        let homeElement = document.getElementById("home");
        let scienceElement = document.getElementById("science");
        let aboutElement = document.getElementById("about");

        let yHome = homeElement.getBoundingClientRect().y;
        let yScience = scienceElement.getBoundingClientRect().y;
        let yAbout = aboutElement.getBoundingClientRect().y;

        // Inspiration from Amanda de Rijk, 2016 (https://www.competa.com/blog/add-a-css-class-on-scroll-with-vanilla-javascript/) [2020-02-20]
        window.onscroll = function changeClass() {
            yHome = homeElement.getBoundingClientRect().y;
            yScience = scienceElement.getBoundingClientRect().y;
            yAbout = aboutElement.getBoundingClientRect().y;

            let scrollPosY = window.pageYOffset | document.body.scrollTop;
            if (scrollPosY < yScience) {
                homeLink.className = ('link-container active');
                scienceLink.className = ('link-container');
                aboutLink.className = ('link-container');
            } else if (scrollPosY < yAbout + 158) {
                homeLink.className = ('link-container');
                scienceLink.className = ('link-container active');
                aboutLink.className = ('link-container');
            } else if (scrollPosY > yAbout + 158){
                homeLink.className = ('link-container');
                scienceLink.className = ('link-container');
                aboutLink.className = ('link-container active');
            }
        }

    

Med anledning av att detta projekt behövde så mycket handpåläggning så tog den lite längre tid än vad jag hade väntat mig. Men sidan är klar och återfinns på femtearenan.se/product/. Hela denna upplevelse fick mig dock att fundera på om inte regex kan vara lite enklare ibland än CSS.

Nu jobbar jag på det tredje projektet som omfattar en teknisk dokumentationssida. Jag kommer inte lägga mycket energi på att designa den, men jag vill få den funktionell. Så ytterligare rikare av erfarenheten från att göra Slinky-sidan så utvecklar jag dokumentationssidan med fokus på mobil i förstahand.

Och eftersom det nu är fredag och vi går mot helg så kommer jag ägna lite tid åt något kul. Denna gång kommer jag ge mig in i Slime Rancher på PS4. Vem vet om jag kommer träffa på Farmaren Frans (känd från mina inlägg om statistik)?

Trevlig helg, allihopa!

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å!