This media is not supported in your browser
VIEW IN TELEGRAM
Снежный анимированный бэкграунд
Этот проект представляет собой фон со снегом, который вы можете настроить. Здесь можно выбрать направление ветра, которые заставляет снежинки лететь ровно вниз или под углом, а также время суток.
Подробнее можно посмотреть тут:
https://codepen.io/bawelna0225/pen/ZERwxmr
#codepen #фронтенд
Этот проект представляет собой фон со снегом, который вы можете настроить. Здесь можно выбрать направление ветра, которые заставляет снежинки лететь ровно вниз или под углом, а также время суток.
Подробнее можно посмотреть тут:
https://codepen.io/bawelna0225/pen/ZERwxmr
#codepen #фронтенд
👍33🤩3
This media is not supported in your browser
VIEW IN TELEGRAM
SVG-фейерверки
Этот генератор фейерверков позволяет создавать их в автоматическом и ручном режиме. Посмотреть, как он работает можно тут:
https://codepen.io/creativeocean/pen/jOzKZGR
#codepen
Этот генератор фейерверков позволяет создавать их в автоматическом и ручном режиме. Посмотреть, как он работает можно тут:
https://codepen.io/creativeocean/pen/jOzKZGR
#codepen
👍14🎉6💩1
Как войти в блокчейн через JavaSсript: создаём свой DeFi-проект на базе JS SDK смарт-контрактов Waves Enterprise
DeFi (Decentralized Finances) — обобщённое понятие для всех сервисов, предоставляющих финансовые услуги в децентрализованном формате. Это означает, что все операции с вашими активами прозрачны, ваши средства всегда вам доступны, и наложить на них какие-либо ограничения практически невозможно. Другими словами, это одна из причин почему так важен децентрализованный интернет и технологии, о которых сегодня так много говорят.
Попробуйте познакомиться с блокчейн и web3-технологиями с помощью привычного JavaScript. В этой статье вы сможете посмотреть, как создаётся и работает простой, но уже полноценный инструмент децентрализованных финансов:
https://habr.com/ru/company/web3_tech/blog/700626/
#javascript #web3
DeFi (Decentralized Finances) — обобщённое понятие для всех сервисов, предоставляющих финансовые услуги в децентрализованном формате. Это означает, что все операции с вашими активами прозрачны, ваши средства всегда вам доступны, и наложить на них какие-либо ограничения практически невозможно. Другими словами, это одна из причин почему так важен децентрализованный интернет и технологии, о которых сегодня так много говорят.
Попробуйте познакомиться с блокчейн и web3-технологиями с помощью привычного JavaScript. В этой статье вы сможете посмотреть, как создаётся и работает простой, но уже полноценный инструмент децентрализованных финансов:
https://habr.com/ru/company/web3_tech/blog/700626/
#javascript #web3
❤10👍7
Elm — забава или серьёзный инструмент?
Данный обзор познакомит вас с частичкой мира функциональных языков программирования, а именно с Elm — функциональным языком программирования, который компилируется во всеми любимый javascript. Кто-то узнает про этот инструмент, кто-то про то, что фронтенд — это не только HTML, CSS и JS.
Подробнее:
https://habr.com/ru/post/696718/
#elm #javascript
Данный обзор познакомит вас с частичкой мира функциональных языков программирования, а именно с Elm — функциональным языком программирования, который компилируется во всеми любимый javascript. Кто-то узнает про этот инструмент, кто-то про то, что фронтенд — это не только HTML, CSS и JS.
Подробнее:
https://habr.com/ru/post/696718/
#elm #javascript
👍9🍓2
Создание приложения погоды на Vue.js
Узнайте, как создать приложение погоды в Vue JS, используя Open Weather Map API и restful api для получения данных о погоде. При этом здесь также используется современный Javascript Fetch API наряду с методами и состояниями Vue JS.
Подробнее:
https://youtu.be/JLc-hWsPTUY
#видео #vue
Узнайте, как создать приложение погоды в Vue JS, используя Open Weather Map API и restful api для получения данных о погоде. При этом здесь также используется современный Javascript Fetch API наряду с методами и состояниями Vue JS.
Подробнее:
https://youtu.be/JLc-hWsPTUY
#видео #vue
👍12🤨10❤1👎1
This media is not supported in your browser
VIEW IN TELEGRAM
Новогодний лоадер со снежком
Этот лоадер на чистом CSS добавит новогоднего настроения вашему сайту. 3D-эффект здесь смотрится особенно хорошо, добавляя глубины и реалистичности. Посмотреть, как он реализован можно тут:
https://codepen.io/jkantner/pen/wvXbboe
#codepen #css #лоадер
Этот лоадер на чистом CSS добавит новогоднего настроения вашему сайту. 3D-эффект здесь смотрится особенно хорошо, добавляя глубины и реалистичности. Посмотреть, как он реализован можно тут:
https://codepen.io/jkantner/pen/wvXbboe
#codepen #css #лоадер
👍43
Новогодняя игра «Помощник Санты»
Если салаты уже нарезаны, шампанское охлаждается и вам пока что нечем заняться, то поиграть в игру «Помощник Санты». Ваша задача максимально проста — добраться как можно дальше переходя с одной печной трубы на другую.
Для особо любопытных там также доступен код игры, который вы можете изучить:
https://codepen.io/housamz/pen/KKgmMLm
#codepen #gamedev
Если салаты уже нарезаны, шампанское охлаждается и вам пока что нечем заняться, то поиграть в игру «Помощник Санты». Ваша задача максимально проста — добраться как можно дальше переходя с одной печной трубы на другую.
Для особо любопытных там также доступен код игры, который вы можете изучить:
https://codepen.io/housamz/pen/KKgmMLm
#codepen #gamedev
👍15🍾3🌚1
Анимация неонового свечения на CSS
Всего за 5 минут вы можете научиться создавать эффект неонового свечения с анимацией на чистом CSS. Без лишних слов и воды пошаговое руководство представлено здесь:
https://youtu.be/fWkzXZCIAuQ
#видео #фронтенд #css
Всего за 5 минут вы можете научиться создавать эффект неонового свечения с анимацией на чистом CSS. Без лишних слов и воды пошаговое руководство представлено здесь:
https://youtu.be/fWkzXZCIAuQ
#видео #фронтенд #css
👍29
Как использовать Redux для управления состоянием в масштабах всего приложения
Возможность иметь единое хранилище состояний — это то, что даёт Redux преимущество над традиционным контекстным API.
Давайте посмотрим, как мы можем наилучшим образом использовать Redux для управления состоянием всего приложения, написав более чистый и оптимизированный код:
https://www.freecodecamp.org/news/how-to-use-redux-for-application-wide-state-management/
#redux #фронтенд
Возможность иметь единое хранилище состояний — это то, что даёт Redux преимущество над традиционным контекстным API.
Давайте посмотрим, как мы можем наилучшим образом использовать Redux для управления состоянием всего приложения, написав более чистый и оптимизированный код:
https://www.freecodecamp.org/news/how-to-use-redux-for-application-wide-state-management/
#redux #фронтенд
👍13🍾3❤🔥1😱1💩1
This media is not supported in your browser
VIEW IN TELEGRAM
Feed the World
Милый codepen-проект, предлагающий в буквальном смысле накормить Мир, перетягивая еду прямо в рот.
Из интересного здесь стоит отметить отслеживание курсора, наличие звукового сопровождения, а также различные эффекты при кормлении разными предметами.
Попробовать можно тут:
https://tprg.ru/Kwkq
#codepen #gamedev
Милый codepen-проект, предлагающий в буквальном смысле накормить Мир, перетягивая еду прямо в рот.
Из интересного здесь стоит отметить отслеживание курсора, наличие звукового сопровождения, а также различные эффекты при кормлении разными предметами.
Попробовать можно тут:
https://tprg.ru/Kwkq
#codepen #gamedev
🥰13👍4👌4🤨2
Случайность в CSS
Иногда для генерации стилей нам необходим элемент случайности, чтобы не прописывать, например, размеры или цвет каждого элемента вручную. Но, к сожалению, в CSS такой возможности нет, поэтому приходится использовать JavaScript.
Или всё-таки можно обойтись без JS? В этой статье вы найдёте интересный способ рандомизации с помощью CSS:
https://medium.com/hypersphere-codes/randomness-in-css-b55a0845c8dd
#css
Иногда для генерации стилей нам необходим элемент случайности, чтобы не прописывать, например, размеры или цвет каждого элемента вручную. Но, к сожалению, в CSS такой возможности нет, поэтому приходится использовать JavaScript.
Или всё-таки можно обойтись без JS? В этой статье вы найдёте интересный способ рандомизации с помощью CSS:
https://medium.com/hypersphere-codes/randomness-in-css-b55a0845c8dd
#css
👍22
This media is not supported in your browser
VIEW IN TELEGRAM
Как создать браузерную «пипетку» с работой вне браузера
Знакомьтесь, EyeDropper API — небольшой JS API, позволяющий разработчикам добавить в их проект пипетку. С помощью неё пользователь может выбрать нужный цвет и веб-приложение зафиксирует его.
Подробнее о том, как это работает можно узнать тут:
https://patrickbrosset.com/articles/2021-11-24-how-i-built-an-eye-dropper-browser-extension/
#javascript #фронтенд
Знакомьтесь, EyeDropper API — небольшой JS API, позволяющий разработчикам добавить в их проект пипетку. С помощью неё пользователь может выбрать нужный цвет и веб-приложение зафиксирует его.
Подробнее о том, как это работает можно узнать тут:
https://patrickbrosset.com/articles/2021-11-24-how-i-built-an-eye-dropper-browser-extension/
#javascript #фронтенд
👍19👎2
Создайте многопользовательскую игру в крестики-нолики в реальном времени с помощью Socket.io and Vue
Салаты доедены, шампанское допито, поэтому можно и голову в порядок привести, чтоб не забыть как кодить после праздников. В этой статье вы создадите игру в крестики-нолики с нуля, используя Vue. Вы также интегрируете возможность онлайн-игры, чтобы два игрока могли играть в игру из разных браузеров одновременно.
Подробнее:
https://dev.to/nilmadhabmondal/build-multiplayer-realtime-tic-tac-toe-game-with-socketio-and-vue-5clp
#vue #socketio
Салаты доедены, шампанское допито, поэтому можно и голову в порядок привести, чтоб не забыть как кодить после праздников. В этой статье вы создадите игру в крестики-нолики с нуля, используя Vue. Вы также интегрируете возможность онлайн-игры, чтобы два игрока могли играть в игру из разных браузеров одновременно.
Подробнее:
https://dev.to/nilmadhabmondal/build-multiplayer-realtime-tic-tac-toe-game-with-socketio-and-vue-5clp
#vue #socketio
👍21
Лучшая коллекция генераторов CSS-кода
Сегодня существует множество генераторов CSS-кода, которые повышают производительность. В этой статье вы рассмотрите подборку инструментов, которые автор чаще всего использует, а также получите краткий обзор их основных функций и пример их использования:
https://blog.openreplay.com/a-top-collection-of-css-code-generators/
#css #фронтенд
Сегодня существует множество генераторов CSS-кода, которые повышают производительность. В этой статье вы рассмотрите подборку инструментов, которые автор чаще всего использует, а также получите краткий обзор их основных функций и пример их использования:
https://blog.openreplay.com/a-top-collection-of-css-code-generators/
#css #фронтенд
👍16
Создайте компонент диалогового окна, используя собственный элемент в Angular
В этой статье вы узнаете, как создать компонент диалогового, используя новый элемент диалога, который уже поддерживается всеми основными браузерами:
https://netbasal.com/create-a-dialog-component-using-the-native-dialog-element-in-angular-321aeda2908f
#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
Некоторые называют Web3 будущим интернета, а некоторые, наоборот, обманом и фикцией. Но знаете ли вы, что именно такое Web 3.0 и как это работает? В этой статье вы познакомитесь с новым измерением интернета и с тем, как начать работу в этой области с точки зрения разработчика:
https://betterprogramming.pub/has-anyone-seen-web3-a-complete-roadmap-free-resources-to-become-web3-developer-4e5dc9332c1f
#web3
👍15👎3🍾2
Олдскульные HTML-шаблоны снова в моде
«Перезагрузка страниц занимает ощутимое время, при этом пользователю не показывается даже спиннер! Что об этом говорят наши UX гайдлайны?» — таким вопросом задавались IT компании, принимая решение немедленно переезжать на
А потом появился веб-фреймворк Phoenix для языка Elixir, который вдохнул новую жизнь в серверный рендеринг. Сегодня это можно сделать и с помощью Python, а точнее фреймворка
https://habr.com/ru/post/701894/
#htmx #python
«Перезагрузка страниц занимает ощутимое время, при этом пользователю не показывается даже спиннер! Что об этом говорят наши UX гайдлайны?» — таким вопросом задавались IT компании, принимая решение немедленно переезжать на
single-page application. И на долгие годы рендеринг действительно переехал на сторону клиента, чтобы не заставлять страницы каждый раз перезагружаться.А потом появился веб-фреймворк Phoenix для языка Elixir, который вдохнул новую жизнь в серверный рендеринг. Сегодня это можно сделать и с помощью Python, а точнее фреймворка
htmx. Но подробнее об этом узнаете в статье:https://habr.com/ru/post/701894/
#htmx #python
👍12
Импортируем CSS-библиотеки из Figma прямо в среду разработки через Supernova
Дизайн токены — это базовые единицы проектирования интерфейсов, основа UI-компонентов: цвета, стили шрифтов, стили теней, размеры отступов и т.п. Они позволяют максимально упростить создание новых компонентов в рамках фреймворка, наладить взаимодействие между дизайнерами и разработчиками, а также привести работу команд к единому формату.
В этой статье автор рассказал, как в их компании токены передаются разработчикам через Supernova:
https://tproger.ru/articles/importiruem-css-biblioteki-iz-figma-prjamo-v-sredu-razrabotki-cherez-supernova/
#css #фронтенд
Дизайн токены — это базовые единицы проектирования интерфейсов, основа UI-компонентов: цвета, стили шрифтов, стили теней, размеры отступов и т.п. Они позволяют максимально упростить создание новых компонентов в рамках фреймворка, наладить взаимодействие между дизайнерами и разработчиками, а также привести работу команд к единому формату.
В этой статье автор рассказал, как в их компании токены передаются разработчикам через Supernova:
https://tproger.ru/articles/importiruem-css-biblioteki-iz-figma-prjamo-v-sredu-razrabotki-cherez-supernova/
#css #фронтенд
👍11
Frontity — настройка авторизации для приватных эндпоинтов WordPress
Этот туториал предназначен в первую очередь для новичков в разработке на Frontity (React framework для WordPress). Он помогает собрать в одном месте всю необходимую информацию для настройки авторизации для приватных эндпоинтов WordPress на примере получения коллекции меню (wp-json/wp/v2/menus).
Подробнее:
https://habr.com/ru/post/696650/
#wordpress #frontity #react
Этот туториал предназначен в первую очередь для новичков в разработке на Frontity (React framework для WordPress). Он помогает собрать в одном месте всю необходимую информацию для настройки авторизации для приватных эндпоинтов WordPress на примере получения коллекции меню (wp-json/wp/v2/menus).
Подробнее:
https://habr.com/ru/post/696650/
#wordpress #frontity #react
👍7