10 трика на CodePen, за които никога не сте знаели, че ви трябват

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

В тази статия събрахме 10 най-добри съвета за получаване на повече от любимата кодираща площадка в уеб индустрията - те ще променят начина, по който използвате CodePen завинаги. Ако това ви вдъхновява да проявите креативност, може да искате да разгледате и нашия обзор на Примери за CSS анимация , или най-вълнуващото проекти с отворен код в мрежата.



Искате ли да направите нещата още по-безпроблемни? Изградете сайта си с лесен за ползване уеб конструктор , и вземете супер полезно уеб хостинг обслужване.



01. Изследвайте нещо ново, като използвате теми

Търсите инструменти и съвети, които отговарят на вашия проект? Не търсете повече

Търсите инструменти и съвети, които отговарят на вашия проект? Не търсете повече(Кредит за изображение: CodePen)

Темите на CodePen са сравнително нова функция, управлявана от общността, предлагана на потребители на всички нива и те са чудесен начин да се заемете с изследването на нови рамки, UI Patterns или JS библиотеки. При отваряне на страницата Теми ще бъдете срещнати с множество опции, филтрирани по категории и дори по-подкатегории. След като разгледаме актуална категория, например Vue.js, се срещнахме с екран за преглед с множество опции.



Нуждаете се от стартов шаблон, който да ви помогне да изградите този Vue компонент? Ето списък с популярни компоненти и елегантен бутон „Нова писалка от шаблон“, който ще ни помогне да започнем. Искате ли да видите някои експертно подбрани примери за рамката в действие? Филтрирайте върху „Featured Vue Pens“ и ще се срещнете с вдъхновяващи творби на майстори на рамки и новаци. Докато разглеждаме тези прегледи на теми, ни се предлагат постоянни връзки към официални сайтове, рамка или библиотечна документация и ръководства, както и основното присъствие на проекта в GitHub.

как да направя бум карта

02. Прототип по-бързо с шаблони

Всеки разработчик в даден момент вероятно е изпитвал истинска болка, когато създаване на местна среда за развитие , без значение от стека; дори настройката на шаблон може да изисква много повече време, отколкото човек иска да инвестира, за да създаде и тества нещо като няколко прототипа на бутона за изпращане. С CodePen вече сте там - IDE е готов да изхвърляте лесно съдържанието на вашия творчески ум.

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



Бързото прототипиране се зарежда с набрани среди за разработчици

Бързото прототипиране се зарежда с набрани среди за разработчици(Кредит за изображение: CodePen / Адам Кун)

Съвсем просто е да посочите писалка като шаблон - с отворена писалка, намачкайте този бутон Настройки, щракнете до Детайли на писалката и оттам ще видите спретнато превключващо устройство, предлагащо опцията за запазване като обикновена писалка или Шаблон.

И така, как това се различава от разклоняването на съществуваща писалка? Задаването на писалка като шаблон ще ви позволи да изберете тази настройка веднага след като сте избрали да създадете нова писалка, без да е необходимо да търсите в предишните си писалки, за да ги разклонявате и модифицирате, няма нужда да реимпортирате всичките си скриптове по избор от и няма нужда да преизбирате всички опции и настройки за синтаксис, които бихте предпочели за дадената концепция. Освен това, стартирането на нова писалка от шаблон третира вашата писалка като изцяло ново творение, докато раздвояването ще създаде писалка, която се връща обратно към оригинала, с отделна история, а не празен лист. Надстройването до акаунт в CodePen Pro ви предлага невероятно ценен набор от разширени функции, но дори безплатните потребителски акаунти ще позволят неограничено генериране на шаблон.

03. Започнете колекция

Колекциите CodePen предлагат чудесен начин за групиране и намиране на концепции

Колекциите CodePen предлагат чудесен начин за групиране и намиране на концепции(Кредит за изображение: CodePen / Адам Кун)

Ако ви харесва възможността да търсите ресурси с помощта на CodePen Topics, но желаете да можете да подготвите свои собствени, колекциите са отговорът, който търсите. Добавянето на писалка към колекция е толкова просто, колкото избирането на падащото меню „Колекции“ от всеки изглед за редактиране на писалката, където можете да посочите колекция или да създадете нова. Отново, това може да е писалката на всеки (и ако сте потребител на Pro, можете да зададете вашата колекция на частна). Красотата на Колекциите е възможността да преглеждате всичките си Колекции на едно място с надеждни опции за филтриране, сортиране и търсене - чудесен начин да дефинирате ресурси по стек или рамка, да поддържате текущ списък с вдъхновение или да групирате писалки от концепции за потребителски интерфейс. Интересувате ли се от публичната колекция на друг потребител? Можете дори да се абонирате за Колекцията чрез RSS, за да сте в течение на актуализациите.

04. Подобрете ефективността с препроцесори

Нека си признаем, повечето от нас прекарват повече от достатъчно време зад екрани, отколкото вероятно би трябвало. Много от нас са толкова затрупани с практически начинания, свързани с кариерата, че е трудно да намерим време да изградим библиотека от безполезни превключватели или преходи на страници на WebGL и докато CodePen отнема типичното време за настройка и ни позволява да започнем направо да работим, ефективността може винаги да се подобрява. Тук са полезни родните препроцесори на CodePen.

най-добрата точка и снимайте камерата при слаба светлина

Например: искате да изградите мрежа от няколкостотин HTML клетки, атрибутите на всеки от стиловете да се актуализират произволно чрез JavaScript? Може да се заемете с копиране и поставяне на div след div, разбира се. И в края на всичко това през целия прозорец на редактора е почти невъзможно да навигирате.

Ето къде блестят HAML, Pug или Jade: от прозореца за настройки на писалката изберете HTML препроцесор с лекота, напишете обикновен цикъл и генерирайте тези елементи в приблизително два реда. Не сте сигурни откъде да започнете? За това има писалка: при търсене на „HAML Loop“ в CodePen се получават голям брой типови писалки, които ще ви дадат бегло разбиране за това как ефективно да генерирате елементите на вашата страница.

Предпроцесорите извеждат вашите концепции още по-бързо

Предпроцесорите извеждат вашите концепции още по-бързо(Кредит за изображение: CodePen / Адам Кун)

С CSS препроцесори като LESS и Sass, можем да изградим комбинации и предварително дефинирани функции, които приемат множество аргументи, което ги прави идеално допълнение към вашите шаблони на CodePen и ви позволява да пишете иначе сложни стилове с относителна лекота. Може би изграждате елементи на потребителския интерфейс за по-голям проект - вече можете да дефинирате всичките си променливи за цвят, шрифт и разстояния с ясни и кратки конвенции за именуване; и отново включването им в шаблон на CodePen ви позволява да итерирате с практически нулева настройка.

Наслаждавате ли се на ефективността на CoffeeScript, TypeScript или Babel? CodePen може да компилира и вашия JS препроцесор по избор. Ако по всяко време искате да надникнете под капака и да видите как изглежда компилираният ви код, можете просто да изберете „Преглед на компилиран“ от избрания от вас панел за редактиране на код, за да усетите как ще изглежда крайният резултат - и вие трябва да; работата с цикли и разширени функции може да направи настройката и итерацията невероятно бърза, но също така може да доведе до изплюване на голямо количество неизползван синтаксис. Ако по всяко време възнамерявате да използвате тези творения в производството, не забравяйте да видите целия си код напълно компилиран и да направите каквито и да е намаления или корекции, необходими за изпълнението.

05. Разгледайте най-яката нова функция на CodePen: Проекти

Дори ако пишете код, готов за производство, CodePen ви е върнал гърба

Дори ако пишете код, готов за производство, CodePen ви е върнал гърба(Кредит за изображение: CodePen)

Все още малко свежа функция, CodePen Projects са нещо като невъзпитан герой - оригиналната настройка на HTML / CSS / JS на CodePen с три панела вече позволява персонализирани външни включвания и компилация на препроцесор в реално време. И така, какво отличава Проектите? В допълнение към стандартните страници за редактиране, вие можете да добавяте свои собствени локални файлове - което означава, че можете да създадете свои собствени файлови структури, както бихте направили в локална среда, създавайки сайтове с много страници или приложения в единична, самостоятелна среда без да е необходимо да настройвате сложни Gulp или Webpack конфигурации, например.

Проектите на CodePen улесняват плъзгането и пускането на съществуващите ви файлове (уверете се, че ги съхранявате безопасно съхранение в облака ) и ще поддържа добре вашата структура или ще ви позволи да правите промени от редактора. И ако сте потребител на ниво Pro, става малко по-сладък: когато сте готови да внедрите работата си, можете да разположите избраната от вас среда с едно щракване.

06. Включете телипа

CodePen TV предлага възхитително отклонение за престоя ви

CodePen TV предлага възхитително отклонение за престоя ви(Кредит за изображение: CodePen)

Скрито сред всички мощни, практични инструменти, предлагани от CodePen, е причудливо разсейване, известно като CodePen TV. CodePen TV е просто рандомизирано вземане на проби от Picked Pens, което постепенно се върти по начин, подобен на скрийнсейвър. Може би не ви е грижа да разгледате произволен избор на писалки и искате да подготвите свой собствен „канал“ от писалки с котки - можете също да стартирате телевизионен канал CodePen, базиран на всяка колекция CodePen (включително колекции, създадени от други потребители). И ако сте потребител на Mac, можете дори да използвате CodePen TV като самостоятелен скрийнсейвър за OSX!

07. Прегърнете духа на общността

Кодиращите общности са известни с изключителността, създавайки истински места за размножаване на синдрома на самозванци, които могат да се чувстват непроницаеми и неприветливи дори за най-опитните дизайнери и разработчици.

Тук се откроява CodePen - и защо да станеш активен член на общността предлага такива предимства. Виждате ли писалка, която предизвиква радост? Разбийте този бутон на сърцето и покажете на друг потребител малко любов. Можете да продължите и да го кликнете до три пъти, ако наистина, наистина обичате работата, която са свършили.

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

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

Общността е истинската суперсила на CodePen

как да направите проста смяна на цветове в
Общността е истинската суперсила на CodePen(Кредит за изображение: CodePen)

Може би най-добрият начин да се потопите в общността е като се присъедините CodePen’s Spectrum chat - отворен форум за споделяне на работа, търсене на съвети и творческо сътрудничество. Един пример е Pass the Pen, концепция от потребителя на CodePen Кристофър ван Сант, в която Pen е създадена и след това повторена от потребители, които биха искали да допринесат.

CodePen предлага и седмични подкани за предизвикателства, за да ви ангажира творчески. Може да не смятате, че работата ви е достойна за споделяне, но вероятно грешите. Отворете чата за Spectrum на CodePen и покажете какво работите, без значение колко голям или малък. Ще бъдете приятно изненадани колко подкрепящ и полезен е средният потребител на CodePen и вероятно ще научите няколко различни неща по пътя.

08. Посетете IRL за срещи

В основата на това, което прави CodePen основен инструмент за разработчиците на интерфейс, е общността. Но понякога е полезно да извадите уменията си извън екрана - и няма по-добър начин от това да бъдете домакин или да присъствате на среща на CodePen. CodePen ще ви достави любезно за участници и с помощта на техните спонсори, те дори могат да ви помогнат да си осигурите възстановяване на разходите за храна и напитки - местоположението и датата зависи от вас. Срещите предлагат отлична възможност за сдвояване на програма, публично търсене на стратегии или концепции, изпълнение на екипно предизвикателство или просто по-добре да опознаете какво мотивира вашите колеги програмисти. Или може би просто сте там за безплатната пица. Ние ви прощаваме.

09. Надстройте до Pro

Дълбочината на функционалността, която CodePen предлага безплатно, е наистина забележителна, особено като се има предвид тежестта на хиляди потребители, които едновременно калдърят заедно някои невероятно интензивни сървърни творения. Извън кутията това е доста добре закръглено изживяване - това е, докато не хапнете от CodePen Pro. И така, защо да направите скока? Въпреки че носи много полезни разширени функции, само една функция си заслужава: възможността да запазвате писалките частно.

За потребители, които не са Pro, всяка създадена писалка е публично индексирана, което често е добре. Но какво ще стане, ако искам да изясня някои потребителски интерфейси за все още стартиращ клиентски проект? Тук възможността за частно спестяване е супер удобна - „частно“ не означава скрито, все пак можете да споделяте директни връзки към писалката си например с вашия вътрешен екип. Но иначе писалката ви е неоткриваема. Може би просто се нуждаете от среда, за да изпробвате нови концепции, или имате ограничено време за работа по създаване и възнамерявате да се върнете по-късно - тук опциите за поверителност имат значение.

Пробвайте функциите на Pro и никога няма да погледнете назад

Пробвайте функциите на Pro и никога няма да погледнете назад(Кредит за изображение: CodePen / Адам Кун)

И така, какво още включва профилът в Pro? Хостинг на активи! В рамките на 2Mb на файл, CodePen ще хоства активите на вашата писалка, което означава, че няма нужда да качвате изображения или скриптове на външен хост и позволява по-голяма гъвкавост при работа с рамки със строги спецификации за кръстосан произход.

Професионалните акаунти предлагат достъп до Live View - позволявайки на потребителите да виждат техните редакции, презаредени в движение през множество прозорци - Collab Mode - който позволява програмиране на двойки на живо и включва удобна опция за чат - и професорски режим, който ще излъчва актуализациите на вашия код заедно с визуализацията на живо на Pen в реално време, идеална както за инструктори по код, така и за мазохисти от конферентни вериги. CodePen Pro също така предлага възможност за редактиране на вашата собствена страница на профила, включително персонализирани CSS и JS, както и незадължителен писалка, вградена като заглавка на страницата - защото познаването на тяхната аудитория означава да знаете, че разработчиците на фронтенд искат да персонализират, персонализират, персонализират.

как да рисувате от различни ъгли

10. Потопете се в кладенеца на вдъхновението

Липсва тази творческа искра? Dribbble е чудесно място за търсене

Липсва тази творческа искра? Dribbble е чудесно място за търсене(Кредит за изображение: Dribbble)

Свежата писалка е като празно платно, но понякога творческият блок ще удари и това платно ще отведе дълъг ницшеански поглед във вас. Чувствате се невдъхновени? Погледнете най-новото Предизвикателство на CodePen или се присъединете към група за предизвикателство за кодиране като Codevember или DailyUI . Може би се насочете към Дрибъл и пресъздайте (или може би анимирайте) илюстрация в CSS - просто не забравяйте да дадете кредит там, където е необходимо (добавянето на обратни връзки към публичните данни на вашата писалка е предпочитаният метод.)

Това може да изглежда като упражнения в безсмислие и всички сме били запознати с аргументи срещу кодирането в свободното време, но има и още едно малко признато предимство (публично) творческо кодиране в CodePen: потенциалните работодатели и рекрутери всъщност прекарват време в разглеждане на сайта за хора, които проявяват творческа амбиция. Построихте някои неща, с които сте особено горди? Не забравяйте да ги включите в портфолиото си.

CodePen прави вграждането лесно, с множество опции за показване, и използвайки новата им функция за предварително вграждане, можете да добавите прозорец на редактора на CodePen с рендиран код директно от кодовата база на сайта на вашия портфейл.

Тази статия първоначално е публикувана в списание за творчески уеб дизайн Уеб дизайнер . Купете брой 290 .

Прочетете още: