Едно от многото смущаващи неща за уеб разработката е да не разполагате с лесен начин да споделяте проектите си с други. В много случаи ще трябва да хоствате проекта си на уеб сървър или да изпратите всички съответни файлове на някой, който иска да види какво сте създали. Но благодарение на чист онлайн инструмент, наречен CodePen, вече няма да се притеснявате за нищо от това.
CodePen.io
CodePen е безплатен инструмент, който ще ви позволи да хоствате проектите си онлайн, без изобщо да се налага да плащате и стотинка. За да започнете, отидете на CodePen.io и създайте безплатен акаунт.
След като направите това, можете да създадете „Писалка“, като щракнете върху бутона „Нова писалка“ в горния десен ъгъл на екрана.
След това ще можете да добавите всеки HTML, CSS и JavaScript в съответните им полета. След като започнете да добавяте някакъв код, ще видите преглед на живо на това, което създавате. Можете да заглавите първата си писалка в горния ляв ъгъл. След като щракнете върху първото си „Запазване“, вие ще можете просто да споделите URL адреса на страницата с приятели, семейство и колеги, така че да могат да видят какво работите.
Ето как ще изглежда Вашата писалка с някакъв код в нея (любезност на проект на Free Code Camp, наречен Tribute Page):
Когато създавате собствена писалка, ще искате да преминете през Настройките, преди да започнете. Когато щракнете върху бутона „Нова писалка“, трябва да видите готов шаблон за писалка, за да започнете да въвеждате някакъв код. В горния десен ъгъл ще бъде бутон „Настройки“. Кликнете върху това (трябва да видите по-долу екрана).
Тук ще можете да преминете през раздели HTML, CSS и JavaScript, за да добавите определена информация. В раздела HTML ще можете да добавяте мета информация, неща, които трябва да влизат в
раздела и т.н. Под CSS ще можете да добавяте CSS Preprocessors като LESS и Sass. Не само това, но можете да добавите във външен CSS като Bootstrap и Foundation. В раздела JavaScript можете да добавите в JavaScript препроцесор като Babel или CoffeeScript. Освен това можете да добавяте във външни JavaScript рамки като Angular, React, Lodash, D3 и т.н.
И накрая, CodePen ще ви позволи да промените "Преглед", който гледате. Изгледът по подразбиране е Editor View, който ви позволява да въведете кода си и да получите малък преглед в конзолата по-долу. Но има и други опции, като особено удобен е изгледът „Цяла страница“, където ще видите даден проект, сякаш е на живо на уебсайт. Има няколко други изгледи на разположение, за да преминете, струва си да си поиграете!
CodePen наистина е чист инструмент и ние само докоснахме повърхността на неговата полезност. Струва си да се насочите към CodePen.io и да го използвате, за да работите по няколко проекта, а след това, ако се чувствате като вас, споделете с приятелите или колегите си.
Какво мислите за CodePen? Използвали ли сте подобен инструмент? Уведомете ни в секцията за коментари по-долу!
