Подборка инструментов для фронт-энд разработки / Habr
Как разработчику, мне очень нравятся инструменты, которые помогают сэкономить время или упростить процесс разработки фронт-энда. В этой статье я собрал мои любимые веб-инструменты для упрощения разработки веб-интерфейсов.Картинки кликабельны.
Form builder
Формы являются очень важной частью любого веб-сайта, но их верстка может занять продолжительное время. Этот очень удобный инструмент, поможет вам создать красивую веб-форму очень быстро.
Colllor
Нужна помощь с подбором подходящего цвета? Этот полезный инструмент для вас. Colllor подберет «похожие» цвета, всего за пару щелчков мыши.
JSconsole
Нужно продебажить JavaScript-код? JSconsole предоставляет простой онлайн-дебаггер для любого JS-кода.
CleanCSS
CleanCSS — это инструмент, который позволит вам сделать ваши CSS-стили меньше, чище и проще для чтения. Просто установите настройки, вставьте валидный код CSS, и пусть CleanCSS сделает тяжелую работу за вас.
Mystic Paste
Mystic Paste — это очень полезный Pastebin-подобный веб-сайт, предназначенный для хранения и совместного использования ваших любимых фрагментов кода.
Dabblet
Вам нужно протестировать HTML-код? Вы хотите увидеть, что сделает ваш код CSS? Dabblet является одним из моих любимых веб-инструментов для фронт-энд разработки. Он позволит вам увидеть ваш CSS и HTML код в действии. Очень полезно в целях тестирования.
Screenqueri.es
На дворе 2012 год, и очень важно, что ваш сайт был отзывчивым и корректно отображался и на любом большом экране, и на портативных устройствах. Чтобы проверить, как сайт выглядит в разных разрешениях экрана, я использую Screenqueri.es, и вы тоже должны попробовать!
Moqups
Moqups является удивительным HTML5-приложением, для создания каркаса сайта. Супер полезно, когда нужно быстро создать макет простого веб-сайта.
Minus
Изображения действительно очень важны в интернете. Мне часто нужно иметь возможность сохранить «про запас» какое-нибудь изображение, а также провести с ним простые манипуляции, такие как изменение размера или обрезка. Minus, безусловно, мой любимый сайт для всех этих целей.
Font-face Generator
Нравится ли вам использовать нестандартные шрифты на вашем сайте? Font Squirrel Font-face Generator генерирует шрифты во всех форматах, а также код CSS, необходимый для использования кросс-браузерных пользовательских шрифтов на вашем сайте. Добавьте себе в закладки!
Какие нужны инструменты для быстрой верстки (и еще пару вопросов)? — Хабр Q&A
Доброго времени!Уже несколько лет верстаю, достаточно хорошо знаю верстку. Заказчики довольны, программисты не матерят.
В последнее время все больше задаюсь вопросом о инструментах. Хочется делать любую верстку быстрее, в разы быстрее!
Максимум, до чего я смог дойти (давно) — это SASS. Обрабатывается он у меня на руби, кстати… Самый древний способ, вроде как…
Собственно, вопрос #1: что нужно для быстрой, но такой же хорошей верстки?
В данный момент одни ребята уговорили поставить Ubuntu и заточить ее под это дело.
Также я знаю про сборщик Gulp, для которого нужна Node.js.
Проще, по итогу пока такой пакет:
Ubuntu
Node.js
Gulp
Jade (Pug)
Sass
SourceMap
BrowserSyncЧто можно и нужно сюда добавить (убрать, заменить)?
P.S.: чур без предложения конструкторов 🙂
Вопрос #2: что важно знать помимо инструментов и как «делать нормально» свою работу?
В данный момент я знаю про семантику, адаптив, кроссбраузерность, некоторые баги, некоторые фичи. Естественно все это на проектах применяю.
В последнее время начал знакомиться и использовать методологию БЭМ (просто потому, что популярная), еще попытался познакомиться со SMACSS, но как то не пошло.
Всегда стараюсь обособлять крупные логические блоки комментариями по типу <— BEGIN selector —> <— END selector —>. Когда то давно писал на PHP, и знаю, как больно натягивать верстку на что-либо, если в верстке все в кучу.
Ну и в основном делаю поддержку почти всех браузеров (IE10+).
Ответьте, пожалуйста, на эти 2 вопроса, и подскажите — куда дальше развиваться в этом деле?
P.S.: Без Emmet’a я верстал первые пару месяцев, когда обучался. Потом всегда только он. Забыл его упомянуть, т.к. считаю его дефолтным инструментом, наравне с редактором 🙂
5 полезных онлайн инструментов для веб-верстальщика
Решил поделиться с читателями информацией о нескольких интересных онлайн инструментах, которые, возможно, будут полезны веб-верстальщику в его работе. Как известно одним из языков, с которым веб-верстальщику приходится сталкиваться каждый день является CSS. Поэтому описанные в заметке онлайн-сервисы, предназначены для работы с CSS.
Итак, вот, собственно и они:
Zurb-inliner
http://zurb.com/ink/inliner.php — позволяет преобразовать стили из блока(<style>) в разделе <head> документа в инлайновые.
Как работать с онлайн-инструментом Zurb-inliner?
- Копируем весь код сверстанного выпуска рассылки (кроме строки с DOCTYPE). На момент копирования стили рассылки должны быть размещены в разделе <head>.
- Заходим на страницу http://zurb.com/ink/inliner.php и вставляем код в текстовое поле.
- Нажимаем кнопку «Convert email» и получаем сгенерированный код с инлайновыми стилями и DOCTYPE.
- Копируем результат и вставляем в новый файл. Сохраняем его. Теперь выпуск рассылки можно отправлять.
CSS3 Generator
http://css3generator.com/ — инструмент генерирует CSS-код, учитывая различные браузеры, на основе данных, введенных посетителем.
Инструмент поддерживает современные правила CSS3: text-shadow, box-shadow, transition, transform и другие.
Как работать с CSS3 Generator?
Выбираем CSS-правило из представленных на странице, затем вводим в поля формы нужные нам значения и получаем сгенерированный CSS, который можно поместить в файл стилей вашего сайта.
Ultimate CSS Gradient Generator
http://www.colorzilla.com/gradient-editor/ — инструмент помогает создать CSS3-градиенты.
Как работает Ultimate CSS Gradient Generator?
В отличии от предыдущего инструмента, взаимодействовать с которым проще простого, в Ultimate CSS Gradient Generator настроек значительно больше.
Работу с этим инструментом можно разделить на 2 варианта:
• во-первых, вы можете использовать уже существующие «заготовки» градиентов,
• во-вторых можете создать свой градиент, используя свои значения цветов и их прозрачности.
Очень похоже на работу с градиентами в Photoshop. В обоих случаях, результат вы сможете скопировать из текстовой области с заголовком CSS.
TinyPNG
https://tinypng.com — оптимизирует графические изображения в формате .png, уменьшая их размер и ускоряя загрузку.
Как работает онлайн-инструмент TinyPNG?
Здесь вообще все просто — перетаскиваете .PNG-файл в указанную область на странице, инструмент производит оптимизацию изображения и чуть ниже появляется ссылка для загрузки оптимизированного изображения.
Code beautifier
http://www.codebeautifier.com — форматирует и сжимает CSS-код для уменьшения размера файла и оптимизации его загрузки.
Как это работает?
На странице сайта Code beautifier расположены текстовая область и текстовое поле. В них можно вставлять CSS-код или путь к CSS-файлу соответственно. Далее нужно выбрать тип сжатия и при желании «поковыряться» с другими настройками. Для завершения процесса, нужно нажать кнопку “PROCESS CSS” и получаем отформатированный и сжатый CSS-код.
Возможно, представленные в заметке онлайн инструменты, помогут читателю в его работе.
Если вы используете какие-нибудь интересные онлайн инструменты, не описанные в этой заметке, можете оставить информацию о них в комментариях к заметке.
Инструменты верстальщика | Очередной блог фрилансера
Не сказать что слишком долго, но определенное время я размышляла, какая же запись должна быть следующей. Можно было бы сразу пуститься во все тяжкие, и начать рассказывать всем, о том над чем я работала вчера, на прошлой неделе, или месяц назад. Но потом я подумала, что наверное разумнее будет начать рассказывать сначала, так будет понятнее тем, кто мало знаком с веб-разработкой, и конкретно версткой, и спокойнее мне, потому что все по порядку. Именно поэтому во второй статье я, особо не претендуя на оригинальность, расскажу о некоторых интересных инструментах, используемых мной часто и с удовольствием.
Не буду долго и нудно рассуждать о том, как важен выбор правильных инструментов разработки, и так ясно что без хорошего инструмента, не выйдет хорошая работа. От себя могу добавить, что уже почти бросила верстать, пока мне случайным образом не попалась замечательная во всех отношениях среда разработки под названием Aptana Studio.
Очень удобный интерфейс, подсветка синтаксиса, css и js подсказки, todo-лист, проверка валидации кода на лету, встроенный ftp-клиент, возможность устанавливать различные плагины, и еще ко всему сказанному, пользоваться ей можно абсолютно бесплатно. Скачать можно здесь
Инструмент без которого лично я не могу обходится это фаерфокс, с плагином Firebug. С его помощью большинство проблем с версткой (особенно чужой) решаются за несколько минут. Фаербаг создан прежде всего для тех, кому лень разбираться в чужом, часто очень запутанном коде. Пользоваться очень просто, по клику на любом элементе, мы получаем весь css-стиль применяемый к нему. Скачать можно прямо через фаерфокс в установке дополнений. А для горячо любимого мною браузера IE, есть похожее по функциональности дополнение Developer Toolbar
И совсем недавно я стала использовать систему контроля версий Mercurial TortoiseHg для своих проектов. Очень полезное приложение, позволяющее хранить все версии выполняемой работы, которые вы укажете. Причем всегда можно откатить изменения до предыдущей версии, посмотреть чем разница между сохраненными версиями, хранить историю версий только для конкретных файлов, синхронизировать репозитории и много всего другого. Весь этот функционал, после установки, доступен по правому клику мыши на нужной папке. Очень легко пользоваться, и в работе просто незаменимая вещь. Скачать можно отсюда
Как видно список не такой уж большой, но функциональный. Возможно чуть позже появится что-то еще интересное, тогда я обязательно добавлю его в список моих любимых инструментов.
Инструменты верстальщика
О верстке мы уже вспоминали, а вернее, говорили о тех сайтах, которые помогут нам ее изучать. Пришло время поговорить и о инструментах, которые нам помогут в повседневной работе над версткой сайтов.
Таких инструментов придумали и разработали большое множество. Забегая вперед, скажу, что их условно делят на две большие группы — визуальные и текстовые редакторы. Визуальные редакторы позволяют править код без особого знания html. Текстовые редакторы — это, фактически, потомки доброго «Блокнота» — даже если в них имеется подсветка синтаксиса, знание кода просто необходимо. В этой заметке будем разбирать некоторые популярные и проверенные в работе инструменты.
Лично я пользовался и визуальными, и текстовыми редакторами, но в результате остановился на последнем варианте. Визуальный редактор типа
Чаще всего для верстки и правки кода использую бесплатный текстовый редактор Notepad++. Загрузить его можно с официального сайта команды разработчиков, устанавливается он также просто и работает довольно шустро. Редактор позволяет осуществить подключение к локальному/удаленному серверу, имеет простую подсветку синтаксиса и настолько же прост в настройке и использовании. Несмотря на привычку, в ближайшее время хочу попробовать сменить редактор на NetBeans. Он также имеет приличный функционал и также абсолютно бесплатен, как Notepad++.
Кроме редактора кода важно не забыть установить/научиться использовать плагин Firebug для Mozilla Firefox. Этот плагин позволяет разобрать почти любую веб-страницу до мелочей. При этом он позволяет существенно упростить процесс отладки страницы прямо в окне браузера.
Конечно, в Chrome это можно сделать, воспользовавшись пунктом меню «Анализировать элемент». Но лично я провожу 90% работы по верстке в Mozilla и только 10% — в других браузерах и эмуляторах браузеров, поэтому Firebug и еще раз Firebug. Кроме Firebug не лишним будет установить дополнение Web Developer — оно позволит «не закрывая браузер» определять размеры блоков, картинок, определять валидность кода и делать многое другое.
Естественно, сам процесс верстки сейчас трудно представить без обработки изображений. Лично я для этих целей использую Adobe Photoshop, рисуя там макеты и набрасывая дизайн сайта. Но в последнее время стараюсь резать макет в Photoshop все реже, применяя эффекты CSS и jquery — как для создания кнопок, так и графических элементов сайта.
Для того, чтобы Ваш сайт был кроссбраузерным (одинаково отображался в разных браузерах), не лишним будет использовать при тестировании различные версии предустановленных браузеров или специальные программы-эмуляторы. Последних в сети большое множество, причем как платных, так и бесплатных.
В качестве бонуса к данной заметке делюсь списком инструментов для более серьезного кодинга — на языке PHP.
Бонус 1: Список полезных инструментов для php разработчика
Бонус 2: Sublime Text — отличный редактор для веб-мастера