Примечание редактора: Это вступительная статья об идее книги, которая будет опубликована Smashing Magazine с Крисом Хайльманном. Проверьте, что мы предлагаем в качестве идеи — объясняя способ пересмотреть, как мы строим веб-сайты, чтобы убедиться, что они компактнее и более будущее доказательство. В конце статьи, мы просим вас заполнить быстрый опрос, чтобы показать свой интерес.
Интернет, как это сейчас страдает от проблемы ожирения. Если вы просматриваете веб-на слоеное мобильное соединение или некоторые гостиницы беспроводной, вы окажетесь много раз смотрел на страницу или приложение, которое ничего не делает и не говорит вам, что происходит либо. Спиннер на вкладке или СТРОКе URL-адреса, кажется, вещь, которая получает наибольший пробег в браузерах. Серфинг с чистой вкладкой, открытой в инструментах разработчика, показывает вам невероятное количество данных, отправляемых для, казалось бы, очень простых конечных продуктов.
Почему так? Не должны годы веб-разработки и адвокации о производительности Yahoo и Google и многие другие родились плоды и сделал нам известно о том, сколько каждый запрос HTTP стоит? Если вы посмотрите на конечные продукты, это не кажется, что путь.
Изображение Кредит: seelensturm.
Причины для тучного паутины
Есть несколько причин, почему наш веб находится на пухлой стороне, и большинство из них на самом деле возможно для нас, как разработчиков, чтобы изменить.
Мы не развиваемся в реалистичной среде
Вероятно, основная причина заключается в том, что, как разработчики, мы работаем на быстрых и больших компьютерах, подключенных к жирной линии, и в первый раз кто-то тестирует наши продукты на медленных соединениях во время обеспечения качества (КК). И, как КК это первое, что получить бросил, когда сроки не соблюдаются, иногда это никогда не происходит вообще.
Цепляясь за прошлое
Еще одна причина любви ручки на наших веб-продуктов является ложное чувство верности устаревших и старых технологий, а именно браузеры 90-х годов, которые отказываются уходить. Есть много попыток решения проблемы устаревших сред, каждая из которых со своими проблемами. Дело в том, что Есть много конечных пользователей там на ужасно устаревших компьютеров с — на наш взгляд — плохие браузеры и, вероятно, ограниченные соединения. Эти пользователи не должны быть заблокированы, но они также не должны диктовать, что мы строим.
Различия в браузере
Еще одна большая причина является раздражение браузера различия. Есть не так много веб-технологий и AA, где все браузеры находятся в согласии, когда дело доходит до их поддержки, и много раз мы должны повторить код и вилку и тест, чтобы дать ту же функциональность для всех из них.
Охватывая хаос и празднование различий
Последний момент является главной ошибкой, которую мы делаем: вместо того, чтобы принять хаос, который является веб-и наших конечных пользователей среды и способности, мы, кажется, не в состоянии отказаться от мечты иметь продукт, который работает и выглядит точно так же везде.
Мой браузер не мир?
В худшем случае, мы пытаемся достичь этого, блокируя все браузеры, которые нам не нравятся, и с гордостью провозглашая, что «каждый использует браузер X, а тот, кто не является врагом современной паутины». Это, конечно, просто лжет нам самим, и основано на мимолетной концепции «современной паутины». Многие из самых страшных веб-продуктов там были построены лет назад, чтобы работать только в Internet Explorer (IE) 6, который был колени пчелы в то время. Не имеет значения, какой прохладный аппаратных имеет проводной браузер, который является горячим прямо сейчас — мы делаем ту же ошибку снова, если мы только построить в один браузер и заблокировать другие.
Блокировка любого браузера означает на самом деле писать больше кода для тестирования для браузеров, и это почти невозможно надежно определить, какой браузер находится в использовании. Если вы хотите доказательства, просто взгляните на строку агента пользователя браузера Яндекс, который содержит имена почти каждого браузера там:
Змозилла/5.0 (Маинтош; Intel Mac OS X10’8 2) AppleWebKit/536.5 (KHTML, как Gecko) YaBrowser/1.0.1084.5402 Chrome/19.0.1084.5402 Safari/536.5
Я надеюсь, что мы можем согласиться с тем, что строительство для одного браузера (или двигателя) работает только для вас, если вы ориентируетесь на определенный рынок и группу, и даже тогда вы не застрахованы от потери их в ближайшем будущем.
Библиотеки – это будущее
Еще одна попытка достичь мечты о кросс-браузер единообразия является стратегия абстракции, используя библиотеки, polyfills и рамки, чтобы позволить нам писать на одном языке и все браузера разница магии произойдет под капотом. Для производства это очень хорошая идея. В долгосрочной перспективе библиотеки должны получить нас там, где мы хотим быть – почти каждая среда программного обеспечения, рано или поздно, работает с использованием библиотек, которые унифицируют доступ к аппаратным или данных AI. Для разработки приложений нам необходимо определить и развивать эти библиотеки и использовать их в наших интересах.
Встроенная избыточность
Проблема, которая у нас есть сейчас, однако, заключается в том, что библиотеки и платформы абстракции становятся отправной точкой, и в случае простых веб-сайтов с небольшим количеством дополнительного чутье, они не нужны. Мы просто начали использовать их, не учитывая их влияние или даже забыл, как делать вещи без них. И во многих случаях, многие вещи, которые мы делаем с ними уже доступны в браузере для нас, мы просто должны использовать то, что есть, а не имитировать его. Библиотеки сами начинают страдать от ожирения, и во многих случаях, лишний жир является функциональность, чтобы сделать устаревшие браузеры делать то, что они никогда не должны были делать, но что браузеры на основе спецификации HTML5 уже встроены.
Смерть на тысячу плагинов
Злоупотребление абстракцией кода свирепствует в эти дни. Мы используем библиотеки и преобразователи, которые позволяют нам писать наименьшее количество кода возможно для достижения многого. Это приходит с ценой. Три строки, которые мы пишем на абстрактном языке, могут привести к десяткам после преобразования в понятный для браузера код. Это очень заманчиво использовать 20 небольших скриптов на наших страницах, когда все они всего лишь несколько строк, но это составляет массу запросов HTTP и сгенерированного кода, который душит браузер. Поскольку мы никогда не видим этот код, это не кажется нашей ошибкой — мы просто написали наименьшее количество возможного кода. Конечно, добавление еще одного скрипта с пятью строками кода не может изменить ситуацию?
Так что это где мы должны начать думать больше о том, что мы делаем прямо сейчас. Мы стали зависимыми от абстракций для самых простых вещей и следуем культу добавления большого количества инструментов-помощников, так как они делают вещи намного проще и необходимы для того, чтобы продукт был пригодным для поддержания и способного расти. Многие из лучших практик в веб-разработке были найдены и определены крупными компаниями, которые должны были создавать продукты, которые поддерживаются в разных странах и командах и должны противостоять запросам миллионов пользователей. Что является наилучшей практикой для Yahoo домашняя страница или Gmail не обязательно должно быть то, что делает ваш меньший продукт наиболее эффективным.
Джонатан Снук имеет отличный пример этого, когда он говорит о своем подходе SMACCS к написанию CSS. Он отмечает, что почти каждый продукт начинается с reset.css файла, но после завершения, удаление этого файла не показывает никакой разницы на всех, потому что для элементов, которые мы используем, мы определяем маржу, обивка и размер.
Ванильная диета для Интернета
Итак, вот что я предлагаю: мы должны поставить В Интернете на диете, используя ваниль веб-технологии, которая поставляется с браузерами. Как Алекс Рассел выразился в своем выступлении на Fronteers в этом году, если мы хотим изменить Интернет это до нас, чтобы двигаться вперед, и с помощью polyfills и библиотеки будущего налога мы в настоящее время платить.
Каждая успешная диета связана с изменением образа жизни. Для ванильной веб-диеты, вот что я предлагаю мы можем сделать, чтобы похудеть продуктов, которые мы строим. Это не будет применимо ко всему, конечно, и есть место, чтобы начать с библиотеки и абстракции слоя. Как я уже говорил, рано или поздно у нас будет среда, в которой библиотеки позволят нам создавать отличные приложения и продукты. Но для простого веб-сайта с несколькими усовершенствованиями, настало время мы перестанем случайным образом положить вещи вместе, потому что они выглядят блестящими или кажутся очень маленькими.
Принципы ванильной веб-диеты:
-
Постройте на том, что работает
Наш базовый слой должен быть HTML, простой и простой и делать то, что продукт предназначен для делать. То, что выглядит как кнопка, но ничего не делает, не помогает нашим пользователям. Когда все остальное не удается, HTML это то, что пользователи получают — давайте не лишать их этого. -
Отсутствие поддержки — это возможность
Если старый браузер не может сделать что-то, это позволяет нам проверить для этого и не дать ему, что функциональность. В 99% случаев, функциональность является приятно иметь и не нужны. -
Код, которым не доверяют конкретному браузеру, не доверяют
Каждая функциональность, которую вы делаете зависимой от кода с фиксированной браузером, добавляется к свалке кода, который ломается очень, очень скоро. -
Используйте сочетание технологий — каждый для того, что он делает лучше всего
Это очень заманчиво сделать все в JavaScript, но это не нужно. -
Задавайте вопросы
Что бы вы ни делали, должно быть завернуто в «если», убедившись, что только среды, которые могут применять то, что вы хотите получить его. -
Напишите столько, сколько необходимо, не в последнюю очередь возможно
Давайте подумаем о том, что мы пишем, прежде чем писать его, вместо того, чтобы добавлять много небольших, быстрых решений. -
Речь идет не о том, что вы можете добавить — речь идет о том, что мы не можем забрать
Базовая функциональность всегда должна быть там. -
Полезность превосходит согласованность в браузерах
Вместо того, чтобы дать каждому тот же опыт, всегда подумайте, что является лучшим способом обеспечить, чтобы люди могли использовать то, что мы строим. -
Загружайте только то, что нужно
Почему браузер должен получить библиотеку или файл данных, если он ничего не может с делать с ним? -
Анализ эффектов бьет добавление FX
Если вы хотите добавить блестящие вещи, убедитесь, что они могут выполнять в блестящей моды; никто не любит их браузер, чтобы замедлить для лага эффект. -
Сильные фонды избили возможного будущего дополнения
Много раз мы добавляем много кода и интерфейсов, чтобы обеспечить будущее, которое будет в них нуждается. Это будущее вряд ли когда-нибудь наступит. Давайте строить на данный момент.
Быстрый пример: Добавление видео на веб-сайт
Возьмем простой пример: добавление видео на страницу. Условный и обремененный лет веб-разработки, наше мышление может быть:
- HTML5 видео приятно, так как это родной для браузера, элементы управления легко доступны, и я мог бы построить свой собственный элемент управления с помощью JavaScript API, который поставляется с ним.
- Старые версии IE, однако, не воспроизводить HTML5 видео, так что мне нужно добавить Flash резервного копирования.
- Кроме того, не все браузеры поддерживают MP4, поэтому мне нужно иметь видео в двух форматах, MP4 и WebM, а также OGV, если я хочу поддержать еще старше Firefox и Opera.
Имея это в виду, мы, вероятно, получить видеоплеер от GitHub и использовать его. Видеоплеер будет достаточно умным, чтобы признать, что текущий браузер поддерживает и выписать Flash видео или родной видео. Это не поможет с кодек и браузер аудиенции, если мы также используем плеер, который обнаруживает, что и отправляет правильный формат, как Vid.ly.
Это делает всех счастливыми и гарантирует, что каждый может увидеть видео, не так ли? Правда, но это также добавляет много накладных расходов, которые на самом деле не нужны. Давайте подумаем о случаях использования здесь:
- Если я нахожусь в старом браузере, хочу ли я загрузить библиотеку JavaScript, иметь некоторое обнаружение происходит и получить Flash плеер? Что делать, если у меня нет Flash? Я загрузил библиотеку ни за что, и я до сих пор не могу добраться до видео на всех.
- Если я на самомоднейшем браузере, то я нагрузил архив, и если я имею вкомплектвспышку, то я получу игрок вспышки с всем потреблением памяти и накладными расходами памяти (предоставлено, это нет много, но на моем MacBook Air например, вентилятор главным образом начинает из-за вспышки).
Ванильный подход к диете будет следующим:
<pre><code class="language-markup"><video controls="">
<source src="hedgehogs.mp4" type="video/mp4">
<source src="hedgehogs.webm" type="video/webm">
<a href="hedgehogs.mp4" style="border: medium none;">
<img src="/web/20121114223746im_/https://www.smashingmagazine.com:80/2012/11/13/the-vanilla-web-diet/hedgehogs.jpg" alt="Frolicking hedgehogs">
</a>
Click image above to download video
</video></code></pre>
HTML5 видео-способных браузеров покажет видео, а другие получат просмотр изображения, связанные с видео. Таким образом, пользователи на старых компьютерах и плохих подключений или браузерах без HTML5 видео возможность получит изображение и может смотреть фильм в видео-приложении своей операционной системы. Они могут даже сделать что-то еще в то время как видео загрузки вместо того, чтобы смотреть на «буферизации» сообщение.
Является ли слишком много работы, чтобы иметь видео в двух форматах? Хорошо, использовать один и переместить ссылку из видео-тег — таким образом, вы предлагаете возможность скачать видео для всех на слоеное соединения:
<video src="https://www.smashingmagazine.com/2012/11/13/the-vanilla-web-diet/hedgehogs.mp4" controls="">
<img src="https://www.smashingmagazine.com/2012/11/13/the-vanilla-web-diet/hedgehogs.jpg" alt="Frolicking hedgehogs">
</video>
<a href="hedgehogs.mp4">Download video (MP4, 3MB)</a>Не хотите, чтобы ваше видео было загружаемым? Используйте Flash или Silverlight. Это не остановит никого, посвященный достаточно, чтобы загрузить его, но он гарантирует, что вы сделали вашу часть в обеспечении содержания. Он блокирует довольно много потенциальных клиентов и читателей, однако.
Другой пример: Расширяемые новости
Много раз мы используем библиотеку JavaScript, чтобы иметь некоторые заголовки, которые, при нажатии или перевернутой, показывают некоторые пункты под ними. j’s show() и hide() предназначены для этого и Есть множество плагинов, чтобы дать нам эту функциональность.
Если вы хотите сделать это в ванильной веб-диеты образом, нет необходимости в JavaScript. Начнем с HTML. Есть много правильных и неправильных способов сделать это — списки, списки определений, заголовки и div с и так далее. Многие час был потрачен впустую на форумах обсуждали то, что идеальный разметки для этого. Взяв листок из книги Николь Салливан, давайте применим некоторые OOCSS и сделаем себя независимыми от имен элементов, добавив классы:
<article class="collapsible">
<h1 class="trigger">Interesting news</h1>
<p class="content">Amazing stuff happened</p>
</article>Теперь, для того, чтобы сделать эти коллапса и расширить в гладкой форме, все, что нам нужно сделать, это применить некоторые CSS:
.collapsible .content {
overflow: hidden;
max-height: 0;
opacity: 0;
transition: 1s;
}
.collapsible:hover .content,
.collapsible:focus .content {
max-height: 200px;
opacity: 1;
}Здесь вы можете увидеть некоторые из принципов в действии. Старые версии IE не понимают max-height opacity или, поэтому они никогда не будут применять стили, которые скрывают содержание. Гораздо больше max-height нависшие и фокус государства гарантирует, что браузер расширяет содержание всю дорогу (он всегда будет идти на реальную высоту, единственная проблема, которую вы будете иметь, когда содержание выше, чем 200 пикселей, так что это то, чтобы указать на тот, кто я s поддержание кода). Переход на одну секунду гарантирует, что браузер делает это плавно, а не просто показывать содержимое. Браузеры, не поддерживающие переходы, по-прежнему отображаем и скрывают содержимое. Вы также можете добавить переходы, установленные браузером. Firefox и IE10 уже упал приставку для переходов и другие будут следовать.
Теперь, если вы хотите добавить onclick функциональность в заголовок, нам нужно немного JavaScript. Прежде всего, однако, мы меняем наш CSS искать класс на складной элемент вместо того, чтобы полагаться на нависть. Мы также делаем сокрытие зависимым от класса JavaScript, так как мы не хотим скрывать содержимое в браузерах, которые не отвечают всем требованиям нашего скрипта.
.js .collapsible .content {
overflow: hidden;
max-height: 0;
opacity: 0;
transition: 1s;
}
.js .collapsible.show .content {
max-height: 200px;
opacity: 1;
}Когда пользователь нажимает на заголовок, мы хотим добавить класс show к складной элемент, а затем удалить его в следующий раз, когда пользователь нажимает. Для этого все, что нам нужно, это один обработчик событий в документе. Чтобы удалить и добавить класс, мы можем изменить className свойство, но classList новые браузеры имеют гораздо более гибкую реализацию. Мы тестируем на то, что мы используем в заявлении if и в конечном итоге с не так много кода на всех:
if (addEventListener && 'classList' in document.body) {
document.body.classList.add('js');
document.addEventListener('click', function(ev){
var t = ev.target;
if (t.classList.contains('trigger')) {
t.parentNode.classList.toggle('show');
}
}, true);
}Старые версии IE не addEventListener() понимают, так что это не будет выполнено, как мы проверяем его существование. Если classList он поддерживается, мы применяем обработчик клика к документу. Затем мы тестируем и переключаем show класс, чтобы вызвать изменение CSS, используя classList всякий раз, когда элемент с триггером класса нажимает.
Больше?
Теперь вот идея: Я планирую написать книгу об этом, опубликованные с и Smashing Magazine. Я действительно считаю, что есть много можно сказать о вещах в HTML5, что браузеры теперь дают нам, и что позволяет нам писать простой и эффективный код для выпуска прагматических продуктов, а не добавлять много кода мы просто не нужно для того, что мы хотим достичь.
Если вы заинтересованы, быстро заполнить опрос ниже или напишите нам комментарий, и мы будем идти вперед.
Загрузка…
Источник: smashingmagazine.com
