Embold — платформа для анализа исходного кода и выявления в нём проблем
Работать с инструментом достаточно просто. Для начала нужно подключить к нему свои репозитории. Затем Embold отсканирует их (автоматически или вручную ). В том числе запросы и коммиты внутри них
По итогу результаты сканирования доступны для изучения в веб-интерфейсе или с помощью различных плагинов
Стоимость: #бесплатно (но есть платные тарифы)
#web #баги
Сегментированный прогресс-бар
Ловите анимированный прогресс-бар, который разделён на отдельные сегменты, позволяя отмечать конкретные этапы взаимодействия с вашим сервисом. Код для реализации аналогичного элемента доступен здесь:
https://codepen.io/jkantner/pen/poPWVbV
#codepen
🌀 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 – жидкий эффект для текста. Текстура фонового изображения тянется за мышкой, благодаря чему текст переливается.
Читать полностью…HoverZoom – Расширение для браузера, которое позволяет масштабировать изображения / видео на всех ваших любимых веб-сайтах
Просто наведите указатель мыши на любое изображение, и расширение автоматически увеличит изображение до его полного размера
🖥 Github
@about_javascript
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