Подборка инструментов для эффективной 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
    • 95,5k
    • 46
    Поделиться публикацией
    Похожие публикации
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 46
    • 0
      Спасибо.
      • +11
        Вы compass пробовали? Вещь ведь хорошая, а в Вашем списке нету.
      • +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, написан на питончике, регулярно обновляется.

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