Uppsetning

Node.js er javascript js CLI keyrsluumhverfi sem gerir okkur kleift að sækja ýmissa js pakka. Hægt er að sjá alla pakka sem ég hef sótt í package.json skránni á git. Þeir hjálpa okkur með uppsetningu á síðunni og virkni hennar. Til að setja þessa síðu upp var skipunin npx create-next-app vip keyrð. Hún stofnar Next js app möppu. Nextjs er react framework sem einfaldar okkur lífið til muna. Þá er next js búið að ákveða með hverskonar hætti síður og leiðsögn (routing) þeirra á milli skuli vera. Við fáum þá uppsett package.json skrá sem inniheldur dev,build,start og lint skipunum. Þær eru keyrðar með t.d. skipuninninpm run devsem ég hef notast við á meðan ég vann þessa síðu. Þetta sparar okkur það að setja upp alla þá node js pakka sem við mundum þurfa til að gera okkar eigin dev skipun með browser-sync og sass-watch í mínu tilviki. Það er einnig búið að útfæra hvernig .env er sett upp og vill next að við notumst við skrá undir nafninu .env.local. Ég ákvað einnig að notast við nýja app routerin þeirra. Þar er undirslóðir síðunar í raun vísanir á möppur með sameiginlegu nafnini og inni þeim er skrá sem heitir page.tsx sem inniheldur viðeigandi síðu.

Afhverju Next js

Next.js er react framework/umgjörð. React er framenda javascript virkni sem byggir html síðunar í tölvu notandas sem heimsækir hana. Þetta getur verið mikill kostur ef við erum t.d. að sækja gögn úr API eins og vörur og sýna notanda. Þá getum við bara skrifað react javascript kóða sem seigir vafra notendans hvernig htmlið á að lýta út. Annar kostur við þetta er að síðan byggist í vafra notandans og getur því brugðist við ýmsu og birt notenda snögglega. Einnig er javascript kóðinn sem sér um virkni síðunar skrifaður með efni síðunar samtímis. Við þurfum því ekki að notast við query selectora til að bæta við eða fjarlægja til dæmis CSS klassa. Við getum bara notast við boolean breytur og burgðist við breytingum þeirra í glugga notendans þegar ástand þeirra breytist. Þarna er búið að samnýta virkni og útlit á sem þægilegastan máta. Gallinn við þetta er hinsvegar að þegar notandinn sækir síðuna fær hann bara tómt html með fullt af javascripti sem fyllir svo inní. K .Nextjs gerir okkur kleypt að keyra react hjá hýsandanum og fá þá grunn html skjalið það er síðan sent með react kóða til vafra notandans. Þá fær notandinn grunn html skjalið sem inniheldur mest allt sem hann þarf í grunninn. React byggir svo síðuna í raun aftur onná það sem er komið með tilskipunum sem next js skilur eftir fyrir það. Þá fáum við í raun kosti þess að keyra htmlið í vafra notendans og við skilum ekki frá okkur tómum html skjölum. Helsta dæmið um þetta á þessari síðu er Hafðu samband síðan þar sem formið notast við notenda virkni og í tilvísunar stikunni efst á skjánum sem sýnir notenda hvar hann er stattur. Til að sjá htmlið sem þú færð frá hýsingunni geturu ýtt á F12 eða viðeigandi takka til að fá upp network flipan frá vafranum þínum, sjá mynd.

Það er hægt að lýta á það þannig að Next.js gefur okkur sniðmát að react forritunar umhverfi til að smíða síðuna sem styður bæði SSR (server side rendering) og CSR (client side rendering).

Ef að við förum í gegnum listan af GET fyrirspurnum sem eru sendar til localhost og því sem er móttekið sjáum við að fyrst sækir vafrinn html skjalið. Í html skjalinu er svo tekið fram að það eigi að sækja CSS skjöl og js scriptur. CSS skjölin segja til um útlit skjalsins og js um virknina. En þar sem við erum að notast við react eru þetta líka scriptur sem segja til um útlit síðunar. Neðst eru layout.js sem segir til um alment skipulag á öllum síðum og fyrir ofan það page.js sem er fyrir þessa tiltekna síðu. Ef að við værum einungis að notast við react en ekki next þá mundi notandinn fá tómt html skjal sem mundi svo vísa vafranum hvert hann ætti að sækja js sciptuna sem mundi svo byggja skjalið fyrir notendann. Þetta hjálpar okkur í leitarvélum þar sem við gefum frá okkur html skjal með gögnum, head og öðru metadata.

Síður með app router

Á github er hægt að sjá skrárnar sem samsetja þessa síðu ef þú ert staðsettur í rótar skjalinu þá geturu séður hverja síðu í undirslóðinni/src/app/. Þar er ein mappa fyrir hverja síðu. Inní hverri möppu er page.tsx skjal sem stýrir efni síðunar. Þetta er htmlið sem fer inní layout.tsx sem býr svo til alla síðuna. Ef það þurfti að breyta útlitinu er sér .module.scss skrá sem segir til um klassa fyrir þá skrá. Hægt er að sjá við hvaða skrár hver síða notar með því að opna viðeigandi page.tsx skrá og lesa hvaðan styles er importað. Í einhverjum tilvikum notast hún við tvær og er þá t.d. ttstyles breytu imortað í staðin. Einnig eru javascript skrár sem annaðhvort sjá um virkni eða útlit í sömu möppu. Þeim er síðan importað og kallað á í page.tsx skránni. Best er að skoða þetta sjálfur á github.

Tölvuteikningar

Spurning um hvaða efni ég gæti hýst á þessari síðu sem gæti verið áhugavert og gagnlegt hrjáði mig lengi. Einn daginn mundi ég eftir rubikskubbnum sem ég hafði gert sem verkefni í áfanga hjá Háskóla Íslands. Það var þó búið að fara yfir teikningarnar og krota í þær og ekki er hægt að setja slíkt til sýnis.

Kubbur

Ég er ennþá nemandi við háskólan svo ég get sótt Inventor og við getum teiknað kubbinn á ný. Það er þó einfaldara en sagt. Þegar endurteikningarnar voru hafna kom í ljós ýmis mistök sem mér hafði yfirsést í fyrstu. Það voru því ekki einungis málsetningarnar sem voru ábótavntar heldur líkanið í heild sinni passaði í raun ekki rétt saman. Eftir smá þraus er þó komið nýtt teikningasett. Það passar þó ekki alveg inná síðuna. Ekki væri við hæfi að hafa pdf embeddað í iframe með litina á mis við síðuna. Inventor gefur manni valkostin á að taka út myndir í hvaða upplausn sem er. Við tökum því myndir af teikningasettinu í nægilega hárri upplausn og eftir smá litabreytinga og stúss erum við komnir með .png myndir sem eiga heima hérna. Vistum þær sem litlar png myndir. En þetta er fremur þurrt. Listi af myndum með málsetningum. Við getum gert betur. Three js hefur vakið áhuga minn mikið nýlega og er react með útfærslu af því í boði. Við sækjum því viðeigandi pakka með npm i @react-three/drei @react-three/fiber. Ég skoða sýnidæmi frá next um notkun á three.js og sé að þeir notast við .glb fyrir modelin. Viti menn Inventor styður þetta. Frábært. Eftir smá puð næ ég loks að koma kubbnum inn á síðuna en maður sér í raun ekkert. Hann gæti svo gott sem verið tvívíddur. Annað vandamál kubburinn tekur upp svo stóran hluta síðunar að í hvert skipti sem ég ætla að skrolla þá stækka ég bara og minnka kubbinn. Slökkvum á allri virkni innan gluggans í bili. Byrjum á að laga útlitið. Til þess að gera það þurfum við að breyta efninu sem hann er úr. Það er enginn einn rétt lausn við því. Samkvæmt skjölum um three js bjóða þeir upp á wireframe. Fyrsta lausn hermum eftir next sýnidæminu. sækir nodes úr .glb skjalinu sem byggja upp hlutin úr useGLTF fallinu sem skilar objecy sem inniheldur nodes. Því næst er notast við react component MeshStandardMaterial sem setur efnið á hlutinn. En kuburrinn okkar er samsetning. Þannig við þyrftum að fara í gegn hlut fyrir hlut og stilla þá. Kemur í ljós að .glb inniheldur ekki bara einn hlut heldur alla. Þeir hafa allir sitt eigið nafn. Þetta virkar fyrir alla íhlutina en dugir ekki fyrir samsetninguna. Ég íhugaði það að sleppa bara kubbnum þar til ég sá þessa snilld í þráð sem var um eitthvað annað varðandi efni/áklæðingu hlutar.scene.traverse Þetta ítrar í gegnum alla senuna sem við getum sótt með useGLTF fallinu. Þá er bara að stilla hvern hlut o.material.wireframe = true;. Einfaldara verður það ekki. Til að smíða síðuna þá bý ég til tvær möppur eina með myndum og eina með líkönum. Líkön og myndir viðeigandi hlutar deila nafni. Þá er bara að búa til component í react sem ítrar í gegnum og sækir hvert mynda & líkana par og skilar lista af li jsx elementum. sjá /tolvuteikingar/kubbur/kubburthreejs.tsx á github.

Lestarvagn

Vagninn er mikið stærri og flóknari. Ég er ekki með .glb skjölin hans þar sem ekki hvarflaði að mér að nota það á sínum tíma en ég er með .obj skjöl. Blender sem er frítt þrívíddar forrit styður bæði .obj og .glb, bingo. Notaði það til að læra um innihald .glb skjala. Glb skjöl innihalda hvern íhlut,áklæðningu og jafnvel hreyfingar allt með sínum eigin nöfnum. Teikningasettið er hinsvegar hátt í 90 bls og ég sé mér ekki fært í að endurgera þetta. Breytum einu litlu obj sem sýnir þó eitthvað af vagninum í .glb höfum svo bara hlekk á pdf fyrir áhuga sama. Vagninn er 10mb yikes. Vonandi hefur fólk ekki áhuga á lestarvögnum. Annars er /lestarvagnthreejs.tsx skráin bara einfaldari útgáfa af ...threejs.tsx skránni fyrir kubbinn, engin ítrun engar málsetningar bara líkan og hlekkur.

Hafðu samband

Þetta er einn mikilvægasti hlutinn á allri síðunni. Það að hafa form sem þú getur útfilt til að hafa samband er lykilatriði í heimasíðu síðu. Það er til mikið efni um það hvernig er hægt að setja þetta upp. Fyrsta tilraun gengur ágættlega þar til við komum að API hlutanum. Kemur í ljós að þetta hefur breyst frekar nýlega. Smá hausverkur en það er hægt að finna út úr þessu. API eiga að fylga reglunni src/app/API/slóð/route.ts þar sem slóð er umbeðið API. Þetta líkist þá síðunum í app router sem hafa alltaf page.tsx fyrir hverja möppu. Nú þegar við erum komin með gögnin viljum við senda þau áfram. Nodemailer lausnin hljómar best þar sem ég nenni ekki að skrá mig á einhvern lista hjá API út í bæ. Sækjum nodemailer npm i nodemailer. Óli vefforritari ítrekaði þó mikilvægi þess að sía gögninn sem maður tekur við. Set upp einfaldan validator notenda megin sem kannar hvort netfangið sé með réttu móti. Leyfi þá notendanum að senda inn gögninn. Les úr þeim. Athuga hvort netfangið sé till í raun og veru með öðrum pakka frá Node.js. Sjá util möppu á git og einnig api/contact/route.ts. Ef netfangid finnst þá sendi ég mér sjálfum póst annars fást villuboð til notendans. Þessi email validator er þó eitthvað gallaður get tildæmis ekki sent in fyrirspurn með hí netfanginu mínu. SMTP villu og ef ég nota contact@elli.vip gefur hann í skyn að ég sé að gera stafsetning villu. Slekk á þessum athugunum í bili og skoða bara mx,regex og hvert netfangið gæti verið disposable.

Hvernig hefuru samband?

1. Taka við gögnum

Notandi fyllir út í formið og smellir á senda. Nú bregst javascript við. React gefur okkur fallið useForm sem passar að allir reitir séu útfylltir sem þarf að að fylla í nafn,fyrirspurn og tölvupóst. Þegar notandinn hefur fyllt út í reitina og send inn þá skoðum við fyrst gögnin. Þar sem fólk getur verið með allskonar nöfn og fyrirspurnir skoðum við aðalega netfangid. Ef uppsetning á netfangi er ekki rétt skilum við villuboðum til notenda. Annars xss hreinsum við gögnin af góðum vana og sendum áfram. Nú tókst að fara í gegnum fallið messagevalidationmiddleware. Þá verður breytan til sem tekur við þeim gögnum. Við setjum því breytuna wait semtrue og þá er tómt div látið fylla skjá notendans sem tilkynnir honum um að við séum að reyna að senda skilaboðin. Gögnin eru síðan send á contact API.

2. Senda gögn

Í fyrra skrifi gengum við úr skugga um að gögnin væru með réttu formi. En við vitum ekki hvort tölvupósturinn er til eða ekki. Hann gæti verið bull@rugl.sull og sloppið í gegnum síuna sem skoðar bara hvort hann sé formataður rétt. Við notumst því við annan validator hýsingar megin. Hann var of stangur fyrir minn smekk vildi ekki taka á móti @hi.is netföngum einu sinni. Slökkvum á innslátta villu skoðunum hans þar sem við gerðum það í fyrra skrefi og á smtp athugun. Ef netfnagid stenst regex og mx athugun þá er höldum við áfram. Annars fær notandinn villuboð um að netfangid sé í ólagi. Nodemailer kóðinn er tekin af netinu og lítið breyttur. Nú ætti notandinn að fá skilaboð um að sendinginn hafi tekist og ég póst með fyrirspurninni.

Hönnun

• #F9FBE9

• #F6F7EB

• #ffffff

• #dddddd

• #0F0E16

• #000000

Litavalið var einfalt nýverið hef ég verið mjög hrifin af hugmyndinni navy and platinum pink og átti bleikur að vera áherslu liturinn til að byrja með en það kom illa fyrir augu. Þetta er þá navy,white og latte litir aðalega. Ég hef ítrekað verið að notast við navy litað letur á létt latte bakgrunn í skilaverkenfum í vefforritun. Ég opnaði upp figma hendi inn mynd og hinu sígilda poppins letri og var kominn með grunninn að hönnuninn eins og hún leggur sig í dag.

Það að hafa hafðu samband flippan feitari er til að ýta augum notendans upp í hægra hornið þar sem hann kallar augun til sýn. Þetta er mikið léttari og fíngerðari hönnun en að hafa bleika öskrandi stafi. Bara bjartari og feitari. Sjálfsmyndin er úr myndbandinu mttur. Hugmyndin að því að hafa valmyndir sem spil kom frá því að ég hef alltaf haft mikið dálæti af spilum og að gluggar á síðum eru oft nefndir cards eða spjöld. Hvert spil er hannað ífigma með að mestu svg myndum og exportaði svo hvern ramma sem svg. Flest spilin ættu því að lýta vel út við allar upplausnir. Þrista kubburinn var heilt megabyte á tímapunkti en með því að viðhalda flókna kraðakinu bara í miðju myndinni og að búa til einfaldari kubb fyrir hin merkin þá komumst við niður í 600kb, ég vill ekki fórna kraðakinu svo við seigjum þetta gott í bili.

SCSS

Til að útfæra síðan útlitið á síðunni notaðist ég við scss sem bætir við þægilegri virkri við css sem minnkar allskyns óþarfa endurskrif. Það getur jafnvel verið læsilegra. Next styður scss með því að import styles frá ./heiti skráar.module.scss,sjá eina slíka skrá á git.Ég kynntist því nýlega í css að geta haft áhrif á alla meðlimi foreldris sem eru ekki valdir ef einn er valin. Nota það í leiðarvísirstikunni hér efst á síðunni en einnig í spilunum. Var að fikta með scale í css og tók eftir því að ef þú heldur hæðinni fastri og tansitionar hliðini. Frá einum í núlll og núll í einn lýtur smá út eins og þú sért að snúa hlutnum. Notum þetta á spilin. Búum til bakhlið í figma og þegar framhliðin er búin að snúast þá snúum við bakhliðinni. Sleppum bara bakhliðinni og snúum framhliðinni strax til baka. Þar sem notandinn sá þetta í fyrsta skiptið fyllir heilinn inn í í framhaldinu. Að snúa spilum á forsíðunni er uppáhalds virknin, hvað mig varðar. Uppröðun spilana notast við display: grid; sem ég hef vanist við að nota þó nokkuð. Hægt er að sjá scss kóðan fyrir spilin á git í skjalinu.../cardnavigation.module.scss

Myndbönd

Mun setja inn eh lítinn teksta og myndir úr myndböndunum, embedda svo myndböndinn eða vísa beint á þau skoða þetta seinna.

Hýsing

Þessi síða er í hýsingu hjá Vercel útgefanda Next.js. Einföld tenging við github repo. Svo bara ýta á build. Reyndar var ég óvart með gæsalappir inní htmlinu smá obbó og exportaði font stylingunum úr layout. Ekkert mál að laga það, baddabing baddabúm síðan er komin í loftið á elli.vip