Подборка html/javascript/css инструментов и библиотек от SmashingMagazine

http://coding.smashingmagazine.com/2011/06/10/useful-html-css-and-javascript-tools-and-libraries/
  • Перевод
Разработка вебинтерфейсов дело не самое легкое. Причем начать вроде бы несложно, а вот добиться совершенства поистинне проблематично. Уж очень многое необходимо учесть. Просто масса настроек и ньюансов, в которых легко запутаться и сделать что-то не так. К счастью, разработчики и дизайнеры склонны упрощать этот нелегкий труд и постоянно изобретают всяческие инструменты позволяющие сделать больше и лучше за то же самое время, а главное не погрязнуть в мелочах и состредоточиться на чем-то более важном.

Множество удобных инструментов, найденных командой популярного онлайн журнала SmashingMagazine, приводится под катом


Инструменты для CSS и HTML



HTML Email Boilerplate
Сайт, содержащий немалое количество шаблонов и примеров для создания сообщений отправляемых по электронной почте позволяющих избежать большинство проблем с отображением этих сообщений в популярных клиентских приложениях.
image

Initializr
Генератор HTML 5 шаблонов. Выбираете образец, сырой js или jQuery, указываете уровень совместимости вашего будущего приложения с устройствами, серверные настройки и получаете готовый шаблон, с которого можно начинать ваш проект.
image

Layer Styles
Простой и достаточно эффективный инструмент для создания кроссбраузерных CSS эффектов (таких как тень, фон, границы со скругленными углами). Имеет пользовательский интерфейс похожий на аналогичные инструменты в графических редакторах.
image

Mobile Boilerplate
Шаблон для создания вебприложений для широкого диапазона мобильных устройств, начиная от самых современных смартфонов и заканчивая старенькими моделями на Blackberry, Symbian и IE Mobile.
image

Kotatsu
Простенький конструктор HTML таблиц. Кому интересен аналогичный генератор списков можно взглянуть еще и сюда.
image

Vogue
Локальный сервер, основанный на Node JS, позволяющий избежать проблемы постоянной очистки кеша браузера при правке css.

LiveReload
Инструмент автоматически применяющий изменения в CSS/JS в таких браузерах как Safari и Chrome и перезагружающий страницу целиком, если изменился HTML. Можно также взглянуть на альтернативный инструмент Live.js
media.smashingmagazine.com/uploads/2011/06/useful-tools-141.jpg

css-x-fire
Инструмент для редактирования CSS правил в удобном IDE и без необходимости перезагрузки страницы браузера в ходе отладки.
image

Ffffallback
Инструмент для тестирования ваших вебприложений на предмет совместимости с различными наборами шрифтов.
image

Less-Boilerplate
CSS Boilerplate переписанный на LESS
image

Needle v0.1a1
Инструмент для тестирования верстки. Делает скриншоты и позволяет их сравнивать их с другими скринштами. Также предоставляет инструменты для тестирования рассчитанных CSS правил, а также позиций HTML элементов на странице
image

inuit.css
Очередной CSS фреймворк, в котором автор попытался собрать лучшие накопленные им практические приемы в одном файле.

Spritemapper
Генератор CSS-спрайтов. Объединяет большое количество изображений в одно и генерирует CSS правила для вывода их по отдельности. Этот прием уменьшает количество соединений с сервером необходимое для загрузки страницы, что может уменьшить общее время этой самой загрузки.
image

CSSsitemap System
Интересный проект по созданию карты сайта на css
image

Normalize.css
Результат работы Джонатана Нила и Николаса Галлахера над reset.css. Вместо традиционного сброса всех параметров по умолчания браузеров они предлагают сбрасывать только те, которые мешают использованию одинаковых CSS правил для всех браузеров, а другие удобные умолчания — сохранить.
image

Holmes
Набор CSS правил позволяющий подсветить на странице блоки с сомнительной, ошибочной или неустойчивой версткой. Предлагается использовать с букмарклетом.
image

Zen Coding
Подключаемый модуль для большого количество редакторов кода, предлагающий ускорение набора и редактирования CSS правил с помощью специальных сокращений.

CSS Stress Testing and Performance Profiling
Инструмент для тестирования производительности и профилирования CSS.

CSS Crush
PHP препроцессор для CSS позволяющий избежать необходимость использования вендорных префиксов, а также некоторых других многословных конструкций при создании CSS правил. Можно взглянуть еще и на <a href="PCSS">этот похожий инструмент
image

CSSPrefixer
Инструмент автоматизации процесса добавления вендорных префиксов в CSS.
image

JavaScript-инструменты



Modernizr 2
Вторая версия замечательного фреймворка позволяющая использовать прелести HTML5 и CSS3 без риска потери пользователей не очень свежих браузеров.
image

yepnope.js
Библиотека позволяющая подгружать только нужные на данной странице js файлы.
image

FitText
Модуль для jQuery, гибко меняющий размеры шрифта для удобного размещения одного и того же текста на широком диапазоне устройств от небольшого экрана мобильного устройства до профессионального тридцатидюймового монитора.
image

jQuery Waypoints
Модуль позволяющий выполнить определенный код в момент когда пользователь проскролит страницу к определенному элементу.
image

jQuery Plugin Boilerplate
Удобная обертка для написания подключаемых модулей к jQuery

ligature-js
Фунция добавляющая типографические лигатуры в текст
image

Placeholder jQuery Plugin/Polyfill
Модуль для поддержки HTML5 атрибута placeholder в старые или не поддерживающие это свойство браузеры.

StronglyTyped
Попытка максимально кроссбраузерно добавить более строгую типизацию переменных в javascript
image

Kaffeine
Синтаксический сахар для написания сложных javascript-приложений. Компилируется в обычный javascript код.
image

Crossroads.js
Механизм вызова определенных js функций в зависимости от определенных URL похожий на аналогичные механизмы в таких серверных фреймфорках как Rails, Pyramid, Django, CakePHP, CodeIgniter и т.д.
image

Hivelogic
Библиотека позволяющая относительно безопасно (в плане разбора спамерскими программами) публиковать e-mail на вашем сайте.

JavaScript Garden
Анализатор js кода позволяющий еще до стадии публикации кода устранить часто возникающие ошибки в использовании языка javascript у неопытных пользователей.
image

Syntaclet
Букмарклет для подсветки синтаксиса js на html страницах
image

Bookmarkleter
Инструмент для конвертации js кода в букмарклет с возможностью переформатирования (удаления лишних пробелов, заменой юникодных символов и т.д.)
image

Сетки



The JavaScript Grid
Генератор сетки с простым механизмом просмотра через закладки.
image

Grid Calculator
Удобный конструктор сетки с импортом в Adobe Illustrator или Adobe Photoshop
image

GridCalc
Калькулятор возможных вариантов сетки при заданных размерах ширины страницы, ширины блока и промежутка между блоками, а также генератор кода для выбранных вариантов.

Modular Grid Pattern
Генератор сеток для графических редакторов. Имеется также соответствующее расширение для Photoshop
image

Susy
Rails фреймворк позволяющий создать сетку, максимально гибко подстраиваясь под вашу разметку, дизайн и пожелания.
image

Griddle.it
Простой и удобный механизм позволяющий сгенерировать фон страницы, на котором будут нанесены линейки для выравнивания элементов дизайна сайта.
image

Ну и еще немного


ASCII Pronunciation Rules for Programmers
Сайт — справочник по названиям ASCII символов на английском языке.
image

PS: В перевод включены не все описанные в оригинальной статье инструменты — некоторые просто не работали, некоторые показались мне совершенно неуместными здесь. Но и того, что перевел получилось очень немало, так что респект тем, кто добрался до этих строк :-)
  • +121
  • 18,3k
  • 19
Поделиться публикацией

Комментарии 19

    0
    Что то ушло в закладки, сенкс.
    • НЛО прилетело и опубликовало эту надпись здесь
      • НЛО прилетело и опубликовало эту надпись здесь
          +2
          Добавить-то много чего можно. Но во-первых перевод, а во-вторых и так что-то уж очень много букв получилось.
          +3
          Когда искали для своего проекта генератор спрайтов — нашли SmartSprites. Посмотрел сейчас Spritemapper, по использованию похожи, но SmartSprites чуть более функционален, например позволяет в одном файле разделить картинки на несколько спрайтов.
            0
            А я много картинок в спрайты собираю прям в Гимпе, плагин G'MIC, пункт «Layers to Tiles». Кстати, плагин, как и все остальные, запросто ставятся из репов Убунты.
            +1
            спасибо, весьма полезный пост получился. Единственное, рановато обрадовалась, увидев layerstyles.org. Интерфейс, схожий с фотошопом обманул слегка
              0
              Вроде справляется. Или хотелось Photoshop online?
                0
                думала, что можно некоторые настройки слоя с Photoshop перенести сразу в css формат (сейчас как раз верстаю макет и там много drop shadow), но что-то не совпадает
                • НЛО прилетело и опубликовало эту надпись здесь
                    0
                    вот я и размечталась, что фотошопные тени в кссные переводятся на этом сервисе ;)
              0
              Ещё как и Kaffeine есть CoffeeScript.
                +1
                хм… я конечно не сторонник верстки в блокноте, но я просто не признаю различные генераторы…

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

                Генератор таблиц? Генератор списков?
                Может еще кнопку «Заверстать»?
                • НЛО прилетело и опубликовало эту надпись здесь
                    0
                    Хочу быстро сделать табличку в html и настроить сразу в ней через визуальный редактор все свойства. Есть такой в природе? Нет.
                    Конечно я могу все написать, но визуально все сделал бы быстрее.
                    Самое лучшее что я видел для таблички www.innovastudio.com/my-online-html-editor.aspx
                      0
                      MS Word?
                  • НЛО прилетело и опубликовало эту надпись здесь
                      +1
                      Вот еще css3please — часто использую в работе, радует rgba для IE.
                        0
                        у JavaScript-Garden есть перевод shamansir.github.com/JavaScript-Garden/

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

                        Самое читаемое