Запросы на сервер. Fetch, XMLHttpRequest (XHR), Ajax
Умение работать с запросами — один из главных навыков разработчика, потому что запросы отправляются и принимаются постоянно различными частями приложений. В этом виде вы в простой и понятной форме сможете разобраться в том, как работают запросы, какие варианты существуют и как их применять:
https://youtu.be/eKCD9djJQKc
#javascript #виде
@about_javascript
Умение работать с запросами — один из главных навыков разработчика, потому что запросы отправляются и принимаются постоянно различными частями приложений. В этом виде вы в простой и понятной форме сможете разобраться в том, как работают запросы, какие варианты существуют и как их применять:
https://youtu.be/eKCD9djJQKc
#javascript #виде
@about_javascript
👍4🔥1🥰1
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
👍3❤2🔥1
Создаём сайт портфолио с крутой анимацией
Видеоурок по созданию собственного сайта с диагональным плавным скроллом. Автор разбирает популярные техники и тренды веб-разработки, а именно:
— синхронизация вертикальных слайдов,
— CSS анимация скролла с инерцией,
— анимация при наведении.
Сайт выглядит современно и наполнен красивыми эффектами, но очень прост в реализации: https://youtu.be/oT0FN1PtmRU
#html #css #json
@about_javascript
Видеоурок по созданию собственного сайта с диагональным плавным скроллом. Автор разбирает популярные техники и тренды веб-разработки, а именно:
— синхронизация вертикальных слайдов,
— CSS анимация скролла с инерцией,
— анимация при наведении.
Сайт выглядит современно и наполнен красивыми эффектами, но очень прост в реализации: https://youtu.be/oT0FN1PtmRU
#html #css #json
@about_javascript
YouTube
Создание сайта портфолио с крутой анимацией (HTML CSS JavaScript)
💥 Все курсы в одном комплекте: https://webdesign-master.ru/courses/bundle/
В этом уроке мы рассмотрим создание сайта портфолио с диагональным плавным скроллом. Мы рассмотрим нестандартный способ синхронизации вертикальных слайдов на JS и инверсию движения…
В этом уроке мы рассмотрим создание сайта портфолио с диагональным плавным скроллом. Мы рассмотрим нестандартный способ синхронизации вертикальных слайдов на JS и инверсию движения…
👍5❤4🥰1
px3d – Experimental pixel 3d engine
Загружает сцену из блендера с помощью Three.js, и перерабатывает её в пиксельный вид, используя низкополигональные превращения.
🖥 Github
@about_javascript
Загружает сцену из блендера с помощью Three.js, и перерабатывает её в пиксельный вид, используя низкополигональные превращения.
@about_javascript
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5❤1🔥1
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
👍9❤1🔥1
Vercel — веб-платформа для frontend-разработчиков
С её помощью можно очень легко и удобно развернуть собственный сайт. При этом размещать свои проекты можно с нулевой конфигурацией, а также автоматическим протоколом SSL и глобальной инфраструктурой CDN
Стоимость: #бесплатно (но платный тариф)
#web #frontend
С её помощью можно очень легко и удобно развернуть собственный сайт. При этом размещать свои проекты можно с нулевой конфигурацией, а также автоматическим протоколом SSL и глобальной инфраструктурой CDN
Стоимость: #бесплатно (но платный тариф)
#web #frontend
👍4❤2🔥1
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
👍5
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
🔥3👍2❤1
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
👍7
Сегментированный прогресс-бар
Ловите анимированный прогресс-бар, который разделён на отдельные сегменты, позволяя отмечать конкретные этапы взаимодействия с вашим сервисом. Код для реализации аналогичного элемента доступен здесь:
https://codepen.io/jkantner/pen/poPWVbV
#codepen
Ловите анимированный прогресс-бар, который разделён на отдельные сегменты, позволяя отмечать конкретные этапы взаимодействия с вашим сервисом. Код для реализации аналогичного элемента доступен здесь:
https://codepen.io/jkantner/pen/poPWVbV
#codepen
👍6
HoverZoom – Расширение для браузера, которое позволяет масштабировать изображения / видео на всех ваших любимых веб-сайтах
Просто наведите указатель мыши на любое изображение, и расширение автоматически увеличит изображение до его полного размера
🖥 Github
@about_javascript
Просто наведите указатель мыши на любое изображение, и расширение автоматически увеличит изображение до его полного размера
@about_javascript
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥2❤1
Embold — платформа для анализа исходного кода и выявления в нём проблем
Работать с инструментом достаточно просто. Для начала нужно подключить к нему свои репозитории. Затем Embold отсканирует их (автоматически или вручную ). В том числе запросы и коммиты внутри них
По итогу результаты сканирования доступны для изучения в веб-интерфейсе или с помощью различных плагинов
Стоимость: #бесплатно (но есть платные тарифы)
#web #баги
Работать с инструментом достаточно просто. Для начала нужно подключить к нему свои репозитории. Затем Embold отсканирует их (автоматически или вручную ). В том числе запросы и коммиты внутри них
По итогу результаты сканирования доступны для изучения в веб-интерфейсе или с помощью различных плагинов
Стоимость: #бесплатно (но есть платные тарифы)
#web #баги
👍5
This media is not supported in your browser
VIEW IN TELEGRAM
Как отследить событие закрытия браузера и вкладки с помощью JavaScript
Небольшой туториал для начинающих фронтенд-разработчиков. Изучайте, сохраняйте и берите на вооружение:
https://nuancesprog.ru/p/16673/
#javascript
Небольшой туториал для начинающих фронтенд-разработчиков. Изучайте, сохраняйте и берите на вооружение:
https://nuancesprog.ru/p/16673/
#javascript
👍10❤6🔥2
Fontstorage — гигантская библиотека шрифтов
На главной странице вам будет предложено выбрать один из четырёх стилей шрифта: Sans Serif, Serif, Decorative и Monospace
Затем вам на выбор будет предложено огромное количество вариантов, которые можно скачать
Сервис поддерживает поиск по тегам, а также простенькую сортировку
Стоимость: #бесплатно
#шрифт #web
На главной странице вам будет предложено выбрать один из четырёх стилей шрифта: Sans Serif, Serif, Decorative и Monospace
Затем вам на выбор будет предложено огромное количество вариантов, которые можно скачать
Сервис поддерживает поиск по тегам, а также простенькую сортировку
Стоимость: #бесплатно
#шрифт #web
👍4🔥2❤1
Pixi.js — красивые 2D анимации
Изначально Pixi.js использовался для создания игр в браузере, но довольно быстро набрал популярность среди разработчиков. Pixi позволяет создавать красивые анимации для рекламы, баннеров на сайтах, поэтому может быть добавлен в любой проект:
https://pixijs.com/
#js
Изначально Pixi.js использовался для создания игр в браузере, но довольно быстро набрал популярность среди разработчиков. Pixi позволяет создавать красивые анимации для рекламы, баннеров на сайтах, поэтому может быть добавлен в любой проект:
https://pixijs.com/
#js
❤5
Ответ
Anonymous Quiz
28%
[object Object]
27%
[object Window]
2%
[object Document]
19%
[Function]
24%
undefined
👎5
Click To Zoom Calendar
Этот проект представляет собой интерфейс календаря с интересной анимацией — при выборе конкретной даты, происходит зум на эту ячейку для просмотра подробностей, а повторный клик возвращает исходный вид календаря.
Посмотреть, как это реализовано с точки зрения код можно тут:
https://codepen.io/Hyperplexed/pen/qBVPaNV
#codepen
Этот проект представляет собой интерфейс календаря с интересной анимацией — при выборе конкретной даты, происходит зум на эту ячейку для просмотра подробностей, а повторный клик возвращает исходный вид календаря.
Посмотреть, как это реализовано с точки зрения код можно тут:
https://codepen.io/Hyperplexed/pen/qBVPaNV
#codepen
❤4👎1
Полезная библиотека для понимания работы 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
👍8❤2
Четыре полезных встроенных веб-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
👍9❤1