Webbutvecklingsdagbok (Webbutveckling, 120 hp)

Tjo! Nu kan jag bara tala för mig själv och inte för mina övriga virtuella klasskamrater och deras upplevelser. Jag vet att vissa upplevt utbildningen hittills som "inte särskilt nybörjarvänlig som utbildningens marknadsföringssida verkade ge sken av".

Och som jag pratat med en som läst färdigt utbildningen nu (läste klart år 2 i år) så anser den personen att alla tekniska utbildningar är mer eller mindre inte för alla och därmed kan inte klassas som "nybörjarvänliga". Det måste finnas ett särskilt intresse och viss "medfödd" och/eller "tidigt inlärd" talang. Jag har haft det extremt lätt för mig som jag upplevt det trots att frontend är min Akilles häl (jag suger på det för jag saknar känsla för form, design, osv).

En Webbdesignutbildning hade jag aldrig klarat av för jag hade aldrig klarat av kringliggande grafisk design i program som Photoshop, Illustrator, med flera. Och även om jag hade fått godkänt så hade jag varit helt värdelös att anställa jämfört med andra som redan har mer känsla/talang för design/rita/osv och därmed producerat mycket bättre grafiska resultat i alla sådana slags kurser.

Tur (för mig iaf) var så har utbildningen Webbutvecklingsprogrammet endast fyra frontend-tunga kurser: Webbutveckling I, Webbanvändbarhet, Grafisk teknik för webben, och Webbdesign med CMS. Resten är backend-tunga kurser eller övriga kurser som exempelvis Projektledning.

Så om backend är något du brinner för och/eller har viss fallenhet för (dvs., mycket logik, viss matematik, algoritmiskt & systematiskt tänkande) så kan det vara värt att fundera vidare på. Kom bara ihåg att detta är Universitetet så det är 100% självansvar (ingen lärare kmr pinga eller fråga dig om hur det går eller meddela dig om att det är föreläsning idag - allt sådant måste du hålla koll på själv).

En viss kritik jag har mot utbildningen vilket jag även lämnat i alla kursutvärderingar som ges vid slutet på varje kursavslut är att det saknas föreläsningar eller övrigt läromaterial som visar "hur man lär sig lära sig av referensmaterial/dokumentering inom webbutveckling". Alltså, det saknas instruktioner om hur du ska tolka exempelvis dokumentering om HTML/CSS & JS på webbplatser som Mozilla Developers, W3Schools och så vidare. Sådant hade medfört väldigt mycket mervärde anser jag.

Samtidigt kanske det är ett "fult(?)" sätt att sålla ut folk tidigt i början? Jag skapade Discordgruppen för klassen och första halvåret i utbildningen var det cirka 80+ deltagare, nu är det bara drygt 40+ kvar. Och jag vet att 2 stycken till kommer hoppa av nu i sommar då de kände att utbildningen inte riktigt var för dem.

Till sist: då jag saknar CSN-medel kvar (har läst på universitet 3 år för 10 år sedan) för att kunna ta en till webbutbildning på distans så har jag ej möjlighet att jämföra denna utbildning mot konkurrerande utbildningar vid andra universitet.

Men det jag gjort hittills så känner jag att jag nu äntligen fått lite kött på benen att "på riktigt" börja lära mig CSS, JS, PHP, och deras ramverk då jag nu fått litet hum om grunderna även om det finns lite detaljer här och var (t.ex. Promise-objektet vs Fetch() som fungerar som en Promise) som jag måste få riktigt grepp om!

Jag är tacksam över att jag nött och anammat mig grunderna till viss del än att bara hoppat rakt på Tailwind och ReactJS utan att förstått vad de bygger på. Tailwind är ju ren CSS-kod medan ReactJS är JS i grunden. Och saknar du grunderna så kommer du troligen att köra fast när du väl måste gå in och ändra på detaljnivå i CSS/JS-koden. Så där ser jag ett stort mervärde i att lära sig de till synes tråkiga grunderna i språken innan du hoppar på de goda måltiderna som ramverk, egna webbservrar, och så vidare!

Gillar du backend-kodande inom Webben så kanske denna distansbaserade utbildning är för dig. Om du är riktigt duktig på att vara disciplinerad hemma i ensamhet (för det blir ofta ensamt, iaf i min klass där många verkar vara äldre än mig och/eller inte riktigt nyttjar Discords möjligheter fullt ut såsom röstkanalerna med dela skärm) så kanske också utbildningen är för dig.

Hojta till om du har några detaljfrågor kring utbildningen!

Mvh,
WKL.

Jag skulle inte påstå att det är "avancerad matematik" utan snarare att det är lite matematiskt tänk här och var som exempelvis, "Om X är större än Y så gör detta" vilket är motsvarande kod `if(X > Y) { // Så gör detta...}`. Med andra ord grundläggande algebraisk förståelse.

Visst, om du ska pyssla med cirklar eller liknande som kräver trigonometriska funktioner (exempelvis spelprogrammering) så kan det bli lite klurigt till en början. Men jag siktar inte på att koda ihop webbaserade spel! Fördelen med kodande är att det hela är interaktivt: så du kodar något, du tittar vad som händer, du ändrar i koden, något annat händer nu, och så börjar du själv se mönster och förstå kopplingarna.

Jag har haft det väldigt enkelt för mig men hade mina "huvudet bankandes i väggen" under projektuppgifterna. Jag kan ej tala för andra i den virtuella klassen hur de har haft det. Vissa har kanske haft det svårare och andra kanske lättare. En kurs ser oftast ut så här:

- Du har en särskild undersida med kursens antal Delmoment (mellan 3-5 styck i varje kurs) och 1 Projektuppgift. Projektuppgiften ger dig slutbetyget medan Delmomenten endast ger dig Godkänt eller Kompletteringskrav (så du får Godkänt).

- Varje Delmoment och Projektuppgiften har inlämningsdatum. Men om du missar inlämningsdatumen för delmomenten och/eller projektuppgiften så har du två kompletteringstillfällen för att kunna slutföra kursen med slutbetyg. Du kan fortfarande få högt slutbetyg trots försenad inlämning så länge det är inom deadlines för kompletteringstillfällena. Det är bara att det rättningen dröjer om du inte lämnar in i tid innan kompletteringstillfällena.

- Personligen var jag riktigt lat för jag hade lätt för mig så delmomenten kunde jag ibland göra färdigt på bara en helg. Projektuppgiften i de första kurserna var jag delvis lat i men sedan lade jag ned i alla fall en vecka på de två första. Efter detta insåg jag att jag behövde lägga mer krut på kommande kurser för att inte riskera att halka efter och för att även kunna lära mig något.

- För min del så var det i Projektuppgifterna som jag lade mest krut samt lärde mig mest inom språket kursen avhandlade. Då jag ändå fick slutbetyg så tänkte jag att jag kunde lägga mer tid på det för att få bra betyg samtidigt som jag fick tänja på mina kunskaper inom kodspråket ifråga.

- Du lämnar in allt via Moodle-webben så det är riktigt praktiskt och allt läromaterial, inklusive länkar till inspelade och kommande föreläsningar finns där också. I vissa fall kan det vara obligatorisk redovisning över webben, men det är mer sällsynt än vanligt. Så du kan plugga när du vill i princip.

De två sista kurserna under första läsåret lade jag ned ännu mer tid för jag hade insett i de två kurserna innan att nu började det bli tyngre läromaterial och ville jag lära mig något innan kurserna avslutades så fick jag lägga mer tid på dem. Så då lade jag iaf cirka två veckor (8-10 timmar per dag) på Webbutveckling III-kursens projektuppgift vilket gav toppbetyg och jag pressade mina kunskaper inom JS-språket.

Däremot kursen Webbdesign med CMS (WordPress som CMS) så var det riktig uppförsbacke på grund av all designbit (Figma, usch). Och ja, det är ett varningens finger: Figma är obligatoriskt och utlärandet av det i Webbutveckling I (första kursen i hela programmet) är under all kritik. Riktigt uselt så du kommer behöva lära dig Figma mer eller mindre på helt egen hand.

Det är inte komplicerat när du väl kommer in i det, men det är riktigt tråkigt om du inte är särskilt designintresserad från första början. Så det var tråkigheten som gjorde det trögt för min del, inte det själva tekniska i det!

Personligen valde jag just denna distansutbildning för jag bor i samma stad som universitetet så jag kunde träffa lärarna i person vilket ledde till att jag kunde "gräva ned stridsyxan" med en lärare som i öga mot öga är mycket tillmötesgående men online inte kommunicerar samma pedagogiska känsla - en åsikt vilket fler i den virtuella klassen delade med mig.

I framtiden får jag se om jag tar en anställning (antingen vanlig arbetstid eller som konsult) eller kör vidare via enskild firma vilket bör vara nästan omöjligt i början på grund av bristande arbetslivserfarenhet inom branschen. Och det är en till liten bit: du måste själv under december efter första läsåret (alltså december året efter utbildningens start) börja söka "praktikplats" till Självständiga arbete-kursen. Detta är sista kursen i utbildningen och kanske även blir insteg i arbetslivet om praktikplatsen blev mycket nöjd med ens prestation eller ser stor utvecklingspotential.

Det är väl vad jag kan summera hittills om vad jag känner kring mina kunskaper: Jag känner utvecklingspotential att lära mig mer branschstandardiserade ramverk såsom React, Tailwind, Laravel, m.fl., nu när jag har viss grundläggande förståelse inom HTML, CSS, JavaScript, PHP och MySQL. Jag vill understryka grundläggande förståelse för det är många detaljer här och var som jag inte riktigt kopplat ännu men det kommer med kodnötande, snacka med mer erfarna, och så vidare!

Så utvecklingspotentialen är stor och så länge man kör på den självödmjukheten och självdistansen så kan man bli en Webbutvecklare som väljer det som lämpar sig för en given kund och dess omständigheter istället för att fastna i något kodläger-trams på StackOverflow som "React är det bästa!", "Nej, Svelte är det bästa!", "Ni n0_0bs borde lära er Assembler först innan ni ens kallar er för så kallade 'programmerare'!" och så vidare.

Jag tycker sådan här "Volvo > Fååård"-mentalitet inom programmeringsvärlden är som Baloo i Djungelboken säger: "Störtlöjligt!"

Mvh,
WKL.

WebbKod-MiniProjekt #1 "FrontendingForBackenders"
Jag har börjat med ett litet miniprojekt som jag hoppas ska få till "tillräckligt funktionell nivå" innan nästa skolstart vilket då ska hjälpa mig att snabba på mitt prototypande av fruktansvärd frontend!

Den finns här (rekommenderad upplösning 2560x1440p):
- git clone https://github.com/WebbkodsLarlingen/FrontendingForBackenders...
- https://github.com/WebbkodsLarlingen/FrontendingForBackenders

Kortfattat talat ska det (förhoppningsvis) bli ett simpelt GUI där du kan lägga till och sedan med reglage se hur CSS och HTML samverkar och ändras i realtid än att behöva sitta och mata in alternativen. Ja, även reglage för val av textsträngar som exempelvis, "px", "rem", "em" och så vidare, där du då drar i ett reglage som ändrar det värdet än att

Just nu krigar jag med att förstå mig på replaceWith() för att kunna ta bort föräldraelement samtidigt som dess barn får leva kvar, vilket inte fungerar med `element.remove()`. Alltså ska:

<ul>
  <li></li>
</ul>

Kunna bli:

  <li></li>

Även om det är syntaxfel. Det blir en "Quality of life" att fixa det sedan med varningar om att man håller på att paja HTML-syntaxen. Just nu går det bara att lägga till och ta bort HTML-elementen, samt kopiera HTML- & CSS-koden från ShadowDOM (dock följer dataset-attribut med vilket också blir en fix senare). Imorgon hoppas jag på att åtminstone komma igång med att lägga till och ta bort CSS-regler för valda CSS-selektorer.

Inte lika modulärvänligt som PHP
En annan rolig överraskning var när jag provade börja använda mig av moduler i JS som jag trodde skulle vara lika användarvänligt som `include("file.php")` i PHP. Inte alls. Det kräver ett helt annat tänk eftersom värden blir read-only och du måste tydligen arbeta med muterbara variabler såsom objekt för att kunna ha samma enkelhet som "let variabel = 0;" och nu `variabel++`.

Roligt iaf att det går framåt! Det har också varit lättare denna gång med att hantera scope än att få höra hela tiden om icke-deklarerade variabler pga. fel scope! Rad 33-577 blir också roligt att få in i ett objekt med olika egenskaper om vilka värden de olika "reglagen" för de olika CSS-reglerna ska ha!

Fler Mini-Projekt innan skolstart?
Två andra Mini-Projekt jag funderat på är en om klassiska "Snake" där jag tänkt att själva kroppen som växer är det klurigaste, medan andra vore ett simpelt Webbskrapningsskript som låter en välja " kr" på webbplatser som sedan kan kontrolleras mot lagrade uppgifter för att sedan mejla en om en positiv prisförändring, det vill säga nedsänkt pris på vald vara.

På återseende!

Mvh,
WKL.

---------
✔️(B) HT2022 DT057G Datateknik GR (A), Webbutveckling I, 7,5 hp (distans)
✔️(A) HT2022 DT084G Datateknik GR (A), Introduktion till programmering i JavaScript, 7,5 hp (distans)
✔️(A) HT2022 DT068G Datateknik GR (B), Webbanvändbarhet, 7,5 hp (distans)
✔️(B) HT2022 DT200G Datateknik GR (A), Grafisk teknik för webb, 7,5 hp (distans)
✔️(A) VT2023 DT093G Datateknik GR (B), Webbutveckling II, 7,5 hp (distans)
✔️(C) VT2023 DT003G Datateknik GR (A), Databaser, 7,5 hp (distans)
✔️(A) VT2023 DT173G Datateknik GR (B), Webbutveckling III, 7,5 hp (distans)
🚧(Projektuppgift inlämnad för rättning, kan förbättras om jag vill?!🤔) VT2023 DT197G Datateknik GR (B), Webbdesign för CMS, 7,5 hp (distans)

FireFox kraschar snart och shadowDOM är en besvikelse
Dags att uppdatera och stänga ned FireFox innan webbläsaren exploderar av alla uppdateringar och allt jag pysslat med när jag arbetat en hel del med WebbKod-MiniProjekt #1 "FrontendingForBackEnders".

Det är delvis en besvikelse med shadowDOM när jag upptäckte att ShadowRoot-objektet i sig innehåller all information om parentNode(s) och deras childNode(s). Men så fort du kör QuerySelector(All) på det objektet så får du ingen DOM-information om diverse elements parentNode(s) på grund av det är en shadowDOM?

Därför beslöt jag för att droppa shadowDOM, ShadowRoot och allt som det innebär, och så kör jag på att ändra CSS under ett givet div-element: `FEFBEoutput`. Just nu är det `selector = "#FEFBEoutput *:is(" + selector + ")";`-koden som gör det magiska med att kunna applicera CSS på vanliga element (ej klasser och id:n) under `FEFBEoutput`-div-elementet.

Jag förstår inte riktigt varför det fungerar så bra än så länge som det gör. Först provade jag `FEFBEoutput *`-selektor men den klarade inte av första elementet under sig utan endast resterande. Men vart det kommer att sluta någonstans är nog "tvång" på klasser och id:n för allt vilket kommer bli en TailwindCSS-röra av det hela antar jag!

WebbKod-MiniProjekt #1 går framåt trots allt!
Trots bakslagen så går det framåt och jag har "renoverat" hela filstrukturen nu med bättre separerade filer och jag har fått koll på "Modules"-tänket med JS. Jag lagrar exempelvis globala variabler i ett const-objekt och det kan användas överallt där det inkluderas utan att det verkar nollställa sig.

Jag kom även på i efterhand att jag kan markera senast tillagt element med grön färg runt Fieldset-elementet och så ska jag implementera att klick på andra icke-gröna Fieldset-element gör de gröna vilket då "markerar" var nästa elementinsättning ska ske. Då ska bara alla varianter av insättningar fixas: före & efter förälder-, barn- och syskonelement.

Sedan kommer nästa stora mustiga skede: fixa CSS-fliken där reglage kommer användas för att välja olika val (flex-start, middle, flex-end, osv.) såväl som värden (1px, 2px, 3px, osv.) och enheter (px, rem, em, osv.).

Även om det skulle visa sig vara ett riktigt "bajs-projekt" i slutändan ur ren funktionalitet även om jag hoppas på att kunna få verklig pragmatisk nytta av den så har jag lärt mig en del om modultänket och även färre scope-misstag med variabler.

Nu stänger jag FireFox och startar om datorn!

(Ja, ny commit finns på GitHub!)

På återseende!

Mvh,
WKL.

---------
✔️(B) HT2022 DT057G Datateknik GR (A), Webbutveckling I, 7,5 hp (distans)
✔️(A) HT2022 DT084G Datateknik GR (A), Introduktion till programmering i JavaScript, 7,5 hp (distans)
✔️(A) HT2022 DT068G Datateknik GR (B), Webbanvändbarhet, 7,5 hp (distans)
✔️(B) HT2022 DT200G Datateknik GR (A), Grafisk teknik för webb, 7,5 hp (distans)
✔️(A) VT2023 DT093G Datateknik GR (B), Webbutveckling II, 7,5 hp (distans)
✔️(C) VT2023 DT003G Datateknik GR (A), Databaser, 7,5 hp (distans)
✔️(A) VT2023 DT173G Datateknik GR (B), Webbutveckling III, 7,5 hp (distans)
🚧(Projektuppgift inlämnad för rättning, kan förbättras om jag vill?!🤔) VT2023 DT197G Datateknik GR (B), Webbdesign för CMS, 7,5 hp (distans)

CopyCSS fungerar klockrent!
Jag har nu fått till `CopyCSS`-funktionen så den kan hämta alla CSS-regler och sedan filtrera ut den särskilda delen i varje selektor:

#FEFBEoutput :is(<keep this real selector here>) { <All CSS code for that real selector>}

Jag hade först:

#FEFBEoutput *:is(<true selector>)

Men jag såg sedan att * togs bort vilket gjorde att den ej kunde uppdatera varje gång jag satte in CSS-regel till samma selektor för det stod:

selector = "#FEFBEoutput *:is(" + selector + ")";

När det ändrades till:

selector = "#FEFBEoutput :is(" + selector + ")";

Så var allt frid och fröjd igen. Ett tecken som gjorde all skillnad!

"Enligt chatGPT3.5" så behövs :is()-selektorn för att kunna inkludera flera selektorer inuti den så när jag sedan filtrerar ut så kommer de att fungera precis som vanligt:

/* Före filtrering */
#FEFBEoutput :is(p, main) {}

/* Efter filtrering */
p, main {}

/* Annars hade det behövts: */
#FEFBEoutput p,
#FEFBEoutput main {}

Och sistnämnda hade varit mycket krångligare att regexa ut för filtrering.

Event Delegation eller inte - det är frågan?
Jag läste idag på något om vid namn "Event Delegation" där tanken är att du slänger på en fet händelselyssnare på större föräldraelement istället för varje litet barnelement för att minimera antalet händelselyssnare som skapas och därmed minnesmängden och potentiella prestandaförluster.

Det verkar finnas delade meningar kring detta och fråga när hur många händelselyssnare som hanterar DOM-manipuleringar som behövs innan det börjar ta ut sin rätt på exempelvis mobila användare? Å andra sidan är GUI:t inte ett dugg anpassat för mobila användare dock!

Jag hade faktiskt för någon vecka sedan funderat på "Vad skulle hända om man bara lyssnade på hela sidan och sedan kollade vad det var för något man klickade på?" Som tur var är då lösningen `event.target.matches(css-selector)`vilket passar perfekt med min övriga struktur där exakt alla element har `data-XXX=värde`-attribut.

Fick ej till <iframe> med konstruerat new CSSStylesheet()-objekt
Igår upptäckte jag att #document är något som automatiskt skapas inuti varje <iframe>-element och jag tänkte att jag skulle kunna använda mig av det kombinerat med ett egetkonstruerat CSSStylesheet();-objekt. Men icke sa nicke; det blev som så att även om jag hittade CSSStylesheetet inuti HTMLDocument via DOM Properties så kunde JS ej avläsa och på så vis lagra HTMLDocument.Stylesheets[0] (och då pratar vi alltså inte om document.stylesheets[0] utan den HTMLDocument som finns inuti <iframe>-elementet). Jag provade då två olika CSS-filer där jag då ville anknyta inuti <head>-elementet till det andra HTMLDocument-objektet, men det fungerade inte som sagt.

"Enligt chatGPT3.5" så kanske det rör sig om att separata CSS-filer läses in asynkront och därmed kan JS - i alla fall som jag kodat det - ej läsa av HTMLDocument-objekte inuti <iframe>-elementet i tid. Men det är superskumt, för jag kan konsollogga <iframe>-elementets HTMLDocument och då hitta CSSStylesheets-egenskapen och dess längd på 1 med [0] som är andra CSS-filen, klart och tydligt. Men om jag i samma JS-fil konsolloggar HTMLDocument.Stylesheets[0] precis efter så blir det `undefined`.

Superskumt och det visar bara på att jag inte riktigt "på djupet" förstår vad jag håller på med vilket är varför jag, ursäkta uttrycket nu, inte vill kalla mig för "(mjukvaru)ingenjör" (än). Jag är mer "snickare": jag kan "kodsnickra" ihop något så att det funkar i de flesta fallen. Men jag har inte samma djupa förståelse som en kanske "byggnadsingenjör" har för vad jag "kodsnickrat" ihop. Jag är helt klart sotis på de som är riktiga (mjukvaru)ingenjörer i både sin förståelse och i sitt "kodsnickrande".

Men det var hursomhelst roligt att få delvis fördjupa sig mer i HTML DOM-objekten som finns och få stöta på nya utmaningar, problem och så. En ny commit finns uppe på GitHubben där "Copy CSS"-knappen nu kan kopiera CSS-koden samtidigt som den filtrerar bort min specialselektor i varje CSS-snutt. Tanken är att när man kopierat CSS-koden så kommer den att fungera precis som om du skrivit CSS-kod från scratch och du ska även kopiera innerHTML som om den inte fanns under <div id="FEFBEoutput"> utan under en vanlig <body>.

På återseende!

Mvh,
WKL.

---------
✔️(B) HT2022 DT057G Datateknik GR (A), Webbutveckling I, 7,5 hp (distans)
✔️(A) HT2022 DT084G Datateknik GR (A), Introduktion till programmering i JavaScript, 7,5 hp (distans)
✔️(A) HT2022 DT068G Datateknik GR (B), Webbanvändbarhet, 7,5 hp (distans)
✔️(B) HT2022 DT200G Datateknik GR (A), Grafisk teknik för webb, 7,5 hp (distans)
✔️(A) VT2023 DT093G Datateknik GR (B), Webbutveckling II, 7,5 hp (distans)
✔️(C) VT2023 DT003G Datateknik GR (A), Databaser, 7,5 hp (distans)
✔️(A) VT2023 DT173G Datateknik GR (B), Webbutveckling III, 7,5 hp (distans)
🚧(Projektuppgift inlämnad för rättning, kan förbättras om jag vill?!🤔) VT2023 DT197G Datateknik GR (B), Webbdesign för CMS, 7,5 hp (distans)
🚧 (Inväntar registreringstillfälle) HT2023 IK060G Informatik GR (A), Projektledning
🚧 (Inväntar registreringstillfälle) HT2023 DT193G Datateknik GR (B), Fullstack-utveckling med ramverk

Konsten att delegera händelser
Det går nu att klicka/välja från vilket HTML-element som nästa ska sättas in utifrån. Dock är det endast som syskon- eller barnelement och det går ej att sätta in HTML-element som ett syskon till ett föräldraelement som har barnelement.

Jag tror att `insertAdjacentElement()` kommer att kunna nyttjas här. Jag kom även på att jag behöver ha samma "gröna markering" där man sätter in element som i `OUTPUT` där all "färdig HTML- & CSS-kod" renderas. Självfallet blir detta osynligt genom ett `data-name`-attribut.

En annan förbättring är att nu används så kallad Event Delegation där både HTML- & CSS-flikarna lyssnar efter vänstra musklick och/eller RETUR-tangenter. Sedan beroende på om detta är inuti ett särskilt fält så sker en särskild ändring i det förknippade elementet under `OUTPUT`. Detta fungerar även om själva elementet i HTML-fliken inte är "grönmarkerat".

Skulle ett grönmarkerat element under HTML-fliken raderas så går det ej att lägga till ett nytt element (så tillvida inte det är det första i listan) förrän ett nytt har markerats genom att klicka på dess `legend`-element (texten där det står "Element #<Number>: <HTML tag>").

En tredje förbättring är att JS-modulfilerna exporterar objekt med alla funktioner inbakade där än att jag ska behöva uppdatera för varje tillagd funktion att exportera och importera i JS-huvudfilen. Den modulära biten av JS diggar jag!

Det som tar mest tid: att förhindra/hantera användarfel
Just nu, likt många av JS-skolprojektuppgifterna, så är det som tar mest tid för mig att koda är hanteringen av användarfel, vare sig de är med flit eller ej. Exempelvis ska det hanteras om du skriver ett id med # eller en klass med . vilket inte behövs när det är attribut och inte selektorer. En annan sak som ska hanteras är vad som händer när du skrivit in något och sedan skriver tomt som om du vill ta bort det. Attributvärdet försvinner men inte själva attributet i elementet i `OUTPUT`.

En annan kluring är fältet "Other" vilket tillåter valfria attribut. Men vad händer när du tömmer denna? Just nu ingenting. Men den bör då ta bort dessa attribut, men att ta bort alla attribut får ej göras för jag har `data-elementid` attribut som håller koll på vilket HTML-element i `OUTPUT` som är vilket i HTML-elementen under HTML-fliken.

Jag kom nu på en lösning i samband med detta skrivande: ett nytt `data-storedOthers=attr1,attr2,attr3` och så vidare som då lagrar alla dessa. När jag då tömmer "Other"-fältet (tar bort all text och trycker RETUR) så kan den då ta bort alla attribut utifrån arraylagrade listan i `data-storedOthers` och sedan tas den också bort så att den kan skapas på nytt vid nästa tillfälle. Den uppdateras även om man skulle skriva in färre "övriga attribut" som ska lagras för det givna HTML-elementet under `OUTPUT`.

Användningen av `dataset` används flitigt i detta "WebbKod-MiniProjekt" och vad jag sett på någon video på YT så verkar unika `key={}` vara något ReactJS använder för att hålla koll på att uppdatera rätt element vid `RenderDOM()`? 🤔

På återseende!

Mvh,
WKL.

---------
✔️(B) HT2022 DT057G Datateknik GR (A), Webbutveckling I, 7,5 hp (distans)
✔️(A) HT2022 DT084G Datateknik GR (A), Introduktion till programmering i JavaScript, 7,5 hp (distans)
✔️(A) HT2022 DT068G Datateknik GR (B), Webbanvändbarhet, 7,5 hp (distans)
✔️(B) HT2022 DT200G Datateknik GR (A), Grafisk teknik för webb, 7,5 hp (distans)
✔️(A) VT2023 DT093G Datateknik GR (B), Webbutveckling II, 7,5 hp (distans)
✔️(C) VT2023 DT003G Datateknik GR (A), Databaser, 7,5 hp (distans)
✔️(A) VT2023 DT173G Datateknik GR (B), Webbutveckling III, 7,5 hp (distans)
🚧(Projektuppgift inlämnad för rättning, kan förbättras om jag vill?!🤔) VT2023 DT197G Datateknik GR (B), Webbdesign för CMS, 7,5 hp (distans)
🚧 (Inväntar registreringstillfälle) HT2023 IK060G Informatik GR (A), Projektledning
🚧 (Inväntar registreringstillfälle) HT2023 DT193G Datateknik GR (B), Fullstack-utveckling med ramverk

I kommande kursen: "HT2023 DT193G Datateknik GR (B), Fullstack-utveckling med ramverk" har jag fått reda på att det är just Vue som lärs ut som förvalt ramverk av lärarna!

ReactJS har sitt "community" och därmed sitt stora utbud av "stödbibliotek", men för övrigt av vad jag har sett så verkar bland annat Svelte (och säkert många andra) mycket trevligare att använda sig av vad gäller "lajvuppdateringen" av data på frontenden!

Mvh,
WKL.

chatGPT3.5 lär mig refactoring!
För närvarande har jag följande kod som används i "HTML"-fliken:

  // Listen for "ENTER" presses inside of "HTML" Tab
  htmlTab.addEventListener("keyup", (e) => {
    e.preventDefault();
    // Only execute code after pressed Enter
    if (e.key !== "Enter" || e.keyCode !== 13) {
      return;
    }
    // output, correctid, correctinput = used by all if statements below
    const correctid = e.target.dataset.belongstoelementid;
    const correctinput = e.target.value;
    const output = document.getElementById("FEFBEoutput");
    const correctoutputel = output.querySelector(
      `[data-elementid="${correctid}"]`
    );

    // Pressed ENTER inside of an `class` input field?
    if (e.target.matches("[data-classid]")) {
      if (e.key === "Enter" || e.keyCode === 13) {
        // Remove attribute when empty
        if (correctinput == "") {
          if (correctoutputel.hasAttribute("class")) {
            correctoutputel.removeAttribute("class");
          }
          return;
        }
        // Otherwise add it
        Functions.elAttr(
          output.querySelector(`[data-elementid="${correctid}"]`),
          "class=" + correctinput
        );
        return;
      }
    }

Som det syns i `if(e.target.matches("[data-classid]")` så lyssnar den efter RETUR-tryck och då agerar med kod för att uppdatera diverse singelattribut inuti valt HTML-element som syns under `OUTPUT`. Jag upptäckte att jag gör samma sak med id, class, href, och src vilket betyder att jag kunde ha gjort en mer abstrakt funktion av detta.

Jag bad chatGPT3.5 att refaktorisera och den gav mig delvis fungerande kod men ändå också många brister som att exempelvis referera till objektegenskaper som inte finns i min nuvarande kodstruktur. Hursomhelst så "fattar" jag ju mer JavaScript idag än för snart ett år sedan när distansutbildningen började.

Jag kombinerade chatGPT3.5s kodförslag med min egen vilket gav det nya resultatet("singleAttributesHTMLTab" ligger i variables.js och är utexporterad):

// "singleAttributesHTMLTab" used by input fields "id","class","src","href" since they
//  have exact same control flow to change/add/remove them from chosen HTML elements.
const singleAttributesHTMLTab = {
  id: "id",
  class: "class",
  href: "href",
  src: "src",
};

 // Listen for "ENTER" presses inside of "HTML" Tab
  htmlTab.addEventListener("keyup", (e) => {
    e.preventDefault();
    // Only execute code after pressed Enter
    if (e.key !== "Enter" || e.keyCode !== 13) {
      return;
    }
    // output, correctid, correctinput = used by all if statements below
    const correctid = e.target.dataset.belongstoelementid;
    const correctinput = e.target.value;
    const output = document.getElementById("FEFBEoutput");
    const correctoutputel = output.querySelector(
      `[data-elementid="${correctid}"]`
    );

    // Find and change attributes:"data-idid","data-classid", "data-hrefid", "data-srcid"
    // It does NOT work with "Other", "textContent" or "innerHTML"
    if (
      e.target.matches(
        `[data-attributetype="${
          singleAttributesHTMLTab[e.target.dataset.attributetype]
        }"]`
      )
    ) {
      // Pressed ENTER inside of an `id`,`class`,`src`,`href` input field?
      if (e.key === "Enter" || e.keyCode === 13) {
        // Remove attribute when empty
        if (correctinput == "") {
          if (correctoutputel.hasAttribute(e.target.dataset.attributetype)) {
            correctoutputel.removeAttribute(e.target.dataset.attributetype);
            console.log("Special function did it!");
          }
          return;
        }
        // Otherwise add it
        Functions.elAttr(
          output.querySelector(`[data-elementid="${correctid}"]`),
          e.target.dataset.attributetype + "=" + correctinput
        );
        console.log("Special function did it too!");
        return;
      }
    }

Hela denna kodoptimering/refactoring raderade bort cirka 40 rader kod samtidigt som det tvingade mig att tänka mer abstrakt och även följa DRY-tänket. Abstraktionen möjliggör även att lägga till ytterligare singelattribut i objektet utan att behöva ändra särskilt mycket i övrig kod.

På detta vis uppskattar jag verkligen chatGPT3.5, för det är nästan bättre att jag får inkompletta/icke-riktigt fungerande kodsvar eftersom då måste jag improvisera utifrån "kodledtrådarna" som jag fått och på så vis faktiskt "fatta kodande" för att verkligen få någon nytta av chatGPT3.5.

En annan fördel är att det också förbereder mig inför att läsa andras förhoppningsvis ännu mera abstrakta kod i takt med att man hoppar på diverse JavaScript-ramverk som verkligen inte visar "vad som pågår utan ytan"!

Följande kodoptimering gjorde jag själv idag:

  // Listen for "ENTER" presses inside of "HTML" Tab
  htmlTab.addEventListener("keyup", (e) => {
    e.preventDefault();
    // Only execute code after pressed Enter
    if (e.key !== "Enter" || e.keyCode !== 13) {
      return;
    }
    // output, correctid, correctinput = used by all if statements below
    const correctid = e.target.dataset.belongstoelementid;
    const correctinput = e.target.value;
    const output = document.getElementById("FEFBEoutput");
    const correctoutputel = output.querySelector(
      `[data-elementid="${correctid}"]`
    );

Då jag upptäckte att, "Ja just det, kollar jag inte efter RETUR så låter jag varje övrigt knapptryck att deklarera om variablerna vilket är bara prestandaineffektivt!" Så nu förhindrar jag alla övriga knapptryck från att få köra resten av händelselyssnaren eller "händelsedelegeringen" så att säga när det inte är RETUR-knappen.

Detta var bara en "snabbuppdatering". Kommer en ytterligare senare ikväll eller inatt!

På återseende!

Mvh,
WKL.

---------
✔️(B) HT2022 DT057G Datateknik GR (A), Webbutveckling I, 7,5 hp (distans)
✔️(A) HT2022 DT084G Datateknik GR (A), Introduktion till programmering i JavaScript, 7,5 hp (distans)
✔️(A) HT2022 DT068G Datateknik GR (B), Webbanvändbarhet, 7,5 hp (distans)
✔️(B) HT2022 DT200G Datateknik GR (A), Grafisk teknik för webb, 7,5 hp (distans)
✔️(A) VT2023 DT093G Datateknik GR (B), Webbutveckling II, 7,5 hp (distans)
✔️(C) VT2023 DT003G Datateknik GR (A), Databaser, 7,5 hp (distans)
✔️(A) VT2023 DT173G Datateknik GR (B), Webbutveckling III, 7,5 hp (distans)
🚧(Projektuppgift inlämnad för rättning, kan förbättras om jag vill?!🤔) VT2023 DT197G Datateknik GR (B), Webbdesign för CMS, 7,5 hp (distans)
🚧 (Inväntar registreringstillfälle) HT2023 IK060G Informatik GR (A), Projektledning
🚧 (Inväntar registreringstillfälle) HT2023 DT193G Datateknik GR (B), Fullstack-utveckling med ramverk

HTML-fliken snart i beta-stadiet
Det går framåt och HTML-fliken är för det mesta "färdig" att kunna klassa den i beta-stadiet. Jå, inget blir någonsin färdigt, men "tillräckligt färdigt" skulle jag åtminstone säga. Den kan nu lägga till HTML-element där och i OUTPUT på ett relativt konsekvent sätt.

Den fungerar som så att antingen kan man lägga till längst ned i OUTPUT-elementet (som att lägga till längst ned i ett body-element), eller så kan man välja att lägga före eller efter ett syskonelement, i början av ett föräldraelement (alltså före första barnelementet) eller efter sista barnelementet, eller bli "förälder" och påbörja en ny HTML-nivå.

Jag ska nog ta en vända till på if-satserna som sköter hur element ska föras in i OUTPUT:

    // Now check whether any elements exists first at all
    if (output.firstChild == null) {
      addMethodList.selectedIndex = 0;
      output.append(createEl);
      // Set what is current active output element so it is consistent with the greenlighted one in the HTML Tab.
      createEl.setAttribute("data-outputcurrentactive", "yes");
    } // Grab the last item no matter its level using querySelectorAll data-elementid and reduce it down to the largest id number
    else {
      const currentActiveOutputElement = document.querySelector(
        "[data-outputcurrentactive='yes']"
      );
      if (appendType == "root") {
        output.append(createEl);
      }

      if (appendType == "siblingafter") {
        currentActiveOutputElement.after(createEl);
      }

      if (appendType == "siblingbefore") {
        currentActiveOutputElement.before(createEl);
      }

      if (appendType == "appendFirst") {
        currentActiveOutputElement.insertAdjacentElement(
          "afterbegin",
          createEl
        );
      }

      if (appendType == "appendLast") {
        currentActiveOutputElement.append(createEl);
      }

      // Then switch which is Current Active OUTPUT Element!
      createEl.setAttribute("data-outputcurrentactive", "yes");
      currentActiveOutputElement.removeAttribute("data-outputcurrentactive");
    }

Element.after() och Element.before() fungerar ju prima för syskonelement, men det är just - som vanligt - när man provar att göra fel med flit som det kan bete sig buggigt/felaktigt och därmed bör jag kontrollera efter föräldraelement, syskonelement och liknande så det blir svårare att göra fel för slutanvändaren.

Jag ska också se om jag kan få in dynamiska `margin-left` för alla fieldset-element så det ger en viss DOM-hierarki som inte framgår i HTML-fliken överhuvudtaget och vilket förvirras ytterligare när numren visas i fel ordning på grund av hur man satt in elementen som.

Smakprov på den hemska frontended för WebbKod-Mini(?)Projektet: "FrontendingForBackenders":

Alla fält kan uppdatera elementet ifråga genom att trycka på RETUR då jag inte har implementerat spara-knappen (gröna) ännu för elementen inuti händelsedelgeringen för HTML-fliken. Det tar sig, samtidigt som det också stundtals känns typ: "Jag kommer ju aldrig upp i WordPress Elementor Pros nivå precis, så varför ens kämpa?!" 🤔

Jag undrar också hur "dålig" jag egentligen är ibland eftersom jag sitter nu flera timmar per dag - utan någon "KK" (=Kodkompis utan fördelar) på "fritiden" och vissa verkar ju ändå jobb trots att de bara klarat kurserna men inte kodat något på fritiden? Nåja, lite roligt är det iaf när man väl börjar komma någonvart!

På återseende!

Mvh,
WKL.

---------
✔️(B) HT2022 DT057G Datateknik GR (A), Webbutveckling I, 7,5 hp (distans)
✔️(A) HT2022 DT084G Datateknik GR (A), Introduktion till programmering i JavaScript, 7,5 hp (distans)
✔️(A) HT2022 DT068G Datateknik GR (B), Webbanvändbarhet, 7,5 hp (distans)
✔️(B) HT2022 DT200G Datateknik GR (A), Grafisk teknik för webb, 7,5 hp (distans)
✔️(A) VT2023 DT093G Datateknik GR (B), Webbutveckling II, 7,5 hp (distans)
✔️(C) VT2023 DT003G Datateknik GR (A), Databaser, 7,5 hp (distans)
✔️(A) VT2023 DT173G Datateknik GR (B), Webbutveckling III, 7,5 hp (distans)
🚧(Projektuppgift inlämnad för rättning, kan förbättras om jag vill?!🤔) VT2023 DT197G Datateknik GR (B), Webbdesign för CMS, 7,5 hp (distans)
🚧 (Inväntar registreringstillfälle) HT2023 IK060G Informatik GR (A), Projektledning
🚧 (Inväntar registreringstillfälle) HT2023 DT193G Datateknik GR (B), Fullstack-utveckling med ramverk

Mysteriet med den glömda if-satsen

Ovanstående visar hur HTML-elementen lägger sig när de läggs till. Även om det visar sig att "webbapplikationen" blir verkligen "meh" jämfört med Webflow och Elementors Pro så blir det ändå matnyttigt kodande med DOM och liknande.

Idag hade jag bekymmer med att hitta en rad som behövde en if-sats för att inte bugga sönder webbläsaren till den grad att webbläsaren beslöt sig för att radera HTML-elementet helt och hållet vilket då kraschade mitt skript till slut:

// Save all HTML input fields in "HTML" Tab:
  saveElShadowAndTab: function (e, id) {
    // Grab all their input fields
    const allInputFieldsForCorrectId = document.querySelectorAll(
      `input[data-belongstoelementid="${id}"]`
    );
    // Also grab correct output element
    const correctOutputElement = document.querySelector(
      `[data-elementid='${id}']`
    );

    // Loop through and apply differently
    allInputFieldsForCorrectId.forEach((input) => {
      // Ignore these two for now because they need separate code¨
      if (
        input.dataset.attributetype != "other" &&
        input.dataset.attributetype != "textContent"
      ) {
        // Then apply values for the `src`,`id`,`class`,`alt` & `href` attributes...
        if (input.value != "") {
          // But first check that they are not reserved
          if (
            !reservedClasses.includes(input.value) &&
            !reservedIds.includes(input.value)
          ) {
            correctOutputElement.setAttribute(
              input.dataset.attributetype,
              input.value
            );
            Functions.showMsg(input, "Updated!");
          } else {
            Functions.showMsg(input, "Reserved attribute. Not updated!", 3000);
          }
        } else {
          // ...or just remove them if they exist if input is empty!
          if (correctOutputElement.hasAttribute(input.dataset.attributetype)) {
            correctOutputElement.removeAttribute(input.dataset.attributetype);
            Functions.showMsg(input, "Attribute removed!");
          }
        }
      }
      // Set new textContent or else empty it for correct Output Element
      if (input.dataset.attributetype == "textContent") {
        if (input.value != "") {
          correctOutputElement.textContent = input.value;
          Functions.showMsg(input, "Text updated!");
        } else {
          correctOutputElement.textContent = "";
          Functions.showMsg(input, "Text removed if it existed!");
        }
      }
      // LAST Thing to do so we can use return; to jump out of
      // the forEach loop while still executing the rest of the function.
      // Update or set new "Other" attributes
      if (input.dataset.attributetype == "other") {
        if (reservedAttributes.includes(input.value)) {
          Functions.showMsg(input, "Reserved attribute. Not updated!", 3000);
          return;
        }
        if (input.value.includes("data-")) {
          Functions.showMsg(
            input,
            "Data attributes Not Allowed. Not updated!",
            3000
          );
          return;
        }

        // Clear list of other attributes when empty
        if (input.value == "") {
          if (correctOutputElement.hasAttribute("data-storedothers")) {
            const otherattrs = correctOutputElement.dataset.storedothers;
            const otherattrsArr = otherattrs.split(",");
            const l = otherattrsArr.length;
            for (let i = 0; i < l; i++) {
              correctOutputElement.removeAttribute(otherattrsArr[i]);
            }
            correctOutputElement.removeAttribute("data-storedothers");
            return;
          }
          Functions.showMsg(input, "Other attributes removed!", 3000);
          return;
        }

        // Insert list of other attributes when not empty
        if (input.value != "") {
          // First check if previous ones existed and just "reset" things to insert new ones.
          if (correctOutputElement.hasAttribute("data-storedothers")) {
            const otherattrs = correctOutputElement.dataset.storedothers;
            const otherattrsArr = otherattrs.split(",");
            const l = otherattrsArr.length;
            for (let i = 0; i < l; i++) {
              correctOutputElement.removeAttribute(otherattrsArr[i]);
            }
          }
          // Change its other attributes of `data-elementid`
          const output = document.getElementById("FEFBEoutput");
          Functions.elAttrOther(
            output.querySelector(`[data-elementid="${id}"]`),
            input.value
          );
          Functions.showMsg(input, "Other attributes updated!", 3000);
          return;
        }
      }
    });
    // Show message after done
    setTimeout(() => {
      Functions.showMsg(e, "All fields processed!");
    }, 1500);
  },

Raden som behövs för att inte krascha är:

if (input.dataset.attributetype == "other")

Den kontrollerar om inmatningsfält som ligger i forEach-loopen är "other" vilket då ska skapa en array av inmatningsvärdet och skicka vidare till en loop()-funktionsvariant av `Element.setAttribute()`.

På grund av att jag missade detta så kunde föregående inmatningsfält få köra vidare på kod så det blev som att inmatningsfältet för textContent skulle skickas vidare till setAttribute()-loopfunktionen vilket så klart inte gick.

Men jag fick först inget felmeddelande om det i konsolen i FireFox utan det som hände var att tillslut så blixtrade det till ljusblått som om något markerades och sedan så försvann hela elementet från OUTPUT-elementet.

Däremot när jag då öppnade Google Chromes konsol så sa den att inmatningsvärde från textContent inte kunde användas i setAttribute() vilket så klart är helt korrekt och då blev det tydligt vad som var problemet.

Jag trodde först jag hade gjort det så invecklat att det var något "magiskt" med bubblande händelsedelegeringar eller något sådant. Men det visade sig vara en if-sats som inte hade lagts in trots att jag hade kommentarer för "LAST Thing"!

Om jag ska vara positiv för en gångs skull så är jag nöjd med: Functions.showMsg(element,text,time = 2000) som ligger i Functions.js och som kan visa konsekvent utseendemässig ruta under valt element.

Den var först tänkt att bara användas för vissa händelseelement (e.target), men sedan med tips från chatGPT3.5 så ändrade jag så denna rad finns med i funktionen:

    const targetElement =
      e instanceof Event
        ? e.target.getBoundingClientRect() // When received as a Target from an Event.
        : e.getBoundingClientRect(); // When received as just a DOM Element.

Jag kollar om elementet är från Event-objektet annars så ser jag bara det som ett skickat DOM-element från QuerySelector exempelvis. På så vis får jag åternytta av samma funktion, lite DRY och någon känsla av "redigare design".

Samtidigt blir CSS-fliken utmanande på ett helt annat sätt: Att hantera `margin-left:10px;` där du då har ett värde och en utbytbar enhet (px,%,etc.) så blir det rätt simpelt. Men sedan att slå ihop fyra olika enheter: `margin: 0 auto;`. Det blir mycket utmanande upplever jag just nu.

Jag har därför kikat på "tag clouds" för i vissa sökfält på nätet kan du skriva in sökord som sedan lägger sig som separata element som du kan kryssa bort, samtidigt som de söks tillsammans när du väl genomför sökningen. Jag funderar på någon liknande lösning när det gäller CSS-regler som kan ta flera olika slags argument och/eller antal värdeenheter. 🤔

På återseende!

Mvh,
WKL.

---------
✔️(B) HT2022 DT057G Datateknik GR (A), Webbutveckling I, 7,5 hp (distans)
✔️(A) HT2022 DT084G Datateknik GR (A), Introduktion till programmering i JavaScript, 7,5 hp (distans)
✔️(A) HT2022 DT068G Datateknik GR (B), Webbanvändbarhet, 7,5 hp (distans)
✔️(B) HT2022 DT200G Datateknik GR (A), Grafisk teknik för webb, 7,5 hp (distans)
✔️(A) VT2023 DT093G Datateknik GR (B), Webbutveckling II, 7,5 hp (distans)
✔️(C) VT2023 DT003G Datateknik GR (A), Databaser, 7,5 hp (distans)
✔️(A) VT2023 DT173G Datateknik GR (B), Webbutveckling III, 7,5 hp (distans)
🚧(Projektuppgift inlämnad för rättning, kan förbättras om jag vill?!🤔) VT2023 DT197G Datateknik GR (B), Webbdesign för CMS, 7,5 hp (distans)
🚧 (Inväntar registreringstillfälle) HT2023 IK060G Informatik GR (A), Projektledning
🚧 (Inväntar registreringstillfälle) HT2023 DT193G Datateknik GR (B), Fullstack-utveckling med ramverk

Simpla saker som kräver en hel del precisionsexakt kod
Sjunde commit. Skåda icke koden nedan. Den är väldigt "hemsk" om än rätt simpel i vad som händer (inklusive kommentarer som ska vägleda flödet för den ännu ej icke-insatta). Det är bara att det händer så himla många saker för något relativt simpelt på tal om funktionalitet.

// FUNCTION: Remove `classes` values in list of suggested selectors if they occur exactly once
  removeClassesSelectorSuggestion: function (currentclasses, classvalue) {
    // Prepare all needed elements...
    const selectorSuggestionList = document.getElementById("FEFBEselectorlist");
    // ...and also grab all current classes from all `data-classid` input fields
    const allClassInputFields = document.querySelectorAll(`[data-classid]`);
    const allClassesArray = []; // Store all here to check against duplicates
    const currentOnes = currentclasses.split(" ");
    currentOnes.forEach((e) => allClassesArray.push("." + e));
    allClassInputFields.forEach((e) => {
      const classArrSplit = e.value.split(" ");
      classArrSplit.forEach((e) => {
        if (e) {
          allClassesArray.push("." + e);
        }
      });
    });

    // Count the occurrences of each class in allClassesArray
    const classCounts = {}; // Start with an empty object
    allClassesArray.forEach((className) => {
      // Only count existing class names added to the list
      if (classCounts[className]) {
        classCounts[className]++;
      } // Or create a new class name.
      else {
        classCounts[className] = 1;
      }
    });

    const oldClassesArr = currentclasses.split(" ");
    oldClassesArr.forEach((element) => {
      // Compare if it occurs more than once
      const suggestionValue = `.${element}`;
      if (classCounts[suggestionValue] == 1) {
        selectorSuggestionList.querySelector(`[value=".${element}"]`).remove();
      }
    });
  },
  // FUNCTION: Insert `class` value(s) in list of suggested selectors
  changeOrInsertClassesSelectorSuggestion: function (
    currentclasses,
    classvalue
  ) {
    // Prepare all needed elements...
    const selectorSuggestionList = document.getElementById("FEFBEselectorlist");
    const currentList = Functions.currentSelectorSuggestions();
    // ...and also grab all current classes from all `data-classid` input fields
    const allClassInputFields = document.querySelectorAll(`[data-classid]`);
    const allClassesArray = []; // Store all here to check against duplicates
    const currentOnes = currentclasses.split(" ");
    currentOnes.forEach((e) => allClassesArray.push("." + e));
    allClassInputFields.forEach((e) => {
      const classArrSplit = e.value.split(" ");
      classArrSplit.forEach((e) => {
        if (e) {
          allClassesArray.push("." + e);
        }
      });
    });

    // Count the occurrences of each class in allClassesArray
    const classCounts = {}; // Start with an empty object
    allClassesArray.forEach((className) => {
      // Only count existing class names added to the list
      if (classCounts[className]) {
        classCounts[className]++;
      } // Or create a new class name.
      else {
        classCounts[className] = 1;
      }
    });
    // We end up with an empty property called ".", so let's just remove that from the object.
    if (classCounts.hasOwnProperty(".")) {
      delete classCounts["."];
    }
    // Now we know how many times a class occurs and we can compare this when deleting.
    // Insert new when currentvalue is empty since it is first time
    if (currentclasses == "") {
      const newClassesToArr = classvalue.split(" ");
      newClassesToArr.forEach((element) => {
        const selectorSuggestionItem = Functions.elCreate("option", [
          "class",
          "FEFBEoptions",
          "value",
          "." + element,
        ]);
        // Only add if it does not already exist in the list since several elements can share classes but it should only be included in suggestion once
        if (!currentList.includes(selectorSuggestionItem.value)) {
          selectorSuggestionList.appendChild(selectorSuggestionItem);
        }
      });
    } // Delete all classes when receiving empty string
    else if (classvalue == "") {
      const oldClassesArr = currentclasses.split(" ");
      oldClassesArr.forEach((element) => {
        selectorSuggestionList.querySelector(`[value=".${element}"]`).remove();
      });
    } // Otherwise change current values by...
    else {
      const newClassToArr = classvalue.split(" ");
      const oldClassesArr = currentclasses.split(" ");
      // ...first deleting all ones and...
      oldClassesArr.forEach((element) => {
        const suggestionValue = `.${element}`;
        if (classCounts[suggestionValue] == 1) {
          selectorSuggestionList
            .querySelector(`[value=".${element}"]`)
            .remove();
        }
      });
      // ...then inserting possible new ones!
      newClassToArr.forEach((element) => {
        const selectorSuggestionItem = Functions.elCreate("option", [
          "class",
          "FEFBEoptions",
          "value",
          "." + element,
        ]);
        // Only add if it does not already exist in the list since several elements can share classes but it should only be included in suggestion once{
        if (!currentList.includes(selectorSuggestionItem.value)) {
          selectorSuggestionList.appendChild(selectorSuggestionItem);
        }
      });
    }
  },

Det går nu att dynamiskt få förslag på `id` och `classes` från tillagda element till CSS-fliken i datalistan "Selector:". Detta betyder att när du skriver och trycker `ENTER/RETUR` inuti respektive id- och classes-fält så läggs dessa till eller tas bort beroende på om du ändrat antalet klasser. (Att få samma effekt som när man klickar/trycker på gröna "sparknappen" längst till höger återstår dock!)

På så vis kan du inte få samma `id` två gånger eller en klass två gånger i "förslagslistan" trots att du kan ha samma klassnamn till flera olika element. Däremot `id` kommer att klaga genast om du försöker lägga till ett och samma `id` i fler än ett element.

Det som behövdes för smidiga classes-funktionen var:
1) Hämta alla nuvarande klasser från alla nuvarande inmatningsfält med `data-classid`.

2) Splitta deras strängvärden till arrayer som sedan lades in i en separat array som samlade alla arrayer helt enkelt.

3) Lägg även in nuvarande klasser där vissa kan ha utgått från inmatningsfältet som ändrades (kanske radera en, flera eller alla klasser) i samma array.

4) Skapa nu ett tomt objekt som sedan lägger in alla klasser och antalet av varje klass. En klassisk "gruppfunktion" om jag minns rätt.

5) Jämför sedan mot denna lista och radera endast klasser vars antal är 1 eftersom om det är större antal så innebär det att färst ett till inmatningsfält använder samma klass och då ska den ligga kvar i "förslagslistan" över selektorer.

6) Lägg sedan endast in nya klassförslag som inte redan finns i listan.

Först hade jag all funktionalitet i en och samma funktion som anropades, men det började bli tjorvigt att se allt trots att det delades in i "if", "else if" och "else". Två funktioner med tydligare funktionsnamn gjorde det lite enklare.

Trots detta så blev det så mycket kod för så lite funktionalitet att jag nästan själv tappade bort mig. Först sabbade jag till det och upptäckte minidetaljer i koden som orsakade detta.

Exempelvis hade jag ett fel där klassen som låg kvar i inmatningsfältet blev det som togs bort från förslagslistan vilket såklart är helt fel.

"Monsteruppgiften" kvar nu!
Det som återstår nu i huvudsak är att lägga till och ta bort CSS-regler för valda selektorer. När en selektor sedan tas bort så ska alla dess närliggande CSS-regler också tas bort, samtidigt som det ska gå att lägga till nya CSS-regler.

En lösning jag funderar på nu är `div`-element för varje selektor och underliggande `div`-element i dessa. Jag har kört med `form`-element hittills för jag diggar `legend`-elementet som kan ha text med en fin ram kring sig.

Jag får köra med någon simpel vänsterjusterad rubrik istället för selektorer och sedan bör jag kunna få till CSS-reglerna som döljbara `div`-element för att göra det mer kompakt.

"Monsteruppgiften" är dock inte allt detta ovan, utan faktumet att olika CSS-regler kan ha en blandning av olika slags enheter och värden. Exempelvis klassikern: `margin: 0 auto;` kan lika gärna vara `margin: 0 10px 10px auto` vilket innebär tre olika slags enheter (ingen enhet, px, och ord)!

Varje val av enhet och deras sammankopplade värde ska gå att ändra för just den CSS-regeln samtidigt som antalet enheter ska gå att välja genom att kryssa i rutor som (in)aktiverar närliggande reglage eller dylikt. Till sist ska varje CSS-regel ha ett "finalValue" som blir det som skickas till selektorfunktionen som kan föra in ny CSS-regel eller ändra en befintlig.

Just den funktionen finns redan implementerad. Det som tillkommer blir en liknande funktion fast som raderar valda CSS-regler från vald selektor när hela den tas bort såväl som enstaka CSS-regler.

Den goda nyheten är att så fort en CSS-regel plockas bort så uppdateras det automatiskt i DOM och behöver inte "simuleras" på något vis som att exempelvis behöva ändra CSS för alla `data-elementid`-element under `FEFBEoutput`-elementet!

I slutändan blir hela "Mini-Projektet" inte så anmärkningsvärt mer än alla små och vissa stora problem som jag stött på och fått lösa. Kodresan är egentligen mer intressant här än slutresultatet som inte lbir så "GUI:ig" som jag hade hoppats på.

En mer "GUI-ig" grej vore att fokusera sig in på att kunna snabbt och enkelt kunna skräddarsy elementkomponenter som exempelvis knappar, menyer, `div-cards` och dylikt. Grunden finns ju nu för att kunna automatisera fram element och CSS-regler, så kanske i framtida projekt?!

Nyårsjubelium om 1 vecka från och med imorgon!
Imorgon blir det exakt en vecka kvar tills Nyårsjubeliumet för denna mustiga tråd. Jag vet inte vad som finns att "fira" mer än att titta tillbaka på de första trådarna och problemen jag frågade då om och se hur jag tolkar dessa idag.

Det torde vara ett tecken på att se om jag _verkligen_ lärt mig något eller om jag enbart har bemästrat förmågan att "söka kodhjälp på nätet"! 😂

På återseende!

Mvh,
WKL.

---------
✔️(B) HT2022 DT057G Datateknik GR (A), Webbutveckling I, 7,5 hp (distans)
✔️(A) HT2022 DT084G Datateknik GR (A), Introduktion till programmering i JavaScript, 7,5 hp (distans)
✔️(A) HT2022 DT068G Datateknik GR (B), Webbanvändbarhet, 7,5 hp (distans)
✔️(B) HT2022 DT200G Datateknik GR (A), Grafisk teknik för webb, 7,5 hp (distans)
✔️(A) VT2023 DT093G Datateknik GR (B), Webbutveckling II, 7,5 hp (distans)
✔️(C) VT2023 DT003G Datateknik GR (A), Databaser, 7,5 hp (distans)
✔️(A) VT2023 DT173G Datateknik GR (B), Webbutveckling III, 7,5 hp (distans)
🚧(Projektuppgift inlämnad för rättning, kan förbättras om jag vill?!🤔) VT2023 DT197G Datateknik GR (B), Webbdesign för CMS, 7,5 hp (distans)
🚧 (Inväntar registreringstillfälle) HT2023 IK060G Informatik GR (A), Projektledning
🚧 (Inväntar registreringstillfälle) HT2023 DT193G Datateknik GR (B), Fullstack-utveckling med ramverk

Små steg framåt
Åttonde commit. Det går nu att lägga till unika CSS-selektorer så du kan inte råka lägga till samma två gånger.

Nästa och sista gigantiska steg är att CSS-regler också läggs till i rätt CSS-selektor och att separata CSS-regler kan tas bort, och att hela CSS-selektorer kan plockas bort vilket då också ska ta bort alla deras kopplade CSS-regler.

Här blir en bra lösning återigen data-attributet en bra lösning som exempelvis: data-belongstoselectorname=selectorname som kan vara inbakad i det div-element där CSS-regeln finns. Då kan man "query-välja" alla med samma selectorname och sedan iterera igenom dessa för att först ta bort deras CSS-applicering från DOM och sedan från div-elementen från DOM.

Jag löste även - det jag trodde skulle vara överdrivet krångligt - så det går att spara alla fält för ett givet HTML-element och det kontrollerar att inget som redan finns tillagt försöks läggas till igen. Den ändrar också antalet klasser korrekt, och så.

Den intressantaste utmaningen på tal om Event Delegation med CSS-regler är att få till att kunna välja rätt antal enheter och deras värden för diverse CSS-regler. Jag börjar simpelt: en CSS-regel som bara kan ha ett värde och en enhet från en lista.

Exempelvis: `margin-left:0px;` där du kan ha olika enheter och även fallet där enheten är auto och därmed försvinner värdet. Sedan tänker vi att det hela kan upprepas tre gånger till och vi har helt plötsligt: `margin: 0 auto 50px auto;` som nästa exempel.

Jag tänker att om jag kan få till så att `margin-left` kan ha en enhet från en lista eller enbart ord utan värde (t.ex. "auto") så bör detta kunna upprepas genom att kryssa i/ur en kryssruta som då aktiverar ytterligare rullgardinsmenyer och reglage för nästa värde+enhet för samma CSS-regel. Dessa kan sedan summeras och lagras i en `data-finalInputValue=1` och det är denna som sedan som lyssnar på "Change" och applicerar CSS-regeln i DOM.

Den som hängt med hittills i "dagboken" och kommit till fund med vad det är jag försöker göra - mest för lärandets skull - får gärna tipsa rent datastruktur- och/eller algoritmmässigt hur jag skulle kunna gå tillväga med denna sista viktiga pusselbit i MiniKodProjektet!

I `variables.js` har jag redan en "jätte-Array" med alla CSS-regler. Jag undrar om en sådan borde vara ett objekt: Object { cssRuleName: { ..., ... } } där varje CSS-regels namn (cssRuleName) bör bli sitt eget objekt som då innehåller information om antalet enheter och liknande så rätt antal kan hämtas och renderas ut i DOM under rätt vald selektor? 🤔

På återseende!

Mvh,
WKL.

---------
✔️(B) HT2022 DT057G Datateknik GR (A), Webbutveckling I, 7,5 hp (distans)
✔️(A) HT2022 DT084G Datateknik GR (A), Introduktion till programmering i JavaScript, 7,5 hp (distans)
✔️(A) HT2022 DT068G Datateknik GR (B), Webbanvändbarhet, 7,5 hp (distans)
✔️(B) HT2022 DT200G Datateknik GR (A), Grafisk teknik för webb, 7,5 hp (distans)
✔️(A) VT2023 DT093G Datateknik GR (B), Webbutveckling II, 7,5 hp (distans)
✔️(C) VT2023 DT003G Datateknik GR (A), Databaser, 7,5 hp (distans)
✔️(A) VT2023 DT173G Datateknik GR (B), Webbutveckling III, 7,5 hp (distans)
🚧(Projektuppgift inlämnad för rättning, kan förbättras om jag vill?!🤔) VT2023 DT197G Datateknik GR (B), Webbdesign för CMS, 7,5 hp (distans)
🚧 (Inväntar registreringstillfälle) HT2023 IK060G Informatik GR (A), Projektledning
🚧 (Inväntar registreringstillfälle) HT2023 DT193G Datateknik GR (B), Fullstack-utveckling med ramverk

Ett år har gått! - En mustig tillbakablick!
Efter okänd popularitet(?) så går det äntligen nu att gå igenom alla mina kursers projektkoder samt läsa ytterligare information om dem här: Kurs1-Kurs8 WKL.

Där redogör jag lite mer för varje projektkod medan i detta inlägg blickar jag tillbaka på själva Webbutvecklingsdagboken!

Observera att Kurs 7 är redan inlämnad men ej rättad. Dock var det den tråkigaste kursen i och med hela kruxet med CSS-anpassat WordPress-tema.

Startskottet för ett år sedan
En blygsam och förhoppningsvis självödmjuk blivande Webbutvecklare skapade en tråd på Sweclockers i hopp om vad som skulle bli en dagbok. Uppdatering varje dag konsekvent blev det inte, men det blev åtminstone fylliga uppdateringar med bilder till och från vad jag kan se.

I ett inlägg från den 3:e augusti 2022 så provade jag på både HTML & JS samtidigt. Jag försökte lägga in HTML-element via JS utan att förstå mig på vad createElement, appendChild, innerText, med flera JS DOM-metoder innebär i praktiken!

Det blir lite svårt att utöka med tecknet "p" när den efterfrågar en nod. Att sätta innerText är inte heller bra då det raderar ytterligare noder om man skulle vilja ha nästlade noder med innehåll.

Detta fattade jag såklart inte då, men nu kan jag kolla upp detta och bara för några veckor sedan så fick jag stöta på fenomenet "NodeList" vilket blev ett ytterligare uppvaknande i att förstå Document Web API:t.

Kruxet med scopes & closure från förra året
En annan sak jag hittade vilket har med första JS-kursen att göra är det här med scopes och closure:

I bilden ovan är från den 10:e oktober 2022 då jag försökte referera till variabel som inte finns kvar längre när väl eventet körs:

channelliEl.addEventListener('click', () => {
 fetchChannelData(getChannels[i].scheduleurl);});

Om jag förstår saker och ting bättre nu så är det som händer med klickhändelsen ovan att den försöker komma åt for-loopens variabel i som inte finns kvar längre efter loopen är färdig. Då blir det som att klicka på en icke-deklarerad variabel. En annan tolkning är det som gavs som svar på den tiden: att slutvärdet av i blir högre än getChannels.length och därmed kommer alla klickhändelser försöka komma åt ett värde som inte finns i arrayen.

En sak jag då försöker förstå mig på det här med scopes och closure är när du skickar iväg händelseobjektet i samband med addEventListener:

korv.addEventListener('click', () => {
 getKorv(e,e.target.dataset.pris);});

I koden ovan så fungerar det INTE att skicka med e.target.dataset.pris för det är en referens till något som inte längre sedan finns kvar när du väl klickat på korv-elementet? Men att skicka med hela händelseobjektet e går däremot utan problem och den innehåller ju allt som behövs, inklusive e.target.dataset.pris.

Lösningen var då likt från JS-projektet från fjolåret att deklarera innan funktionen anropades med händelseobjektet:

korv.addEventListener('click', () => {
 let korvPris = e.target.dataset.pris;
 getKorv(e,korvPris);});

Likt ovan så lagrar korvPris en kopia av referensens värde som sedan ändå "försvinner" och inte finns kvar tack vare closure om jag förstått det hela korrekt? Trots ett år senare så är det fortfarande det här med closures och scopes som biter mig i arlset.

Men en lösning som ofta minimerar problemen är att alltid skapa nya variabler innan man skickar iväg till en funktion så behöver man sällan ora sig om scopes & closures!

Nyåret och ytterligare två nya kurser
Den 10:e januari 2023 så blir jag nästan färdig med de två andra kurserna (Webbanvändbarhet & Grafisk teknik för webb) och två nya börjar därpå. Databaser och Webbutveckling II.

Här kopplade det för mig då kring display-attributet och dess "inre" och "yttre" värden som handlar om huruvida de ska påverka barn- eller föräldralemenet. Rätt lustigt hur det tog sådan lång tid för mig att greppa denna lilla men också fundamentala grej inom CSS. Jag lärde mig det från ett YT-klipp som specifikt gick igenom det här med "inner and outer values in CSS"!

Samma månad är också då perioden med Databasskräcken ägde rum. Men mest var det för att jag hade en helt annan uppfattning om Databasläraren via internet än öga mot öga i person då jag tog chansen att träffa Databasläraren fysiskt och då fick en helt annan upplevelse. Fascinerande hur kommunikation på internet kan upplevas så annorlunda gentemot en träff i verkligheten.

Trots att "Databaskursen var som den var" så måste jag så här i efterhand säga att den gav ett mycket bra tankesätt som jag anammat en hel del i mitt sidoprojekt, nämligen kardinalitetsgrader och även relationstänket.

Exempelvis pysslar jag med ett sidoprojekt som handlar om att kunna lägga till CSS-regler till CSS-selektorer. Då kan man tänka att "Varje CSS-selektor får bara förekomma en gång och varje CSS-selektorer kan ha hur många olika CSS-regler som den vill, men varje CSS-regel får bara förekomma en gång per CSS-selektor". Och detta SQL-databasliknande tänk gjorde att jag kunde skapa - enligt eget självtycke - smidiga och enkla funktioner som styrs främst av data-attributvärden och dessa följer viss SQL-databastänk. Funktionerna blev även "återanvändbara".

PHP knackar på dörren och kräver ett annorlunda tänk
Februari månad 2023 inträffar och vi började lära oss ett serverbaserat programmeringsspråk vid namn PHP där det blev ett annorlunda tänk. All logik behövde köras innan någon HTML började renderas ut till skillnad från JavaScript där du kan göra lite hur du vill med den biten.

En stark fördel dock med PHP är att du kan köra all (affärs)logik på serversidan och sedan bara leverera en färdig HTML-fil som också kan vara SEO-anpassad om så önskas utan att slutanvändaren skulle råka få en inblick i din kod (jämfört med all JS-kod som kan inspekteras även om bundle-filer troligen är svårlästa - chatGPT3.5 eller 4.0 kanske kan läsa dem utan problem?).

Projektuppgiften till PHP-kursen blev "Nostalgitrippen" - världens både fulaste & snyggaste(?) webbplats - vilket även introducerade användningen av REST API då jag under en lektion "insåg" att jag kunde skapa en enklare chattfunktionalitet inuti PHP-projektet vars utseende påminner om gamla goda mIRC-tiden!

Jag fick så klart (=SKÄMT) en varning från någon Webbutvecklare på Sweclockers om hur förbjudet ful webbplatsen var, men för övrigt en cool "hatten av"-nick till mIRC-tiden!

Två sista kurserna för Läsår 1: En rolig & En tråkig
De slutgiltiga månaderna inför det sista läsåret HT2022-VT2023 var nu här och en rolig kurs - Webbutveckling III - och en tråkig kurs - WordPress CMS - stod på schemat.

CMS-projektet lyckades jag göra färdigt först och jag lämnade in för sent och hann inte korrigera innan de började rätta så jag fick kompletteringskrav vilket inte kommer rättas förrän 20:e augusti 2023 tidigast.

Webbutveckling III-projektet var däremot mycket roligt och där fick jag äntligen börja lära mig delvis av det kraftiga Promise-objektet såväl som hela grejen med async & await och hur underbara de är att ha med att göra (ej sarkasm). En Webbutvecklare klarar bara av så många .then() innan det blir för mycket!

Jag utvecklade en konceptvaliderad variant av "Onlinepizza/pizza.nu" där du kan lägga en beställning på klientsidan och sedan via ett administrativt gränssnitt neka eller godkänna ordern. Sedan kan du uppdatera ordern igen på adminsidan om att "nu fick din deg att hämta". Trots simpliciteten i koden så blev jag ändå nöjd över den dynamiska samverkande processen jag lyckades skapa mellan klient, server (REST API:t) och admin.

Wildcard vi inte får glömma i det stora hela - chatGPT3.5:s intåg
En sak vi inte har tagit upp här som har haft en genomsyrande betydelse i viss utsträckning är chatGPT 3.5. När jag började utbildningen Hösten 2023 så hade jag ingen aning om chatGPT3.5 trots att det släpptes redan november 2022.

Det var först någon gång i mars eller februari 2023 tror jag som jag först upptäckte det och började använda mig av det. Och jag är tacksam över det för då fick jag "via den hårda/tråkiga vägen" lära mig att söka och hitta information om grundläggande HTML,CSS & JS vilket trots allt är grundpelarna inom nästan all Modern Webbutveckling. Alla JS-ramverk & CSS-ramverk är ju fortfarande ren JS och CSS?

Jag beslöt mig även för att använda chatGPT3.5 som en hjälpreda och lärare även om jag förstod att dess hallucineringar kunde göra att förklaringarna kanske inte alltid stämde överens med verkligheten. Hade jag börjat använda chatGPT3.5 mycket tidigare så hade jag kanske blivit en "chatGPT-o-holic" som vägrar anstränga hjärnan för att leta information likt vissa som googlar allt istället för att lägga "fakta/kunnande på minnet".

En annan sak med chatGPT3.5 som jag iaf upplever det så måste du kunna en del kodande för att verkligen få ut mervärde av det. Kan du inte kodande i kodspråket du behöver hjälp med så blir det mer risktagande och/eller att du inte får ut någon nytta av det. Vissa har jag "hört" från att de inte riktigt blev klokare av hjälp från chatGPT3.5 när de väl klistrade in sin buggande/felmeddelande-genererande kod.

Mitt sidoprojekt "FrontendingForBackEnders" är väl lite av en "kulminering" av min mycket grundläggande förståelse av JS. Under sidoprojektet här så blev jag tvungen att "självlära" mig om moduler och hur hela det fungerar i JS vilket vi inte har kommit igång med ännu. Detta blir nog högst relevant i samband med Vue-ramverket som jag börjat kika videoguider på inför kommande kursen som behandlar just det ramverket av alla JS-ramverk.

Vad ska jag göra nu? - Läsår 2 den 28:e augusti 2023!
Nu den 28:e augusti 2023 så börjar Läsåret 2 och därmed Sista Läsåret av Webbutvecklingsprogrammet på distans vid Mittuniversitetet Sundsvall. Innan dess så tänkte jag försöka få ut en "eh, ok då!"-prototyp av FrontendingForBackEnders för att kunna få någon möjlig praktisk nytta av det själv, för att snabbare kunna experimentera med CSS-biten i kodandet då det är frontending som jag suger på.

Jag vill också försöka göra ett simpelt Snake-spel baserat på JS för att lära mig lite mer om objektorienteringen inom JS såväl som spelutvecklingstänket inom Webbutveckling även om det troligen är C++ man sitter i när man kodar riktiga spel? Till sist vill jag också få klart en simpel Webbskrapningssida som kan skicka e-post till en när den upptäckt att priset har gått ned på en vald vara.

Avslutningsvis vill jag tacka alla här på Sweclockers som läst, stöttat, och/eller konstruktivt kritiserat mig & min kod hittills. Jag ser mycket framemot mer avancerad kod att prata kring istället för grunderna efter ett helt år snart sedan "dagboken" påbörjades!

På återseende - som vanligt, i framtiden!

Mvh,
WKL.

---------
✔️Kurs 1: (B) HT2022 DT057G Datateknik GR (A), Webbutveckling I, 7,5 hp (distans)
✔️Kurs 2: (A) HT2022 DT084G Datateknik GR (A), Introduktion till programmering i JavaScript, 7,5 hp (distans)
✔️Kurs 3: (A) HT2022 DT068G Datateknik GR (B), Webbanvändbarhet, 7,5 hp (distans)
✔️Kurs 4: (B) HT2022 DT200G Datateknik GR (A), Grafisk teknik för webb, 7,5 hp (distans)
✔️Kurs 5: (A) VT2023 DT093G Datateknik GR (B), Webbutveckling II, 7,5 hp (distans)
✔️Kurs 6: (C) VT2023 DT003G Datateknik GR (A), Databaser, 7,5 hp (distans)
🚧Kurs 7: (?/Projektuppgift inlämnad för rättning, kan förbättras om jag vill?!🤔 Rättas tidigast 20/8-23) VT2023 DT197G Datateknik GR (B), Webbdesign för CMS, 7,5 hp (distans)
✔️Kurs 8: (A) VT2023 DT173G Datateknik GR (B), Webbutveckling III, 7,5 hp (distans)
🚧Kurs 9: (Inväntar registreringstillfälle) HT2023 IK060G Informatik GR (A), Projektledning
🚧Kurs 10: (Inväntar registreringstillfälle) HT2023 DT193G Datateknik GR (B), Fullstack-utveckling med ramverk

Andra & sista året börjar i Webbutvecklingsprogrammet
Det andra året och därmed det sista året i Webbutvecklingsprogrammet på distans har nu inletts.

De återstående kurserna är således:
- Informatik GR (A), Projektledning, 7,5 hp
- Datateknik GR (B), Fullstack-utveckling med ramverk, 7,5 hp
- Datateknik GR (B), Javascriptbaserad webbutveckling, 7,5 hp
- Datateknik GR (A), Programmering i C#.NET, 7,5 hp
- Datateknik GR (B), Webbutveckling med .NET, 7,5 hp
- Industriell organisation och ekonomi GR (A), Affärsplaner och kommersialisering, 7,5 hp
- Datateknik GR (B), Självständigt arbete, 15 hp (LIA/Examensarbetet)

Projektledningskursen börjar
Startskottet på det sista året i distansutbildningen blev Introduktion till Projektledningskursen med fokus på projektledning inom IT.

Därav kommer vi att tittare närmare på saker och ting såsom agila metoder, scrum, med mera. För drygt 10 år sedan läste jag en projektledningskurs i en annan utbildning men jag minns inte mycket från den.

Vad jag minns som är anmärkningsvärt om just Projektledning är att projekt är noga förplanerade tillfälliga organisationer med begränsade resurser med bestämda start- och slutdatum i syfte att skapa konkreta resultat som den vanliga verksamheten inte kan och/eller ska.

En nuvarande uppfattning jag har om det hela med Projekt, oavsett typ av verksamhetsområde, är att det är en slags "idealisering" av det hela i kurslitteraturen i hur det skulle kunna vara, hur det bör vara, hur det bör gå till, och så vidare.

En rolig skillnad i kurslitteraturen är att den nyare versionen nu tog upp digitala arbetsytor som den så fint kallar det för. Vår lärare är en så kallad "Miro-Gud" och troligen kommer vi att anamma det digitala arbetsredskapet vid kursavslut!

Nu arbetar jag med att definiera olika begrepp inom Projekt och bara ordet Projekt är svårdefinierat då inget är riktigt hugget i sten. Jag har fått in foten hos eventuell LIA/Examensarbete vid ett företag. En oskriven regel här på forumet verkar vara att du ej nämner IT-företag där du kanske arbetar/praktiserar vid så jag gör det ej med då.

Drama med gruppindelningen
I Projektledningskursen ska grupper delas in i projektliknande gruppuppgifter. Dramat härstammar från faktumet att min virtuella klass inte var den enda klassen i kursen. Våra "ärkerivaler" (jag skämtar) från Nätverksprogrammet var också med.

Några av dessa hade då hoppat in i grupper där klasskamrater från min klass också var med i. Detta innebar att det behövdes skapas privata rum i Teams (ja, vi kan endast kontakta läraren via Teams ). Detta ansåg jag ej acceptabelt.

Så då sågs chansen att hoppa in i en annan grupp vilket skedde på bara några minuter som tur var. Det blev en "stackare" kvar ensam då. Världens snabbaste IT-skämt drogs då av en klasskamrat: "De är inte full-stackare som oss!"

Det finns nu uppgifter på att Sound of Silence-låten spelas i grupperna med bara "nätverkarna" i. Återigen: det är ett skämt. Jag måste också lära mig nätverksgrunder för att kunna deploya webbplatser korrekt i framtiden.

JavaScript-ramverkskursen börjar på onsdag
Nu på onsdag blir det startskottet för JavaScript-ramverkskursen som är indelad på följande fyra delar:

Del 1: Välj ut två CSS-ramverk, koda ihop en webbplats som använder sig av dessa två CSS-ramverk, ett ramverk per undersida. Ett av dessa CSS-ramverk ska sedan användas i kursens slutuppgift.

Del 2: Skapa ett REST API med hjälp av Laravel och nyttja autentisering med hjälp av Sanctum.

Del 3: Skapa Vue front-end webbplats. Har ej tittat mer på uppgiften så vet ej hur det är med CSS-biten här (ramverk eller bara vanilj).

Del 4: Skapa en SPA Vue-webbplats som hämtar all data via Laravel-baserat REST API. Uppgiften får lösas individuellt eller i par. Jag har då gått ihop med en klasskamrat för att öva parprogrammering och bara samarbete överhuvudtaget i något mer signifikant än simpla gruppövningar som det annars varit på sin höjd.

Imposter Syndrom vid "övningsuppgifter"
Trots att jag har lyckats väl med inlämningsuppgifter i kurserna så har jag ändå lyckats sämre med övningsuppgifter från diverse kursmaterial.

Exempelvis följande från EloquentJavaScript: https://eloquentjavascript.net/19_paint.html vilket har varit kursmaterialet för alla JavaScriptkurser fram tills nu.

Vad som gör det svårbegripligt för min del är att läsa och förstå relativt abstrakt kod. Det får mig att undra huruvida jag fattar något eller om koden i sig är "onödigt komplicerad", alltså "ej läsvänlig kod". Var går gränserna mellan att kalla någon blivande Webbutvecklare för "helt enkelt okunnig ännu" och att istället kalla koden för "ej läsvänlig"? 🤔

Att skriva saker som tjänster med lätt interaktivitet (simpla CRUD där en CRUD-sak görs i taget) finner jag lättsamt medan något mer komplicerat som att rita ut en 2D-bild verkar vara mer svårt.

Personligen just nu upplever jag att kod som jag aldrig själv skrivit eller liknande kod kan jag helt enkelt inte läsa mig till att förstå. För då försöker jag förstå/kompilera i min skalle något jag aldrig har sett "ute i det vilda" (exekverad och/eller felsökt kod).

En annan sak med övningsuppgifterna är att de ibland kan verka få en att försöka återupptäcka en algoritm som redan finns där ute att bara läsa sig till istället för att försöka komma på på egen hand.

Jämförelsevis som i matematik där vissa övningsuppgifter har en struktur att du ska få en "aha"-upplevelse och helt plötsligt bevisat och kommit fram till Pythagoras sats samtidigt som den redogörs för direkt på nästa sida i matteboken, och det hela antyder, "Äru dum eller?" om du inte lyckas upptäcka den själv med hjälp av övningsuppgifterna.

Lite så känner jag då inför "leetcode"-uppgifter som finns där ute. Varför ska jag försöka återuppfinna en algoritm via en övning vilket kanske tog ett snille flera år att ta fram? Finns det inte andra sätt att nöta in "algoritm-tänket" för oss Webbutvecklare? 🤔

På återseende - som vanligt, i framtiden!

Mvh,
WKL.

---------
✔️Kurs 1: (B) HT2022 DT057G Datateknik GR (A), Webbutveckling I, 7,5 hp (distans)
✔️Kurs 2: (A) HT2022 DT084G Datateknik GR (A), Introduktion till programmering i JavaScript, 7,5 hp (distans)
✔️Kurs 3: (A) HT2022 DT068G Datateknik GR (B), Webbanvändbarhet, 7,5 hp (distans)
✔️Kurs 4: (B) HT2022 DT200G Datateknik GR (A), Grafisk teknik för webb, 7,5 hp (distans)
✔️Kurs 5: (A) VT2023 DT093G Datateknik GR (B), Webbutveckling II, 7,5 hp (distans)
✔️Kurs 6: (C) VT2023 DT003G Datateknik GR (A), Databaser, 7,5 hp (distans)
🚧Kurs 7: (Inväntar komplettering att rättas...) VT2023 DT197G Datateknik GR (B), Webbdesign för CMS, 7,5 hp (distans)
✔️Kurs 8: (A) VT2023 DT173G Datateknik GR (B), Webbutveckling III, 7,5 hp (distans)
🚧Kurs 9: (Pågår) HT2023 IK060G Informatik GR (A), Projektledning
🚧Kurs 10: (Pågår) HT2023 DT193G Datateknik GR (B), Fullstack-utveckling med ramverk
---------

- Vad är din äldsta kodrad som fortfarande används?
Svar: Jag har ingen särskild kodrad som fortfarande används. Detta betyder antingen att jag inte kodat fram någon "legendarisk kodrad" eller så betyder det förhoppningsvis att jag tänjer gränserna på hur saker och ting kan lösas med kod vilket gör att det alltid blir tillräckligt annorlunda för att inte återupprepa mig. Eller så kan det såklart betyda att jag inte har "upptäckt" de kodsnuttar som "alla borde känna till". En sak jag tycker jag har blivit bättre på är att ta fram flera små funktioner som kan samverka samtidigt som de kan återanvändas. Exempel på detta är en funktion som visar typ av meddelande på valfri plats och då behöver bara typ av meddelande, meddelandet, och var någonstans anges. Då kan både felmeddelanden, framgångsmeddelanden och neutrala meddelanden visas dynamiskt.

- Hur skulle du skriva om den idag?
Svar: En sak som jag faktiskt lyckades skriva om nu vilket är ett riktigt "duh"-exempel är följande (ny idag 2023-08-28):

// JS-objekt med referenser till vardera objekts metod
let movies = {
  a: movie1.getInformation(),
  b: movie2.getInformation(),
  c: movie3.getInformation(),
  d: movie4.getInformation(),
};

// Töm inmatningsfältet först
document.getElementById("output").innerHTML = "";

// Mata ut varje JS-filmobjekt i inmatningsfältet med hjälp av value-metoden
for (const method in movies) {
  document.getElementById("output").innerHTML += movies[method];
}

Tidigare var den (från 2022-09-28):

// JS-objekt med referenser till vardera objekts metod
let movies = {
  a: movie1.getInformation(),
  b: movie2.getInformation(),
  c: movie3.getInformation(),
  d: movie4.getInformation(),
};

// Töm inmatningsfältet först
document.getElementById("output").innerHTML = "";

// Mata ut varje JS-filmobjekt i inmatningsfältet med hjälp av value-metoden
document.getElementById("output").innerHTML += movies.a;
document.getElementById("output").innerHTML += movies.b;
document.getElementById("output").innerHTML += movies.c;
document.getElementById("output").innerHTML += movies.d;

Det är världens simplaste grej jag försökte mig på då i Introduktionskursen i JavaScript (koderna ovan rörde Objekt-momentet). Jag ville loopa igenom ett objekts metoder istället för att behöva skriva ut varje objekts metod en i taget. Jag hade ingen aning om "for const ... in ..." på den tiden. Nu är det självfallet, "Duh?!".

(Du som läser får gärna dela med dig av dina "Duh?!" som tidigare varit "Jag fattar inte...")

Det spännande då blir: Vad kommer att bli nästa "Duh?!" för mig efter detta sista läsår?

- Hur ska du se till att underhålla kodbaserna över tid?
Svar: Det vet jag inte och just bitarna deployment & maintanence inom Webbutvecklingsvärlden är jag något fortfarande håller på att lära mig. Majoriteten av utbildningen är främst att koda fram lösningar, inte sjösätta och underhålla dem. Förhoppningsvis är detta jag får lära mig mer skarpt när jag lyckas norpa en bra plats för LIA/Examensarbete!

- Har du uppdaterat allt till senaste versioner av stödbiblioteken?
Svar: Jag har inte använt några stödbibliotek om det är npm-paket som du möjligen syftar på? Det är nu i kommande kurser när det blir användning av ramverk som sådant blir högaktuellt. Extensions i VSCode och IDE-programmet i sig uppdateras varje gång tillfället ges. Även LIA/Examensarbete hoppas jag på ska lära mig detta i praktiken.

Mvh,
WKL.

Mycket har hänt nu på senaste, så här följer "Mustig Uppdatering 2.0"!

Slutbetyg för CMS-kursen
Jag har äntligen fått slutbetyget för CMS-kursen och slutbetyget blev mycket högre än förväntat:

Faktum är att jag inte alls väntade mig toppbetyg utan snarare C som högsta betyg. Ta en titt på min webbplats, inte sjutton är det där "webbdesign i CMS i världsklass":

Jag klagar inte, jag är bara väldigt chockerad och förvånad. Frontend är min svaghet och bilden ovan visar varför.

CSS-ramverksuppgift inlämnad
Något som däremot nu kan komma och hjälpa mig med frontend-biten är CSS-ramverk då det äntligen tillåts efter att ha slitit i grunderna med först CSS-kod för varje enstaka HTML-fil för att sedan inkludera CSS-kod i modulära PHP-filer. Nu är det äntligen CSS-ramverk där jag lämnade in två olika CSS-ramverks som användes på en webbplats: https://webbkodslarlingen.github.io/ramverk_moment1/

Det första ramverket som gäller för alla webbsidor förutom "Tailwind" är med Bootstrap. Undersidan "Tailwind" är således TailwindCSS-ramverket. Vad som är riktigt mysigt med CSS-ramverken är att det inte bara finns färdiga komponenter att kopiera och klistra in för att skräddarsy utan också standardiserade enheter.

Exempelvis i TailwindCSS så blir det lättare att konsekvent använda sig av avstånd som blir överskådliga och webbdesignmässigt tilltalande om de används rätt. Jag tror det är att enheterna ska kunna gå och dela med 4 eller 8 och liknande enhetsstruktur följer TailwindCSS från grunden. Självfallet går allt att ändra i konfigurationsfilen eller lägga till egna modifikationer (extend).

Det blir TailwindCSS-ramverket som kommer att användas i slutuppgiften i JS-ramverkskursen där slutuppgiften går ut på att skapa ett REST API inuti Laravel och sedan visa det med hjälp av AJAX-anrop inuti frontend-ramverket Vue som i sin tur kommer att använda sig av TailwindCSS-ramverket för det själva grafiska utseendet exklusive datahämtning/-visning.

Jag kommer att prova på parprogrammering med en flitig student i den virtuella klassen. Denna person tänker även läsa ett år till för att kunna få ut en kandidatexamen inom Datateknik. Det skippar jag då jag varken har lust eller tillräckligt många CSN-veckor kvar efter detta sista läsår.

Projektledningsuppgift inlämnad, rättad och godkänd
I Projektledningskursen har en uppgift lämnats in och en till kommer nog att kunna lämnas in innan veckans slut. Första inlämningsuppgiften var att förklara och reflektera olika begrepp inom projektledningsvärlden. Vad gäller projektledning så upplever jag det både som "sunt förnuft" när man väl tittar på teorin och samtidigt så är det en helt annan femma att kunna applicera all idealiserande projektledningsteori i skarpt praktiskt läge.

Agil projektledning upplever jag som rätt "sunt förnuft" när det gäller att arbeta nära kunden istället för att tro att man redan i förstudie- och planeringsfaserna i traditionell projektledning kan komma fram till exakta och statiska kravspecifikationer. Precis som omvärlden förändras för alla inblandade i projektet så kan omvärlden även förändras för intressenter som brukare och kunden inblandade i projektet så att de då kommer med nya kravspecifikationer vilket agil projektledning har bättre underliggande "arbetsfilosofi" att kunna bemöta i praktiken.

Nästa projektledningsuppgift handlar om fyra olika scenarion och hur jag som blivande projektledare ska hantera dessa. I en idealiserad värld så hade jag såklart redan valt lämpliga medarbetare till den blivande projektgruppen så att "vi alla som kliver på samma Projekt-buss är på väg åt samma håll så ingen rycker i ratten för att alla annars kanske skulle vilja åt sitt eget håll". Då kommer vi in på ett känsligt ämne: diskriminering. Får man diskriminera bort inkompetens i projektsammanhang? 🤔

Projektledningsintervju bokad - kanske även examensarbetesplats
På tal om Projektledningskursen så har jag även lyckats boka in en projektledningsintervju med en IT-inriktad fullfjädrad projektledare och då blir det nog snack om hur agil projektledning står sig mot traditionell projektledning inom IT-sektorn, alltså IT-baserade projekt. Det blir spännande intervjumöjlighet och det finns kanske även möjlighet att vid samma plats titta på möjligheter för kommande examensarbete, men det är ingen brådska, men det hade varit skönt och spikat två spikar vid samma tillfälle så att säga!

Jag kommer att skicka frågorna tre arbetsdagar innan intervjun så att personen ifråga kommer att känna att denna har gott om tid att förbereda sig inför en cirka timmes intervjudiskussion. Öppna frågor är vad som gäller och det finns inget behov att gå in på detaljnivå om diverse kunder eller projekt, utan det är snarare allmänna erfarenheter av att kunna applicera projektledningstypiska teorier och modeller i praktiken, hur det har gått, utmaningar med det, styrkor och svagheter med olika sådana, och mycket mer.

Tillfälliga skador i insidan av låren (adductor-musklerna?)
Under sommaren som gick så hade jag cirka fyra månaders uppehåll från gymträning och när jag sedan för drygt en vecka sedan gick och körde ben så verkade jag ha sträckt vad jag misstänker är adductor-musklerna, alltså musklerna som sitter insidan av låret mot skrevet. Nu cirka en vecka senare har det blivit bättre men jag trodde nästan att jag hade fått någon permanent skada eller något relativt allvarligt för jag kunde inte höja knäna ståendes eller känna spänningar i dem där musklerna utan smärta.

Exempelvis att klä på sig, ta på sig skor eller andra aktiviteter som spände insidan-av-låren-musklerna skapade oerhörd smärta där då. Jag fick hitta smartare sätt att klä av och på mig, dvs., böja mig ned och lyfta på fötterna fram och tillbaka så jag fick in strumporna och andra kläder utan att råka spänna beninsidans muskler. Tur var så har jag kunna promenerat med minimal smärta så jag har hållit igång blodcirkulationen och därmed helandet i låren.

Nu hoppas jag på att det läcker till sig ännu bättre så jag kan dra och träna igen och denna gång undvika att sträcka vissa lårmuskler. Det konstiga med det hela är att jag körde det lägsta som typ gick i benövningen i en smith-maskin: först 20 reps på 30 kg (endast stången), och sedan 3x12 reps med 35 kg (så bara 2,5 kg tillagt på varje sidan av stången). Trots detta så verkade det gå fel med benen. Och jag har aldrig tidigare haft sådan slags smärta i benen, väldigt underligt. Eller så är det åldern som börjar ta ut sin rätt!

Tvångsintegrerat Outlook som orsakat antivirusnotifikationer
Avslutningsvis vill jag hacka lite på Windows 10:s integrationstvång med vissa applikationer. Trots att jag inte har Outlook installerat men har ett gammalt hotmailkonto sedan nästan 20 år tillbaka så blev det så att e-postmeddelanden på hotmailkontot synkroniserades automatiskt så att de laddades ner på min dator vilket då antivirusprogrammet (Avast) reagerade på klassiska Phishing-PDF-filer som blockerades som tur var.

Det jag gjorde då var att gå in på MAIL-appen på Windows 10 (har engelska) och tog bort associerat Outlook/Hotmail-konto så förhoppningsvis kommer det att lösa biten. Jag inaktiverade även synkronisering med kalendern för där brukade jag få massa "inbjudningar" till möten som jag knappast bokat in. Visar väl hur gammalt hotmailkontot är då antar jag! Jag är tacksam att Avast hittar och blockerar samtidigt som jag stört mig på Windows 10:s helt plötsliga "tvångsintegrationer" av deras tjänster. Tur att det var simpelt att få bukt med.

På återseende - som vanligt, i framtiden!

Mvh,
WKL.

---------
✔️Kurs 1: (B) HT2022 DT057G Datateknik GR (A), Webbutveckling I, 7,5 hp (distans)
✔️Kurs 2: (A) HT2022 DT084G Datateknik GR (A), Introduktion till programmering i JavaScript, 7,5 hp (distans)
✔️Kurs 3: (A) HT2022 DT068G Datateknik GR (B), Webbanvändbarhet, 7,5 hp (distans)
✔️Kurs 4: (B) HT2022 DT200G Datateknik GR (A), Grafisk teknik för webb, 7,5 hp (distans)
✔️Kurs 5: (A) VT2023 DT093G Datateknik GR (B), Webbutveckling II, 7,5 hp (distans)
✔️Kurs 6: (C) VT2023 DT003G Datateknik GR (A), Databaser, 7,5 hp (distans)
✔️Kurs 7: (A) VT2023 DT197G Datateknik GR (B), Webbdesign för CMS, 7,5 hp (distans)
✔️Kurs 8: (A) VT2023 DT173G Datateknik GR (B), Webbutveckling III, 7,5 hp (distans)
🚧Kurs 9: (Pågår) HT2023 IK060G Informatik GR (A), Projektledning
🚧Kurs 10: (Pågår) HT2023 DT193G Datateknik GR (B), Fullstack-utveckling med ramverk
---------

De grundläggande kurserna har haft så simpel kod att det har inte funnits något mer generaliserande att återanvända och jag har helt enkelt inte kunna producerat någon sådan kod helt enkelt. Det ska vara min återanvändning av vissa PHP-klasser för databasanslutning och viss kod för att skilja på när det körs i localhost och online för att använda lokalanpassade databasinloggningsuppgifter kontra onlinebaserade databasinloggningsuppgifter.

Inom JavaScript hade jag inte ens börjat med användningen av modulimport förrän jag påbörjade mitt sidoprojekt under slutet på "sommarlovet". Där lärde jag mig att använda import av JS-moduler och allt som det innebar i praktiken. Alla kurser just nu är så nya och ändå bara "skrapar på ytan" att jag inte hinner nå någon nivå av kod som är värdig att återanvända, eller så är jag inte så bra på att skapa återanvändbar kod som mina slutbetyg kanske vill göra anspråk på.

När det gäller Deployment & Maintanence så är jag fortfarande helt olärd. Den enda form av deployment jag har gjort är att antingen slänga upp på Netlify (drag & drop) eller FTP-baserad (till studentservern). Jag har ännu inte lärt mig något om att konfigurera egen Nginx, Apache, eller en fullspäckad Docker för att lansera en webbplats i production-skarpt läge.

Den biten inom Webbutvecklingsprogrammet har jag "kritiserat" och jag tycker att det borde finnas en kurs i programmet som enbart fokuserar på att kunna lansera webbplatser, konfigurera servrar, för olika slags production-deployments. Detta kanske säkert ses som något de som pluggar nätverk ska kunna göra, men om man ska bli fullstackare så bör man väl kunna "lansera" sina webbplatser och inte bara köra dem lokalt?!

Till sist så har jag inte fått lära mig några tydliga "best practices in the industry". Här tror jag säkerligen att YH-utbildningar klår universitetsutbildningar samtidigt YH-utbildningar har sina egna brister i form av alldeles för stort fokus på att enbart bli bra på ramverk utan något större fokus på att kunna språken som dessa ramverk grundar sig på. Exempelvis kunna frontend-ramverket ReactJS (ja, oense här om det är ramverk eller bibliotek, JS iaf oavsett vad) men inte kunna något mycket alls av "vanilla JS".

Men det kommer med tiden och förhoppningsvis får jag lära mig mer "Så här gör man ute i arbetslivet"-grejer i samband med en lämplig Examensarbetesplats!

Mvh,
WKL.

Mustig Uppdatering 3.0
Detta inlägg skrivs med denna ljuvliga bakgrundsmusik:

Nu är jag inget ONE Piece-fan eller så, men denna TV-serie var riktigt mysig på Netflix. Ser peppat framemot säsong 2 och jag hoppas att de håller i andan att följa mangan/animen utan att försöka översätta det till 100 % då det bara blir löjligt (*host* Cowboy Bebop *host*). Vissa saker översätts helt enkelt riktigt illa i live-action utan bör anpassas för live-action samtidigt som respekten för källmaterialet behålls.

Hursomhelst, vidare nu med kodandet!

Moment 2 och Moment 3 inlämnade i JS-ramverkskursen
För knappa 10 minuter sedan lämnade jag in Moment 3 i JS-ramverkskursen vilket handlade om att skapa en frontend-sida med hjälp av frontend-ramverket Vue vilket i sin tur konsumerade från ett PHP-ramverks - Laravel - REST API vilket kodades ihop i Moment 2 där redovisningen var i videoformat för att endast visa inuti Thunderclient hur REST API:t fungerade.

En snitsig lösning i Laravel blev då att skapa en valideringsfunktion som återupprepades för både PUT- & POST-anrop då samma data behövde valideras. Denna valideringsfunktion ligger inuti Controller-filen för "modellen" (tabellen) ifråga och används vid PUT- respektive POST-anrop.

Det enda än så länge jag tycker är lite klurigt med Laravel som REST API är just att det måste "sjösättas" på särskilt vis av säkerhetsskäl och så hade jag föredragit att få dela in felmeddelandena i "Errors"-arrayen till associativa arrayer för att enklare kunna placera dessa under diverse fält inuti Vue-delen. Men det går säkert att fixa, det mesta går som tur var att fixa.

Nedanför går att se en bild från Moment 3 i JS-ramverkskursen (Vue + TailwindCSS):

Den föreställer undersidan i en SPA i Vue där det läses in senaste inlagda datordelar som i sin tur kan läggas till nya, uppdateras och/eller raderas. URL:n stödjer även att du skriver /datordelar/:id för att visa särskild datordel eller så /datordelar/:id/edit för att komma till datordelens sida för ändring. Det motsvarar att klicka på datordels "ÄNDRA"-knapp med motsvarande ID längst till vänster. Det finns också ett "påskägg" som visas om användaren råkar skriva "/datordelar/delete" då det inte ska fungera och inte gör heller.

En smått nackkliande kritik jag har emot Vue är att dess "v-model"-attribut inuti ett select-element väljer då att ta bort alla "selected"-attribut för dess option-element vilket betyder att när du ska läsa in en datordel att ändra så kommer den att nollställa inuti DOM för "Skick"-rullgardinsrutan trots att dess datavärde (vald option) behålls. Då valde jag en lösning att också nollställa dess värde så användaren blir tvingad att välja nytt igen i Skick-rullgardin vilket inte är en snygg lösning och jag kommer att fixa det unika problemet i Projektuppgiften. Jag förstår dock inte vad tanken bakom att radera ut alla selected-attribut för option-elementen för ett select-element som fått "v-model"-attributet tillagt är.

Något jag både älskar och har lite klurigheter med är Tailwind som CSS-ramverk vilket denna JS-ramverkskurs tillåter en äntligen att få använda. Du kanske aldrig minns när jag råkade skriva om drygt 10 undersidor i HTML med samma enstaka CSS-fil där en ändring i navigeringen i en fil behövde då även fixas i alla andra dryga 10 undersidor. Den smärtan är nu förbi först efter introduceringen av PHP och dess include-tänk, och nu med komponenttänkandet i frontend-ramverk såväl som det underbara med det som är Tailwind.

Jag har inte lärt mig de alla finurliga sakerna ännu med Tailwind. T.ex. använde jag en "computed:"-funktion för att skriva ut tr-elementen i olika bakgrundsfärger för udda och jämna antal. I en Discord-grupp berättades då att det hade räckt med "odd:<css-regel för udda av detta element>" och "even:<css-regel för jämna antal av detta element>". Liknande "special-css-regel:<css-regel utifrån den special-css-regeln>" lär det finnas för mig i Tailwind att upptäcka.

Som vanligt så finns det debatter om vad en ska lära sig först: Lära sig vanlig CSS först eller lära sig Tailwind först? Tailwind är ju CSS i grunden så förstår du inte riktigt vad det är för något som händer i och med kompilering till vanlig CSS så riskerar du att fastna när "detaljproblem" uppstår. Liknande i ramverksspråken som i sin tur bygger på något språk i grunden (t.ex. JS för React, Vue, Angular, Svelte, Solid, Ember, Alpine, med flera, eller PHP för Laravel).

Personligen - och jag är så klart jävig - upplever att det var matnyttigt om än smärtsamt till och från att jag lärde mig grunderna till helt OK nivå innan jag nu får fröjda mig med det som så fint heter ramverk i webbutvecklingsvärlden!

Första gruppuppgift inlämnad och godkänt Projektseminarium utan något deltagande?!
Projektledningskursen har tre inlämningsuppgifter på gruppnivå, alltså ska lämnas in som en grupp. Den första som lämnar in en uppgift i Moodle orsakar då så att alla med i samma grupp får sina inlämningslådor klassade som inlämnade. En tabbe inträffade vid första gruppinlämningen där det saknades tillräckliga uppgifter att lämna in så dessa fick hänvisas via länkar i "Kommentarer"-rutan som tur var.

Den första gruppuppgiften är Projektplanen vilket kan klassas som "originalplan" och det finns lite blandade känslor kring hela upplägget med kursen i sig. De två nästkommande gruppuppgifterna handlar nämligen om att redovisa om hur "projektet har gått", dvs., det som har implementerats enligt den inlämnade Projektplanen, och sista är en Slutrapport inlämnad som grupp.

Kruxet är att i Projektplanen framgår det som om det är tänkt att vi kommer att arbeta 8 timmar varje vardag de närmsta veckorna framåt enbart med det angivet under Aktiviteter i Projektplanen vilket såklart är orimligt i och med JS-ramverkskursen som samtidigt som denna.

Den uppfattning jag har fått än så länge är att den större delen av Projektgruppsuppgifterna handlar om det administrativa kring projektet: anteckna ned mötesprotokoll, mötesanteckningar, inrapporteringar av framsteg, motgångar, och så vidare. Så mer att simulera det administrativa snarare än att faktiskt lyckas producera något som om vi skulle ha arbetat 8 timmar varje dag med bara projektledningskursen.

Vad är det då jag menar med att jag har fått godkänt vid Projektseminariet utan att ha deltagit? Jo, det gick nämligen att bara filma sig själv när jag satt och pratade för mig själv i cirka 13 minuter om de fyra olika projektledningsscenariona som jag tagit upp i en annan tråd där jag frågade om realismen kring dessa att faktiskt uppstå i praktiken. I den tråden framgick det att de var rätt realistiska om än troligen extrema fall utifrån beskrivna scenarion.

Läraren kunde snabbt rätta min video så jag fick godkänt trots att jag ej deltog vid det första projektseminariet. Det andra projektseminariet är den 20:e oktober 2023 och gäller då hela Projektgruppen där jag agerar som Projektledare. Det projektseminariet går ej att redovisa på något annat vis då måste jag bita i det sura gräset och delta trots allt.

På tal om Projektledningskursen så kommer jag imorgon att skicka de Intervjufrågor som jag ska diskutera med lokalt IT-storbolag här i staden nu nästa torsdag. Det blir ett spännande samtal samtidigt som jag verkligen har noll erfarenhet av vare sig traditionell projektledning eller agil projektledning som arbetsform att jag knappt kommer att kunna sätta mig in i svaren mer än på teoretisk nivå.

Projektledningsteorierna och modellerna upplever jag som väldigt "idealistiska" som om "Om det bara går till så här så fungerar det så här majoriteten av gångerna". Personligen upplever jag att den största modererande faktorn är vilka som tillsätts i projektet. Med fel folk så blir det friktion hela vägen och med rätt folk så blir det antingen mindre friktion eller till och med "räkmacka på glidmedel"-sfart.

Psst! Under denna Intervju så kanske även tillfället ges att jag får träffa relevanta nyckelpersoner i hopp om att spika en plats för mitt kommande Examensarbete under andra kvartalet nästa år!

Insidan av låren har läkt färdigt!
Jag hade senast jag skrev irriterande smärtor vid insidan av låren som jag trodde var adductor-musklerna. De har nu läkt och jag får ingen smärta när jag höjer knäna eller står och skakar på dem. Det känns skönt att det inte var något allvarligare och jag får helt enkelt finna mig i den nya verkligheten att min kropp inte är densamma som den var för bara 10 år sedan.

Den första Projektuppgiften i Webbutvecklingsprogrammet på distans ihop med annan virtuell klasskamrat!
Imorgon blir den första dagen då jag kommer att arbeta med en Projektuppgift vid distansutbildningen Webbutvecklingsprogrammet tillsammans med en annan virtuell klasskamrat. Inte parprogrammering i sig utan snarare att vi kommer att dela samma två repon i Projektuppgiften i JS-ramverkskursen.

Projektuppgiften (vilket låter förvirrande när vi läser en Projektledningskurs samtidigt) handlar om att ta fram ett internt webbsystem för ett fiktivt företag som vill kunna hålla reda på sitt varulager. Så klassisk CRUD tillsammans med roll- och behörighetsnivåer (likt i CMS-kursen där du kan skapa olika konton i WordPress med olika åtkomstbehörigheter) är vad vi planerar såväl som att kunna ladda upp bilder. Det hela ska lösas med hjälp av Laravel PHP som REST API och Vue som frontend-del.

Så här blir det spännande och kul att få arbeta i GitHub Classroom tillsammans med en annan virtuell klasskamrat. Vi får hoppas på inga merge conflicts eller andra Git-misstag!

På återseende - som vanligt, i framtiden!

Mvh,
WKL.

---------
✔️Kurs 1: (B) HT2022 DT057G Datateknik GR (A), Webbutveckling I, 7,5 hp (distans)
✔️Kurs 2: (A) HT2022 DT084G Datateknik GR (A), Introduktion till programmering i JavaScript, 7,5 hp (distans)
✔️Kurs 3: (A) HT2022 DT068G Datateknik GR (B), Webbanvändbarhet, 7,5 hp (distans)
✔️Kurs 4: (B) HT2022 DT200G Datateknik GR (A), Grafisk teknik för webb, 7,5 hp (distans)
✔️Kurs 5: (A) VT2023 DT093G Datateknik GR (B), Webbutveckling II, 7,5 hp (distans)
✔️Kurs 6: (C) VT2023 DT003G Datateknik GR (A), Databaser, 7,5 hp (distans)
✔️Kurs 7: (A) VT2023 DT197G Datateknik GR (B), Webbdesign för CMS, 7,5 hp (distans)
✔️Kurs 8: (A) VT2023 DT173G Datateknik GR (B), Webbutveckling III, 7,5 hp (distans)
🚧Kurs 9: (Pågår) HT2023 IK060G Informatik GR (A), Projektledning
🚧Kurs 10: (Pågår) HT2023 DT193G Datateknik GR (B), Fullstack-utveckling med ramverk
---------

Mustig Uppdatering ^4.2.0
Här följer nu en mustig uppdatering version ^4.2.0 (ja, mustig uppdatering 6 blir självfallet ^6.9.Nice) där det har hänt en hel del. En hel del har hänt då både Projektledningskursen och JS-ramverkskursen börjar närma sina slut. Jag har varit på mitt första IT-mingel-evenemang, och jag har gått och blivit med webbhotell?!

Projektledningskursen närmar sitt slut
Den hemskt men matnyttiga projektledningskursen börjar närma sitt slut. Jag har - vilket jag skrivit i en Discord-grupp - lyckats tagit mig upp trots att jag ej annars orkat för att arbeta med min tilldelade projektgrupp. Vi har nu fått vår "Projektplan" rättad och godkänd (Uppgift 2a Grupp) och vi har redan lämnat in både Uppgift 2b Grupp och "Slutrapporten" (Uppgift 3c Grupp). Uppgift 2b Grupp är själva arbetet och all kringliggande projektdokumentering.

Vad beträffar själva arbetet i projektledningskursen så är det bara en hemsk Figma i tre olika skärmstorlekar med simpel Prototype-navigering med tre olika Flows (en för varje skärmstorlek) där du då kan simulera att du loggar in på ett e-sparkonto för att se över din ekonomi. Du möts med tre olika alternativ som du kan klicka/trycka vidare dig till inuti Figma.

Det hela gjordes färdigt på typ två projektgruppmöten sammanlagt cirka 5-6 timmar allt som allt. Nu den 20:e oktober 2023 har vi "redovisning" där vi ska "demonstrera" arbetet i den utsträckning det går. Och sedan blir den uppgiften - 2b Grupp - godkänd förhoppningsvis. I Uppgift 3c Grupp så skrev vi själva slutrapporten vilket vi redan har lämnat in i förrgår så den är inlämnad innan demonstrationen.

Så i projektdokumenteringen vilket är ett Google dokument så står det att vi redan har betat av alla projektfaser trots att vi egentligen inte har gjort det. Vi har tagit ut seger i förskott skulle man kunna säga. Hursomhelst så för detta oss till vad vi verkligen känner för just denna kurs...

Flera håller med: inte så givande kurs trots allt
...Flera i min klass känner verkligen att man egentligen inte har lärt sig något om traditionell och/eller agil projektledning mer än vad vissa har lyckats lära sig via sina tidiga intervjuer med IT-inriktade projektledare. Samma sak gäller för mig. Jag upplever inte att jag lärt mig så mycket faktiskt projektledning mer än den jag har fått bedriva sedan Discord-gruppstarten och i gruppen där jag också tog mig på projektledarrollen.

Vår grupp hette "De sinnesslöa" för jag tycker det ordet är så onödigt roligt i hur "tunt" det låter vid uttal samtidigt som dess innebörd är synonymt med ett mycket mer känsloladdat ord. Om jag ska reflektera över det "Projektledarskap" jag har haft i Discord-gruppen som jag skapade den 28 augusti 2022 om jag minns rätt så har jag gjort vissa misstag.

Exempelvis har jag råkat tagit bort vissa Discord-kanaler då jag tänkte att kurserna nu är över efter kompletteringstiderna löpt ut. Men då glömde jag bort - klantigt egoistiskt nog - att vissa inte ens hann färdigt med kompletteringarna och då gärna hade tagit del av dessa kurskanaler nästa år när jag lämnar över rodret till någon eller några andra som vill fortsätta bedriva Discord-gruppen trots att jag tror att många kommer att lämna den efter avslutad distansutbildning.

En bra sak jag har gjort med Discord-gruppen sett ur projektledningsperspektiv är att jag har försökt hålla det demokratiskt genom att Discord-gruppen höll en simpel "omröstning" om en kursdeltagare skulle få vara med trots att denna kursdeltagare inte är med i vår årskull utan bara en som behöver gå denna kurs och komplettera en till för att kunna ta examen i samma Webbutvecklingsprogram som vår årskull går.

Vad gäller Projektledning så hörde jag från en i klassen som berättade om sin projektledarintervju där en tungviktare till projektledare (över 20+ års erfarenhet) berättade om att det är viktigt att kunna "sparka projektmedlemmar vid behov" för att ett givet projekt inte ska riskeras över potentiellt inkompatibel projektmedlem helt enkelt.

Detta kan låta "hemskt" ur ett perspektiv. Men denna intervjuade projektledare (ej den jag intervjuade) sade då att många gånger så arbetar projektmedlemmar med fler arbetsuppgifter på företaget än enbart projekten de är tillsatta i. Projektledningsteori tolkar jag - återigen - delvis som väldigt "idealiserande" och "förenklat" på många sätt och vis. Exempelvis som att projektledning som arbetsform skulle kunna vara helt åtskild från kärnverksamheten vilket denna projektledare menar på sällan är fallet. Mycket går in i varandra. Det är komplext och kan ändå gå ihop trots allt det!

Så... inte alla i den virtuella klassen är "nöjda" med denna kurs även om ämnet i sig är matnyttigt att kunna. Om jag minns rätt så är läraren inte ens tänkt att vara denna lärare utan den faktiska läraren är föräldraledig så någon som samtidigt skriver en doktorsavhandling har fått till uppgift att vara vår lärare i denna kurs. Inte nödvändigtvis det bästa upplägget. Men som det sägs på engelska:"It is what it is."

Moment 3 äntligen rättad - Sälen uppskattades!
Moment 3 i JS-ramverkskursen har nu rättats trots att jag trodde det skulle ha rättats redan förra veckan. Det började rättas denna vecka istället så den blev rättad igår. Läraren uppskattade min säl jag hade lagt upp som visas när 404-sidan visas:

Jag har ett liknande "påskägg" för slutuppgiften i JS-ramverkskursen där istället ett annat djur kommer att visas när 404-sidan visas. En sak i Laravel här som jag stör mig på för att jag inte löst det är att det verkar inte finnas någon "catch-all-route" att sätta utan istället skickar Laravel med världens längsta respons utöver message-sträng. Jag hade önskat att bara få skicka med en simpel "message"-sträng om att:"API-anropet är ogiltigt. Här är en bild på ett djur istället!".

Både kalla och varma fötter i "Par-programmeringsprojektet"
På tal om slutuppgiften i JS-ramverkskursen så berättade jag från förra uppdateringen att jag hade hoppat in för allra första gången i "par-programmeringsprojekt" i den utsträckning att vi nu är två personer som arbetar i samma kodbas i form av två Collaborators på tilldelad GitHub Classroom från lärarna.

Vi får då synka och ibland gnäller Git Explorer i VSCode att någon inte kan commit&push utan den måste pull&push typ. Vi har dock inte stött på någon merge conflict ännu vilket kanske är tack vare att vi är noga med att inte sitta i samma filer. Sistnämnda ska dock kanske vara möjligt ändå så länge vi båda bara lägger till kod och inte att någon tar bort kod som den andre har kvar i sin version? 🤔

Varför har jag då både varma och kalla fötter? Jo, för att samverka i samma kodbas har ibland lett till att den ena personen måste delvis "justera" - eller vad man diplomatiskt ska kalla det för(?) - den andres kod då den andre kanske hade ändrat något eller inte tillräckligt testats en kod. Exempelvis gör jag något och testar så att alla API-anrop fungerar och alla felmeddelanden visas på frontend.

Den andra personen hoppar in och lägger till något i samma fil och av någon anledning så har detta nu påverkat min koddel i samma fil utan att den andra personen upptäckte eller testade tillräckligt innan commit. Så då får jag tillbaka en delvis "trasig" kod vilket varit smått störande, men absolut inga "allvarligheter" eller "dålig stämning" på grund av det. Utan endast smått tillfällig frustration som sedan gått över efter att det "justerats" som det så fint heter.

Det har varit och är fortfarande en nyttig erfarenhet att arbeta med samma kodbas och behöva hantera sådana här saker, och förbereda sig inför verkligheten där delade kodbaser med flera utvecklare med kanske flera olika ambitionsnivåer ska samverka på ett sätt där den gemensamma kodbasen kan växa med minimalt antal buggar/"unwanted features".

Som det ser ut nu i Slutuppgiften i JS-ramverkskursen så kommer vi att bli färdiga med den troligen i slutet på denna vecka trots att senast inlämningsdatum är 29 oktober 2023. Det vore underbart om jag kunde bli färdig med båda Slutuppgifterna för kurserna och då bara behöva arbeta med Stockholmskunden varje vecka för att sedan "ta ledigt" och spela igenom kommande Super Mario Wonders på Nintendo Switch!

Mitt första IT-mingel-evenemang(?)
Idag när jag skriver denna uppdatering så var jag på ett lokalt IT-mingel-evenemang eller vad jag ska kalla det för? Det var mingel, ett slags evenemang med talare från olika företag, och det var IT-inriktat, så fungerar namnet då? Hursomhelst så hade jag - som jag beskrev det i en Discord-grupp - "lika tur som Alexander Lukas från Kalle Anka" då jag anlände dit nervös som den introvert jag är.

Jag är den introvärt som måste bli varm i kläderna innan jag framstår som extrovert. Och samtidigt "laddar jag batterierna" genom att få vara för mig själv, möjligen med husdjur då. Väl på plats runt 11-tiden så gick jag och drygt ett dussin till in på en gammal byggnad i lokala stan här där jag inte satt min fot på sedan nästan tio år sedan då det då var en klubb och bar.

Vi gick ut på en utomhusterrass med inglasat tak och senast jag var så var jag minst sagt berusad och inte så nykter som jag var idag. På tal om det där med introvert så tänkte jag att om lunchen ingick så ingick väl drycken också? Jag såg att öl fanns, nåja, lättöl i form av mörk lager. Men bättre än ingenting tänkte jag!

Jag satte mig då nära vid en projekt som hade alldeles för hög belysning så kontrasten blev alldeles för hög så det som var ljust från inkopplade datorer blev svårt att se. Väldigt illa ur "Webbanvändbarhetssynpunkt" om man säger så! Där jag satte mig så satt jag helt själv för jag kom dit själv, representerade den virtuella klassen på helt egen hand.

Nu hände "Alexander Lukas"-händelsen: Två personer kommer fram och frågar om de kan sätta sig ned vid mig vilket de självfallet kan. De sätter sig ned och efter ett tag så börjar jag bli varm i kläderna så jag kan prata mer med dem. Då visar det sig att en av dessa är ingen mindre - i egen hög person - än den självaste faktiska IT-konsultchefen vid samma företag där jag var och intervjuade en projektledare vid från förra veckan! Det kändes riktigt "tur" att jag fick sitta bredvid just den nyckelpersonen i och med det kommande ex-arbetet nästa år.

Denna person informerade mig dock om att det redan hade kommit in förfrågan hos denne och att det var rätt dåligt om platser för just webbutvecklare vid detta företag just i staden där jag bor och hade tänkt att göra mitt examensarbete i. Jag kontaktade dock denna person senare idag via LinkedIn och meddelade även en annan nyckelperson från den Discord-grupp som hade tipsat mig om detta evenemang vilket jag återigen tackar allra ödmjukast för! o7

Jag passade även på att tacka själva Discord-gruppens existens då utan den så hade ovanstående händelse aldrig ha inträffat och jag vet inte vart heller jag hade varit någonstans med projektledarintervjun som faktisk blev av. Hade den blivit av eller hade jag försökt skriva ihop något med hjälp av chatGPT3.5 på grund av mitt personliga missnöje med just denna projektledningskurs och inte själva ämnet i sig?!

Jakten på en plats för Självständigt arbete - "ex-arbetesplats"
Då är vi vid "Slutbossen" av Webbutvecklingsprogrammet på distans vilket är just det Självständiga arbetet som också kallas för "ex-arbetet" vilket jag trodde var att jobba på en före detta arbetsplats! xD Här så har jag alltså slängt ut en så kallad "intresse-krok" samtidigt som jag indirekt har uppmanats om att inte lägga alla ägg i en och samma korg.

Jag ska därför söka mig till andra platser här i stan där det också finns andra IT-bolag i hopp om en givande plats för både mig och där jag kommer att genomföra mitt Självständiga arbete vid. Förhoppningen jag har är att få ta fram åtminstone någon del i någon del av ett verkligt projekt även om det troligen är högst osannolikt på grund av min "juniora erfarenhet" då om ens det.

På tal om "junior vs senior" så har jag aldrig förstått varför just "junior" beskrivs på YT-kanaler om programmering som om de inte kan något. "Newbie" eller "Beginners" är ju mer korrekt då. Dessutom kan "senior" misstolkas som om dessa programmerare är "fulländade" vilket är den värsta sortens människor att ha med att göra: de som tror att de störst, bäst, vackrast, eller åtminstone redan kan allt inom sitt primära yrkesområde. Eftersom de redan kan allt, så finns det ingen anledning för dem att ta sig till något nytt och de kan inte heller erkänna brister eller fel eftersom det skulle gå emot deras självbild om "perfekta fulländning".

Att aldrig kunna ha fel innebär att du aldrig kan lära dig något nytt, tänker jag.

Det är därför jag haft en tråd om "titlar" inom programmering och att jag ser mig själv som en kodare och inte programmerare för jag tycker att kodare är mindre "tung titel" och därmed också mer ödmjukt då jag faktiskt inte kan något riktigt tekniskt inom datorer och IT. Jag kan räkna binärt (0=0, 1=1, 10=2, osv), men jag förstår mig inte på minneshantering i datorer, då jag inte behöver hålla på med sådant inom de programmeringsspråk jag använder.

Fördelen med den självödmjukheten och kanske även till viss mån "självnedvärderingen" är att jag är då öppen nog för att kunna ta mig till ny information för att bli bättre och få mer "XP" som blivande "junior-webbkodare". Frågan är då: Hur många XP behövs innan jag utvecklas till "senior-webbkodare"? Är det möjligt här att vi ser en allvarlig problematik med den premissen?

"Jag har gått och blivit med webbhotell"

Det faktiska domänet är annat. Det får upptäckas "organiskt" förr eller senare...

Vissa går och blir gravid och med barn, andra går och blir med webbhotell. Jag hade egentligen tänkt att införskaffa/investera i ett webbhotell redan i augusti månaden men det blev inte av förrän slutet på september istället. Nu har jag ett webbhotell investerat för ett år med tre, snart fyra, kopplade domäner till.

Här fick jag lära mig grundläggande om DNS:er och allt som det innebär. Tydligen så är det som så att namnservrarna för ett domän berättar då vilken "domänkatalog" som vet var ett domän finns. Så jag har ett par svenska domäner via Loopia vars namnservrar är ändrade till webbhotellets namnservrar. På så vis så "berättas" webbläsarna om för att domänet och dess förknippade IP-adress som letas återfinns hos följande namnservrar - alltså hos webbhotellets namnserver.

Det går då dit. Men! Det är inte färdigt ännu, trodde jag. Jag trodde att om jag bara ändrade namnservrar där så skulle det lösa sig. Jag gick sedan in i filsystemet för mitt DirectAdmin-shared hosting-konto (även denna bit med alla olika varianter av shared hosting-mjukvarulösningar är en djungel i sig) och skapade en mapp under "domains" och trodde att det skulle räcka.

Men nepp! Domänet hittar inte rätt. Utan jag behövde göra en sak till. Jag hade till och med överfört ett domän från Loopia direkt till webbhotellet och ändå behövde jag göra denna extra sak till. Vad för sak? Jo, jag behövde gå till "Domain Management" i mitt DirectAdmin-konto och lägga till domänet så visste nu webbhotellets namnservrar inte bara vilken IP-adress (jag köpte en unik i samband med webbhotellet) som den ska peka mot utan också vilken undermapp i "domains"-mappen.

Så tänker jag att det "på ett ungefär" fungerar med hur domänet via DNS:er kan hitta till rätt public_html-mapp i rätt domains-undermapp under rätt IP-adress bland alla DirectAdmin-konton som finns hos webbhotellet. Det är som sagt var en hel djungel i sig och som jag påpekat flera gånger under detta distansbaserade Webbutvecklingsprogram: vi har inte fått lära oss något anmärkningsvärt mycket om just deployment- & maintenance-biten!

"Använd Netlify eller ladda upp på student-ftp:n" är typ det som har lärts ut om det ens är att kalla det för att lära ut. I nuvarande JS-ramverkskurs är det inte ens krav på att behöva ladda upp utan bara det fungerar via localhost. Tanken är att vi ska inte behöva betala för vår distansutbildning (i och med att Heroku nu kostar pengar annars hade Laravel laddats upp). Samtidigt läser jag att Laravel ska kunna installeras på ett DirectAdmin-shared hosting konto efter lite .htaccess-magi även om det inte rekommenderas alls.

Därför framstår ovanstående mer som om jag är en "Fullstack-localhost-utvecklare" än en faktisk "Fullstack-webbutvecklare", eller hur?! 😜

På återseende - som vanligt, i framtiden!

Mvh,
WKL.

---------
✔️Kurs 1: (B) HT2022 DT057G Datateknik GR (A), Webbutveckling I, 7,5 hp (distans)
✔️Kurs 2: (A) HT2022 DT084G Datateknik GR (A), Introduktion till programmering i JavaScript, 7,5 hp (distans)
✔️Kurs 3: (A) HT2022 DT068G Datateknik GR (B), Webbanvändbarhet, 7,5 hp (distans)
✔️Kurs 4: (B) HT2022 DT200G Datateknik GR (A), Grafisk teknik för webb, 7,5 hp (distans)
✔️Kurs 5: (A) VT2023 DT093G Datateknik GR (B), Webbutveckling II, 7,5 hp (distans)
✔️Kurs 6: (C) VT2023 DT003G Datateknik GR (A), Databaser, 7,5 hp (distans)
✔️Kurs 7: (A) VT2023 DT197G Datateknik GR (B), Webbdesign för CMS, 7,5 hp (distans)
✔️Kurs 8: (A) VT2023 DT173G Datateknik GR (B), Webbutveckling III, 7,5 hp (distans)
🚧Kurs 9: (Slutuppgift Pågår) HT2023 IK060G Informatik GR (A), Projektledning
🚧Kurs 10: (Slutuppgit Pågår) HT2023 DT193G Datateknik GR (B), Fullstack-utveckling med ramverk

Här följer som bekant en mustig uppdatering i version ^5.5.5 där det informeras och meddelas om JS-ramverkskursen och den tragiskt tråkiga Projektledningskursen. Sistnämnda är inte tråkigt i sig utan det är snarare hur det hela har lagts upp av "vikarieläraren" då den ordinarie läraren tydligen är föräldraledig.

JS-ramverkskursen äntligen över! (nåja, väldigt snart)
JS-ramverkskursen är äntligen över efter att nu på onsdag jag och samarbetspartnern har redovisat det hela i Zoom. Idag när jag satt och tog fram alla bilder i Resultatdelen i projektet så upptäckte jag småfel i Vue.js-koden. Exempelvis så försöker Vue.js rendera ut reaktiva data vars värden inte ännu har satts då fetch-anrop har gjorts och måste sedan tilldelas där den senare då kan rendera ut dessa.

Det är en liten smått irriterande detalj med Vue.js - jag kan inte bestämma exakt när den ska försöka rendera ut DOM från template-elementet. Jag trodde att beforeMount()-stadiet innebar att inget hade renderats ut ännu i DOM och här var då min chans att förhämta massa data via asynkrona anrop. Jag tänkte att hela beforeMount()-stadiet var en slags Promise som inväntade en .finally() för allt som kördes inuti beforeMount() och sedan gick den vidare till mounted()-stadiet.

Men så verkar det inte riktigt vara, i alla fall inte vad gäller renderingen i DOM vilket ibland försöker rendera ut objektdata vilket inte ännu kanske finns. Detta ledde då till klassiska fel som "cannot access $data.object.property" trots att jag satt {{ object?.property?.[0] }} och liknande.

Ett problem när jag skulle småtesta mig fram för att få fram resultatbilder var exempelvis att den kunde hämta en produktbild fortare än den kunde hämta produkten (två separata fetch-anrop) vilket gjorde att den då renderade ut produkttexten reaktivt men src-attributet till bilden kom aldrig för den hade redan betraktats som tom och "reagerade" inte på faktiskt fetchad JSON-data.

Här inser jag då vikten i att vilja skicka tillbaka sammanslagna databastabelldata istället för att två olika fetch-anrop görs vilket då kan skapa dessa asynkrona krockar i hur snabbt den lyckas hämta en del av all data jämfört med en annan. Allt verkar ju så smidigt på exempelvis YouTube och Facebook med att fetcha ny data. Eller ja, Facebook laggar djävulen på min HTPC inkopplad till 4K-TV som annars ska klara av att spela upp 4K@60fps.

Som tur var är det svinsimpelt att slå samman databastabeller med Laravels Query Builder vilket verkligen gör att nu kanske det faktiskt går att börja göra riktiga databashämtningar med data från olika tabeller. Samtidigt går det att argumentera emot det genom att säga att sådant tär mer på databasprestandan. Å andra sidan måste ju data hämtas och presenteras på något vis i slutändan? 🤔

Allt som allt med denna kurs så var det riktigt kul att kötta ramverk inom JS, PHP & CSS och börja komma närmare arbetslivet tack vare samarbetsprojektet vilket i slutändan förhoppningsvis gick bra hos båda parter. Det återstå att se i det slutgiltiga betyget. "Javaskript-slutuppgiften är inlämnad" som Julius Caesar sa en gång.

Projektledningskursens sista inlämningsuppgift
I Projektledningskursen återstår nu bara den sista inlämningsuppgiften vilket är den individuella Projektlednings-"rapporten" vilket är den så kallade "intervjun" med projektledaren vid ett lokalt bolag här i stan vars IT-konsultchef jag hade turen att träffa vid ett IT-mingel förra veckan(?) arrangerat av samma lokala bolag.

Det kluriga med denna betygsättande uppgift är att det är mycket teori som ska skrivas och sedan reflekteras över i förhållande till svaren som jag fick i intervjun med projektledaren. Utmaningen är att min utgångspunkt var att jämföra traditionell projektledning med agil projektledning inom IT-branschen men då visade det sig att denna projektledare endast har arbetat med agil projektledning?!

Så var det med den saken: det går inte att skriva en jämförelserapport utan jag får helt enkelt koppla - i den utsträckning jag förstod något av vad som sades om agil projektledning - det som sades av projektledaren ihop med det som står om agil projektledning i kurslitteraturen. Som jag antydde till den intervjuade projektledaren så tycker jag det är mycket "sunt förnuft" medan det egentligen bara är min utgångspunkt på grund av min nuvarande världsbild.

Jag kommer givetvis återkomma med enorma mängder "teoretiskt ordbajsande" inom projektledning här om cirka en vecka när jag lämnat in den sista inlämningsuppgiften där. Det finns några kursrelaterade ställen där jag kan hitta bra jämförelsedata med de svar som jag fick från projektledaren.

Det blir vad det blir helt enkelt!

Och så var det det här med deployment igen...
I JS-ramverkskursen så lade jag in ett "ps" om att det behövs mer fokus på deployment-stadiet inom Webbutvecklingsprogrammet på distans för det är en liten detalj som skiljer "fullstack localhost developers" från riktiga "fullstack developers". Om du utvecklar för webben men den svåraste biten är att få ut något på webben, är du verkligen en webbutvecklare då eller bara localhost-utvecklare?

Den tillfälliga frustrationen kommer ifrån faktumet att idag när jag skrev färdigt rapporten för JS-ramverkskursen så fick jag reda på - vilket jag borde ha upptäckt själv såklart - att i uppgiftsbeskrivningen för rapporten så ska det framgå om huruvida vi har publicerat det hela på nätet eller annars om hur vi hade kunna tänkt oss att gå tillväga såväl som för- och nackdelar med vald publiceringsplattform för Laravel + Vue.js.

Ja, tanken är att vi ska inte känna att vi ska betala något för publiceringar av webbplatser under hela utbildningens gång samtidigt som det är tänkt att vi ändå samtidigt ska känna till hur vi skulle kunna ha gått tillväga med publiceringar hos betaltjänster för ändamålet ifråga. Smått motsägelsefullt, eller hur? 🤔

Självfallet går det att beskriva hur något skulle kunna göras utan att faktiskt kunna göra det, men om något ska vara på internet och inte lokalt, är det inte rätt lämpligt då att veta hur det ska gå till och kunna visa upp ens skarpa praktiska förmågor i det än att bara skriva om hur det teoretiskt skulle kunna gå till?

Som sagt har jag - och säkert ett par till i den virtuella klassen - min 'Akilles häl' i deployment-stadiet inom webbutveckling medan resterande bitar bara blir bättre med tiden. Jag skrev även något om att erfarna personer kan planera sin webbutveckling medan nybörjare (vilket jag bör klassas som fortfarande) bara kan gissa sig fram i sin planering för de saknar erfarenheten i hur lång tid saker och ting såväl som saknar de erfarenheter i vilka misstag de kan begå och vilka hinder de kommer att stöta på som kan visa sig vara riktiga "tidtjuvar".

Det är mitt tillfälliga "frustrationsfläktande" i denna kurs. Bortsett från den "lilla" biten om deployment - att få ut webbplatser ut på webben - så har den annars (och det säger jag utan någon sarkasm nu) varit mycket rolig och mentalt tillfredsställande då jag har fått börja sniffa på ramverk inom webbutveckling och även större mer arkitektmässiga saker som reaktivitetsparadigmer inom webbutveckling (t.ex. Signal) såväl som allmänna "utvecklingsmönster" (eng. design patterns) inom webbutveckling.

Efter ett tag köttande i Vue.js så kunde jag för första gången följa en mycket fundamental introduktionsvideo för React då det använder sig av "prop drilling" vilket jag inte är något större fan av men jag kunde "fatta" mer av det nu än för ett år sedan och även för bara ett par månader sen.

Två bekanta gör comeback i de två nästa kurserna!
I de två nästkommande kurserna:
- Computer Engineering BA (A), Programming in C#.NET - DT071G (VT2023 DT071G Datateknik GR (A), Programmering i C#.NET, 7,5 hp)
- Computer Engineering BA (B), Web Development with Javascript - DT162G (VT2023 DT162G Datateknik GR (B), Javascriptbaserad webbutveckling, 7,5 hp)

Kommer två kära bekanta lärare att göra comeback. Dessa två var även med i distansutbildningens första Webbutvecklingskurs vilket var en upplevelse i sig må jag säga nu så här i efterhand. En sak var den första kursen inte i alla fall: "nybörjarvänlig". Samtidigt går det att påstå att denna distansutbildning inte är för alla och att ett sätt kan vara att "sålla ut" de som hade missförstått det hela.

Samtidigt också så är det lite tråkigt att de som skulle kunna lyckas men så behöver mycket mer stöd i början än många andra så kommer de troligen att ge upp i och med hur "ovänligt" det faktiskt är mot riktiga tekniska nybörjare som kanske inte ens är riktigt "haj" med IT generellt talat.

Samtidigt också igen så kan jag väl då argumentera för att om det finns totalt ointresse inom IT utan det bara hördes om att "det finns pengar inom IT" så har man nog valt fel utbildning. Samma sak kan sägas om andra utbildningar: finns mycket pengar i civilingenjörsutbildningar också men finner man det supertråkigt och även jobbet så blir ju även lyckan densamma = tråkig.

Det återstå att se hur det blir med mer avancerade ämnen såsom C#.NET och Javascriptbaserad webbutveckling. Om det stämmer från förra året så kommer den slutbetygssättande uppgiften i C#.NET att vara helt valfritt: du får koda vad du vill så länge det är inom C#.NET. Låter ju delvis schysst, å andra sidan kan det upplevas som allt för brett?

Hursomhelst så blir kurserna roliga och äntligen slipper jag då projektledningen då det verkligen är en teoretisk bit som jag gärna lär mig mer via faktiskt arbete i praktiken. "Teorin" är bra för att kunna sätta ord på vedertagna processer, metoder, tekniker, strategier, faser, etc. inom projektledningsvärlden. Men som en i den virtuella klassen berättade om sin intervju med en projektledare så är verklighetens projektledning inte lika "kantig" och "rak" som teorin vill försöka föreslå många gånger. Oj, vilken överraskning!

På tal om deployment, mitt investerade webbhotell då?
För ett tag sedan skrev jag ju om att jag hade gått och blivit med webbhotell och en sak som slog mig då var just SEO-biten. Nu har jag ett webbhotell, jag har domän som pekar mot en "domains"-undermapp i min tilldelade IP-adress i webbhotellskontot och det är ju i klassiska HTML-filer som SEO optimeras bäst.

Det får mig att fundera då på hur sjutton Sweclockers och andra mer PHP-baserade webbplatser, exempelvis hela Wordpress-världen, lyckas SEO:a när det inte finns några faktiska HTML-filer för "spindlarna" att klättra mellan och/eller inuti? Något inom SEO har jag missat då även WordPress kan få god SEO trots att inga faktiska genererade sidor finns.

Eller är det här med "static site generation" kommer in i bilden? Innan jag vill börja koda min webbplats så vill jag göra det med rätt utvecklingsverktyg i grunden, och nej, jag kommer ej använda WordPress då jag behöver något mycket mer flexibelt. Jag undrar om något ramverk för Vue.js-ramverket kan hjälpa här? Nuxt.js kanske? Hm.

På återseende - som vanligt, i framtiden!

Mvh,
WKL.

P.S. I mitten på nästa månad ska jag på "IT-mingel" vid det lokala universitetet där vissa företag vill ragga ex-arbetesstudenter. Önska mig lycka till. Jag vill dock helst inte arbeta vid någon myndighet för jag upplever att det kommer att bli relativt repetiva uppgifet där. Eller så har jag helt fel om den saken!

---------
✔️Kurs 1: (B) HT2022 DT057G Datateknik GR (A), Webbutveckling I, 7,5 hp (distans)
✔️Kurs 2: (A) HT2022 DT084G Datateknik GR (A), Introduktion till programmering i JavaScript, 7,5 hp (distans)
✔️Kurs 3: (A) HT2022 DT068G Datateknik GR (B), Webbanvändbarhet, 7,5 hp (distans)
✔️Kurs 4: (B) HT2022 DT200G Datateknik GR (A), Grafisk teknik för webb, 7,5 hp (distans)
✔️Kurs 5: (A) VT2023 DT093G Datateknik GR (B), Webbutveckling II, 7,5 hp (distans)
✔️Kurs 6: (C) VT2023 DT003G Datateknik GR (A), Databaser, 7,5 hp (distans)
✔️Kurs 7: (A) VT2023 DT197G Datateknik GR (B), Webbdesign för CMS, 7,5 hp (distans)
✔️Kurs 8: (A) VT2023 DT173G Datateknik GR (B), Webbutveckling III, 7,5 hp (distans)
🚧Kurs 9: (Slutuppgift Pågår) HT2023 IK060G Informatik GR (A), Projektledning
🚧Kurs 10: (Slutuppgift inlämnad för slutbetyg) HT2023 DT193G Datateknik GR (B), Fullstack-utveckling med ramverk
🚧Kurs 11: (Inväntar registreringstillfälle) VT2023 DT162G Datateknik GR (B), Javascriptbaserad webbutveckling, 7,5 hp
🚧Kurs 12: (Inväntar registreringstillfälle) VT2023 DT071G Datateknik GR (A), Programmering i C#.NET, 7,5 hp