Eleven things I learned while developing my portfolio site

My portfolio site (anders.femtearenan.se) was started as a final project in the Responsive Web Design Certification at freeCodeCamp.org. And as I am doing the Twitter-challenge #100DaysOfCode – it means that every day I’m documenting what I am doing. It took me eleven days from designing through coding and finally having the project live. To celebrate this, here is eleven things I’ve learned during this time:

  1. When you think you’re almost done, it may very well be the half-way point!
  2. JavaScript can be used to add CSS-class to HTML-elements. This is useful if I have an element that I want to toggle when to show as a button is pressed. 
  3. Having a theme helps in designing a website. For this project the theme was “playful and professional”. I think it can be fun to work with opposites like this.
  4. Display: inline-flex can solve a problem where flex makes a whole row a link.
  5. You can animate individual components within an SVG-object with CSS – as long as you include the SVG as a tag of its own (and not as an img-element).
  6. I can be upfront with my mistakes and how I solved them. Documenting it emphasizes learning.
  7. It can be surprisingly easy to call a WordPress API with JavaScript.
  8. Thoroughly is an odd word, but so is queue!
  9. I can spare myself a couple of media queries by having grid-template-columns: repeat(auto-fit, minmax(min, max))
  10. When animating fonts with scale, they can sometimes appear blurry or funky. This one time, I solved it with backface-visibility: hidden
  11. So many people out there are so compassionate and humble about coding and designing.

From prototyping to developing

Introduction

This blog post covers some of the aspects to consider when prototyping a website and then how to set up a process to make that design into production. It is set up with these points in mind:

  • Introduction: what you can expect of this documentation.
  • Prerequisites: what we expect of the reader.
  • Prototyping: before you dive in, know where you are going!
  • Development: okay, now dive in. Maybe.
  • Lessons Learned: how was your swim, how could it be more comfortable?

Congratulations!

Just reading this introduction means that you have considered whether planning ahead is a good idea. Sure, it’s fun to just jump in. But please, make sure there are no sharks beforehand!

A pool with no shark in it.

This time we will do without jumping in, even if it looks safe for now. So let’s look ahead. Prototyping in the context of producing a website means drafting a blueprint for design and user experience. It entails setting up goals, and objectives to achieve those goals. It can cover what technologies are needed.

The objectives guide the development. The clearer and simpler the objectives, the easier it is to make increments to achieve the goals. Sometimes it all comes down to implementing a design with HTML and CSS.

Let’s get started.

Prerequisites

Some things to consider when reading this post are the prerequisites as listed below:

  • Handy with a computer
  • Know the difference between a bug and a feature
  • Knowledgeable in HTML and CSS.
  • Knowledgeable about Adobe XD or similar software for UI/UX design
  • Knowledgeable about the difference between UI and UX.

The documentation is meant to guide you to set up your own processes for prototyping and developing websites. This means that you should be willing to implement these recommendations in a way that suits your business.

Prototyping

The pool is actually a dog's bowls, and the dog has come to drink some.

So if you just thought that sharks is all you have to worry about, think again! Jumping in to the water without a plan might have been an okey idea. But did you consider the scale? Prototyping takes care of what might come as a surprise further down the road if you had not.

A place to start with prototyping is to set up a goal and objectives. A goal could be to have an aesthetically pleasing Personal Website. Objectives to achieve this could be to pick colours and fonts fitting your theme, as well as designing elements and where to put them, and write a presentation.

Having an idea where you want to go, it’s then time to make your design. During this process it’s possible you have to modify your objectives; you may view some objectives in a new light as you work with them.

A popular protoyping software is Adobe XD. It has features to cover designing both a UI as well as UX. Adobe XD makes it easy to design your website for different screens, and so it makes a good foundation for a Responsive Website.

With a prototyping software it’s easy to see where elements go, what sizes they should be and which colours to use. Here’s an example of how a prototype from Adobe XD can look like:

A prototype as an image of a website.

Having a finished prototype, you are then ready to move over to development.

Development

You should now know what elements go into your website. If you haven’t chosen what technologies to use, now is a good time!

Add the elements you need to your first page. At this point, focus on making it semantically consistent and comprehensible. You want your site to meet accessibility demands. A first accessibility demand is to make sure that font size and contrast makes for easy reading. If it does not, go back to the design stage and make it so. But a more subtle accessibility demand is to place elements in a order that makes sense and using the correct element. Let’s reiterate, focus on making it semantically consistent first – choosing an h3 over an h2 because it looks better that way is not!

                    
<h1>This is a heading</h1>
<!-- what's missing? -->
<h3>This is a subheading</h3>
                

After you have your elements in place, take another look over. Is there elements that needs further explanation for any one using screen readers? Are clickable items as clickable as they should be? Are they of right type of element (a button vs a link can mean different things).

Next up, add some style! Having the prototype makes for a better end result – otherwise it is easy to get swept away by all the effects you can implement, or perhaps limit yourself because you can’t imagine how to achieve something. With the prototype at hand you have your objectives. Focus on the big things first. How do you want to control placements? Margins and floats? Flex? Grid? Depending on the demands of your site, a place to start is to work from the top down. In that way you also work with bigger elements before moving down to the details.

body {
    padding: 1em 2em 1em 2em; 
}

main {
    display: flex;
    flex-direction: column;
}

section {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

Having nailed the coding part of the presentation it’s time to focus on what happens with it on different screens. Responsiveness is key! So we’re really not ready to move on from from presentation until we have a site that works well on all supported screens.

Once presentation has been taken care of it’s time to focus on behaviour of the site. What is interactive or dynamic? Will you implement this behaviour with CSS or JS? Here’s a snippet of how to implement a behaviour to indicated where on a page a visitor is by adding a css-class on the item of question:

A good idea is to fetch the elements that are involved in the behaviour to be affected.

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;

Then address what action should activate the behaviour. In this case it’s scrolling:

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');
    }
}

For debugging purposes, console.log() can be included in the changeClass-function.

console.log("Got these y-coordinates... home:" + yHome + 
" science:" + yScience + " about:" + yAbout);
console.log("\n Scroll pos:" + scrollPosY);

You have come a long way at this point, having made a prototype, then added the elements in a semantic relevant way, followed by styling and finalizing with adding behavior.

Lessons Learned

We have covered a lot of ground, very fast, in a logical way that would make the process appear as a one-way street. But of course, it is not! It’s possible at any point to go back to the prototyping phase with the new knowledge gained. At times it can even be that you are working with behaviour and realize that the elements doesn’t make semantic sense in how you want it to behave.

A lessons learned is therefore to leave room for contemplation at any stage. After having made a prototype, take some time off when you don’t look at it. ”Go smell the flowers.” When you come back you should be prepared to see the prototype in a new way and adjust it if need be.

Another lessons learned which is affected by the lesson previously; be humble! It is not probable that the first draft you make, or the first implimentation of it that you do, is going to be the best you can do. It can always be made better.

And a final lesson, which hinges on the first: Set a deadline. Since your project can always be made better, it can become an activity without an end. Having a goal and a set of objectives, be prepared to call it a day when those are met.


Personlig portfölj

Denna vecka är det fortsatt fokus på webbutveckling. Jag går alltså en kurs på freeCodeCamp där jag lär mig om JavaScript och responsiv webbutveckling. Över helgen har jag färdigställt min tekniska dokumentationssida. Jag kommer fortsätta med att göra min personliga portfölj denna vecka.

Den personliga portföljen är raka motsatsen till den tekniska dokumentationssidan. Jag lägger ned mycket vikt vid designen innan jag påbörjar något kodande.

Innan jag påbörjade processen funderade jag på vad är det jag vill ska känneteckna mig som utvecklare? Och svaret var lekfullhet och professionalism, något som vid första anblick kan verka motsägande men som är iögonfallande.

Jag tog sedan och jobbade på en logga som kunde symbolisera detta. Det blev ett antal skisser, och varje iteration tog mig längre ifrån den första. Till slut hade jag följande logga:

Loggan började som ett A som for iväg som en raket. I nästa iteration så ändrade jag tvär-strecket i A:t till en cirkel och raketflamman blev en skarp båge istället. Jag började sedan se att raketen egentligen inte förmedlade det jag ville. Det förmedlade varken min professionalism eller lekfullhet, men jag gillade de enkla dragen i det jag hade jobbat med. Det blev därmed en tvärvändning av vad jag försökte illustrera, men grafiskt så var det mindre förändringar som behövdes. Pricken i A:t flyttade jag ned en liten bit och dubblerade. Raketflamman blev en mindre båge, och helt plötsligt hade jag ett leende där istället. Avslutningsvis fick A:t ett litet avslutande streck, och där var näsan!

När jag nu hade en logga som reflekterade mina värderingar så tog jag nästa steg i utvecklingen av min personliga portfölj. Jag valde en huvudfärg och sedan kompletterande färger. Det jag gjorde var i princip att sätta ihop en enklare mood board.

Faktum är att den översta färgen är den färg som jag tänkte som huvudfärg. Det innebär inte att det är den färgen som kommer användas mest, men där den används kommer den att sticka ut. De andra färgerna ingår i triad med huvudfärgen åtföljt med respektive monokroma komponenter.

Nästa skede har varit att jobba med Adobe XD och placera komponenter och grafik på lämpliga ställen. Det har varit en del fram och tillbaka för att hitta en bra balans mellan elementen och få en helhet som inte är rörig. Jag vill ha något som är enkelt, professionellt och (framförallt) lekfullt! Här är ett utkast för hur jag vill att det ska se ut på mobil:

Som ni kan se så ligger fokus på ”websites”, och jag har arbetat med de andra färgerna i triaden. Ena triaden utgör färg i ikonerna och den sista färgen utgör call to action i ”Learn more”-knappen.

Det har varit väldigt roligt så här långt att göra designen. Nästa steg är att designa hur sidan ska se ut på större skärmar innan jag kan börja koda. Vis av tidigare projekt så har jag kommit fram till att jag kan undvika lite dubbelarbete om jag vet vilka element och CSS-funktioner jag behöver använda vid olika upplösningar.

Det var allt för denna måndagen. På onsdag hoppas jag att jag har kommit igång med kodandet. Annars har jag ytterligare designer att erbjuda. Vi ses då!


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


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!


Att leva med funktioner

Välkommen onsdag! Idag skriver jag om funktionell programmering i JavaScript. I grunden är det koncept som är lätta att ta till sig, och utifrån hur JavaScript kan vara så kan man också lätt förstå varför man borde ta till sig koncepten.

Funktionell programmering sätter funktioner i fokus och dessa ska följa ett antal grundläggande principer. Jag går igenom dem nedan om ni ursäktar att det låter lite svenglish.

Oföränderlighet (immutability)
Detta handlar om att inte orsaka någon förändring på variabler/funktioner utanför funktionens egna ramar. Med detta i åtanke borde funktioner inte förändra de variabler som skickas som argument till funktionen, eller på annat sätt förändra externa/globala variabler. Exempel på funktion som inte följer detta i JavaScript är Array.prototype.push(). Den bryter mot denna princip genom att modifiera den array som funktionen används på. Exempel på en liknande funktion men som följer principen är Array.prototype.concat(). Den kopierar innehållet från den array som åberopar funktionen och lägger till argumenten till den. Sedan returnerar den den nya arrayen utan att ha förändrat originalet.

Oberoende
Funktioner ska vara oberoende från globala variabler eller programmets status. Det kan likna föregående princip med skillnaden att detta handlar intom om funktionens output utan snarare om dess input.

Minimera bieffekter
Funktioner ska vara förutsägbara och begränsade. På så sätt kan man minimera risken för bieffekter och buggar.

I grunden handlar dessa principer om att göra ett lätt överskådligt program utan buggar. Det gör det också lättare att underhålla över tid. Jag förstår att det finns mycket mer att säga om funktionell programmering än så, men så här långt räcker det att förstå de grundläggande principerna. Jag lärde mig detta bara de senaste dagarna och har haft ganska enkelt att implementera principerna i JavaScript. Eftersom JavaScript har haft en historia av att ibland låta oförutsedda saker hända så har dessa principer ofta underlättat. JavaScript är ett ganska enkelt språk som går med på mycket (särskilt innan introduktionen av let och const). Det är därför lätt hänt att man inte har koll på vilka variabler som förändras (mutability). Funktionell programmering är svaret på det.

Det var allt för denna onsdag. Nästa gång jag skriver blir det lite idéspruta; på vilka sätt kan jag använda JavaScript i mina projekt? Det är på fredag, 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!