Новогодний лоадер со снежком

Этот лоадер на чистом CSS добавит новогоднего настроения вашему сайту. 3D-эффект здесь смотрится особенно хорошо, добавляя глубины и реалистичности. Посмотреть, как он реализован можно тут:

https://codepen.io/jkantner/pen/wvXbboe

#codepen #css #лоадер

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

Если салаты уже нарезаны, шампанское охлаждается и вам пока что нечем заняться, то поиграть в игру «Помощник Санты». Ваша задача максимально проста — добраться как можно дальше переходя с одной печной трубы на другую.

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

https://codepen.io/housamz/pen/KKgmMLm

#codepen #gamedev

​Анимация неонового свечения на CSS

Всего за 5 минут вы можете научиться создавать эффект неонового свечения с анимацией на чистом CSS. Без лишних слов и воды пошаговое руководство представлено здесь:

https://youtu.be/fWkzXZCIAuQ

#видео #фронтенд #css

​Как использовать Redux для управления состоянием в масштабах всего приложения

Возможность иметь единое хранилище состояний — это то, что даёт Redux преимущество над традиционным контекстным API.

Давайте посмотрим, как мы можем наилучшим образом использовать Redux для управления состоянием всего приложения, написав более чистый и оптимизированный код:

https://www.freecodecamp.org/news/how-to-use-redux-for-application-wide-state-management/

#redux #фронтенд

Feed the World

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

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

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

https://tprg.ru/Kwkq

#codepen #gamedev

​Случайность в CSS

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

Или всё-таки можно обойтись без JS? В этой статье вы найдёте интересный способ рандомизации с помощью CSS:

https://medium.com/hypersphere-codes/randomness-in-css-b55a0845c8dd

#css

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

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

Подробнее о том, как это работает можно узнать тут:

https://patrickbrosset.com/articles/2021-11-24-how-i-built-an-eye-dropper-browser-extension/

#javascript #фронтенд

Создайте многопользовательскую игру в крестики-нолики в реальном времени с помощью Socket.io and Vue

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

Подробнее:

https://dev.to/nilmadhabmondal/build-multiplayer-realtime-tic-tac-toe-game-with-socketio-and-vue-5clp

#vue #socketio

​Лучшая коллекция генераторов CSS-кода

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

https://blog.openreplay.com/a-top-collection-of-css-code-generators/

#css #фронтенд

​Создайте компонент диалогового окна, используя собственный элемент в Angular

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

https://netbasal.com/create-a-dialog-component-using-the-native-dialog-element-in-angular-321aeda2908f

#angular

​«Кто—нибудь видел Web3?». Полная дорожная карта и ресурсы для того, чтобы стать разработчиком Web3

Некоторые называют Web3 будущим интернета, а некоторые, наоборот, обманом и фикцией. Но знаете ли вы, что именно такое Web 3.0 и как это работает? В этой статье вы познакомитесь с новым измерением интернета и с тем, как начать работу в этой области с точки зрения разработчика:

https://betterprogramming.pub/has-anyone-seen-web3-a-complete-roadmap-free-resources-to-become-web3-developer-4e5dc9332c1f

#web3

​Олдскульные HTML-шаблоны снова в моде

«Перезагрузка страниц занимает ощутимое время, при этом пользователю не показывается даже спиннер! Что об этом говорят наши UX гайдлайны?» — таким вопросом задавались IT компании, принимая решение немедленно переезжать на single-page application. И на долгие годы рендеринг действительно переехал на сторону клиента, чтобы не заставлять страницы каждый раз перезагружаться.

А потом появился веб-фреймворк Phoenix для языка Elixir, который вдохнул новую жизнь в серверный рендеринг. Сегодня это можно сделать и с помощью Python, а точнее фреймворка htmx. Но подробнее об этом узнаете в статье:

https://habr.com/ru/post/701894/

#htmx #python

​Импортируем CSS-библиотеки из Figma прямо в среду разработки через Supernova

Дизайн токены — это базовые единицы проектирования интерфейсов, основа UI-компонентов: цвета, стили шрифтов, стили теней, размеры отступов и т.п. Они позволяют максимально упростить создание новых компонентов в рамках фреймворка, наладить взаимодействие между дизайнерами и разработчиками, а также привести работу команд к единому формату.

В этой статье автор рассказал, как в их компании токены передаются разработчикам через Supernova:

https://tproger.ru/articles/importiruem-css-biblioteki-iz-figma-prjamo-v-sredu-razrabotki-cherez-supernova/

#css #фронтенд

​Frontity — настройка авторизации для приватных эндпоинтов WordPress

Этот туториал предназначен в первую очередь для новичков в разработке на Frontity (React framework для WordPress). Он помогает собрать в одном месте всю необходимую информацию для настройки авторизации для приватных эндпоинтов WordPress на примере получения коллекции меню (wp-json/wp/v2/menus).

Подробнее:

https://habr.com/ru/post/696650/

#wordpress #frontity #react

​Видеуроки для самых маленьких фронтедеров:

Сегментированный прогресс-бар

Ловите анимированный прогресс-бар, который разделён на отдельные сегменты, позволяя отмечать конкретные этапы взаимодействия с вашим сервисом. Код для реализации аналогичного элемента доступен здесь:

https://codepen.io/jkantner/pen/poPWVbV

#codepen

​Трудности перевода в разработке: как делать интернациональные проекты и говорить с пользователями на одном языке

Как сделать ваше приложение удобным для пользователей из разных стран? Недостаточно просто написать перевод каждой кнопки под разные языки, ведь в разных странах по-разному организован контент на сайте и информация предоставляется тоже не одинаково. Взять, хотя бы, китайские и российские сайты — различия будут видны невооружённым взглядом.

Эту проблему решает интернационализация, которая отличается от обычного перевода и о которой пойдёт речь в этой статье:

https://habr.com/ru/company/vk/blog/699852/

Бесконечная бегущая строка

HTML-элемент <marquee> позволяет добавлять прокручиваемый текст на страницу. И долгое время им пользовались, но из-за проблем с его поведением тот был признан устаревшим и сейчас используются другие способы.

В этой статье вы узнаете, как реализовать бесконечную прокрутку элементов в виде бегущей строки с помощью HTML и CSS:

https://ryanmulligan.dev/blog/css-marquee/

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

​Как создать бота Discord с Node.js, Discord.js и OpenAI GPT-3

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

С помощью этого руководства вы создадите бота Discord, который сможет отвечать на сложные вопросы и выполнять требуемые задания. Для этой цели вам потребуется Node.js, Discord.js и OpenAI API для GPT-3, одной из самых крупных и умных обученных нейронных сетей. Подробнее:

https://nuancesprog.ru/p/16647/

#ml #nodejs

Telegram WebApps. Как встроить веб-приложения в чат-бота?

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

Эта статья — обзор основных моментов внедрения веб-приложений в телеграм-ботов. Она написана скорее для новичков или тех, кто хочет быстро узнать, «что к чему»:

https://habr.com/ru/post/706446/

#telegram