10 „Codepen“ patarimai pradedantiesiems

Codepen yra labai paprasta ir populiari svetainė švirkštimo priemonė nustatykite veikiančią priekinio kodo kombinaciją tuoj pat. Jei nežinote, ką Codepen anksčiau girdėjo, tai iš esmės tai yra internetinio šaltinio kodo žaidimų aikštelė (pakviesime jį OSCP trijų „front-end“ kodavimo musketierių; HTML, CSS ir „JavaScript“.

Yra ir kitų panašių OSCP, pavyzdžiui, JSFiddle, JS Bin, CSSDeck & Dabblet. „Codepen“ neabejotinai yra vienas iš labiausiai žinomų „front-end“ kūrėjų. Be tolesnių veiksmų, pereikime į kai kuriuos pagrindiniai ir naudingi patarimai naudoti „Codepen“.

1. Paleiskite mygtuką

Jei nesate gerbėjas, kaip jūsų kodo išvestis „Codepen“ nuolat gaivina kol galite rašyti atsisakyti “Automatinis naujinimo peržiūra” parinktis, ir gaukite „Run“ mygtuką. Spustelėję galėsite matyti ir atnaujinti savo kodo išvestį kai tik norite.

Tai taip pat yra puiki galimybė, jei dirbate su kodu, kurio išvestis eina per daug išdėstymo pakeitimų, ir pakartoja kiekvieną kartą, kai jis atnaujinamas, todėl lėtumas.

2. Skaičių prieaugis / sumažėjimas

Padidinkite arba sumažinkite kodo numerius „Codepen“ nenurodant naujų numerių. Jums tereikia naudoti klavišą Ctrl / Cmd ir Rodyklės aukštyn ir žemyn.

3. Keli žymekliai

Galite įdėti žymeklį į keli taškai iš pradinio kodo, tada įveskite arba redaguokite visus tuos taškus Tuo pačiu metu. Tai veikia tik tuo atveju, jei įvedate tą pačią informaciją ir sumažinamas kopijavimo poreikis. Tiesiog laikykite nuspaudę klavišą „Ctrl / Cmd“, spustelėdami tuos kelis taškus.

4. Įvairūs spalvoti konsolės pranešimai

The Konsolė „JavaScript“ objektas yra dar keli metodai be to žurnalas () leisti jums spausdinti dalykus žiniatinklio konsolėje.

Galite naudoti info (), įspėti () ir klaida () metodai informacija, įspėjimas ir klaida. Paprastai žiniatinklio konsolės spalvina šiuos pranešimus, arba šalia jų bus rodoma atitinkama piktograma (kaip įspėjamasis įspėjamasis pranešimas) lengviau atpažinti.

„Codepen“ turi savo konsolę kurį galite atidaryti spustelėję mygtuką „Konsolė“, esantį apatiniame kairiajame kampe. Tai idealiai tinka greitai patikrinti konsolės pranešimus nereikia atidaryti naršyklės konsolės. Ši konsolė išskiria įvairių tipų konsolės pranešimus su skirtingomis fono spalvomis.

5. Eksportuoti

Išsaugojus, a švirkštimo priemonė (vienas „Codepen“ subjektas) gali būti eksportuojamas kaip ZIP failą su visais HTML, CSS ir JS kodais failuose. Taip pat yra galimybė išsaugoti švirkštimo priemonę kaip Githubas („Git“ saugykla). Mygtuką Eksportuoti galite rasti dešiniajame kiekvieno rašiklio kampe.

6. Rasti ir pakeisti

Rasti ir pakeisti - svarbi operacija tiems žmonėms, kurie paprastai keičia savo kintamuosius pavadinimus. Ctrl / Cmd + Shift + F yra raktų kombinacija Atidaryk “Rasti ir pakeisti” dialogo langas.

7. Emmet Tab Trigger

Ar žinote apie „Emmet“ kodavimo skirtukus? „Emmet“ yra našumo priemonė, skirta „front-end“ kūrėjams, kurie leidžia jums įveskite skeleto kodą, kuris vėliau išplečiamas. Jei norite tai padaryti „Codepen“, tiesiog greitai įveskite reikiamą santrumpą į redaktorių, paspauskite klavišą Tab ir visą kodą iškart parodysite. Galima tik HTML Codepene.

8. Gaukite individualius kodo failus

Jei naudosite anksčiau pasirinktą parinktį Eksportas, gausite visus tris rašiklio failus (HTML, CSS ir JS). Bet jei jus domina tik vienas ar du iš šių failų, ir norite juos parsisiųsti atskirai, tai yra galimybė ir „Codepen“.

Prisijungę prie „Codepen“, eikite į savo rašiklį ir spustelėkite viršutiniame dešiniajame kampe esantį mygtuką Keisti vaizdą. Išskleidžiamojo sąrašo apačioje pamatysite tiesioginių atsisiuntimų nuorodos atskiriems failams.

9. Patikrinkite „JavaScript“ kintamuosius

„Codepen“ „JavaScript“ konsolė prisijungia prie „JavaScript“, išsaugotos jūsų švirkštimo priemonėje, taip pat galite ją greitai išbandyti „JavaScript“. Ši funkcija ypač naudinga tikrinti JS kintamuosius, taip, kaip jūs nereikia įterpti papildomų konsolės ar įspėjimo pranešimų į pradinį kodą tik bandymų tikslais.

10. Pasukite „Pen“ į šabloną

Jei dažniausiai pradėsite naudoti daugelį rašiklių tas pats kodas, galite naudoti šabloną išsaugokite šiuos pakartotinius kodus. Norėdami įjungti rašiklį į šabloną, pažymėkite parinktį Šablonas meniu „Nustatymai“. Vėliau galite sukurti naują rašiklį pradėkite nuo išsaugoto šablono paspaudę žemyn rodyklę dešiniajame Naujo rašiklio mygtuko pusėje. Jis atveria išskleidžiamąjį sąrašą, kuriame bus pasirinkti visi jūsų išsaugoti šablonai.