Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 119
А в stylish это можно запихать?
Что это?
Не имеет смысла. Мы же не внешний вид изменить хотим, а только в учебных целях код переделать, внешне оставив всё как есть.
мне кажется, рассматривая какой то кусок кода в отрыве от всего проекта, говорить что он перегружен, равно как и делать любые другие выводы (кроме как о его работоспособности) не совсем правильно
Человек рассмотрел весь код, но в качестве примера взял лишь небольшую часть. Что же тут неправильного?
Я достаточно хорошо знаком с кодом Хабра. Старожилы помнят — почему.
беру свои слова обратно ;)
Честно говоря, я думал дивной версткой занимались именно «Россомахин и Со», а, как оказалось — не вы.
А кто по вашему входит в "Co"?
Вы туда не входите? :) Например, из комментариев в этом топике (и других, лень искать остальные) я сделал вывод, что в работе Максиму помогали и другие люди. Например, он упоминал 
Flack
FlackНе я. Элементарно не успел бы. Проект серьёзный, сложный и чертовски интересный, что, прежде всего, требует кропотливой работы чесов эдак по 8-9 каждый день.
Теоретически это можно переверстать definition list'ом. В крайнем случае - списком. А то сплошные дивы и спаны...
Можно, конечно.
Да вот только в данном случае несколько иная связь между элементами. В равной стпени это всё можно в UL засунуть. Так что я не стал мудрить.
http://www.maxdesign.com.au/presentation…
Связь между элементами вполне походит по смыслу для dl, как по мне. Хотя на это есть разные точки зрения - это описано в статье.
Засунуть в ul - это как минимум стоило бы сделать. Divitis/Spanitis - главная проблема новой вёрстки Хабра, - если показательно перевёрстывать, ее тоже стоит затрагивать имхо.
Связь между элементами вполне походит по смыслу для dl, как по мне. Хотя на это есть разные точки зрения - это описано в статье.
Засунуть в ul - это как минимум стоило бы сделать. Divitis/Spanitis - главная проблема новой вёрстки Хабра, - если показательно перевёрстывать, ее тоже стоит затрагивать имхо.
1. Предлагаешь взять юзера за DT?
2. Ну так я показательно и попытался.
P.S. Статью Расса я читал.
2. Ну так я показательно и попытался.
P.S. Статью Расса я читал.
Как минимум — 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>
По большому счёту, весь Хабр — это списки. Ныне свёрстанные дивами.
Как использовать DL я хорошо знаю. И использую там, где считаю уместным.
Мне в данном случае не нравится то, что комментатора засунули в DT. Оба DD не описывают комментатора так, как это принято в логике DL, там другая, не столь однозначная, связь. Здесь скорее связь с комментарием, как объектом, являющимся частью топика из такого-то блога, написанным таким-то человеком. Понимаешь? Reverse DL или вроде того.
Мне в данном случае не нравится то, что комментатора засунули в DT. Оба DD не описывают комментатора так, как это принято в логике DL, там другая, не столь однозначная, связь. Здесь скорее связь с комментарием, как объектом, являющимся частью топика из такого-то блога, написанным таким-то человеком. Понимаешь? Reverse DL или вроде того.
В спецификации w3c в качестве примера использования DL приводится разметка диалога (там получаются пары "автор" - "реплики"). Тут связь аналогичная, поэтому думаю, что всё в порядке.
Не аналогичная. Пользователь оставил комментарий, но не создал блог, в котором он этот комментарий написал.
Ссылка на блог не обязательно описывает пользователя. Вот комментарий — да, описывает. Связи неоднозначные.
Ссылка на блог не обязательно описывает пользователя. Вот комментарий — да, описывает. Связи неоднозначные.
Попробую ещё раз сформулировать. Сейчас перечитал своё, и вижу, что могут быть неясности.
Пользователю, как DT, однозначно соответствует ссылка на комментарий, как DD.
Ссылка на блог уже такой связью наделена с большой натяжкой.
Наши комментарии, как и реплики в примере w3c, характеризуют нас, описывают нас. Мы создаём их.
Но как описывает нас ссылка на блог?
Я вижу другую цепочку связей: DT должна быть ссылка на комментарий. Описывается она так: её создал пользователь такой-то, и комментарий является частью такого-то блога. Нарисуй взаимосвязи в виде графа — должно быть наглядно.
Пользователю, как DT, однозначно соответствует ссылка на комментарий, как DD.
Ссылка на блог уже такой связью наделена с большой натяжкой.
Наши комментарии, как и реплики в примере w3c, характеризуют нас, описывают нас. Мы создаём их.
Но как описывает нас ссылка на блог?
Я вижу другую цепочку связей: DT должна быть ссылка на комментарий. Описывается она так: её создал пользователь такой-то, и комментарий является частью такого-то блога. Нарисуй взаимосвязи в виде графа — должно быть наглядно.
Макс, список определений в широком смысле описывает связь чего-то с чем-то. Определением или описанием 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, так или иначе приходится идти на компромиссы.
P.S. Ну мы ж теоретизируем сейчас, как обычно. Володя уже реализовал, и хорошо реализовал.
Вот, переписал немного на свой манер - глянь. :) http://agafonkin.com/files/etc/habratest…
Ты в своём коде еще забыл о некоторых шорткатах, можешь подправить.
Ты в своём коде еще забыл о некоторых шорткатах, можешь подправить.
Ага. font-ы.
Хорошая работа. Надеюсь, не зря мы тут воду мутим.
Хорошая работа. Надеюсь, не зря мы тут воду мутим.
Спасибо. :)
Цвета еще. К тому же совершенно непонятно, зачем ты прописывал margin-bottom для ссылок. Вертикальные марджины всё равно у инлайн-элементов игнорируются. И line-height если и прописывать, то элементу выше - унаследуют (у меня он в шорткате font).
Цвета еще. К тому же совершенно непонятно, зачем ты прописывал margin-bottom для ссылок. Вертикальные марджины всё равно у инлайн-элементов игнорируются. И line-height если и прописывать, то элементу выше - унаследуют (у меня он в шорткате font).
не зря)
лично я,кое что новое для себя узнал...)
лично я,кое что новое для себя узнал...)
мне этот вариант приглянулся более всего
хотя да, имя пользователя не совсем подпадает под причинно-следственную свять term - description
Я в подобных случаях стараюсь избегать подобные конструкции, если на то нет какой-то особой необходимости. Слава богу, не часто и случается.
Имя пользователя замечательно подпадает под смысл, который есть у dt - не зря dl рекомендуют для оформления диалогов.
В данном случае, хотя ссылка на блог и не связана с автором, но пара блог/комментарий очень неплохо подходит для dd.
В данном случае, хотя ссылка на блог и не связана с автором, но пара блог/комментарий очень неплохо подходит для dd.
Кстати, ul даже с точки зрения компактности кода подошёл бы лучше - не пришлось бы на каждую строчку вешать class='entry'.
Грамотно, красиво, удобно.
А отступы в начале строк в коде намеренно не ставил или просто авто-форматируется так?
А отступы в начале строк в коде намеренно не ставил или просто авто-форматируется так?
- а где он закрывается?
точнее я знаю где он закрывается, но в коде не вижу....)
точнее я знаю где он закрывается, но в коде не вижу....)
Зачем так усложнять:
можно просто: .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;
профессионально конечно.
но мне кажется опять загоны у вас ..
что за фраза "более читабелен 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 стандарты - работающий продукт и пользователь важнее!
«За великими нужно следовать в достижениях, подвигах и победах, а не в ошибках, неудачах и поражениях...» ©
Вы, собственно, кто?
И на каком основании говорите о каких-то моих «загонах», да ещё и «опять»?
И на каком основании говорите о каких-то моих «загонах», да ещё и «опять»?
я не о ваших загонах говорю...
просто охарактеризовал этим словом жесткое обсуждение узкоспециализированных вещей на хабре, которое часто встречается..
написал свое мнение о том что это не так важно, а важнее результат
не более..
просто охарактеризовал этим словом жесткое обсуждение узкоспециализированных вещей на хабре, которое часто встречается..
написал свое мнение о том что это не так важно, а важнее результат
не более..
Ну так и чем вас результат не устраивает? Я целенаправленно добивался снижения веса того кода, который и сам, как пользователь, ежедневно часто качаю. При сохранённом в неизменности интерфейсе удалось снизить издержки ну хотя бы трафика, пусть и чуть-чуть — это плохо что-ли?
Да, и пожалуйста, очень прошу: не тычьте в сторону Гугла и его экономии на кавычках. Я инженер, и вопрос следования стандартам для меня давно решён.
Да, и пожалуйста, очень прошу: не тычьте в сторону Гугла и его экономии на кавычках. Я инженер, и вопрос следования стандартам для меня давно решён.
да..я просто обще рассуждаю (оправданы ли затраты и т.п)..
вот сохраните эту текущую страницу через save as:
получим: 200 кб js файлов и css таблиц , да сама страница 220 кб
да это и не страшно...
просто если уж подходить к задаче скажем снижения веса станицы,
то тогда уж радикальными мерами:
генерировать комментарии javascript'ом,
убрать левые библиотеки js, если они не нужны на данной странице
сжать код методом переименования ,как сделано у google и т.п
или лучше потратить свое время на более важные вещи в развитии сервиса,
один ваш аватар весит столько же сколько вы сэкономили на сжатие кода ..
я не говорю про баннеры на странице
вот сохраните эту текущую страницу через save as:
получим: 200 кб js файлов и css таблиц , да сама страница 220 кб
да это и не страшно...
просто если уж подходить к задаче скажем снижения веса станицы,
то тогда уж радикальными мерами:
генерировать комментарии javascript'ом,
убрать левые библиотеки js, если они не нужны на данной странице
сжать код методом переименования ,как сделано у google и т.п
или лучше потратить свое время на более важные вещи в развитии сервиса,
один ваш аватар весит столько же сколько вы сэкономили на сжатие кода ..
я не говорю про баннеры на странице
Зачем читать, если не слушаешь и не понимаешь смысла?
уж извините, если я и не знаю всех тонкостей верстки это не значит что не могу высказать свое мнение..
сколько я тут не рыпался с комментариями меня только минусуют,
а внятно объяснить никто не может - зачем кроме самовыражения сие чрезмерное увлечение усовершенствованием уже работающего, к тому же чужого кода html
когда привел в пример google - тоже самое нашли какие-то нелепые ошибки
в их верстке, как будто это самое важное в интернет сервисе.
ну заботали все возможные теги и приемы форматирования - отлично,
но нельзя узко мыслить только в рамках своей компетентности, может показаться что вы горы сворачиваете, а на самом деле просто с места на место камешки перекладываете
вот ниже например объяснили(комментарий tom'a) почему у google и скрипты и css не вынесены отдельно - потому что одни http заголовки будут по размеру такие же как само содержание, и 3 запроса на сервер однозначно хуже одного.. и красота тут не причем и нахрен не нужна
сколько я тут не рыпался с комментариями меня только минусуют,
а внятно объяснить никто не может - зачем кроме самовыражения сие чрезмерное увлечение усовершенствованием уже работающего, к тому же чужого кода html
когда привел в пример google - тоже самое нашли какие-то нелепые ошибки
в их верстке, как будто это самое важное в интернет сервисе.
ну заботали все возможные теги и приемы форматирования - отлично,
но нельзя узко мыслить только в рамках своей компетентности, может показаться что вы горы сворачиваете, а на самом деле просто с места на место камешки перекладываете
вот ниже например объяснили(комментарий tom'a) почему у google и скрипты и css не вынесены отдельно - потому что одни http заголовки будут по размеру такие же как само содержание, и 3 запроса на сервер однозначно хуже одного.. и красота тут не причем и нахрен не нужна
Уважаемый, вы к филателистам так же будете подкатывать с вопросами типа "зачем ты фантики всякие собираешь"?
Как говорится, "не ломай кайф, в натуре, а!" :)
По поводу Google - я на 100% убеждён, что такой код обоснован. Просто мы с вами не полностью понимаем, какие там могут быть требования к код (например, защита от парсеров и пр).
Как говорится, "не ломай кайф, в натуре, а!" :)
По поводу Google - я на 100% убеждён, что такой код обоснован. Просто мы с вами не полностью понимаем, какие там могут быть требования к код (например, защита от парсеров и пр).
«Вообще нет никакого html-кода»
убило!.. это называется «слышал звон, да не знаешь где он».
убило!.. это называется «слышал звон, да не знаешь где он».
да там у них и правда народ не далекий собрался, я их не в тему в пример привел ..
да я в шутку написал, вы что ..
короче не знаю...не верится мне что там необдуманно что либо вообще используется!
я привел google в пример потому что подумал мол хоть на него наезжать не будут...и то не так..
не всегда надо придерживаться общих правил ,
а искать лучшее решения в данной ситуации..
>Да, и пожалуйста, очень прошу: не тычьте в сторону Гугла и его экономии на >кавычках. Я инженер, и вопрос следования стандартам для меня давно решён.
тот же google вытащил на публику механизмы ajax запросов
потому что посчитал что это удобно , а не потому что описано стандартами...
и уже сам w3с стандартизирует этот самый ajax
короче не знаю...не верится мне что там необдуманно что либо вообще используется!
я привел google в пример потому что подумал мол хоть на него наезжать не будут...и то не так..
не всегда надо придерживаться общих правил ,
а искать лучшее решения в данной ситуации..
>Да, и пожалуйста, очень прошу: не тычьте в сторону Гугла и его экономии на >кавычках. Я инженер, и вопрос следования стандартам для меня давно решён.
тот же google вытащил на публику механизмы ajax запросов
потому что посчитал что это удобно , а не потому что описано стандартами...
и уже сам w3с стандартизирует этот самый ajax
Ну всё правильно, внутри же нету java script'a :)
я считаю что - это совсем не важно и это не
ошибка, это еще раз на примере успешного проекта показывает что качество продукта определяется не вылизанностью кода,
а его работой..
важно понимать на что реально нужно приложить усилия и от этого будет приемущество у продукта, а на что прикладываются усилия только ради собственного интереса..
непрерывно улучшать красоту кода без причины (циклический рефакторинг) - очень серьезная проблема большинства специалистов
ошибка, это еще раз на примере успешного проекта показывает что качество продукта определяется не вылизанностью кода,
а его работой..
важно понимать на что реально нужно приложить усилия и от этого будет приемущество у продукта, а на что прикладываются усилия только ради собственного интереса..
непрерывно улучшать красоту кода без причины (циклический рефакторинг) - очень серьезная проблема большинства специалистов
Значит проект хабрахабр должен оставаться с плохим кодом? Так?
=) т.е сейчас код ужасен? и нужно принимать меры?
как я могу ощутить как пользователь что есть проблемы в html коде верстки?
как я могу ощутить как пользователь что есть проблемы в html коде верстки?
На мой вопрос пожалуйста дайте ответ.
проект хабрахабр должен совершенствоваться,
если я хочу как пользователь помочь этому процессу, я напишу об ошибке или предложу усовершенствование..
но не буду советовать исправить код на свой манер..
если я хочу помочь как разработчик, то устроюсь на работу в futurico и буду работать в команде,
другого не вижу варианта
если я хочу как пользователь помочь этому процессу, я напишу об ошибке или предложу усовершенствование..
но не буду советовать исправить код на свой манер..
если я хочу помочь как разработчик, то устроюсь на работу в futurico и буду работать в команде,
другого не вижу варианта
само обсуждение знающих людей конечно на благо - и обмен опытом и уроки для новичков,
но не в том ракурсе что есть проблема непосредственно у сайта habra и надо ее решать ..проблемы нет
но не в том ракурсе что есть проблема непосредственно у сайта habra и надо ее решать ..проблемы нет
Каскадные таблицы и скрипты в коде самой страницы сделаны с той же целью, что и использование лишь одного графического файла — для уменьшения количества запросов на сервер. Гугл это не страница-хомяк школьника Василия Пупкина, которую запрашивают раз в полгода, и то по случайности.
Очень сомнительная экономия - для сайтов типа google пользователь обычно делает много загрузок страниц сайта, а однажды запрошенный css файл надолго кэшируется в браузере. На самом деле, стили прописывают в странице не для экономии трафика, а для визуального ускорения загрузки страницы - Яндекс, например, тоже частично выносит стили в код главной страницы, чтобы основной элемент - форма поиска - появилась сразу и в правильном оформлении.
Поставил бы плюсик. Полностью поддерживаю.
Да, код, пожалуй, стал лучше... Но внешне и на удобство это никак не повлияло =) Хотя, повлияло на правильность верстки, на красоту, на логичность. В общем, дополнения и изменения ценные.
Нашел только один недостаток: в Вашей версии при наведении на картинку больше не появляется alt и она не является ссылкой. Но рядом есть текстовая, так что, думаю, это мелочь...
Спасибо, интересно.
Нашел только один недостаток: в Вашей версии при наведении на картинку больше не появляется alt и она не является ссылкой. Но рядом есть текстовая, так что, думаю, это мелочь...
Спасибо, интересно.
Нашел только один недостаток: в Вашей версии при наведении на картинку больше не появляется alt и она не является ссылкой. Но рядом есть текстовая, так что, думаю, это мелочь...
Это легко исправить. Достаточно поменять местами span.who и ссылку, что лежит в нем, а в стилях написать что-то вроде этого:
a:hover span {background: #ff6666; color: white;}
Ну и повесить на ссылку атрибут title="Посмотреть профиль", конечно.
Поведение по :hover в этом случае будет отличаться от того, что сейчас. Фоновая картинка сейчас никак не зависит от смены цвета фона ссылки. Если спан поместить внутрь, то всё поменяется.
В описании я как раз упоминал эту причину, когда объяснял введение спана в код.
В описании я как раз упоминал эту причину, когда объяснял введение спана в код.
Не вижу ничего плохого в том, что ссылка будет подсвечиваться при наведении на картинку. В конце-концов, по логике, картинка — это объект, относящийся к имени пользователя, а не что-то самостоятельное.
Я думаю, что этот вариант предпочтительнее, если, конечно, не стояло задачи сделать точно так же, как было.
Я думаю, что этот вариант предпочтительнее, если, конечно, не стояло задачи сделать точно так же, как было.
Но внешне и на удобство это никак не повлияло =)
И это хорошо.
Нашел только один недостаток: в Вашей версии при наведении на картинку больше не появляется alt и она не является ссылкой. Но рядом есть текстовая, так что, думаю, это мелочь...
Так в том и заковыка, что раньше на одного юзера было две ссылки на его профиль. Сейчас этот самый title не составляет труда повесить на оставшуюся ссылку, ну а alt теперь вообще не нужен.
Одной из моих задач было снижение веса кода. Я её решил.
Россомахина хлебом не корми, дай пощупать чей-нибудь html и css. :-)
Спасибо, Док!
Спасибо, Док!
Лучший валидатор — это браузер ;-)
Спасибо большое за такое обсуждение. Редко оно получается. Я Хабр хочу видеть обществом профессионалов, любящих своё дело, готовых обсудить проблему, найти решение. Совместно. Этот топик очень наглядно показывает, что у Хабра действительно есть будущее! =)
Макс, а почему не список?! Я был уверен, что гуру тут напишет ul. По крайней мере, pepelsbey бы точно ul написал :) А вариант с dl мне совсем не нравится: не логично это, заголовок комментария никак не является пояснением, расшифровкой к имени юзера.
pepelsbeyПросто для меня в данном случае что UL, что DL, чтоь моя реализация — примерно равнозначны в своём неполном соответствии описываемым данным. Хотя, конечно, мог бы и UL-ом, да и DL-ом — тоже :-)
Вадик, кстати, я думаю, сделал бы DL-ом. Надо бы его вытащить сюда, а то варится там в СУПе, как лосось в белом вине.
Вадик, кстати, я думаю, сделал бы DL-ом. Надо бы его вытащить сюда, а то варится там в СУПе, как лосось в белом вине.
В 2012-м году Путин вернется к власти, ибо закончится срок правления предыдущего президента, который будет избран в 2008-м. :) Что тогда будет...
К нам в Санкт-Петербург летят розовые фламинго!
В это воскресенье (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 Любители экзотики, скорей заряжайте свои фотоаппараты и айда охотиться за фламинго!
Мне интересно, зачем полные урлы указываются в ссылках? Чтобы уж наверняка? ;)
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Ревизируем HTML и CSS «Хабрахабра»