A Glitch.com egy online szolgáltató, webes alkalmazásokat lehet szerkeszteni, és publikálni vele. Kiváló eszköz arrar a célra, hogy prototípusokat, egyszerű statikus weboldalakat osszunk meg másokkal. A publikálás ingyenes, néhány korlátozással (havidíjjas előfizetéssel ezek a korlátozások kikerülhetőek).
Regisztrálni az alábbi címen lehet: https://glitch.com/signup.
Facebook, Google és GitHub fiókkal tudunk regisztrálni, de lehetőség van email címet is megadni.
Projekt létrehozása
Létrehozás után átkerülünk a projekt szerkesztőfelületére:
Az első állomány amit megnyit a felület a README.md
ami egy kis súgó, érdemes elolvasni a tartalmát. Általános magyarázatot kapunk benne a Glitch.com-ról, és a szerkesztőben már létrehozott állományokról.
index.html
- ebbe az állományba kerül a projektün főoldalányk tartalma.
style.css
- ez az állomány tartalmazza a CSS stílusokat
script.js
- ide kerülnek az interaktivitást vezérlő JavaScript kódok
assets - ebbe a mappába tölthetjük be a multimédiás tartalmakat, amik az oldalon jelennek meg
A bal oldali menüből az index.html
állományt kiválasztva nyílik meg a szerkesztőfelület, ez egy online szövegszerkesztő (korlátozott lehetőségekkel):
A projekt nevét és URL-jét a Glitch.com a létrehozásnál véletlenszerűen határozza meg, ha szeretnénk módosítani a bal felső sarokban lévő menüben tehetjük meg, a kinyíló kis ablakban kattintsunk a projekt nevére. Ugyanitt adhatunk egy leírást is a projekthez.
...
Lehetőség van a Glitch.com-on elhelyezett projektjeink szerkesztésére a Visual Studio Code-ban, ennek számos előnye van, töbek között a VS Code több segítséget ad, és jobb átláthatóságot biztosít.
Projektet a VS Code parancsértelmezőjével lehet megnyitni, nyomjuk meg a Ctrl+Shift+p billentyű kombinációt (vagy a menüből View/Command Palette). A megjelenő ablakba írjuk be, hogy Glitch:
Listában megjelennek a Glitch-el kapcsolatos parancsok, válasszuk ki az Open Projekt (Projekt megnyitása parancsot).
Ahhoz hogy az online projektet tudjuk szerkeszteni, a szövegszerkesztőnket be kell jelentkeztetni a Glitch.com rendszerébe, ha ezt még nem tettük meg a VS Code felkínálja a bejelentkezést.
Válasszuk ki az online autentikációt (Sing in on glitch.com). A VS Code megnyitja az alapértelmezett böngészőt, amiben engedélyezhetjük a VS Code kapcsolódását - feltéve hogy be vagyunk jelentkezve a Glitch.com on ezzel a böngészővel.
Visszatérve a VS Code-ba már ki tudjuk választani a korábban az online felületen létrehozott projektünket. Minden amit szerkesztünk, és elmentünk azonnal megjelenik a projekten.
Felső menüből válasszuk ki a(új projekt) gombot. Ekkor a rendszer megkérdezi, hogy milyen tipusú projektet szeretnénk létrehozni, válasszuk a opciót, ezzel egy egyszerű statikus weboldalt hozhatunk létre.
Az új projektet a menüpont alatt tudjuk megnézni, új ablakban vagy osztott képernyős nézetben tekinthetjük meg, mindkét esetben azonnal látjuk a módosításainkat az oldalon.
A bal oldali függőleges menüből nyissuk meg a VS Code bővítmény kezelőjét (Extensions), a keresőbe írjuk be a Glitch
kulcsszót, és válasszuk ki a Glitch bővítményt és nyomjuk meg az gombot.