Home-theater-designers
JavaScript -verkkokehityksen aloittaminen voi olla turhauttavaa, mutta on olemassa työkaluja, jotka helpottavat sitä.
CodePen.io on selaimen sisäinen koodausympäristö, joka on suunniteltu sekä koodin oppimiseen että ideoiden prototyyppien nopeaan muotoiluun pienellä vaivalla.
Tässä artikkelissa tarkastelemme joitain sivuston ominaisuuksia ja miten ne voivat auttaa sinua tulemaan paremmaksi ohjelmoijaksi.
Mikä on CodePen?
CodePen tarjoaa jotain nimeltä a kynä , joka sisältää kolme eri ikkunaa HTML: lle, CSS: lle ja JavaScriptille sekä esikatseluruudun, joka päivittyy reaaliajassa kirjoittaessasi.
Verkkokehittäjät käyttävät sitä usein verkkosivustojen ideoiden esittelyyn, mutta se on myös loistava paikka oppia etupuolen verkkokehityksen perusteet. Tässä ovat merkittävimmät ominaisuudet, jotka sinun on tiedettävä käytettäessä CodePen -kynää.
1. Esiprosessorit
Esiprosessorit ovat tulkittuja tai koottuja kieliä, jotka on suunniteltu yksinkertaistamaan koodausta. Ne voivat lisätä ominaisuuksia kielelle mukavuuden vuoksi ja helpottaa koodin lukemista. Verkkokehityksessä HTML-, CSS- ja JavaScript -esiprosessoreita käytetään puhtaan koodin luomiseen nopeasti.
Jos opit verkkokehitystä ja haluat kokeilla erilaisia esiprosessoreita, CodePenin avulla voit vaihtaa esiprosessoreita lennossa ja nähdä koodatun koodin reaaliajassa. Kullakin CodePen -sovelluksen kolmesta ruudusta on avattava valikko oikeassa yläkulmassa. Valitse Näytä koottu HTML/CSS/JS nähdäksesi kuinka koodi tulkitaan.
Tällä kynällä olemme luoneet yksinkertaisen sivuston käyttämällä Haml ja Sass muotoilla otsikkotekstiä. Valitaan Näytä koottu näyttää standardin HTML- ja CSS -tiedostot. Tässä esimerkissä ero on minimaalinen. Uuden kielen oppimisen aikana voi kuitenkin olla hyödyllistä nähdä, miltä esikäsitelty koodi näyttää koottuna.
2. Ulkoiset resurssit
Esiprosessorien alkuperäisen tuen lisäksi CodePen tukee ulkoisia komentosarjoja. Tämä tekee siitä täydellisen paikan saada käytännön kokemusta kirjastoista henkilökohtaisiin projekteihisi tai harjoitella suosittuja verkkosovelluskirjastoja, kuten React.
Jos haluat lisätä ulkoisen kirjaston, avaa asetukset -ruutuun ja siirry JavaScript -välilehteen. Resursseja voi lisätä kahdella tavalla joko lisäämällä resurssin URL -osoitteen manuaalisesti tai tekemällä haun.
Käytimme tätä ominaisuutta artikkelissamme web -animaatio, jossa on mo.js sekä Babelin esikäsittely.
Katso kynä Mojs MUO esimerkki kirjoittanut Ian ( @Bardoctorus ) CodePenissä.
Kyllä, CodePen -kynät voidaan upottaa! Siirry eteenpäin ja napsauta yllä olevaa esikatseluruutua nähdäksesi Mo.js -opetusohjelman tulokset!
Muut kynät voidaan tuoda paljon ulkoisten kirjastojen tapaan. Tämä tarkoittaa, että voit ottaa elementtejä aiemmin kirjoitetuista kynistä käyttääksesi moduuleja uusissa kynissäsi. CodePen -käyttäjän Adam Yksinkertainen kysely kynä on hyvä esimerkki tästä.
3. Mallit
Kun opit uusia käsitteitä tai testaat uusia ideoita, käytät usein samanlaisia komponentteja ja pinnoitat samat vaiheet alkuun. CodePen mahdollistaa mallikynien luomisen, jotka voivat leikata toistoa ja antaa sinun päästä suoraan asiaan.
Jos haluat luoda mallin, avaa uusi kynä, tee muutokset ja valitse Sapluuna liukusäädintä asetusvalikossa.
https://vimeo.com/221428690
Viime aikoihin asti ilmaiset käyttäjät voivat tehdä vain kolme mallia, mutta nyt kaikilla käyttäjillä voi olla tilillään niin monta mallia kuin haluavat. Täydellinen uuden idean aloittamiseen pienellä viiveellä!
4. Muotiyhteistyö
Kyky tehdä yhteistyötä ja opettaa CodePenin kanssa voi olla sen suurin voimavara. Ohjelmoijille on jo olemassa monia hienoja yhteistyövälineitä, mutta CodePenin lähestymistapa on yksinkertainen ja intuitiivinen.
CodePenin ammattikäyttäjät voivat luoda uuden kynän ja avata sen yhteistyölle Muuttaa näkemystä valikko. Tämä muuttaa kynän linkin jaettavaksi kutsuksi, johon mahtuu skaalaava määrä ihmisiä CodePen Pro -suunnitelmasi mukaan.
windows 10 kiintolevy 100%
Tässä tapauksessa kirjoitin HTML-koodia, kun ystäväni päivitti CSS: n reaaliajassa ja merkitty kohdistin tunnistettiin, missä he työskentelivät.
Kaikki linkin saaneet voivat liittyä ja käyttää selaimen sisäistä chat-toimintoa riippumatta siitä, ovatko he ammattilaiskäyttäjiä vai onko heillä edes CodePen-tili. Jos automaattinen tallennus on pois päältä, vain kynän omistaja voi tallentaa muutokset, joten se on turvallinen tapa avata koodisi muille ilman riskiä.
Tämän tilan avoin luonne on hyödyllinen aloittelijoille, koska voit kutsua lähes kuka tahansa kynääsi opastamaan sinua vaikean käsitteen läpi. Se on myös kätevä tapa tuntea tiensä, koska se on täydellinen potentiaalisten työntekijöiden haastatteluun, ja se on jo käytetään ammattimaisesti tällä tavalla !
5. Professori -tila
Professori -tilan avulla yksi Pro -käyttäjä voi isännöidä tilaa, jossa vain he voivat muokata koodia. 10-100 käyttäjää voi katsella ja keskustella isännän Pro-suunnitelmasta riippuen.
Professori -tila mahdollistaa joustavuuden luokkahuoneen ja etäopetuksen välillä tai näiden kahden yhdistelmän välillä. Professori -tilan käyttäminen antaa luokan takana oleville ihmisille saman kokemuksen kuin edessä oleville ja opettajalle näyttää virheenkorjauksia, jotka päivittyvät reaaliajassa.
6. Esitystila
Esitystila on suunniteltu yllättäen esittämällä koodi mielessä. Sovellus näkyy yksinkertaistetussa näkymässä, joka on suunniteltu toimimaan piirtoheittimien kanssa. CodePen on optimoinut esitystilan käytettäväksi hitaammilla Internet -yhteyksillä ja heikommalla laitteistolla.
Älykkäät lukijat ovat ehkä jo ymmärtäneet, että CodePenin ilmainen versio tarjoaisi juuri tämän toiminnon, vaikka Pro -tilassa on muutamia hyödyllisiä ominaisuuksia. Asettelua, kirjasinkokoa ja teemoja voidaan muuttaa nopeasti lennossa melkein mihin tahansa asetukseen. Kynän linkin näyttäminen tuo näkyviin jumbo-kokoisen lyhennetyn URL-osoitteen, joka helpottaa projektin jakamista.
Nämä pienet muutokset sekä mahdollisuus skaalata esikatseluikkuna sopivaksi mihin tahansa esittelemään, tekevät esitystilasta täydellisen sekä opettajille että kehittäjille, jotka esittävät ideoita kollegoilleen. Esitystila on myös siistin näköinen ja yksinkertainen tapa esittää koodi, jos löydät itsesi haastattelemasta ohjelmointiasemaa.
7. Kuviot
Inspiraation etsiminen on paljon helpompaa CodePenin kokoelmilla Suunnittelumalleja .
Jokainen luokka on kokoelma esimerkkikoodia, jonka CodePen -käyttäjät ovat antaneet tiettyjä tehtäviä varten. Etsitkö tapaa luoda dynaamisia painikkeita sivustollesi? Yhdenmukaiset valikot? On olemassa monia luokkia, jotka sopivat melkein mihin tahansa esimerkkiin.
Nämä mallit ovat myös loistava tapa oppia vuorovaikutteisten painikkeiden toimintaa ja dynaamisten käyttöliittymien eri tapoja toimia.
8. Emmet
Emmet , joka tunnettiin aiemmin nimellä Zen -koodaus, pidetään laajalti suurimpana ajan säästäjänä HTML- ja CSS -kehityksessä. Laajennus ottaa osan koodista, jonka huomaat kirjoittavasi paljon, ja muuntaa ne yksinkertaisiksi pikakuvakkeiksi.
Sen näkeminen toiminnassa on parempi kuin selittäminen, joten käytä HTML -asiakirjan tavanomaisia asetuksia:
Tämän lisääminen jokaiseen HTML -asiakirjaan on supistettu kahteen toimintoon. Kirjoita Emmetin avulla ! ja paina Välilehti näppäintä. Taika!
Emmet toimii vakiona CodePenissä ja on erityisen hyödyllinen, jos yrität oppia uutta JavaScript -käsitettä ja sinun on luotava tukeva HTML ja CSS nopeasti.
Kehitä CodePenillä paremman kokemuksen saamiseksi
CodePen on erinomainen työkalu web -kehittäjille, ja ala kasvaa jatkuvasti. JavaScript on loistava kieli oppia web -kehityksen tulevaisuutta varten.
kannettava tietokone on yhdistetty wifi -verkkoon, mutta ei Internet -yhteyttä Windows 10
On olemassa hienoja opetusohjelmia ja kursseja ihmisille, jotka haluavat aloittaa JavaScriptin käytön, ja CodePen on loistava ympäristö testata uusia taitojasi.
Jaa Jaa Tweet Sähköposti 8 parasta verkkosivustoa, joilla voit ladata äänikirjoja ilmaiseksiÄänikirjat ovat loistava viihdelähde ja paljon helpompi sulattaa. Tässä on kahdeksan parasta verkkosivustoa, joista voit ladata ne ilmaiseksi.
Lue seuraava Liittyvät aiheet- Ohjelmointi
- HTML
- Verkkokehitys
- JavaScript
- CSS
Ian Buckley on freelance -toimittaja, muusikko, esiintyjä ja videotuottaja, joka asuu Berliinissä, Saksassa. Kun hän ei kirjoita tai ei ole lavalla, hän hieroo DIY -elektroniikkaa tai koodia toivossa tulla hulluksi tiedemieheksi.
Lisää Ian Buckleyltätilaa uutiskirjeemme
Liity uutiskirjeeseemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia e -kirjoja ja ainutlaatuisia tarjouksia!
Klikkaa tästä tilataksesi