10 Съвети за начинаещи с Codepen

Codepen е супер лесен и популярен сайт химилка надолу работен преден край комбо веднага. Ако не знаете какво е Codepen или не сте го чули преди това, това е основно площадка за онлайн изходен код (нека го наречем OSCP за звук на нердиер) за тримата мускетари на предния край на кодирането; HTML, CSS и JavaScript.

Има и други подобни OSCPs, като JSFiddle, JS Bin, CSSDeck & Dabblet. Codepen определено е един от най-известните сред разработчиците. Без повече шум, нека скочим направо в някои основни и полезни съвети за използване на Codepen.

1. Стартирайте бутона

Ако не сте фен на начина, по който изходът на вашия код в Codepen поддържа освежаване докато можете да пишете се откажете от “Auto Update Preview” опция, и вместо това вземете бутон Run. Когато го кликнете, ще можете да виждате и актуализирате изхода на кода си когато пожелаете.

Това също е чудесна възможност, ако работите с код, чийто изход преминава през много промени в оформлението, и презаписва всеки път, когато се актуализира, което води до бавност.

2. Увеличаване / намаляване на числото

Увеличете или намалете номерата в кода в Codepen без да въвеждате новите номера. Всичко, което трябва да направите е да използвате комбинацията от клавиши Ctrl / Cmd и Стрелки нагоре и надолу.

3. Множество курсори

Можете да поставите курсори на няколко точки в изходния код, след това въведете или редактирайте всички тези точки по същото време. Това работи само ако въвеждате една и съща информация и намалява необходимостта от копиране. Просто задръжте натиснат клавиша Ctrl / Cmd, като кликнете върху тези няколко точки.

4. Различни цветни конзолни съобщения

Най- конзола JavaScript обектът има още няколко метода Освен това влезте () да ви позволя печатате неща в уеб конзолата.

Можете да използвате Информация (), предупреди () и грешка () методи за информация, внимание и грешка. Обикновено уеб конзолите оцветяват тези съобщения по тип или ще покажат подходяща икона до тях (като предупредителен знак за предупредителното съобщение) за по-лесно разпознаване.

Codepen има своя собствена конзола които можете да отворите, като щракнете върху бутона Console в долния ляв ъгъл. Той е идеален за бърза проверка на конзолните съобщения без да се налага да отваряте конзолата на браузъра. Тази конзола разграничава различните типове съобщения от конзолата с различни фонови цветове.

5. Износ

Веднъж спасени, a химилка (единична единица Codepen) може да се експортира като ZIP файл с всичките си в HTML, CSS и JS код във файлове. Има и опция да запишете писалката като същност на Github (хранилище Git). Можете да намерите бутона „Експортиране“ в долния десен ъгъл на всяка писалка.

6. Намерете и заменете

Намерете и заменете - съществена операция за хора, които са склонни да преименуват имената на променливи всеки сега и тогава. Ctrl / Cmd + Shift + F е комбинираният ключ към отвори “Намерете и заменете” диалоговия.

7. Emmet Tab Trigger

Знаете ли за тригерите на табулатора за кодиране на Емет? Emmet е инструмент за производителност за разработчиците, които ви позволяват напишете скелетен код, който по-късно се разширява. За да направите това в Codepen, просто въведете подходящата абревиатура в редактора, натиснете клавиша Tab и пълният код се появява наведнъж. Предлага се само за HTML в Codepen.

8. Получете индивидуални кодови файлове

Ако използвате опцията за експортиране, както бе споменато по-горе, ще получите всичките три файла (HTML, CSS и JS) на вашата писалка. Но ако се интересувате само един или два от тези файлове, и искате да ги изтеглите поотделно, има възможност и за това в Codepen.

След като влезете в Codepen, отидете на писалката си и кликнете върху бутона Change View в горния десен ъгъл. В долната част на падащия списък ще видите директни връзки за изтегляне на отделните файлове.

9. Проверете JavaScript променливите

Тъй като JavaScript конзолата на Codepen се свързва с JavaScript, записан във вашата писалка, можете да го използвате и за бързо тестване на JavaScript. Тази функция е особено удобна проверка на променливите JS, както по този начин не трябва да вмъквате допълнителни конзолни или предупредителни съобщения в оригиналния код единствено за целите на тестването.

10. Включете писалката в шаблон

Ако сте склонни да започнете повечето от вашите писалки с същия набор от кодове, можете да използвате шаблон за запишете тези повтарящи се кодове. За да превърнете писалката в шаблон, отбележете опцията Шаблон в менюто Настройки. Когато по-късно създадете нова писалка, можете започнете с запазения си шаблон като щракнете върху стрелката надолу в дясната страна на бутона "Ново писалка". Ще се отвори падащ списък с всички запазени шаблони, от които да избирате.