SvelteKit a legújabb az általam következő generációs alkalmazási keretrendszerek közül. Természetesen egy alkalmazást állít fel Önnek, a fájl alapú útválasztással, telepítéssel és szerveroldali rendereléssel, amelyet a Next örökké végzett. De a SvelteKit támogatja a beágyazott elrendezéseket, a szervermutációkat is, amelyek szinkronizálják az oldalon lévő adatokat, és néhány egyéb finomságot is, amelyekbe bele fogunk térni.
Ez a bejegyzés egy magas szintű bevezetés, hogy remélhetőleg némi izgalmat keltsen mindenki számára, aki még soha nem használta a SvelteKitet. Nyugodt túra lesz. Ha tetszik, amit látsz, a a teljes dokumentumok itt vannak.
Bizonyos szempontból ez a bejegyzés megírása kihívást jelent. A SvelteKit egy pályázati keret. Azért létezik, hogy segítsen… nos, alkalmazásokat készíteni. Ez megnehezíti a bemutatót. Nem lehetséges egy teljes alkalmazást blogbejegyzésben felépíteni. Ehelyett inkább használjuk a fantáziánkat. Felépítjük egy alkalmazás vázát, néhány üres UI helyőrzővel és merev kódolt statikus adatokkal. A cél nem egy tényleges alkalmazás létrehozása, hanem az, hogy megmutassa, hogyan működnek a SvelteKit mozgó részei, így saját alkalmazást készíthet.
Ennek érdekében példaként elkészítjük a jól bevált To-Do alkalmazást. De ne aggódjon, ez sokkal, de sokkal inkább a SvelteKit működésének megismerése, mint egy újabb To-Do alkalmazás létrehozása.
Ebben a bejegyzésben mindennek a kódja elérhető a GitHubon. Ez a projekt is telepítve a Vercelen élő demóhoz.
A projekt létrehozása
Egy új SvelteKit projekt felpörgetése elég egyszerű. Fuss npm create your-app-name
a terminálban, és válaszoljon a kérdésre. Ügyeljen arra, hogy a „Skeleton Project” lehetőséget válassza, de egyébként válassza ki a TypeScript, ESLint stb.
A projekt létrehozása után futtassa npm i
és a npm run dev
és egy fejlesztői kiszolgálónak el kell indulnia. Feldühödik localhost:5173
a böngészőben, és megkapja a skeleton alkalmazás helyőrző oldalát.
Alapvető útválasztás
Figyeljük meg a routes
mappa alatt src
. Ez tartalmazza az összes útvonalunk kódját. Már van egy +page.svelte
fájlt a gyökér tartalommal /
útvonal. Függetlenül attól, hogy a fájlhierarchiában hol tartózkodik, az elérési út tényleges oldala mindig rendelkezik a névvel +page.svelte
. Ezt szem előtt tartva hozzunk létre oldalakat /list
, /details
, /admin/user-settings
és a admin/paid-status
, és adjon hozzá néhány szöveges helyőrzőt minden oldalhoz.
A fájl elrendezésének valahogy így kell kinéznie:
Képesnek kell lennie a navigáláshoz az URL-útvonalak módosításával a böngésző címsorában.
elrendezések
Szeretnénk navigációs hivatkozásokat az alkalmazásunkba, de semmiképpen sem akarjuk a hozzájuk tartozó jelöléseket minden általunk létrehozott oldalon lemásolni. Tehát hozzunk létre egy +layout.svelte
fájl a mi gyökérben routes
mappát, amelyet a SvelteKit globális sablonként kezel az összes oldalhoz. Adjunk hozzá egy kis tartalmat:
<nav> <ul> <li> <a href="/hu/">Home</a> </li> <li> <a href="/hu/list">To-Do list</a> </li> <li> <a href="/hu/admin/paid-status">Account status</a> </li> <li> <a href="/hu/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>
Némi kezdetleges navigáció néhány alapvető stílussal. Különösen fontos a <slot />
címke. Ez nem a webösszetevőkkel és az árnyék DOM-mal használt slot, hanem egy Svelte funkció, amely jelzi, hogy hova helyezzük el a tartalmat. Amikor egy oldal megjelenik, az oldal tartalma a helyére csúszik.
És most van egy kis navigációnk! Nem nyerünk tervezési versenyt, de nem is igyekszünk.
Beágyazott elrendezések
Mi van akkor, ha azt szeretnénk, hogy az összes adminisztrátori oldalunk örökölje az általunk felépített normál elrendezést, de megosszon néhány, az összes adminisztrátori oldalra jellemző tulajdonsággal (de csak az adminisztrátori oldalakkal)? Nem baj, adunk még egyet +layout.svelte
fájlt a gyökérünkben admin
könyvtárat, amelyet az alatta lévő minden örökölni fog. Tegyük ezt meg, és adjuk hozzá ezt a tartalmat:
<div>This is an admin page</div> <slot /> <style> div { padding: 15px; margin: 10px 0; background-color: red; color: white; }
</style>
Hozzáadunk egy piros bannert, amely jelzi, hogy ez egy adminisztrációs oldal, majd a korábbiakhoz hasonlóan a <slot />
jelezve, hogy oldalunk tartalmát hova szeretnénk eljuttatni.
Gyökér elrendezésünk a korábbi renderelésekből. A gyökérelrendezés belsejében a <slot />
címke. A beágyazott elrendezés tartalma bekerül a gyökérelrendezésbe <slot />
. És végül, a beágyazott elrendezés határozza meg a sajátját <slot />
, amelybe az oldal tartalma megjelenik.
Ha az adminisztrációs oldalakra lép, az új piros szalaghirdetésnek kell megjelennie:
Adataink meghatározása
Rendben, rendereljünk néhány tényleges adatot – vagy legalább nézzük meg, hogyan jeleníthetünk meg néhány tényleges adatot. Százféleképpen hozhat létre adatbázist és csatlakozhat hozzá. Ez a bejegyzés azonban a SvelteKitről szól, nem pedig a DynamoDB kezeléséről, ezért helyette néhány statikus adatot "töltünk be". De ugyanazt a gépet fogjuk használni az adatok olvasásához és frissítéséhez, mint a valós adatokhoz. Egy igazi webalkalmazáshoz cserélje ki a statikus adatokat visszaadó funkciókat olyan függvényekkel, amelyek csatlakoznak és lekérdeznek bármilyen adatbázist, amelyet éppen használ.
Hozzunk létre egy piszok egyszerű modult lib/data/todoData.ts
amely néhány statikus adatot ad vissza mesterséges késleltetésekkel a valódi lekérdezések szimulálásához. Ezt meglátod lib
keresztül máshová importált mappa $lib
. Ez egy SvelteKit funkció az adott mappához, és még ezt is megteheti adja hozzá saját álneveit.
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);
}
Egy függvény, amely visszaadja a teendőink lapos tömbjét, a címkéink kikeresése, és egy függvény egyetlen teendő lekérésére (ez utóbbit fogjuk használni a Részletek oldalon).
Adataink betöltése folyamatban van
Hogyan vihetjük be ezeket az adatokat a Svelte oldalainkra? Számos módja van, de most hozzunk létre egy +page.server.js
fájl a mi list
mappát, és tedd bele ezt a tartalmat:
import { getTodos, getTags } from "$lib/data/todoData"; export function load() { const todos = getTodos(); const tags = getTags(); return { todos, tags, };
}
Meghatároztuk a load()
funkció, amely begyűjti az oldalhoz szükséges adatokat. Vedd észre, hogy mi vagyunk nem await
- hívja fel minket getTodos
és a getTags
aszinkron függvények. Ezzel adatbetöltési vízesést hozna létre, mivel a címkéink betöltése előtt várjuk, hogy beérkezzenek a teendőink. Ehelyett visszaadjuk a nyers ígéreteket load
, és a SvelteKit elvégzi a szükséges munkát await
Őket.
Tehát hogyan érhetjük el ezeket az adatokat oldalunk összetevőjéből? A SvelteKit a data
támasztékot a komponensünkhöz a rajta lévő adatokkal. A teendőinket és címkéinket az a segítségével érjük el reaktív hozzárendelés.
A Lista oldal komponensünk most így néz ki.
<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>
És ennek meg kell jelenítenie a teendőinket!
Elrendezési csoportok
Mielőtt továbblépnénk a Részletek oldalra, és átváltanánk az adatokat, vessünk egy pillantást egy igazán ügyes SvelteKit funkcióra: elrendezési csoportok. Láttunk már beágyazott elrendezést az összes adminisztrációs oldalhoz, de mi van akkor, ha meg akarunk osztani egy elrendezést tetszőleges oldalak között a fájlrendszerünk azonos szintjén? Mi van akkor, ha csak a Lista oldalunk és a Részletek oldalunk között szeretnénk megosztani egy elrendezést? Ezen a szinten már rendelkezünk globális elrendezéssel. Ehelyett létrehozhatunk egy új könyvtárat, de zárójelben lévő névvel, például:
Most van egy elrendezési csoportunk, amely lefedi a Lista és a Részletek oldalainkat. elneveztem (todo-management)
de bárminek nevezheted. Hogy világos legyen, ez a név lesz nem befolyásolja az elrendezéscsoporton belüli oldalak URL-címét. Az URL-ek változatlanok maradnak; Az elrendezéscsoportok lehetővé teszik megosztott elrendezések hozzáadását az oldalakhoz anélkül, hogy mindegyik egy teljes könyvtárat tartalmazna. routes
.
We tudott adjunk hozzá egy +layout.svelte
fájl és néhány buta <div>
szalaghirdetés: „Hé, teendőket kezelünk”. De csináljunk valami érdekesebbet. Az elrendezések meghatározhatják load()
funkciókat annak érdekében, hogy az alattuk lévő összes útvonalra vonatkozóan adatokat szolgáltasson. Használjuk ezt a funkciót címkéink betöltésére – mivel a mi címkéinket fogjuk használni details
oldal — amellett, hogy a list
oldalunk már megvan.
A valóságban szinte biztosan nem éri meg egy elrendezési csoportot csak egyetlen adat megadására kényszeríteni; jobb megkettőzni ezeket az adatokat a load()
funkciót minden oldalhoz. De ehhez a bejegyzéshez ez ad ürügyet, hogy láthassunk egy új SvelteKit funkciót!
Először is menjünk bele a miénkbe list
oldalt +page.server.js
fájlt, és távolítsa el belőle a címkéket.
import { getTodos, getTags } from "$lib/data/todoData"; export function load() { const todos = getTodos(); return { todos, };
}
A Lista oldalunknak most hibát kell produkálnia, mivel nincs tags
tárgy. Javítsuk ki ezt az a. hozzáadásával +layout.server.js
fájlt az elrendezéscsoportunkban, majd definiálja a load()
függvény, amely betölti a címkéinket.
import { getTags } from "$lib/data/todoData"; export function load() { const tags = getTags(); return { tags, };
}
És éppen így, a Lista oldalunk ismét renderelődik!
Több helyről töltünk be adatokat
Tegyünk egy jó pontot arra, ami itt történik:
- Meghatároztuk a
load()
funkciót az elrendezéscsoportunkhoz, amelyet behelyeztünk+layout.server.js
. - Ez szolgáltat adatokat minden az elrendezés által kiszolgált oldalak közül – ami jelen esetben a Lista és a Részletek oldalakat jelenti.
- Lista oldalunk meghatározza a
load()
benne lévő funkció+page.server.js
fájlt. - A SvelteKit elvégzi az adatforrások eredményeinek összegyűjtését, összevonását és mindkettőt elérhetővé tételét
data
.
Részletek oldalunk
A Részletek oldalt használjuk a teendők szerkesztéséhez. Először adjunk hozzá egy oszlopot a Lista oldalunk táblázatához, amely a Részletek oldalra mutat a teendőelem azonosítójával a lekérdezési karakterláncban.
<td><a href="/hu/details?id={t.id}">Edit</a></td>
Most építsük fel a Részletek oldalunkat. Először is hozzáadunk egy betöltőt a szerkesztett teendők megragadásához. Hozzon létre egy +page.server.js
in /details
, ezzel a tartalommal:
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, };
}
Rakodónk a url
tulajdonság, amelyből lekérdezési karakterlánc értékeket húzhatunk le. Ez megkönnyíti a szerkesztett teendők megkeresését. Rendereljük meg ezt a teendőt a szerkesztési funkciókkal együtt.
A SvelteKit csodálatos beépített mutációs képességekkel rendelkezik, mindaddig, amíg űrlapokat használ. Emlékszel az űrlapokra? Itt a Részletek oldalunk. A rövidség kedvéért kihagytam a stílusokat.
<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>
A címkéket, mint korábban, az elrendezési csoportunk betöltőjéből, a teendőket pedig az oldalunk betöltőjéből ragadjuk meg. Megragadjuk az igazit tag
objektumokat a teendők címkeazonosítóinak listájából, majd mindent renderel. Létrehozunk egy űrlapot, amelyben az azonosító rejtett, a cím pedig egy valós bevitelt tartalmaz. Megjelenítjük a címkéket, majd biztosítunk egy gombot az űrlap elküldéséhez.
Ha észrevetted a use:enhance
, ami egyszerűen azt utasítja a SvelteKit-nek, hogy használjon progresszív fejlesztést, és az Ajaxot, hogy küldje el űrlapunkat. Valószínűleg mindig ezt fogod használni.
Hogyan mentsük el a szerkesztéseinket?
Figyeljük meg a action="?/editTodo"
tulajdonság magán az űrlapon? Ez megmondja, hogy hova szeretnénk elküldeni szerkesztett adatainkat. A mi esetünkben szeretnénk alávetni egy editTodo
"akció."
Hozzuk létre úgy, hogy hozzáadjuk a következőket a +page.server.js
már rendelkezünk a Részletek fájllal (amely jelenleg egy load()
funkció, hogy megragadja a teendőinket):
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"); },
};
Az űrlapműveletek a request
objektum, amely hozzáférést biztosít a mi formData
, amelynek van get
módszer különböző űrlapmezőinkhez. Hozzáadtuk ezt a rejtett bemenetet az azonosító értékéhez, hogy itt megragadhassuk, és megkereshessük a szerkesztett teendőt. Késést szimulálunk, újat hívunk updateTodo()
módszert, majd irányítsa vissza a felhasználót a /list
oldalon. A updateTodo()
a metódus csupán a statikus adatainkat frissíti; a való életben valamilyen frissítést futtatna az Ön által használt adattárban.
export async function updateTodo(id, newTitle) { const todo = todos.find(t => t.id == id); Object.assign(todo, { title: newTitle });
}
Próbáljuk ki. Először a Lista oldalra lépünk:
Most kattintsunk az egyik teendőnél a Szerkesztés gombra, hogy előhívjuk a szerkesztőoldalt /details
.
Új címet adunk hozzá:
Most kattintson a Mentés gombra. Ez vissza kell térítenünk magunkhoz /list
oldalon, az új teendőcímmel.
Hogyan jelent meg így az új cím? Automatikus volt. Miután átirányítottuk a /list
oldalon, a SvelteKit automatikusan újrafutotta az összes betöltőnket, ahogyan ettől függetlenül is tette volna. Ez a legfontosabb előrelépés, amelyet a következő generációs alkalmazási keretrendszerek, például a SvelteKit, Remixés Következő 13 biztosítani. Ahelyett, hogy kényelmes módot adnának az oldalak megjelenítésére, majd sok szerencsét kívánnának az adatok frissítéséhez szükséges végpontok lekéréséhez, integrálják az adatmutációt az adatbetöltés mellett, lehetővé téve a kettő párhuzamos működését.
Néhány dolog, amire kíváncsi lehet…
Ez a mutációs frissítés nem tűnik túl lenyűgözőnek. A rakodók újraindulnak, amikor navigál. Mi van, ha nem adtunk hozzá átirányítást az űrlapművelethez, hanem az aktuális oldalon maradtunk? A SvelteKit a frissítést az űrlapműveletben hajtaná végre, mint korábban, de megtenné még mindig futtassa újra az aktuális oldal összes betöltőjét, beleértve az oldalelrendezés(ek)ben lévő betöltőket is.
Lehet-e célzottabb eszközünk adataink érvénytelenítésére? Például a címkéinket nem szerkesztették, így a való életben nem szeretnénk újra lekérdezni őket. Igen, amit megmutattam, az csak az alapértelmezett űrlapviselkedés a SvelteKitben. Az alapértelmezett viselkedést a következővel kapcsolhatja ki visszahívást biztosít use:enhance
. Ezután a SvelteKit kézikönyvet biztosít érvénytelenítési funkciók.
Az adatok betöltése minden navigációhoz potenciálisan költséges és szükségtelen. Gyorsítótárazhatom-e ezeket az adatokat, mint az olyan eszközökkel, mint a react-query
? Igen, csak másképp. A SvelteKit lehetővé teszi a web által már biztosított gyorsítótár-vezérlő fejlécek beállítását (majd tiszteletben tartását). És a gyorsítótár érvénytelenítési mechanizmusairól egy következő bejegyzésben fogok kitérni.
Minden, amit ebben a cikkben tettünk, statikus adatokat használ, és módosítja a memóriában lévő értékeket. Ha mindent vissza kell állítania és újra kell kezdenie, állítsa le és indítsa újra a npm run dev
Csomóponti folyamat.
Csomagolta
Alig kapargattuk a SvelteKit felületét, de remélhetőleg már eleget látott ahhoz, hogy izguljon. Nem is emlékszem, mikor találtam utoljára ennyire szórakoztatónak a webfejlesztést. Az olyan dolgokkal, mint a kötegelés, az útválasztás, az SSR és a központi telepítés, több időt töltök kódolással, mint konfigurálással.
Íme néhány további forrás, amelyet a SvelteKit tanulásának következő lépéseiként használhat:
- SEO által támogatott tartalom és PR terjesztés. Erősödjön még ma.
- Platoblockchain. Web3 metaverzum intelligencia. Felerősített tudás. Hozzáférés itt.
- Forrás: https://css-tricks.com/getting-started-with-sveltekit/
- 1
- 10
- 100
- 11
- 7
- 9
- 98
- a
- Képes
- Rólunk
- erről
- hozzáférés
- Fiók
- Akció
- cselekvések
- Ádám
- hozzáadott
- mellett
- cím
- admin
- fejlett
- érint
- Minden termék
- lehetővé téve
- mellett
- már
- mindig
- összeg
- és a
- Másik
- válasz
- bárki
- app
- Alkalmazás
- alkalmazások
- alkalmazott
- körül
- Sor
- cikkben
- mesterséges
- kijelölt
- Automatikus
- automatikusan
- elérhető
- várják
- vissza
- háttér
- zászló
- bár
- alapvető
- előtt
- BEST
- Jobb
- között
- Bit
- Fekete
- Blog
- Blogbejegyzések
- Kék
- Doboz
- hoz
- böngésző
- bogarak
- épít
- épült
- beépített
- gomb
- Gyorsítótár
- hívás
- kéri
- képességek
- eset
- biztosan
- kihívást
- változó
- világos
- kód
- Kódolás
- szín
- Oszlop
- hogyan
- Közös
- Versenyek
- összetevő
- alkatrészek
- konferenciák
- Csatlakozás
- Csatlakozó
- Konzol
- tartalom
- Kényelmes
- tudott
- Tanfolyam
- fedő
- Covers
- teremt
- készítette
- létrehozása
- Jelenlegi
- Jelenleg
- dátum
- adatbázis
- alapértelmezett
- Annak meghatározása,
- késleltetés
- késedelmek
- bevetés
- Design
- részletek
- Dev
- Fejlesztés
- DID
- kijelző
- Nem
- Ennek
- ne
- minden
- máshol
- elég
- Egész
- teljességét
- hiba
- stb.
- Még
- Minden
- minden
- példa
- izgatott
- Izgalom
- létezik
- drága
- export
- megvalósítható
- Funkció
- kevés
- Fields
- filé
- Fájlok
- Végül
- végén
- természet
- vezetéknév
- Rögzít
- lakás
- következő
- örökké
- forma
- formátum
- formák
- talált
- keretek
- ból ből
- Tele
- móka
- funkció
- funkcionalitás
- funkciók
- kap
- szerzés
- Ad
- Giving
- Globális
- Go
- cél
- Goes
- megy
- megragad
- Csoport
- Csoportok
- történik
- Kemény
- fejlécek
- segít
- itt
- Rejtett
- hierarchia
- magas szinten
- tart
- remélhetőleg
- Vízszintes
- Hogyan
- HTML
- HTTPS
- BETEG
- képzeletét
- importál
- fontosság
- hatásos
- in
- Beleértve
- kezdetben
- bemenet
- helyette
- integrálni
- érdekes
- Bevezetés
- IT
- tételek
- maga
- JavaScript
- Kulcs
- keresztnév
- legutolsó
- elrendezés
- tanulás
- Lets
- szint
- Li
- élet
- fény
- Valószínű
- linkek
- Lista
- él
- kiszámításának
- rakodó
- betöltés
- terhelések
- Hosszú
- néz
- MEGJELENÉS
- lookup
- szerencse
- gépezet
- csinál
- KÉSZÍT
- Gyártás
- kezelése
- kézikönyv
- Margó
- Anyag
- eszközök
- Memory design
- csupán
- egyesülő
- módszer
- esetleg
- bánja
- Modulok
- több
- mozog
- mozgó
- többszörös
- név
- Nevezett
- nav
- Keresse
- Navigáció
- elengedhetetlen
- Szükség
- Új
- következő
- csomópont
- normális
- szám
- tárgy
- objektumok
- ONE
- érdekében
- Más
- másképp
- saját
- különös
- ösvény
- Teljesít
- vedd
- darab
- darabok
- placeholder
- Plató
- Platón adatintelligencia
- PlatoData
- pont
- állás
- Hozzászólások
- potenciálisan
- Készít
- Probléma
- folyamat
- gyárt
- progresszív
- program
- ígér
- ingatlan
- védett
- ad
- biztosít
- Húz
- tesz
- kérdés
- Nyers
- Olvass
- igazi
- való élet
- Valóság
- Piros
- átirányítás
- Tekintet nélkül
- marad
- eszébe jut
- eltávolítása
- vakolás
- vakolatok
- kérni
- Tudástár
- Eredmények
- visszatérés
- visszatérő
- Visszatér
- visszaszáll
- Gazdag
- gyökér
- Útvonal
- útvonalak
- futás
- futás
- azonos
- Megtakarítás
- látás
- szolgálja
- készlet
- árnyék
- Megosztás
- megosztott
- kellene
- előadás
- Egyszerű
- egyszerűen
- óta
- egyetlen
- Csúszik
- So
- néhány
- valami
- Források
- költ
- kezdet
- kezdődött
- tartózkodott
- Lépései
- megáll
- beküldése
- Támogatja
- felületi
- rendszer
- táblázat
- TAG
- Vesz
- bevétel
- Beszél
- Tandem
- célzott
- megmondja
- sablon
- terminál
- A
- dolgok
- egész
- idő
- Cím
- nak nek
- együtt
- is
- szerszámok
- Bejárás
- kezelésére
- igaz
- FORDULAT
- Gépelt
- ui
- alatt
- Frissítések
- Frissítés
- URL
- us
- használ
- használó
- érték
- Értékek
- különféle
- keresztül
- Megnézem
- várjon
- kívánatos
- módon
- háló
- webkomponensek
- webfejlesztés
- Mit
- ami
- fehér
- lesz
- nyer
- nélkül
- csodálatos
- Munka
- művek
- érdemes
- lenne
- ír
- te
- A te
- zephyrnet