SvelteKit on uusim, mida ma nimetaksin järgmise põlvkonna rakendusraamistikeks. Loomulikult loob see teie jaoks rakenduse koos failipõhise marsruutimise, juurutamise ja serveripoolse renderdamisega, mida Next on igavesti teinud. Kuid SvelteKit toetab ka pesastatud paigutusi, serverimutatsioone, mis sünkroonivad teie lehel olevaid andmeid, ja mõnda muud mugavust, mida me käsitleme.
See postitus on mõeldud kõrgetasemeliseks sissejuhatuseks, et loodetavasti tekitada põnevust kõigile, kes pole kunagi SvelteKiti kasutanud. See saab olema pingevaba tuur. Kui teile meeldib see, mida näete, täielikud dokumendid on siin.
Mõnes mõttes on selle postituse kirjutamine keeruline. SvelteKit on rakendusraamistik. See on loodud selleks, et aidata teil luua... noh, rakendusi. See muudab demo raskeks. Terve rakenduse loomine ajaveebipostituses ei ole otstarbekas. Selle asemel kasutame natuke oma kujutlusvõimet. Koostame rakenduse skeleti, kasutame tühjad kasutajaliidese kohahoidjad ja kõvakodeeritud staatilised andmed. Eesmärk ei ole tegeliku rakenduse loomine, vaid selle asemel, et näidata teile, kuidas SvelteKiti liikuvad osad töötavad, et saaksite luua oma rakenduse.
Selleks loome näitena proovitud ja tõese To-Do rakenduse. Kuid ärge muretsege, see on palju-palju rohkem selleks, et näha, kuidas SvelteKit töötab, kui luua järjekordne rakendus To-Do.
Kõige selle postituse kood on saadaval GitHubis. See projekt on ka kasutusele Vercelis live-demo jaoks.
Oma projekti loomine
Uue SvelteKiti projekti loomine on piisavalt lihtne. Jookse npm create your-app-name
terminalis ja vastake küsimustele. Valige kindlasti "Skeleton Project", kuid tehke TypeScripti, ESLinti jne jaoks soovitud valikud.
Kui projekt on loodud, käivitage npm i
ja npm run dev
ja arendusserver peaks tööle hakkama. Süüta localhost:5173
brauseris ja saate skeletirakenduse kohatäitelehe.
Põhiline marsruutimine
Teade routes
kausta all src
. See sisaldab koodi kõigi meie marsruutide jaoks. Seal on juba a +page.svelte
fail sinna juure sisuga /
tee. Olenemata sellest, kus failihierarhias viibite, on selle tee tegelikul lehel alati nimi +page.svelte
. Seda silmas pidades loome lehed /list
, /details
, /admin/user-settings
ja admin/paid-status
ja lisage iga lehe jaoks ka mõned tekstikohahoidjad.
Teie faili paigutus peaks välja nägema umbes selline:
Peaksite saama ringi liikuda, muutes brauseri aadressiribal URL-i teid.
paigutusega
Soovime oma rakendusse navigeerimislinke, kuid kindlasti ei taha me nende märgistust igal loodud lehel kopeerida. Niisiis, loome a +layout.svelte
fail meie juurtes routes
kausta, mida SvelteKit käsitleb kõigi lehtede globaalse mallina. Lisame sellele sisu:
<nav> <ul> <li> <a href="/et/">Home</a> </li> <li> <a href="/et/list">To-Do list</a> </li> <li> <a href="/et/admin/paid-status">Account status</a> </li> <li> <a href="/et/admin/user-settings">User settings</a> </li> </ul>
</nav> <slot /> <style> nav { background-color: beige; } nav ul { display: flex; } li { list-style: none; margin: 15px; } a { text-decoration: none; color: black; }
</style>
Mõni algeline navigeerimine koos mõne põhistiiliga. Eriti oluline on <slot />
tag. See on mitte pesa, mida kasutate veebikomponentide ja vari-DOM-iga, vaid pigem Svelte funktsioon, mis näitab, kuhu meie sisu paigutada. Lehe renderdamisel libiseb lehe sisu pesasse.
Ja nüüd on meil natuke navigeerimist! Me ei võida ühtegi disainivõistlust, aga me ei püüagi.
Pesastatud paigutused
Mis siis, kui sooviksime, et kõik meie administraatorilehed päriksid äsja loodud tavapaigutust, kuid jagaksid ka mõningaid asju, mis on ühised kõikidele administraatorilehtedele (aga ainult administraatorilehtedele)? Pole probleemi, lisame teise +layout.svelte
fail meie juurus admin
kataloog, mille pärib kõik selle all olev. Teeme seda ja lisame selle sisu:
<div>This is an admin page</div> <slot /> <style> div { padding: 15px; margin: 10px 0; background-color: red; color: white; }
</style>
Lisame punase bänneri, mis näitab, et see on administraatori leht, ja seejärel, nagu varem, a <slot />
mis tähistab seda, kuhu tahame oma lehe sisu jõuda.
Meie juurpaigutus enne renderdamist. Juurepaigutuse sees on a <slot />
tag. Pesastatud paigutuse sisu läheb juurpaigutusse <slot />
. Ja lõpuks, pesastatud paigutus määrab oma <slot />
, millesse lehe sisu renderdatakse.
Kui navigeerite administraatori lehtedele, peaksite nägema uut punast bännerit:
Meie andmete määratlemine
OK, renderdame mõned tegelikud andmed – või vähemalt vaatame, kuidas saame tegelikke andmeid renderdada. Andmebaasi loomiseks ja sellega ühenduse loomiseks on sada võimalust. See postitus käsitleb aga SvelteKiti, mitte DynamoDB haldamist, nii et laadime selle asemel mõned staatilised andmed. Kuid me kasutame nende lugemiseks ja värskendamiseks samu masinaid, mida kasutaksite pärisandmete jaoks. Tõelise veebirakenduse jaoks vahetage staatilisi andmeid tagastavad funktsioonid funktsioonidega, mis loovad ühenduse mis tahes andmebaasiga ja esitavad päringuid, mida te juhtute kasutama.
Loome sisse mustlihtsa mooduli lib/data/todoData.ts
mis tagastab mõned staatilised andmed koos kunstlike viivitustega tegelike päringute simuleerimiseks. Sa näed seda lib
kaudu mujalt imporditud kaust $lib
. See on selle konkreetse kausta SvelteKiti funktsioon ja saate seda isegi teha lisage oma varjunimed.
let todos = [ { id: 1, title: "Write SvelteKit intro blog post", assigned: "Adam", tags: [1] }, { id: 2, title: "Write SvelteKit advanced data loading blog post", assigned: "Adam", tags: [1] }, { id: 3, title: "Prepare RenderATL talk", assigned: "Adam", tags: [2] }, { id: 4, title: "Fix all SvelteKit bugs", assigned: "Rich", tags: [3] }, { id: 5, title: "Edit Adam's blog posts", assigned: "Geoff", tags: [4] },
]; let tags = [ { id: 1, name: "SvelteKit Content", color: "ded" }, { id: 2, name: "Conferences", color: "purple" }, { id: 3, name: "SvelteKit Development", color: "pink" }, { id: 4, name: "CSS-Tricks Admin", color: "blue" },
]; export const wait = async amount => new Promise(res => setTimeout(res, amount ?? 100)); export async function getTodos() { await wait(); return todos;
} export async function getTags() { await wait(); return tags.reduce((lookup, tag) => { lookup[tag.id] = tag; return lookup; }, {});
} export async function getTodo(id) { return todos.find(t => t.id == id);
}
Funktsioon meie ülesannete kindla massiivi tagastamiseks, meie siltide otsimine ja funktsioon ühe ülesande toomiseks (viimast kasutame lehel Üksikasjad).
Meie andmete laadimine
Kuidas me saame need andmed oma Svelte'i lehtedele? Võimalusi on mitu, kuid praegu loome a +page.server.js
fail meie hulgas list
kausta ja pange see sisu sinna:
import { getTodos, getTags } from "$lib/data/todoData"; export function load() { const todos = getTodos(); const tags = getTags(); return { todos, tags, };
}
Oleme määratlenud a load()
funktsioon, mis tõmbab lehe jaoks vajalikud andmed. Pange tähele, et me oleme mitte await
- helistades meie poole getTodos
ja getTags
asünkroonimisfunktsioonid. See tekitaks andmete laadimise kose, kuna ootame enne siltide laadimist, kuni meie ülesanded saabuvad. Selle asemel tagastame toores lubadused load
, ja SvelteKit teeb selleks vajaliku töö await
Neid.
Niisiis, kuidas me oma lehe komponendi kaudu nendele andmetele juurde pääseme? SvelteKit pakub a data
meie komponendi tugi koos selle andmetega. Juurdepääseme selle kaudu oma ülesannetele ja siltidele, kasutades a reaktiivne ülesanne.
Meie loendi lehe komponent näeb nüüd välja selline.
<script> export let data; $: ({ todo, tags } = data);
</script> <table cellspacing="10" cellpadding="10"> <thead> <tr> <th>Task</th> <th>Tags</th> <th>Assigned</th> </tr> </thead> <tbody> {#each todos as t} <tr> <td>{t.title}</td> <td>{t.tags.map((id) => tags[id].name).join(', ')}</td> <td>{t.assigned}</td> </tr> {/each} </tbody>
</table> <style> th { text-align: left; }
</style>
Ja see peaks muutma meie ülesanneteks!
Paigutuse rühmad
Enne kui liigume lehele Üksikasjad ja muudame andmeid, heitkem pilk ühele tõeliselt kenale SvelteKiti funktsioonile: paigutusrühmad. Oleme juba näinud kõigi administraatori lehtede pesastatud paigutusi, kuid mis siis, kui sooviksime jagada paigutust suvaliste lehtede vahel meie failisüsteemi samal tasemel? Täpsemalt, mis siis, kui sooviksime jagada paigutust ainult meie loendi lehe ja üksikasjade lehe vahel? Sellel tasemel on meil juba globaalne paigutus. Selle asemel saame luua uue kataloogi, kuid sulgudes oleva nimega, näiteks järgmiselt:
Meil on nüüd paigutusrühm, mis hõlmab meie loendi ja üksikasjade lehti. Panin sellele nime (todo-management)
aga võid nimetada seda mis iganes sulle meeldib. Selguse huvides on see nimi mitte mõjutada paigutusrühma sees olevate lehtede URL-e. URL-id jäävad samaks; paigutusrühmad võimaldavad lisada lehtedele jagatud paigutusi ilma, et need kõik hõlmaksid kogu kataloogi routes
.
We võiks Lisa +layout.svelte
faili ja mõned rumalad <div>
bänner: "Hei, me tegeleme ülesannetega". Aga teeme midagi huvitavamat. Paigutusi saab määratleda load()
funktsioonid, et pakkuda andmeid kõigi nende all olevate marsruutide kohta. Kasutagem seda funktsiooni oma siltide laadimiseks – kuna me kasutame oma silte oma details
leht — lisaks list
leht, mis meil juba on.
Tegelikkuses ei ole paigutusrühma sundimine ainult ühe andmeosa esitamiseks peaaegu kindlasti seda väärt; parem on need andmed failis dubleerida load()
funktsioon iga lehe jaoks. Kuid selle postituse jaoks on see vabandus, mida vajame uue SvelteKiti funktsiooni nägemiseks!
Kõigepealt läheme meie juurde list
lehe oma +page.server.js
faili ja eemaldage sellelt sildid.
import { getTodos, getTags } from "$lib/data/todoData"; export function load() { const todos = getTodos(); return { todos, };
}
Meie loendi leht peaks nüüd tootma vea, kuna seda pole tags
objektiks. Parandame selle, lisades a +layout.server.js
faili meie paigutusrühmas, seejärel määrake a load()
funktsioon, mis laadib meie sildid.
import { getTags } from "$lib/data/todoData"; export function load() { const tags = getTags(); return { tags, };
}
Ja just nii, meie loendi leht renderdatakse taas!
Laadime andmeid mitmest asukohast
Anname siin toimuvale täpse punkti:
- Määrasime a
load()
funktsioon meie paigutusrühma jaoks, mille me sisestasime+layout.server.js
. - See pakub andmeid kõik lehtedest, mida küljendus teenindab – mis antud juhul tähendab meie loendi ja üksikasjade lehti.
- Meie loendi leht määratleb ka a
load()
funktsioon, mis sellesse kuulub+page.server.js
faili. - SvelteKit teeb nende andmeallikate tulemuste kogumise, liitmise ja mõlema jaoks kättesaadavaks tegemise
data
.
Meie üksikasjade leht
Ülesande muutmiseks kasutame lehte Üksikasjad. Esmalt lisame loendilehe tabelisse veeru, mis lingib lehele Üksikasjad ja mille päringustringis on ülesande ID.
<td><a href="/et/details?id={t.id}">Edit</a></td>
Nüüd koostame oma üksikasjade lehe. Esiteks lisame laaduri, et haarata redigeeritav ülesanne. Loo +page.server.js
in /details
, sellise sisuga:
import { getTodo, updateTodo, wait } from "$lib/data/todoData"; export function load({ url }) { const id = url.searchParams.get("id"); console.log(id); const todo = getTodo(id); return { todo, };
}
Meie laaduriga on kaasas a url
atribuut, millest saame päringustringi väärtusi tõmmata. See muudab muudetava ülesannete otsimise lihtsaks. Renderdame selle ülesande koos redigeerimisfunktsioonidega.
SvelteKitil on imelised sisseehitatud mutatsioonivõimalused, kuni kasutate vorme. Kas mäletate vorme? Siin on meie üksikasjade leht. Olen lühiduse pärast stiilid kõrvale jätnud.
<script> import { enhance } from "$app/forms"; export let data; $: ({ todo, tags } = data); $: currentTags = todo.tags.map(id => tags[id]);
</script> <form use:enhance method="post" action="?/editTodo"> <input name="id" type="hidden" value="{todo.id}" /> <input name="title" value="{todo.title}" /> <div> {#each currentTags as tag} <span style="{`color:" ${tag.color};`}>{tag.name}</span> {/each} </div> <button>Save</button>
</form>
Haarame sildid nagu varem meie küljendusrühma laadurist ja ülesanded meie lehe laadijast. Me haarame tegelikust tag
objektid ülesannete sildi ID-de loendist ja seejärel kõik renderdada. Loome vormi, mille ID jaoks on peidetud sisend ja pealkirja jaoks reaalne sisend. Kuvame sildid ja anname seejärel vormi esitamise nupu.
Kui märkasite use:enhance
, mis lihtsalt käsib SvelteKitil kasutada järkjärgulist täiustust ja Ajaxil esitada meie vorm. Tõenäoliselt kasutate seda alati.
Kuidas me oma muudatusi salvestame?
Teade action="?/editTodo"
atribuut vormil endal? See ütleb meile, kuhu tahame oma muudetud andmed esitada. Meie juhtumi puhul tahame alluda an editTodo
"tegevus."
Loome selle, lisades sellele järgmise +page.server.js
fail, mis meil juba on üksikasjade jaoks (millel on praegu a load()
funktsioon, et haarata meie ülesanne):
import { redirect } from "@sveltejs/kit"; // ... export const actions = { async editTodo({ request }) { const formData = await request.formData(); const id = formData.get("id"); const newTitle = formData.get("title"); await wait(250); updateTodo(id, newTitle); throw redirect(303, "/list"); },
};
Vormitoimingud annavad meile a request
objekt, mis annab juurdepääsu meie formData
, millel on a get
meetod meie erinevate vormiväljade jaoks. Lisasime ID-väärtuse peidetud sisendi, et saaksime selle siit haarata, et vaadata üles muudetav ülesanne. Simuleerime viivitust, helistame uuele updateTodo()
meetodit, seejärel suunake kasutaja tagasi lehele /list
lehel. updateTodo()
meetod lihtsalt värskendab meie staatilisi andmeid; päriselus käivitaksite mis tahes kasutatavas andmesalves mingisuguse värskenduse.
export async function updateTodo(id, newTitle) { const todo = todos.find(t => t.id == id); Object.assign(todo, { title: newTitle });
}
Proovime järele. Kõigepealt läheme loendi lehele:
Nüüd klõpsame redigeerimislehe kuvamiseks ühe ülesande üksuse nuppu Redigeeri /details
.
Lisame uue pealkirja:
Nüüd klõpsake nuppu Salvesta. See peaks meid oma juurde tagasi viima /list
lehele, millele on rakendatud uus ülesannete pealkiri.
Kuidas uus pealkiri nii ilmus? See oli automaatne. Kui suunasime ümber aadressile /list
lehel, käivitas SvelteKit kõik meie laadurid automaatselt uuesti, nagu ta oleks sellest hoolimata teinud. See on peamine edasiminek, mida järgmise põlvkonna rakendusraamistikud, nagu SvelteKit, Remixja Järgmine 13 pakkuda. Selle asemel, et pakkuda teile mugavat viisi lehtede renderdamiseks ja soovida teile edu andmete värskendamiseks vajalike lõpp-punktide toomisel, integreerivad need andmete laadimise kõrvale andmete mutatsiooni, võimaldades neil kahel paralleelselt töötada.
Mõned asjad, mis võivad teile huvi pakkuda…
See mutatsioonivärskendus ei tundu liiga muljetavaldav. Laadurid käivituvad uuesti, kui navigeerite. Mis siis, kui me poleks oma vormitoimingusse ümbersuunamist lisanud, vaid jäänud praegusele lehele? SvelteKit teostaks värskendamise vormitoimingus, nagu varemgi, kuid teeks seda veel käivitage uuesti kõik praeguse lehe laadijad, sealhulgas lehepaigutuse(te) laadijad.
Kas meil on sihipärasemaid vahendeid andmete kehtetuks tunnistamiseks? Näiteks meie silte ei muudetud, nii et päriselus me neid uuesti päringuid teha ei tahaks. Jah, see, mida ma teile näitasin, on lihtsalt SvelteKiti vormide vaikekäitumine. Vaikekäitumise saate välja lülitada tagasihelistamist use:enhance
. Seejärel pakub SvelteKit juhendit kehtetuks tunnistamise funktsioonid.
Andmete laadimine iga navigatsiooni jaoks on potentsiaalselt kulukas ja mittevajalik. Kas ma saan need andmed vahemällu salvestada, nagu teen selliste tööriistadega nagu react-query
? Jah, lihtsalt teisiti. SvelteKit võimaldab teil määrata (ja seejärel austada) vahemälu juhtimise päiseid, mida veebis juba pakub. Ja ma käsitlen vahemälu kehtetuks tunnistamise mehhanisme järgmises postituses.
Kõik, mida oleme selle artikli jooksul teinud, kasutab staatilisi andmeid ja muudab mälus olevaid väärtusi. Kui teil on vaja kõik taastada ja otsast alustada, peatage ja taaskäivitage npm run dev
Sõlmeprotsess.
Pakke kuni
Oleme vaevu SvelteKiti pinda kriimustanud, kuid loodetavasti olete näinud piisavalt, et sellest vaimustuda. Ma ei mäleta, millal ma viimati veebiarendust nii lõbusaks pidasin. Kuna sellised asjad nagu komplekteerimine, marsruutimine, SSR ja juurutamine on kõik kohe käsitsetavad, kulub mul rohkem aega kodeerimisele kui konfigureerimisele.
Siin on veel mõned ressursid, mida saate kasutada SvelteKiti õppimise järgmiste sammudena.
- SEO-põhise sisu ja PR-levi. Võimenduge juba täna.
- Platoblockchain. Web3 metaversiooni intelligentsus. Täiustatud teadmised. Juurdepääs siia.
- Allikas: https://css-tricks.com/getting-started-with-sveltekit/
- 1
- 10
- 100
- 11
- 7
- 9
- 98
- a
- Võimalik
- MEIST
- sellest
- juurdepääs
- konto
- tegevus
- meetmete
- Adam
- lisatud
- lisamine
- aadress
- admin
- edasijõudnud
- mõjutada
- Materjal: BPA ja flataatide vaba plastik
- Lubades
- kõrval
- juba
- alati
- summa
- ja
- Teine
- vastus
- keegi
- app
- taotlus
- rakendused
- rakendatud
- ümber
- Array
- artikkel
- kunstlik
- määratud
- Automaatne
- automaatselt
- saadaval
- ootama
- tagasi
- tagapõhi
- lipp
- baar
- põhiline
- enne
- BEST
- Parem
- vahel
- Natuke
- Must
- Blogi
- Blogi postitused
- sinine
- Kast
- tooma
- brauseri
- vead
- ehitama
- ehitatud
- sisseehitatud
- nupp
- Cache
- helistama
- Kutsub
- võimeid
- juhul
- kindlasti
- raske
- muutuv
- selge
- kood
- Kodeerimine
- värv
- Veerg
- Tulema
- ühine
- Võistlused
- komponent
- komponendid
- konverentsid
- Võta meiega ühendust
- ühendamine
- konsool
- sisu
- Mugav
- võiks
- Kursus
- kattes
- KATTED
- looma
- loodud
- loomine
- Praegune
- Praegu
- andmed
- andmebaas
- vaikimisi
- Määratleb
- viivitus
- viivitusi
- kasutuselevõtu
- Disain
- detailid
- dev
- & Tarkvaraarendus
- DID
- Ekraan
- Ei tee
- teeme
- Ära
- iga
- mujal
- piisavalt
- Kogu
- tervikuna
- viga
- jms
- Isegi
- Iga
- kõik
- näide
- erutatud
- Erutus
- olemas
- kallis
- eksport
- teostatav
- tunnusjoon
- vähe
- Valdkonnad
- fail
- Faile
- Lõpuks
- lõpp
- Tulekahju
- esimene
- Määrama
- flat
- Järel
- igavesti
- vorm
- formaat
- vormid
- avastatud
- raamistikud
- Alates
- täis
- lõbu
- funktsioon
- funktsionaalsus
- funktsioonid
- saama
- saamine
- Andma
- andmine
- Globaalne
- Go
- eesmärk
- Goes
- läheb
- rüütama
- Grupp
- Grupi omad
- juhtuda
- Raske
- päised
- aitama
- siin
- varjatud
- hierarhia
- kõrgetasemeline
- omab
- loodetavasti
- Horisontaalne
- Kuidas
- HTML
- HTTPS
- Ma teen
- ettekujutused
- import
- tähtsus
- muljetavaldav
- in
- Kaasa arvatud
- esialgne
- sisend
- selle asemel
- integreerima
- huvitav
- Sissejuhatus
- IT
- kirjed
- ise
- JavaScript
- Võti
- viimane
- hiljemalt
- Layout
- õppimine
- Lets
- Tase
- Li
- elu
- valgus
- Tõenäoliselt
- lingid
- nimekiri
- elama
- koormus
- laadur
- laadimine
- saadetised
- Pikk
- Vaata
- välimus
- lookup
- õnn
- masinad
- tegema
- TEEB
- Tegemine
- juhtiv
- käsiraamat
- Varu
- küsimus
- vahendid
- Mälu
- ainult
- ühinevad
- meetod
- võib
- meeles
- moodulid
- rohkem
- liikuma
- liikuv
- mitmekordne
- nimi
- Nimega
- nav
- Navigate
- NAVIGATSIOON
- vajalik
- Vajadus
- Uus
- järgmine
- sõlme
- normaalne
- number
- objekt
- esemeid
- ONE
- et
- Muu
- muidu
- enda
- eriline
- tee
- täitma
- valima
- tükk
- tükki
- kohatäide
- Platon
- Platoni andmete intelligentsus
- PlatoData
- Punkt
- post
- Postitusi
- potentsiaalselt
- Valmistama
- Probleem
- protsess
- tootma
- progressiivne
- projekt
- Lubadused
- kinnisvara
- kaitstud
- anda
- annab
- Tõmbab
- panema
- küsimus
- Töötlemata
- Lugenud
- reaalne
- päris elu
- Reaalsus
- Red
- suunata
- Sõltumata sellest
- jääma
- meeles pidama
- kõrvaldama
- rendering
- muudab
- taotleda
- Vahendid
- Tulemused
- tagasipöördumine
- tagasi
- Tulu
- naasma
- Rikas
- juur
- Marsruut
- liinidel
- jooks
- jooksmine
- sama
- Säästa
- nägemine
- teenib
- komplekt
- vari
- Jaga
- jagatud
- peaks
- näitama
- lihtne
- lihtsalt
- alates
- ühekordne
- Slaid
- So
- mõned
- midagi
- Allikad
- kulutama
- algus
- alustatud
- peatus
- Sammud
- Peatus
- esitama
- Toetab
- Pind
- süsteem
- tabel
- TAG
- Võtma
- võtmine
- rääkima
- Tandem
- suunatud
- ütleb
- šabloon
- terminal
- .
- asjad
- läbi kogu
- aeg
- Kapslid
- et
- kokku
- liiga
- töövahendid
- ekskursioon
- käsitlema
- tõsi
- Pöörake
- Masinakiri
- ui
- all
- Värskendused
- Uudised
- URL
- us
- kasutama
- Kasutaja
- väärtus
- Väärtused
- eri
- kaudu
- vaade
- ootama
- tagaotsitav
- kuidas
- web
- veebikomponendid
- Veebidisain
- M
- mis
- valge
- will
- võitma
- ilma
- imeline
- Töö
- töötab
- väärt
- oleks
- kirjutama
- sa
- Sinu
- sephyrnet