Перейти к содержимому



Редакторы кода / Q&A / Сервисы / Фреймворки для фронтенд разработчиков

#1 TimurR

TimurR
  • Пользователь PRO
  • 831 сообщений
  • Репутация: 180
5

Отправлено 11 Февраль 2015 - 16:01

63b9e67f6453.jpg

 

* * *

Ходить по воде и разрабатывать программы согласно ТЗ очень просто, если они заморожены. E. Berard

 

* * *

 

1. Редакторы кода

 

1.1 NotePad ++

 

notepad4ever.gif

 

Бесплатный редактор с открытым исходным кодом, который уже зарекомендовал себя. Имеет множество интересных плагинов, относительно простой и понятный интерфейс. 

 

Поддерживает подсветку синтаксиса множества языков, в том числе JS, CSS, HTML, PHP и т.д.

 

Официальный сайт: http://notepad-plus-plus.org/

 

1.2 Brackets

 

052813_1128_BracketsOpe1.png

Один из самых удобных на мой взгляд редакторов кода, который имеет встроенный каталог плагинов. Редактор имеет открытый исходный код и распространяется бесплатно. 

 

Один из плюсов - это возможность верстки в режиме реального времени. Данный редактор также поддерживает очень полезный плагин Emmet, о котором я позже расскажу. 

 

Кстати, очень классная вещь, можно из html файла, задавать стили по ID или классу, при этом правила CSS записываются в подключенный файл CSS.

 

Официальный сайтhttp://brackets.io/

 

1.3 Sublime Text 

 

sublime-text-2-logo.jpg

Является также очень мощным редактором кода. Поддерживает множество тем (внешнего оформления), имеет подсветку синтаксиса множества языков.

 

Тем не менее, он имеет несколько недостатков, относительно предыдущего редактора. Sublime Text является платным программным обеспечением. Установка плагинов тут немного мудреней, нежели в Brackets и нет возможности из коробки в потоковом редактировании документа. 

 

Официальный сайт: http://www.sublimetext.com/

 

1.4 Koding

 

koding.png

Довольно мощный и бесплатный облачный редактор кода, который может пригодиться пользователям операционных Google Chrome OS. 

 

Имел небольшой опыт работы с данным редактором. После регистрации предоставляет бесплатный настроенный домен 3-го уровня с установленной CMS (есть все популярные бесплатные CMS в т.ч. WordPress). Файлы CMS можно удобно редактировать и в режиме online разрабатывать темы и плагины.

 

Официальный сайт: https://koding.com/

 

1.5 Codepen

 

codepen.png

Облачный бесплатный сервис, где можно делиться наработками по фронтенду. Вставленный, HTML, CSS и JS код сразу интерпретируется в окошке. Поддерживаются CSS препроцессоры LESS, Stylus и SASS. Также есть поддержка HAML, Slim, Jade и Markdown.

 

Официальный сайт: http://codepen.io/


 

 

Сообщение отредактировал TimurR: 12 Февраль 2015 - 10:24

  • 1

Рекомендую хостинг: www.ihc.ru

Разработка сайтов / Дизайн / Верстка - писать в л.с.



#2 TimurR

TimurR
    Topic Starter
  • Пользователь PRO
  • 831 сообщений
  • Репутация: 180

Отправлено 12 Февраль 2015 - 09:42

2. Q&A 

 

Часто случается, что нужно решить сложную задачку и на форумах ответа можно не получить. На помощь могут прийти Q&A сайты, то есть сайты, где можно задавать вопросы. Для фронтендеров и вообще айтишников есть крутые Q&A сайты:

 

2.1 Toster

c3654150cf08.jpg

Русскоязычный сайт, те кто читает хабру, с ним вероятно, уже знаком. Можно задавать различный вопросы из сферы айти, в том числе и верстке.

Ссылка: https://toster.ru/

 

2.2 Stack Overflow 

TODEi.png

Один из самых крупных подобных сайтов, он англоязычный, поэтому знание английского для правильной формулировки своих вопросов приветствуется. 

Ссылка: http://stackoverflow.com/


  • 0

Рекомендую хостинг: www.ihc.ru

Разработка сайтов / Дизайн / Верстка - писать в л.с.



#3 TimurR

TimurR
    Topic Starter
  • Пользователь PRO
  • 831 сообщений
  • Репутация: 180

Отправлено 12 Февраль 2015 - 10:16

3. Сервисы

 

3.1 Ultimate CSS Gradient Generator -данный сервис позволяет генерировать градиент. Один из самых удобных сервисов для этой цели. Множество настроек, поддержка IE 9.

Ссылка: http://www.colorzill...radient-editor/

 

3.2 CSS3 Gen

CSS3gencom1a1-e1420522674535.jpg

Это универсальный сервис, который позволяет генерировать градиент, бордеры, тени для текста, CSS кнопки, анимацию и множество всего. В общем сервис очень интересный.

Ссылка: http://css3gen.com/

 

3.3 CSS Border Radius Generator - простой и удобный генератор скругления углов. Генерирует кроссбраузерный код.

Ссылка: http://border-radius.com/

 

3.4 HTML Table Generator - иногда бывает, что нужно быстро сгенерировать простую HTML таблицу. Для этого можно воспользоваться этим сервисом. 

Ссылка: http://www.rapidtabl...e-generator.htm


  • 0

Рекомендую хостинг: www.ihc.ru

Разработка сайтов / Дизайн / Верстка - писать в л.с.



#4 TimurR

TimurR
    Topic Starter
  • Пользователь PRO
  • 831 сообщений
  • Репутация: 180

Отправлено 06 Март 2015 - 12:43

4. CSS фреймворки

 

4.1 Twitter Bootstrap - нельзя оставить этого монстра без внимания. Действительно мощный инструмент для создания адаптивной сетки для сайта и UI. Для тех, кто считает его слишком громадным, то можно просто брать некоторые куски кода, которые вам нужны и все.

Ссылка: http://getbootstrap.com/2.3.2/

 

4.2 960 Grid system - из названия понятно, что максимальная ширина шаблона, который можно использовать на этом фреймворке 960px. Хотя на самом деле, можно сделать как угодно, но так повелось, что это некий стандарт, со времен мониторов c с разрешением 1024x768.  

Ссылка: http://960.gs/

 

4.3 Less Framework 4 - навороченный фреймворк, который имеет множество возможностей, в которые я еще не вдавался и пока ничего конкретно сказать не могу. Если есть интерес, то можете попробовать самим разобраться.

Ссылка: http://lessframework.com/


  • 0

Рекомендую хостинг: www.ihc.ru

Разработка сайтов / Дизайн / Верстка - писать в л.с.



#5 Layer

Layer
  • Пользователь
  • 246 сообщений
  • Репутация: 18

Отправлено 06 Март 2015 - 14:14

ого знал и пользуюсь только  NotePad ++ :mellow: 


  • 0

#6 TimurR

TimurR
    Topic Starter
  • Пользователь PRO
  • 831 сообщений
  • Репутация: 180

Отправлено 06 Март 2015 - 14:19

Редактором огромная куча, самых разнообразных. Плюс многие поддерживают различные плагины. В том числе и NotePad++ 


  • 0

Рекомендую хостинг: www.ihc.ru

Разработка сайтов / Дизайн / Верстка - писать в л.с.




Оформление форума – IPBSkins.ru