Розробка FrontEnd: CodePen чи піднесений текст?

CodePen чи піднесений текст?

CodePen або піднесений текст? Якщо говорити про веб-програмування, то назва HTML, CSS та JavaScript приходить до нас відразу. Є кілька способів туди дістатися. Навіть, якщо ми відкриємо блокнот, ми можемо приступити до написання "html". Це правда, що щоб побачити результат того, що ви програмуєте з педу, вам знадобиться копітка процедура, щоб помітити прогрес.

Ці сайти є основними майданчиками для розробників додатків для користувачів дня. Щоб дізнатись більше про переваги та недоліки цих програм, ми збираємось їх глибоко проаналізувати в цій статті (принаймні, все, що ми знаємо). Як я завжди кажу, напевно, деякі з вас тут знають цю тему більше. Якщо так, то коментуйте все, що нам тут не випадає. Ми будемо раді обговорити!

Сьогодні ми збираємося проаналізувати CodePen, JSBin, Plunkr, sublime, CSSDeck, Dabblet та LiveWeave. Які є найбільш відомими та інструментами, які найчастіше використовуються в цьому середовищі. Є й більше, звичайно.

Але для всіх вас, хто не знає, про що FrontEnd чи BackEnd, давайте трохи пояснимо. Інтерфейс або інтерфейс - це візуальна частина, яку користувач, який здійснює навігацію, зможе побачити в Інтернеті. BackEnd буде частиною, якою керує адміністратор сайту. У програмуванні, якщо ви вводите код через інструмент, який одночасно відображає результат, це буде називатися фронтальним.

CodePen

Для багатьох найповніший інструмент з усього, що ми говоримо. Використовується як веб-інструмент, який є найближчим для спільноти, щоб показати вашу роботу. Вид Youtube від програміста. У цьому ви можете побачити роботу програмістів, пов’язаних з Інтернетом, і зв’язатися з ними на випадок, якщо у вас є якийсь інтерес, побачити їхній профіль, стежити за ними в мережах і навіть підписатися на їхній канал, щоб переглянути всі їх майбутні проекти.

Презентація вмісту, підтримка та комбінації клавіш

Презентація CodePen є найцікавішоюОскільки за допомогою всього лише декількох клацань мишею ви можете пройти процес відразу. З дуже добре розділеними рядками html, css та javascript. На додаток до візуальної частини, яку ви можете розподіляти вгору-вниз, щоб чітко бачити ваш прогрес. Тим самим допомагаючи добре диференціювати кожну мову. Щось, що стане в нагоді новим програмістам.

Ваша веб-підтримка, робить це більш стерпним, коли ви хочете почати використовувати те, чого ми насправді не дуже добре знаємо. Це не означає, що вам краще, це залежить від наших потреб. Але так, щоб трохи пізнати навколишнє середовище перед тим, як зобов’язуватися встановити що-небудь на комп’ютер «невідомого» походження.

Якщо ви один з тих, хто звик використовувати CASI повністю працюючи на клавіатурі, CodePen буде чудовим для вас. Потрібні інші інструменти plugins мати можливість використовувати комбінації клавіш для заповнення середовища. Це робить роботу трохи більш незручною (хоча настільки ж ефективною після встановлення). CP Він стандартно інтегрує систему, яка змусить вас заповнювати ті самі рядки коду, які повторюються, як це може бути у списку. Ви пишете, як ви хочете, щоб з'явився список, і натискаєте Tab.

Версія Pro також дозволяє набагато більше варіантів за ціною від 9,00 євро за базовий пакет до 29,25 євро за пакет “Супер”. Можливість одночасного оновлення на декількох пристроях того, що ми робимо на одному. Також режим співпраці, "режим викладача" тощо. Виграйте, якщо хочете тут.

JSBin

JSBin - це інструмент, який ми можемо кваліфікувати як прямий. Оскільки ви перейдете до його веб-домену, він буде готовий негайно розпочати розробку вашого наступного проекту. І хоча його перша постановка не надто приваблива, вона комфортна.

JSBin простий, з базовою структурою, створеною в html, щоб не витрачати час, ви будете мінятися між різними мовами, щоб завершити роботу. Спочатку HTML, потім CSS, Javascript і, нарешті, ваша робота візуально. І хоча це здається складнішим, у вас будуть однакові ярлики, не встановлюючи нічого. Безпосередньо з браузера.

Однак мені було незручніше правильно переглядати код, коли він прихований через наступні стовпці. Оскільки, з ноутбуком, ви повинні відмовитися від або трекпад і це не дуже рідина.

Він має лише два внески, безкоштовний або платний. Це трохи дорожче, ніж CodePen, хоча якщо ви платите його щорічно, це вигідніше, якщо ви можете заплатити 120 євро.

CSSDeck

CSSDeck

Робоче середовище CSSDeck відрізняється від того, що видно вище. Розділений на два стовпці, візуальний код, CSSDeck працює з 3 рядками вниз, за ​​допомогою яких поділяє різні типи мови. З презентацією у формі соціальної мережі та чистішим робочим середовищем у світлих тонах. Це здається простим інструментом. Хоча іноді це не означає, що це негативно.

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

Плункр

Плункр це найменш привабливий інструмент, з яким я досі стикався. Презентація склеєна повідомленнями та відсутністю зображень. Завантаження вмісту відбувається повільно і не дуже корисно на перший погляд. Крім того, упорядкування за датою робить будь-який графік, яким би простим він не був, може бути на першій позиції. Щоб побачити щось більш цікаве, вам слід перейти на вкладку, яка говорить: «Найбільше переглянуті«. Тобто, якщо ви раніше не перекладали його в Google.

Також скажіть, що згідно з Інтернетом вони є у версії 1.0.0. Тож це трохи пояснює дизайн, презентацію та можливі помилки, які ви виявляєте під час перегляду веб-сторінок.

Як перевага, якщо у вас закінчуються ідеї, вам не доведеться залишати чи відкривати іншу вкладку в Plunkr, оскільки безпосередньо з правої бічної панелі ви можете ходити з іншими проектами та миттєво їх переглядати. Так вам буде легше збирати швидкі ідеї та одночасно застосовувати їх у своєму проекті.

Дабблет

Дабблет це простий інструмент, ви заходите і створюєте. Незважаючи на те, що ви можете зареєструватися та отримати своє ім’я користувача за допомогою GitHub, це не те, що сильно виділяється в Інтернеті. З фоном у жовто-червоному градієнті, у візуальній частині та білим фоном у частині коду (як зазвичай), представлений проект Dabblet, хоча ви можете змінити його на вкладці CSS. Для мене краще, щоб він був порожнім, оскільки цього градієнта все, що дає, трохи життя a

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

Одна з речей, яка мені найбільше сподобалася, але яка може сподобатися великим програмістам, - це у вас немає можливості зробити табличну таблицю, щоб вона сама писала. Тобто, поставте HTML і клацніть на вкладці і напишіть автоматично "html" та "/ html". Щось, що в інших додатках, якщо це зроблено.

LiveWeave

пряме плетіння

LiveWeave Це дуже схоже на інші, воно не має нічого, що інші не можуть запропонувати з точки зору корисності. У цьому проекті ми виділяємо його дизайн, темний колір, схожий на CodePen, але з квадратним розподілом. Можливість зміни розміру за смаком. Також є чіткий режим і «не в порядку« де код, який ви редагуєте, не відображатиметься у візуальному, поки ви його не активуєте. Це не особливість, яка вам здається дуже корисною. Як дизайнеру, важливо завжди бачити те, що ви редагуєте в режимі реального часу, але хтось точно знайде вам користь. І хоча, як завжди, ви можете зареєструватися, користувач не виконує провідну роль. Оскільки, навіть якщо ви не зареєструєтесь, ви можете зберегти свій проект.

Sublime Text

Цей інструмент воно абсолютно відрізняється від того, що ви бачили до цього часу в аналізі. Sublime Text виступає не як веб-ресурс, а як додаток. З одного боку, напевно корисніше мати його на робочому столі. Особливо через можливі збої чи зависання Інтернету через надлишок та можливу втрату роботи. З іншого боку, це не такий візуальний інструмент, як попередні. До того ж не має можливості спільноти ділитися проектами.

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

Висновок

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


Залиште свій коментар

Ваша електронна адреса не буде опублікований. Обов'язкові для заповнення поля позначені *

*

*

  1. Відповідальний за дані: Мігель Анхель Гатон
  2. Призначення даних: Контроль спаму, управління коментарями.
  3. Легітимація: Ваша згода
  4. Передача даних: Дані не передаватимуться третім особам, за винятком юридичних зобов’язань.
  5. Зберігання даних: База даних, розміщена в мережі Occentus Networks (ЄС)
  6. Права: Ви можете будь-коли обмежити, відновити та видалити свою інформацію.