CodePen: Eraiki, Probatu, Partekatu eta Ezagutu HTML, CSS eta JavaScript

Codepen: Front-End kodea eraiki, probatu eta aurkitu

Edukiak kudeatzeko sistema baten erronka bat script-tresnak probatzea eta ekoiztea da. Argitaletxe gehienentzat baldintza hori ez den arren, teknologiako argitalpen gisa, noizean behin laneko gidoiak partekatzea gustatzen zait beste jendeari laguntzeko. Nola erabili partekatu dut Javascript-a pasahitzaren indarra egiaztatzeko, nola egiaztatu helbide elektronikoaren sintaxia Adierazpen arruntekin (Erregex), eta azken hau gehitu du lineako iritzien salmenten eragina aurreikusteko kalkulagailua. Gunean dozenaka tresna gehitzea espero dut, baina WordPress ez da horrelako argitalpenetarako egokia ... eduki sistema bat da, ez garapen sistema bat.

Beraz, nire gidoi txikiak funtzionatzen erabiltzea gustatzen zait CodePen. CodePen txukun antolatutako tresna da, HTML panel bat, CSS panela, Javascript panela, Kontsola eta ondorioz ateratako kodea argitaratuta dituena. Panel bakoitzak informazioa dauka elementuen gainean sagua egiten duzunean, posible dena ulertu ahal izateko, baita HTML, CSS eta JS koloreen kodeketa ere errazago editatzen eta idazten laguntzeko.

CodePen gizarte garapenerako ingurunea da. Bihotzean, kodea arakatzailean idazteko eta horren emaitzak eraikitzen dituzunean ikusteko aukera ematen du. Lineako kode editore erabilgarria eta askatzailea edozein trebetasunen garatzaileentzat, eta bereziki kodetzen ikasten duten pertsonentzat ahalmena. CodePen batez ere HTML, CSS, JavaScript eta gauza horiek bihurtzen diren aurreprozesatzeko sintaxiak bezalako frontend hizkuntzetan oinarritzen da.

CodePen-i buruz

CodePen-ekin beharrezko lan guztia egin ahal izan dut argitaratu kalkulagailua Gunean txertatu nuen. CodePen-en sorkuntza gehienak kode irekiko eta publikoak dira. Beste pertsona batzuek eta komunitateak elkarreragin dezaketen izaki bizidunak dira, bihotz sinple batetik, iruzkin bat utzi, beren beharretara bideratu eta aldatuz.

CodePen - lineako iritzien salmenten eragina aurreikusteko kalkulagailua

CodePen-ekin, ikuspegia alda dezakezu, lan egin ahala panelak ezkerraldean, eskuinean edo behean egotea nahi baduzu edo HTML fitxa berri batean ikusi nahi baduzu. Aldameneko ikuspegiak izugarri ondo funtzionatzen du sentikorrentzako ezarpenak probatzeko, ikus daitekeen panelaren tamaina doitu dezakezu.

Laneko script bakoitza Boligrafoetan antola ditzakezu, proiektuetan konbinatu (fitxategi anitzeko editorea) edo bildumak ere eraiki ditzakezu. Funtsean, frontend-eko kodearen laneko zorroa da, non beste egile batzuk jarrai ditzakezun, publikoki partekatutako beste proiektu batzuk aldatu ditzakezu eta erronken bidez gauza dibertigarriak nola egiten diren ikas dezakezu.

GitHub Gist gisa gorde dezakezu, zip fitxategian esportatu eta are gehiago embed luma hau bezalako artikulu batean:

Ikusi Boligrafoa
Aurreikusitako lineako iritzien salmenten eragina
by Douglas Karr (@douglaskarr)
on CodePen.


Luma editorearen mugetako bat kode bolumena da. Agian ez duzu inoiz arazo hau topatuko, editoreak ehunka edo baita milaka kode lerro izan beharko lituzkeelako ondo. Baina 5,000 - 10,000 kode lerro edo gehiago jotzen hasten direnean, editoreak huts egiten hasiko dela ikusiko duzu. Hala ere, kanpoko erreferentziak gehi ditzakezu beste orrialde batzuetan gordetako estilo orrietan edo JavaScript!

Izena ematera animatuko nituzke. Asteroko posta elektronikoan harpidetuta egongo zara eta jarioa zure RSS iturrian ere gehi dezakezu argitaratu berri diren boligrafoak ikusi ahal izateko. Luma publikoak bilatzen edo arakatzen hasten bazara, sekulako proiektuak aurkituko dituzu ... erabiltzaileek talentu handia dute!

Jarraitu Douglas Karr Codepen-en

Ordaindutako bertsioak, CodePen Pro-k, funtzionalitate edo talde hobetzeko funtzio osagarri ugari eskaintzen ditu - lankidetza, prozesuak, aktiboen ostatua, ikuspegi pribatuak eta baita zure domeinu edo azpidomeinu propioa duten proiektuak ere. Eta, jakina, CodePen-ek biltegi bikaina eskaintzen du Github integrazioarekin, zure talde osoak lan egin dezan. Ni bezain kode sinple bat probatu nahi baduzu, CodePen tresna eskerga da.

Zer deritzozu?

Gune honek Akismet-ek spam erabiltzen du. Ikasi zure iruzkina nola prozesatu den.