Home-theater-designers
Започването с уеб разработката на JavaScript може да бъде разочароващ процес, но има инструменти, които го улесняват.
CodePen.io е среда за кодиране в браузъра, предназначена както за научаване на кодирането, така и за бързо прототипиране на идеи с минимални проблеми.
В тази статия разглеждаме някои от функциите на сайта и как те могат да ви помогнат да станете по -добър програмист.
Какво е CodePen?
CodePen предоставя нещо, наречено a химилка , който се състои от три различни прозореца за HTML, CSS и JavaScript, плюс прозорец за визуализация, който се актуализира в реално време, докато пишете.
Макар че често се използва за уеб разработчици за представяне на идеи за уебсайтове, това също е чудесно място да научите основите на уеб разработката на предния край. Ето най -забележителните функции, които трябва да знаете, когато използвате CodePen.
1. Предпроцесори
Предпроцесорите са интерпретирани или компилирани езици, предназначени да опростят кодирането. Те могат да добавят функции към език за удобство и да улеснят четенето на кода. В уеб разработката се използва комбинация от препроцесори за HTML, CSS и JavaScript за бързо създаване на чист код.
Ако изучавате уеб разработка и искате да изпробвате различни препроцесори, CodePen ви позволява да превключвате препроцесори в движение и да виждате кода, който компилира, в реално време. Всяко от трите екрана на приложението CodePen има падащо меню горе вдясно. Изберете Преглед на компилиран HTML/CSS/JS за да видите как ще се тълкува кодът.
В тази писалка създадохме прост сайт, използвайки Хамл и Sass за оформяне на заглавен текст. Избор Преглед Компилиран показва стандартните HTML и CSS. В този пример разликата е минимална. Докато изучавате нов език обаче, може да бъде полезно да видите как изглежда предварително обработеният код след компилиране.
2. Външни ресурси
Наред с родната поддръжка за препроцесори, CodePen поддържа външни скриптове. Това го прави идеалното място да получите практически опит с библиотеки за вашите лични проекти или да разгледате популярни библиотеки за уеб приложения като React.
За да добавите външна библиотека, отворете Настройки панел на писалката и отидете в раздела JavaScript. Има два начина за добавяне на ресурси, или чрез добавяне на URL адреса на ресурса ръчно, или чрез търсене.
Използвахме тази функция в нашата статия уеб анимация с mo.js , заедно с предварителната обработка на Babel.
Вижте писалката Пример Mojs MUO от Иън ( @Bardoctorus ) на CodePen.
Да, писалките CodePen могат да бъдат вградени! Продължете напред и кликнете върху панела за визуализация по -горе, за да видите резултатите от урока Mo.js!
Други химикалки могат да бъдат импортирани подобно на външни библиотеки. Това означава, че можете да вземете елементи от предварително написани химикалки, за да използвате подобни модули в новите си химикалки. Потребителят на CodePen Адам Проста анкета писалката е добър пример за това.
3. Шаблони
Когато изучавате нови концепции или изпробвате нови идеи, често използвате подобни компоненти и променяте същите стъпки, за да започнете. CodePen позволява създаването на химикалки за шаблони, които могат да изрежат повторението и ви позволяват да преминете директно към въпроса.
За да създадете шаблон, отворете нова писалка, направете промените си и изберете Шаблон плъзгача в менюто с настройки.
https://vimeo.com/221428690
Доскоро безплатните потребители можеха да направят само три шаблона, но сега всички потребители могат да имат толкова шаблони в акаунта си, колкото искат. Перфектен за започване на нова идея с минимално забавяне!
4. Модно сътрудничество
Възможността за сътрудничество и преподаване с CodePen може да бъде най -големият му актив. Вече има множество страхотни инструменти за сътрудничество за програмисти, но подходът на CodePen е прост и интуитивен.
Професионалните потребители на CodePen могат да създадат нова писалка и да я отворят за сътрудничество под Промяна на изгледа меню. Това променя връзката на писалката в покана за споделяне, която приема мащабен брой хора в зависимост от вашия план за CodePen Pro.
как да публикувате gif в instagram
В този случай написах HTML, докато приятел актуализира CSS в реално време, с маркиран курсор, идентифициран къде работят.
Всеки с връзката може да се присъедини и да използва функцията за чат в браузъра, независимо дали е професионален потребител или дори има акаунт в CodePen. При условие че автоматичното запазване е изключено, само собственикът на писалката може да запише всички промени, което го прави безопасен начин да отворите кода си за други без риск.
Отвореният характер на този режим е от полза за начинаещи, тъй като можете да поканите почти всеки в писалката си, за да ви преведе през трудна концепция. Това също е удобен начин да се ориентирате, тъй като е идеален за интервюиране на потенциални служители и вече го е направил са използвани професионално по този начин !
5. Професорски режим
Режимът професор позволява на един потребител Pro да бъде домакин на стая, в която само те могат да редактират кода. Между 10-100 потребители могат да гледат и разговарят в зависимост от Pro плана на хоста.
Режимът професор позволява гъвкавост между обучението в класната стая и дистанционното обучение, или комбинация от двете. Използването на професорски режим ще позволи на хората отзад в класа да имат същото преживяване като тези отпред, а на учителя да покаже корекции на грешки, които ще се актуализират в реално време.
6. Режим на представяне
Режимът на представяне е проектиран, без изненада, с представяне на код. Приложението се показва в опростен изглед, предназначен за работа с проектори. CodePen е оптимизирал режима за представяне за използване при по -ниски скорости на интернет връзки и по -слаб хардуер.
Проницателните читатели може би вече са разбрали, че безплатната версия на CodePen ще осигури точно тази функция, въпреки че Pro режимът има няколко полезни функции. Оформлението, размерът на шрифта и темите могат бързо да се променят в движение, за да отговарят на почти всяка настройка, а показването на връзката към писалката извежда съкратен URL с големи размери, което улеснява споделянето на проекта.
Тези малки промени, заедно с възможността да мащабирате прозореца за визуализация, за да пасне на всичко, което показвате, правят режима на представяне перфектен както за учители, така и за разработчици, представящи идеи на колегите. Режимът на презентация също е чист и лесен начин за представяне на код, ако попаднете на интервю за програмна позиция.
7. Модели
Търсенето на вдъхновение е много по -лесно с колекциите на CodePen Модели на дизайн .
Всяка категория е колекция от примерен код, предоставен от потребителите на CodePen за специфични задачи. Търсите начин да създадете динамични бутони за вашия сайт? Менюта за акордеон? Има много категории, които отговарят на почти всеки пример.
Тези модели също са чудесен начин да научите как работят интерактивните бутони и различните начини, по които могат да функционират динамичните потребителски интерфейси.
8. Емет
Емет , известен преди като Zen Coding, се смята широко за най -голямата спестяваща време за HTML и CSS разработка. Плъгинът отнема част от кода, който откриете, че пишете много, и ги превръща в прости преки пътища.
Да го видите в действие е по -добре от обяснението, така че вземете обичайната настройка за HTML документ:
Добавянето на това към всеки HTML документ е сведено до две действия. Използвайки Emmet, въведете ! и удари Раздел ключ. Магия!
Emmet е активен като стандарт за CodePen и е особено полезен, ако се опитвате да научите нова концепция в JavaScript и трябва бързо да създадете поддържащите HTML и CSS.
Развивайте се с CodePen за по -добро изживяване
CodePen е отличен инструмент за уеб разработчици и полето непрекъснато расте. JavaScript е чудесен език за изучаване за бъдеще в уеб разработката.
как да разберете информация за някого
Има някои страхотни уроци и курсове за хора, които искат да започнат с JavaScript, а CodePen е чудесна среда за изпробване на новите ви умения.
Дял Дял Туит електронна поща 8 -те най -добри уебсайта за безплатно изтегляне на аудиокнигиАудиокнигите са чудесен източник на забавление и са много по -лесни за смилане. Ето осемте най -добри уебсайта, където можете да ги изтеглите безплатно.
Прочетете Напред Свързани теми- Програмиране
- HTML
- Уеб разработка
- JavaScript
- CSS
Иън Бъкли е журналист на свободна практика, музикант, изпълнител и видео продуцент, живеещ в Берлин, Германия. Когато не пише или е на сцената, той се занимава с „направи си сам“ електроника или код с надеждата да стане луд учен.
Още от Иън БъклиАбонирайте се за нашия бюлетин
Присъединете се към нашия бюлетин за технически съвети, рецензии, безплатни електронни книги и изключителни оферти!
Щракнете тук, за да се абонирате