CodePen: vytváranie, testovanie, zdieľanie a objavovanie formátov HTML, CSS a JavaScript

Codepen: Vytváranie, testovanie a objavovanie front-endového kódu

Jednou výzvou systému na správu obsahu je testovanie a výroba skriptovaných nástrojov. Aj keď to nie je pre väčšinu vydavateľov požiadavka, ako technologická publikácia rád občas zdieľam pracovné skripty, aby som pomohol iným ľuďom. Zdieľal som, ako používať JavaScript na kontrolu sily hesla, ako skontrolujte syntax e-mailovej adresy pomocou regulárnych výrazov (regex) a naposledy pridali toto kalkulačka na predpovedanie dopadu online recenzií na predaj. Dúfam, že na web pridám desiatky nástrojov, ale WordPress práve neprispieva k takémuto publikovaniu ... je to systém obsahu, nie vývojový systém.

Takže, aby moje malé skripty fungovali, rád ich používam CodePen. CodePen je prehľadne usporiadaný nástroj s panelom HTML, panelom CSS, panelom JavaScript, konzolou a publikáciou výsledného kódu. Každý panel má informácie, keď umiestnite kurzor myši na prvky, aby ste pochopili, čo je možné, a tiež farebné kódovanie vašich kódov HTML, CSS a JS, ktoré vám pomôžu ľahšie upravovať a písať.

CodePen je prostredie sociálneho rozvoja. Vo svojom jadre vám umožňuje písať kód do prehliadača a pri zostavovaní vidieť jeho výsledky. Užitočný a oslobodzujúci online editor kódov pre vývojárov všetkých schopností a obzvlášť oprávňujúci pre ľudí, ktorí sa učia kódovať. CodePen sa zameriava predovšetkým na front-endové jazyky, ako sú HTML, CSS, JavaScript a syntaxy predspracovania, ktoré sa premenia na tieto veci.

O spoločnosti CodePen

S CodePen som bol schopný urobiť všetku potrebnú prácu zverejniť kalkulačku Vložil som na stránku. Väčšina výtvorov v aplikácii CodePen je verejná a otvorená. Sú to živé veci, s ktorými môžu komunikovať iní ľudia a komunita, od jednoduchého vypočutia, zanechania komentára, rozvetvenia a zmeny pre svoje vlastné potreby.

CodePen - kalkulačka na predpovedanie dopadu online recenzií na predaj

Pomocou aplikácie CodePen môžete zmeniť svoje zobrazenie, ak chcete, aby boli tabule pri práci vľavo, vpravo alebo dole ... alebo si pozrite HTML na novej karte. Bočný pohľad funguje neuveriteľne dobre na otestovanie vašich responzívnych nastavení, pretože môžete upraviť veľkosť viditeľného panela.

Každý z vašich pracovných skriptov môžete usporiadať do pier, skombinovať ich do projektov (editor viacerých súborov) alebo dokonca vytvárať zbierky. Je to v podstate fungujúca portfólio webov pre front-end kód, kde môžete sledovať iných autorov, upravovať iné verejne zdieľané projekty a dokonca sa pomocou výziev naučiť robiť zábavné veci.

Môžete uložiť ako zoznam GitHub, exportovať do súboru zip a dokonca aj vložiť pero v článku, ako je tento:

Pozri pero
Očakávaný dopad predaja recenzií online
by Douglas Karr (@douglaskarr)
on CodePen.


Jedným z obmedzení editora pera je samotný objem kódu. Možno sa s týmto problémom nikdy nestretnete, pretože editor by mal mať v poriadku stovky alebo dokonca tisíce riadkov kódu. Ale keď začnú zasahovať 5,000 10,000 - XNUMX XNUMX alebo viac riadkov kódu, uvidíte, že editor začne zlyhávať. Môžete však pridať externé odkazy na tabuľky štýlov alebo JavaScript hostený inde!

Odporúčam vám prihlásiť sa. Prihlásite sa na odber ich týždenného e-mailu a môžete tiež pridať informačný kanál do svojho informačného kanála RSS, aby ste videli novo zverejnené perá. A ak tam začnete hľadať alebo prechádzať verejné perá, nájdete tu nejaké neuveriteľné projekty ... používatelia sú veľmi talentovaní!

Nasledovať Douglas Karr na Codepen

Platená verzia CodePen Pro ponúka množstvo ďalších funkcií pre vylepšenú funkčnosť alebo tímy - vrátane spolupráce, procesov, hostingu aktív, súkromných zobrazení a dokonca aj nasadených projektov s vlastnou doménou alebo subdoménou. A samozrejme CodePen poskytuje skvelé úložisko s integráciou Github, kde môže pracovať celý váš tím. Ak chcete iba vyskúšať nejaký jednoduchý kód ako ja, je CodePen neoceniteľným nástrojom.

Čo si myslíte?

Táto stránka používa Akismet na zníženie spamu. Zistite, ako sa spracúvajú údaje vašich komentárov.