Пришли посоветовать статью про красивую ленивую загрузку картинок на сайте.

По дефолту после парсинга дерева DOM изображения загружаются сразу на всей странице (даже за пределами экрана). Это занимает время и трафик, сайт грузится дольше. Но зачем, если картинки ещё не видны, а юзер может вообще до них не долистать?

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

Это круто, но не идеально: размеры картинки неизвестны заранее, и когда она подгружается, контент снизу «скачет». Тратятся ресурсы браузера на пересчёт вёрстки, да и просто выглядит некрасиво.

По сути нам нужны не сами размеры, а пропорции — ширина страницы может быть разная на разных устройствах. То есть картинка растягивается на 100% контейнера, а высота зависит от пропорций. Это самое типичное поведение.

Решений проблемы есть много, но самое красивое описано в статье: https://css-tricks.com/preventing-content-reflow-from-lazy-loaded-images/

#фронтенд #вёрстка

Лето — время не богатое на ивенты, но кое-что всё-таки есть.

2 июля в в петербургском офисе Одноклассников пройдет ok.tесh: frontend meetup.

Там ребята из ОК.ru, Яндекса и Mail.Ru Cloud Solutions будут рассказывать про тестирование на основе свойств, эволюцию подходов работы с текстами, библиотеку рендеринга EndorphinJS. Также обсудят переход фронтенда поисковых сервисов Яндекса на React.

Мероприятие бесплатное, нужно просто зарегистрироваться: https://oktech.timepad.ru/event/970538/

#ивенты

Архитектура веб-сервера nginx — модульная и событийно-ориентированная. При правильной настройке она выигрывает у потокового Apache в производительности.

Этот модульный генератор конфигов для nginx поможет сгенерировать лучший конфиг для вашего конкретного кейса: https://nginxconfig.io/

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

#бэкенд #nginx

Fontanello — это расширение для браузера, которое позволяет посмотреть стиль текста, просто щёлкнув по нему правой кнопкой мыши: https://fontanello.oktavilla.se/

С его помощью больше не нужно долго искать название шрифта, размер, цвет. Есть версии для Chrome и Firefox.

#фронтенд #инструменты

Как стать full stack разработчиком

https://tproger.ru/translations/full-stack-developer-roadmap/

По пунктам разбираем необходимые веб-разработчику навыки:
— вёрстка и дизайн;
— языки и фреймворки;
— базы данных и DevOps;
— вспомогательные инструменты.

#фронтенд #бэкенд

MySQLTuner — тулза для тестирования MySQL сервера. Даёт советы, как повысить его производительность и стабильность: https://github.com/major/MySQLTuner-perl

Прям говорит какие строчки надо поменять в конфиге. Обращаем внимание, что важно полностью понимать все изменения, которые вы будете вносить на сервер. На этот случай в репозитории чётко расписано, что именно проверяет MySQLTuner.

#mysql #инструменты

18 советов по CSS, которые сделают жизнь разработчика проще

https://tproger.ru/translations/css-rules/

Автор статьи много лет разрабатывал и поддерживал веб-проекты, поэтому прошарился в написании поддерживаемого CSS.

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

#фронтенд #css

Впервые за 2,5 года обновился гайд по настройке TLS для серверов Mozilla: https://wiki.mozilla.org/Security/Server_Side_TLS

Убрали поддержку TLS 1.0 и 1.1: теперь рекомендуемая конфигурация должна поддерживать TLS 1.3 или 1.2. В современной версии конфига вообще рекомендуется переход на TLS 1.3 без поддержки старых версий, но в России такой конфиг будет работать только на 66% браузеров (в мире на 75%).

Подробный список изменений можно изучить в первом комментарии к посту на Reddit: https://tprg.ru/y7js

А для обновления своих старых конфигов и генерации новых есть удобная тулза: https://ssl-config.mozilla.org/

#безопасность #tsl

Lazydocker — пользовательский интерфейс для управления докером.

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

Просмотр состояния, логов, метрик; перезапуск, удаление, восстановление контейнеров и сервисов. О том, как настроить это чудо, смотрите в репозитории: https://github.com/jesseduffield/lazydocker

#бэкенд #docker

БЭМ БЭМ БЭМ!

(Блок, Элемент, Модификатор) — компонентный подход к веб-разработке, разработанный в Яндексе. Он основан на разделении интерфейса на независимые блоки. С его помощью можно быстро разрабатывать интерфейсы любой сложности и повторно использовать существующий код.

Рекомендуем лекцию из Школы разработки интерфейсов, в которой рассматриваются основные концепции БЭМ и современная БЭМ-платформа: https://www.youtube.com/watch?v=o0AcvUIJxbE

#фронтенд

EnnageGrid — небольшой плагин, который позволяет добавлять на экран видимую анимированную сетку: https://github.com/AndrewNes/EnnageGrid

Его можно использовать для двух целей:

1. Делать трендовый дизайн. Например, вот пара примеров сайтов с такой сеткой:
— https://rafalbojar.com
— https://www.orano.group/experience/innovation

2. Верстать «пиксель пёрфект». Подключаете плагин на время разработки, делаете чёткую вёрстку и отключаете его.

#дизайн #вёрстка #инструменты

User Timing API

В браузере есть достаточно инструментов для анализа производительности сети, времени загрузки и т.п. Однако не всегда с их помощью можно чётко увидеть, что замедляет работу приложения.

А вот User Timing API специально для этого и создан. Он позволяет расставлять метки времени в JS-коде, с помощью которых и происходит измерение производительности. Эти метки поймёт и Chrome, и тест на производительность от Google (https://tprg.ru/V4Tl). В итоге можно увидеть, какие части скриптов исполняются долго, чтобы их оптимизировать.

Рекомендуем статью, в которой рассматривается этот API, а также примеры его использования: https://www.html5rocks.com/en/tutorials/webperformance/usertiming/

#инструменты #профилирование #javascript

Протокол исключения для роботов (REP) — важный компонент интернета. При помощи файла robots.txt он позволяет разработчикам исключать определённые страницы сайта из поисковой выдачи.

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

Теперь же компания Google решила сделать REP интернет-стандартом. Делают они это для того, чтобы помочь веб-разработчикам более грамотно парсить файлы robots.txt. Для этого корпорация даже открыла исходный код своей библиотеки на C++, которая используется для этой цели.

Подробности в блоге Google: https://tprg.ru/hl6x

Чистый код на PHP

В этом репозитории собраны принципы разработки ПО, взятые из книги «Чистый код» Роберта Мартина и адаптированные для PHP. Это руководство по созданию читабельного, переиспользуемого и пригодного для рефакторинга кода на PHP: https://github.com/peter-gribanov/clean-code-php

Большинство примеров в этой статье работают только с PHP 7.1+.

#php #чистыйкод

HTTP/2 push — это такой пуш, когда браузер запрашивает страницу, а сервер вместе с этой страницей отправляет сразу ещё какие-то файлы. Так делают, когда уверены, что эти файлы точно понадобятся и незачем делать для них отдельные запросы. Например, такими файламы могут быть CSS-стили.

Но есть проблема. В браузере есть механизм кэширования, чтобы одни и те же файлы не запрашивались дважды. Если отправлять файлы через HTTP/2 push, этот механизм работать не будет — мы не знаем заранее, есть ли этот файл в кэше браузера или нет. И получается передача лишних данных. Из-за этого механизм HTTP/2 push сделает только хуже.

Рекомендуем статью, которая рассказывает, как эту проблему решить. Как сделать так, чтобы при первом запросе нужные файлы пушились, а при последующих уже нет. И всё с учётом того, что эти файлы могут иногда меняться и в этом случае их всё равно надо пушить: https://css-tricks.com/cache-aware-server-push/

#кэширование

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

Многие владельцы сайтов обрабатывают персональные данные — например, собирают почтовые адреса для рассылки.

Два года назад в России ужесточили законодательство в этой области. Это связано с ужесточением законодательства в Евросоюзе.

Например, если в форме обратной связи нет ссылки на соглашение на обработку персональных данных, компания должна будет заплатить 50 000 рублей. Если на сайте нет политики конфиденциальности, ИП оштрафуют на 10 000 рублей, а компанию — на 30 000 рублей.

В блоге Tilda Publishing есть хорошая статья, в которой эксперт объясняет:
— что такое персональные данные;
— как сделать так, чтобы сайт соответствовал требованиям законов;
— и кого будут штрафовать за нарушения.

Рекомендуем ознакомиться и проверить свои сайты: http://tilda.education/articles-personal-data-law

Mozilla Observatory — анализатор сайтов, сосредоточенный на безопасности. Сканирует сайт и даёт конкретные советы, что и как стоит исправить: http://observatory.allizom.org

Ещё в нашей подборке есть 12 других сервисов для анализа сайтов. Где-то можно проверить скорость и удобство использования, где-то — SEO-оптимизацию: https://tproger.ru/digest/website-inspection-services/

#инструменты #анализ

Materia — это конструктор API для мобильных и веб-приложений: https://getmateria.com/

Сначала создаёте сущности и определяете зависимости между ними. Затем создаёте необходимые запросы, конечные точки API и ограничения к ним (например, необходимость регистрации для доступа к определённым данным).

Цель конструктора — автоматизировать рутинную работу и сделать жизнь фронтендера немного радостнее.

Краткий гайд по настройке и созданию простого приложения с помощью Materia: https://tprg.ru/1rkb

#фронтенд #api

Студия Bagaar создала сайт, который вызывает физическую боль. Его интерфейс впитал в себя всё самое худшее, что есть в веб-дизайне: https://userinyerface.com/

Баннер о cookies на треть экрана, ужасная форма регистрации, некликабельные кнопки, бесконечные капчи — всё самое «прекрасное» собрали в одном месте.

Вряд ли сегодня вы увидите что-нибудь хуже, чем это. Всем хорошей пятницы.

#дизайн

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

Всё со ссылками на репозитории с кодом и на демки, которые можно потыкать: https://tprg.ru/Mtsh

#фронтенд #vue

Наш подписчик во ВКонтакте поделился небольшим PWA-приложением, которое будет полезно тем, кто изучает веб-разработку.

Fylik — приложение, которое позволяет обмениваться файлами. Для это не нужно регистрироваться, обмен файлами полностью анонимный, а все загруженные файлы доступны на главной странице: https://fylik.ru

У Fylik открытый REST API и на нём можно тренироваться в написании клиентов под разные ОС и интеграции приложения с другими сервисами. А ещё можно покопаться в открытых исходниках клиентской и серверной частей проекта на GitHub.

Клиент: https://github.com/imilleriks/fylik-client
Сервер (API): https://github.com/imilleriks/fylik-server

Если хотите, чтобы о вашем проекте мы тоже рассказали, то пишите о нём в специальном обсуждении ВКонтакте либо просто кидайте в предложку или сообщения паблика: https://vk.com/tproger_web

#pwa