CodePen: Sestavujte, testujte, sdílejte a objevujte HTML, CSS a JavaScript

Codepen: Vytvářejte, testujte a objevujte front-endový kód

Jednou výzvou systému pro správu obsahu je testování a výroba skriptovaných nástrojů. I když to pro většinu vydavatelů není požadavek, jako technologická publikace rád občas sdílím pracovní skripty, abych pomohl ostatním. Sdílel jsem, jak používat JavaScript ke kontrole síly hesla, jak zkontrolujte syntaxi e-mailové adresy pomocí regulárních výrazů (Regulární výraz) a naposledy přidali toto kalkulačka k předpovědi dopadu online recenzí na prodej. Doufám, že na web přidám desítky nástrojů, ale WordPress právě takovým publikováním nepřispívá ... je to obsahový systém, nikoli vývojový systém.

Takže, aby mé malé skripty fungovaly, rád používám CodePen. CodePen je přehledně uspořádaný nástroj s panelem HTML, panelem CSS, panelem JavaScript, konzolí a publikovaným výsledným kódem. Každý panel obsahuje informace, když najedete myší na prvky, abyste pochopili, co je možné, a také barevné kódování vašich HTML, CSS a JS, které vám usnadní úpravy a psaní.

CodePen je prostředí sociálního rozvoje. Ve svém jádru vám umožňuje psát kód do prohlížeče a vidět jeho výsledky při sestavování. Užitečný a osvobozující online editor kódů pro vývojáře všech dovedností a zejména zmocnění pro lidi, kteří se učí kódovat. CodePen se zaměřuje především na front-endové jazyky, jako jsou HTML, CSS, JavaScript a syntaxe předzpracování, které se promění v tyto věci.

O společnosti CodePen

S CodePen jsem byl schopen udělat veškerou práci nezbytnou k tomu publikovat kalkulačku Vložil jsem na web. Většina výtvorů na CodePen je veřejná a otevřená. Jsou to živé věci, s nimiž mohou komunikovat ostatní lidé a komunita, od jednoduchého naslouchání, zanechání komentáře až po rozdvojení a změnu pro své vlastní potřeby.

CodePen - kalkulačka pro předpovídání dopadu online recenzí na prodej

S CodePen můžete změnit své zobrazení, pokud chcete, aby panely byly při práci vlevo, vpravo nebo dole ... nebo zobrazit HTML na nové kartě. Pohled vedle sebe funguje neuvěřitelně dobře, aby otestoval vaše citlivá nastavení, protože můžete upravit velikost viditelného podokna.

Každý ze svých pracovních skriptů můžete uspořádat do per, kombinovat je do projektů (editor více souborů) nebo dokonce vytvářet sbírky. Je to v podstatě fungující web portfolia pro front-endový kód, kde můžete sledovat další autory, upravovat další veřejně sdílené projekty do svých vlastních a dokonce se učit, jak dělat nějaké zábavné věci prostřednictvím výzev.

Můžete uložit jako seznam GitHub, exportovat do souboru zip a dokonce i vložit pero v článku, jako je tento:

Podívejte se na pero
Předpokládaný dopad prodeje online recenzí
by Douglas Karr (@douglaskarr)
on CodePen.


Jedním z omezení editoru pera je naprostý objem kódu. Možná nikdy nenarazíte na tento problém, protože editor by měl být v pořádku se stovkami nebo dokonce tisíci řádky kódu. Ale když začnou narážet na 5,000 10,000 - XNUMX XNUMX nebo více řádků kódu, uvidíte, že editor začíná selhat. Můžete však přidat externí odkazy na šablony stylů nebo JavaScript hostovaný jinde!

Doporučuji vám, abyste se zaregistrovali. Budete přihlášeni k odběru jejich týdenního e-mailu a můžete také přidat zdroj do svého kanálu RSS, abyste viděli nově publikovaná pera. A pokud tam začnete prohledávat nebo procházet veřejná pera, najdete neuvěřitelné projekty ... uživatelé jsou docela talentovaní!

Následovat Douglas Karr na Codepen

Placená verze, CodePen Pro, nabízí spoustu dalších funkcí pro vylepšenou funkčnost nebo týmy - včetně spolupráce, procesů, hostingu aktiv, soukromých pohledů a dokonce i nasazených projektů s vaší vlastní doménou nebo subdoménou. A samozřejmě CodePen poskytuje skvělé úložiště s integrací Github, kde může pracovat celý váš tým. Pokud chcete jen vyzkoušet nějaký jednoduchý kód jako já, CodePen je neocenitelný nástroj.

Co si myslíte?

Tyto stránky používají Akismet k omezení spamu. Zjistěte, jak jsou vaše údaje komentářů zpracovávány.