Home-theater-designers
Començar amb el desenvolupament web de JavaScript pot ser un procés frustrant, però hi ha eines que el fan més fàcil.
CodePen.io és un entorn de codificació al navegador dissenyat tant per aprendre a codificar com per prototipar ràpidament idees amb mínimes molèsties.
En aquest article, examinem algunes de les funcions del lloc i com poden ajudar-vos a convertir-vos en un millor programador.
Què és CodePen?
CodePen proporciona una cosa anomenada a bolígraf , que inclou tres finestres diferents per a HTML, CSS i JavaScript, a més d'un panell de previsualització que s'actualitza en temps real a mesura que escriviu.
Tot i que s’utilitza freqüentment per als desenvolupadors web per mostrar idees per a llocs web, també és un lloc ideal per aprendre els conceptes bàsics del desenvolupament web frontal. A continuació, es mostren les funcions més notables que heu de conèixer quan utilitzeu CodePen.
1. Preprocessadors
Els preprocessadors són llenguatges interpretats o compilats dissenyats per simplificar la codificació. Poden afegir funcions a un idioma per comoditat i facilitar la lectura del codi. En el desenvolupament web, s’utilitza una combinació de preprocessadors per a HTML, CSS i JavaScript per crear codi net ràpidament.
Si esteu aprenent el desenvolupament web i voleu provar diferents preprocessadors, CodePen us permet canviar els preprocessadors sobre la marxa i veure el codi que compila en temps real. Cadascun dels tres panells de l'aplicació CodePen té un menú desplegable a la part superior dreta. Seleccioneu Veure HTML / CSS / JS compilat per veure com s’interpretarà el codi.
En aquest bolígraf, hem creat un lloc senzill mitjançant Haml i Sass per donar estil a un text de capçalera. Seleccionant Veure compilat mostra l'HTML i el CSS estàndard. En aquest exemple, la diferència és mínima. Tot i que apreneu un idioma nou, pot ser útil veure l’aspecte del codi preprocessat un cop compilat.
2. Recursos externs
A més del suport natiu per als preprocessadors, CodePen admet scripts externs. Això el converteix en el lloc perfecte per obtenir experiència pràctica amb biblioteques per als vostres projectes personals o per aprofundir en biblioteques d'aplicacions web populars com React.
Per afegir una biblioteca externa, obriu el fitxer Configuració de la ploma i aneu a la pestanya JavaScript. Hi ha dues maneres d'afegir recursos, ja sigui afegint l'URL del recurs manualment o bé cercant.
Hem utilitzat aquesta funció al nostre article que tracta animació web amb mo.js , juntament amb el preprocessament de Babel.
Vegeu la Ploma Exemple de Mojs MUO per Ian ( @Bardoctorus ) a CodePen.
Sí, es poden inserir bolígrafs CodePen. Seguiu endavant i feu clic al tauler de previsualització superior per veure els resultats del tutorial de Mo.js.
Es poden importar altres bolígrafs com les biblioteques externes. Això significa que podeu agafar elements de bolígrafs escrits prèviament per utilitzar-los com a mòduls als vostres bolígrafs nous. Usuari d'Adam de CodePen Enquesta simple la ploma n’és un bon exemple.
3. Plantilles
Quan esteu aprenent conceptes nous o provant idees noves, sovint utilitzeu components similars i torneu a repetir els mateixos passos per començar. CodePen permet la creació de bolígrafs de plantilla que permeten retallar la repetició i permetre-li arribar directament al punt.
Per crear una plantilla, obriu un bolígraf nou, feu els canvis i seleccioneu Plantilla control lliscant al menú de configuració.
https://vimeo.com/221428690
Fins fa poc, els usuaris gratuïts només podien crear tres plantilles, però ara tots els usuaris poden tenir tantes plantilles al seu compte com vulguin. Perfecte per començar amb una nova idea amb el mínim retard.
4. Col·laboració de moda
La capacitat de col·laborar i ensenyar amb CodePen pot ser el seu principal actiu. Ja hi ha una gran quantitat de grans eines de col·laboració per a programadors, però l'enfocament de CodePen és senzill i intuïtiu.
Els usuaris professionals de CodePen poden crear un bolígraf nou i obrir-lo a la col·laboració sota el Canvia la visualització menú. Això canvia l'enllaç del llapis en una invitació que es pot compartir amb capacitat per a un nombre ampliat de persones en funció del vostre pla CodePen Pro.
com canviar el nom de Steam
En aquest cas, he escrit HTML mentre un amic actualitzava el CSS en temps real, amb un cursor etiquetat identificat on treballaven.
Tothom que tingui l'enllaç pot unir-se i utilitzar la funció de xat al navegador, independentment de si és un usuari professional o fins i tot té un compte CodePen. Si el desat automàtic està desactivat, només el propietari del bolígraf pot desar qualsevol canvi, cosa que fa que sigui una manera segura d’obrir el codi a altres persones sense cap risc.
El caràcter obert d’aquest mode és beneficiós per a principiants, ja que podeu convidar gairebé qualsevol persona a la vostra ploma per guiar-vos a través d’un concepte difícil. També és un mode útil per conèixer el vostre camí, ja que és perfecte per entrevistar empleats potencials i ja ho ha fet s’ha utilitzat professionalment d’aquesta manera !
5. Mode professor
El mode Professor permet a un usuari Pro allotjar una sala on només ells poden editar el codi. Entre 10 i 100 usuaris poden veure i xatejar en funció del pla Pro de l'amfitrió.
El mode Professor permet flexibilitat entre l’aprenentatge a l’aula i l’aprenentatge a distància, o una combinació de les dues. L’ús del mode Professor permetrà que la gent de la part posterior de la classe tingui la mateixa experiència que la de la part del davant i que el professor mostri correccions d’errors que s’actualitzaran en temps real.
6. Mode de presentació
No és sorprenent que el mode de presentació estigui dissenyat tenint present el codi. L'aplicació es mostra en una visualització simplificada, dissenyada per funcionar amb retroprojectors. CodePen ha optimitzat el mode de presentació per utilitzar-lo en connexions d’Internet de menor velocitat i en maquinari més feble.
És possible que els lectors astuts ja s’hagin adonat que la versió gratuïta de CodePen proporcionaria precisament aquesta funció, tot i que el mode Pro té algunes funcions útils. El disseny, la mida de la lletra i els temes es poden canviar ràpidament sobre la marxa per adaptar-se a gairebé qualsevol paràmetre i, si es mostra l’enllaç al llapis, apareix un URL reduït de mida enorme que facilita la compartició del projecte.
Aquests petits canvis, juntament amb poder escalar la finestra de vista prèvia per adaptar-se al que mostreu, fan que el mode de presentació sigui perfecte tant per als professors com per als desenvolupadors que presentin idees als companys. El mode de presentació també és una forma senzilla i d’aspecte net de presentar codi si us trobeu entrevistant per a una posició de programació.
7. Patrons
La cerca d’inspiració es fa molt més fàcil amb les col·leccions de CodePen Patrons de disseny .
Cada categoria és una col·lecció d'exemple de codi proporcionat pels usuaris de CodePen per a tasques específiques. Esteu cercant una manera de crear botons dinàmics per al vostre lloc? Menús d'acordió? Hi ha moltes categories que s’adapten a gairebé qualsevol exemple.
Aquests patrons també són una manera excel·lent d'aprendre com funcionen els botons interactius i les diferents maneres en què poden funcionar les interfícies d'usuari dinàmiques.
8. Emmet
Emmet , conegut anteriorment com a codificació Zen, és àmpliament considerat com el millor estalvi de temps per al desenvolupament d'HTML i CSS. El connector agafa una part del codi que escriu molt i el converteix en dreceres simples.
Veure’l en acció és millor que explicar-lo, així que feu la configuració habitual d’un document HTML:
L’afegit a tots els documents HTML s’ha reduït a dues accions. Amb Emmet, escriviu ! i colpejar el Pestanya clau. Màgia!
Emmet està actiu de sèrie a CodePen i és especialment útil si intenteu aprendre un nou concepte en JavaScript i necessiteu crear HTML i CSS de suport ràpidament.
Desenvolupeu-vos amb CodePen per obtenir una experiència millor
CodePen és una excel·lent eina per a desenvolupadors web i el camp està en constant creixement. JavaScript és un llenguatge fantàstic per aprendre per a un futur en el desenvolupament web.
compra d'iPhone des d'Apple vs AT & T
Hi ha alguns tutorials i cursos fantàstics disponibles per a persones que vulguin començar a utilitzar JavaScript, i CodePen és un entorn ideal per provar les vostres noves habilitats.
Compartir Compartir Tweet Correu electrònic Els vuit millors llocs web per descarregar audiollibres de forma gratuïtaEls audiollibres són una gran font d’entreteniment i són molt més fàcils de digerir. Aquests són els vuit millors llocs web on els podeu descarregar gratuïtament.
Llegiu a continuació Temes relacionats- Programació
- HTML
- Desenvolupament web
- JavaScript
- CSS
Ian Buckley és periodista, músic, intèrpret i productor de vídeo independent que viu a Berlín, Alemanya. Quan no escriu ni està a l’escenari, juga amb electrònica o codi de bricolatge amb l’esperança de convertir-se en un científic boig.
Més de Ian BuckleySubscriu-te al nostre butlletí
Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.
Feu clic aquí per subscriure-us