Home-theater-designers
Darbo su „JavaScript“ žiniatinklio kūrimu pradžia gali būti varginantis procesas, tačiau yra įrankių, kurie palengvina.
CodePen.io yra naršyklėje esanti kodavimo aplinka, skirta mokytis koduoti ir greitai prototipuoti idėjas su minimaliu rūpesčiu.
Šiame straipsnyje apžvelgiame kai kurias svetainės funkcijas ir kaip jos gali padėti jums tapti geresniu programuotoju.
Kas yra „CodePen“?
„CodePen“ pateikia kažką, vadinamą a rašiklį , kurį sudaro trys skirtingi HTML, CSS ir „JavaScript“ langai, taip pat peržiūros sritis, kuri atnaujinama realiuoju laiku, kai rašote.
Nors jis dažnai naudojamas žiniatinklio kūrėjams, norintiems parodyti svetainių idėjas, jis taip pat yra puiki vieta išmokti pagrindinio žiniatinklio kūrimo pagrindų. Čia yra svarbiausios funkcijos, kurias reikia žinoti naudojant „CodePen“.
1. Pirminiai procesoriai
Išankstiniai procesoriai yra aiškinamos arba sudaromos kalbos, skirtos supaprastinti kodavimą. Jie patogumui gali pridėti kalbos funkcijų ir palengvinti kodo skaitymą. Kuriant žiniatinklį, norint greitai sukurti švarų kodą, naudojami HTML, CSS ir „JavaScript“ išankstiniai procesoriai.
Jei mokotės kurti žiniatinklį ir norite išbandyti įvairius išankstinius procesorius, „CodePen“ leidžia sklandžiai perjungti išankstinius procesorius ir realiu laiku pamatyti jo sudaromą kodą. Kiekvienoje iš trijų „CodePen“ programos sričių yra išskleidžiamasis meniu viršutiniame dešiniajame kampe. Pasirinkite Peržiūrėti kompiliuotą HTML/CSS/JS pamatyti, kaip bus aiškinamas kodas.
Naudodami šį rašiklį sukūrėme paprastą svetainę Hamlas ir Sass suformuoti antraštės tekstą. Pasirinkimas Peržiūrėti sudaryta rodo standartinį HTML ir CSS. Šiame pavyzdyje skirtumas yra minimalus. Tačiau mokantis naujos kalbos gali būti naudinga pamatyti, kaip iš anksto apdorotas kodas atrodo sukompiliuotas.
2. Išoriniai ištekliai
Kartu su pirminiu procesorių palaikymu „CodePen“ palaiko išorinius scenarijus. Dėl to tai puiki vieta praktinei bibliotekų veiklai, skirta asmeniniams projektams, arba susipažinti su populiariomis žiniatinklio programų bibliotekomis, tokiomis kaip „React“.
Norėdami pridėti išorinę biblioteką, atidarykite Nustatymai tušinuko srityje ir eikite į „JavaScript“ skirtuką. Yra du būdai pridėti išteklių, rankiniu būdu pridedant šaltinio URL arba ieškant.
Šią funkciją mes panaudojome savo straipsnyje žiniatinklio animacija su „mo.js“ , kartu su Babelio išankstiniu apdorojimu.
Žiūrėkite rašiklį Mojs MUO pavyzdys pateikė Ianas ( @Bardoctorus ) „CodePen“.
Taip, „CodePen“ rašiklius galima įterpti! Eikite į priekį ir spustelėkite aukščiau esančią peržiūros sritį, kad pamatytumėte „Mo.js“ mokymo programos rezultatus!
Kitus rašiklius galima importuoti panašiai kaip išorines bibliotekas. Tai reiškia, kad galite naudoti elementus iš anksčiau parašytų rašiklių, kad galėtumėte naudoti panašius modulius savo naujose rašikliuose. „CodePen“ naudotojo Adomo Paprasta apklausa rašiklis yra geras to pavyzdys.
3. Šablonai
Kai mokotės naujų koncepcijų ar išbandote naujas idėjas, dažnai naudojate panašius komponentus ir pakartojate tuos pačius veiksmus. „CodePen“ leidžia sukurti šabloninius rašiklius, kurie gali sumažinti pasikartojimą ir leisti jums pereiti prie reikalo.
Norėdami sukurti šabloną, atidarykite naują rašiklį, atlikite pakeitimus ir pasirinkite Šablonas slankiklį nustatymų meniu.
https://vimeo.com/221428690
Dar visai neseniai nemokami vartotojai galėjo sukurti tik tris šablonus, tačiau dabar visi vartotojai savo paskyroje gali turėti tiek šablonų, kiek nori. Puikiai tinka pradėti naują idėją su minimaliu vėlavimu!
4. Mados bendradarbiavimas
Gebėjimas bendradarbiauti ir mokyti naudojant „CodePen“ gali būti didžiausias jos turtas. Programuotojams jau yra daugybė puikių bendradarbiavimo įrankių, tačiau „CodePen“ metodas yra paprastas ir intuityvus.
Profesionalūs „CodePen“ vartotojai gali sukurti naują rašiklį ir atidaryti jį bendradarbiavimui Keisti rodinį Meniu. Tai pakeičia rašiklio nuorodą į bendrinamą kvietimą, kuriame gali būti daug žmonių, priklausomai nuo jūsų „CodePen Pro“ plano.
perkelkite „iPhone“ atsarginę kopiją į išorinį diską
Šiuo atveju aš parašiau HTML, kai draugas realiu laiku atnaujino CSS, pažymėdamas žymeklį, kuriame jie pažymėjo.
Kiekvienas, turintis nuorodą, gali prisijungti ir naudotis pokalbio naršyklėje funkcija, nepriklausomai nuo to, ar jis yra profesionalus vartotojas, ar net turi „CodePen“ paskyrą. Jei automatinis išsaugojimas išjungtas, tik rašiklio savininkas gali išsaugoti visus pakeitimus, todėl tai yra saugus būdas atidaryti savo kodą kitiems nerizikuojant.
Šio režimo atviras pobūdis yra naudingas pradedantiesiems, nes galite pakviesti beveik bet kurį asmenį į savo rašiklį, kad padėtų jums suprasti sudėtingą koncepciją. Tai taip pat yra patogus būdas pažinti savo kelią, nes jis puikiai tinka apklausti potencialius darbuotojus buvo naudojamas profesionaliai tokiu būdu !
5. Profesoriaus režimas
Profesoriaus režimas leidžia vienam „Pro“ vartotojui priglobti kambarį, kuriame tik jie gali redaguoti kodą. Priklausomai nuo pagrindinio kompiuterio plano, gali žiūrėti ir kalbėtis nuo 10 iki 100 vartotojų.
Profesoriaus režimas leidžia lanksčiai mokytis klasėje ir mokytis nuotoliniu būdu arba derinti abu. Naudodami profesoriaus režimą, žmonės, esantys klasės gale, turės tą pačią patirtį kaip ir priekyje esantys, ir mokytojas galės parodyti klaidų taisymus, kurie bus atnaujinami realiu laiku.
6. Pristatymo režimas
Pristatymo režimas sukurtas nenuostabu, atsižvelgiant į kodo pateikimą. Programa rodoma supaprastintame vaizde, skirta dirbti su projektoriais. „CodePen“ turi optimizuotą pristatymo režimą, skirtą naudoti mažesnio greičio interneto ryšiams ir silpnesnei aparatinei įrangai.
Protingi skaitytojai galbūt jau suprato, kad nemokama „CodePen“ versija suteiks būtent šią funkciją, nors „Pro“ režimas turi keletą naudingų funkcijų. Išdėstymas, šrifto dydis ir temos gali būti greitai keičiami, kad tiktų beveik bet kokiems nustatymams, o parodžius nuorodą į rašiklį, rodomas didžiulio dydžio sutrumpintas URL, kuris palengvina projekto bendrinimą.
Šie nedideli pakeitimai ir galimybė išplėsti peržiūros langą, kad jis atitiktų viską, ką demonstruojate, todėl pristatymo režimas puikiai tinka tiek mokytojams, tiek kūrėjams, pristatantiems idėjas kolegoms. Pristatymo režimas taip pat yra švarus ir paprastas būdas pateikti kodą, jei interviu ieškote programavimo pozicijos.
7. Raštai
Įkvėpimo paieška yra daug lengvesnė naudojant „CodePen“ kolekcijas Dizaino modeliai .
Kiekviena kategorija yra kodo pavyzdžio rinkinys, kurį „CodePen“ vartotojai pateikia konkrečioms užduotims atlikti. Ar ieškote būdo, kaip sukurti dinaminius mygtukus savo svetainei? Akordeono meniu? Yra daugybė kategorijų, kurios tinka beveik bet kokiam pavyzdžiui.
Šie modeliai taip pat yra puikus būdas sužinoti, kaip veikia interaktyvūs mygtukai, ir įvairūs būdai, kaip gali veikti dinaminės vartotojo sąsajos.
8. Emmetas
Emmet , anksčiau žinomas kaip „Zen Coding“, plačiai laikomas didžiausiu laiko taupymu HTML ir CSS kūrimui. Įskiepis paima dalį kodo, kurį radote daug rašydamas, ir paverčia juos paprastais sparčiaisiais klavišais.
Matyti jį veikiant yra geriau nei paaiškinti, todėl atlikite įprastą HTML dokumento sąranką:
Pridėjus jį prie kiekvieno HTML dokumento, buvo sumažinta iki dviejų veiksmų. Naudodami „Emmet“ įveskite ! ir pataikyti į Skirtukas Raktas. Magija!
„Emmet“ yra standartinis „CodePen“ ir yra ypač naudingas, jei bandote išmokti naujos „JavaScript“ koncepcijos ir jums reikia greitai sukurti palaikantį HTML ir CSS.
Kurkite naudodami „CodePen“, kad gautumėte geresnę patirtį
„CodePen“ yra puikus įrankis žiniatinklio kūrėjams ir ši sritis nuolat auga. „JavaScript“ yra puiki kalba, kurią galima išmokti ateityje kuriant žiniatinklį.
kaip prijungti ps2 valdiklį prie kompiuterio
Žmonėms, norintiems pradėti naudotis „JavaScript“, yra keletas puikių vadovėlių ir kursų, o „CodePen“ yra puiki aplinka išbandyti naujus įgūdžius.
Dalintis Dalintis „Tweet“ Paštu 8 geriausios svetainės, kuriose galite nemokamai atsisiųsti garso knygasGarso knygos yra puikus pramogų šaltinis ir daug lengviau virškinamas. Čia yra aštuonios geriausios svetainės, kurias galite nemokamai atsisiųsti.
Skaityti toliau Susijusios temos- Programavimas
- HTML
- Interneto svetainių kūrimas
- „JavaScript“
- CSS
Ianas Buckley yra laisvai samdomas žurnalistas, muzikantas, atlikėjas ir vaizdo įrašų prodiuseris, gyvenantis Berlyne, Vokietijoje. Kai jis nerašo ar ne scenoje, jis užsiima „pasidaryk pats“ elektronika ar kodu, tikėdamasis tapti pamišusiu mokslininku.
Daugiau iš Ian BuckleyPrenumeruokite mūsų naujienlaiškį
Prisijunkite prie mūsų naujienlaiškio, kad gautumėte techninių patarimų, apžvalgų, nemokamų el. Knygų ir išskirtinių pasiūlymų!
Norėdami užsiprenumeruoti, spustelėkite čia