10 Codepen padomi iesācējiem
Codepen ir ļoti vienkārša un populāra vietne pildspalvu uz leju darba front-end kodu kombināciju tūlīt pat. Ja jūs nezināt, ko Codepen jau iepriekš nav dzirdējis, tas būtībā ir tiešsaistes pirmkodu rotaļu laukums (pieņemsim to OSCP skaņu nerdier) trīs priekšējā koda musketieriem; HTML, CSS un JavaScript.
Ir arī citi līdzīgi OSCP, piemēram, JSFiddle, JS Bin, CSSDeck & Dabblet. Codepen noteikti ir viens no pazīstamākajiem front-end izstrādātājiem. Bez tālākas ado, lēksim tiesības uz dažiem pamata un noderīgi padomi izmantojot Codepen.
1. Palaist pogu
Ja neesat ventilatora no tā, kā jūsu koda produkcija Codepen turpina atsvaidzināt kamēr jūs varat rakstīt atteikties no “Automātiskā atjaunināšanas priekšskatījums” opcija, un saņemiet pogu Palaist. Noklikšķinot uz tā, jūs varēsiet redzēt un atjaunināt koda izeju kad vien vēlaties.
Šī ir arī lieliska iespēja, ja strādājat ar kodu, kura izejas iziet daudz izkārtojuma izmaiņas, un atjauno katru reizi, kad tas tiek atjaunināts, kā rezultātā tiek lēni.
2. Skaits pieaugums / samazinājums
Palieliniet vai samaziniet koda numurus Codepen ierakstot jaunos numurus. Viss, kas Jums jādara, ir izmantot Ctrl / Cmd taustiņu kombināciju un Augšup un lejup vērstās bultiņas.
3. Vairāki kursori
Varat ievietot kursorus vairāki punkti pirmkodā, pēc tam ierakstiet vai rediģējiet visos šajos punktos tajā pašā laikā. Tas darbojas tikai tad, ja ievadāt to pašu informāciju un samazinās nepieciešamība kopēt. Vienkārši turiet taustiņu Ctrl / Cmd, vienlaikus noklikšķinot uz šiem vairākiem punktiem.
4. Dažādi krāsu konsoles ziņojumi
The Konsole JavaScript objektam ir vēl dažas metodes Turklāt žurnāls () lai jūs varētu drukāt lietas tīmekļa konsolē.
Varat izmantot info (), brīdināt () un kļūda () metodes informāciju, brīdinājums un kļūda. Parasti tīmekļa konsoles maina šos ziņojumus, vai blakus tām parādīsies atbilstoša ikona (piemēram, brīdinājuma zīme brīdinājuma ziņojumam) vieglāk atpazīt.
Codepen ir savs konsole kuru var atvērt, noklikšķinot uz pogas Konsole apakšējā kreisajā stūrī. Tas ir ideāls ātrai konsoles ziņojumu pārbaudei neatverot pārlūkprogrammas konsoli. Šī konsole atšķir dažādus konsoles ziņojumu veidus ar dažādām fona krāsām.
5. Eksports
Kad saglabāts, a pildspalvu (vienu Codepen vienību) var eksportēt kā ZIP failu ar visiem tās HTML, CSS un JS kodos failos. Ir arī iespēja saglabāt pildspalvu kā Github gist (Git krātuve). Eksportēšanas pogu var atrast katra pildspalvveida pilnšļirces labajā apakšējā stūrī.
6. Atrast un aizstāt
Atrast un aizstāt - būtiska darbība cilvēkiem, kuri mēdz pārdēvēt savus mainīgos nosaukumus ik pa laikam. Ctrl / Cmd + Shift + F ir atslēgu kombinācija atveriet “Atrast un aizstāt” dialoglodziņā.
7. Emmet Tab Trigger
Vai jūs zināt par cilnes trigeriem Emmet kodēšanai? Emmet ir produktivitātes rīks priekšizstrādātājiem, kas ļauj jums ierakstiet skeleta kodu, kas vēlāk tiek pagarināts. Lai to izdarītu Codepen, vienkārši ātri ierakstiet atbilstošo saīsinājumu redaktorā, nospiediet taustiņu Tab un pilnais kods parādās uzreiz. Pieejams tikai HTML Codepen.
8. Iegūstiet individuālus kodu failus
Ja izmantojat iepriekš minēto eksporta opciju, jūs saņemsiet visus pildspalvveida pilnšļirces trīs failus (HTML, CSS un JS). Bet, ja jūs interesē tikai viens vai divi no šiem failiem, un vēlaties tos lejupielādēt atsevišķi, turklāt ir iespēja to darīt arī Codepen.
Kad esat pieteicies Codepen, dodieties uz savu pildspalvu un noklikšķiniet uz pogas Mainīt skatu augšējā labajā stūrī. Nolaižamā saraksta apakšā redzēsiet tiešās lejupielādes saites atsevišķiem failiem.
9. Pārbaudiet JavaScript mainīgos
Tā kā Codepen JavaScript konsole ir savienota ar jūsu pildspalvā saglabāto JavaScript, varat to arī izmantot, lai ātri pārbaudītu JavaScript. Šī funkcija ir īpaši ērta pārbaudīt JS mainīgos, tā kā jūs nav jāievieto papildu konsoles vai brīdinājuma ziņojumi sākotnējā kodā tikai testēšanas nolūkos.
10. Pagrieziet pildspalvu uz veidni
Ja mēdzat sākt lielāko daļu savu pildspalvu ar pats kods, varat izmantot veidni saglabājiet šos atkārtotos kodus. Lai ieslēgtu pildspalvu veidnē, atzīmējiet opciju Veidne izvēlnē Iestatījumi. Kad jūs vēlāk izveidojat jaunu pildspalvu, varat sākt ar saglabāto veidni noklikšķinot uz lejupvērstās bultiņas pogas Jauna pildspalva labajā pusē. Tā atvērs nolaižamo sarakstu ar visām jūsu saglabātajām veidnēm, no kurām izvēlēties.
