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

    В эту прекрасную пятницу осмелюсь предложить хабрасообществую небольшую подборку приложений, предназначенных для увеличения продуктивности во время работы с фронтэндом. Если ваш любимый апп здесь не представлен — добро пожаловать в комментарии!

    Form Builder

    image

    Этот прекрасный генератор форм поможет вам в создании красивейших CSS логин-боксов и прочих input вещей, при минимальных временных затратах. Помимо форм на сайте этого проекта можно создавать и другие не менее красивые CSS элементы, в том числе кнопки и ленты.



    Bootstrap Generator

    image

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



    Генератор переключателей On/Off

    image

    Переключатели и тумблеры на чистом CSS. Очень качественно и просто.



    Colllor

    image

    Colllor генерирует гармонирующую цветовую палитру на основе заданного цвета. Позволяет избежать эффекта «вырвиглаз» в ваших проектах, и при этом использовать широкий набор цветов.



    Minify and GZip

    image

    Компрессия для ваших CSS и JavaScript файлов без забот и проблем.



    cssUpdater

    image

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



    CSSComb

    image

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



    CSS load.net

    image

    Генератор индикаторов загрузки для AJAX и jQuery. Легок в использовании и кастомизации.



    Ribbon Builder

    image

    Этот тул поможет вам сгенерировать симпатичную ленточку. Ну вы понимаете, что я имею ввиду — они нынче повсюду.



    Typecast

    image

    Проект typecast предназначен для шрифтовых экспериментов. 30 секунд на регистрацию, и у вас в арсенале довольно сильный инструмент, позволяющий делать всевозможные операции со шрифтами, и того как вы найдете свою идеальную комбинацию, все экспортируется в CSS. Ну разве не прекрасно.



    Fontello

    image

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



    Stitches

    image

    Удобнейший апп для создания спрайтов. Просто перетаскиваете необходимые изображения, кликаете Generate и получаете sprite sheet. Пока работает только в Chrome Firefox.



    Responsive.Is

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



    Stylie

    image

    Хотите легко и непринужденно создавать анимации с CSS? Тогда вам по ссылке. Задаете направление, координаты, смотрите анимацию и скачиваете исходный код.



    SpritePad

    Еще один инструмент для работы с CSS спрайтами. Тоже drag'n'drop интерфейс, но мне он кажется по-симпатичнее.



    Css2Less

    image

    Если вы любитель препроцессора LESS, то возможно вам будет интересен этот инструмент, конвертирующий из CSS в LESS одним кликом.



    ZenBG

    image

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



    SnipSave

    image

    Этот сайт предлагает вам хранить все свои CSS сниппеты в одном месте. У себя в библиотеке, то есть. Приятный интерфейс, работается с удовольствием.



    Prefixr

    Приложение от Jeffrey Way помогает быстро решать проблемы кроссбраузерности. Вы можете писать CSS код только под один браузер, затем пропускать его через Prefixr, и он будет генерировать недостающий код для верного отображения в других браузерах.



    HTML5 PLease

    image

    Можно назвать этот проект онлайн-помощником по HTML5. Сомневаетесь в использовании конкретного нового тега? Сайт подскажет, стоит ли его использовать. И если стоит, то как именно.

    Ссылки выбирались по материалам smashinghub, tutsplus, codeschool и собственным предпочтениям
    Метки:
    • +190
    • 94,5k
    • 46
    Поделиться публикацией
    Похожие публикации
    Комментарии 46
    • 0
      Спасибо.
      • +11
        Вы compass пробовали? Вещь ведь хорошая, а в Вашем списке нету.
        • 0
          Поддерживаю. А для начала SASS.
        • +1
          Спасибо, много классных фич.
          • +3
            Также может пригодиться Bootstrap Form Builder.
            • +5
              А можно попросить автора сделать ссылки открывающимися в новом окне?
              • 0
                Если хабрапользователи поддержат ваш комментарий, то сделаю конечно
                • +24
                  А средняя кнопка мыши у вас сломалась?
                  • 0
                    У меня на «мыше» посередине колесико: неудобно им щелкать.

                    P.S. У меня еще и клавиша Ctrl тоже есть ;) Но по мне удобнее, чтобы ссылки на другие ресурсы открывались с новом окне
                    • +4
                      Просто это лешит возможности тех, кто хочет открывать в этом окне, это сделать.
                      • +1
                        неудобно штаны через голову одевать )
                        • +4
                          • 0
                            Точно, блин.
                            Стыд мне
                            • +1
                              «Одеть Надежду, надеть одежду» — я так запомнил :)
                          • +1
                            Если было бы по вашему, то вы могли бы узреть много недовольных комментариев о том, что автор пытается самостоятельно решить, где у пользователя должна открываться ссылка. Было уже такое на хабре, и не раз.
                          • +1
                            А у меня трекпад, и для открытия вкладки надо нажимать CMD, а это не так удобно.
                            • 0
                              У меня тоже, но средняя кнопка есть. Очень удобно.

                              // счастливый пользователь thinkpad x220.
                              • 0
                                А у меня есть ноут. Обычный трекпад. Удар двумя пальцами — открывается в новой вкладке.
                            • –8
                              А за саму статью однозначный +

                              Жаль только, что кармы не хватает для него
                          • +1
                            Как-бы не хватает еще в списке ссылок на сервисы с иконками, для полноты картины. Но все-равно спасибо, утащил в избранное. =)
                          • +3
                            Также:
                            www.noisetexturegenerator.com/ — генератор «зашумленных» текстур
                            subtlepatterns.com/ — подборка фонов.
                            github.com/thoughtbot/bourbon — на мой взгляд, более продуманная библиотека с миксинами, чем Compass, да и работает из коробки под Rails.
                            cssrefresh.frebsite.nl/ — автообновление css без необходимости релода страницы

                            cssUpdater прикольная штука, нет ли чего подобного для Chrome?
                          • +3
                            css3please.com/ забыли.
                            • +2
                              Эхх, генераторы, генераторы… Скоро уже и не найдешь теплый ламповый CSS, написанный руками, с нежностью и заботой :)
                              • 0
                                Лучше всё же less или sass/scss. Он чуть менее «теплый и ламповый», но куда более удобный.
                            • +1
                              Для хранения сниппетов может подойти Gist.
                              • +1
                                я здесь ищу иконки:
                                www.iconfinder.com/
                              • 0
                                Что www.zbugs.com/ использует для минимизации можете подсказать?
                                • 0
                                  Ещё вот app.divshot.com недавно вышел в открытую бету.
                                  • НЛО прилетело и опубликовало эту надпись здесь
                                    • +3
                                      Здесь не указано количество, чуть изменён порядок и отсутствует несколько из упомянутых там инструментов %(

                                      Хотя картинки вставлены ровно те же, что и в той статье. Прямо с того сайта, даже без переноса другому хостеру! :D

                                      Зато здесь есть подпись «Ссылки выбирались по материалам smashinghub, tutsplus, codeschool и собственным предпочтениям». А, и ещё здесь описания по-русски! Как топик-перевод сошло бы, но точно не с такой подписью…
                                    • 0
                                      Добавлю в копилку ссылок: http://jetstrap.com/. Сервис для быстрого прототипирования интерфейсов на Twitter Bootstrap.
                                      • 0
                                        Есть еще Sencha Architect (бывший Ext Builder) www.sencha.com/products/architect/
                                        Это приложение для проектирования форм и интерфейсов на основе ExtJs.
                                        • +6
                                          Было плохое настроение.
                                          Зашел сюда теперь улыбаюсь глупо и куча вкладок)
                                          • +3
                                            Разрешите я Вам еще немного вкладок накастую :) www.thetoolbox.cc/
                                            • +2
                                              отлично!
                                              • +4
                                                Господи да я теперь не просто разработчик! Я теперь все умею.
                                            • +1
                                              Yeoman – очень удобный набор инструментов для создания быстрых и надежных приложений.
                                              Рекомендую!

                                              (хотя, это не онлайн сервис)

                                              Из онлайн сервисов – старый добрый JSLint, конечно же :)
                                              • 0
                                                Про caniuse.com не забывайте. Аналог html5 please.
                                                • 0
                                                  Спасибо, хорошая подборка.
                                                  • 0
                                                    Комментарии как обычно, чуть ли не полезнее самой статьи =)
                                                    Спасибо, всем. Мой тулбокс теперь переполнен, даже и не знаешь чем пользоваться.
                                                    • 0
                                                      Glue — удобный инструмент генерации спрайтов (CSS и PNG) для командной строки. Есть куча настроек, поддерживает LESS, написан на питончике, регулярно обновляется.

                                                      Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.