Практика показывает (например, здесь: https://tprg.ru/zOJE), что добавление видео на сайт здорово повышает вовлечённость пользователей.

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

В этом руководстве от Google читайте, как работать с HTML-тегом video для вставки видео на страницу: https://web.dev/video-basics

#фронтенд #html

Skydive — это анализатор топологии сети и протоколов в режиме реального времени.

Документация и руководство по началу использования на гитхабе: https://github.com/skydive-project/skydive

#сети #инструменты

Руководство по созданию вот такого инструмента для выбора цвета одежды на сайте: https://tprg.ru/LTfE

А вот здесь только код: https://tprg.ru/rUaV

#фронтенд #css

Большой FAQ по вхождению во фронтенд

Даёт краткое, но ёмкое направление по оптимальному изучению стека технологий, которые используются во фронтенде: https://github.com/acilsd/wrk-fet

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

#фронтенд

Сайт, особенностью которого является то, что он пишет себя сам. Вы только посмотрите: https://www.strml.net/

#фронтенд

Инфраструктура компании как продукт

Инфраструктура — это то, от чего зависит работа и прибыль IT-бизнеса. Все процессы, которые происходят с кодом, зависят от бесперебойной работы серверов, ПО, внешних сервисов. Если инфраструктура не работает как надо, бизнес теряет прибыль.

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

Текстовая расшифровка доклада: https://tprg.ru/CW5D

#devops

jsonbox — бесплатное удалённое хранилище для JSON: https://jsonbox.io/

Сервис генерирует для вас URL, к которому вы сможете обращаться через API, чтобы сначала добавить, а затем читать и редактировать ваш JSON.

Документация: https://github.com/vasanthv/jsonbox#readme

#инструменты #api #json

Руководство по созданию бесконечного списка с помощью React и GraphQL: https://vk.cc/9PUotE

Кроме того, автор статьи создал отдельный компонент, который можно просто добавить в свой проект и использовать без написания кучи кода: https://github.com/frinyvonnick/react-simple-infinite-loading

#фронтенд #react #graphql

В этой статье рассматриваются советы по оптимизации CSS, которые можно использовать для повышения производительности интерфейса: https://tprg.ru/Mu7s

Также читайте:
— гайд по оптимизации от Google;
— чек-лист для фронтенда перед выпуском в продакшн;

#фронтенд #css

20 проектов на Vue.js с открытыми исходниками. Всё со ссылками на репозитории с кодом и на демки, которые можно потыкать: https://tprg.ru/7eKi

Пример создания приложения с использованием Vue.js: https://news.1rj.ru/str/tproger_web/171

#фронтенд #vuejs

Кроме канала про веб-разработку у нас ещё есть Типичный программист.

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

Подписывайтесь, если ещё не сделали этого: @tproger_official

Лучшие практики по кэшированию на сайте

Если совсем не париться про кэш (браузерный, конечно), то браузер постоянно будет обращаться к серверу за ресурсами. Это будет увеличивать время загрузки сайта и нагружать бэкенд. Будет ли от этого хорошо вашим пользователям и бэкендерам? Вряд ли.

В статье читайте, какие подходы к кэшированию существуют и что выбрать: https://tprg.ru/vUa4

#фронтенд #кэширование

Google Chrome, Mozilla Firefox и Cloudflare начинают поддерживать HTTP/3. С ним передача данных станет быстрее, надёжнее и безопаснее. В блоге Cloudflare читайте, чем этот протокол так крут: https://tprg.ru/jAg0

Владельцам сайтов на Cloudflare достаточно ткнуть одну кнопку в панели управления, чтобы передача данных проходила с использованием HTTP/3. Остальным придётся подключать поддержку самостоятельно.

Чтобы включить поддержку HTTP/3 в Chrome Canary, надо исполнить команду —enable-quic —quic-version=h3-23. Как это сделать, описано на сайте проекта Chromium: https://tprg.ru/hSGP

#http

История одной анимации

Однажды фронтендеру позвонил дизайнер и попросил сделать «паутинку» за запотевшим стеклом. Но потом оказалось, что это не «паутинка», а гексагональная сетка, и не за стеклом, а она уходит вдаль, и с WebGL фронтендер не знаком, а всей анимации пришлось учиться в процессе рисования.

Теперь этот фронтендер лично рассказывает, как провести одну анимацию от макета до сдачи клиенту так, чтобы все были довольны, и по дороге изучить WebGL. Также история включает в себя Three.js, GLSL, Canvas 2D, графы и немного математики.

Текстовая расшифровка: https://tprg.ru/QDMV

#фронтенд #анимация

Руководство по созданию небольшого приложения с использованием Angular и Apollo, клиентом GraphQLдля Angular: https://tprg.ru/6GHn

Только код — здесь: https://tprg.ru/pUY9

#фронтенд #angular #graphql

Эволюция создания веб-приложений на Java

История развития разработки веб-приложений на Java от появления спецификации сервлетов до настоящего времени: https://tprg.ru/NcyV

Автор восстановил хронологию появления технологий, библиотек, фреймворков и их популярность.

#java

Анимация притяжения и отталкивания частиц

В этом видео наш подписчик рассказывает, как создать интерактивный эффект притяжения и отталкивания частиц на чистом JavaScript.

Ссылка на код: https://codepen.io/ThreePixDroid/pen/JjPwEgR

Другие уроки по анимации:
— анимация хаотичных частиц;
— эффект волны;
— эффект электроразряда.

#фронтенд #javanoscript

Сборник упражнений для подготовки к сертификации разработчиков Kubernetes. Отлично подойдёт не только для подготовки к экзамену, но и просто для обучения: https://github.com/dgkanatsios/CKAD-exercises

#devops #kubernetes

Используем DOM как Pro

DOM API — это мощное и универсальное API, которое позволяет разработчику перейти на более низкоуровневое программирование и добиться при этом интересных результатов.

Рекомендуем статью, которая поможет перестать бояться DOM и начать его эффективно использовать: https://tprg.ru/PMwS

#фронтенд #javanoscript

Архитектура решений автоматизации бэкенда

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

Презентация: https://tprg.ru/hZvr

#бэкенд #тестирование

Несколько toggle-кнопок на чистом CSS вам в копилку. Исходники тут: https://csspoints.com/css-toggle-button/

#фронтенд #css