​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

​Превращаем устанавливаемые сайты в настоящие приложения

Прогрессивные веб-приложения стирают границы между приложениями и веб-сайтами. Они сочетают в себе как возможности сайтов, так и работу в автономном режиме, чтение файлов и так далее.

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

О том, как это сделать, узнаете в статье:

https://tprg.ru/E7Uc

#pwa

​​Настройка VSCode и Dev Tools

Лекция, посвящённая популярному редактору кода VSCode. Здесь вы научитесь настраивать его под собственные нужды, познакомитесь с полезными плагинами, которые ещё больше упростят работу с редактором, а также научитесь работать с Dev Tools.

Посмотреть лекцию можно тут:

https://tprg.ru/2QVj

#видео

Новогодняя ёлка

Продолжаем тему новогодних проектов на CodePen. На этот раз у нас красивая анимация svg-ёлки, сделанная с помощью JavaScript-библиотеки GSAP.

Изучить подробнее можно тут:

https://tprg.ru/RP5T

#codepen