SVG-фейерверки

Этот генератор фейерверков позволяет создавать их в автоматическом и ручном режиме. Посмотреть, как он работает можно тут:

https://codepen.io/creativeocean/pen/jOzKZGR

#codepen

​Как войти в блокчейн через JavaSсript: создаём свой DeFi-проект на базе JS SDK смарт-контрактов Waves Enterprise

DeFi (Decentralized Finances) — обобщённое понятие для всех сервисов, предоставляющих финансовые услуги в децентрализованном формате. Это означает, что все операции с вашими активами прозрачны, ваши средства всегда вам доступны, и наложить на них какие-либо ограничения практически невозможно. Другими словами, это одна из причин почему так важен децентрализованный интернет и технологии, о которых сегодня так много говорят.

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

https://habr.com/ru/company/web3_tech/blog/700626/

#javascript #web3

​Elm — забава или серьёзный инструмент?

Данный обзор познакомит вас с частичкой мира функциональных языков программирования, а именно с Elm — функциональным языком программирования, который компилируется во всеми любимый javascript. Кто-то узнает про этот инструмент, кто-то про то, что фронтенд — это не только HTML, CSS и JS.

Подробнее:

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

#elm #javascript

​Создание приложения погоды на Vue.js

Узнайте, как создать приложение погоды в Vue JS, используя Open Weather Map API и restful api для получения данных о погоде. При этом здесь также используется современный Javascript Fetch API наряду с методами и состояниями Vue JS.

Подробнее:

https://youtu.be/JLc-hWsPTUY

#видео #vue

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

Этот лоадер на чистом 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