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

Сайт, на котором каждому коду состояния HTTP соответствует кот. Можно просто посмеяться с мемов, а можно использовать на своём сайте при возникновении определённой ошибки.

Сохраните себе и используйте при необходимости: https://http.cat/

#http

Видеоуроки по Vue.js

В них рассказывается о начале работы с фреймворком и основных его элементах. Первый урок — в посте, остальные — в плейлисте на YouTube: https://tprg.ru/yjOz

В курсе рассматривается только базовая информация о фреймворке. А дальнейшее изучение можно продолжить с помощью официальной русскоязычной документации: https://ru.vuejs.org/v2/guide/

Ещё у нас на сайте есть туториал по созданию простого приложения с Vue и Firebase для тех, кто уже немного изучил тему: https://tprg.ru/vue-and-firebase

#фронтенд #vue

​​Чистый код на JavaScript

«Качество кода измеряется в чтозанахах в минуту», говорит нам картинка. Зависимость обратно пропорциональная.

А этот репозиторий говорит нам, как применять к JavaScript практики, которые постулирует Роберт Мартин в книге «Чистый код»: https://github.com/ryanmcdermott/clean-code-javascript. Чтобы код можно было читать, переиспользовать и рефакторить.

Два варианта перевода на русский:
https://github.com/maksugr/clean-code-javascript
https://github.com/BoryaMogila/clean-code-javascript-ru/

Несколько дней назад делали пост про аналогичные принципы, адаптированные для PHP.

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

⁠Анимации на React Native

Можно бесплатно использовать в своих проектах. Ссылка на репозиторий: https://github.com/alexandrius/React-Native-Animation-Workshop

#reactnative

Видеолекции по PostgreSQL 10

Компания Postgres Professional выложила в открытый доступ видеолекции по администрированию PostgreSQL 10 в трёх частях. В них рассказывается об архитектуре PostgreSQL, базовых настройках, управлении расширениями, резервном копировании, построении кластеров и многих других темах.

Часть 1: https://postgrespro.ru/education/courses/DBA1
Часть 2: https://postgrespro.ru/education/courses/DBA2
Часть 3: https://postgrespro.ru/education/courses/DBA3

Также у них на сайте есть полный перевод документации последних версий PostgreSQL: https://postgrespro.ru/docs

#базыданных #postgresql

Мнение: использовать Let’s Encrypt — плохая идея

https://tproger.ru/translations/why-lets-encrypt-is-bad

Будет сайт отображаться в результатах поиска Google или нет зависит от того, использует ли сайт SSL. Проще говоря, начинается ли адрес сайта с «https».

Чтобы распространить использование SSL в интернете, был создан сервис Let’s Encrypt, с помощью которого можно бесплатно и в автоматизированном режиме получить SSL-сертификат. Его часто выбирают по принципу «сделал и забыл».

Звучит как прорыв в кибер-безопасности. Казалось бы, в чём может быть проблема?

Публикуем перевод мнения о том, что повсеместное использование Let’s Encrypt — плохая идея.

А вы что думаете?

#безопасность #https #ssl

Развёртывание Rails-приложения с помощью Docker и инструментов AWS

Туториал в трёх частях.

В первой части рассматривается принцип работы Docker, его компоненты, преимущества и недостатки в сравнении с виртуальными машинами. Происходит пошаговая сборка Rails-приложения в Dockerfile и запуск приложения и зависимых сервисов на локальной машине: https://dou.ua/lenta/articles/rails-tutorial-docker-1/

Во второй части реализовывается возможность хранения sensitive data приложения, создаётся Docker-образ для веб-сервера nginx, подготавливается конфигурация для развертывания staging-инфраструктуры и запускается staging-приложение на AWS: https://dou.ua/lenta/articles/rails-tutorial-docker-2/

А в третьей части показано развёртывание production-окружения: https://dou.ua/lenta/articles/rails-tutorial-docker-3/

#rails #docker

На сайтах можно встретить такую анимацию, где множество частиц хаотично двигаются и соединяются друг с другом в «созвездия».

Наш подписчик записал видеоурок, в котором рассказывает, как сделать эту анимацию на чистом JavaScript: https://www.youtube.com/watch?v=S6T41AZXFys

Исходники можно скачать по ссылке: https://tprg.ru/particles-animation-code

#javascript

⁠Сохранение изменений CSS

Как делает страдающий программист:
1. Изменяет CSS в консоли разработчика в Chrome.
2. Переносит всё это вручную в нужный файл для сохранения изменений.

Как не мучаться:
1. Откройте панель Sources.
2. Выберите таб Overrides.
3. Там кликните «Select Folder For Overrides».
4. Выберите директорию, в которой вы хотите сохранять изменения.
5. В верхней части окна появится запрос на чтение и запись в выбранную директорию. Разрешите.
6. Теперь изменяйте CSS, спокойно перезагружайте страницу и всё будет сохраняться.

#css #chrome

WordPress — один из самых популярных бесплатных движков сайтов в мире. По данным сервиса W3Techs, 34% сайтов во всём интернете работают на WordPress: https://tprg.ru/STn4

Налажать при разработке сайта на WordPress так же легко, как и разработать хороший.

Технолог блога компании PromoPult поделился собственным опытом работы с WordPress-блогом и его поддержкой. Он рассказывает, зачем заранее думать о масштабировании, как по максимуму использовать стандартные решения Wordpress и не забыть при этом об адаптивности для мобилок.

Рекомендуем к прочтению: https://tprg.ru/wordpress-blog-in-2019

#фронтенд #wordpress

Адаптивная вёрстка

Благодаря таким стандартам, как Flexbox Layout и CSS Grid Layout, адаптивный дизайн перестал быть чем-то сложным. Теперь реализовать его можно быстро, просто и без привлечения сторонних библиотек.

В лекции от Школы разработки интерфейсов рассматриваются практические примеры адаптивной вёрстки с использованием базовых и продвинутых инструментов (относительные величины измерений, нефиксированные размеры, media queries, srcset, тег picture): https://www.youtube.com/watch?v=5jTDpz7OXD4

Презентация лекции: https://tprg.ru/adaptive-layout-presentation

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

Front-End Checklist скажет, что нужно проверить на фронтенде, чтобы выпустить веб-проект в продакшн: https://frontendchecklist.io/

Как там с минификацией JS-файлов? Изображения оптимизировали? Про SEO не забыли? Всего около 100 пунктов для проверки.

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

#фронтенд

Пагинация в GraphQL Ruby

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

В этой статье автор рассказывает про стандартную реализацию пагинации в GraphQL Ruby и подробно поясняет не самые очевидные моменты. Почему hasPreviousPage и hasNextPage работают так странно? И почему нельзя узнать общее количество записей в базе без лишнего кода?

Ответы в статье: https://www.2n.pl/blog/graphql-pagination-in-rails

#graphql #rails

Sublime Text 3 для вёрстки

Автор видео уже много лет пользуется Sublime Text 3 для вёрстки. В видео он делится опытом, как с нуля установить и настроить редактор, а также использовать популярные плагины, которые помогут при вёрстке сайтов: https://www.youtube.com/watch?v=xWhTf_o86Lg

Все необходимые для работы ссылки — в описании. Для тех, кому удобнее читать, а не смотреть видео, есть текстовая версия: https://tprg.ru/sublime-text-3-guide

А вы каким редактором для вёрстки пользуетесь?

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