Я занимаюсь созданием сайтов в том или ином виде с 1995 года. После 25 лет работы, думаю, что накопил опыта и теперь располагаю достаточными знаниями. Ниже в произвольном порядке изложено несколько моментов, о которых я бы хотел, чтобы начинающие разработчики поразмыслили.
Несколько человек заинтересовались, что я имел в виду, говоря “сохранить состояние клиента между загрузками страниц”. Это не хрестоматийно, но я имею в виду, что вы можете сделать что-то вроде этого:
![image](https://habrastorage.org/r/w780q1/webt/rd/kl/lr/rdkllrbtrth_kdpceb-vxzrxl1o.jpeg)
Узнайте подробности, как получить востребованную профессию с нуля или Level Up по навыкам и зарплате, пройдя платные онлайн-курсы SkillFactory:
- Порой сайт — это всего лишь сайт.
- Браузер уже является клиентом; HTML — это язык, на котором он разговаривает.
- Веб строится вокруг визуализации на стороне сервера.
- Вы можете предоставить данные несколькими способами; рассмотрите HTML как один из способов представления данных.
- Масштабирование на стороне вашего сервера поможет всем, в то время как масштабирование на стороне клиента, помогает только тем, у кого мощное железо и быстрое соединение.
- Не каждый имеет (или может использовать) мышку.
- Не каждый имеет (или может использовать) клавиатуру.
- Не каждый имеет (или может использовать) тачскрин.
- Не у каждого цвета и картинки отображаются так же, как и у вас.
- Не каждый имеет такие возможности обработки информации, какие имеете вы.
- Бесчеловечно перекладывать все на других.
- Родной для браузера HTML намного быстрее чем все, что бы вы там не написали на JavaScript.
- HTML уже идеально представляет узлы DOM.
- HTML — полноценный фреймворк.
- Вы вполне можете менять оформление в CSS.
- Прежде чем создавать компонент пользовательского интерфейса, проверьте, есть ли он в HTML. Если доступного нет, вероятно, есть тому причина. Добавление DOM к
div
илиspan
не лучший выход. - Не все должно быть “одностраничным приложением”.
- Даже если вам нужно сохранить состояние клиента между загрузками страниц (например, для воспроизведения музыки или видео), вы можете доверить браузеру выполнять большую часть тяжелой работы через поиск (fetch)новой страницы, и заменяя контент-контейнер на уровне DOM.
- Бесконечный скроллинг бесчеловечен. Люди должны быть в состоянии долистать “до конца”. Описанные в религиозных текстах мучения и то менее жестоки.
- Если вы должны сделать бесконечный скроллинг (а вы его не делаете), убедитесь, что внизу ничего не понадобится.
- Дайте людям постоянный, но произвольный стимул, и вы сформируете у них привычку. Подсадить людей на свой продукт может и кажется отличной идеей, но табачные компании идут по этому же пути.
- Если вы разрабатываете с учетом CDN, то обход сервера не будет медленным.
- Можно использовать несколько языков одновременно. Главное не делать все изоморфным.
- Всегда проверяйте свои данные на стороне сервера; все, что приходит от клиента должно вызывать подозрение.
- Разработчику «изоморфный» код разрушает барьер между клиентом и сервером. Для вредоносного клиента это означает, что он потенциально может контролировать сервер. Знайте, откуда приходят данные.
- Браузеры меняются. Полагаться на поведение конкретного браузера означает, что вы полагаетесь на этот, один, браузер в данный момент времени. Кодируйте по стандарту и везде тестируйте.
- Используйте полифиллы для браузеров, которые еще не поддерживают используемый вами стандарт.
- Копировать других — нормально; так мы учимся. Просто не делайте это бездумно.
Несколько человек заинтересовались, что я имел в виду, говоря “сохранить состояние клиента между загрузками страниц”. Это не хрестоматийно, но я имею в виду, что вы можете сделать что-то вроде этого:
<html><head>
<title>Div replacement test</title>
<script>
window.addEventListener('DOMContentLoaded', () => {
[].slice.call(document.getElementsByClassName("replace")).forEach(elem => {
elem.addEventListener('click', event => {
event.preventDefault();
fetch(elem.href)
.then(response => response.text())
.then(text => {
let parser = new DOMParser();
var other = parser.parseFromString(text, 'text/html');
document.title = other.querySelector('title').innerHTML;
var content = document.getElementById('content')
content.innerHTML = other.querySelector('#content').innerHTML
})
})
})
})
</script>
</head><body>
<section id="content">
<p>Here is the content container. <a class="replace" href="replaced.html">The other document</a></p>
</section>
<iframe width="560" height="315" src="https://www.youtube.com/embed/DLzxrzFCyOs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body></html>
![image](https://habrastorage.org/webt/rd/kl/lr/rdkllrbtrth_kdpceb-vxzrxl1o.jpeg)
Узнайте подробности, как получить востребованную профессию с нуля или Level Up по навыкам и зарплате, пройдя платные онлайн-курсы SkillFactory:
- Курс по Machine Learning (12 недель)
- Курс «Профессия Data Scientist» (24 месяца)
- Курс «Профессия Data Analyst» (18 месяцев)
- Курс «Python для веб-разработки» (9 месяцев)