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

jsfiddle.net/LCBFk/

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

P.S. Мопед не мой, я просто разместил объяву.
0
Там тени не на последних ячейках и подобное решение будет ограничивать минимальные размеры угловых, чтоб не срезался фон.
0
Полностью согласен. Даже если использовать свойства CSS3, не во всех браузерах данная комбинация будет работать. А с уникальными классами ячеек — наверняка.
+3
Почему бы не положить таблицу в div, которому задать тень в углу? Правда, вопрос фактуры самих ячеек не решается, но, возможно, удастся пошаманить с position и z-index?
+4
хардкорный вариант
кладём таблицу в 4 дива, у каждого в своём углу тень.
0
не кактит. там разный фон у заголовков и ячеек, размер заголовков зависит от текста
+2
Я бы ещё предложил Firecookie(удобная работа с печеньками), CSS Usage(неиспользуемы на странице css стили), User Agent Switcher(смена информации в заголовках о UserAgent) и Quick Locale Switcher(смена информаии о языковых установках).
0
Разработчики со стажем находят для себя новое. Для меня он такой же стандартный, но он до сих пор ни кем не определен. Вот я и попробовал в этом все собрать, благо место позволяет.
+4
Мне вот интересно, пост так интенсивно сливают из-за того, что «набор стандартный»?

Блин, ну что за люди. Кто-то старался, написал немаленькую, нормально оформленную и полезную статью — скажите человеку спасибо, всеми возможными способами. Но нет, количество голосов «за» совсем немного превышает количество негативных оценок. WTF?

Продолжайте в том же духе, отбейте людям желание тратить время на написание статей. А потом поноем на сторонних ресурсах, что хабр не торт.
0
Ну во-первых это далеко не первый пост на Хабре про набор веб-девелопера.

А во-вторых скорее всего минусуют за «Павлика» :)
+1
«Во-вторых» легко решается открытым высказыванием своего мнения в комментариях к посту, или в приватной переписке с автором. Да, это чуть сложнее, чем ткнуть ↓, но если мы в будущем хотим видеть здесь интересные публикации — очевидно, что таки стоит в такие моменты чуть поднапрячься.

А «во-первых» как-то прошло мимо моего внимания, например. И я почти уверен, что не один такой здесь.
0
Сейчас пост читают все подряд, и кому не интересен — те минусуют. Думаю скоро подтянутся web-девелоперы и исправят ситуацию.
0
Впрочем уже исправили… Забыл посмотреть на время публикации и ее поточную оценку.
+1
Да, некоторым очень сложно заставить себя просто пройти мимо.

А ситуацию и правда исправили. Когда я написал первый свой комментарий, оценка была +5 / –4 (причем вместе с моим голосом, без него баланс был бы нулевым при 8 голосах).

Было бы оооочень интересно посмотреть статистику голосов по пользователям. Ну, например, «guessss_who за год поставил публикациям 500+ и 38–». У меня такое впечатление, что некоторые личности не отдают себе отчет в последствиях своих действий, когда голосуют за рейтинг публикаций или карму пользователей. (
+3
Анонимность, вместе с определенной властью и безответственностью — гремучая смесь :)
+2
Та я вообще не понимаю кто тут голосует — 300 коментариев из которых всего пару отрицательных, а карма всегда ниже нуля и медленно сползает всегда..)
+3
Нравится — голосуют за комментарий. Не нравится — плюют в душу карму. Элементарно, Ватсон!
Сделать доброе дело — лень, а вот гадости всегда готовы.
0
* Комментарий выше не был адресован конкретно вам, это было только развитие риторического вопроса насчет рейтинга публикации.
+5
Копипастишь CSS из фаербага в Notepad++?

Такой подход в принципе не годится, потому что Firebug выкусывает все не-файерфоксовские стили. Не говоря уже о том, что нарушает и пробелы, и последовательность объявлений правил. Как работа с прекцией стилей на Firefox — да, отлично работает.
+2
Чем можно посмотреть event-ы у элементов, если они добавляются с помощью JS после загрузки страницы?
UFO landed and left these words here
+2
Оформление и стиль подачи порадовали конечно )

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

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

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

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

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

Последний правда пока как-то не так хорош для HTML5, как для более старых версий
0
Ох, забыл сохранится :( И вариант только на домашней системе.
+1
Вариант без дополнительных элементов. Только таблица:

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

Минус — добавляется граница, которую можно убрать отрицательным отступом.
+1
Да как же я раньше жил без половины этих аддонов?! Автору большое спасибо!
0
Ещё добавлю HTTPFox. Это простой аналог HTTPWatch. Конечно можно и в FireBug смотреть, но в HTTPFox удобнее.
0
Спасибо! А то постоянно мучаюсь с проверкой, если ли там 1 пиксель разницы или нет
0
html в firebug не очень удобно писать. Подсветки нет. Часто html из скриптов делается, лучше уж dreamviewer в этом случае.
0
Я бы еще добавил MeasureIt для измерения деталей на страничке и Flagfox. Flagfox кроме приятной возможности видеть флаг страны в которой находится сервер открытой странички дает быстрый доступ к полезным функциям как whois, Ip ресурса, страничка ресурса на Alexa и многое другое
0
Линейка есть в web developer, а флаги в веб-разработке как-то странно… Да и хуиз…
0
Спасибо. Только вчера я обновил шапку. Счел необходимым добавить новую информацию.
Only those users with full accounts are able to leave comments. , please.