Viena no daudzajām nomāktajām lietām, kas saistītas ar tīmekļa attīstību, nav vienkāršs veids, kā dalīties projektos ar citiem. Daudzos gadījumos jums nāksies mitināt savu projektu tīmekļa serverī vai nosūtīt visus attiecīgos failus kādam, kurš vēlas redzēt jūsu izveidoto. Bet, pateicoties glītam tiešsaistes rīkam ar nosaukumu CodePen, jums par to vairs nav jāuztraucas.
CodePen.io
CodePen ir bezmaksas rīks, kas ļaus jums mitināt savus projektus tiešsaistē, nekad nemaksājot ne santīma. Lai sāktu, dodieties uz vietni CodePen.io un izveidojiet bezmaksas kontu.
Kad esat to izdarījis, varat izveidot “Pildspalvu”, ekrāna augšējā labajā stūrī noklikšķinot uz pogas “Jauna pildspalva”.
Pēc tam attiecīgajiem lodziņiem varēsit pievienot jebkuru HTML, CSS un JavaScript. Kad sāksit pievienot kādu kodu, jūs varēsit redzēt izveidotā priekšskatījumu tiešsaistē. Pirmā pildspalva var tikt nosaukta augšējā kreisajā stūrī. Pēc noklikšķināšanas uz sava pirmā “Saglabāt” jūs varēsit vienkārši kopīgot lapas URL ar draugiem, ģimeni un kolēģiem, lai viņi varētu redzēt, pie kā strādājat.
Šādi izskatīsies jūsu pildspalva ar kādu kodu tajā (ar bezmaksas kodu nometnes projekta, kura nosaukums ir Tribute Page, pieklājība):
Izveidojot savu pildspalvu, pirms darba sākšanas ieteicams izpētīt iestatījumus. Noklikšķinot uz pogas “Jauna pildspalva”, jums vajadzētu redzēt pildspalvas veidni, kas ir gatava, lai jūs varētu sākt ievadīt kādu kodu. Augšējā labajā stūrī būs poga “Iestatījumi”. Noklikšķiniet uz tā (jums vajadzētu redzēt zemāk redzamo ekrānu).
Šeit varēsit iziet cilnes HTML, CSS un JavaScript, lai pievienotu noteiktu informāciju. Cilnē HTML varēsit pievienot metainformāciju, lietas, kurām vajadzētu būt
cilne utt. Sadaļā CSS varēsit pievienot tādus CSS priekšapstrādātājus kā LESS un Sass. Ne tikai to, bet jūs varat pievienot arī ārēju CSS, piemēram, Bootstrap un Foundation. Cilnē JavaScript varat pievienot JavaScript priekšapstrādātāju, piemēram, Babel vai CoffeeScript. Turklāt jūs varat pievienot ārējos JavaScript ietvarus, piemēram, Angular, React, Lodash, D3 utt.
Visbeidzot, CodePen ļaus mainīt skatīto skatu. Noklusējuma skats ir Redaktora skats, kas ļauj ievadīt kodu un iegūt nelielu priekšskatījumu zemāk esošajā konsolē. Bet ir arī citas iespējas, īpaši ērts ir skats “Pilna lapa”, kur jūs varēsit redzēt projektu tā, it kā tas būtu redzams tiešsaistē. Ir pieejami nedaudz citu skatu, uz kuriem var pārslēgties, ar to ir vērts paspēlēties!
CodePen patiešām ir glīts rīks, un mēs esam tikai pieskārušies tā lietderības virsmai. Ir vērts pāriet uz CodePen.io un izmantot to, lai strādātu pie dažiem projektiem, un pēc tam, ja jums tas patīk, padalieties ar draugiem vai kolēģiem.
Ko jūs domājat par CodePen? Vai esat izmantojis līdzīgu rīku? Paziņojiet mums komentāru sadaļā zemāk!
