Веб-страница
24K subscribers
1.75K photos
534 videos
1 file
3.96K links
Всё по фронтенду, бэкенду и девопсу в одном месте

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

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

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

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

Регистрация в перечне РКН: https://tprg.ru/64ai
Download Telegram
Преподаватель Хекслета Никита Михайлов рассказал о влиянии контраста текста на доступность сайта. Из статьи вы узнаете:

— что такое коэффициент контраста;
— что такое относительная яркость;
— как вычислить коэффициент контраста;
— как контролировать контраст с помощью SASS.

https://tprg.ru/KZVR

#дизайн #фронтенд
Когда успел реализовать только фронт
3 полезных Telegram-скрипта

— bash-скрипт для выполнения бэкапа файлов и баз данных с отправкой уведомления в Telegram:
https://tprg.ru/G27k

— Уведомления об SSH–авторизации на сервере через своего Telegram–бота:
https://tprg.ru/Y9ZB

— Отправка сообщений и стикеров от бота в Telegram:
https://tprg.ru/L1nI

#веб #devops
Bad UX формы

Интерактивная коллекция форм ввода телефонного номера с адовым UX. Автор собрал девять худших практик, наглядно продемонстрировав, что всякому решению — своё место:

https://fun.mishasaidov.com/badux

А на сколько форм хватит ваших нервишек? Проверьте себя.

#дизайн #ux
Catchpoint покупает Webpagetest

Webpagetest.org, который всегда был бесплатным и даже дефолтным инструментом для проверки производительности веб-проектов, сегодня был куплен компанией Catchpoint — лидером в области мониторинга цифрового опыта.

Представители Catchpoint уверяют, что сделка позволит расширить возможности Webpagetest и географию тестирования производительности Webpagetest.org. Объединение инфраструктуры глобальной сети мониторинга с чрезвычайно популярными возможностями веб-тестирования производительности имеет все шансы создать не имеющую аналогов платформу.

А вот что произойдёт с доступностью ныне бесплатного сервиса — другой вопрос.

Подробнее на официальном сайте Catchpoint:
https://tprg.ru/7Y6B

#devops
14 лучших инструментов для веб-дизайнера

Автор статьи включил в список актуальные инструменты, которые помогут в создании макетов, графики и обеспечат эффективное управление проектами:

https://tprg.ru/cEWT

#фронтенд #дизайн
Badoo перешёл на TypeScript

Как удалось перенести на TypeScript большую кодовую базу React UI-компонентов, рассказал один из фронтенд-разработчиков популярного сайта знакомств. В своей статье он затронул причины перехода, вопросы типобезопасности, единства кодовой базы, поделился особенностями планирования, анализа и результатами:

https://tprg.ru/Zg3o

#typescript
Когда тебе нужно проверить изменения на фронте, которые вчера внесли ребята из бэкенд-команды
Рекомендуем книгу «Symfony 5: Быстрый старт», которая доступна онлайн на русском языке на официальном сайте Symfony:

https://tprg.ru/8iSZ

Книга включила в себя 30 шагов — от проверки рабочего окружения до изучения внутренностей PHP фреймворка: разберётся даже новичок.

#php #бэкенд #книги
👍1
Интерактивное руководство «JavaScript за 14 минут» на русском

В нём вы шаг за шагом будете узнавать новые особенности языка и сразу же применять знания на практике прямо в браузере:

https://tprg.ru/CB0d

Конечно, весь JavaScript за 14 минут вы не выучите, но это отличный способ освоить базис или просто вспомнить то, что уже подзабыли.

#javascript #фронтенд
Консольный клиент для GitHub

Недавно состоялся первый релиз инструментария GitHub CLI 1.0, который позволяет управлять своими проектами из командной строки. С его помощью можно заводить и просматривать сообщения об ошибках, создавать pull-реквесты, выводить статус проверок, управлять формированием релизов и многое другое.

Инструмент также предполагает создание скриптов с использованием GitHub API. Сборки доступны для Windows, macOS и Linux (deb, rpm). Код открыт под лицензией MIT.

Подробнее в официальном блоге GitHub:
https://tprg.ru/9ZgP

#devops #github
.банкомат { position: relative; top: -100cm; }
Let's Encrypt обновляет корневые сертификаты

Всё ли будет работать в привычном режиме, или от пользователей сервиса что-то потребуется?

Пользователям достаточно заглянуть в демо-версию получения ключей и сертификатов: это каталог с примерами файлов конфигурации, в которых подробно смоделированы профили сертификатов, и инструкцией по запуску. Суть в том, что команда сервиса разработала инструмент, который при соответствующей конфигурации сам может создавать все желаемые ключи и сертификаты.

Подробнее: https://tprg.ru/U6lM

#devops
Крутой инструмент, с помощью которого можно превратить любой веб-шрифт в трёхмерную надпись с эффектом движения при наведении курсора. Такое волшебство возможно благодаря сложенным друг на друга глифам, что смещаются с помощью функции translateZ() и вращаются благодаря rotateX()/rotateY() на родительском элементе.

Кодом автор поделился в своей статье, и там же можно найти дополнительные варианты 3D-визуализации:

https://tprg.ru/yrnq

#фронтенд #дизайн
Настало время сине-зелёных деревьев
Вышел Firefox 81

Из основных новшеств:

— В атрибуте sandbox элемента <iframe> добавлена поддержка флага allow-downloads для блокировки автоматических загрузок.
— Обеспечен разбор и построение дерева JSON-ответов с XSSI-защитой.
— Улучшена доступность элементов video и audio.
— У iframe'ов также удалена поддержка mozallowfullscreen: теперь следует использовать allow="fullscreen".
— Добавлена возможность просмотра в Firefox ранее загруженных файлов xml, svg и webp.
— Добавлена поддержка нестандартных HTTP-заголовков Content-Disposition с именами файлов с пробелами, не заключёнными в кавычки.

Кроме того, на стадию бета-тестирования перешла ветка Firefox 82, релиз которой намечен на 20 октября.

Подробнее: https://tprg.ru/ZfTx

#firefox
Почему псевдоэлементы ::before и ::after не работают для полей ввода и картинок

В CSS ::before и ::after нельзя добавлять к текстовым полям и изображениям, поскольку последние являются замещаемыми (replaced) элементами. Суть в том, что такие элементы замещаются содержанием, указанным в них. Например на месте <img> появляется изображение из атрибута src. А вот ::before и ::after дословно означают before и after content. У замещаемых элементов нет контента, поэтому псевдоэлементы с ними не работают.

Подробнее об этом читайте в статье: https://tprg.ru/VSIX

#css #html #фронтенд
Как вы знаете, Министерство цифрового развития России недавно предложило законопроект, согласно которому все сайты, использующие протокол шифрования TLS 1.3, будут заблокированы. Предлагаем вам пройти тест, в котором собраны 15 популярных сайтов — попробуйте угадать, какие из них будут работать, а какие могут быть заблокированы:

https://tprg.ru/MBr8

#тесты #безопасность
Анатомия браузера веб-разработчика
В техническом блоге Slack появилась статья о цикле разработки веб-форм. В статье освещаются вопросы валидации, локализации, пользовательского роутинга и тестирования полей форм. Информация подкреплена скриншотами и фрагментами кода:

https://tprg.ru/Ku87

#фронтенд
То, как браузеры планируют и выполняют сценарии, может повлиять на производительность веб-страниц. Держите шпаргалку по приоритетам загрузки JavaScript в Chrome:

https://tprg.ru/FKpM

#javascript #chrome