Etikett #100daysOfCode

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!


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


Objektorienterat

Jag avslutade förra veckan med att säga att jag var välbekant med objektorienterad programmering (OO) från Java, och då kan man ju tänka sig att det inte ska vara några konstigheter med OO i JavaScript. Men där hade jag fel!

Denna vecka kommer jag gå igenom objektorienterad programmering i JavaScript och funktionell programmering. Utöver det får vi se vad jag hinner med. Utöver det så har det hänt lite uppdateringar på Bokarenan också. När jag senast lämnade Bokarenan så hade jag uppdaterat den med en funktion så att jag kunde göra nyhetsinlägg som kunde publiceras på inställd tid. Det jag hade missat då var en funktion som inte ville låta mig föra inlägg. Lösningen var att byta ut ett likamedstecken till ett utropstecken. Senaste nyhetsinlägget kan läsas här: https://bokarenan.se/nyheter/post/2020-02-08_Bokarenan_förbättras_med_din_hjälp

Åter till objektorienterad programmering i JavaScript och vad jag har lärt mig från freeCodeCamp. Förvånansvärt lite class användes, men jag har lärt mig om prototypes för att hantera objektgemensamma egenskaper och ärftlighet. Mixins var ett helt nytt ämnesområde för mig. Jag skulle vilja säga att det påminner om interface så som jag känner det från Java, men ändå inte. Mixins kan komma med egna inplementeringar redo att används direkt i de objekt som vill importera dem. En svaghet verkar vara att mixins inte ställer något direkt krav på det objekt som ska använda det, vilket kan göra det enkelt att missa detaljer som en mixin kan vara beroende av. Med andra ord ser jag en risk att sätta en mixin som kräver en viss egenskap på ett objekt som saknar den egenskapen.

Jag har även fått lära mig om Immediately Invoked Function Expression (IIFE). Dessa typer av funktioner exekuteras så fort som de är deklarerade. Tydligen är ett populärt användningsområde för dem att skapa moduler. De skapade modulerna sparas till en variabel för att kunna användas vid ett senare tillfälle. Moduler var också ett nytt koncept för mig och de används för att para ihop funktioner för att sedan kunna åberopas genom den variabel de sparats i. Exempel på en IIFE och en modul med två funktioner:

let mathModule = (() => {
  return {
    add: function(...args) {
      let sum = 0;
      for (let i = 0; i < args.length; i++) {
        sum += args[i];
      }
      return sum;
    },
    average: function(...args) {
      return this.add(...args) / args.length;
    }
  }
})();

console.log(mathModule.add(5, 6));    // prints 11
console.log(mathModule.average(5, 6));// prints 5.5

Nu har jag lärt mig en hel del nya koncept men eftersom jag inte rört så mycket class så räknar jag med att återvända till OO för att lära mig mer.

Det var allt för idag. På onsdag kommer jag beröra funktionell programmering som handlar om att göra funktioner lättare att leva med. Vi ses då!


Här görs det JS.

Denna veckan påbörjade jag #100DaysOfCode samtidigt som jag slängde mig in i JavaScript. Jag har använt mig av en kurs från freeCodeCamp och så här långt har jag hunnit gå igenom följande:

  • Basic JavaScript
  • ES6
  • Regular Expressions
  • Debugging
  • Basic Data Structures
  • Basic Algorithm Scripting

Vad har varit svårast så här långt då? Regex! Regex (regular expressions) handlar om att skapa instruktioner för att hitta mönster. I JavaScript kan man göra enligt följande:

let regex = /\w{1,}/g;
let str = "Words on the screen";
str.match(regex);
// results in ["Words", "on", "the", "screen"]

Då kommer regex användas för att hitta mönster som passar in mot instruktionerna. I exemplet ovan så säger instruktionen att den ska fortsätta kolla igenom hela textsträngen tills den hittar bokstäver (och siffror) i en följd. Det ska ingå minst ett tecken i strängen men inga specialtecken eller mellanslag ska matchas. Ibland har jag trott att jag har haft koll på hur det ska användas, men ofta har det blivit lite av trial and error.

Det som jag har tyckt varit roligast hittils är det avsnitt som kallas för Basic Algorithm Scripting. Det har inneburit mer frihet att komma fram till lösningar själv. En klassiker som kom var att göra en funktion för att beräkna fakultet. Den är ett klassiskt exempel på hur man kan använda sig av rekursion. Min lösning såg ut så här:

function factorialize(num) {
  if (0 === num) {
    return 1;
  } else {
    return num * factorialize(num - 1);
  }
}

Vad rekursion innebär är att funktionen kommer kalla sig själv med ett nummer mindre för varje gång tills numret är lika med 0. Låt oss ta ett exempel:

let product = factorialize(3);

Första steget:

function factorialize(3) {
  if (0 === num) {
    return 1;
  } else {
    return 3 * factorialize(3 - 1);
  }
}

Vi har skickat in 3 till funktionen och kommer ned till att den kallar sig självt med 3 – 1:

function factorialize(2) { 
  if (0 === num) { //fortfarande inte lika med 2
    return 1;
  } else {
    return 2 * factorialize(2 - 1);
  }
}

Som ni kan se så blir det att den åter kallar sig själv tills talet blir lika med 0. 0 fakultet är definierat som 1 och det är detta värde som kommer returneras. Vi kommer då att åter hamna där funktionen åberopades första gången, och sammanfattat ser det då ut så här:

function factorialize(3) {
  if (0 === num) {
    return 1;
  } else {
    //varje parantes motsvarar de gånger som funktionen kallar sig självt: 
    return 3 * (2 * (1 * (1))); 
  }
} 

Funktionen ger svaret att 3! är 6.

Det har varit en rolig vecka, och mycket har också varit tack vare det stödet som jag får från alla på Twitter. Det är många som gör eller har gjort liknande resa som jag själv gör just nu. Även om vi har lite olika uppfattningar om den. Nästa vecka blir det lite objekt orienterad programmering följt av funktionell programmering. Det förstnämnda är jag välbekant med från Java och PHP, men funktionell programmering kommer nog bli något nytt.

Trevlig helg, allihopa!


Från baksida till framsida – dags att lära mig JavaScript

Förra veckan la jag till en nyhetsblogg till Bokarenan som dessutom kom med logisk perma-länk till respektive inlägg. Det finns fortfarande fler funktioner och justeringar som kan göras till hemsidan, men för närvarande riktar jag min blick till JavaScript. Jag vet att det finns de som löser både frontend och backend med JavaScript, men för min del har jag än så länge undvikit det hela på alla sidor. Undantaget är när användare ska manuellt lägga till bokinformation och behöver fler fält om en bok har flera författare. Faktum är att jag vet näst intill ingenting om JavaScript. Nu är det dags att ändra på det!

Denna vecka kommer jag därför att börja lära mig JavaScript. Jag tittar därför på www.freecodecamp.org och ser om deras sätt att lära ut är något för mig. Detta blir det tredje programmeringsspråket jag lär mig. Tidigare har jag lärt mig Java och PHP. Med Java var det inledningsvis böcker som jag använde mig av, för att sedan använda TeamTreehouse. Med PHP började jag också med en bok och försökte sedan med TeamTreehouse igen. Men att lära mig PHP genom Treehouse var inget för mig då. Jag tror att jag började på en för enkel nivå då och blev lite uttråkad. Jag kunde bygga funktionella saker efter den första boken, så att använda officiella guider verkade vara lösningen för mig. Nu går jag alltså in för JavaScript utan att ha läst någon bok innan. Jag är dock väl inläst på de grundläggande detaljerna som är gemensamt för många programmeringsspråk, jag måste dock lära mig dialekten och de finesser som följer med språket.

Upplägget på freeCodeCamp är textbaserad förmedling av information kombinerat med interaktiva test. Det innebär att det finns ett kodar-fönster i samband med informationen där man får försöka klara av olika test. Så här kan det se ut:

Exempel på en sida ur JavaScript-tutorial på freeCodeCamp.org

Som del av att lära mig JavaScript så har jag gått med i gemenskapen #100DaysOfCode. Det innebär ett åtagande gentemot gemenskapen att programmera en timme om dagen i etthundra dagar. För att hålla mig på banan nu när jag ger mig in i ett nytt språk är det bra att få det extra lilla stödet man kan få av varandras pepp.

Vi ses på onsdag, då blir det lite initiala reaktioner på JavaScript. Men nu kör vi!