Советы front-end разработчику



Привет, читатель хабра.

Наверное, ты сразу спросишь меня: «Да кто ты такой, чтобы давать мне советы?». Итак, немного обо мне.

Первое мое общение с HTML и CSS было 10 лет назад, еще в школе, когда у меня только появился интернет, и я понял что тоже хочу делать странички, которые сможет увидеть весь мир. С тех пор у меня есть как минимум 5 полных лет опыта разработки сайтов по-взрослому. Сейчас я могу без лишней скромности сказать, что сверстал я уже пару сотен сайтов, большинство из которых, как ни странно, совершенно не совпадают с моими текущими требованиями к верстке.

Я не хочу рассказывать как надо делать, эта статья результат моего опыта и попытка написать рекомендации тем, кто только начинает, хотя и для матерых верстальщиков (слово режущие слух) здесь могут найтись интересные идеи.
Если ты заинтересовался прошу под кат…

Рабочая среда


Создай папку с готовым шаблоном для начала работы

Всегда проще работать с тем что сделал сам, даже если это будет отредактированный готовый шаблон вроде boilerplate. Потрать час на то, чтобы изучить все от и до, переписать то, что не нравится и добавить то, что ты используешь часто.

Используй препроцессоры для CSS

LESS, SASS и прочие **SS нужно использовать по одной простой причине: они увеличивают скорость верстки. Не сразу, но со временем ты поймешь сколько времени ты сэкономил на вложенных стилях, примесях, переменных и прочих приятных мелочах.

Составь список LESS (SASS) сниппетов

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

Используй Emmet (http://emmet.io)

Это плагин для большинства популярных текстовых редакторов, с помощью которого можно ускорить написание HTML кода в несколько раз. Просто попробуй.
Ты сможешь так же



Составь для себя подборку JavaScript плагинов

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

HTML


Используй минимальное количество HTML-тегов

По возможности нужно минимизировать количество используемых тегов для более простого ориентирования в коде и быстрому изменению его частей.



Используй HTML5-теги

Они уже давно поддерживаются всеми современными браузерами, а для IE младше 9 версии включаются коротким скриптом.
Вот сам скрипт
<!--[if lt IE 9]>
		<script>
			var e = ("article,aside,figcaption,figure,footer,header,hgroup,nav,section,time").split(',');
			for (var i = 0; i < e.length; i++) {
				document.createElement(e[i]);
			}
		</script>
<![endif]-->


Наиболее часто используемые мной теги для обозначения областей сайта:
  • <header> — для «шапки» сайта или раздела, в которой обычно располагается заголовок
  • <nav> — для навигации, причем на странице может быть использован несколько раз
  • <section> — для задания раздела документа
  • <article> — для содержания сайта вроде новости, статьи, записи блога, форума или др.
  • <aside> — для боковых колонок и вторичного содержимого
  • <footer> — для «подвала» сайта или раздела


Подключай JavaScript перед закрывающим тегом </body>

Можно много спорить о том что уже многими браузерами поддерживается асинхронная подгрузка JavaScript и это ни к чему, но тут решение простое: вес кода страницы в большинстве случаев существенно меньше веса скриптов, следовательно они начнут грузиться практически сразу, а времени до отображения страницы потратится меньше.


Правильно используй HTML-теги

Например:
  • тег <h1> должен быть только один на странице;
  • тег <span> в первую очередь для текста, а не оформления блоков;


Весь текст из макета должен оставаться текстом при верстке

Бывают такие дни, что просто лень разделять шапку сайта на разные блоки, ты сливаешь ее в одну картинку и загружаешь на сайт. СТОП! Одумайся, так делать нельзя. Весь текст на сайте должно быть возможно выделить и скопировать, в случае необходимости.

Не бойся тега <br>

Последнее время очень часто вижу, как вместо использования <br> люди стараются изловчиться какими-то странными конструкциями. Нужно лишь понимать, что <br> нужен для переноса текста и все.

Используй специальные ссылки для телефона, скайпа, почты и прочего

Для удобства пользователя скайп, почту и телефон необходимо делать кликабельными, для этого используются префиксы в ссылке, например:

  • <a href="tel: +74951234567">+7 (495) 123-45-67</a>
  • <a href="mailto: example@mail.ru">example@mail.ru</a>
  • <a href="skype: someskype?call">someskype</a>


Если этого не сделать, в случае если телефон будет разбит на несколько тегов, например:
+7 <span>(495)</span> 123-45-67

на мобильных устройствах для звонка выделится только часть телефона (123-45-67) без кода страны и города, и, соответственно, нельзя будет дозвониться.


Формы


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

Расставляй атрибут tabindex для элементов форм

Для формы из двух полей это не так важно, но для большой формы это всегда полезно, особенно когда порядок полей в коде не совпадает с порядком их отображения.

Используй атрибут autofocus

Если на странице основное действие совершаемое пользователем это заполнение формы, то поставь атрибут autofocus в первое поле формы, люди скажут тебе спасибо (привет, youtube).

Используй HTML5 типы полей

Не бойся использовать типы полей появившиеся в HTML5. Если браузер не поддерживает данный тип, то он просто отобразит текстовое поле.
Из наиболее важных типов полей следует всегда использовать:
  • search — позволяет очищать поле нажав на крестик в правом краю поля ввода;
  • tel — показывает цифровую клавиатуру на мобильном устройстве;
  • url — на мобильном устройстве добавляет знаки “.”, “/” и доменную зону первого уровня в буквенную клавиатуру;
  • email — аналогично url добавляет знаки “@” и “.” в буквенную клавиатуру;
  • date — вызывает барабан дат на мобильном устройстве, в некоторых десктопных браузерах отображает календарь;
  • time — отображает барабан для выбора времени на мобильных устройствах, некоторые десктопные браузеры добавляют элементы управления для выбора времени;
  • datetime — используется как date и time вместе.



Используй тип поля tel для полей ввода цифр

Из предыдущего параграфа понятно назначение типов полей, но этот тип стоит выделить отдельно. Если ты уверен что в поле нужно вводить только символы с клавиатуры телефона (0-9#*+) то используй для этого поля тип tel. Это сильно облегчит ввод для пользователей мобильных устройств. Например:
  • ввод номера кредитной карточки;
  • цифровой пароль, высылаемый SMS.


Запрещай исполнение JavaScript для полей даты, времени и тега <select> на мобильных устройствах

На мобильных устройствах по умолчанию отлично обрабатываются такие поля, и не нужно вместо удобного, в пол экрана размером, барабана для выбора даты пользователю показывать календарь с размерами клеток 10х10 пикселей.




Всегда используй атрибут for у тега <label>

Просто обычное удобство, зона клика для попадания в поля ввода существенно увеличивается.

Стили


Не используй :hover как триггер действия

Очень часто встречаются неудачные случаи с выпадающим меню, которое реализовано через псевдо-класс :hover, мало того, что это меню практически неработоспособно на мобильном устройстве, оно еще и доставляет немало головной боли пользователям десктопов. Решением, в данном случае, будет использование JavaScript.



Прорабатывай различные состояния элементов

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

Все скругления изображений контента верстай при помощи border-radius

Каждый раз загружая изображение для портфолио, и скругляя его вручную в фотошопе где-то в мире плачет один котенок. Если в дизайне задано что изображения товара, фотогалерея, или что-то еще должно быть круглым, то постарайся сделать так, чтобы эти скругления задавались CSS стилями.



Следуй принципу graceful degradation

Бессердечный IE

Браузер не поддерживает скругление углов блока? Да и ладно.
У элемента в IE7 не будет тени, с эффектом как будто плоскость под ним изогнута? Ну что поделать.
Не стоит тратить кучу сил и времени на создание скругленных углов у блока, если это не влияет на конечный результат. Другой вопрос если возможности (точнее невозможности) старого браузера повлияют на взаимодействие пользователя с сайтом, например: использование css-свойства box-sizing: border-box на сайте, важная часть посетителей которого заходят на него через IE7.

Производительность


Делай спрайты

Скоростной интернет позволил очень сильно сократить время между запросом и получением ответа пользователем. Узким местом в настоящее время является не объем трафика, а количество запросов к серверу. Поэтому нужно свести это количество к минимуму.
Для этого нужно просто объединять все элементы интерфейса в одну картинку, и размещать их на сайте с помощью позиционирования фонового изображения.


Сжимай *.PNG и *.JPG

При сохранении изображений в photoshop они получаются довольно тяжелыми. При помощи сервисов http://www.jpegmini.com (для *.JPG изображений) и https://tinypng.com (для *.PNG изображений) можно уменьшить вес графики в среднем в 2 раза.

При использовании нестандартных шрифтов подключай только нужные начертания через Google Web Fonts или аналоги

Google Web Fonts позволяет подключать только нужные начертания и наборы символов. Например если у шрифта есть 5 вариантов толщины текста, а на сайте используется только 2 не стоит подключать все 5.
Если это обычный сайт, то скорее всего вам достаточно кириллицы и латиницы, не следует подключать расширенные наборы символов.

При использовании JQuery или других библиотек воспользуйся CDN

В случае с JQuery, подключив его из CDN Google он скорее всего окажется уже закэширован у пользователя, и это сэкономит пару десятков килобайт.

PS


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

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

    0
    Советы хоть и известные, но в общем и целом годные. И изложено хорошо.

    Единственное, я как ни старался (а стараюсь уже года 2), так и не смог для себя понять — зачем использовать html5-тэги? То есть идея-то была хорошая, но конкретная реализация настолько неполна и убога, что никаких практических преимуществ они не несут. Только лишние костыли тянут.
      +5
      Спасибо за отзыв!
      Лично для меня их использование освобождает пространство имен для классов, плюс код смотрится гармоничнее.
      Так же поговаривают, что поисковики лучше ориентируются в них, при сложной структуре сайта.
        +1
        > освобождает пространство имен для классов, плюс код смотрится гармоничнее
        Вы несколько притягиваете желаемое к действительному. Да, именно это они и призваны делать. Но на практике — не делают. Потому что набор новых тэгов очень скуден, спецификация их нечетка, они не покрывают множество ситуаций. В итоге все равно имеем кашу из разных тэгов.
        Плюс упомянутые проблемы с обратной совместимостью, которые нужно решать скриптами.
        Идея, повторюсь, очень правильная — но реализация всё убила.
          +5
          Вы несколько притягиваете желаемое к действительному.

          Возможно. Но из опыта могу сказать, что мне реально удобнее работать с таким кодом.
          Тег:
          <footer></footer>
          

          более заметен, чем тег
          <div class='footer'></div>
          
            +5
            <footer class="footer"></footer>
            
              +30
              <!-- footer start -->
              <footer id="footer" class="footer" role="footer"></footer>
              <!-- footer end -->
              
                +26
                Не сразу понятно, footer ли это
                  +2
                  footer.footer#footer {
                  
                  }
                  
                    +2
                    footer.footer#footer[role=footer] {
                    
                    }
                    
                      0
                      предвидел такой комментарий.
                      вспомнил не сразу
                        +1
                        Тогда уж

                        footer.footer#footer[role=contentinfo] {
                        
                        }
                        
                  –3
                  Да ерунда. Всё равно его потом классами стилизовать — и будет дублирование.
                    +1
                    Вот сейчас не совсем понял, стилизация будет идти по названию тега, вот так:
                    footer {
                        //some CSS
                    }
                    
                    • НЛО прилетело и опубликовало эту надпись здесь
                        0
                        В таком случае я бы назначил класс тому объекту, которому принадлежит footer, и стили задавал бы соответственно:
                        .object footer {
                        //css
                        }
                          +1
                          А вот тут лучше через один класс
                          <footer class="object-footer"></footer>
                          

                          Хотя возможно зависит от их количества (footer): если их на странице много, то уж лучше через клас
                        +2
                        Ну многократно же обсуждалось, что вешать стили на тэг (в общем случае) — плохо.
                        Потому что потом этот тэг вылезет где-то ещё и подтянет стили, которые ему не предназначались.
                        Стили нужно вешать на классы. Исключения, понятное дело, могут быть, но в общем случае — на классы.

                        Цепляться на контекст тоже далеко не всегда уместное решение.
                          +1
                          Интересно, почему Вы считаете, что тег <article> может неожиданно «вылезти где-то ещё», а тег <div class="article"> — не может?
                            +1
                            тег <article> может вылезти на странице также как и тег <div>.
                            С классом вероятность меньше.
                              +1
                              Учитывая, что те, кто начал использовать новые секционные теги просто заменили на них div-ы с соответствующими классами, мне кажется, что вероятность не меньше, а абсолютно та же самая — ведь это те же самые теги, просто переименованные.
                              +2
                              Потому что классы нужно именовать более предметно и специфично, чем .article или .footer
                              Почитайте про яндексовскую методологию БЭМ (на хабре море статей про неё) — это один из самых попуярных сейчас вариантов. Не обязательно придерживаться именно её, можно придумать что-то своё — но важно понять принцип, что слишком общие названия классов есть зло.
                            +1
                            И кстати, вторая причина, почему стилизовать по классам плохо — это изменчивость DOM-а в ходе развития проекта. Дивы меняются на спаны и наоборот, оборачиваются в промежуточные дивы, которых раньше не было, и т.д. Это абсолютно реальная ситуация, которую я знаю на практике.
                            Может быть, конкретно в случае с footer такая вероятность и не очень велика — но к section применимо на 100%.
                              +1
                              Опечатался — правильно «вторая причина, почему стилизовать по тэгам плохо»
                    0
                    Насколько я понимаю, в большей степени это сделано для улучшения понимая страницы поисковыми системами.
                    http://habrahabr.ru/post/49734/ не плохая статья на эту тему.
                      0
                      Зачем это сделали — я понимаю :)
                      Я говорю, что в нынешнем виде это не решает поставленной задачи, малопригодно к использованию и потому может быть проигнорировано.
                      В будущем, когда допилят — с удовольствием.
                      • НЛО прилетело и опубликовало эту надпись здесь
                          0
                          Была где-то замечательная англоязычная статья, где автор по полочкам расписывал, почему нынешние html5-тэги плохи.
                          Когда я на неё наткнулся, это фактически было строгое изложение того, что я чувствовал интуитивно.
                          Но, блин, полчаса уже гугл мучаю и не могу её найти :(
                          • НЛО прилетело и опубликовало эту надпись здесь
                              0
                              Точно, спасибо. Только я оригинал подразумевал.
                          0
                          Я вот плохо представляю как это можно допилить. Тем более есть уже готовые способы семантической разметки schema.org и microformats.org
                          • НЛО прилетело и опубликовало эту надпись здесь
                              0
                              Мне не очень понятно какую семантическую нагрузку несет, например, тег <footer>. Для меня это позиция на странице, а семантика в моём понимании не имеет ничего общего с позиционированием.
                              • НЛО прилетело и опубликовало эту надпись здесь
                                  0
                                  Опять же, с таким подходом можно в итоге иметь миллион тегов на все случаи жизни.
                                    +2
                                    Я вот разрабатываю достаточно сложные интерфейсы, а теги footer, article, aside и т.п. можно эффективно использовать, разве что, при верстке блога или новостного сайта.
                      +4
                      Мне кажется, что надо тег «советы начинающим» поднять в заголовок статьи.
                        +4
                        Я много думал над заголовком, и несколько раз дописывал туда слово «начинающим», но в итоге убрал его.
                        Дело в том, что я сам часто встречаю в верстке крупных проектов те вещи о которых написано в статье, и посчитал что «матерым» верстальщикам этот материал тоже пойдет на пользу.
                          +7
                          Это больше похоже на советы начинающего.
                          +1
                          А разве html5 не позволяет использовать несколько тегов h1 на странице?
                            +4
                            позволяет, <div> внутри <a> тоже можно использовать html5doctor.com/block-level-links-in-html-5/
                              –1
                              Конечно можно, никто вам не запретит, но в статье внутри <a> нет тега <div>
                              Данный пример обусловлен логикой, зачем пихать блочный элемент в строчный?
                                0
                                А если надо блок ссылкой сделать?
                                  –3
                                  <a href='' class='block'>Блочный контент</a>
                                  

                                  .block {
                                      display: block;
                                  }
                                  
                                    +1
                                    Ну а после этого можно пихать в него сколько угодно разных элементов.
                                      –1
                                      К сожалению не помню где и при каких обстоятельствах, но я встречал случай, когда браузер при отрисовке страницы из конструкции вида:
                                      <a href='/url'>
                                          <div>Some text</div>
                                      </a>
                                      

                                      делал такую:
                                      <a href='/url'></a>
                                      <div>Some text</div>
                                      

                                      С тех пор внутри тега <a> я использую элементы, которые строчные по умолчанию, а дальше с помощью CSS можно делать их так же блочными
                                      • НЛО прилетело и опубликовало эту надпись здесь
                                    0
                                    a { display: block; }

                                    внутри использовать span
                                    • НЛО прилетело и опубликовало эту надпись здесь
                                  • НЛО прилетело и опубликовало эту надпись здесь
                                      0
                                      Убедили, уберу это из статьи, дабы не смущать людей
                                  0
                                  По спецификации HTML в каждый тег section может входить по одному h1 заголовку, но я не встречал официальных заявлений от Яндекса и Google о том, что в их индексе учитывается этот факт, поэтому продолжаю использовать по старинке.
                                    0
                                    Официальный канал Google Webmasters на эту тему: www.youtube.com/watch?v=GIn5qJKU8VM
                                      0
                                      К сожалению у меня не очень хорошо с английским, но насколько я его понял, он просто сказал:
                                      «Если хотите — используйте»
                                      А вот что будет при индексации страницы, какой заголовок поисковая система посчитает основным — ни слова
                                        0
                                        Основным поисковая система все равно посчитает title.
                                    0
                                    Подразумевается SEO оптимизация. Всегда можно было использовать много H1, это формально не запрещено.
                                      +1
                                      ага, 5
                                        0
                                        Наверное, дело не в технических ограничениях, а в хорошем тоне
                                        • НЛО прилетело и опубликовало эту надпись здесь
                                          –1
                                            +1
                                            При использовании нестандартных шрифтов подключай только нужные начертания через Google Web Fonts или аналоги

                                            Не забывайте прописывать правильные аналоги для OS X/Linux Вот, например, сервис в помощь cssfontstack.com/

                                            При использовании JQuery или других библиотек воспользуйся CDN

                                            А также можно сначала проверить доступна ли библиотека, чтобы не получилось так habrahabr.ru/post/231853/ (но это скорее к программистам)

                                            Еще есть классная статья тут: habrahabr.ru/post/114256/
                                            0
                                            Подключай JavaScript перед закрывающим тегом body

                                            Douglas Crockford рекомендует перестать использовать эту практику и переходить на defer async
                                              0
                                              Тут говорится, что IE 11+ поддерживает атрибут async, так что пока рано
                                                +1
                                                Зато defer поддерживает с незапамятных времён:
                                                caniuse.com/script-defer
                                                  0
                                                  И то правда, учту это, спасибо!
                                                0
                                                Если в таком случае гарантия, что скрипты выполнятся в том порядке, в котором подключались?
                                                +5
                                                + Используйте autoprefixer
                                                + Удобно использовать Gulp, Grunt или аналоги. Например, можно автоматически оптимизировать изображения, обработать Compass, пропустить получившееся через Autoprefixer и CSScomb, и всё это с LiveReload.

                                                Правда, с Gulp крайне неудобно то, что он требует хранить свои компоненты в папке с проектом, если проектов много, то в каждой папке надо хранить тысячи файлов весом в десятки мегабайт. Я это обошёл, использовав symlink в нужные проекты из единой папки с модулями Gulp.
                                                  +3
                                                  Заглянул в демо autoprefixer — это 14 тысяч(!) строк JS-кода (если в неминифицированном виде смотреть).
                                                  Зачем тянуть этого монстра, если проще решить задачу десятком микшинов в CSS-препроцессоре, и браузер получит уже статичные стили?
                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                      0
                                                      Я верно понимаю, что он работает на стороне клиента, определяет браузер посетителя и подставляет только нужные префиксы?
                                                      • НЛО прилетело и опубликовало эту надпись здесь
                                                          0
                                                          А, значит я недопонял. В таком случае вопрос снимается.
                                                    0
                                                    Я бы не стал говорит в общем случае об Grunt или Gulp так как их использование ограничивается node.js
                                                    А LiveReload я так и не смог завести на винде в связке SublimeText 2 + Chrome
                                                      +4
                                                      А что мешает разработчику держать на локальной машине NodeJS?
                                                        +1
                                                        Об этом я не подумал, пойду открою для себя новый мир :)
                                                        0
                                                        Для хрома есть расширение LiveReload. Прекрасно работает в связке с grunt-contrib-watch.
                                                          0
                                                          Я ставил расширение для Chrome и плагин к Sublime Text 2. В итоге Sublime Text говорит что видит Chrome, а Chrome в тоже самое время никак не реагирует. В чем проблема так и не смог выявить. Находил в интернете похожие проблемы у других людей, но все они были без ответа.
                                                          0
                                                          Попробуйте BrowserSync
                                                            0
                                                            Спасибо, попробую
                                                        +1
                                                        Добавлю свои 5 копеек:
                                                        1) CSS препроцессоры – это конечно отлично, так что не грех использовать что-то подобное для JS (CoffeeScript) и для HTML (Jade). С CoffeeScript у меня как-то не сложилось, а вот без Jade жить не могу.
                                                        2) Также, советую посмотреть в сторону Grunt тем, кто этого еще не сделал. Правильно настроенный конфиг сэкономит уйму времени и сил.
                                                        3) Для уменьшения размера изображений, использую ImageOptim (OS X). Пытался делать Imagemin таск в Grunt, но работает он как-то криво.
                                                        4) Для больших фронтенд-проектов, с большим количеством JS кода и сторонних библиотек, нужно строить его по AMD технологии (Require JS).
                                                        5) Я думаю, что использовать :hover как триггер действия все-таки можно. Главное делать это с умом.
                                                          0
                                                          1) На сколько я понял Jade, это аналог Emmet, только структура разворачивается не по нажатию tab, а при компиляции файла, так что тут каждому свое
                                                          3) Дал ссылки на сайт как кроссплатформенный вариант
                                                          5) С умом можно делать многое, что категорически запрещается. Это не самый плохой вариант :)
                                                          +3
                                                          Но вот совет «используй CDN для jQuery» на практике не особенно полезный. Steve Souders — гуру фронтенд-производительности, автор книг High Performance Web Sites и Even Faster Web Sites, руководитель групп разработки Y!Slow и PageSpeed в Yahoo и Google соответственно — проводил исследования данных HTTPArchive как раз на эту тему.

                                                          И оказалось, что хотя в целом jQuery из Google CDN загружеют 18% из топ 300 тысяч сайтов интернета, — что, в общем-то, очень даже круто — когда дело доходит до конкретной версии, то наблюдается одромный разброс значений и по сравнению с 2011 годом фрагментация только растет:

                                                          Table 1. Top Versions of jQuery from GHL Mar 1 2013
                                                          jQuery version percentage of sites
                                                          1.4.2 (http) 1.7%
                                                          1.7.2 (http) 1.6%
                                                          1.7.1 (http) 1.6%
                                                          1.3.2 (http) 1.2%
                                                          1.7.2 (https) 1.1%
                                                          1.8.3 (http) 1.0%
                                                          1.7.1 (https) 0.8%
                                                          1.8.2 (http) 0.7%
                                                          1.6.1 (http) 0.6%

                                                          Так что вероятность того, что именно ваша версия jQuery уже есть в кеше браузера, ничтожно мала. Гораздо более выгодно собирать ваш JS, ваши стили и картинки и отдавать их от какого-то CDN. Тогда если пользователь ходит на ваш сайт часто, вы получите горадо больший прирост по скорости. А если редко, то что с Google CDN, что без него, ему придется загружать ваш сайт целиком с нуля (тут особую роль играют оистрически малые размеры кеша браузеров). Услуги CDN сегодня очень дешевы и легко подключаются.
                                                            0
                                                            Вот это интересно.
                                                            Документальное подтверждение того, что на интуитивном уровне мне уже давно казалось.
                                                            Хотя подключаю jQuery с гугла просто по принципу «хуже тоже не будет» :)
                                                              0
                                                              Я сейчас пришел к такому:

                                                              — index.html — с моего сервера
                                                              — styles.css, vendor.js, app.js — с CDN

                                                              можно было бы jquery из vendor.js вытянуть и с CDN гугла грузить, но зачем лишний запрос делать?
                                                              +1
                                                              Ну, я бы эти данные истолковал не как «есть вероятность в полтора процента, что у пользователя закешировалась нужная вам версия jQuery», а как «у пользователей уже есть дохренища версий jQuery в кеше, выбирай любую».
                                                                +1
                                                                Проблема в том, что браузеру не скажешь «ой, мне подходит любая версия jQuery выше 1.3, поищи там у себя в кеше».
                                                                0
                                                                Интересное замечание, обдумаю на досуге, как все-таки поступить
                                                                  0
                                                                  Мы просто включили SPDY и отказались от статик-сайтов и yandex.st.
                                                                    0
                                                                    И каков реальный прирост в скорости загрузки страниц получился?
                                                                      0
                                                                      в пределах 1-5%, для нас сыграло то, что так просто проще :)
                                                                  +1
                                                                  По поводу оптимизации png могу посоветовать PNG Gauntlet, работает не хуже tiny png, но позволяет оптимизировать изображения прямо на жестокм диске, без загрузки и обратного скачивания через веб интерфейс + абсолютно бесплатная утилита.
                                                                    0
                                                                    Сейчас попробовал на PNG файле размером 70.4 кб
                                                                    PNG Gauntlet
                                                                    64.43 кб
                                                                    Подергал настройки но лучшего сжатия не добился
                                                                    tinyPNG
                                                                    21.4 кб
                                                                    Какие настройки должны быть чтобы «работал не хуже»?
                                                                      0
                                                                      Насколько я знаю, tinypng оптимизирует с ухудшением качества (сжатие палитры), а pngout/optipng сохраняет картинку изначальной (если только не указать обратное принудительно).
                                                                        0
                                                                        Да, tinyPNG использует метод квантования, и действительно ухудшает качество когда речь идет о полноцветной фотографии (ума не приложу зачем в таком случае использовать *.PNG)
                                                                        Но в случае сжатия изображений интерфейса ухудшения качества нет
                                                                        0
                                                                        Вы правы tinyPNG сжимает сильнее. Взял сейчас для примера логотип гугл tinyPNG умудрился оптимизировать его с 14К до 8К.

                                                                        Но меня вполне устраивает оптимизация PNG Gauntlet в большинстве случаев, вобще начал использовать оптимизаторы с того момента как заметил, что если сохранить изображение размер 1х1 пиксель в фотошопе CC, то оно будет занимать 20КБ, можно сохраняться через save for web, ctrl + alt + shif +s, но сохраняет не от места где лежит файл PSD, а от того места где был сохранен файл в последний раз и мне это неудобно.

                                                                        Недавно открыл для себя Generate — Image assets, оно сохраняет все нужные картинки уже оптимизированными в отдельную папкку «image-assets» по соседству с файлом PSD и приходится из этой папки все равно переносить в другую, что тоже не всегда удобно.
                                                                        0
                                                                        Попробовал PNG Gauntlet вот на этой картинке, результаты:
                                                                        • Оригинал: 228кб
                                                                        • PNG Gauntlet: 186кб
                                                                        • Tiny PNG: 30кб

                                                                          0
                                                                          Выше уже разобрались, PNG Gauntlet не меняет качество изображения, в то время как tinyPNG может запросто сделать из png24 png8, если изменения в качестве будут не существенные
                                                                            0
                                                                            Это же обычный градиент, можно вполне через CSS сделать. Поддерживается даже 9ым ослом.

                                                                            www.colorzilla.com/gradient-editor/
                                                                            • НЛО прилетело и опубликовало эту надпись здесь
                                                                                0
                                                                                Вот тут сделано при помощи утилиты приведенной выше. Работает в ИЕ9 (на оригинальном IE9 на Windows XP не проверял, но должо работать). Насколько понимаю сделано через фоновый svg в data uri формате. Я считаю, что такое решение лучше чем картинка.

                                                                                http://codepen.io/Artrayd/pen/zcveK
                                                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                                                    +2
                                                                                    Не знаю зачем так сделано, я в последнее время вобще на ИЕ9 забиваю, не будет там градиента на кнопочке, а будет сплошной цвет, ну да и ладно. Никто от этого не умрет. Текст читается, кнопочки нажимаются, все работает — ну и отлично.

                                                                                    Я лучше лишний час поработаю над интерактивным эффектами для современных браузеров, чем буду возиться с ИЕ9.
                                                                        • НЛО прилетело и опубликовало эту надпись здесь
                                                                            +1
                                                                            Неплохо. Нашел для себя пару полезных моментов. Но прекращайте эксплуатировать котят!
                                                                            Каждый раз загружая изображение для портфолио, и скругляя его вручную в фотошопе где-то в мире плачет один котенок.
                                                                            • НЛО прилетело и опубликовало эту надпись здесь
                                                                                +1
                                                                                И загружать изображения для портфолио. Остается открытым вопрос: чье это портфолио? Уж не котенка ли?
                                                                              0
                                                                              Годно.
                                                                                0
                                                                                Я бы не использовал cdn от гугл при разработке крупных международных сайтов. (Пример Китай и его великий фаирволл)
                                                                                  0
                                                                                  Нормально все с китаем, специально просил знакомую проверить пару недель назад
                                                                                  +2
                                                                                  Создай папку с готовым шаблоном для начала работы

                                                                                  Для Sublime Text довольно удобно использовать плагин Nettuts+ Fetch.
                                                                                  Шаблоны можно хранить где-нибудь в дропбоксе или на гитхабе.

                                                                                    –1
                                                                                    Изложено доходчиво. Но если каждый день этим заниматься, то уже даже не думаешь как делать, а просто делаешь как правильно. В заметки себе оставлю этого юзера. Вообщем почитать можно, мне понравилось.
                                                                                      0
                                                                                      Есть одно «но» в случае использования mailto, tel и аналогичных. Это всё хорошо в теории, но на практике подобные вещи стоит делать либо картинками (что не очень хорошо — нельзя выделить), либо генерировать с помощью JS. Причина проста — в интернете бродит полно всяких ботов, которые очень любят парсить подобные ссылки и рассылать спам. Так что к этому стоит быть повнимательнее.
                                                                                        +1
                                                                                        Я спалил все свои ящики давно и много раз в разных местах. Спам приходит максимум раз в месяца 3. Спамфильтры гугла рулят.
                                                                                          0
                                                                                          Я не спорю. Но если на своём сервере самопальный почтовик — выводы можно сделать. Моё дело предупредить о последствиях, т.к. подобный негативный опыт был.
                                                                                            0
                                                                                            Где-то видел решение, где не вспомню, по началу на странице все ссылки с mailto пустые или текст «Включите javascript», все email'ы хранятся в js объекте и специальный скриптик, по какому-то опознавательному атрибуту, например data-ml="eml5" при попадании ссылки во viewport подставлял в ссылку нужный email.
                                                                                          0
                                                                                          Мне пока что ни разу не звонили боты :)
                                                                                          А насчет почты тут вопрос удобства конечного пользователя, или защита от спама, нужно выбирать.
                                                                                            0
                                                                                            1) Мне тоже не звонили, но понасылали всякого смс-спама — тучи.
                                                                                            2) см. предложение генерировать адрес с помощью JS ;)
                                                                                          +7
                                                                                          У меня с давних пор хранится значок «Альпинист СССР». Значкисты — это был следующий этап за новичком. Значкисты отличались тем, что все знали, все умели и всегда могли объяснить, как надо делать правильно. Ведь, знания, полученные в альплагере, не успели еще выветриться из головы, а свои маленькие успехи подхлестывали рассказать о них всему миру.
                                                                                          С опытом былая уверенность постепенно исчезала и человек начинал понимать, что горы, как и жизнь, сложны и непредсказуемы.
                                                                                          К чему это я? Да просто хочется выдать автору какой-то такой значок. Не то «Вебмастер СССР», не то «Программист HTML».

                                                                                          Детский сад, а не Хабр, вы уж простите.
                                                                                            +1
                                                                                            Советы начинающего, который нахватался умных слов из популярных статей. Куча ошибок, неточностей и неверных рекомендаций. Самый яркий пример:
                                                                                            <nav> — для навигации, причем их может быть много на странице
                                                                                            Противоречит спецификации, которая рекомендует группировать в один <nav> основную навигацию на странице.

                                                                                            Закройте и забудьте.
                                                                                            • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                0
                                                                                                См. мой комментарий дальше по ветке. «Много на странице» — опасный совет, который ведёт к неправильному пониманию. Вся статья полна опасных советов.
                                                                                                0
                                                                                                По вашей ссылке написано
                                                                                                > Not all groups of links on a page need to be in a nav element
                                                                                                Это не запрещает повторного использования тега
                                                                                                  +1
                                                                                                  «Много на странице» — это опасный совет, теперь все бросятся заворачивать в <nav> каждую группу ссылок, мол, это же навигация.

                                                                                                  Проблема в том, что вы неприлично и опасно упростили случаи использования элементов.

                                                                                                  <header> — это не только шапка сайта, это шапка любой самостоятельной части содержимого, например, <article>
                                                                                                  <article> — не только для контента страницы, но для каждой самостоятельной части содержимого, в частности, для тизеров статей и комментариев.
                                                                                                  <aside> — не только для боковых колонок, но для любого вторичного содержимого
                                                                                                  <footer> — не только подвал сайта, но и, к примеру, подвал каждой <article> с датой статьи или комментария
                                                                                                +1
                                                                                                PPS: не используй Dropbox для раздачи картинок.
                                                                                                  +1
                                                                                                  Починил, первый пост, не знал :)
                                                                                                  0
                                                                                                  Не публикуйте картинки в статьях на Dropbox, товарищи.
                                                                                                  Публичные ссылки сдохли, потому что Dropbox ограничивает трафик.

                                                                                                  P.S. Опередили.
                                                                                                    +1
                                                                                                    Статья, к сожалению, проигрывает за счет своего названия. Чем вы занимались 10 лет с момента знакомства с вебом и в течение 5 лет активной практики — сомнительная деятельность, ибо пара комментариев от pepelsbey ценнее, чем вся статья.
                                                                                                    Проше сделать подборку ссылок на видеокурсы от тех же Nettuts, CSS-Tricks, etc. Пользы больше.
                                                                                                    Простите, но это так.
                                                                                                      0
                                                                                                      Используй препроцессоры для CSS


                                                                                                      Изложить в следующей редакции: Используй препроцессоры.

                                                                                                      Препроцессоры для HTML важнее, чем для CSS, поскольку структура кода гораздо более ветвистая. Jade, Node-blade, и т.п.

                                                                                                      Препроцессоры для JS (CoffeeScript) позволяют прекратить продираться через скобки и повышают скорость разработки на 94,817%.
                                                                                                        –3
                                                                                                        Да кто ты такой, чтобы давать мне советы?
                                                                                                          0
                                                                                                          А кто вы такой, чтобы считать, что эти советы вам не нужны?
                                                                                                            0
                                                                                                            Это была шутка на тему второго абзаца поста.
                                                                                                          0
                                                                                                          Для сжатия в Windows графических файлов без потери качества есть программа FileOpimizer. Это оболочка, которая последовательно применяет набор известных утилит оптимизации. Для PNG получается отличный результат.
                                                                                                            +1
                                                                                                            Какие-то зануды тут собрались, «советы от новичка», «хабр не торт». Сами бы что-нибудь написали для начала.
                                                                                                            За статью спасибо, задумался, стоит ли начать использовать CDN, например от Яндекса, а также поставил autofocus на страницу с формой, над которой сейчас работаю.
                                                                                                              0
                                                                                                              Спасибо за отзыв. Всегда приятно, когда твои советы помогают людям.
                                                                                                              0
                                                                                                              Вместо спрайтов и google fonts, советую инлайнить все это в base64.
                                                                                                              Не согласен, также про JS плагины, я бы вообще начинающим разработчикам рекомендовал отказываться от плагинов, начинающим очень полезно пытаться решать задачи самостоятельно.
                                                                                                              В качестве CDN рекомендую использовать JSDelivr, когда от плагинов все же не отказаться, большинство из них наверняка там есть (и не только js), а возможность забирать все плагины одним запросом, вообще волшебство.
                                                                                                              • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                                0
                                                                                                                Молодец.

                                                                                                                Только graceful degradation это совсем не о том что надо забивать на поддержку старья. Я бы сказал это «помнить о фоллбэке где это возможно». Так скажем вместо span class='Underline' onclick='ajaxload(page)' лучше сделать ссылку с тем же обработчиком и с правильным href. Чтобы могло работать без JS плюс открывало in new tab если надо. И к слову есть еще progressive enhancement. Правда все это уже наверное устарело.
                                                                                                                  –1
                                                                                                                  del
                                                                                                                  • НЛО прилетело и опубликовало эту надпись здесь

                                                                                                                    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                                                                                    Самое читаемое