Cards Carousel

3D-карусель на чистом CSS. Переключение между слайдами реализовано при помощи radio-кнопок.

#html #css

https://codepen.io/TheMOZZARELLA/details/ZEawjmM

​PCjs-Machines – Эмулятор, позволяющий запускать оригинальные IBM PC и другие ретро-PC прямо у вас в браузере

PCjs использует JavaScript для воссоздания оригинальных ПЗУ, процессора, работающего на его исходной скорости, а также классический зеленый монохромный монитор MDA и почтенный «мерцающий» монитор CGA.

#GitHub #JavaScript #Emulator #Interesting

@javascriptv

Reflection

Анимация волн на изображении. Реализована при помощи JavaScript CSS.

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

https://codepen.io/jackiezen/pen/JjJxGOY

English for Developers - канал для тех, кто хочет учить технический английский. От создатателей популярного ит-канала Книги программиста.

1. техническая лексика
2. опросы на английском
3. шутки на английском

Подписывайтесь, проходите опросы, читайте полезные прогерские фразы на английском: english_forprogrammers.

1 канал вместо тысячи учебников и курсов

CSS LEGO Minifigure Maker - макет игрушки лего.

https://codepen.io/joshbader/pen/MZMzjr

@javascriptv

✔️ ​Demodal

расширение для браузера, которое автоматически удаляет окна блокировки контента

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

#GitHub #JavaScript #Web #Useful #Interesting

⚙️ Github

@javascriptv

⤴️ Как улучшить код на TypeScript: 5 рекомендаций

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

Хотите писать код на TypeScript элегантно и профессионально? Тогда следуйте рекомендациям, основанным на лучших практиках!

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

@javascriptv

Sliding Icon Menu

Меню с анимацией скольжения между пунктами-иконками. Реализовано с помощью CSS и JavaScript.

#css #js

https://codepen.io/ste-vg/pen/jONPjoV

@javascriptv

​face-api.js – JavaScript API для обнаружения и распознавания лиц в браузере и nodejs на основе tensorflow.js

Еще в репозитории можно найти кучу полезных ссылок на интересные статьи

⤷ Ссылка на проект

@javascriptv | #Interesting #TypeScript

Generative UI - Orb Animation [pixi.js] + Frosty Elements

Пользовательский интерфейс и анимация сферы с морозными элементами. Реализован с помощью JavaScript.

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

https://codepen.io/georgedoescode/pen/XWNmvro

@javascriptv

Rockpack – данный инструмент позволяет создавать «каркас» React приложения в стиле create-react-app

Основная идея - сократить время настройки проекта с недель до 5 минут

⤷ Ссылка на проект

@javascriptv | #Interesting #JavaScript #React

Expandable Animated Card Slider

Расширяемый слайдер анимированных карт. Реализован с помощью JavaScript.

#анимация #карточка #javascript

https://codepen.io/yudizsolutions/pen/wvzrPoj

@javascriptv

​Coderoad – расширение VSCode, которое позволяет создавать и воспроизводить интерактивные учебные пособия по разработке/написанию кода

Работает с множеством языков: JavaScript, Python, Bash, SQL и многие другие

⤷ Ссылка на проект

@javascriptv | #Interesting #JavaScript

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

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

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

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

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

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

@javascriptv

Как легко управлять зависимостями в монорепозитории JS

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

В некоторых случаях монорепозитории упрощают и ускоряют разработку, а также обеспечивают возможность совместно работать над кодом. Многие компании, от Google и Uber до стартапов, порой используют монорепозитории ради этих преимуществ.

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

Уделим внимание одной из самых наболевших проблем монорепозитория — управлению зависимостями. Посмотрим, как с помощью инструментов с открытым исходным кодом, таких как рабочие среды Pnpm и Yarn, а также Bit, можно элегантно решить эту задачу и значительно упростить работу с зависимостями.

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

@javascriptv

WARP

Красивая анимация плавающей голограммы. Реализована с помощью JavaScript.

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

https://codepen.io/al-ro/pen/oRZLbd

@javascriptv

​Fakebrowser – Браузер, что умеет подделывать нажатия пальцев для обхода анти-бот систем.

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

#GitHub #JavaScript #Interesting #Browser

@javascriptv

Fish Spinner - загрузчик для сайта. Спинер сделан при помощи CSS и JS

https://codepen.io/chrisgannon/pen/gOzgXve

@javascriptv

Morphing Submit Button

Кнопка отправки морфинга. Реализована с помощью JavaScript.

#кнопка #javascript #css

https://codepen.io/toshiya-marukubo/pen/dypmMQq

cpc-days | 3d carousel

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

#3D #карусель #css #javascript

https://codepen.io/MarkBoots/pen/ExbbvOv

@javascriptv