Типичное сообщение с просьбой отключить AdBlock

​Создаём многопользовательские крестики-нолики с помощью 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

#фронтенд #дизайн

Создаём глаз, отслеживающий мышь, используя Vue 3, VueUse и CSS

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

https://tprg.ru/DPQX

#фронтенд #vue #css

​Когда фронтенд готов раньше бэкенда:

Накорми Мир!

Забавный 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

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

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

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

https://tprg.ru/TCgW

#codepen

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

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

https://tprg.ru/g95t

#codepen #фронтенд

​​Разработчик: мой сайт максимально понятен и прост в использовании

Пользователь:

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

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

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

https://tprg.ru/4KmO

#vue

Восход солнца на CSS

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

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

https://tprg.ru/ine9

#codepen

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

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

https://tprg.ru/8qFh

#фронтенд

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

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

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

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

https://tprg.ru/98xE

#javascript

​​Разработчики и баги в естественной среде обитания:

​Веб-альманах 2021

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

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

https://tprg.ru/K3PV

​Пример использования WebAssembly-модуля, скомпилированного из Rust, в React-приложении

Автор поделился собственным способом создания модуля WebAssembly, созданного на языке Rust. Особенно эта статья будет полезна тем, кто как и автор не владеет Rust, но хочет расширить собственные знания.

https://tprg.ru/JvwR

#webassembly #react