20.06.2020 08:54
skillfactory_school 10 3800 Источник
Я занимаюсь созданием сайтов в том или ином виде с 1995 года. После 25 лет работы, думаю, что накопил опыта и теперь располагаю достаточными знаниями. Ниже в произвольном порядке изложено несколько моментов, о которых я бы хотел, чтобы начинающие разработчики поразмыслили.

  • Порой сайт — это всего лишь сайт.
  • Браузер уже является клиентом; 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

Узнайте подробности, как получить востребованную профессию с нуля или Level Up по навыкам и зарплате, пройдя платные онлайн-курсы SkillFactory:



Читать еще