Зміст
- 01. Дослідіть щось нове за допомогою теми
- 02. Прототип швидше із шаблонами
- 03. Почніть колекцію
- 04. Підвищення ефективності роботи препроцесорів
- 05. Дослідіть найцікавішу нову функцію CodePen: Проекти
- 06. Включіть телік
- 07. Охопіть дух громади
- 08. Відвідайте IRL для зустрічі
- 09. Оновіть до версії Pro
- 10. Пориньте в криницю натхнення
CodePen - це вбивчий інструментарій для швидкого створення прототипів, із надихаючою та підтримуючою спільнотою учасників. Він став одним з улюблених інструментів веб-дизайну в галузі, пропонуючи безпроблемну ітерацію креативного коду, усуваючи головний біль при створенні нових середовищ розробки та дозволяючи користувачам легко вирішувати безліч концепцій інтерфейсу, починаючи від химерних і смішних і закінчуючи практичним і розгортанням. -готова.
У цій статті ми зібрали 10 основних порад, щоб отримати більше від улюбленого майданчика кодування веб-індустрії - вони змінять спосіб використання CodePen назавжди. Якщо це надихає вас на креативність, можливо, ви також захочете ознайомитися з нашими прикладами анімації CSS або найцікавішими проектами з відкритим кодом в Інтернеті.
Хочете зробити справи ще більш безпроблемними? Створіть свій сайт за допомогою простого конструктора веб-сайтів та отримайте надзвичайно корисну послугу веб-хостингу.
01. Дослідіть щось нове за допомогою теми
Теми CodePen - це відносно нова функція, керована спільнотою, що пропонується користувачам усіх рівнів, і це чудовий спосіб розпочати вивчення нових фреймворків, шаблонів інтерфейсу користувача або бібліотек JS. Відкривши сторінку "Теми", вас чекає безліч варіантів, відфільтрованих за категоріями і навіть далі за підкатегоріями. Після перегляду актуальної категорії, наприклад Vue.js, ми зустрічаємося з оглядовим екраном із декількома опціями.
Потрібен початковий шаблон, який допоможе побудувати цей компонент Vue? Ось список популярних компонентів і чудова кнопка «Нова ручка від шаблону», яка допоможе нам розпочати роботу. Хочете побачити кілька досвідчених кураторів прикладів, що діють? Фільтруйте до «Рекомендовані ручки Vue», і вас чекають надихаючі роботи майстрів фреймворків та початківців.Під час перегляду цих оглядів тем ми пропонуємо постійні посилання на офіційні сайти, фреймворк або бібліотечну документацію та путівники, а також основну присутність проекту GitHub.
02. Прототип швидше із шаблонами
Кожен розробник в певний момент, ймовірно, відчував справжній біль при створенні місцевого середовища для розробки, незалежно від стека; навіть налаштування шаблону може зажадати набагато більше часу, ніж хочеться інвестувати, щоб створити та протестувати щось на зразок декількох прототипів кнопок подання. З CodePen ви вже готові - IDE готовий до того, щоб ви могли легко скинути вміст свого творчого розуму.
Але, використовуючи шаблонну функцію CodePen, тепер ще простіше закрутити саме те середовище, яке потрібно для виконання роботи. Шаблон може містити будь-яку кількість заздалегідь визначених зовнішніх сценаріїв (ви можете включити іншу ручку як зовнішній актив), дозволить вам попередньо встановити бажаний препроцесор HTML / CSS / JS (який буде акуратно автоматично компілюватися на льоту), і навіть збереже будь-який існуючий код, який ви дбаєте про збереження.
Досить просто вказати перо як шаблон - відкривши перо, розімніть цю кнопку налаштувань, клацніть до «Деталі пера», і звідти ви побачите акуратний маленький перемикач, що пропонує можливість зберегти як звичайну ручку або Шаблон.
То чим це відрізняється від розгалуження існуючого пера? Встановлення пера як шаблону дозволить вам вибрати це налаштування відразу після вибору створення нового пера, без необхідності переглядати попередні ручки для розгалуження та модифікації, не потрібно повторно імпортувати всі вибрані вами сценарії з і вам не потрібно переобирати всі параметри та параметри синтаксису, які ви можете віддати перевагу для даної концепції. Крім того, починаючи нову ручку з шаблону, ваша ручка розглядається як цілком нове творіння, тоді як форкінг створить ручку, яка посилається назад до оригіналу, з чіткою історією, а не чистим аркушем. Оновлення до облікового запису CodePen Pro пропонує вам неймовірно цінний набір розширених функцій, але навіть безкоштовні облікові записи користувачів дозволять створювати необмежену кількість шаблонів.
03. Почніть колекцію
Якщо вам подобається мати можливість шукати ресурси за допомогою тем CodePen, але ви хочете, щоб ви могли підготувати власні, колекції - це відповідь, яку ви шукаєте. Додавання пера до колекції настільки ж просто, як вибір спадного меню „Колекції” з будь-якого подання редагування пера, де ви можете вказати колекцію або створити нову. Знову ж таки, це може бути будь-яка ручка (і якщо ви користувач Pro, ви можете встановити для своєї колекції приватну). Краса Колекцій - це можливість переглядати всі Ваші Колекції в одному місці за допомогою надійних параметрів фільтра, сортування та пошуку - чудовий спосіб визначити ресурси за стеком або структурою, вести діючий список натхнення або кластерирувати ручки за концепціями інтерфейсу. Вас цікавить публічна колекція іншого користувача? Ви навіть можете підписатися на Колекцію через RSS, щоб бути в курсі оновлень.
04. Підвищення ефективності роботи препроцесорів
Погодьмось, більшість із нас проводить за екранами більше, ніж достатньо часу, ніж, мабуть, слід було б. Багато з нас настільки переповнені практичними зусиллями, пов'язаними з кар'єрою, що важко знайти час для створення бібліотеки марних тумблерів або переходів сторінок WebGL, і хоча CodePen позбавляє типового часу налаштування і дозволяє нам приступати до роботи, ефективність може завжди вдосконалюватися. Ось де власні препроцесори CodePen стають в нагоді.
Наприклад: хочете побудувати сітку з декількох сотень комірок HTML, атрибути стилів кожного з яких випадково оновлюються за допомогою JavaScript? Звичайно, ви можете скопіювати та вставити div за div. І до кінця цього у всьому вікні редактора майже неможливо перейти.
Ось де блищать HAML, Pug або Jade: у вікні налаштувань пера, з легкістю виберіть HTML-препроцесор, напишіть простий цикл і сформуйте ці елементи приблизно в два рядки. Не знаєте, з чого почати? Для цього є ручка: пошук «HAML Loop» на CodePen дає велику кількість типових ручок, які дадуть вам побіжне розуміння того, як ефективно генерувати елементи вашої сторінки.
За допомогою препроцесорів CSS, таких як LESS та Sass, ми можемо створювати комбінації та заздалегідь визначені функції, які приймають безліч аргументів, роблячи їх ідеальним доповненням до ваших шаблонів CodePen і дозволяючи вам писати складні стилі з відносною легкістю. Можливо, ви розробляєте елементи інтерфейсу для більш масштабного проекту - тепер ви можете визначити всі свої кольори, шрифт та інтервали між змінними за допомогою чітких і лаконічних правил іменування; і знову ж включення їх до шаблону CodePen дозволяє вам виконувати ітерацію практично з нульовим налаштуванням.
Насолоджуєтесь ефективністю CoffeeScript, TypeScript чи Babel? CodePen також може скомпілювати ваш вибраний препроцесор JS. Якщо ви хочете будь-коли зазирнути під капот і подивитися, як виглядає ваш скомпільований код, ви можете просто вибрати "Переглянути скомпільований" на вибраній вами панелі редагування коду, щоб відчути, як буде виглядати ваш кінцевий результат - і ти повинен; робота з циклами та розширеними функціями може зробити налаштування та ітерацію неймовірно швидкими, але також може закінчити виплескування великої кількості невикористаного синтаксису. Якщо ви хочете будь-коли використовувати ці твори у виробництві, переконайтесь, що весь ваш код повністю скомпільований, а також внесете будь-які скорочення або коригування, необхідні для роботи.
05. Дослідіть найцікавішу нову функцію CodePen: Проекти
Все ще дещо свіжа функція, Проекти CodePen - це свого роду неоспіваний герой - оригінальні налаштування HTML / CSS / JS із трьох панелей CodePen вже дозволяють користувацькі зовнішні включення та компіляцію препроцесора в режимі реального часу. То що виділяє Проекти? На додаток до стандартного редагування сторінок, ви можете додавати свої власні локальні файли - це означає, що ви можете допрацювати власні файлові структури, як це було б у локальному середовищі, створюючи багатосторінкові сайти або програми в окремому, автономному середовищі наприклад, без необхідності встановлювати складні конфігурації Gulp або Webpack.
Проекти CodePen спрощують перетягування наявних файлів (переконайтеся, що ви безпечно зберігаєте їх у хмарному сховищі), а також акуратно підтримуватимуть вашу структуру або дозволять вносити зміни в редакторі. А якщо ви користувач рівня Pro, він стає дещо солодшим: коли ви готові розгорнути свою роботу, ви можете розгорнути вибране вами середовище одним клацанням миші.
06. Включіть телік
Серед усіх потужних практичних інструментів, пропонованих CodePen, прихований химерний відволікаючий фактор, відомий як CodePen TV. CodePen TV - це просто рандомізована вибірка вибраних ручок, яка поступово обертається таким чином, як заставка. Можливо, вам не байдуже розглядати випадковий вибір ручок і хочете створити власний «канал» ручок із котами - ви також можете запустити телевізійний канал CodePen на основі будь-якої колекції CodePen (включаючи колекції, створені іншими користувачами). А якщо ви користувач Mac, ви навіть можете використовувати CodePen TV як самостійну рідну заставку OSX!
07. Охопіть дух громади
Спільноти кодуючих славляться ексклюзивністю, створюючи справжні умови для розмноження синдрому самозванця, який може відчувати себе непроникним та неприємним навіть для самих досвідчених дизайнерів та розробників.
Тут CodePen виділяється - і чому стати активним членом спільноти пропонує такі переваги. Бачите ручку, яка викликає радість? Розімніть цю кнопку серця і покажіть іншому користувачеві трохи любові. Ви можете продовжувати натискати його до трьох разів, якщо вам дуже подобається робота, яку вони зробили.
Відчуваєте натхнення або, можливо, думаєте про альтернативний варіант ручки іншого користувача? Одним клацанням миші ви можете розщепити перо, а потім надати власний креативний розквіт або навіть переробити його, як вам подобається.
Крім того, якщо ви бачите кращий підхід або виявили ваду в коді користувача, подумайте про коментування Перу будь-якими конструктивними порадами, які у вас є. Хоча більшість розділів коментарів на таких сайтах, як правило, є неконтрольованим сміттєвим вогнем негативу, спільнота, як правило, чудово справляється з самоконтролем, заохочуючи позитив і підтримуючи інших.
Мабуть, найкращий спосіб зануритися у спільноту - це приєднатися до чату Spectrum CodePen - відкритого форуму для обміну роботою, звернення за порадами та творчої співпраці. Одним із прикладів є Pass the Pen - концепція користувача CodePen Крістофера ван Санта, в якій Pen створюється, а потім повторюється користувачами, які хотіли б зробити свій внесок.
CodePen також пропонує щотижневі підказки, щоб тримати вас творчо залученими. Можливо, ви не вважаєте, що ваша робота гідна спільного використання, але ви, мабуть, помиляєтесь. Зайдіть у чат Spectrum CodePen і покажіть, над чим працюєте, незалежно від того, наскільки великим чи маленьким. Ви будете приємно здивовані тим, наскільки приємним та корисним є пересічний користувач CodePen, і, можливо, навчитесь кілька різних речей по дорозі.
08. Відвідайте IRL для зустрічі
Основою того, що робить CodePen важливим інструментом для розробників інтерфейсів, є спільнота. Але іноді корисно виводити свої навички за межі екрану - і немає кращого способу, ніж провести або відвідати збори CodePen. CodePen милостиво надасть вам макет для присутніх, а за допомогою своїх спонсорів вони навіть можуть допомогти вам забезпечити відшкодування витрат на їжу та напої - місце та дата визначаються вам. Зустрічі дають чудову можливість поєднати програми, публічно запросити стратегії чи концепції, виконати командний виклик або просто краще дізнатися, що мотивує ваших колег-кодерів. Або, можливо, ви просто там для безкоштовної піци. Ми прощаємо вас.
09. Оновіть до версії Pro
Глибина функціональних можливостей, яку CodePen пропонує безкоштовно, справді надзвичайно вражаюча, особливо враховуючи тягар тисяч користувачів, які одночасно збирають кілька неймовірно серйозних творінь. Нестандартно це досить добре округлений досвід - це поки ви не вкусите від CodePen Pro. То навіщо робити стрибок? Незважаючи на те, що він містить багато корисних розширених функцій, одна лише функція робить його вартим: можливість приватного збереження ручок.
Для непрофесійних користувачів кожна створена ручка публічно індексується, що часто просто чудово. Але що, якщо я хочу розібратися з деяким процвітанням інтерфейсу для ще не запущеного клієнтського проекту? Ось де можливість приватного збереження надзвичайно зручна - «приватний» не означає прихований, наприклад, ви все одно можете ділитися прямими посиланнями на свою ручку з внутрішньою командою. Але вашу ручку в іншому випадку неможливо знайти. Можливо, вам просто потрібно середовище для випробування нових концепцій, або у вас є обмежений час для роботи над твором і маєте намір повернутися пізніше - саме тут параметри конфіденційності мають значення.
То що ще включає обліковий запис Pro? Хостинг активів! В межах 2 Мб на файл, CodePen буде розміщувати активи Вашого пера, що означає відсутність необхідності завантажувати зображення або сценарії на зовнішній хост, а також надавати більшу гнучкість при роботі з фреймворками із суворими специфікаціями перехресного походження.
Професійні облікові записи пропонують доступ до Live View - дозволяючи користувачам бачити їх редагування, перезавантажувані в режимі миші через кілька вікон - Режим Collab - який дозволяє програмувати живі пари та включає зручну опцію чату - і Професорський режим, який транслюватиме оновлення вашого коду поряд із попереднім переглядом Пен в реальному часі, ідеально підходить для інструкторів коду або мазохістів конференц-зв'язку. CodePen Pro також пропонує можливість редагувати власну сторінку профілю, включаючи власні CSS та JS, а також необов'язковий вбудований перо як заголовок сторінки, оскільки знати свою аудиторію означає знати, що розробники фронтендів вимагають налаштувати, налаштувати, налаштувати.
10. Пориньте в криницю натхнення
Свіже перо схоже на чисте полотно, але інколи творчий блок потрапляє, і це полотно займе довгий ніцшеанський погляд у вас. Відчуваєте себе не натхненним? Перегляньте останні виклики CodePen або приєднайтеся до групи завдань кодування, таких як Codevember або DailyUI. Можливо, перейдіть до Dribbble і відтворіть (або, можливо, анімуйте) ілюстрацію в CSS - просто переконайтеся, що ви надаєте належне (додавання зворотних посилань до загальнодоступних даних вашого пера є кращим методом).
Це може здатися вправою безрезультатно, і ми всі були прихильні до аргументів проти кодування у вільний час, але є ще один маловідомий плюс (публічно) креативного кодування в CodePen: потенційні роботодавці та рекрутери фактично проводять час, переглядаючи сайт для людей, які виявляють творчі амбіції. Побудували деякі речі, якими ви особливо пишаєтесь? Обов’язково включіть їх у своє портфоліо.
CodePen полегшує вбудовування за допомогою декількох параметрів відображення, і, використовуючи їх нову функцію попереднього заповнення, ви можете додати вікно редактора CodePen із відтвореним кодом безпосередньо з кодової бази вашого веб-сайту портфоліо.
Ця стаття спочатку була опублікована в журналі творчого веб-дизайну Веб-дизайнер.Купити випуск 290.
