Интервью с HTML разработчиком burntire.ru (ч.2)

Пятница, 25 Март 2011

 

Сегодня в гостях у cleverscript, уже знакомый нам из предыдущего интервью, специалист по web-разработке Яковлев Игорь. В предыдущем беседе удалось узнать общие вопросы по текущему проекту, в котором Игорь отвечает за многие вопросы связанные с разработкой проекта. В данном же интервью главной темой была выбрана HTML верстка, так как это тоже довольно интересно и всегда вызывает достаточно вопросов, особенно у верстальщиков, ведь у каждого есть свои наработки приобретенные с опытом…

 

Привет Игорь! Самый первый вопрос - как давно ты верстаешь на HTML?

 

Привет, сложно вспомнить, лет 7.

 

Какие самые важные, и может быть трудноусваиваемые моменты были на твоем пути освоения HTML?

 

Блоковые и строчные элементы - разница в их поведении стала открытием.

 

На какие браузеры ты сейчас ориентируешся при верстке, чем тестируешь и дебажиш верстку?

 

Opera, у меня был период когда приходилось проверять каждое изменение во всех браузерах, и так длилось до тех пор пока не стал упрощать верстку и не нашёл универсальных правил для вёрстки. Такие как отсутствие хаков*, единный ксс для всех браузеров и т.д. С тех пор достаточно одного браузера и финальной проверки в остальных.

 

Какой браузер по твоему самый самый, за кем будущее, на что следует обращать внимание?

 

Why Nobody Uses Opera здесь развернулась довольно интересная дискуссия. Мне кажется люди совершенно потеряли способность вычленять важную информацию из кучи мусора это относится к стандартам, нахождению решений проблем и т.д. оперу люблю, и уважаю фаерфокс 4 за то что они стырили у оперы интерфейс, это действительно удобно, также мне нравится хром. Будущее за любым браузером, который максимально упростит работу в интернете. Внимание стоит обращать на то какие стандарты и как быстро браузеры встраивают поддержку. И мне кажется что у оперы сейчас самый совершенный алгоритм загрузки страниц, такой скорости не видел ни у одного браузера. Но у оперы жутко тормозит css анимация. webkit уже давно в лидерах по производительности css анимации. Мозилла постаралась над css3, вроде не уступает webkit. Это интересно для тех кто в теме. ИЕ9 меня вполне порадовал.

 

Какому стандарту следуешь при верстке? Вы еще на XHTML или же на HTML5?

 

На XHTML, нужно дать время на адаптацию HTML5.

 

Какие преимущества ты лично заметил в HTML5 над XHTML?

 

Мне нравится разница в лучшую сторону между:

 

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>BurnTire</title>
</head>
  <body>
    <div class="wrapper">
      <div class="header"> </div>
      <div class="left"> </div>
      <div class="right"></div>
      <div class="footer"> </div>
    </div>
  </body>
</html>
 

 

и

 

 
 <!DOCTYPE html>
  <html>
   <head>
    <title>BurnTire</title>
   </head>
   <body>
    <header>...</header>
    <nav>...</nav>
    <section>
       <article>  </article>
    </section>
    <aside>...</aside>
    <footer>...</footer>
  </body>
  </html>
 

 

Игорь поделись опытом блочной верстки, как вы строите структуру HTML документа, есть ли какие-то выработанные и проверенные опытом наработки, посоветуй как подходить к верстке макета.

 

Минимум тегов!!! минимум классов! это правило сэкономит 50% времени, глаза не железные. С чистым html сейчас никто не работает, обязательно присутствует серверный скрипт. Поэтому пользуйтесь циклами для одинаковых кусков html кода. Засовывайте в циклы всё что можно зациклить. Минимизируйте любое представление до минимального набора символов. Меньше кода легче читать, не только самому, но и тем кто работает в команде. Скорочтение здесь мало чем поможет. Для тех кто в танке:

 

 
new Element(‘a’, {class: ‘burntire’,
  ‘html’: ‘cleverscript’,
  ‘href’: ‘link’,
‘rel’: ‘nofollow’
})
 

 

или

 

 
new Element(‘a.burntire[html=cleverscript][href=link][rel=nofollow])
 

 

Разница не велика, но как же просто читать.

 

Имхо, запись ксс селекторов одной строчкой скоро станет таким же фундаментальным стандартом как JSON или XML. Запись linq запросов в таком же ключе не может не радовать. Писать запросы в базу одной строчкой аля “css селектор” очень правильное начинание.

 

Привожу пример кода одной из страниц burntire MVC3 Razor (self promotion :D):

 

 
@model IEnumerable<BurnTire.Models.view_get_video>
@{
    Layout = "/_template.cshtml";
    var _domainForPic = System.Configuration.ConfigurationManager.AppSettings["domainForPic"];
 
    var aliases = new List<BurnTire.Models.video_aliases>();
 
    aliases.Add(*);
    ...
    aliases.Add(*);
}
@section title {
    <title>*</title>
    <meta name="description" content="*" />
    <meta name="keywords" content="*" />
}
 
@foreach (var alias in aliases)
{
    if (Model.Where(o => o.type_id == alias.index).Count() > 0)
    {
    <div class="module videos_on_main">
        <h2>
            <span class="field_span">
                <a href="@Url.Action("category", "videos", new { alias = alias.alias })">все ролики</a>
            </span>
            <a href="@Url.Action("category", "videos", new { alias = alias.alias })">@alias.title</a>
        </h2>
        @foreach (var item in Model.Where(o => o.type_id == alias.index))
        {
            <div class="item">
                <span>@String.Format("{0:D}", item.create_date)</span>
                @if (item.path != null)
                {
                <a href="@Url.Action("show", "videos", new { alias = item.alias_link })" title="@item.title">
                    <img class="pic" alt="@item.title" src="@(_domainForPic + item.path)" /></a>
                }
                @Html.ActionLink(item.title, "show", "videos", new { alias = item.alias_link }, null) 
                <a href="@Url.Action("show", "videos", new { alias = item.alias_link })" title="@item.title">
                    <img class="play_btn blue" alt="" src="/img/video_play_btn.png" />
                    <img class="play_btn red" alt="" src="/img/video_play_btn_o.png" /></a>
            </div>
        }
        <p class="cb"></p>
    </div>
    }
}
 

 

MVC Razor

 

Не забудем про поисковых роботов, которые тоже любят чистый код. И не забудем: чисто не там где убирают, а там где не мусорят. А также не забудем, хороший master page (template) - главное место где должно быть максимально чисто.

 

Что можешь посоветовать верстальщикам для создания семантического HTML документа?

 

Любители западнищины и трудностей (им действительно не ведомо что можно жить просто) раздули науку из воздуха. Кстати именно с запада льётся большой поток бессмысленных нововведений. Семантический документ — значит понятный документ. А что значит понятный документ? Простой, логически и синтаксически верный. Значит будем логически мыслить, находить максимально простые реализации сложных моментов, мыслить образно. Видеть образ макета от начала до конца, полностью в голове, со слоями. Выложить образ в синтаксис html, не составляет труда, придёт с опытом. Опять же, образ должен быть максимально простым. Кто знает, может в мире может быть что-то ещё проще чем header, footer и content. Поднимайте основное содержимое страницы повыше. Пользуйтесь модульной вёрсткой.

 

Используете при верстке микроформаты, оправданно ли вообще, или это как плюс к семантике HTML кода?

 

Микроформаты очень полезная вещь когда она необходима и оправдана. Мне идея по душе, т.к. основывается на универсальных форматах (xml). Полезна когда автору сайта необходимо показывать картинки в результатах поиска гугла (и яндекса?). К сожалению для нашей тематики пока нет разметки.

 

Вопрос по CSS, вы пользуетесь какими-то CSS фреймверками, глобальными сбросами, хаками и т.п. ?

 

Минимумом сбросов пользуемся. О хаках уже писал - нельзя им позволять появляться в коде. Ну а о фреймворках... ксс и фреймворк - мне кажется вещи не совместимые. Те что попадались, не представляем как этим пользоваться. CSS сетки по мне так неадекватность современности. Мне очень нравится дополнения псевдоклассов в ксс3 на пересчёт элементов (:nth-child, :nth-last-child и т.д.) - подобное может... и обязательно уменьшит размер html кода.

 

 
<span class="date">
  <span class="bg_top"></span>
  <span class="bg_middle">24.03</span>
  <span class="bg_bottom"></span>
</span>
 

 

 
.simple_article_list .item .date {}
.simple_article_list .item .date .bg_top {}
.simple_article_list .item .date .bg_middle {}
.simple_article_list .item .date .bg_bottom {}
 

 

превратится в :

 

 
<span>
  <span></span>
  <span>24.03</span>
  <span></span>
</span>
 

 

 
.simple_article_list .item > span:nth-child(1) {}
.simple_article_list .item > :nth-child(1) > :nth-child(1) {}
.simple_article_list .item > :nth-child(1) > :nth-child(2) {}
.simple_article_list .item > :nth-child(1) > :nth-child(3) {}
 

 

А если w3c додумается до селекторов в качестве переменных:

 

 
var sal = .simple_article_list .item > :nth-child(1) {}
sal :nth-child(1) {}
sal :nth-child(2) {}
sal :nth-child(3) {}
 

 

Мне бы так хотелось, но кто услышит бедного сибирского верстальщика :Р :nth-last-child(-n+3) возьмёт три последних элемента. На сладкое How nth-child Works

 

Используете один общий CSS файл стилей или же вы на стороне легкой поддержки разбиваете стили CSS по отдельным файлам отвечающим за оформление различных структурных элементов HTML верстки?

 

Однозначно говорить “лёгкой” я бы поостерёгся. Один сайт - один файл. Из-за уменьшения количества запросов. И нам так больше нравится.

 

Как вы формируете и структурируете файл CSS стилей? Предпочитаете однострочную или многострочную форму записи CSS правил для селекторов?

 

Стараемся не пользоваться перечислением стилей через запятую, это выливается в простое забывание (недочитывание строки). Со временем сложился следующий стиль.

 

 
.slideshow_on_main .item a {text-decoration:none;}
.slideshow_on_main .item a:hover {color:#FFFFA3;}
.slideshow_on_main .item h3 {margin:0 0 2px;}
.slideshow_on_main .item h3 a {color:#fff;}
.slideshow_on_main .item .desc {color:#ddd; font-size:11px;}
 

 

или

 

 
.result_on_tracks ul {margin:0;}
.result_on_tracks li {
list-style:none; margin:0 0 5px; line-height:16px; padding:3px;
border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px;
}
.result_on_tracks li:hover {background:#FFFFA3;}
.result_on_tracks li .place {display:block; width:60px; float:left;}
.result_on_tracks li .place em {font-style:normal; font-weight:bold;}
.result_on_tracks li .track {display:block; width:150px; float:left;}
.result_on_tracks li .time {display:block; width:50px; padding:0 20px; float:left;}
.result_on_tracks li .overtaken {display:block; width:130px; float:left; padding:0 20px 0 0;}
.result_on_tracks li .not_caught {display:block; width:130px; float:left;}
 

 

Это далеко не идеал, нам просто удобно читать. Новичкам советую посмотреть сюда CSS-селекторы

 

Здесь стоит поставить на место любителей похвастаться оптимизацией кода. Они утверждают что селектор вида:

 

 
.slideshow_on_main .item h3 {margin:0 0 2px;}
 

 

работает дольше чем:

 

 
.slideshow_on_main .item .desc {color:#ddd; font-size:11px;}
 

 

естественно с учётом большого css файла и бла бла бла.

 

Вывод: Не утяжеляйте HTML код “семантическими” классами. Ксс селекторы не убьют компьютер непомерной загрузкой процессора, не взорвут монитор и не откинут пользователя на 8 метров и уж точно мир не погрузится во мрак.

 

Давай ещё немного коснёмся синтаксиса css. Название класса можно считать переменной?

 

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

 

Когда-нибудь видел переменные в серверном коде через дефис?

 

нет

 

почему?

 

потому что это знак вычитания

 

Именно! И знак переноса слова. И чтобы выделить такую переменную двойным щелчком уже не обойтись. Очень частая операция. Поэтому мне кажется называть классы стоит без дефисов. Работать быстрее. Точки и слитные слова доказали эффективность во всех языках программирования. Из ксс собираются сделать ещё один язык - хорошо, но без дефисов, иначе пользоваться будет сложно. Имею ввиду встроенные :nth-child. Так же отвратительно реализован синтаксис анимации.

 

 
@-webkit-keyframes bounce_circle {
    0% {opacity:0.3;}
    50% {opacity:1; background-color:#ed7e09;}
    100% {opacity:0.3;}
}
.preloader {position:absolute; top:50%; left:45%; width:70px; height:10px; padding:5px 10px;
    border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; background:rgba(255,255,255,0.7);
    -webkit-box-shadow:0 0 20px #888;
  -moz-box-shadow:0 0 20px #888;
  -o-box-shadow:0 0 20px #888;
  box-shadow:0 0 20px #888;}
.preloader span {background-color:#ed7e09; opacity:0.3; width:10px; height:10px; float:left; margin:0 2px; 
    border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;
    -webkit-animation-name:bounce_circle;
    -webkit-animation-duration:2s;
    -webkit-animation-delay:0s;
    -webkit-animation-iteration-count:infinite;}
 

 

А представляешь что начнётся, когда из ксс сделают полноценный язык программирования. Ему определённо нужно новое дыхание, иначе глаза разбегутся от обилия минусов и дефисов. А было бы неплохо вычитать или складывать цвета. Биндить зависимости одного стиля от другого и прочие прелести. Управлять яркостью цвета детей которые зависят от цвета родителя и т.д.

 

Ужимаете CSS файлы в запущенном проекте для ускорения их чтения браузером?

 

Нет, мы за безопасный css.

 

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

 

 

Если бы все браузеры грузили страницы как 11 опера, 4 пункт можно было бы опустить. Будь моя воля, я бы переименовал все теги в одно-двух или трех-буквенные, насколько возможно. Приведу только пример, <b> <strong> - представляешь сколько бы трафика сэкономило по всему миру. Поэтому нам очень нравится тег <p>, но он блочный и не поддерживает вложенность. <b> <i> - идеально!!! Но умники решили запилить понтов и признали их устаревшими, прикрываясь не “семантичностью”. Да, я не люблю w3c :]

 

На днях столкнулся с потрясающим видео по оптимизации ASP MVC: mvcConf 2 - Steven Smith: Improving ASP.NET MVC Application Performance mvcConf 2 - Steven Smith: Improving ASP.NET MVC Application Performance

 

Используете в своих проектах CSS3? И если да, то как поступаешь с опусканием новых свойств устаревшими браузерами?

 

Проектах? Ты мне льстишь… используем и забиваем на прошлое.

 

Как ты организовываешь командную работу над HTML и CSS при разработке проектов? Какие инструменты для этого наиболее удобны и эффективны?

 

Мне кажется когда состарюсь, то каждое утро буду начинать с промывания окружающим мозгов про закон простоты. Первое - простота кода, второе - логичность. Это как читать книгу. Писать нужно так чтобы другие могли без выламывания глаз и траты времени анализировать информацию. Модифицировать, дополнять и прочее. Банальность: мы живем во времена когда количество информации становится нереальным для восприятия. и это не предел, можно реально погрязть в говне по самую макушку и здесь ничего смешного нет, многие люди живут в мире которого не существует.

 

Выход только один, менять качество информации - упрощать, делать так чтобы в любой момент времени обращаться к информации по требованию и тратить минимальное время на изучение(восстановление знаний). Такой подход позволит не держать до конца жизни какую-то область знаний, без возможности запоминания других знаний, по физиологическим причинам (например, жить одним сайтом и помнить каждый символ, забывая покормить кошку), а постоянно переключаться между знаниями не загружая мозги. Итак будет просто.

 

Некоторым личностям очень выгодны слепцы, а не спецы. Это поддерживает представление о сложности мира. Сложность в свою очередь позволяет посредникам плодиться и размножаться паразитируя на обществе, блокирует развитие специалистов размазывая их психологически. Сложности порождают новые сложности и так по спирали до неведомого конца. Нужно сходить с сумасшедшей дороги, держать на привязи собственное эго и выходить на новый уровень, благо поколение 90-х готов уже перестроилось. Не все конечно, но тенденция есть.

 

Игорь как считаешь развитие WEB стандартов в настоящее время облегчит работу верстальщиков? Имеются ввиду новые стандарты HTML5 и CSS3.

 

Безусловно, обрати внимание побеждают технологии которые упрощают жизнь. Ксс 3 по любому зарешает, уже видится огромная выгода от него для упрощения html кода. У меня есть некое представление о будущем с которым сложно делиться, пока скажу лишь следующее: векторная графика такой же де-факто унифированный формат данных как XML и JSON (JavaScript стоит отнести сюда же - но это отдельный разговор). Имею ввиду кардинальное изменение сил на HTML поприще, скорее всего html-вёрстка либо умрёт, либо изменится в сторону... Вопрос только в том согласится ли HTML-общество с делёжкой хлеба, либо его задавят “сверху” различные w3c, что покажет отсутствие силы у HTML-общества, а значит ненужности и текущем рабском существовании. Фриланс тому подтверждение?

 

И ещё хочу затронуть один момент который вышел из под контроля и превращается в полную анархию. Чувствую себя плодителем дерьма когда пишу один и тотже стиль с разными префиксами... Есть проблема нужно её решать. Если браузер поддерживает стиль, зачем ему префикс? Убрать ксс префиксы навсегда!

 

Спасибо Игорь за то что поделился опытом со мной и читателями cleverscript.ru, искренне желаю тебе успехов в совершенствовани своих навыков в web разработке!

 

PS. Читайте последние записи RSS Подписка на RSS

 

Метки:

Добавить комментарий