Home-theater-designers
JavaScripti veebiarendusega alustamine võib olla masendav protsess, kuid on olemas tööriistu, mis hõlbustavad seda.
CodePen.io on brauserisisene kodeerimiskeskkond, mis on loodud nii kodeerimise õppimiseks kui ka ideede kiireks prototüüpimiseks minimaalse vaevaga.
Selles artiklis vaatleme mõningaid saidi funktsioone ja seda, kuidas need aitavad teil saada paremaks programmeerijaks.
Mis on CodePen?
CodePen pakub midagi, mida nimetatakse a pliiats , mis sisaldab kolme erinevat akent HTML-i, CSS-i ja JavaScripti jaoks, lisaks eelvaatepaan, mis uueneb tippimise ajal reaalajas.
Kuigi veebiarendajad kasutavad seda sageli veebisaitide ideede tutvustamiseks, on see suurepärane koht ka veebipõhise veebiarenduse põhitõdede õppimiseks. Siin on kõige tähelepanuväärsemad funktsioonid, mida peate CodePeni kasutamisel teadma.
1. Eeltöötlejad
Eeltöötlejad on tõlgendatud või kompileeritud keeled, mis on loodud kodeerimise lihtsustamiseks. Need võivad lisada keelele funktsioone mugavuse huvides ja hõlbustada koodi lugemist. Veebiarenduses kasutatakse puhta koodi kiireks loomiseks HTML -i, CSS -i ja JavaScripti eeltöötlejate kombinatsiooni.
Kui õpite veebiarendust ja soovite proovida erinevaid eeltöötlejaid, võimaldab CodePen käigult eeltöötlejaid vahetada ja näha selle koostatud koodi reaalajas. Kõigil CodePeni rakenduse kolmel paanil on paremas ülanurgas rippmenüü. Valige Kuva kompileeritud HTML/CSS/JS et näha, kuidas koodi tõlgendatakse.
Selle pliiatsi abil oleme loonud lihtsa saidi Haml ja Sass päise teksti stiilimiseks. Valimine Vaade koostatud näitab standardset HTML -i ja CSS -i. Selles näites on erinevus minimaalne. Uue keele õppimisel võib aga olla kasulik näha, kuidas eeltöödeldud kood pärast koostamist välja näeb.
2. Välised ressursid
Koos eeltöötlejate loomuliku toega toetab CodePen väliseid skripte. See muudab selle ideaalseks kohaks, kus saate oma isiklike projektide jaoks raamatukogudega praktilisi kogemusi hankida või populaarsete veebirakenduste teekide, nagu React, juurde pääseda.
Välise kogu lisamiseks avage Seaded pliiatsi paanil ja minge vahekaardile JavaScript. Ressursside lisamiseks on kaks võimalust, lisades ressursi URL -i käsitsi või otsides.
Kasutasime seda funktsiooni meie artiklis veebianimatsioon mo.js abil koos Paabeli eeltöötlusega.
Vaadake pliiatsit Mojs MUO näide autor Ian ( @Bardoctorus ) CodePenis.
Jah, CodePeni pliiatsid saab manustada! Jätkake ja klõpsake ülaltoodud eelvaatepaanil, et näha Mo.js õpetuse tulemusi!
Teisi pastapliiatseid saab importida sarnaselt välistele raamatukogudele. See tähendab, et saate varem kirjutatud pliiatsite elemente kasutada uutes pliiatsites sarnaste moodulitena. CodePeni kasutaja Adam Lihtne küsitlus pliiats on selle hea näide.
3. Mallid
Uute kontseptsioonide õppimisel või uute ideede katsetamisel kasutate sageli sarnaseid komponente ja alustamiseks alustate samu samme. CodePen võimaldab luua mallipliiatseid, mis võivad korduse välja lõigata ja võimaldavad teil otse asja juurde jõuda.
Malli loomiseks avage uus pliiats, tehke muudatused ja valige Mall liugurit seadete menüüs.
https://vimeo.com/221428690
Kuni viimase ajani said tasuta kasutajad teha ainult kolm malli, kuid nüüd saab kõigi kasutajate kontol olla nii palju malle kui nad soovivad. Ideaalne uue idee alustamiseks minimaalse viivitusega!
4. Moekoostöö
Võimalus CodePeniga koostööd teha ja õpetada võib olla selle suurim eelis. Programmeerijate jaoks on juba palju suurepäraseid koostöövahendeid, kuid CodePeni lähenemine on lihtne ja intuitiivne.
CodePeni professionaalsed kasutajad saavad luua uue pliiatsi ja avada selle koostööks jaotises Vaate muutmine menüü. See muudab pliiatsi lingi jagatavaks kutseks, mis mahutab skaleeriva arvu inimesi sõltuvalt teie CodePen Pro plaanist.
kuidas Apple Watchis akut säästa
Sel juhul kirjutasin HTML-i, samal ajal kui sõber värskendas CSS-i reaalajas, märgistatud kursoriga tuvastati nende töökoht.
Igaüks, kellel on link, saab brauserisisese vestlusfunktsiooniga liituda ja seda kasutada, olenemata sellest, kas ta on profikasutaja või isegi CodePeni konto. Kui automaatne salvestamine on välja lülitatud, saab ainult pliiatsi omanik kõik muudatused salvestada, muutes selle turvaliseks viisiks oma koodi teistele riskivabalt avada.
Selle režiimi avatud otstarve on kasulik algajatele, kuna võite kutsuda peaaegu kõik oma pliiatsi, et juhatada teid läbi raske kontseptsiooni. See on ka mugav režiim, mis võimaldab teil orienteeruda, kuna see sobib suurepäraselt potentsiaalsete töötajate küsitlemiseks ja on seda juba teinud on sel viisil professionaalselt kasutatud !
5. Professor Mode
Professor -režiim võimaldab ühel Pro kasutajal majutada ruumi, kus ainult nemad saavad koodi muuta. Olenevalt hosti Pro plaanist saab vaadata ja vestelda 10–100 kasutajat.
Professori režiim võimaldab paindlikkust klassiruumis õppimise ja kaugõppe vahel või nende kahe kombinatsiooni vahel. Professori režiimi kasutamine võimaldab klassi taga asuvatel inimestel kogeda sama, mis eespool, ja õpetajal kuvada reaalajas värskendatavaid veaparandusi.
6. Esitlusrežiim
Esitlusrežiim on loodud üllatuslikult, esitluskoodi silmas pidades. Rakendus kuvatakse lihtsustatud vaates, mis on loodud töötama koos õhuprojektoritega. CodePenil on optimeeritud esitlusrežiim kasutamiseks väiksema kiirusega Interneti -ühenduste ja nõrgema riistvara jaoks.
Nutikad lugejad võisid juba aru saada, et CodePeni tasuta versioon pakuks just seda funktsiooni, kuigi Pro -režiimil on mõned kasulikud funktsioonid. Paigutust, fondi suurust ja teemasid saab kiiresti lennult muuta, et need sobiksid peaaegu iga seadistusega. Pliiatsi lingi näitamine toob esile suure suurusega lühendatud URL-i, mis muudab projekti jagamise lihtsamaks.
Need väikesed muudatused koos võimalusega eelvaateakent skaleerida nii, et see sobiks sellega, mida näitate, muudavad esitlusrežiimi ideaalseks nii õpetajatele kui ka kolleegidele ideid esitavatele arendajatele. Esitlusrežiim on ka puhas ja lihtne viis koodi esitamiseks, kui leiate end intervjueerimiseks programmeerimispositsiooni jaoks.
7. Mustrid
Inspiratsiooni otsimine on CodePeni kollektsioonidega palju lihtsam Disainimustrid .
Iga kategooria on näidiskoodi kogum, mille CodePeni kasutajad on andnud konkreetsete ülesannete jaoks. Kas otsite võimalust oma saidile dünaamiliste nuppude loomiseks? Akordionimenüüd? Seal on palju kategooriaid, mis sobivad peaaegu iga näitega.
Need mustrid on ka suurepärane võimalus õppida, kuidas interaktiivsed nupud töötavad ja kuidas dünaamilised kasutajaliidesed toimivad.
8. Emmet
Emmet , mida varem tunti kui Zen -kodeerimist, peetakse laialdaselt HTML -i ja CSS -i arendamisel suurimaks aja kokkuhoidjaks. Pistikprogramm võtab osa koodist, mida leiate, et kirjutate palju, ja teisendab need lihtsateks otseteedeks.
Selle nägemine tegevuses on parem kui selle selgitamine, seega tehke HTML -dokumendi jaoks tavaline seadistus.
Selle lisamine igale HTML -dokumendile on vähendatud kaheks toiminguks. Tippige Emmeti abil ! ja vajuta Tab võti. Maagia!
Emmet on CodePeni standardvarustuses aktiivne ja on eriti kasulik, kui proovite õppida JavaScriptis uut kontseptsiooni ja peate kiiresti looma toetava HTML -i ja CSS -i.
Arendage CodePeniga parema kogemuse saamiseks
CodePen on suurepärane tööriist veebiarendajatele ja valdkond kasvab pidevalt. JavaScript on suurepärane keel veebiarenduse tuleviku õppimiseks.
kuidas ekraaniaega välja lülitada
Inimestele, kes soovivad JavaScriptiga alustada, on saadaval mõned suurepärased õpetused ja kursused ning CodePen on suurepärane keskkond oma uute oskuste proovilepanekuks.
Jaga Jaga Piiksuma E -post 8 parimat veebisaiti audioraamatute tasuta allalaadimiseksAudioraamatud on suurepärane meelelahutusallikas ja neid on palju lihtsam seedida. Siin on kaheksa parimat veebisaiti, kust saate need tasuta alla laadida.
Loe edasi Seotud teemad- Programmeerimine
- HTML
- Veebiarendus
- JavaScript
- CSS
Ian Buckley on vabakutseline ajakirjanik, muusik, esineja ja videoprodutsent, kes elab Saksamaal Berliinis. Kui ta parasjagu ei kirjuta ega laval, nokitseb ta isetehtud elektroonika või koodi kallal, lootuses saada hulluks teadlaseks.
Rohkem Ian BuckleyltTelli meie uudiskiri
Liituge meie uudiskirjaga, et saada tehnilisi näpunäiteid, ülevaateid, tasuta e -raamatuid ja eksklusiivseid pakkumisi!
Tellimiseks klõpsake siin