Подборка инструментов для фронт-энд разработки

Original author: Jean-Baptiste Jung
  • Translation
Как разработчику, мне очень нравятся инструменты, которые помогают сэкономить время или упростить процесс разработки фронт-энда. В этой статье я собрал мои любимые веб-инструменты для упрощения разработки веб-интерфейсов.

Картинки кликабельны.

Form builder


Формы являются очень важной частью любого веб-сайта, но их верстка может занять продолжительное время. Этот очень удобный инструмент, поможет вам создать красивую веб-форму очень быстро.
image


Colllor


Нужна помощь с подбором подходящего цвета? Этот полезный инструмент для вас. Colllor подберет «похожие» цвета, всего за пару щелчков мыши.
image

JSconsole


Нужно продебажить JavaScript-код? JSconsole предоставляет простой онлайн-дебаггер для любого JS-кода.
image

CleanCSS


CleanCSS — это инструмент, который позволит вам сделать ваши CSS-стили меньше, чище и проще для чтения. Просто установите настройки, вставьте валидный код CSS, и пусть CleanCSS сделает тяжелую работу за вас.
image

Mystic Paste


Mystic Paste — это очень полезный Pastebin-подобный веб-сайт, предназначенный для хранения и совместного использования ваших любимых фрагментов кода.
image

Dabblet


Вам нужно протестировать HTML-код? Вы хотите увидеть, что сделает ваш код CSS? Dabblet является одним из моих любимых веб-инструментов для фронт-энд разработки. Он позволит вам увидеть ваш CSS и HTML код в действии. Очень полезно в целях тестирования.
image

Screenqueri.es


На дворе 2012 год, и очень важно, что ваш сайт был отзывчивым и корректно отображался и на любом большом экране, и на портативных устройствах. Чтобы проверить, как сайт выглядит в разных разрешениях экрана, я использую Screenqueri.es, и вы тоже должны попробовать!
image

Moqups


Moqups является удивительным HTML5-приложением, для создания каркаса сайта. Супер полезно, когда нужно быстро создать макет простого веб-сайта.
image

Minus


Изображения действительно очень важны в интернете. Мне часто нужно иметь возможность сохранить «про запас» какое-нибудь изображение, а также провести с ним простые манипуляции, такие как изменение размера или обрезка. Minus, безусловно, мой любимый сайт для всех этих целей.
image

Font-face Generator


Нравится ли вам использовать нестандартные шрифты на вашем сайте? Font Squirrel Font-face Generator генерирует шрифты во всех форматах, а также код CSS, необходимый для использования кросс-браузерных пользовательских шрифтов на вашем сайте. Добавьте себе в закладки!
image
Share post

Similar posts

AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 40

    +2
    спасибо, реально полезные инструменты. screenqueri.es даже локальные сайты позволяет просматривать
      +2
      В Firefox же есть удобный просмотр адаптивного дизайна.
        0
        Подтверждаю. Ctrl+Shift+M и никаких iframe-ов.
        0
        Есть еще responsive.is — тоже для тестирования адаптивной верстки. И тоже работает с локальными ресурсами (а чего им не рабоать — iframe обычный) =).
        0
        Генератор форм не достаточно гибкий, хотелось бы больше настроек, добавления полей, описание лейблов и плейцхолдеры.
          0
          Спасибо за подборку! Генератор HTML5-шаблонов понравился.
            +1
            хорошая подборка.
            Вот еще инструмент с веб интерфейсом для прототипирования веб интерфейсов: protoshare.com.
            Из плюсов — позволяет расшаривать и работать совместно над прототипом.
            Минус — сервис не бесплатный (есть 30-и дневный trial)
              0
              Спасибо за подборку, добавил в избранное.
              В свою очередь хочу посоветовать пользователям Хрома расширение ResponsiveTester для проверки сайта при различных разрешениях экрана. На мой взгляд, удобнее иметь в браузере такое расширение, доступное по нажатию одной кнопки, чем пользоваться для этого сторонним ресурсом.
              +3
              я один ссылки не вижу?
                +2
                <a href="/link"><img src="/img.png"></a>
                
                  0
                  Скриншоты сервисов = ссылки.
                    +1
                    вот и догадайся… не привык по картинкам тыкать без надобности
                  0
                  Еще можно добавить http://wireframe.cc/ как вариант к Moqups
                    +12
                    Эммм… А jsfiddle — настолько очевидно, что и упомянуть стыдно?
                    +2
                    Form Builder — ни о чем. Форма уже задана, взаиморасположение полей я поменять не могу, добавить/убрать элементы я не могу. Это получается уже не экономия, а лишняя трата времени. Также в генераторе нет поддержи LESS/SASS.
                      –1
                      Меня одного напрягает, что тут предлагаются в том числе и облачные сервисы, которые должны быть офлайновыми и работать на стороне машины разработчика?
                        +1
                        Согласен. Большую часть вещей делает обычный фаербаг + пару аддонов.
                        0
                        «Формы являются очень важной частью любого веб-сайта, но их верстка может занять продолжительное время.», такое читаешь и впечатление что все формы создают каждый раз с нуля. Неужели у вас нет в системе которая генерит формы известные и понятные для вас, для которых стоит только подправить внешний вид.

                        Откровенно мне такие «сайты-упростители» не нравятся, легче как то не становится.
                          –1
                            +1
                            Хм, а ведь искал перед этим по странице через ctrl + F специально…
                            0
                            Я бы добавил сюда lorempixel.com/.
                              0
                              jsfiddle.net/
                              Для совмещения HTML + CSS + JS и оценки полученного результата на определенном JS Frameworke.
                                –1
                                jsfiddle.net?
                                  +2
                                  По законам хабра, одну и ту же ссылку можно в комментариях давать только три раза.
                                    0
                                    Пока думал, как можно пошутить на тему тройного комментария, все пропустил.
                                  0
                                  Dabblet глючит страшно при копировании и вставке кода, лучше уж codepen.io
                                    0
                                    Порекомендую еще вдогонку сервис divshot.com
                                      0
                                      Еще можно добавить spoon.net/browsers — кроссбраузерное тестирование
                                        +1
                                        Мне кажется, вступительное слово переведено некорректно:
                                        особенно [много таких разработчиков] в мире .NET

                                        Иначе можно понять двояко.
                                          0
                                          Мне кажется, это в соседний топик :)
                                            0
                                            Ooops, извиняюсь =)
                                        • UFO just landed and posted this here
                                            +1
                                            Благодарю, отличная подборка и у автора и в комментариях.
                                              0
                                              Adobe Muse очень крут, имхо.
                                                +2
                                                Посоветую от себя, как альтернатива Minus — Clipboard.com. Пользуюсь им пол года. Очень удобный онлайн инструмент для сохранения изображения или текста и вообще любого фрагмента с любого сайта. Есть плагины к браузерам, что в пару кликов позволяет сохранить любое содержимое вёб страницы и просмотреть его в любой момент. Рекомендую.
                                                  +1
                                                  Забыл добавить, что все фрагменты сохраняются в собственный аккаунт на сайте clipboard.com Не нужно ничего хранить на компьютере, что очень удобно. Это позволяет нам сохранять данные при форматировании жёсткого диска, либо доступа ко всей сохранённой библиотеке с любого компьютера, где есть интернет. Вдобавок можно смотреть «клипы» других пользователей и добавлять к себе в библиотеку.
                                                    0
                                                    Спасибо, поставил в хром плагин, за пару дней уже оценил его крутость!

                                                Only users with full accounts can post comments. Log in, please.