Веб-страница
24.1K subscribers
1.74K photos
533 videos
1 file
3.94K links
Всё по фронтенду, бэкенду и девопсу в одном месте

Разместить рекламу: @tproger_sales_bot

Правила общения: https://tprg.ru/rules

Другие каналы: @tproger_channels

Сайт: https://tprg.ru/site

Регистрация в перечне РКН: https://tprg.ru/64ai
Download Telegram
Тестирование ClickHouse

ClickHouse — это поколоночная СУБД, которую разрабатывают в Яндексе. В неделю в проекте создаётся около 40 пул-реквестов, что требует хорошей автоматизированной инфраструктуры тестирования кода на всех уровнях.

Один из разработчиков ClickHouse рассказывает, как устроен CI проекта и из каких компонентов состоит pipeline тестирования.

Также в докладе:
— особенности покоммитных сборок с разными конфигурациями в различных OS;
— все этапы тестирования: статический анализ кода, интеграционные тесты и тесты производительности;
— преимущества, которые даёт CI: удобство в обнаружении багов, организация двухнедельного релизного цикла и улучшение работы с контрибьюторами.

Презентация доклада: https://tprg.ru/FpRV

#бэкенд #ci #тестирование
Как работает PageSpeed Insights

Один из самых популярных инструментов для анализа веб-страницы — PageSpeed Insights от Google. Вы ему — страницу, он вам — оценку. Знаете, как он работает?

Около года назад Google полностью обновил его. Теперь на оценку сайта в первую очередь влияет реальная скорость загрузки страницы, а не какие-то технические пункты. Также теперь в приоритете при оценке сайта — его мобильная версия. Наиболее важные характеристики — через сколько времени после начала загрузки уже что-то видно, когда уже можно кликать, когда загрузится всё.

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

В этой статье автор разбирается, как PageSpeed Insights рассчитывает показатели скорости. Эти знания помогут более осознанно относиться к оценке и эффективно дорабатывать сайт: https://tprg.ru/how-google-pagespeed-works

#инструменты
This media is not supported in your browser
VIEW IN TELEGRAM
Зачем изобретать велосипед, когда он уже и так изобретён? Так можно сказать про многие вещи из области разработки. В этом посте речь про интерфейс поиска.

С помощью этой библиотеки на React можно быстро реализовать простой и кастомизируемый поиск: https://github.com/elastic/search-ui

В репозитории подробно расписано, как библиотеку запустить и использовать.

#фронтенд #react
Давайте разбираться. Есть 3 варианта:

— На старте запустить N процессов, которые будут жить всегда.
Плюсы: процессы всегда готовы обработать запрос, их не надо запускать.
Минусы: постоянно используются ресурсы, нет масштабируемости.

— Запускать на каждый запрос новый процесс.
Плюсы: всегда используется ровно столько ресурсов, сколько нужно.
Минусы: на запуск процессов и их убийство тоже нужны ресурсы, задержки возрастают.

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

Очевидного лидера среди трёх вариантов нет, всё зависит от конкретного кейса. Рекомендуем статью, которая поможет определить, что подойдёт для вашего случая: https://tprg.ru/php-fpm-configuration

#бэкенд #php
Признак простого в поддержке кода — когда разработчики могут легко и быстро изменять любую его часть, не затрагивая других его фрагментов. К CSS это также относится.

Рекомендуем перевод статьи из двух частей. Сначала автор приводит примеры плохих CSS-практик, от которых лучше избавиться. А затем рассказывает, как писать хороший CSS.

Читайте и применяйте: https://tprg.ru/l918

#фронтенд #css #лучшиепрактики
Видеокурсы по лучшим бесплатным движкам для сайта

Если нужно быстро написать полноценный сайт, то можно воспользоваться готовыми CMS. За короткое время они позволяет развернуть, например, лэндинг компании или сайт со своим портфолио.

В этой статье мы собрали видеокурсы на русском языке по популярным бесплатным движкам для сайта — Joomla, WordPress, MODX и Drupal: https://tproger.ru/video/free-cms-educational-videos/

#фронтенд
Аварии помогают учиться

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

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

Вот текстовая версия доклада: https://habr.com/ru/company/oleg-bunin/blog/458924/

#devops
Amazon открыл исходный код языка запросов PartiQL

Он позволяет работать с данными, независимо от того, где и в каком формате они хранятся. Можно запрашивать данные из реляционных БД, из NoSQL БД, из различных файловых систем. Подробности релиза: https://tprg.ru/J4oL

Спецификация языка: https://partiql.org/assets/PartiQL-Specification.pdf
Руководство по началу работы: https://partiql.org/tutorial.html
Исходники на гитхабе: https://github.com/partiql/partiql-lang-kotlin

#бэкенд #базыданных
Мы тут в соседнем канале присылаем самые важные IT новости в виде забавной подборки. Пишем простым языком. 1 раз в сутки по будням.

Ждём вас: @tprogerdaily
Программист из Нью-Йорка за пару лет накопил более 80 различных инструментов и ресурсов для веб-разработки и дизайна, которыми и поделился с сообществом: https://webdevresources.info/

Есть и прикладные инструменты для CSS, HTML, JS, а есть и ресурсы, на которые можно просто заглянуть за вдохновением.

#фронтенд #инструменты
Набор лучших практик для создания современных веб-приложений

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

Если при разработке учесть все 12 пунктов из документа, то получится приложение, которое:
— не будет зависеть от среды выполнения;
— подойдёт для развёртывания на современных облачных платформах;
— позволит использовать непрерывное развёртывание;
— сможет легко масшабироваться.

В общем, рекомендуем почитать русский перевод этого документа: https://12factor.net/ru/

#лучшиепрактики
This media is not supported in your browser
VIEW IN TELEGRAM
Рекомендуем новое видео от нашего подписчика. На этот раз он создал анимацию волны из точек на чистом JavaScript.

Видеоурок: https://www.youtube.com/watch?v=Lnz8waUSTXA
Файлы проекта: https://gofile.io/?c=iSyILe

Его предыдущие уроки:
визуализация звука из mp3-файла;
анимация хаотичных частиц.

#фронтенд #javascript
Для чего мы вам показываем Windows 95? Потому что она в браузере. Зачем? Пользователям — поностальгировать. Разработчикам — попрактиковаться на необычных задачах. Например, эта симуляция ОС написана на React.

У нас на сайте есть подборка из 9 таких классических операционных систем, работающих в вебе: https://tproger.ru/digest/classic-os-in-browser/

#кек #ос
Курс по CSS Grid

В этом видеокурсе рассматриваются:
— основные понятия грида;
— явная и неявная сетки;
— расположение и выравнивание элементов по сетке;
— настройка сетки;
— вложенные гриды и подгриды.

Все видео курса — в плейлисте на YouTube: https://tprg.ru/giM9

#фронтенд #css
Осваивать такую тему, как SQL, лучше всего на конкретных задачах, а не на скучных теоретических лекциях.

В этой статье автор собрал более 75 практических задач на SELECT. Причём перед вами будет одна схема базы данных, и все задачи будут построены вокруг неё: https://habr.com/ru/post/461567/

#бэкенд #базыданных #sql
This media is not supported in your browser
VIEW IN TELEGRAM
На видео в посте — это выдача поиска в Яндексе. Если перейти на выдачу по картинкам — шапка будет такой же, несмотря на то, что это отдельный репозиторий, которым занимается отдельная команда, возможно, даже на других технологиях.

Казалось бы, что там сложного? Ну сверстали два раза шапку, вроде дело нехитрое. За каждой кнопочкой в шапке тоже свой отдельный богатый внутренний мир. Тут появляются какие-то попапы, там тоже что-то можно понажимать. Всё это переводится на разные языки, работает на разных платформах.

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

Для этого в Яндексе есть выделенная команда «Лего», которая занимается общими штуками в интерфейсах. Её руководитель рассказывает про особенности её работы.

Видеоверсия доклада: https://tprg.ru/aK0j
Текстовая версия: https://tprg.ru/bN7I

#фронтенд #вёрстка
Чек-лист для Dev-Ops инженеров на примере AWS CloudFormation

Там найдёте всё, что нужно для разработки под AWS CloudFormation:
— готовые шаблоны для проектов;
— локальные DevOps-инструменты для JetBrains IDE, VS Code и других IDE;
— ресурсы и советы по разработке, администрированию, безопасности и тестированию.

Читать: https://tproger.ru/articles/cloudformation-developers-plan/

#devops #инструменты
Бесплатный Java-митап

Его проведёт Альфа-Банк в эту пятницу, 9 августа, в 19:00.

Всего будет 3 доклада от спикеров из Альфа-Банка на следующие темы:
— отказоустойчивость сервисов и интернет;
— тестирование сервисов с Spring Cloud Contract;
— аутентификация в Альфа-Банке.

Чтобы попасть, нужно просто зарегистрироваться: https://hr.alfabank.ru/events/backend-stories-4-0

Если хотите смотреть дома, то онлайн-трансляция мероприятия будет доступна в день мероприятия по ссылке: https://youtu.be/kY4lYiqxf7k

#ивенты #java
This media is not supported in your browser
VIEW IN TELEGRAM
KubeView — штука, которая визуализирует всё, что происходит внутри кластера Kubernetes: https://github.com/benc-uk/kubeview

Отображает объекты API и то, как они взаимосвязаны. Объекты выделяются разными цветами в зависимости от их статуса. По мере появления новых данных приложение динамически обновляет картинку.

Для похожих целей ещё есть Konstellate.

#kubernetes #инструменты
Шпаргалки и лучшие практики OWASP

В этом наборе собрана ценная информация по темам безопасности приложений в кратком и удобном формате: https://cheatsheetseries.owasp.org/

Рассматриваются самые разнообразные вопросы безопасности:
— безопасный процесс аутентификации;
— процесс восстановления забытого пароля;
— безопасность контейнеров Docker;
— защита веб-сервисов и многое другое.

#безопасность #лучшиепрактики #owasp
Двухфакторная аутентификация

2ФА — один из самых надёжных механизмов защиты аккаунтов на сегодняшний день. Её суть заключается в запросе у пользователя аутентификационных данных двух разных типов. Как правило, первый тип данных — логин и пароль, которые пользователь должен помнить, второй — SMS или какой-нибудь ещё вариант с привязкой к смартфону пользователя.

Один из таких вариантов — генерация 6-значных кодов на привязанном к аккаунту смартфоне. При создании аккаунта пользователю нужно отсканировать QR-код на сайте из специального мобильного приложения для кодов (например, Google Authenticator). Далее при каждом входе на сайт кроме логина и пароля нужно будет дополнительно ввести код из этого приложения. Таким образом, при краже пароля пользователя злоумышленник всё равно не сможет войти в аккаунт из-за двухэтапной защиты.

Наш подписчик создал проект, в котором реализовал этот механизм аутентификации. Его можно использовать для создания полноценной 2ФА, а можно написать приложение, вход в которое будет привязан только к кодам, которые генерит ваш смартфон.

Сайт-песочница, где можно протестить вход по коду из приложения: https://awap.pw/

Исходники проекта гитхабе:
— клиент: https://github.com/aleoheen/awap-client
— сервер: https://github.com/aleoheen/awap-server

Документация по REST API проекта: https://aleoheen.github.io/awap-server/

#безопасность #инструменты