Веб-страница
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
​Альтернативы Docker

Docker — одна из самых используемых контейнерных платформ. Но, как вы должно быть знаете, в версии 1.20 Kubernetes отказывается от использования Docker, а с августа этого года для некоторых компаний Docker стал платным.

Но повода для волнений нет, ведь существует несколько альтернатив популярному инструменту. Подробнее в статье:

https://tprg.ru/AqmU

#docker
👍1
Типичное сообщение с просьбой отключить AdBlock
🔥5👍1
​Создаём многопользовательские крестики-нолики с помощью Socket.io и Vue

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

Подробнее:

https://tprg.ru/3nLI

#vue
​Вышло крупное обновление Create React App 5.0

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

Подробнее обо всех изменениях можно узнать тут:

https://tprg.ru/uCzG

#react
​UX способа оплаты: как разработать селектор платежей

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

Как сделать качественный селектор платежей, узнаете тут:

https://tprg.ru/Gb19

#фронтенд #дизайн
This media is not supported in your browser
VIEW IN TELEGRAM
Создаём глаз, отслеживающий мышь, используя Vue 3, VueUse и CSS

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

https://tprg.ru/DPQX

#фронтенд #vue #css
👍2😱1
​Когда фронтенд готов раньше бэкенда:
This media is not supported in your browser
VIEW IN TELEGRAM
Накорми Мир!

Забавный codepen-проект, предлагающий в буквальном смысле накормить Мир. Вам нужно перетягивать еду прямо в рот Земле, как бы странно это ни звучало.

Из интересного здесь стоит отметить отслеживание курсора, наличие звукового сопровождения, а также различные эффекты при кормлении разными предметами.

Попробовать можно тут:

https://tprg.ru/Kwkq

#codepen
​10 вещей, которые можно делать в вёрстке с помощью ::before и ::after

Псевдоэлементы — мощный инструмент для создания дополнительной стилизации элементов без лишнего нагромождения DIV'ов. Использовать псевдоэлементы ::before и ::after можно для самых разных целей.

Подробнее о целях и способах их достижения читайте в статье:

https://tprg.ru/NajF

#фронтенд #css
​​Как создать браузерную «пипетку» с работой вне браузера

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

https://tprg.ru/kzmB

#javascript
​Глитч-эффект в тексте в чистом CSS

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

https://tprg.ru/N3t4

#css
👍1
Новогодняя игра «Помощник Санты»

Забавный новогодний codepen-проект. Это игра, где вам необходимо помогать Санте перебираться с дымохода на дымоход, для этого вы должны с помощью долгого клика построить мост.

Попробовать сыграть и посмотреть код можно тут:

https://tprg.ru/TCgW

#codepen
​Как украсить свой сайт к Новому году

Ловите подборку интересных проектов с Codepen с праздничными украшениями для сайта. Сейчас самое время немножко преобразить вашу веб-страницу.

https://tprg.ru/g95t

#codepen #фронтенд
👍1
​​Разработчик: мой сайт максимально понятен и прост в использовании

Пользователь:
😁7
​Брендирование изображений с помощью ImageKit и Vue.js

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

Если ваш проект на Vue.js, то вам повезло, ведь в этой статье вы найдёте исчерпывающую информацию, которая поможет вам автоматизировать эту задачу:

https://tprg.ru/4KmO

#vue
This media is not supported in your browser
VIEW IN TELEGRAM
Восход солнца на CSS

Эта красивая анимация восхода солнца создана без использования JavaScript. Всё нарисовано с помощью HTML и CSS.

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

https://tprg.ru/ine9

#codepen
​Добавление пользовательской темы для фронтенд-приложений

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

https://tprg.ru/8qFh

#фронтенд
​Как JavaScript-разработчики могут использовать конечные автоматы в своих проектах

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

Простейший пример использования — персонаж в игре, который может либо стоять, либо идти, бежать или прыгать.

А вот как использовать конечные автоматы в веб-разработке, узнаете тут:

https://tprg.ru/98xE

#javascript
​​Разработчики и баги в естественной среде обитания:
👎2🤡1
​Веб-альманах 2021

Недавно был опубликован веб-альманах этого года — отчёт о вебе, который основан на проверенных данных и выпускается разработчиками HTTP Archive. Мы собрали наиболее интересные факты из него специально для вас.

Как развиваются HTML, CSS и JS можете прочитать здесь:

https://tprg.ru/K3PV
👍1