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

Сайт, на котором каждому коду состояния 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