Как стать автором
Обновить

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

О некоторых плагинах знал, но лень было ставить. Теперь у меня полный набор. Спасибо.
Не понял прикола с домашним заданием. Сложно положить индивидуальный background в угловые ячейки?
Она должна быть универсальной. Прописанной в css. Так-то собрать не сложно.
А какая универсальность может быть у угловых ячеек? Они всегда будут в углах, они не будут меняться друг с другом. Может вы что-то не договариваете, но по тем условиям, что есть, ничего сложного не вижу.
Как в css прописать стиль конкретно для угловых ячеек. Там нельзя этого определить. Либо стиль на все ячейки, либо ни на какие. в Css3 есть :last-child например, это же ближе к истине.
Ах вы про это? А зачем такие загоны, я имел ввиду, что у каждой будет свой класс, неужели это сложно сделать.
> А зачем такие загоны
Во! это и нужно было знать. Голосование вроде в посте проводить нельзя, но было бы интересно. Обычно дизайнеры видят больше, по своему избирательному вниманию и ценят мелочей больше. А если монитор с завышенным контрастом, то многие даже не поймут о чем идет беседа.
Решение от дизайнера m_d:

jsfiddle.net/LCBFk/

Цитата:
>> Косяком является то, что нужно обернуть в div. Но если отказаться от теней, то получится вполне фэншуйный вариант, вместо div можно использовать псевдокласы ::after и ::before.

P.S. Мопед не мой, я просто разместил объяву.
tr:first-child td:last-child { background: url()}
и варьяции
Там тени не на последних ячейках и подобное решение будет ограничивать минимальные размеры угловых, чтоб не срезался фон.
Полностью согласен. Даже если использовать свойства CSS3, не во всех браузерах данная комбинация будет работать. А с уникальными классами ячеек — наверняка.
Почему бы не положить таблицу в div, которому задать тень в углу? Правда, вопрос фактуры самих ячеек не решается, но, возможно, удастся пошаманить с position и z-index?
Multiple backgrounds для всей таблицы + css3pie для IE
хардкорный вариант
кладём таблицу в 4 дива, у каждого в своём углу тень.
не кактит. там разный фон у заголовков и ячеек, размер заголовков зависит от текста
Я бы ещё предложил Firecookie(удобная работа с печеньками), CSS Usage(неиспользуемы на странице css стили), User Agent Switcher(смена информации в заголовках о UserAgent) и Quick Locale Switcher(смена информаии о языковых установках).
спасибо, пойду добавлю.
Набор стандартный, но пост очень круто оформили )
Разработчики со стажем находят для себя новое. Для меня он такой же стандартный, но он до сих пор ни кем не определен. Вот я и попробовал в этом все собрать, благо место позволяет.
НЛО прилетело и опубликовало эту надпись здесь
Ну во-первых это далеко не первый пост на Хабре про набор веб-девелопера.

А во-вторых скорее всего минусуют за «Павлика» :)
НЛО прилетело и опубликовало эту надпись здесь
Сейчас пост читают все подряд, и кому не интересен — те минусуют. Думаю скоро подтянутся web-девелоперы и исправят ситуацию.
Впрочем уже исправили… Забыл посмотреть на время публикации и ее поточную оценку.
НЛО прилетело и опубликовало эту надпись здесь
Анонимность, вместе с определенной властью и безответственностью — гремучая смесь :)
Та я вообще не понимаю кто тут голосует — 300 коментариев из которых всего пару отрицательных, а карма всегда ниже нуля и медленно сползает всегда..)
Нравится — голосуют за комментарий. Не нравится — плюют в душу карму. Элементарно, Ватсон!
Сделать доброе дело — лень, а вот гадости всегда готовы.
НЛО прилетело и опубликовало эту надпись здесь
jquery
$('tr:first th:first').css({});
и т.д., а за подборку спасибо!)
Не хочется скриптом но все равно спасибо за вариант)
Самый годный вариант
Копипастишь CSS из фаербага в Notepad++?

Такой подход в принципе не годится, потому что Firebug выкусывает все не-файерфоксовские стили. Не говоря уже о том, что нарушает и пробелы, и последовательность объявлений правил. Как работа с прекцией стилей на Firefox — да, отлично работает.
Чем можно посмотреть event-ы у элементов, если они добавляются с помощью JS после загрузки страницы?
НЛО прилетело и опубликовало эту надпись здесь
Если это jQuery (и jQuery не древняя): $('#element').data('events')
Оформление и стиль подачи порадовали конечно )

Из того, что я бы еще добавил:
Fireshot (или его аналог) — довольно часто надо делать скриншоты области экрана, чтобы показать или клиенту, или ПМу или еще кому
Console² — Апгрейд к JS-консоли
firefontfamily — дополнение к Firebug, подсветка акутального font-family
dummy lipsum — быстрая генерация lorem ipsum текста
Кстати, для скриншотов есть стандартная утилита в Windows 7 (я подозреваю, что не все сидят на винде, но многие). Называется Snipping Tool. Вызвать можно начав набирать в пуске в строке поиска.
Да, полезная штука, но на сколько я помню, там можно только сохранить скриншот себе файлом или выслать кому-то на мыло. Если бы она хостила этот скриншот куда-нибудь в облако и давало на него короткую ссылку — цены бы не было.
Могу предложить как вариант программку для винды jetscreenshot.com/demo-video.php.
1. Делаем скриншон (програмка вешается на любой хоткей, например на клавишу принтскрин)
2. Открывается рабочая область, где мы можем рисовать анотации (стрелочки всякие)
3. Нажимаем расшарить и скриншот автоматом заливается на фтп сервер. (на какой указывается в настройках).
4. Урл к скриншоту уже хранится в буфере обмена. Осталось только вставить его куда нужно.
Очень удобно
Это делает кроссплатформенный сервис pix.am
Ну, это делает куча сторонних сервисов, просто было бы круто, если бы нативные средства ОСи могли бы так уметь )
а за ссылку спасибо, надо попробовать и этот
Удобная штука. Но 1 момент смущает: можно сделать как-нибудь, чтобы URL в буфер копировался, а не открывался в браузере?
Я лишь пользователь, этот вопрос нужно задать их разработчикам, которые, к слову, должны быть на хабре, если я не ошибаюсь.
И, кстати, в версии для Мака скриншот не открывается сразу, а появляется лишь уведомление, содержащее url, при клике на котором и происходит открытие.
Воспользуйтесь petromi.com
Там еще и простенький редактор есть. Впрочем, он почти везде есть.
я бы таблицу саму трогал по-минимуму, а обернул бы ее в див, и там бы спозиционировал абсолютнно блоки с декорами краев.
Добавлю еще MeasureIt — совершенно незаменимая вещь. Кстати, есть и для Хрома.
можете удалять его так как есть аналог в веб девелопере.
«Панель Web Developer» -> «Разное» -> «Показать линейку»
Есть более безопасный, но ограниченный способ передавать изменения стилей из фаербага: плагин для всех IDE от JetBrains — CSS-X-Fire. При изменении стилей в фаербаге в IDE появляется кнопочка для принятия изменений.
в статье есть ссылка на это)
Простите, был слеп :)
А ещё Firebug Autocompleter и FireStorage.
Наш верстальщик предлагает такое решение
«обернуть таблицу в div и в ней с помощью css3 разместить сразу 4 фоновых изображений с соответствующим позиционированием в процентах (css3 поддерживает множество фоновых картинок сразу в одном диве) плюс также и общий цвет фона.»
Для работающих с ExtJS есть прекрасное расширение Illuminations: отображает объекты ExtJS, со всеми их атрибутами, методами, событиями и т.д.
В чём противоречие?
в том что я идиот)
так лучше?
>Это Джастин Бибер в мире попсы

Кто это? Википедия подсказывает, что это какой-то подросток, взятый с ютуба в 2008-м. Куча каких-то немузыкальных наград. Он петь-то умеет или только улыбается на камеру?
Он сейчас как Ранетки в остальном мире.
Дубль два — кто такие Ранетки?

Телевизор не смотрю, сорри :-) А по радио такого почему-то не крутят. Хотя я не ограничиваюсь какими-то радиостанциями, а скачу по FM-диапазону туда-сюда, избегая рекламы и диджейской болтовни. Но ни Ранеток, ни этого Бибера не слышал — возможно, повезло?

Ладно, извиняйте за затянувшийся оффтопик, просто фраза из поста зацепила внимание.
Странный ты.
Завидую. Мне про Ранеток рассказал знакомый подросток, который их слышал у соседей через стену. Мне хватило; сделайте меня расслышать это.
Помимо Firepicker и Stylizer есть еще, как минимум, ColorZilla. Удобная такая пипетка.

Кстати, в том же духе, еще можно размеры линейкой замерять — MeasureIt.
После того, как стал на винде пользоваться PickPick для снятия скриншотов — удалил эти плагины
в PickPick они встроены и пользоватся можно ими не только в браузере
А разве вкладка Net в Firebug не показывает скорость загрузки и кол-во запросов? Советов правда не выдаёт.
так в firebug закладка «сеть», помоему полностью поглощает возможностями.
как раз уже наполовину подготовил пост про связку оного с еще одним плагином, тут не описанным
Еще полезная штука это ShowIP. Когда рабочих проектов много и они порой размазаны по ряде компов на доменах, которые не всегда корректно резолвятся или же что-то даже крутиться локально, нужно быть уверенным, что смотришь именно тут, что правишь в редакторе.
Firebug это нативно поддерживает на вкладке «Сеть» с августа 2011. (Открыть нужный столбец в настройках.)
Я очень люблю и постоянно использую расширение CSS Reloader, у которого только одна функция перезагружать CSS сайта без перезагрузки страницы. Очень удобно перезагружать только CSS когда
1) вся страница долго грузится (ну и вообще CSS грузится почти всегда намного быстрее чем вся страница).
2) когда менялся HTML (DOM) в Firebug, и нажатие F5 бы удалило эти изменения.
3) когда нужно потестировать какое-то состояние страницы, к которому нужно дойти за несколько кликов после F5 (типа открытый список, форма с ошибками, модальное окно).
Да, забыл еще 2 полезных расшрирения: JSONView (JSON ответ от сервера будет не только раскрашен, но можно и сворачивать/разворачивать вложенные структуры) и User Agent Switcher для быстрого переключения user agent (больше нужен что бы посмотреть как реагирует сервер на разные агенты, в духе вывода надписи «обновите браузер»).
Обидно за сравнение бибера с Firebug.
еще есть хорошая штука livereload, полезна при верстке для автоматической перезагрузки страницы в браузере после изменения файлов, к аддону FF нужно еще запустить сам gem livereload в корне сайта, есть модули для популярных цмс, для друпал точно есть, с удовольствием им пользуюсь.
до него, кстати, использовал подобную штуку moz_repl, тоже гем+аддон, но он не прижился, надо было шорткат в редакторе шмякать чтоб в браузере файлы подгрузить
У меня в хроме работает, а в файрфоксе последнем нет. Должно?
должно
Спасибо, попробую посмотреть в чем может быть дело
Из всего вышеперечисленного я не пользовался только Firepicker'ом. Colorzilla как-то всегда устраивала, сейчас поставлю и сравню.
В моей коробочке еще Yslow и HTML Validator

Последний правда пока как-то не так хорош для HTML5, как для более старых версий
он еще не слабо тормозить должен браузер.
Мой вариант: http://jsfiddle.net/z8TNu/

Не удалось избавиться от обертки вокруг таблицы :(, но нужен только 1 дополнительный div.
Кажется, вы куда-то не туда дали ссылку.
Ох, забыл сохранится :( И вариант только на домашней системе.
Вариант без дополнительных элементов. Только таблица:

http://jsfiddle.net/p3nej/5/

Минус — добавляется граница, которую можно убрать отрицательным отступом.
огромное спасибо за cssUpdater
web developer использую года три точно. Без него было бы туго.
Да как же я раньше жил без половины этих аддонов?! Автору большое спасибо!
Ещё добавлю HTTPFox. Это простой аналог HTTPWatch. Конечно можно и в FireBug смотреть, но в HTTPFox удобнее.
А я без PixelZoomer теперь не могу верстать.
Спасибо! А то постоянно мучаюсь с проверкой, если ли там 1 пиксель разницы или нет
А есть подобно cssUsage только для html?
html в firebug не очень удобно писать. Подсветки нет. Часто html из скриптов делается, лучше уж dreamviewer в этом случае.
Я бы еще добавил MeasureIt для измерения деталей на страничке и Flagfox. Flagfox кроме приятной возможности видеть флаг страны в которой находится сервер открытой странички дает быстрый доступ к полезным функциям как whois, Ip ресурса, страничка ресурса на Alexa и многое другое
Линейка есть в web developer, а флаги в веб-разработке как-то странно… Да и хуиз…
Спасибо. Только вчера я обновил шапку. Счел необходимым добавить новую информацию.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Публикации