„CodePen“: sukurtas, išbandytas, bendrinamas ir atrandamas HTML, CSS ir „JavaScript“

„Codepen“: sukurkite, išbandykite ir atraskite „Front-End“ kodą

Vienas iššūkis turinio valdymo sistemoje yra scenarijaus įrankių testavimas ir gamyba. Nors daugumai leidėjų tai nereikalaujama, man, kaip technologijų leidiniui, man patinka kartkartėmis dalytis veikiančiais scenarijais, kad galėčiau padėti kitiems žmonėms. Aš pasidalinau, kaip naudotis „JavaScript“, kad patikrintumėte slaptažodžio stiprumą, kaip patikrinkite el. pašto adreso sintaksę naudodami įprastus posakius (Regex), ir neseniai tai pridėjo skaičiuoklė, leidžianti numatyti internetinių apžvalgų poveikį pardavimams. Tikiuosi, kad svetainėje pridėsiu keliasdešimt įrankių, tačiau „WordPress“ nėra tinkamas šitaip skelbti ... tai yra turinio, o ne kūrimo sistema.

Taigi, kad mano mažieji scenarijai veiktų, man patinka „CodePen“. „CodePen“ yra tvarkingas įrankis su HTML skydeliu, CSS skydeliu, „JavaScript“ skydeliu, konsole ir paskelbtu gautu kodu. Kiekviename skydelyje yra informacijos, kai užvedate pelės žymeklį ant elementų, kad suprastumėte, kas įmanoma, taip pat HTML, CSS ir JS spalvų kodavimas, kad galėtumėte lengviau redaguoti ir rašyti.

„CodePen“ yra socialinio vystymosi aplinka. Savo esme jis leidžia jums rašyti kodą naršyklėje ir matyti jo rezultatus kuriant. Naudingas ir išlaisvinantis internetinis kodų redaktorius bet kokių įgūdžių kūrėjams, ypač įgalinantis mokytis koduoti. „CodePen“ daugiausia dėmesio skiria priekinės kalbos kalboms, tokioms kaip HTML, CSS, „JavaScript“ ir išankstinio apdorojimo sintaksėms, kurios virsta tais dalykais.

Apie „CodePen“

Su „CodePen“ galėjau atlikti visus reikalingus darbus paskelbti skaičiuoklę Aš įdėjau į svetainę. Dauguma „CodePen“ kūrinių yra vieši ir atvirojo kodo. Jie yra gyvi dalykai, su kuriais gali bendrauti kiti žmonės ir bendruomenė, pradedant nuoširdžiu širdimi, paliekant komentarą, išsišakojant ir keičiant savo poreikiams.

„CodePen“ - skaičiuoklė, skirta prognozuoti internetinių apžvalgų poveikį pardavimams

Naudodami „CodePen“ galite pakeisti savo vaizdą, jei norite, kad dirbant langai būtų kairėje, dešinėje arba apačioje ... arba HTML peržiūrėtumėte naujame skirtuke. Šoninis vaizdas veikia nepaprastai gerai, norint išbandyti jūsų reaguojančius nustatymus, nes galite pakoreguoti matomos srities dydį.

Kiekvieną savo veikiantį scenarijų galite suskirstyti į rašiklius, sujungti juos į „Projektai“ (kelių failų rengyklė) ar net sukurti kolekcijas. Iš esmės tai yra veikianti „front-end“ kodo portfelio svetainė, kurioje galite sekti kitus autorius, susieti kitus viešai bendrinamus projektus, kad galėtumėte juos modifikuoti, ir netgi sužinoti, kaip atlikti įdomius dalykus per iššūkius.

Galite išsaugoti kaip „GitHub Gist“, eksportuoti į ZIP failą ir net įdėti rašiklis tokiame straipsnyje:

Žiūrėkite rašiklį
Numatomas internetinių apžvalgų poveikis pardavimams
by Douglas Karr (@douglaskarr)
on „CodePen“.


Vienas iš „Pen“ redaktoriaus apribojimų yra didžiulis kodo tūris. Jūs niekada negalėsite susidurti su šia problema, nes redaktoriui turėtų būti gerai su šimtais ar net tūkstančiais kodo eilučių. Bet kai jie pradės daužyti 5,000–10,000 XNUMX ar daugiau kodo eilučių, pamatysite, kad redaktorius pradeda gesti. Tačiau galite pridėti išorinių nuorodų į kitur priglobtus stiliaus lapus ar „JavaScript“!

Aš skatinčiau jus užsiregistruoti. Jūs užsiprenumeruosite jų savaitinį el. Laišką ir taip pat galėsite pridėti kanalą į savo RSS kanalą, kad galėtumėte pamatyti naujai paskelbtus rašiklius. Ir jei jūs pradėsite ieškoti ar naršyti ten esančius viešuosius rašiklius, rasite neįtikėtinų projektų ... vartotojai yra gana talentingi!

sekti Douglas Karr ant Codepen

Mokama versija „CodePen Pro“ siūlo daugybę papildomų funkcijų, skirtų patobulintam funkcionalumui ar komandoms, įskaitant bendradarbiavimą, procesus, turto prieglobą, privačius rodinius ir netgi įdiegtus projektus su savo domenu ar padomeniu. Be abejo, „CodePen“ yra puiki talpykla su „Github“ integracija, kurioje gali dirbti visa jūsų komanda. Jei norite tiesiog išbandyti paprastą kodą, koks esu aš, „CodePen“ yra neįkainojama priemonė.

Ką manote?

Ši svetainė naudoja "Akismet", kad sumažintų šlamštą. Sužinokite, kaip apdorojamas jūsų komentaras.