ScrollTrigger: SVG Text Mask

Анимация скролла текстовой маски SVG. Реализована с помощью JavaScript и CSS.

#анимация #svg #javascript #css

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

Retrowave/Vaporwave Mountains

Анимация в стиле "ретро". Реализована с помощью JavaScript.

#анимация #javascript

https://codepen.io/pentagear/pen/xxVbBZy

@about_javascript

Телеграм бот на Node JS. Как создать тайм-трекер с помощью API Telegram Bot и веб хуков.

В данной статье вы узнаете, как вести учет рабочего времени с помощью Telegram Bot API и механизма веб хуков (англ. Webhooks). Мы разберем этапы создания, настройки и развертывания тайм-трекера. Но сначала хотелось бы рассказать, как эта идея пришла мне в голову. Если же вас интересует только техническая часть повествования, переходите сразу к следующему разделу.

Введение
Как-то в разговоре моя жена сказала, что ей нужно написать почасовой отчет о работе, проделанной за 3 последних месяца, и определить точное количество отработанных часов. Не имея в распоряжении никакого инструмента для регистрации рабочего времени, ей было довольно сложно рассчитать эти показатели по старым заметкам и чатам. Тогда она поддержала предложение своего руководителя создать группу в WhatsApp, куда будет отправлять сообщение в момент начала и окончания работы. Имеющиеся сообщения упростят составление подобных отчетов.

Идея отличная: телефон практически всегда под рукой, так что ничего не стоит просто написать слова “начало”/“окончание” или что угодно. Я вдохновился этой идеей и задумался о способах ее реализации. Часами я искал хороший инструмент для учета рабочего времени, руководствуясь следующими обязательными условиями: 1) он должен легко вводить сообщение “Задание выполняется” или “Задание готово”; 2) он работает на всех имеющихся устройствах.

Я опробовал несколько соответствующих приложений, которые запускались на компьютерах Mac, Linux и смартфонах, но ни одно из них меня не зацепило. Тогда я вернулся к способу учета времени, которым жена пользовалась на тот момент, и еще раз осмыслил классную задумку прописывать в мессенджере время начала и окончания работ. Изучив материал по теме ботов и веб хуков, я создал инструмент на основе Telegram.

➡️ Читать дальше

@about_javascript

Menja

Игра в которой нужно разбивать вылетающие блоки. Реализована с помощью JavaScript.

#игра #javascript #css

https://codepen.io/MillerTime/details/BexBbE

Interpolate Between Paths (draw with your pointer)

Анимация позволяющая делать наброски галограмм. Реализована с помощью JavaScript.

#анимация #css #javascript

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

Metrognome

Гном-метроном, выполненный с помощью CSS и библиотеки GSAP.js.

#css #js

https://codepen.io/hexagoncircle/pen/JjOaabp

@about_javascript

Planet Picker

Небольшое приложение на JS, в котором реализован просмотр информации о планетах солнечной системы.

#css #js

https://codepen.io/team/keyframers/pen/YoaeGg

@about_javascript

Профессия «Java Разработчик» от ProductStar — самое время качать навыки, когда конкуренция на рынке растёт в геометрической прогрессии.

Традиционно в каждом из курсов: практика после каждого из занятий, лекции от топовых спикеров, трудоустройство и помощь на испытательном сроке + недавно ребята добавили помощь с трудоустройством в зарубежные компании, а также часть компаний-работодателей теперь возвращают студентам ProductStar после трудоустройства от 50 до 100% стоимости курса. Хочешь затестить - возьми пробный урок.

Сейчас на курс действует скидка 24% и дополнительный промокод JAVA (скажите при общении с менеджером после заявки) для наших подписчиков на скидку 20 000 руб
Бонус — для тех кто оставит заявку на курс на этой неделе, получают курс по WEB-разработке.

Регистрация: https://go.productstar.ru/gjbcoc

3D Card Animation

3D-анимация карт. Реализована с помощью JavaScript.

#анимация #javascript

https://codepen.io/team/keyframers/pen/abywmrO

Hamburger Icons Animations

Несколько вариантов анимации иконки-гамбургера, реализованные с помощью CSS и JavaScript.

#js

https://codepen.io/ahmadbassamemran/pen/VQwPGr

Ещё один вариант нажатия на бургер-кнопку.

#бургеркнопки #меню

https://codepen.io/vrx/pen/BXEEGj

Анимация загрузки

Оригинальная анимация загрузки. Отлично подойдет для сайтов, где будет уместна подобная иконка.

#js #css #html #coden

https://codepen.io/kira-code/pen/BaYGwYg

Лучшие проекты с Github теперь доступны в одном канале.

Проекты , которые рреально помогут в разработке и помогут прокачать навыки программирования.

Смотреть

SpinKit — минималистичные загрузочные CSS-спиннеры

Они анимированы исключительно при помощи CSS

Пример того, как они выглядят, можно увидеть выше

Стоимость: #бесплатно

#css #анимации #web

@about_javascript

React теперь в телеграм!

- 40,14% разработчиков сайтов использовали React в 2021 году — это самая популярная библиотека для создания пользовательских интерфейсов;
- 196 850 звёзд у React на GitHub;
- 25,12% разработчиков хотят изучить React;
- 16.9 млн раз пользователи установили React

С каналом React JS вы сможете вывести свои навыки фронтенд разработки на совершенно новый уровень!

Перейти

You Must Build a Lighthouse.

Игра на HTML и SCSS. Каждый квадрат, в котором можно построить часть дома - radio кнопка, при активации которой задействуются CSS стили.

https://codepen.io/ivorjetski/pen/OJXbvdL

@about_javascript