Веб-страница
22.1K subscribers
2.18K photos
561 videos
2 files
4.46K links
Всё по фронтенду, бэкенду и девопсу в одном месте

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

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

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

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

Регистрация в перечне РКН: https://tprg.ru/64ai
Download Telegram
​Запись с онлайн-конференции PWA Summit 2021

На днях состоялась онлайн-конференция PWA Summit 2021, посвящённая PWA-разработке. На ней были представлены множество докладов по теме.

Если вы пропустили или не успели попасть но неё, то здесь вы найдёте полную запись:

https://tprg.ru/5iZu

#видео
​Поэтапное создание рабочей контактной формы в Next.js

Посмотрите, как создать контактную форму для сайта, которая направит вам e-mail. В этом случае пользователю не нужно копировать ваш e-mail адрес или открывать новое окно для отправки электронного сообщения. Ему достаточно ввести данные непосредственно в форму, чтобы вы получили это сообщение на свой почтовый адрес, как только оно будет отправлено.

https://tprg.ru/jats
Основные инструменты Kubernetes в 2021 году

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

Подробнее в статье:

https://tprg.ru/Tt90

#devops #kubernetes
Сюрприз
​Создание аккордеонов без лагов даже для слабых устройств

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

Подробнее:

https://tprg.ru/5xUM
This media is not supported in your browser
VIEW IN TELEGRAM
Реализация оценки, как на GitHub

Предложенная в этом CodePen-проекте система оценки очень похожа на таковую у GitHub. За тем исключением, что здесь ещё и добавлена приятная анимация.

Посмотреть на код проекта можно тут:

https://tprg.ru/nvY2

#codepen
​Почему вы используете минисервисы вместо микросервисов

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

Подробнее:

https://tprg.ru/UkEW
​Создание приложения для видеочата

Подробное видеоруководство по созданию приложения для видеочата, задействующее HTML, CSS и JavaScript для фронтенда и Agora.io SDK для работы с веб-камерой:

https://tprg.ru/W71z

#видео
​Я пытаюсь вспомнить, как центрировать DIV:
​Распространённые ошибки NPM, которых следует избегать каждому разработчику

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

https://tprg.ru/T8pv
Типичный программист ищет веб-разработчиков!

— фулстека: https://tprg.ru/cas2
— бэкендера: https://tprg.ru/YNPw
— фронтендера: https://tprg.ru/8XWJ

#вакансия
Безопасное манипулирование DOM с помощью Sanitizer API

Новый Sanitizer API позволяет безопасно вставлять строки в HTML, не опасаясь возможных уязвимостей и межсайтового скриптинга (XSS).

В этой статье автор делится подробностями работы нового API, а также рассказывает, как им пользоваться:

https://tprg.ru/9K67
​Всё, что нужно знать начинающему о Git

Без Git в разработке никуда. Без него сложно представить работу над каким-либо проектом в команде или даже в одиночку. Умение им пользоваться обязательно при работе с любым языком программирования.

В этом руководстве вы найдёте всю необходимую информацию для начинающих постигать его основы:

https://tprg.ru/PU2j

#git
​Дока — документация для веб-разработчиков на человеческом языке

Дока (не путать с Докой 2) — это опенсорсный проект, который содержит практически всю необходимую информацию для веб-разработчиков. Здесь и объяснение HTML-тегов, и примеры работы с CSS-стилями, и обучение JavaScript, а также полезные инструменты и статьи.

Если вы новичок или недостаточно опытный разработчик, то сохраните себе в закладки, а умудрённые опытом могут помочь проекту в развитии.

https://doka.guide/
This media is not supported in your browser
VIEW IN TELEGRAM
Когда смог изменить размер шрифта и называешь себя фуллстак
Каррирование и функции высшего порядка в JavaScript за 5 простых шагов

И каррирование, и функции высшего порядка — основа функционального программирования, доступного нам в JavaScript. Использование этого подхода позволяет нам переиспользовать компоненты, созданные на JS и улучшить производительность.

В этой статье на простых примерах объяснили, как это работает:

https://tprg.ru/wEOT

#фронтенд #javascript
​Создание реактивной формы angular на реальном примере

В этом уроке вы попробуете создать простую форму заказа пиццы, используя реактивные формы Angular по условному макету:

https://tprg.ru/p7xI

#angular
​Сайты для генерации вёрстки HTML/CSS, которые ускоряют разработку адаптивных интерфейсов

Многие из сайтов в подборке вы, вероятно, будете использовать ежедневно. Ещё бы, ведь здесь множество инструментов, которые избавляют вас от рутины, ошибок и ускоряют разработку:

https://tprg.ru/KBfc

#фронтенд
​VueUse как обязательная библиотека для Vue 3

Библиотека VueUse, если изучить все её возможности, может стать незаменимой для Vue-разработчиков. Смотрите сами, здесь есть простые утилиты, такие как получение координат мыши, так и различные сложные интеграции с Firebase, Axios, cookie, QR, а также анимации, расширения для стандартных хуков Vue, медиаплеер и многое другое.

В этой статье разобраны некоторые её возможности:

https://tprg.ru/ei20

#фронтенд #vue
Создание реактивных систем с помощью Node.js

Реактивные системы — это архитектурный стиль для распределённых систем, которые являются отзывчивыми, эластичными, отказоустойчивыми и управляемыми.

В этой статье вы узнаете о том, как Node.js применяется в реактивных системах, а затем шаг за шагом попробуете построить такую систему с помощью Node.js and Apache Kafka:

https://tprg.ru/Rc0L