A webfejlesztéssel kapcsolatos sok bosszantó dolog egyikének nem az a módja, hogy megossza projektjeit másokkal. Sok esetben a projektet webkiszolgálón kell üzemeltetnie, vagy az összes megfelelő fájlt el kell küldenie valakinek, aki meg akarja látni, mit hozott létre. De a CodePen nevű, ügyes online eszköznek köszönhetően nem kell többé aggódnia azért.
CodePen.io
A CodePen egy ingyenes eszköz, amely lehetővé teszi a projektek online tárolását anélkül, hogy soha nem kellene fillért fizetnie. Az induláshoz lépjen a CodePen.io oldalra, és hozzon létre egy ingyenes fiókot.
Miután ezt megtette, létrehozhat egy „tollat” a képernyő jobb felső sarkában található „Új toll” gombra kattintva.
Ezt követően bármilyen HTML-t, CSS-t és JavaScriptet felvehet a megfelelő mezőkbe. Miután elkezdett hozzáadni valamelyik kódot, élő előnézetet fog látni a létrehozott tartalomról. Az első tollat megnevezheti a bal felső sarokban. Miután rákattintott az első „Mentés” elemre, egyszerűen megoszthatja az oldal URL-jét a barátokkal, a családdal és a munkatársakkal, hogy láthassák, mit dolgoznak.
Így fog kinézni a toll, és tartalmaz valamilyen kódot (a Tribute Page nevű Free Code Camp projekt jóvoltából):
Saját toll létrehozásakor az indulás előtt át kell mennie a Beállításokon. Amikor rákattint az „Új toll” gombra, látnia kell egy tollsablont, amely készen áll valamilyen kód beírására. A jobb felső sarokban egy “Beállítások” gomb jelenik meg. Kattintson erre (látnia kell az alábbi képernyőt).
Itt áttekintheti a HTML, CSS és JavaScript fülöket, hogy bizonyos információkat hozzáadhasson. A HTML lapon metainformációkat adhat hozzá, azokat a dolgokat, amelyeknek bele kell menniük
fül, és így tovább. A CSS alatt hozzáadhat olyan CSS előfeldolgozókat, mint a LESS és a Sass. Nem csak, de külső CSS-t is hozzáadhat, például a Bootstrap és az Alapítvány. A JavaScript lapon hozzáadhat egy JavaScript előfeldolgozót, például a Babel vagy a CoffeeScript. Ezenkívül külső JavaScript-keretrendszereket is hozzáadhat, például Angular, React, Lodash, D3 stb.
Végül a CodePen lehetővé teszi, hogy megváltoztassa a nézetet. Az alapértelmezett nézet a Szerkesztő nézet, amely lehetővé teszi, hogy beírja a kódját, és egy kis előnézetet kapjon az alábbi konzolban. De vannak más lehetőségek is, különösen hasznos a „Teljes oldal” nézet, ahol a projektet úgy láthatja, mintha egy weboldalon lenne élő. Van egy maroknyi más nézet, amelyre válthat, érdemes játszani!
A CodePen valóban egy ügyes eszköz, és csak hasznosságának felületét érintettük. Érdemes továbbmenni a CodePen.io oldalra, és néhány projekthez felhasználni, majd ha úgy érzi, ossza meg barátaival vagy munkatársaival.
Mit gondolsz a CodePenről? Használtál hasonló eszközt? Tudassa velünk az alábbi megjegyzés szakaszban!
