10 Codepen Vinkkejä aloittelijoille

Codepen on erittäin helppo ja suosittu sivusto kynä alaspäin toimiva etukoodi-koodi heti. Jos et tiedä mitä Codepen on tai ei ole kuullut siitä aiemmin, se on pohjimmiltaan online-lähdekoodin leikkipaikka (kutsutaan sitä OSCP äänieristin) kolmelle etupään koodauksen muskettimiehelle; HTML, CSS ja JavaScript.

On olemassa muita vastaavia OSCP: itä kuin JSFiddle, JS Bin, CSSDeck & Dabblet. Codepen on ehdottomasti yksi tunnetuimmista front-end-kehittäjistä. Ilman ylimääriä hyppäämme suoraan joihinkin perus- ja hyödyllisiä vinkkejä Codepenin käyttöön.

1. Suorita painike

Jos et ole fani siitä, miten koodin tuotos Codepenissä jatkuu virkistävän sillä aikaa voit kirjoittaa luopua “Automaattinen päivityksen esikatselu” vaihtoehto, ja saat sen sijaan Suorita-painikkeen. Kun napsautat sitä, voit nähdä ja päivittää koodin lähdön kun haluat.

Tämä on myös hyvä vaihtoehto, jos työskentelet koodilla, jonka tulos on kulkee paljon layout-muutoksia, ja toistaa uudelleen aina, kun se päivitetään, mikä johtaa hitauteen.

2. Numeron lisäys / vähennys

Lisää tai pienennä koodisi numeroita Codepenissa kirjoittamatta uusia numeroita. Sinun tarvitsee vain käyttää Ctrl / Cmd: n näppäinyhdistelmää ja Nuolet ylös ja alas.

3. Useita kohdistimia

Voit asettaa kohdistimia osoitteeseen useita pisteitä lähdekoodissa, kirjoita tai muokkaa kaikissa näissä kohdissa samaan aikaan. Tämä toimii vain, jos syötät saman informaation ja pienennät kopioinnin tarvetta. Pidä Ctrl / Cmd-näppäintä painettuna samalla, kun napsautat näitä useita pisteitä.

4. Erilaiset värilliset konsoliviestit

Konsoli JavaScript-objektilla on muutamia muita menetelmiä sitä paitsi log () jotta voit tulostaa asioita web-konsoliin.

Voit käyttää tiedot(), varoittaa() ja virhe() menetelmiä tiedot, Varoitus ja virhe. Tyypillisesti web-konsolit värittävät nämä viestit tyypillisesti tai näyttävät niiden vieressä sopivan kuvakkeen (kuten varoitusviesti varoitusviestille) helpottaa tunnistamista.

Codepenillä on oma konsoli voit avata klikkaamalla konsolin painiketta vasemmassa alakulmassa. Se sopii ihanteellisesti konsoliviestien nopeaan tarkistamiseen ilman selaimen konsolin avaamista. Tämä konsoli erottaa erilaiset konsoliviestit eri taustavärit.

5. Vie

Kun olet tallentanut, a kynä (yksi Codepen-yksikkö) voidaan viedä ZIP-tiedostona kaikki sen HTML-, CSS- ja JS-koodissa tiedostoissa. Voit myös tallentaa kynän Github-aineena (Git-arkisto). Vie painike kunkin kynän oikeassa alakulmassa.

6. Etsi ja korvaa

Etsi ja korvaa - olennainen toimenpide sellaisille ihmisille, joilla on tapana nimetä muuttujien nimet aina silloin tällöin. Ctrl / Cmd + Vaihto + F on näppäinyhdistelmä avaa “Etsi ja korvaa” dialogi.

7. Emmet Tab Trigger

Tiedättekö Emmet-koodauksen välilehdistä? Emmet on tuottavuuden työkalu etukäyttäjille, joiden avulla voit kirjoita luurankokoodi, jota myöhemmin laajennetaan. Voit tehdä tämän Codepenissa kirjoittamalla oikean lyhennelmän nopeasti editoriin, painamalla Tab-näppäintä ja koko koodi ilmestyy heti. Käytettävissä vain HTML-muodossa Codepenissä.

8. Hanki yksittäiset kooditiedostot

Jos käytät aiemmin mainittua Vienti-vaihtoehtoa, saat kaikki kynän kaikki kolme tiedostoa (HTML, CSS ja JS). Mutta jos olet kiinnostunut vain yksi tai kaksi näistä tiedostoista, ja haluat ladata ne erikseen, myös Codepenissa on vaihtoehto.

Kun olet kirjautunut sisään Codepeniin, mene kynään ja napsauta oikeassa yläkulmassa olevaa Vaihda näkymää -painiketta. Avattavan luettelon alareunassa näet suorat latauslinkit yksittäisille tiedostoille.

9. Tarkista JavaScript-muuttujat

Koska Codepenin JavaScript-konsoli muodostaa yhteyden kynäasi tallennettuun JavaScriptiin, voit myös testata JavaScriptin nopeasti. Tämä ominaisuus on erityisen kätevä JS-muuttujien tarkastaminen, näin sinä ei tarvitse lisätä ylimääräisiä konsoli- tai hälytysviestejä alkuperäiseen koodiin vain testaustarkoituksiin.

10. Käännä kynä malliin

Jos sinulla on taipumus aloittaa useimmat kynät sama koodi, voit käyttää mallia tallenna ne toistuvat koodit. Kynän kääntäminen malliksi, Valitse malli-vaihtoehto Asetukset-valikosta. Kun luot myöhemmin uuden kynän, voit aloita tallennetulla mallilla klikkaamalla alas-nuolta Uusi kynä -painikkeen oikealla puolella. Se avaa avattavan luettelon, jossa on kaikki tallennetut mallisi.