10 CodePen-trükk, amelyekről soha nem tudta, hogy szüksége van rá

A CodePen egy gyilkos eszközkészlet a gyors prototípus készítéshez, inspiráló és támogató közreműködői közösséggel. Az ipar egyik kedvencévé vált webdesign eszközök azáltal, hogy gondtalan iterációt kínál a kreatív kódokról, kiküszöböli a friss fejlesztői környezetek létrehozásának fejfájását, és lehetővé teszi a felhasználók számára, hogy könnyedén kezeljék számtalan frontend koncepciót, a szeszélyesektől és nevetségesektől kezdve a gyakorlati és telepítésre készekig.

Ebben a cikkben tíz legfontosabb tippet gyűjtöttünk össze, hogy minél többet kaphasson a webipar kedvenc kódoló játszóterétől - ezek örökre megváltoztatják a CodePen használatát. Ha ez inspirál a kreativitásra, akkor érdemes megnéznie az összefoglalónkat is CSS animációs példák , vagy a legizgalmasabb nyílt forráskódú projektek az interneten.

Szeretné még gondtalanabbá tenni a dolgokat? Készítsd el a webhelyedet egy könnyű borssal weboldal készítő , és kap egy szuper-hasznos webtárhely szolgáltatás.



01. Fedezzen fel valami újat a Témák segítségével

A projektjének megfelelő eszközöket és tippeket keres? Ne keressen tovább

A projektjének megfelelő eszközöket és tippeket keres? Ne keressen tovább(Kép jóváírása: CodePen)

A CodePen témák egy viszonylag új, közösség által vezérelt szolgáltatás, amelyet minden szint felhasználóinak kínálnak, és kiválóan alkalmasak új keretek, felhasználói felület minták vagy JS könyvtárak felfedezésére. A Témák oldal megnyitásakor számos lehetőség áll rendelkezésre, kategóriák és még további alkategóriák szerint szűrve. Miután megtekintett egy aktuális kategóriát, például a Vue.js-t, találkoztunk egy áttekintő képernyővel, amely több lehetőséget kínál.

Szüksége van egy indító sablonra, amely elősegíti a Vue összetevő kiépítését? Itt található a népszerű összetevők listája, valamint egy remek „Új toll a sablonból” gomb, amely segít nekünk az indulásban. Szeretne látni néhány szakértőnk által kurált példát a keret működéséről? Szűrje át a „Kiemelt Vue tollak” elemre, és keretek mestereinek és kezdőinek egyaránt inspiráló műveivel találkozhat. A témakör áttekintése közben állandó linkeket kínálunk a hivatalos webhelyekre, a keretrendszer vagy a könyvtár dokumentációjára és útmutatóira, valamint a projekt GitHub alapvető jelenlétére.

02. Gyorsabb prototípus sablonokkal

Valamelyik ponton minden fejlesztő valószínűleg valódi fájdalmat érzett, amikor helyi fejlesztési környezet kialakítása , nem számít a verem; még a kazánlemez beállítása is sokkal több időt igényelhet, mint amennyit befektetni kíván egy olyan dolog létrehozásában és tesztelésében, mint néhány beküldési gomb prototípusa. A CodePen használatával már ott vagy - egy IDE készen áll arra, hogy könnyedén eldobhassa kreatív elméd tartalmát.

De a CodePen sablon funkciójának használatával most még könnyebb felpörgetni a munka elvégzéséhez szükséges pontos környezetet. A sablon tetszőleges számú előre definiált külső szkriptet tartalmazhat (külső tollként egy másik tollat ​​is felvehet), lehetővé teszi a kívánt HTML / CSS / JS előfeldolgozó előre beállítását (amely menet közben szépen automatikusan lefordul), sőt megőrzi minden létező kód, amelyet gondozni kíván.

A gyors prototípusok feltárása megtárcsázott fejlesztői környezetekkel történik

A gyors prototípusok feltárása megtárcsázott fejlesztői környezetekkel történik(Kép jóváírása: CodePen / Adam Kuhn)

Nagyon egyszerű a tollat ​​sablonként meghatározni - nyitott tollal törje be a Beállítások gombot, kattintson a Toll részletei elemre, és onnan egy szép kis kapcsoló jelenik meg, amely lehetőséget kínál a mentésre szokásos tollként vagy Sablon.

Tehát miben különbözik ez egy meglévő toll elágazásától? Ha egy tollat ​​sablonként állít be, akkor azonnal választhatja ezt a beállítást, miután új tollat ​​hoz létre, és nem kell az előző tollak között keresgélni és módosítani őket, nem kell újból importálnia az összes választott szkriptet a alapozni, és nem kell újból kijelölni az összes olyan szintaxis opciót és beállítást, amelyet az adott koncepciónak előnyben részesíthet. Ezenkívül, ha egy új tollat ​​sablonból indít, a tollat ​​teljesen új alkotásként kezeli, míg a villával egy olyan tollat ​​hoz létre, amely visszavezet az eredetihez, és amelynek elõzetes története van, nem pedig üres. A CodePen Pro fiókra való frissítés hihetetlenül értékes kibővített funkciókat kínál, de még az ingyenes felhasználói fiókok is korlátlan sablon létrehozást tesznek lehetővé.

03. Gyűjtés indítása

A CodePen Gyűjtemények remek lehetőséget kínálnak a fogalmak csoportosítására és megkeresésére

A CodePen Gyűjtemények remek lehetőséget kínálnak a fogalmak csoportosítására és megkeresésére(Kép jóváírása: CodePen / Adam Kuhn)

Ha élvezi, hogy lehetősége nyílik erőforrások felkutatására a CodePen témák használatával, de azt szeretné, ha a sajátját kurálhatná, akkor a gyűjtemények a válasz. Toll hozzáadása egy gyűjteményhez olyan egyszerű, mint bármelyik Pen szerkesztési nézetéből kiválasztani a 'Gyűjtemények' legördülő menüt, ahol megadhat egy gyűjteményt vagy létrehozhat egy újat. Ismét bárki tolla lehet (és ha Pro felhasználó, akkor privátra állíthatja a gyűjteményét). A gyűjtemények szépsége az a képesség, hogy az összes gyűjteményét egy helyen tekintheti meg robusztus szűrési, rendezési és keresési opciókkal - ez egy nagyszerű módja az erőforrások halmozás vagy keretrendszer szerinti meghatározásának, az inspirációk futólistájának vezetése vagy a Tollak felhasználói felület fogalmai alapján. Érdekli egy másik felhasználó nyilvános gyűjteménye? Akár RSS-n keresztül is feliratkozhat a Gyűjteményre, hogy folyamatosan figyelemmel kísérje a frissítéseket.

04. Javítsa a hatékonyságot az előfeldolgozókkal

Valljuk be, a legtöbben elegendő időnél többet töltenek a képernyők mögött, mint azt valószínűleg kellene. Sokunkat annyira elárasztanak a karrierrel kapcsolatos gyakorlati törekvések, hogy nehéz megtalálni az időt a haszontalan váltókapcsolók vagy a WebGL oldalátmenetek könyvtárának felépítésére, és bár a CodePen eltávolítja a tipikus beállítási időt, és lehetővé teszi számunkra, hogy azonnal dolgozzunk, a hatékonyság mindig javítani kell. Itt jönnek jól a CodePen natív előfeldolgozói.

Például: szeretne létrehozni egy rácsot néhány száz HTML cellából, mindegyik stílusattribútuma véletlenszerűen frissül a JavaScript segítségével? Elmehetne a div után másolni és beilleszteni div után, persze. Ennek végére a szerkesztőablakban szinte lehetetlen navigálni.

Itt ragyog a HAML, a Mopsz vagy a Jade: a Toll beállításablakában könnyedén válasszon ki egy HTML előfeldolgozót, írjon egy egyszerű ciklust, és nagyjából két sorban állítsa elő ezeket az elemeket. Nem tudja, hol kezdje? Van erre egy toll: a CodePen-nél a „HAML hurok” keresése jó néhány kazánlemez tollat ​​eredményez, amelyek felületesen megismerik az oldalelemek hatékony létrehozásának módját.

Az előfeldolgozók még gyorsabban hozzák le a koncepciót

Az előfeldolgozók még gyorsabban hozzák le a koncepciót(Kép jóváírása: CodePen / Adam Kuhn)

Val vel CSS előfeldolgozók mint a LESS és a Sass, olyan mixeket és előre definiált funkciókat is készíthetünk, amelyek számos argumentumot elfogadnak, tökéletes kiegészítésként a CodePen-sablonokhoz, és lehetővé teszik az egyébként összetett stílusok viszonylagos könnyûségét. Talán felhasználói felület elemeket épít egy nagyobb projekt számára - most már világos és tömör elnevezési szokásokkal definiálhatja az összes szín-, betű- és térközváltozót; és ezeknek a CodePen sablonba történő felvétele ismét gyakorlatilag nulla beállítással képes iterálni.

Élvezze a CoffeeScript, a TypeScript vagy a Babel hatékonyságát? A CodePen natív módon lefordíthatja az Ön által választott JS előfeldolgozót is. Ha bármikor be akar pillantani a motorháztető alá és megnézni, hogy néz ki a lefordított kódja, akkor egyszerűen kiválaszthatja a 'Nézet összeállítva' lehetőséget a kívánt kódszerkesztő ablaktáblán, hogy megérezhesse, milyen lesz a végleges kimenete - és kellene; A hurkokkal és a fejlett funkciókkal végzett munka hihetetlenül gyorsabbá teheti a beállítást és az iterációt, de feleslegessé teheti a fel nem használt szintaxis jó részét. Ha bármikor felhasználni kívánja ezeket az alkotásokat a gyártás során, feltétlenül tekintse meg az összes kódját teljesen összeállítva, és hajtson végre minden szükséges csökkentést vagy módosítást a teljesítményhez.

05. Fedezze fel a CodePen legmenőbb új funkcióját: Projektek

Még akkor is, ha gyártásra kész kódot írsz, a CodePen visszaszerezte

Még akkor is, ha gyártásra kész kódot írsz, a CodePen visszaszerezte(Kép jóváírása: CodePen)

Még mindig kissé friss szolgáltatás, a CodePen Projektek egyfajta el nem énekelt hősök - a CodePen eredeti háromtáblás HTML / CSS / JS beállítása már lehetővé teszi az egyedi külső beillesztéseket és a valós idejű előprocesszoros összeállítást. Tehát mitől kiemelkedik a Projekt? A szokásos szerkesztő oldalak mellett saját helyi fájlokat is hozzáadhat - vagyis saját fájlstruktúráját testreszabhatja, mint egy helyi környezetben, többoldalas webhelyeket vagy alkalmazásokat hozhat létre egyetlen, önálló környezetben anélkül, hogy például bonyolult Gulp vagy Webpack konfigurációkat kellene beállítani.

A CodePen projektek megkönnyítik a meglévő fájlok áthúzását (ügyeljen arra, hogy biztonságosan tárolja őket felhőtároló ), és szépen karbantartja a struktúráját, vagy lehetővé teszi a szerkesztőn belüli módosításokat. És ha Pro szintű felhasználó vagy, egy kicsit édesebb lesz: ha készen áll a munka telepítésére, egyetlen kattintással telepítheti a választott környezetet.

06. Kapcsolja be a tévét

A CodePen TV elkápráztatja az állásidőt

A CodePen TV elkápráztatja az állásidőt(Kép jóváírása: CodePen)

A CodePen által kínált hatékony és praktikus eszközök közé rejtve van egy szeszélyes figyelemelterelés, amelyet CodePen TV néven ismerünk. A CodePen TV egyszerűen egy véletlenszerűen kiválasztott mintavétel a leszedett tollakról, amely fokozatosan képernyővédő-szerűen forog. Talán nem érdekli, hogy véletlenszerűen kiválasztja a tollakat, és meg akarja kurzálni a macskákat tartalmazó saját tollak „csatornáját” - elindíthat egy CodePen tévécsatornát is bármely CodePen Gyűjtemény (beleértve a más felhasználók által létrehozott gyűjteményeket) alapján. Ha pedig Mac-felhasználó, akkor a CodePen TV-t akár önálló OSX natív képernyővédőként is használhatja!

07. Ölelje át a közösségi szellemet

A kódoló közösségek híresek a kizárólagosságról, valódi táptalajokat teremtenek az impostor szindrómának, amely áthatolhatatlannak és nemkívánatosnak érezheti magát a legtapasztaltabb tervezők és fejlesztők számára is.

Itt tűnik ki a CodePen - és miért kínál ilyen előnyöket a közösség aktív tagjává válás. Lát egy tollat, amely örömet okoz? Tépje össze ezt a szívgombot, és mutasson egy másik felhasználónak egy kis szeretetet. Akkor haladhat, és akár háromszor is kattinthat rá, ha nagyon-nagyon szereti az általuk elvégzett munkát.

Ihletet érez, vagy esetleg egy másik felhasználó tollára gondol? Egyetlen kattintással el lehet villanni egy tollat, majd a saját kreatívját felvirágoztathatja, vagy akár átalakíthatja is, ahogy jónak látja.

Alternatív megoldásként, ha jobb megközelítést lát, vagy ha hibát talál a felhasználó kódjában, fontolja meg a tollhoz való hozzászólást bármilyen konstruktív javaslattal. Míg az ilyen webhelyeken a legtöbb megjegyzési szakasz jellemzően a negativitás kontrollálhatatlan szemétdombja, a közösség általában kiváló munkát végez az önrendelkezéssel, a pozitivitás ösztönzésével és mások megerősítésével.

A közösség a CodePen igazi nagyhatalma

A közösség a CodePen igazi nagyhatalma(Kép jóváírása: CodePen)

Talán a közösségbe merülés legjobb módja a csatlakozás A CodePen Spectrum chatje - nyílt fórum a munkamegosztáshoz, tanácsok kéréséhez és kreatív együttműködéshez. Az egyik példa erre a Pass Pen, a CodePen felhasználójának, Kristopher van Sant-nek a koncepciója, ahol létrehozzák a Tollat, majd azokat a felhasználók ismételgetik, akik szeretnének hozzájárulni.

A CodePen emellett heti kihívásokat is kínál, hogy kreatívan foglalkozzon veled. Lehet, hogy nem érzi érdemesnek megosztani a munkáját, de valószínűleg téved. Vegyen részt a CodePen Spectrum csevegésében, és mutassa meg, min dolgozik, akár nagy, akár kicsi. Örömmel fog lepődni, hogy az átlagos CodePen felhasználó mennyire támogató és segítőkész, és valószínűleg megtanul néhány különböző dolgot.

08. Vegyen részt egy IRL találkozón

A CodePen alapvető eszköze a frontend fejlesztők számára a közösség lényege. De néha hasznos, ha készségeit levetíti a képernyőről - és nincs jobb módszer, mint otthont adni vagy részt venni egy CodePen találkozón. A CodePen kegyesen ellátja Önnel a résztvevőket, és szponzoraik segítségével akár az ételek és italok visszatérítésében is segítséget nyújthatnak - a helyszín és a dátum rajtad múlik. A találkozók kiváló lehetőséget nyújtanak a programok párosításához, a stratégiák vagy koncepciók nyilvános kikéréséhez, a csapat kihívásának teljesítéséhez, vagy csak jobb megismeréséhez, mi motiválja a kódoló társait. Vagy talán csak az ingyenes pizzáért tartasz. Megbocsátunk neked.

09. Frissítés Pro-ra

A CodePen ingyenes szolgáltatásainak mélysége valóban figyelemre méltó, különösen figyelembe véve a felhasználók ezreinek terheit, miközben egyszerre raknak össze néhány hihetetlenül szerverigényes alkotást. A dobozból kifolyólag ez egy nagyon jól lekerekített élmény - addig, amíg meg nem harap egy szót a CodePen Pro-tól. Miért kell megtenni az ugrást? Bár sok hasznos kibővített funkcióval rendelkezik, önmagában egy funkció miatt érdemes: a Pens privát megmentése.

Nem Pro felhasználók számára minden létrehozott tollat ​​nyilvánosan indexelnek, ami gyakran rendben van. De mi van, ha ki akarom egészíteni néhány felhasználói felületet egy még be nem indított ügyfélprojekt számára? Ez az, ahol a magánmegtakarítás képessége nagyon jól jön - a „privát” nem azt jelenti, hogy rejtve van, például továbbra is megoszthatja a tollához vezető közvetlen linkeket például a belső csapatával. De a tollad egyébként fel nem fedezhető. Talán csak környezetre van szüksége az új koncepciók kipróbálásához, vagy korlátozott ideje van egy alkotás kidolgozására, és később vissza kíván térni - itt jelentenek változást az adatvédelmi lehetőségek.

Kóstoljon bele a Pro szolgáltatásaiba, és soha nem fog visszanézni

Kóstoljon bele a Pro szolgáltatásaiba, és soha nem fog visszanézni(Kép jóváírása: CodePen / Adam Kuhn)

Tehát mit tartalmaz még egy Pro-fiók? Eszköz tárhely! A 2 MB-os fájlonkénti korláton belül a CodePen tárolja a toll eszközeit, ami azt jelenti, hogy nem kell képeket vagy szkripteket feltölteni egy külső gazdagépre, és nagyobb rugalmasságot biztosít, ha szigorú kereszt-eredet specifikációkkal rendelkező keretrendszerekkel dolgozunk.

A Pro-fiókok hozzáférést biztosítanak az Élő nézethez - lehetővé téve a felhasználók számára, hogy szerkesztéseiket menet közben újratöltsék több ablakon keresztül - Collab mód - amely lehetővé teszi az élő páros programozást és praktikus csevegési lehetőséget is tartalmaz - és a Professzor mód, amely sugározza a kódfrissítéseket a Pen valós idejű előnézete mellett, ideális kódoktatóknak és konferencia-áramkörű mazochistáknak egyaránt. A CodePen Pro emellett lehetőséget kínál a saját profiloldalának szerkesztésére, beleértve az egyedi CSS-t és a JS-t, valamint az opcionális Pen beágyazást fejlécként - mert közönségük ismerete azt jelenti, hogy a frontend fejlesztői ismerik a testreszabást, a testreszabást, a testreszabást.

10. Merüljön el az inspiráció kútjában

Hiányzik ez a kreatív szikra? A Dribbble remek hely a keresésre

Hiányzik ez a kreatív szikra? A Dribbble remek hely a keresésre(Kép jóváírása: Dribbble)

A friss toll olyan, mint egy üres vászon, de néha kreatív blokk fog ütni, és ez a vászon hosszú nietzschei tekintetet fog magába vonni. Nem érzi magát inspirálatlanul? Nézz utána a legújabbnak CodePen Challenge vagy csatlakozzon egy kódoló kihívó csoporthoz Codevember vagy DailyUI . Talán menjen tovább Dribbble és készítsen újra (esetleg animáljon) egy illusztrációt a CSS-ben - csak feltétlenül adjon hitelt adott esetben (a visszakapcsolás hozzáadása a Pen nyilvános adataihoz a preferált módszer.)

Ezek hiábavalóságnak tűnhetnek, és mindannyian előszeretettel választottunk a szabadidőben történő kódolással szembeni érvekre, de van még egy kevéssé elismert hátránya a (nyilvánosan) kreatív kódolásnak a CodePen-nél: a potenciális munkaadók és toborzók valóban időt töltenek az oldalon kreatív ambíciót mutató emberek számára. Épített néhány olyan dolgot, amire különösen büszke? Feltétlenül vegye fel őket portfóliójába.

A CodePen megkönnyíti a beágyazást, több megjelenítési lehetőséggel, és új előkitöltési beágyazási funkciójukkal hozzáadhat egy CodePen szerkesztő ablakot renderelt kóddal közvetlenül a portfólió webhelyének kódbázisából.

Ez a cikk eredetileg a kreatív webdesign magazinban jelent meg Web designer . Vásárolja a 290-es számot .

Olvass tovább: