Веб-страница
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
Рекомендуем книгу «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
Как ускорить сайт с помощью CDN

CDN (Content Delivery Network) — это географически распределённая сетевая инфраструктура, которая повышает производительность сайта за счёт использования распределённой сети серверов. Поскольку CDN снижают нагрузку на сервер, они также снижают затраты и подходят для обработки всплесков трафика.

В этой статье рассказывается, как работают сети CDN, разбирается оптимизация изображений, кэширование, протоколы TLS 1.3, HTTP/2, HTTP/3 и многое другое:

https://tprg.ru/qESv

#сети
Когда бэкендера попросили подобрать цвета для фронта
Улучшаем SEO с помощью Next.js

Это бесплатный открытый JavaScript-фреймворк, созданный поверх React, и работает он по принципу SSR.

В подходе SPA всё отрисовывается на стороне клиента, поэтому код подгружается, когда пользователь заходит на страницу. Но поисковый робот может просмотреть только изначальный код страницы, ещё не обработанный React’ом. И тут на помощь приходит технология SSR, которая позволяет запускать код на сервере и улучшать таким образом SEO.

Подробнее о Next.js и серверном рендеринге можно почитать здесь:

https://tprg.ru/HSR3

#javascript
Критика веб-компонентов

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

Автор статьи предполагает, что для включения веб-компонентов требуются строгие критерии:

— Никаких зависимостей, никакой начальной установки помимо добавления тега <script>. Если зависимости необходимы, компонент подгружает их автоматически.
— Всё, что можно сделать без JS, должно делаться без JS.
— Доступность по умолчанию благодаря осмысленным настройкам ARIA.
— Изменение тем оформления с помощью ::part(), выборочного наследования и кастомных свойств.
— Только один компонент каждого типа в каталоге, при этом гибкий, расширяемый и улучшаемый сообществом.

Подробнее в статье: https://tprg.ru/r7iP

#фронтенд
.голова { position: absolute; right: 5em; }
Дорожная карта full stack разработчика

Фулстек-разработчику необходим солидный багаж знаний и навыков. Новичкам, которые сходу хотят погрузиться в full stack, зачастую трудно подобрать правильный способ обучения.

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

https://dev.to/ender_minyard/full-stack-developer-s-roadmap-2k12

А в какой сфере работаете вы?

#фронтенд #бэкенд
Комментарии в Telegram

Если у вас обновилась десктопная, iOS или Android-версия телеги, то начиная с этого поста теперь можно оставлять комменты.

Если ещё не разобрались, как работают новоиспечённые комментарии, то в этом посте мы объяснили. Го тестить:
Шпаргалка по работе с Jenkins включила в себя:

— инструкцию по установке на Ubuntu;
— информацию о Pipeline;
— наиболее популярные плагины;
— типы Jenkins Jobs;
— советы и рекомендации.

Всё это с примерами и в формате PDF:
https://tprg.ru/wfrX

#jenkins #devops