Home-theater-designers
A JavaScript webfejlesztés megkezdése frusztráló folyamat lehet, de vannak olyan eszközök, amelyek megkönnyítik ezt.
CodePen.io egy böngészőn belüli kódolási környezet, amelyet mind a kódolás megtanulására, mind az ötletek prototípusának gyors prototipálására terveztek, minimális gond nélkül.
Ebben a cikkben megvizsgáljuk a webhely néhány funkcióját, és hogyan segíthetnek abban, hogy jobb programozóvá váljon.
Mi az a CodePen?
A CodePen a toll , amely három különböző ablakot tartalmaz a HTML, a CSS és a JavaScript számára, valamint egy előnézeti panelt, amely gépelés közben valós időben frissül.
Bár gyakran használják a webfejlesztők weboldalak ötleteinek bemutatására, ez egy remek hely a front-end webfejlesztés alapjainak elsajátítására is. Íme a legjelentősebb funkciók, amelyeket a CodePen használatakor tudnia kell.
1. Előfeldolgozók
Az előfeldolgozók a kódolás egyszerűsítése érdekében értelmezett vagy fordított nyelvek. A kényelem érdekében funkciókat adhatnak hozzá egy nyelvhez, és megkönnyíthetik a kód olvasását. A webfejlesztés során a HTML, CSS és JavaScript előfeldolgozóinak kombinációját használják a tiszta kód gyors létrehozásához.
Ha webfejlesztést tanul, és különféle előfeldolgozókat szeretne kipróbálni, a CodePen lehetővé teszi az előfeldolgozók menet közbeni átváltását, és az összeállított kód valós idejű megtekintését. A CodePen alkalmazás három ablaktáblájának mindegyike rendelkezik egy legördülő menüvel a jobb felső sarokban. Válassza a lehetőséget Az összeállított HTML/CSS/JS megtekintése hogy megtudja, hogyan kell értelmezni a kódot.
Ebben a tollban egy egyszerű webhelyet hoztunk létre Haml és Sass fejléc szövegének stílusához. Kiválasztás Nézet Összeállítva a szabványos HTML -t és CSS -t mutatja. Ebben a példában a különbség minimális. Egy új nyelv elsajátítása során azonban hasznos lehet látni, hogyan néz ki az előfeldolgozott kód összeállítása után.
2. Külső erőforrások
Az előfeldolgozók natív támogatása mellett a CodePen támogatja a külső szkripteket. Ez teszi a tökéletes helyet arra, hogy gyakorlati tapasztalatokat szerezzen a könyvtárakkal személyes projektjeihez, vagy felkeresse a népszerű webes alkalmazáskönyvtárakat, például a React-ot.
Külső könyvtár hozzáadásához nyissa meg a Beállítások a tollán, és lépjen a JavaScript lapra. Az erőforrások hozzáadásának két módja van, vagy az erőforrás URL -címének manuális hozzáadásával, vagy kereséssel.
Ezt a funkciót használtuk cikkünkben webes animáció a mo.js segítségével , Bábel előfeldolgozásával együtt.
Lásd a tollat Mojs MUO példa írta Ian ( @Bardoctorus ) a CodePen -en.
Igen, a CodePen toll beágyazható! Lépjen tovább, és kattintson a fenti előnézeti ablaktáblára a Mo.js bemutató eredményeinek megtekintéséhez!
Más tollak a külső könyvtárakhoz hasonlóan importálhatók. Ez azt jelenti, hogy a korábban megírt toll elemeit felhasználhatja az új tollak hasonló moduljaihoz. CodePen felhasználó Adam Egyszerű szavazás a toll jó példa erre.
3. Sablonok
Amikor új fogalmakat tanul vagy új ötleteket tesztel, gyakran használ hasonló összetevőket, és újrakezdi ugyanazokat a lépéseket. A CodePen lehetővé teszi sablonok létrehozását, amelyek kivághatják az ismétlést, és egyenesen a lényegre térhetnek.
Sablon létrehozásához nyisson meg egy új tollat, végezze el a módosításokat, és válassza a lehetőséget Sablon csúszka a beállítások menüben.
https://vimeo.com/221428690
A közelmúltig az ingyenes felhasználók csak három sablont készíthettek, de most minden felhasználónak annyi sablonja lehet a fiókjában, amennyit csak akar. Tökéletes ahhoz, hogy minimális késéssel új ötletekbe kezdjen!
4. Divat -együttműködés
A CodePennel való együttműködés és tanítás képessége lehet a legnagyobb kincse. A programozók számára már rengeteg nagyszerű együttműködési eszköz áll rendelkezésre, de a CodePen megközelítése egyszerű és intuitív.
A CodePen profi felhasználói létrehozhatnak egy új tollat, és megnyithatják azt a Válts nézőpontot menü. Ez a toll linkjét megosztható meghívóvá változtatja, amely a CodePen Pro tervétől függően skálázható számú embert fogad el.
hol találok eladó kiskutyákat?
Ebben az esetben HTML-t írtam, miközben egy barátom valós időben frissítette a CSS-t, és a címkézett kurzor azonosította, hol dolgoznak.
A link birtokában bárki csatlakozhat és használhatja a böngészőn belüli csevegési funkciót, függetlenül attól, hogy profi felhasználó, vagy akár CodePen-fiókkal rendelkezik. Feltéve, hogy az automatikus mentés ki van kapcsolva, csak a toll tulajdonosa mentheti el a módosításokat, így biztonságosan megnyithatja a kódot mások előtt kockázat nélkül.
Ennek a módnak a nyitott jellege előnyös a kezdők számára, mivel szinte bárkit meghívhat a tollába, hogy végigvezetjen egy nehéz elképzelésen. Ez egy praktikus mód a tájékozódáshoz is, mivel tökéletes a potenciális alkalmazottak megkérdezéséhez, és már meg is tette professzionálisan használták ilyen módon !
5. Professzor mód
A professzor mód lehetővé teszi, hogy egy Pro -felhasználó olyan szobát fogadjon, amelyben csak ők szerkeszthetik a kódot. A házigazda Pro-tervétől függően 10-100 felhasználó nézhet és cseveghet.
A Professzor mód rugalmasságot tesz lehetővé az osztálytermi tanulás és a távoktatás, vagy a kettő kombinációja között. A Professzor mód használata lehetővé teszi, hogy az osztály hátsó részén élők ugyanazt a tapasztalatot élvezhessék, mint az előtte tartózkodók, és a tanár megjeleníthesse a valós időben frissülő hibajavításokat.
6. Bemutató mód
A prezentációs módot nem meglepő módon a kód bemutatására tervezték. Az alkalmazás egyszerűsített nézetben jelenik meg, amelyet írásvetítőkkel való használatra terveztek. A CodePen optimalizált prezentációs módot kínál alacsonyabb sebességű internetkapcsolatokhoz és gyengébb hardverekhez.
Az okos olvasók már felismerték, hogy a CodePen ingyenes verziója pontosan ezt a funkciót biztosítja, bár a Pro módnak van néhány hasznos funkciója. Az elrendezés, a betűméret és a témák gyorsan megváltoztathatók, hogy szinte bármilyen beállításnak megfeleljenek, és a tollra mutató link megjelenítése egy jumbo méretű, lerövidített URL-t hoz létre, amely megkönnyíti a projekt megosztását.
Ezek az apró változtatások, valamint az előnézeti ablak méretezése bármire, amit mutatnak, tökéletesek a prezentációs módhoz mind a tanárok, mind a fejlesztők számára, akik ötleteket mutatnak be a kollégáknak. A prezentációs mód tiszta megjelenésű és egyszerű módja a kód bemutatásának, ha úgy találja, hogy interjút készít egy programozói pozícióról.
7. Minták
A CodePen gyűjteményei sokkal könnyebbé teszik az inspiráció keresését Tervezési minták .
Minden kategória egy példakód gyűjteménye, amelyet a CodePen felhasználók adtak meg bizonyos feladatokhoz. Dinamikus gombok létrehozásának módját keresi webhelyéhez? Harmonikus menük? Rengeteg kategória létezik, amelyek szinte minden példához illeszkednek.
Ezek a minták szintén nagyszerű módja annak, hogy megtanulják az interaktív gombok működését és a dinamikus felhasználói felületek különböző működési módjait.
8. Emmet
Hangya , korábban Zen Coding néven ismert, széles körben a HTML és CSS fejlesztés legnagyobb időmegtakarítójának tekintik. A bővítmény elveszi a kódot, amelyet sokat ír, és egyszerű parancsikonokká alakítja őket.
Működés közben látni jobb, mint elmagyarázni, ezért tegye a HTML -dokumentum szokásos beállításait:
Ennek hozzáadása minden HTML dokumentumhoz két műveletre csökkent. Az Emmet használatával írja be ! és nyomja meg a Tab kulcs. Varázslat!
Az Emmet alapértelmezés szerint aktív a CodePen alkalmazásban, és különösen akkor hasznos, ha új fogalmat próbál megtanulni a JavaScriptben, és gyorsan létre kell hoznia a támogató HTML -t és CSS -t.
Fejlesztés a CodePen segítségével a jobb élmény érdekében
A CodePen kiváló eszköz a webfejlesztők számára, és a terület folyamatosan növekszik. A JavaScript nagyszerű nyelv a webfejlesztés jövőjének tanulásához.
hogyan lehet ingyen letölteni a youtube videókat
Nagyszerű oktatóanyagok és tanfolyamok állnak rendelkezésre azok számára, akik szeretnék elkezdeni használni a JavaScriptet, a CodePen pedig remek környezet az új készségek kipróbálásához.
Részvény Részvény Csipog Email A 8 legjobb webhely, ahonnan ingyenesen letölthetők hangoskönyvekA hangoskönyvek nagyszerű szórakoztató források, és sokkal könnyebben emészthetők. Íme a nyolc legjobb webhely, ahonnan ingyenesen letöltheti őket.
Olvassa tovább Kapcsolódó témák- Programozás
- HTML
- Webfejlesztés
- JavaScript
- CSS
Ian Buckley szabadúszó újságíró, zenész, előadó és videó producer, Berlinben, Németországban él. Amikor éppen nem ír vagy a színpadon, barkácsol elektronikával vagy kóddal, abban a reményben, hogy őrült tudós lesz.
Bővebben: Ian BuckleyIratkozzon fel hírlevelünkre
Csatlakozz hírlevelünkhöz, ahol technikai tippeket, véleményeket, ingyenes e -könyveket és exkluzív ajánlatokat találsz!
Feliratkozáshoz kattintson ide