tRPC – полезный инструмент, который позволяет легко и безопасно создавать и использовать API без схем или генерации кода
Совместим со всеми фреймворками и рантаймами JavaScript
🖥 Github
@about_javascript
⭐️ 100 проектов для веб-разработчика, которые помогут в прокачке навыков.
Более 100 копий и альтернатив популярных сайтов с открытым исходным кодом, таких как Airbnb, Amazon, Instagram, Netflix, TikTok, Spotify, WhatsApp, YouTube и т. д. Настоящий кладез проектов для веб-разработчика. Список содержит исходный код, учебные пособия, демонстрационные ссылки, технический стек. Многие из проектов реализованы на React.
✔️ Список
🖥 Clonewars
@react_tg
Checkbox Animations With Indeterminate State
Анимированный checkbox, выполненный с помощью SVG, CSS и JavaScript.
#css #js
https://codepen.io/jkantner/pen/BaJmyjo
Создаём сайт портфолио с крутой анимацией
Видеоурок по созданию собственного сайта с диагональным плавным скроллом. Автор разбирает популярные техники и тренды веб-разработки, а именно:
— синхронизация вертикальных слайдов,
— CSS анимация скролла с инерцией,
— анимация при наведении.
Сайт выглядит современно и наполнен красивыми эффектами, но очень прост в реализации: https://youtu.be/oT0FN1PtmRU
#html #css #json
@about_javascript
Запросы на сервер. Fetch, XMLHttpRequest (XHR), Ajax
Умение работать с запросами — один из главных навыков разработчика, потому что запросы отправляются и принимаются постоянно различными частями приложений. В этом виде вы в простой и понятной форме сможете разобраться в том, как работают запросы, какие варианты существуют и как их применять:
https://youtu.be/eKCD9djJQKc
#javascript #виде
@about_javascript
😘 Lucide — красивый набор инструментов для иконок, созданный сообществом и доступный практически для всех библиотек, фреймворков или других вариантов использования.
🔅Сайт
🔅Репозиторий
@about_javascript
js2flowchart – Инструмент для визуализации JS-кода в виде flowchart диаграммы.
https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart
Glass Morphism
Приятная анимация кнопок.
#js #css #html #coden
https://codepen.io/katarzynamarta/pen/rNdbbVq
@about_javascript
💾 Changing Face Rating – шкала для оценки с анимированным смайликом, который меняется в зависимости от величины рейтинга.
@about_javascript
Как программисту записать свой трек
Наиболее привычным инструментом для программиста является редактор кода. Поэтому и музыку создавать будем там. Для этого нам потребуется Slang — язык программирования звук на основе, созданный с применением JavaScript.
Подробнее о языке, а также инструкция по использованию здесь:
https://github.com/kylestetz/slang
#slang #javascript
Эй, заголовок, подвинься! Тут босс свой email вводит.
Пример применения:
🔶 ввод электронной почты для входа в аккаунт;
🔶 ввод электронной почты для отправки документов;
🔶 ввод электронной почты для подтверждения аккаунта при регистрации.
#формы
https://codepen.io/coelho-na/pen/wveOqde
✔️ Navbar
Эффект при наведении на кнопку, реализованный на SCSS и SVG, c применением JavaScript
https://codepen.io/aaroniker/pen/xxYgLxz
@about_javascript
🖥 90 Day Fiancé: It's an illusion
Стильный оживленный шрифт. Реализован при помощи JavaScript.
#анимация #JavaScript
https://codepen.io/jackiezen/pen/gOryEyW
@about_javascript
🖥 Regexgen – библиотека JavaScript, которая генерирует регулярные выражения, соответствующие набору строк. Чаще всего для обработки передается массив строк.
@about_javascript
Mockoon — простейший способ разработки и запуска макетов REST API
Инструмент не требует удалённого развертывания, не требует учётной записи, при этом бесплатно и имеет открытый исходный код
Благодаря Mock API вам больше не придётся писать фиктивные функции для получения данных
Стоимость: #бесплатно
#API #open_source
🌀 VelocityJS demo
Подвижная анимация для загрузки. Реализована с помощью JavaScript и CSS.
#анимация #css #js
https://codepen.io/sol0mka/pen/eYgydO
@about_javascript
Vercel — веб-платформа для frontend-разработчиков
С её помощью можно очень легко и удобно развернуть собственный сайт. При этом размещать свои проекты можно с нулевой конфигурацией, а также автоматическим протоколом SSL и глобальной инфраструктурой CDN
Стоимость: #бесплатно (но платный тариф)
#web #frontend
px3d – Experimental pixel 3d engine
Загружает сцену из блендера с помощью Three.js, и перерабатывает её в пиксельный вид, используя низкополигональные превращения.
🖥 Github
@about_javascript
Little Gallery
Небольшой пак фотографий/картинок в виде карточек, которые анимируются вот таким способом. Непонятно на сколько это практично, но как минимум это забавно.
#js #css #html #coden
https://codepen.io/yoann-b/pen/abEjWgq
🖥 30-Days-Of-JavaScript – пошаговое руководство по изучению языка программирования JavaScript за 30 дней.
В данном руководстве вы используете JavaScript для добавления интерактивности на веб-сайты, для разработки мобильных приложений, настольных приложений, игр, и в настоящее время JavaScript можно использовать для машинного обучения и AI.
https://github.com/Asabeneh/30-Days-Of-JavaScript
@about_javascript
mojs – очень интересный инструмент для создания моушн-графики на JavaScript с очень красивыми демками
Библиотека обладает декларативным API и хорошим списком демок и туториалов
⤷ Ссылка на проект
@about_javascript | #JavaScript #Interesting
Decryption Effect with Pseudo Elements
Эффект расшифровки с псевдоэлементами. Реализован с помощью CSS и JavaScript.
#анимация #css #js
https://codepen.io/georgehastings/pen/YNMEbe
Bongo Cat Codes
Вы наверняка видели этот забавный мем в виде gif’ок или видео. Автор этого проекта решил реализовать его с помощью HTML и CSS, а вернее препроцессоров Pug и SCSS. Рисунок, разумеется, сделан с помощью SVG, а анимация реализована силами CSS.
Посмотреть код можно тут:
https://codepen.io/carolineartz/pen/VwYwZaP
#codepen #pug #scss
@about_javascript
Apple Mice
Анимация разных вариантов мышек, написана с помощью javascript и css.
#анимация #css #js
https://codepen.io/joshbader/pen/njKxzB
Wi-Fi Fail Animation
Анимация ошибки при подключении к Wi-Fi, реализованная на CSS и SVG, c применением JavaScript
#codepen #css #svg #js #ui_элементы
https://codepen.io/jkantner/pen/OJEMxZR
@about_javascript
Svg.js- легкая библиотека для управления и анимации графики SVG
Упрощает создание и управление SVG с помощью JavaScript.
https://github.com/svgdotjs/svg.js
https://svgjs.dev/docs/3.0/
@about_javascript
Texture Transition Hover Effect — текстурный переход между изображениями при наведении, реализованный с помощью Three.js и TweenMax.js.
#hover #3D #threejs #TweenMaxjs
https://codepen.io/frost084/pen/NZdwZO
💾 Fluid Text Hover – жидкий эффект для текста. Текстура фонового изображения тянется за мышкой, благодаря чему текст переливается.
Читать полностью…Подозреваем, что тебе надоело читать постоянную рекламу. Поэтому предлагаем просто подписаться на наших хороших друзей!
Тебе не нужно больше тратить время на поиски материала — достаточно отслеживать то, что интересно именно тебе! А материала там очень много: как теоретического, так и практического.
Skeleton Loaders
Каркасные загрузчики, реализованные с помощью CSS и JavaScript.
#анимация #прелоадеры #css #javascript
https://codepen.io/jh3y/pen/LYdrdgX