This media is not supported in your browser
VIEW IN TELEGRAM
Apple Mice
Анимация разных вариантов мышек, написана с помощью javascript и css.
#анимация #css #js
https://codepen.io/joshbader/pen/njKxzB
Анимация разных вариантов мышек, написана с помощью javascript и css.
#анимация #css #js
https://codepen.io/joshbader/pen/njKxzB
This media is not supported in your browser
VIEW IN TELEGRAM
💾 Changing Face Rating – шкала для оценки с анимированным смайликом, который меняется в зависимости от величины рейтинга.
@about_javascript
@about_javascript
This media is not supported in your browser
VIEW IN TELEGRAM
Bongo Cat Codes
Вы наверняка видели этот забавный мем в виде gif’ок или видео. Автор этого проекта решил реализовать его с помощью HTML и CSS, а вернее препроцессоров Pug и SCSS. Рисунок, разумеется, сделан с помощью SVG, а анимация реализована силами CSS.
Посмотреть код можно тут:
https://codepen.io/carolineartz/pen/VwYwZaP
#codepen #pug #scss
@about_javascript
Вы наверняка видели этот забавный мем в виде gif’ок или видео. Автор этого проекта решил реализовать его с помощью HTML и CSS, а вернее препроцессоров Pug и SCSS. Рисунок, разумеется, сделан с помощью SVG, а анимация реализована силами CSS.
Посмотреть код можно тут:
https://codepen.io/carolineartz/pen/VwYwZaP
#codepen #pug #scss
@about_javascript
This media is not supported in your browser
VIEW IN TELEGRAM
Glass Morphism
Приятная анимация кнопок.
#js #css #html #coden
https://codepen.io/katarzynamarta/pen/rNdbbVq
@about_javascript
Приятная анимация кнопок.
#js #css #html #coden
https://codepen.io/katarzynamarta/pen/rNdbbVq
@about_javascript
This media is not supported in your browser
VIEW IN TELEGRAM
Decryption Effect with Pseudo Elements
Эффект расшифровки с псевдоэлементами. Реализован с помощью CSS и JavaScript.
#анимация #css #js
https://codepen.io/georgehastings/pen/YNMEbe
Эффект расшифровки с псевдоэлементами. Реализован с помощью CSS и JavaScript.
#анимация #css #js
https://codepen.io/georgehastings/pen/YNMEbe
js2flowchart – Инструмент для визуализации JS-кода в виде flowchart диаграммы.
https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart
https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart
mojs – очень интересный инструмент для создания моушн-графики на JavaScript с очень красивыми демками
Библиотека обладает декларативным API и хорошим списком демок и туториалов
⤷ Ссылка на проект
@about_javascript | #JavaScript #Interesting
Библиотека обладает декларативным API и хорошим списком демок и туториалов
⤷ Ссылка на проект
@about_javascript | #JavaScript #Interesting
@about_javascript
Please open Telegram to view this post
VIEW IN TELEGRAM
Lucide
Lucide Icons
Beautiful & consistent icon toolkit made by the community.
В данном руководстве вы используете JavaScript для добавления интерактивности на веб-сайты, для разработки мобильных приложений, настольных приложений, игр, и в настоящее время JavaScript можно использовать для машинного обучения и AI.
https://github.com/Asabeneh/30-Days-Of-JavaScript
@about_javascript
Please open Telegram to view this post
VIEW IN TELEGRAM
GitHub
GitHub - Asabeneh/30-Days-Of-JavaScript: 30 days of JavaScript programming challenge is a step-by-step guide to learn JavaScript…
30 days of JavaScript programming challenge is a step-by-step guide to learn JavaScript programming language in 30 days. This challenge may take more than 100 days, please just follow your own pac...
Запросы на сервер. Fetch, XMLHttpRequest (XHR), Ajax
Умение работать с запросами — один из главных навыков разработчика, потому что запросы отправляются и принимаются постоянно различными частями приложений. В этом виде вы в простой и понятной форме сможете разобраться в том, как работают запросы, какие варианты существуют и как их применять:
https://youtu.be/eKCD9djJQKc
#javascript #виде
@about_javascript
Умение работать с запросами — один из главных навыков разработчика, потому что запросы отправляются и принимаются постоянно различными частями приложений. В этом виде вы в простой и понятной форме сможете разобраться в том, как работают запросы, какие варианты существуют и как их применять:
https://youtu.be/eKCD9djJQKc
#javascript #виде
@about_javascript
This media is not supported in your browser
VIEW IN TELEGRAM
Little Gallery
Небольшой пак фотографий/картинок в виде карточек, которые анимируются вот таким способом. Непонятно на сколько это практично, но как минимум это забавно.
#js #css #html #coden
https://codepen.io/yoann-b/pen/abEjWgq
Небольшой пак фотографий/картинок в виде карточек, которые анимируются вот таким способом. Непонятно на сколько это практично, но как минимум это забавно.
#js #css #html #coden
https://codepen.io/yoann-b/pen/abEjWgq
Создаём сайт портфолио с крутой анимацией
Видеоурок по созданию собственного сайта с диагональным плавным скроллом. Автор разбирает популярные техники и тренды веб-разработки, а именно:
— синхронизация вертикальных слайдов,
— CSS анимация скролла с инерцией,
— анимация при наведении.
Сайт выглядит современно и наполнен красивыми эффектами, но очень прост в реализации: https://youtu.be/oT0FN1PtmRU
#html #css #json
@about_javascript
Видеоурок по созданию собственного сайта с диагональным плавным скроллом. Автор разбирает популярные техники и тренды веб-разработки, а именно:
— синхронизация вертикальных слайдов,
— CSS анимация скролла с инерцией,
— анимация при наведении.
Сайт выглядит современно и наполнен красивыми эффектами, но очень прост в реализации: https://youtu.be/oT0FN1PtmRU
#html #css #json
@about_javascript
px3d – Experimental pixel 3d engine
Загружает сцену из блендера с помощью Three.js, и перерабатывает её в пиксельный вид, используя низкополигональные превращения.
🖥 Github
@about_javascript
Загружает сцену из блендера с помощью Three.js, и перерабатывает её в пиксельный вид, используя низкополигональные превращения.
@about_javascript
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Checkbox Animations With Indeterminate State
Анимированный checkbox, выполненный с помощью SVG, CSS и JavaScript.
#css #js
https://codepen.io/jkantner/pen/BaJmyjo
Анимированный checkbox, выполненный с помощью SVG, CSS и JavaScript.
#css #js
https://codepen.io/jkantner/pen/BaJmyjo
Vercel — веб-платформа для frontend-разработчиков
С её помощью можно очень легко и удобно развернуть собственный сайт. При этом размещать свои проекты можно с нулевой конфигурацией, а также автоматическим протоколом SSL и глобальной инфраструктурой CDN
Стоимость: #бесплатно (но платный тариф)
#web #frontend
С её помощью можно очень легко и удобно развернуть собственный сайт. При этом размещать свои проекты можно с нулевой конфигурацией, а также автоматическим протоколом SSL и глобальной инфраструктурой CDN
Стоимость: #бесплатно (но платный тариф)
#web #frontend
Forwarded from React JS
Более 100 копий и альтернатив популярных сайтов с открытым исходным кодом, таких как Airbnb, Amazon, Instagram, Netflix, TikTok, Spotify, WhatsApp, YouTube и т. д. Настоящий кладез проектов для веб-разработчика. Список содержит исходный код, учебные пособия, демонстрационные ссылки, технический стек. Многие из проектов реализованы на React.
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
🌀 VelocityJS demo
Подвижная анимация для загрузки. Реализована с помощью JavaScript и CSS.
#анимация #css #js
https://codepen.io/sol0mka/pen/eYgydO
@about_javascript
Подвижная анимация для загрузки. Реализована с помощью JavaScript и CSS.
#анимация #css #js
https://codepen.io/sol0mka/pen/eYgydO
@about_javascript
This media is not supported in your browser
VIEW IN TELEGRAM
tRPC – полезный инструмент, который позволяет легко и безопасно создавать и использовать API без схем или генерации кода
Совместим со всеми фреймворками и рантаймами JavaScript
🖥 Github
@about_javascript
Совместим со всеми фреймворками и рантаймами JavaScript
@about_javascript
Please open Telegram to view this post
VIEW IN TELEGRAM
Сегментированный прогресс-бар
Ловите анимированный прогресс-бар, который разделён на отдельные сегменты, позволяя отмечать конкретные этапы взаимодействия с вашим сервисом. Код для реализации аналогичного элемента доступен здесь:
https://codepen.io/jkantner/pen/poPWVbV
#codepen
Ловите анимированный прогресс-бар, который разделён на отдельные сегменты, позволяя отмечать конкретные этапы взаимодействия с вашим сервисом. Код для реализации аналогичного элемента доступен здесь:
https://codepen.io/jkantner/pen/poPWVbV
#codepen
HoverZoom – Расширение для браузера, которое позволяет масштабировать изображения / видео на всех ваших любимых веб-сайтах
Просто наведите указатель мыши на любое изображение, и расширение автоматически увеличит изображение до его полного размера
🖥 Github
@about_javascript
Просто наведите указатель мыши на любое изображение, и расширение автоматически увеличит изображение до его полного размера
@about_javascript
Please open Telegram to view this post
VIEW IN TELEGRAM
Embold — платформа для анализа исходного кода и выявления в нём проблем
Работать с инструментом достаточно просто. Для начала нужно подключить к нему свои репозитории. Затем Embold отсканирует их (автоматически или вручную ). В том числе запросы и коммиты внутри них
По итогу результаты сканирования доступны для изучения в веб-интерфейсе или с помощью различных плагинов
Стоимость: #бесплатно (но есть платные тарифы)
#web #баги
Работать с инструментом достаточно просто. Для начала нужно подключить к нему свои репозитории. Затем Embold отсканирует их (автоматически или вручную ). В том числе запросы и коммиты внутри них
По итогу результаты сканирования доступны для изучения в веб-интерфейсе или с помощью различных плагинов
Стоимость: #бесплатно (но есть платные тарифы)
#web #баги