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 #баги
This media is not supported in your browser
VIEW IN TELEGRAM
Как отследить событие закрытия браузера и вкладки с помощью JavaScript
Небольшой туториал для начинающих фронтенд-разработчиков. Изучайте, сохраняйте и берите на вооружение:
https://nuancesprog.ru/p/16673/
#javascript
Небольшой туториал для начинающих фронтенд-разработчиков. Изучайте, сохраняйте и берите на вооружение:
https://nuancesprog.ru/p/16673/
#javascript
Fontstorage — гигантская библиотека шрифтов
На главной странице вам будет предложено выбрать один из четырёх стилей шрифта: Sans Serif, Serif, Decorative и Monospace
Затем вам на выбор будет предложено огромное количество вариантов, которые можно скачать
Сервис поддерживает поиск по тегам, а также простенькую сортировку
Стоимость: #бесплатно
#шрифт #web
На главной странице вам будет предложено выбрать один из четырёх стилей шрифта: Sans Serif, Serif, Decorative и Monospace
Затем вам на выбор будет предложено огромное количество вариантов, которые можно скачать
Сервис поддерживает поиск по тегам, а также простенькую сортировку
Стоимость: #бесплатно
#шрифт #web
Pixi.js — красивые 2D анимации
Изначально Pixi.js использовался для создания игр в браузере, но довольно быстро набрал популярность среди разработчиков. Pixi позволяет создавать красивые анимации для рекламы, баннеров на сайтах, поэтому может быть добавлен в любой проект:
https://pixijs.com/
#js
Изначально Pixi.js использовался для создания игр в браузере, но довольно быстро набрал популярность среди разработчиков. Pixi позволяет создавать красивые анимации для рекламы, баннеров на сайтах, поэтому может быть добавлен в любой проект:
https://pixijs.com/
#js
Click To Zoom Calendar
Этот проект представляет собой интерфейс календаря с интересной анимацией — при выборе конкретной даты, происходит зум на эту ячейку для просмотра подробностей, а повторный клик возвращает исходный вид календаря.
Посмотреть, как это реализовано с точки зрения код можно тут:
https://codepen.io/Hyperplexed/pen/qBVPaNV
#codepen
Этот проект представляет собой интерфейс календаря с интересной анимацией — при выборе конкретной даты, происходит зум на эту ячейку для просмотра подробностей, а повторный клик возвращает исходный вид календаря.
Посмотреть, как это реализовано с точки зрения код можно тут:
https://codepen.io/Hyperplexed/pen/qBVPaNV
#codepen
Полезная библиотека для понимания работы JS
js2flowchart — библиотека визуализации для преобразования любого кода JavaScript в красивую блок-схему SVG. Вы можете изучать чужой код, делать рефакторинг или писать документацию, не путаясь в функциональности. А начинающим — неплохая шпаргалка по foo, while, if:
https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart
#js
js2flowchart — библиотека визуализации для преобразования любого кода JavaScript в красивую блок-схему SVG. Вы можете изучать чужой код, делать рефакторинг или писать документацию, не путаясь в функциональности. А начинающим — неплохая шпаргалка по foo, while, if:
https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart
#js
Четыре полезных встроенных веб-API JavaScript
Все браузеры имеют набор встроенных API, которые расширяют их функциональность, обычно за счёт поддержки сложных операций.
В этой статье вы узнаете о четырёх встроенных веб-API JavaScript, которые вы можете использовать в своих проектах: Notification API, Geolocation API, History API и Barcode Detection API. Подробнее:
https://blog.openreplay.com/four-useful-built-in-javascript-web-apis/
#javascript
Все браузеры имеют набор встроенных API, которые расширяют их функциональность, обычно за счёт поддержки сложных операций.
В этой статье вы узнаете о четырёх встроенных веб-API JavaScript, которые вы можете использовать в своих проектах: Notification API, Geolocation API, History API и Barcode Detection API. Подробнее:
https://blog.openreplay.com/four-useful-built-in-javascript-web-apis/
#javascript
This media is not supported in your browser
VIEW IN TELEGRAM
CSS Rooster Animation
Анимированная сцена, выполненная на чистом CSS, без использования JavaScript.
#css
https://codepen.io/mdusmanansari/pen/GRxKNKP
Анимированная сцена, выполненная на чистом CSS, без использования JavaScript.
#css
https://codepen.io/mdusmanansari/pen/GRxKNKP
This media is not supported in your browser
VIEW IN TELEGRAM
CSS animation-delay demo 🤓
Демонстрация задержки анимации, реализованная с помощью css, js.
#анимация #css
https://codepen.io/jh3y/pen/qBdzbGb
@about_javascript
Демонстрация задержки анимации, реализованная с помощью css, js.
#анимация #css
https://codepen.io/jh3y/pen/qBdzbGb
@about_javascript
Погружение в фундаментальные основы реактивного программирования: разберемся в том, что React.js всё же является реактивным, и рассмотрим кейсы, при которых целесообразно применять паттерны реактивного программирования.
Читать
Читать
Условный border-radius в CSS
В одной из запрёщенных социальных сетей автор этой статьи нашёл интересное значение border-radius для карточного компонента. Суть в том, что углы элемента настраиваются автоматически в зависимости от размеров экрана с помощью хитрой формулы.
Вот об этой формуле, а также способе её применения и пойдёт речь в этой статье:
https://webformyself.com/uslovnyj-border-radius-v-css/
#фронтенд #css
В одной из запрёщенных социальных сетей автор этой статьи нашёл интересное значение border-radius для карточного компонента. Суть в том, что углы элемента настраиваются автоматически в зависимости от размеров экрана с помощью хитрой формулы.
Вот об этой формуле, а также способе её применения и пойдёт речь в этой статье:
https://webformyself.com/uslovnyj-border-radius-v-css/
#фронтенд #css
This media is not supported in your browser
VIEW IN TELEGRAM
Scroll driven gallery — изящная галерея с необычным скроллом. Реализована с помощью CSS.
https://codepen.io/jh3y/pen/VwBgPxP
@about_javascript
https://codepen.io/jh3y/pen/VwBgPxP
@about_javascript
This media is not supported in your browser
VIEW IN TELEGRAM
Мяукающее пианино
Отличный пример пет-проекта для вашего портфолио.
При нажатии на клавиши кошачьей лапкой, из инструмента будут извлекаться соответствующие звуки.
По ссылке вы сможете поиграть на пианино, а так же подробно изучить код и на его примере создать что-нибудь своё:
https://codepen.io/laurenvast/pen/jOrWXej
#codepen
Отличный пример пет-проекта для вашего портфолио.
При нажатии на клавиши кошачьей лапкой, из инструмента будут извлекаться соответствующие звуки.
По ссылке вы сможете поиграть на пианино, а так же подробно изучить код и на его примере создать что-нибудь своё:
https://codepen.io/laurenvast/pen/jOrWXej
#codepen
Лучший способ получать свежие обновлении и следить за трендами в разработке.
Машинное обучение: t.me/ai_machinelearning_big_data
Python: t.me/pythonl
C#: t.me/csharp_ci
C/C++/ t.me/cpluspluc
Data Science: t.me/data_analysis_ml
Devops: t.me/devOPSitsec
Go: t.me/Golang_google
Базы данных: t.me/sqlhub
Rust: t.me/rust_code
Javascript: t.me/javascriptv
React: t.me/react_tg
PHP: t.me/phpshka
Android: t.me/android_its
Мобильная разработка: t.me/mobdevelop
Linux: t.me/+A8jY79rcyKJlYWY6
Big Data: t.me/bigdatai
Хакинг: t.me/linuxkalii
Тестирование: https://t.me/+F9jPLmMFqq1kNTMy
Java: t.me/javatg
Папка Go разработчика: t.me/addlist/MUtJEeJSxeY2YTFi
Папка Python разработчика: t.me/addlist/eEPya-HF6mkxMGIy
Папка машинное обучение: https://t.me/addlist/_FjtIq8qMhU0NTYy
🇬🇧Английский: t.me/english_forprogrammers
Please open Telegram to view this post
VIEW IN TELEGRAM