CodePen: побудований, тестований, спільний доступ та відкриття HTML, CSS та JavaScript

Codepen: Створення, тестування та виявлення інтерфейсного коду

Однією із проблем системи управління контентом є тестування та виготовлення сценарійних інструментів. Хоча це не є вимогою для більшості видавців, я, як технічне видання, люблю час від часу ділитися робочими сценаріями, щоб допомогти іншим. Я поділився, як користуватися JavaScript для перевірки надійності пароля, як перевірити синтаксис адреси електронної пошти за допомогою регулярних виразів (Регекс), і нещодавно додав це калькулятор для прогнозування впливу продажів онлайн-оглядів. Я сподіваюся додати на сайт десятки інструментів, але WordPress не зовсім сприяє такому виданню ... це система вмісту, а не система розробки.

Отже, щоб мої маленькі сценарії працювали, мені подобається користуватися CodePen. CodePen - це акуратно організований інструмент із панеллю HTML, панеллю CSS, панеллю JavaScript, консоллю та опублікованим отриманим кодом. На кожній панелі є інформація, коли ви наводите курсор миші на елементи, щоб ви зрозуміли, що можливо, а також кольорове кодування HTML, CSS та JS, щоб допомогти вам легше редагувати та писати.

CodePen - це середовище соціального розвитку. У своїй основі він дозволяє писати код у браузері та бачити результати його під час побудови. Корисний редактор коду для розробників будь-яких навичок, особливо розширений для людей, які навчаються кодувати. CodePen зосереджується насамперед на інтерфейсних мовах, таких як HTML, CSS, JavaScript та синтаксисах попередньої обробки, які перетворюються на ці речі.

Про CodePen

За допомогою CodePen я зміг виконати всю необхідну роботу опублікувати калькулятор Я вбудував на сайт. Більшість творів на CodePen є відкритими та відкритими. Вони є живими істотами, з якими можуть взаємодіяти інші люди та громада, починаючи від простого духу, закінчуючи коментарями, закінчуючи роздвоюванням та зміною для власних потреб.

CodePen - калькулятор для прогнозування впливу продажів онлайн-оглядів

За допомогою CodePen ви можете змінити вигляд, якщо хочете, щоб панелі знаходились ліворуч, праворуч або знизу під час роботи… або переглядати HTML на новій вкладці. Побічний вигляд неймовірно добре працює для перевірки ваших адаптивних налаштувань, оскільки ви можете налаштувати розмір області, яку можна переглянути.

Ви можете організувати кожен свій робочий сценарій у ручки, об'єднати їх у проекти (багатофайловий редактор) або навіть створити колекції. В основному це діючий портфоліо-сайт для інтерфейсного коду, де ви можете стежити за іншими авторами, перетворювати інші загальнодоступні проекти у свій власний, щоб їх модифікувати, і навіть навчитися робити цікаві речі через виклики.

Ви можете зберігати як GitHub Gist, експортувати у zip-файл і навіть Вставляти перо в такій статті:

Дивіться Перо
Прогнозований вплив продажів на онлайн-огляди
by Douglas Karr (@douglaskarr)
on CodePen.


Одним з обмежень редактора Pen є великий обсяг коду. Можливо, ви ніколи не зіткнетеся з цією проблемою, оскільки редактор повинен мати сотні чи навіть тисячі рядків коду. Але коли вони починають натискати 5,000 - 10,000 або більше рядків коду, ви побачите, що редактор починає давати збій. Однак ви можете додати зовнішні посилання на таблиці стилів або JavaScript, розміщені деінде!

Я закликаю вас зареєструватися. Ви будете передплачені на їх щотижневі електронні листи, а також можете додати стрічку до своєї стрічки RSS, щоб ви могли бачити нещодавно опубліковані ручки. І якщо ви почнете там шукати чи переглядати публічні ручки, ви знайдете неймовірні проекти ... користувачі цілком талановиті!

слідувати Douglas Karr на Codepen

Платна версія CodePen Pro пропонує масу додаткових функцій для поліпшення функціональних можливостей або команд, включаючи співпрацю, процеси, розміщення ресурсів, приватні перегляди та навіть розгорнуті проекти з вашим власним доменом або субдоменом. І, звичайно, CodePen пропонує чудове сховище з інтеграцією Github, де може працювати вся ваша команда. Якщо ви просто хочете випробувати якийсь простий код, як я, CodePen - це безцінний інструмент.

Що ви думаєте?

Цей сайт використовує Akismet для зменшення спаму. Дізнайтеся, як обробляються ваші дані коментарів.