Home-theater-designers
Почетак развоја ЈаваСцрипт веб странице може бити фрустрирајући процес, али постоје алати који то олакшавају.
ЦодеПен.ио је окружење за кодирање у прегледачу дизајнирано за учење кодирања и брзо прототипирање идеја уз минималне муке.
У овом чланку разматрамо неке од функција веб локације и како вам могу помоћи да постанете бољи програмер.
Шта је ЦодеПен?
ЦодеПен нуди нешто што се зове а хемијска оловка , који садржи три различита прозора за ХТМЛ, ЦСС и ЈаваСцрипт, плус окно за преглед које се ажурира у реалном времену док куцате.
Иако се веб програмери често користе за излагање идеја за веб локације, такође су одлично место за учење основа фронт-енд веб развоја. Ево најзначајнијих функција које морате знати када користите ЦодеПен.
1. Предпроцесори
Предпроцесори су тумачени или компилирани језици дизајнирани да поједноставе кодирање. Они могу додати функције језику ради погодности и олакшати читање кода. У веб развоју, комбинација претпроцесора за ХТМЛ, ЦСС и ЈаваСцрипт се користи за брзо креирање чистог кода.
Ако учите веб развој и желите да испробате различите предпроцесоре, ЦодеПен вам омогућава да у току пребаците предпроцесоре и видите код у коме се он саставља у реалном времену. Свако од три окна апликације ЦодеПен има падајући мени у горњем десном углу. Изаберите Погледајте компајлирани ХТМЛ/ЦСС/ЈС да видите како ће се код тумачити.
У овом смо оловку створили једноставну веб локацију користећи Хамл и Сасс да бисте стилизовали неки текст заглавља. Одабир Виев Цомпилед приказује стандардне ХТМЛ и ЦСС. У овом примеру разлика је минимална. Док учите нови језик, међутим, може бити корисно видети како унапред обрађени код изгледа једном преведен.
2. Спољни ресурси
Поред изворне подршке за предпроцесоре, ЦодеПен подржава и спољне скрипте. Ово га чини савршеним местом за практично искуство са библиотекама за ваше личне пројекте или за надопуњавање популарних библиотека веб апликација попут Реацт-а.
Да бисте додали спољну библиотеку, отворите Подешавања окну на оловци и идите на картицу ЈаваСцрипт. Постоје два начина за додавање ресурса, било ручним додавањем УРЛ адресе или претраживањем.
Ову функцију смо користили у нашем чланку веб анимација са мо.јс , заједно са Бабел предпроцесирањем.
Погледајте оловку Пример Мојс МУО од Иан ( @Бардоцторус ) на ЦодеПен -у.
Да, ЦодеПен оловке могу бити уграђене! Само напред и кликните на горње окно за преглед да бисте видели резултате Мо.јс водича!
Друге оловке се могу увести слично спољним библиотекама. То значи да можете узети елементе из претходно написаних оловака да бисте их користили као модуле у новим оловкама. ЦодеПен корисник Адам'с Једноставна анкета оловка је добар пример за то.
3. Шаблони
Када учите нове концепте или испробавате нове идеје, често користите сличне компоненте и понављате исте кораке за почетак. ЦодеПен омогућава креирање шаблона за оловке које могу да исеку понављање и омогућавају вам да пређете директно на ствар.
Да бисте креирали предложак, отворите нову оловку, унесите измене и изаберите Темплате клизач у менију за подешавања.
хттпс://вимео.цом/221428690
До недавно су бесплатни корисници могли да направе само три шаблона, али сада сви корисници могу имати колико год шаблона желе на свом налогу. Савршено за почетак нове идеје са минималним одлагањем!
4. Модна сарадња
Способност сарадње и подучавања са ЦодеПен -ом може бити његово највеће богатство. Већ постоји мноштво сјајних алата за сарадњу за програмере, али ЦодеПен приступ је једноставан и интуитиван.
Професионални корисници ЦодеПена могу створити нову оловку и отворити је за сарадњу под Промена поглед мени. Ово мења везу оловке у позивницу за дељење која прима велики број људи у зависности од вашег ЦодеПен Про плана.
апликације за игре које не користе податке
У овом случају, писао сам ХТМЛ док је пријатељ ажурирао ЦСС у реалном времену, са означеним курсором који је идентификовао где раде.
Свако са везом може да се придружи и користи функцију ћаскања у прегледачу, без обзира да ли је професионални корисник или чак има ЦодеПен налог. Под условом да је аутоматско чување искључено, само власник оловке може сачувати све промене, што га чини безбедним начином да без ризика отворите свој код другима.
Отворена природа овог начина рада корисна је за почетнике јер можете позвати скоро свакога у оловку да вас води кроз тежак концепт. Такође је згодан начин да се снађете јер је савршен за интервјуисање потенцијалних запослених, а већ је то учинио професионално коришћен на овај начин !
5. Професорски режим
Професор начин рада дозвољава једном Про кориснику да угости просторију у којој само они могу уређивати код. Између 10-100 корисника може да гледа и разговара у зависности од Про плана домаћина.
Режим Професор омогућава флексибилност између учења у учионици и учења на даљину, или комбинације ова два начина. Коришћење режима Професор ће омогућити људима на крају разреда да имају исто искуство као они напред, а наставнику да прикаже исправке грешака које ће се ажурирати у реалном времену.
6. Режим презентације
Начин презентације је осмишљен, што не изненађује, имајући у виду представљање кода. Апликација се приказује у поједностављеном приказу, дизајнираном за рад са графоскопима. ЦодеПен је оптимизирао начин презентације за употребу на Интернет везама ниже брзине и слабијег хардвера.
Оштроумни читаоци су можда већ схватили да ће бесплатна верзија ЦодеПен -а пружити управо ову функцију, мада Про режим има неколико корисних функција. Распоред, величина фонта и теме могу се брзо променити у ходу тако да одговарају готово свим поставкама, а приказивање везе до оловке доноси скраћени УРЛ величине који олакшава дељење пројекта.
Ове мале промене, заједно са могућношћу прилагођавања прозора за преглед тако да одговара свему што показујете, чине начин презентације савршеним и за наставнике и за програмере који колегама представљају идеје. Режим презентације је такође чист и једноставан начин представљања кода ако се нађете на разговору за програмску позицију.
7. Обрасци
Потрага за инспирацијом је знатно олакшана ЦодеПен -овим збиркама Дизајн обрасци .
Свака категорија је збирка примера кода који корисници ЦодеПен -а пружају за одређене задатке. Тражите начин за креирање динамичких дугмади за своју веб локацију? Менији за хармонику? Постоји много категорија које одговарају готово сваком примеру.
Ови обрасци су такође одличан начин да научите како интерактивни тастери функционишу, као и различите начине функционисања динамичких корисничких интерфејса.
8. Еммет
Еммет , раније познат као Зен Цодинг, нашироко се сматра највећом уштедом времена за развој ХТМЛ -а и ЦСС -а. Додатак узима део кода за који сматрате да га много пишете и претвара га у једноставне пречице.
Боље је видети то на делу него објашњавати, па узмите уобичајено подешавање за ХТМЛ документ:
Додавање овога у сваки ХТМЛ документ сведено је на две радње. Користећи Еммет, откуцајте ! и ударио у Таб кључ. Магија!
Еммет је активан као стандард на ЦодеПену и посебно је користан ако покушавате научити нови концепт у ЈаваСцрипт -у и требате брзо створити подржани ХТМЛ и ЦСС.
Развијајте се помоћу ЦодеПен -а за боље искуство
ЦодеПен је одличан алат за веб програмере, а поље се непрестано повећава. ЈаваСцрипт је одличан језик за учење у будућности у веб развоју.
шта је фонд стваралаца на тиктоку
Постоје неки одлични водичи и курсеви за људе који желе да почну да користе ЈаваСцрипт, а ЦодеПен је одлично окружење за тестирање ваших нових вештина.
Објави Објави Твеет Емаил 8 најбољих веб страница за бесплатно преузимање аудио књигаАудио књиге су одличан извор забаве и много их је лакше пробавити. Ево осам најбољих веб страница на којима их можете бесплатно преузети.
Прочитајте следеће Повезане теме- Програмирање
- ХТМЛ
- Веб Девелопмент
- ЈаваСцрипт
- ЦСС
Иан Буцклеи је слободни новинар, музичар, извођач и видео продуцент који живи у Берлину, Немачка. Кад не пише или је на сцени, петља са „уради сам“ електроником или кодом у нади да ће постати луди научник.
Више од Иана БуцклеијаПретплатите се на наш билтен
Придружите се нашем билтену за техничке савете, критике, бесплатне е -књиге и ексклузивне понуде!
Кликните овде да бисте се претплатили