Home-theater-designers
Darba sākšana ar JavaScript tīmekļa izstrādi var būt nomākta, taču ir rīki, kas to atvieglo.
CodePen.io ir pārlūkprogrammā esoša kodēšanas vide, kas paredzēta gan kodēšanas mācīšanai, gan ideju ātrai prototipēšanai ar minimālu problēmu.
Šajā rakstā mēs aplūkojam dažas vietnes funkcijas un to, kā tās var palīdzēt jums kļūt par labāku programmētāju.
Kas ir CodePen?
CodePen nodrošina kaut ko tādu, ko sauc par a pildspalva , kas ietver trīs dažādus logus HTML, CSS un JavaScript, kā arī priekšskatījuma rūti, kas rakstīšanas laikā tiek atjaunināta reāllaikā.
Lai gan tīmekļa izstrādātāji to bieži izmanto, lai demonstrētu idejas vietnēm, tā ir arī lieliska vieta, kur apgūt priekšgala tīmekļa izstrādes pamatus. Šeit ir visievērojamākās funkcijas, kas jums jāzina, lietojot CodePen.
1. Priekšapstrādātāji
Priekšprocesori tiek tulkoti vai apkopoti, lai vienkāršotu kodēšanu. Tie ērtībai var pievienot valodas funkcijas un atvieglot koda lasīšanu. Tīmekļa izstrādē tiek izmantota HTML, CSS un JavaScript priekšapstrādātāju kombinācija, lai ātri izveidotu tīru kodu.
Ja jūs mācāties tīmekļa izstrādi un vēlaties izmēģināt dažādus priekšprocesorus, CodePen ļauj jums pārslēgties uz priekšprocesoriem un redzēt reāllaikā tā apkopoto kodu. Katrā no trim CodePen lietotnes rūtīm augšējā labajā stūrī ir nolaižamā izvēlne. Izvēlieties Skatīt apkopoto HTML/CSS/JS lai redzētu, kā kods tiks interpretēts.
Šajā pildspalvā mēs esam izveidojuši vienkāršu vietni, izmantojot Hamls un Sass lai ieveidotu galvenes tekstu. Atlasot Skats Apkopots parāda standarta HTML un CSS. Šajā piemērā atšķirība ir minimāla. Mācoties jaunu valodu, var būt noderīgi redzēt, kā izskatās iepriekš apstrādāts kods, kad tas ir apkopots.
2. Ārējie resursi
Līdztekus sākotnējam procesoru atbalstam CodePen atbalsta ārējos skriptus. Tas padara to par ideālu vietu, kur iegūt praktisku pieredzi ar bibliotēkām saviem personīgajiem projektiem vai apgūt populāras tīmekļa lietotņu bibliotēkas, piemēram, React.
Lai pievienotu ārēju bibliotēku, atveriet Iestatījumi pildspalvas rūtī un dodieties uz cilni JavaScript. Ir divi resursu pievienošanas veidi, manuāli pievienojot resursa URL vai veicot meklēšanu.
Mēs izmantojām šo funkciju mūsu rakstā tīmekļa animācija ar mo.js , kopā ar Bābeles pirmapstrādi.
Skatiet pildspalvu Mojs MUO piemērs autors Īans ( @Bardoctorus ) vietnē CodePen.
Jā, CodePen pildspalvas var iestrādāt! Dodieties uz priekšu un noklikšķiniet uz iepriekš redzamās priekšskatījuma rūts, lai redzētu Mo.js apmācības rezultātus!
Citas pildspalvas var importēt līdzīgi kā ārējās bibliotēkas. Tas nozīmē, ka varat izmantot elementus no iepriekš uzrakstītām pildspalvām, lai izmantotu līdzīgus moduļus jaunajās pildspalvās. CodePen lietotāja Adam's Vienkārša aptauja pildspalva ir labs piemērs tam.
3. Veidnes
Apgūstot jaunas koncepcijas vai izmēģinot jaunas idejas, jūs bieži izmantojat līdzīgas sastāvdaļas un atkārtojat tās pašas darbības. CodePen ļauj izveidot veidņu pildspalvas, kas var samazināt atkārtojumu un ļaut jums nokļūt tieši pie lietas.
Lai izveidotu veidni, atveriet jaunu pildspalvu, veiciet izmaiņas un atlasiet Veidne slīdni iestatījumu izvēlnē.
https://vimeo.com/221428690
Vēl nesen bezmaksas lietotāji varēja izveidot tikai trīs veidnes, bet tagad visu lietotāju kontā var būt tik daudz veidņu, cik viņi vēlas. Lieliski piemērots, lai sāktu jaunu ideju ar minimālu kavēšanos!
4. Modes sadarbība
Spēja sadarboties un mācīt ar CodePen var būt tās lielākā vērtība. Programmētājiem jau ir daudz lielisku sadarbības rīku, taču CodePen pieeja ir vienkārša un intuitīva.
Pro CodePen lietotāji var izveidot jaunu pildspalvu un atvērt to sadarbībai sadaļā Mainīt skatu izvēlne. Tādējādi pildspalvas saite tiek mainīta uz koplietojamu ielūgumu, kurā ir pieejams liels skaits cilvēku atkarībā no jūsu CodePen Pro plāna.
kā palielināt īpašu video atmiņu nvidia
Šajā gadījumā es rakstīju HTML, kamēr draugs reāllaikā atjaunināja CSS, un ar marķētu kursoru tika identificēts, kur viņi strādā.
Ikviens, kam ir saite, var pievienoties un izmantot tērzēšanas funkciju pārlūkprogrammā neatkarīgi no tā, vai viņš ir profesionāls lietotājs vai pat viņam ir CodePen konts. Ja automātiskā saglabāšana ir izslēgta, tikai pildspalvas īpašnieks var saglabāt visas izmaiņas, padarot to par drošu veidu, kā bez riska atvērt savu kodu citiem.
Šī režīma beztermiņa raksturs ir izdevīgs iesācējiem, jo jūs varat uzaicināt gandrīz ikvienu savā pildspalvā, lai palīdzētu jums ar sarežģītu koncepciju. Tas ir arī ērts režīms, lai zinātu savu ceļu, jo tas ir lieliski piemērots potenciālo darbinieku intervēšanai, un tas jau ir izdarīts šādā veidā tiek izmantots profesionāli !
5. Profesora režīms
Profesora režīms ļauj vienam Pro lietotājam uzņemt telpu, kurā tikai viņi var rediģēt kodu. Atkarībā no uzņēmēja Pro plāna var skatīties un tērzēt no 10 līdz 100 lietotājiem.
Profesora režīms nodrošina elastību starp mācībām klasē un tālmācību vai abu kombināciju. Profesora režīma izmantošana ļaus cilvēkiem klases aizmugurē iegūt tādu pašu pieredzi kā priekšā esošajiem un skolotājam parādīt kļūdu labojumus, kas tiks atjaunināti reālā laikā.
6. Prezentācijas režīms
Prezentācijas režīms nav pārsteidzoši veidots, ņemot vērā prezentācijas kodu. Lietotne tiek parādīta vienkāršotā skatā, kas paredzēta darbam ar projektoriem. CodePen ir optimizēts prezentācijas režīms izmantošanai zemāka ātruma interneta savienojumos un vājākā aparatūrā.
Gudrie lasītāji, iespējams, jau ir sapratuši, ka CodePen bezmaksas versija nodrošinās tieši šo funkciju, lai gan Pro režīmam ir dažas noderīgas funkcijas. Izkārtojumu, fonta lielumu un motīvus var ātri mainīt, lai tie atbilstu gandrīz jebkuram iestatījumam, un, parādot saiti uz pildspalvu, tiek parādīts saīsināts URL, kas atvieglo projekta kopīgošanu.
Šīs nelielās izmaiņas, kā arī iespēja pielāgot priekšskatījuma logu, lai tas atbilstu visam, ko demonstrējat, padara prezentācijas režīmu perfektu gan skolotājiem, gan izstrādātājiem, kuri prezentē idejas kolēģiem. Prezentācijas režīms ir arī tīrs un vienkāršs veids, kā prezentēt kodu, ja atrodat interviju par programmēšanas pozīciju.
7. Raksti
Iedvesmas meklēšana ir daudz vienkāršāka, izmantojot CodePen kolekcijas Dizaina modeļi .
Katra kategorija ir koda parauga kolekcija, ko CodePen lietotāji nodrošina konkrētiem uzdevumiem. Vai meklējat veidu, kā savai vietnei izveidot dinamiskas pogas? Akordeona izvēlnes? Ir daudz kategoriju, kas atbilst gandrīz jebkuram piemēram.
Šie modeļi ir arī lielisks veids, kā uzzināt, kā darbojas interaktīvās pogas, un dažādi veidi, kā var darboties dinamiskas lietotāja saskarnes.
8. Emets
Emmet , kas agrāk bija pazīstama kā Zen kodēšana, tiek plaši uzskatīts par lielāko laika ietaupītāju HTML un CSS izstrādei. Spraudnis ņem daļu no koda, kuru jūs rakstāt daudz, un pārvērš tos vienkāršos īsceļos.
Redzēt to darbībā ir labāk nekā izskaidrot, tāpēc veiciet HTML dokumenta parasto iestatīšanu:
Šī pievienošana katram HTML dokumentam ir samazināta līdz divām darbībām. Izmantojot Emmet, ierakstiet ! un nospiediet Tab taustiņu. Maģija!
Emmet darbojas kā standarta CodePen un ir īpaši noderīgs, ja jūs mēģināt apgūt jaunu JavaScript koncepciju un ātri jāizveido atbalsta HTML un CSS.
Izstrādājiet, izmantojot CodePen, lai iegūtu labāku pieredzi
CodePen ir lielisks rīks tīmekļa izstrādātājiem, un šī joma nepārtraukti pieaug. JavaScript ir lieliska valoda, ko mācīties nākotnes tīmekļa izstrādē.
ārējais cietais disks neparādās diska pārvaldības logos 10
Cilvēkiem, kuri vēlas sākt darbu ar JavaScript, ir pieejamas lieliskas apmācības un kursi, un CodePen ir lieliska vide, lai pārbaudītu savas jaunās prasmes.
Kopīgot Kopīgot Čivināt E -pasts 8 labākās vietnes, kur bez maksas lejupielādēt audiogrāmatasAudiogrāmatas ir lielisks izklaides avots un daudz vieglāk sagremojams. Šeit ir astoņas labākās vietnes, kur tās var lejupielādēt bez maksas.
Lasīt Tālāk Saistītās tēmas- Programmēšana
- HTML
- Web izstrāde
- JavaScript
- CSS
Īans Baklijs ir ārštata žurnālists, mūziķis, izpildītājs un video producents, kas dzīvo Berlīnē, Vācijā. Kad viņš neraksta vai nav uz skatuves, viņš ķeras pie DIY elektronikas vai koda, cerot kļūt par traku zinātnieku.
Vairāk no Īana BaklijaAbonējiet mūsu biļetenu
Pievienojieties mūsu informatīvajam izdevumam, lai iegūtu tehniskus padomus, pārskatus, bezmaksas e -grāmatas un ekskluzīvus piedāvājumus!
Noklikšķiniet šeit, lai abonētu