Comments 119
А в stylish это можно запихать?
0
Что это?
0
Изменения CSS
+2
Расширение для Firefox. Аналогично Greasemonkey, только для стилей - позволяет описывать собственные корректировки для любого сайта.
+2
Не имеет смысла. Мы же не внешний вид изменить хотим, а только в учебных целях код переделать, внешне оставив всё как есть.
+2
мне кажется, рассматривая какой то кусок кода в отрыве от всего проекта, говорить что он перегружен, равно как и делать любые другие выводы (кроме как о его работоспособности) не совсем правильно
+3
Человек рассмотрел весь код, но в качестве примера взял лишь небольшую часть. Что же тут неправильного?
0
Я достаточно хорошо знаком с кодом Хабра. Старожилы помнят — почему.
+4
беру свои слова обратно ;)
+1
Честно говоря, я думал дивной версткой занимались именно «Россомахин и Со», а, как оказалось — не вы.
+1
А кто по вашему входит в "Co"?
+1
Вы туда не входите? :) Например, из комментариев в этом топике (и других, лень искать остальные) я сделал вывод, что в работе Максиму помогали и другие люди. Например, он упоминал Flack -a. К сожалению, не знаком лично ни с одним, ни с другим.
0
Не я. Элементарно не успел бы. Проект серьёзный, сложный и чертовски интересный, что, прежде всего, требует кропотливой работы чесов эдак по 8-9 каждый день.
0
Теоретически это можно переверстать definition list'ом. В крайнем случае - списком. А то сплошные дивы и спаны...
0
Можно, конечно.
0
Да вот только в данном случае несколько иная связь между элементами. В равной стпени это всё можно в UL засунуть. Так что я не стал мудрить.
0
http://www.maxdesign.com.au/presentation…
Связь между элементами вполне походит по смыслу для dl, как по мне. Хотя на это есть разные точки зрения - это описано в статье.
Засунуть в ul - это как минимум стоило бы сделать. Divitis/Spanitis - главная проблема новой вёрстки Хабра, - если показательно перевёрстывать, ее тоже стоит затрагивать имхо.
Связь между элементами вполне походит по смыслу для dl, как по мне. Хотя на это есть разные точки зрения - это описано в статье.
Засунуть в ul - это как минимум стоило бы сделать. Divitis/Spanitis - главная проблема новой вёрстки Хабра, - если показательно перевёрстывать, ее тоже стоит затрагивать имхо.
+1
1. Предлагаешь взять юзера за DT?
2. Ну так я показательно и попытался.
P.S. Статью Расса я читал.
2. Ну так я показательно и попытался.
P.S. Статью Расса я читал.
0
Как минимум — UL. Как максимум — DL (не забывай, что одному DT может соответствовать более одного DD):
<dl>
<dt>Комментатор →</dt>
<dd class="blog">Блог /</dd>
<dd class="topic">Тема</dd>
</dl>
<dl>
<dt>Комментатор →</dt>
<dd class="blog">Блог /</dd>
<dd class="topic">Тема</dd>
</dl>
+2
По большому счёту, весь Хабр — это списки. Ныне свёрстанные дивами.
+2
Как использовать DL я хорошо знаю. И использую там, где считаю уместным.
Мне в данном случае не нравится то, что комментатора засунули в DT. Оба DD не описывают комментатора так, как это принято в логике DL, там другая, не столь однозначная, связь. Здесь скорее связь с комментарием, как объектом, являющимся частью топика из такого-то блога, написанным таким-то человеком. Понимаешь? Reverse DL или вроде того.
Мне в данном случае не нравится то, что комментатора засунули в DT. Оба DD не описывают комментатора так, как это принято в логике DL, там другая, не столь однозначная, связь. Здесь скорее связь с комментарием, как объектом, являющимся частью топика из такого-то блога, написанным таким-то человеком. Понимаешь? Reverse DL или вроде того.
0
В спецификации w3c в качестве примера использования DL приводится разметка диалога (там получаются пары "автор" - "реплики"). Тут связь аналогичная, поэтому думаю, что всё в порядке.
0
Не аналогичная. Пользователь оставил комментарий, но не создал блог, в котором он этот комментарий написал.
Ссылка на блог не обязательно описывает пользователя. Вот комментарий — да, описывает. Связи неоднозначные.
Ссылка на блог не обязательно описывает пользователя. Вот комментарий — да, описывает. Связи неоднозначные.
0
Попробую ещё раз сформулировать. Сейчас перечитал своё, и вижу, что могут быть неясности.
Пользователю, как DT, однозначно соответствует ссылка на комментарий, как DD.
Ссылка на блог уже такой связью наделена с большой натяжкой.
Наши комментарии, как и реплики в примере w3c, характеризуют нас, описывают нас. Мы создаём их.
Но как описывает нас ссылка на блог?
Я вижу другую цепочку связей: DT должна быть ссылка на комментарий. Описывается она так: её создал пользователь такой-то, и комментарий является частью такого-то блога. Нарисуй взаимосвязи в виде графа — должно быть наглядно.
Пользователю, как DT, однозначно соответствует ссылка на комментарий, как DD.
Ссылка на блог уже такой связью наделена с большой натяжкой.
Наши комментарии, как и реплики в примере w3c, характеризуют нас, описывают нас. Мы создаём их.
Но как описывает нас ссылка на блог?
Я вижу другую цепочку связей: DT должна быть ссылка на комментарий. Описывается она так: её создал пользователь такой-то, и комментарий является частью такого-то блога. Нарисуй взаимосвязи в виде графа — должно быть наглядно.
+1
Я прекрасно понял, что ты хочешь сказать. :) Просто в таком случае очередность данных будет не той, какой мы ее хотим видеть на странице. Но вариант, который я описал комментарием выше - отличный компромисс.
0
Макс, список определений в широком смысле описывает связь чего-то с чем-то. Определением или описанием DD быть не обязан.
Связь DT и DD с названием блога вполне можно охарактеризовать как «автор такой-то написал в блог такой-то», и потому связь между ними есть. Другой вопрос, что я привёл лишь один из возможных вариантов, и можно сделать чуть иначе, явно увязав также и блог с темой:
Твои мысли понимаю и разделяю — иногда, действительно, хочется поменять местами DT и DD, однако, увы, до тех пор, пока через CSS нет возможности оперировать DOM, так или иначе приходится идти на компромиссы.
Связь DT и DD с названием блога вполне можно охарактеризовать как «автор такой-то написал в блог такой-то», и потому связь между ними есть. Другой вопрос, что я привёл лишь один из возможных вариантов, и можно сделать чуть иначе, явно увязав также и блог с темой:
<dl>
<dt>Комментатор →</dt>
<dd>
<dl>
<dt>Блог /</dt>
<dd>Тема</dd>
</dl>
</dd>
</dl>
Твои мысли понимаю и разделяю — иногда, действительно, хочется поменять местами DT и DD, однако, увы, до тех пор, пока через CSS нет возможности оперировать DOM, так или иначе приходится идти на компромиссы.
+3
P.S. Ну мы ж теоретизируем сейчас, как обычно. Володя уже реализовал, и хорошо реализовал.
+1
Вот, переписал немного на свой манер - глянь. :) http://agafonkin.com/files/etc/habratest…
Ты в своём коде еще забыл о некоторых шорткатах, можешь подправить.
Ты в своём коде еще забыл о некоторых шорткатах, можешь подправить.
+2
Ага. font-ы.
Хорошая работа. Надеюсь, не зря мы тут воду мутим.
Хорошая работа. Надеюсь, не зря мы тут воду мутим.
+2
Спасибо. :)
Цвета еще. К тому же совершенно непонятно, зачем ты прописывал margin-bottom для ссылок. Вертикальные марджины всё равно у инлайн-элементов игнорируются. И line-height если и прописывать, то элементу выше - унаследуют (у меня он в шорткате font).
Цвета еще. К тому же совершенно непонятно, зачем ты прописывал margin-bottom для ссылок. Вертикальные марджины всё равно у инлайн-элементов игнорируются. И line-height если и прописывать, то элементу выше - унаследуют (у меня он в шорткате font).
+1
не зря)
лично я,кое что новое для себя узнал...)
лично я,кое что новое для себя узнал...)
+1
мне этот вариант приглянулся более всего
0
хотя да, имя пользователя не совсем подпадает под причинно-следственную свять term - description
0
Я в подобных случаях стараюсь избегать подобные конструкции, если на то нет какой-то особой необходимости. Слава богу, не часто и случается.
0
Имя пользователя замечательно подпадает под смысл, который есть у dt - не зря dl рекомендуют для оформления диалогов.
В данном случае, хотя ссылка на блог и не связана с автором, но пара блог/комментарий очень неплохо подходит для dd.
В данном случае, хотя ссылка на блог и не связана с автором, но пара блог/комментарий очень неплохо подходит для dd.
0
Кстати, ul даже с точки зрения компактности кода подошёл бы лучше - не пришлось бы на каждую строчку вешать class='entry'.
0
Грамотно, красиво, удобно.
А отступы в начале строк в коде намеренно не ставил или просто авто-форматируется так?
А отступы в начале строк в коде намеренно не ставил или просто авто-форматируется так?
0
- а где он закрывается?
точнее я знаю где он закрывается, но в коде не вижу....)
точнее я знаю где он закрывается, но в коде не вижу....)
+1
черт... я про вот это - <span class="who">
+1
Зачем так усложнять:
можно просто: .live_section a
А так же вместо:
можно: font:12px tahoma,arial;
.live_section span.who a, .live_section .where, .live_section .topic
можно просто: .live_section a
А так же вместо:
font-family:tahoma,arial;
font-size:12px;
можно: font:12px tahoma,arial;
0
профессионально конечно.
но мне кажется опять загоны у вас ..
что за фраза "более читабелен html"?
кто его читать то будет кроме таких же разработчиков? для покрасоваться что ли все это..
посмотрите код http://www.google.com/ , они ни перед кем не красуются,
а стараются для рядового пользователя - максимально ужимают вес html
посмотрите код http://www.gmail.com там вообще нет никакого html кода, так как все построено на javascript движке
заметьте!! что в htm коде google нет кавычек в описании атрибутов (вроде бы какой не профессионализм),т.е на хрен w3c стандарты - работающий продукт и пользователь важнее!
но мне кажется опять загоны у вас ..
что за фраза "более читабелен html"?
кто его читать то будет кроме таких же разработчиков? для покрасоваться что ли все это..
посмотрите код http://www.google.com/ , они ни перед кем не красуются,
а стараются для рядового пользователя - максимально ужимают вес html
посмотрите код http://www.gmail.com там вообще нет никакого html кода, так как все построено на javascript движке
заметьте!! что в htm коде google нет кавычек в описании атрибутов (вроде бы какой не профессионализм),т.е на хрен w3c стандарты - работающий продукт и пользователь важнее!
-7
«За великими нужно следовать в достижениях, подвигах и победах, а не в ошибках, неудачах и поражениях...» ©
+8
Вы, собственно, кто?
И на каком основании говорите о каких-то моих «загонах», да ещё и «опять»?
И на каком основании говорите о каких-то моих «загонах», да ещё и «опять»?
+3
я не о ваших загонах говорю...
просто охарактеризовал этим словом жесткое обсуждение узкоспециализированных вещей на хабре, которое часто встречается..
написал свое мнение о том что это не так важно, а важнее результат
не более..
просто охарактеризовал этим словом жесткое обсуждение узкоспециализированных вещей на хабре, которое часто встречается..
написал свое мнение о том что это не так важно, а важнее результат
не более..
-1
Ну так и чем вас результат не устраивает? Я целенаправленно добивался снижения веса того кода, который и сам, как пользователь, ежедневно часто качаю. При сохранённом в неизменности интерфейсе удалось снизить издержки ну хотя бы трафика, пусть и чуть-чуть — это плохо что-ли?
Да, и пожалуйста, очень прошу: не тычьте в сторону Гугла и его экономии на кавычках. Я инженер, и вопрос следования стандартам для меня давно решён.
Да, и пожалуйста, очень прошу: не тычьте в сторону Гугла и его экономии на кавычках. Я инженер, и вопрос следования стандартам для меня давно решён.
0
да..я просто обще рассуждаю (оправданы ли затраты и т.п)..
вот сохраните эту текущую страницу через save as:
получим: 200 кб js файлов и css таблиц , да сама страница 220 кб
да это и не страшно...
просто если уж подходить к задаче скажем снижения веса станицы,
то тогда уж радикальными мерами:
генерировать комментарии javascript'ом,
убрать левые библиотеки js, если они не нужны на данной странице
сжать код методом переименования ,как сделано у google и т.п
или лучше потратить свое время на более важные вещи в развитии сервиса,
один ваш аватар весит столько же сколько вы сэкономили на сжатие кода ..
я не говорю про баннеры на странице
вот сохраните эту текущую страницу через save as:
получим: 200 кб js файлов и css таблиц , да сама страница 220 кб
да это и не страшно...
просто если уж подходить к задаче скажем снижения веса станицы,
то тогда уж радикальными мерами:
генерировать комментарии javascript'ом,
убрать левые библиотеки js, если они не нужны на данной странице
сжать код методом переименования ,как сделано у google и т.п
или лучше потратить свое время на более важные вещи в развитии сервиса,
один ваш аватар весит столько же сколько вы сэкономили на сжатие кода ..
я не говорю про баннеры на странице
-2
Зачем читать, если не слушаешь и не понимаешь смысла?
0
уж извините, если я и не знаю всех тонкостей верстки это не значит что не могу высказать свое мнение..
сколько я тут не рыпался с комментариями меня только минусуют,
а внятно объяснить никто не может - зачем кроме самовыражения сие чрезмерное увлечение усовершенствованием уже работающего, к тому же чужого кода html
когда привел в пример google - тоже самое нашли какие-то нелепые ошибки
в их верстке, как будто это самое важное в интернет сервисе.
ну заботали все возможные теги и приемы форматирования - отлично,
но нельзя узко мыслить только в рамках своей компетентности, может показаться что вы горы сворачиваете, а на самом деле просто с места на место камешки перекладываете
вот ниже например объяснили(комментарий tom'a) почему у google и скрипты и css не вынесены отдельно - потому что одни http заголовки будут по размеру такие же как само содержание, и 3 запроса на сервер однозначно хуже одного.. и красота тут не причем и нахрен не нужна
сколько я тут не рыпался с комментариями меня только минусуют,
а внятно объяснить никто не может - зачем кроме самовыражения сие чрезмерное увлечение усовершенствованием уже работающего, к тому же чужого кода html
когда привел в пример google - тоже самое нашли какие-то нелепые ошибки
в их верстке, как будто это самое важное в интернет сервисе.
ну заботали все возможные теги и приемы форматирования - отлично,
но нельзя узко мыслить только в рамках своей компетентности, может показаться что вы горы сворачиваете, а на самом деле просто с места на место камешки перекладываете
вот ниже например объяснили(комментарий tom'a) почему у google и скрипты и css не вынесены отдельно - потому что одни http заголовки будут по размеру такие же как само содержание, и 3 запроса на сервер однозначно хуже одного.. и красота тут не причем и нахрен не нужна
+2
Уважаемый, вы к филателистам так же будете подкатывать с вопросами типа "зачем ты фантики всякие собираешь"?
Как говорится, "не ломай кайф, в натуре, а!" :)
По поводу Google - я на 100% убеждён, что такой код обоснован. Просто мы с вами не полностью понимаем, какие там могут быть требования к код (например, защита от парсеров и пр).
Как говорится, "не ломай кайф, в натуре, а!" :)
По поводу Google - я на 100% убеждён, что такой код обоснован. Просто мы с вами не полностью понимаем, какие там могут быть требования к код (например, защита от парсеров и пр).
0
«Вообще нет никакого html-кода»
убило!.. это называется «слышал звон, да не знаешь где он».
убило!.. это называется «слышал звон, да не знаешь где он».
+1
UFO just landed and posted this here
да там у них и правда народ не далекий собрался, я их не в тему в пример привел ..
0
UFO just landed and posted this here
да я в шутку написал, вы что ..
короче не знаю...не верится мне что там необдуманно что либо вообще используется!
я привел google в пример потому что подумал мол хоть на него наезжать не будут...и то не так..
не всегда надо придерживаться общих правил ,
а искать лучшее решения в данной ситуации..
>Да, и пожалуйста, очень прошу: не тычьте в сторону Гугла и его экономии на >кавычках. Я инженер, и вопрос следования стандартам для меня давно решён.
тот же google вытащил на публику механизмы ajax запросов
потому что посчитал что это удобно , а не потому что описано стандартами...
и уже сам w3с стандартизирует этот самый ajax
короче не знаю...не верится мне что там необдуманно что либо вообще используется!
я привел google в пример потому что подумал мол хоть на него наезжать не будут...и то не так..
не всегда надо придерживаться общих правил ,
а искать лучшее решения в данной ситуации..
>Да, и пожалуйста, очень прошу: не тычьте в сторону Гугла и его экономии на >кавычках. Я инженер, и вопрос следования стандартам для меня давно решён.
тот же google вытащил на публику механизмы ajax запросов
потому что посчитал что это удобно , а не потому что описано стандартами...
и уже сам w3с стандартизирует этот самый ajax
0
UFO just landed and posted this here
Ну всё правильно, внутри же нету java script'a :)
0
я считаю что - это совсем не важно и это не
ошибка, это еще раз на примере успешного проекта показывает что качество продукта определяется не вылизанностью кода,
а его работой..
важно понимать на что реально нужно приложить усилия и от этого будет приемущество у продукта, а на что прикладываются усилия только ради собственного интереса..
непрерывно улучшать красоту кода без причины (циклический рефакторинг) - очень серьезная проблема большинства специалистов
ошибка, это еще раз на примере успешного проекта показывает что качество продукта определяется не вылизанностью кода,
а его работой..
важно понимать на что реально нужно приложить усилия и от этого будет приемущество у продукта, а на что прикладываются усилия только ради собственного интереса..
непрерывно улучшать красоту кода без причины (циклический рефакторинг) - очень серьезная проблема большинства специалистов
0
Значит проект хабрахабр должен оставаться с плохим кодом? Так?
+1
=) т.е сейчас код ужасен? и нужно принимать меры?
как я могу ощутить как пользователь что есть проблемы в html коде верстки?
как я могу ощутить как пользователь что есть проблемы в html коде верстки?
0
На мой вопрос пожалуйста дайте ответ.
+1
проект хабрахабр должен совершенствоваться,
если я хочу как пользователь помочь этому процессу, я напишу об ошибке или предложу усовершенствование..
но не буду советовать исправить код на свой манер..
если я хочу помочь как разработчик, то устроюсь на работу в futurico и буду работать в команде,
другого не вижу варианта
если я хочу как пользователь помочь этому процессу, я напишу об ошибке или предложу усовершенствование..
но не буду советовать исправить код на свой манер..
если я хочу помочь как разработчик, то устроюсь на работу в futurico и буду работать в команде,
другого не вижу варианта
0
само обсуждение знающих людей конечно на благо - и обмен опытом и уроки для новичков,
но не в том ракурсе что есть проблема непосредственно у сайта habra и надо ее решать ..проблемы нет
но не в том ракурсе что есть проблема непосредственно у сайта habra и надо ее решать ..проблемы нет
0
Каскадные таблицы и скрипты в коде самой страницы сделаны с той же целью, что и использование лишь одного графического файла — для уменьшения количества запросов на сервер. Гугл это не страница-хомяк школьника Василия Пупкина, которую запрашивают раз в полгода, и то по случайности.
0
UFO just landed and posted this here
Очень сомнительная экономия - для сайтов типа google пользователь обычно делает много загрузок страниц сайта, а однажды запрошенный css файл надолго кэшируется в браузере. На самом деле, стили прописывают в странице не для экономии трафика, а для визуального ускорения загрузки страницы - Яндекс, например, тоже частично выносит стили в код главной страницы, чтобы основной элемент - форма поиска - появилась сразу и в правильном оформлении.
+1
Поставил бы плюсик. Полностью поддерживаю.
0
Да, код, пожалуй, стал лучше... Но внешне и на удобство это никак не повлияло =) Хотя, повлияло на правильность верстки, на красоту, на логичность. В общем, дополнения и изменения ценные.
Нашел только один недостаток: в Вашей версии при наведении на картинку больше не появляется alt и она не является ссылкой. Но рядом есть текстовая, так что, думаю, это мелочь...
Спасибо, интересно.
Нашел только один недостаток: в Вашей версии при наведении на картинку больше не появляется alt и она не является ссылкой. Но рядом есть текстовая, так что, думаю, это мелочь...
Спасибо, интересно.
+1
Нашел только один недостаток: в Вашей версии при наведении на картинку больше не появляется alt и она не является ссылкой. Но рядом есть текстовая, так что, думаю, это мелочь...
Это легко исправить. Достаточно поменять местами span.who и ссылку, что лежит в нем, а в стилях написать что-то вроде этого:
a:hover span {background: #ff6666; color: white;}
0
Ну и повесить на ссылку атрибут title="Посмотреть профиль", конечно.
0
Поведение по :hover в этом случае будет отличаться от того, что сейчас. Фоновая картинка сейчас никак не зависит от смены цвета фона ссылки. Если спан поместить внутрь, то всё поменяется.
В описании я как раз упоминал эту причину, когда объяснял введение спана в код.
В описании я как раз упоминал эту причину, когда объяснял введение спана в код.
0
Не вижу ничего плохого в том, что ссылка будет подсвечиваться при наведении на картинку. В конце-концов, по логике, картинка — это объект, относящийся к имени пользователя, а не что-то самостоятельное.
Я думаю, что этот вариант предпочтительнее, если, конечно, не стояло задачи сделать точно так же, как было.
Я думаю, что этот вариант предпочтительнее, если, конечно, не стояло задачи сделать точно так же, как было.
+2
Согласен с вами.
Действительно лучше.
Действительно лучше.
0
Отношение к этому варианту складывается из отношения к тому, дозволительно ли подсвечивать элемент интерфеса, который явно не находится под курсором. Ну а поскольку я тут проблем не вижу — ваш вариант вполне годится в дело.
0
Но внешне и на удобство это никак не повлияло =)
И это хорошо.
Нашел только один недостаток: в Вашей версии при наведении на картинку больше не появляется alt и она не является ссылкой. Но рядом есть текстовая, так что, думаю, это мелочь...
Так в том и заковыка, что раньше на одного юзера было две ссылки на его профиль. Сейчас этот самый title не составляет труда повесить на оставшуюся ссылку, ну а alt теперь вообще не нужен.
Одной из моих задач было снижение веса кода. Я её решил.
0
Россомахина хлебом не корми, дай пощупать чей-нибудь html и css. :-)
Спасибо, Док!
Спасибо, Док!
+4
Лучший валидатор — это браузер ;-)
0
Спасибо большое за такое обсуждение. Редко оно получается. Я Хабр хочу видеть обществом профессионалов, любящих своё дело, готовых обсудить проблему, найти решение. Совместно. Этот топик очень наглядно показывает, что у Хабра действительно есть будущее! =)
+2
Просто для меня в данном случае что UL, что DL, чтоь моя реализация — примерно равнозначны в своём неполном соответствии описываемым данным. Хотя, конечно, мог бы и UL-ом, да и DL-ом — тоже :-)
Вадик, кстати, я думаю, сделал бы DL-ом. Надо бы его вытащить сюда, а то варится там в СУПе, как лосось в белом вине.
Вадик, кстати, я думаю, сделал бы DL-ом. Надо бы его вытащить сюда, а то варится там в СУПе, как лосось в белом вине.
0
В 2012-м году Путин вернется к власти, ибо закончится срок правления предыдущего президента, который будет избран в 2008-м. :) Что тогда будет...
+1
К нам в Санкт-Петербург летят розовые фламинго!
В это воскресенье (08.07.07),в 15 часов 150 – 200 молодых людей соберутся у Дома кино,поприветствовать чужеземцев!
http://www.fontanka.ru/2007/07/05/025/
читайте и не падайте со стульев
PS Любители экзотики, скорей заряжайте свои фотоаппараты и айда охотиться за фламинго!
В это воскресенье (08.07.07),в 15 часов 150 – 200 молодых людей соберутся у Дома кино,поприветствовать чужеземцев!
http://www.fontanka.ru/2007/07/05/025/
читайте и не падайте со стульев
PS Любители экзотики, скорей заряжайте свои фотоаппараты и айда охотиться за фламинго!
-1
Мне интересно, зачем полные урлы указываются в ссылках? Чтобы уж наверняка? ;)
0
Sign up to leave a comment.
Ревизируем HTML и CSS «Хабрахабра»