Telegram Web
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️ Demo:Input Field Animation Floating Label | HTML & CSS

При вводе данных поле становится объёмным.

#формы

https://codepen.io/monoqlo365/pen/xxYvewV

@javascriptv
👍185🔥2
🤫 Некоторые популярные методы аутентификации

🔵 Базовая аутентификация:
Предполагает отправку имени пользователя и пароля с каждым запросом, но может быть менее безопасной без шифрования.
Подходит для простых приложений, где безопасность и шифрование не являются приоритетом, или при использовании защищенных соединений.

🔵 Аутентификация с помощью токенов:
Использует сгенерированные токены, такие как JSON Web Tokens (JWT), которые обмениваются между клиентом и сервером, обеспечивая повышенную безопасность без необходимости отправки учетных данных с каждым запросом.
Идеально подходит для более безопасных и масштабируемых систем.

🔵 Аутентификация OAuth:
Позволяет сторонним приложениям получать ограниченный доступ к ресурсам пользователя без раскрытия учетных данных, выдавая токены доступа после аутентификации пользователя.
Подходит для ситуаций, требующих контролируемого доступа к ресурсам пользователя сторонними приложениями или сервисами.

🔵 Аутентификация с использованием API-ключей:
Назначает уникальные ключи пользователям или приложениям, которые отправляются в заголовках или параметрах; несмотря на простоту, может не обладать всеми преимуществами безопасности, как методы на основе токенов или OAuth.
Удобна для простого контроля доступа в менее чувствительных средах или для предоставления доступа к определённым функциям без необходимости предоставления разрешений, привязанных к конкретному пользователю.

💬 Какой метод аутентификации вы считаете наиболее эффективным с точки зрения обеспечения безопасности и удобства использования в ваших приложениях?

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍174🔥4
⚡️ ​​Топ-50 ресурсов с бесплатными HTML/CSS/JS шаблонами

Эта подборка точно должна оказаться в ваших сохранёнках, т.к. в ней вы сможете найти бесплатные шаблоны на любой вкус и сэкономить время и средства на разработку. Вот лишь парочка из них, а полный список в подборке.

LayoutFlow — шаблоны для сайтов агенств, портфолио и услуг.
Treact — React-шаблоны.
Flout UI — компоненты Tailwind и готовые шаблоны Next.js
Themesberg — шаблоны админ панелей, лендингов и UI-китов.
Templatemo — много Bootstrap-шаблонов.
HTMLrev — крупнейшая библиотека шаблонов со всеразличными технологиями.

#подборка #frontend

@javascriptv
14👍10🔥5
This media is not supported in your browser
VIEW IN TELEGRAM
CSS Совет дня 💡

Как легко реализоват закрепленный заголовок таблицы 🤩

📌 Код

@javascriptv
👍478🔥4
This media is not supported in your browser
VIEW IN TELEGRAM
🖥 Material Input Animation

Заголовок поля смещается как только начинают вводить данные.

Примеры применения:
- поиск фамилии в списках;
- поиск контакта для денежного перевода.

#css #формы

📌 Код

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍225🔥5
🖥 Logto — компонент на TypeScript для реализации окна входа в аккаунт

curl -fsSL https://raw.githubusercontent.com/logto-io/logto/HEAD/docker-compose.yml | \
docker compose -p logto -f - up

npm init @logto


Logto — это open-source альтернатива Auth0, разработанная для современных приложений и SaaS-продуктов.

🖥 GitHub
🟡 Доки

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍123😁3🔥2🥰1
🚀 Яндекс разработал AI-ассистента для работы с кодом

С помощью сервиса разработчики смогут по фрагменту кода сгенерировать наиболее вероятное его продолжение. Это поможет упростить написание и редактирование кода и ускорить продуктовую разработку в компаниях. Ассистент протестировали тысячи разработчиков Яндекса, 60% из которых стали постоянными пользователями сервиса.
Использование Yandex Code Assistant помогает повысить эффективность работы: доверьте рутинные операции AI и сосредоточьтесь на решении более сложных задач, чтобы ускорить разработку и сократить Time to market. Да и просто делает жизнь разработчиков проще и счастливее.

⚙️ Для кого
Инструмент полезен разработчикам любого уровня, а также техническим руководителям, которые хотят оптимизировать процессы и повысить продуктивность своих команд.

→ Как попробовать
Yandex Code Assistant доступен бесплатно на облачной платформе Yandex Cloud в режиме Preview. Для тестирования оставьте заявку.
6
This media is not supported in your browser
VIEW IN TELEGRAM
🔥 Готовая анимация карточек - при наведении на карточку весь остальной фон становится размытым.

Примеры применения:
🔶 выбор тарифного плана онлайн-сервиса;
🔶 выбор антивирусной программы для ПК.

#hover #карточки #градиент

https://codepen.io/eranmiller/pen/wvGpzZW

@javascriptv
👍165🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
🚴‍♀️ Оригинальный прелоадер с велосипедом для вашей страницы.

Примеры применения:
загрузка страницы товаров для спорта и активного отдыха;
загрузка сайта для записи для участия в спортивных мероприятиях.

#js #прелоадер #ожидание #загрузка

https://codepen.io/peteszym/details/YPKmeo

@javascriptv
🎉8👍74👎1
🖥 Vue.js и Vite — что нового в 2024 году?

Evan You на VueConf US 2024 рассказал о свежих обновлениях в экосистеме Vue и Vite.

Хотите узнать, что изменилось во фреймворкеах? Посмотрите выступление и изучите актуальные фичи:

https://youtu.be/A9MSFp9Fs8k?si=h3O-zli5G35HXXEQ

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
5👍3🔥3🤯1
🖥 annyang — мини библиотека JS распознавания речи, которая позволяет вашим пользователям управлять вашим сайтом с помощью голосовых команд.

🖥 GitHub

#javascript #js

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍252🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
🖥 Анимация: Два похожих, но таких разных эффекта наведения на кнопки.

Примеры применения:
- кнопки с выбором открытия ссылки через сайт или через приложение;
- кнопка с выбором ответа, достиг ли пользователь совершеннолетнего возраста.

#hover #кнопки

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍172🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
🖥 Создание навигации по боковой панели с помощью HTML, CSS и JavaScript

📌 Код

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍366🔥5
🖥 Scramble - альтернатива Grammarly с открытым исходным кодом.

Scramble - это расширение для Chrome с открытым исходным кодом, которое использует искусственный интеллект для улучшения качества написания текста непосредственно в вашем браузере.

Он разработан как более настраиваемая и уважающая конфиденциальность альтернатива Grammarly.

https://github.com/zlwaterfield/scramble

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
6👏5👍4🔥2
🖥 HiveSpace Write, Draw and Plan All at Once

HiveSpace - это универсальный рабочий инструмент с открытым исходным кодом на JS и операционная система для всех компонентов, из которых состоит ваша база знаний , заметок, майндмапов и многое другое - wiki, управление знаниями, презентации и цифровые ресурсы.

Это лучшая альтернатива Notion и Miro.

Github

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍72🔥1🤬1
Типичный JS

@javascriptv
👍43😁239🤯1
⚡️ Notepad.mx – это простой онлайн-блокнот, который позволяет создавать и безопасно хранить заметки в интернете.

Для доступа к вашим записям необходимо лишь ввести парольную фразу при входе в систему. Все ваши заметки шифруются на стороне клиента, что гарантирует их конфиденциальность.

Приложение очень простое и легкое, поэтому обмен текстовыми данными между разными людьми или устройствами осуществляется без проблем. Вы можете развернуть приложение с помощью Docker или вручную установить его в своей рабочей среде.

curl -sSL https://get.docker.com/ | sh

Полный код проекта доступен на GitHub: https://github.com/Athlon1600/notepad.

@javascriptv
🔥8👍7😁21
⚡️ Крутой Бесплатный курс от HarvardX: веб-программирование на Python и JavaScript с сертификатом

HarvardX предлагает уникальный курс: бесплатный курс по веб-программированию, где вы сможете углубить свои знания в Python и JavaScript.

За 12 недель вы освоите ключевые технологии, такие как Django, React, и получите навыки работы с базами данных, API и масштабированием.

На курсе предусмотрена работа с современными инструментами, включая Git и CI/CD. По завершении вы не только обогатите свой багаж знаний, но и сможете получить официальный сертификат, который подтвердит ваш уровень профессионализма.

https://www.edx.org/learn/web-development/harvard-university-cs50-s-web-programming-with-python-and-javascript

freecourses
👍83👎2🔥2
🖥 Sturdy-Doodle — интересная идея компактного сайта-портфолио с интерактивными игровыми элементами, созданного с помощью HTML, CSS и JavaScript .

Пользователи направляют персонажа к консоли, с которой они могут легко перемещаться между различными разделами.

🖥 GitHub

#js #javascript

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍133👎2🔥1
🖥 D3 - полезная библиотека для создания разнообразных графиков и визуализации данных

🔐 Лицензия: LSC

▪️Github

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
11👍3👏3🤯2
2025/07/12 13:33:23
Back to Top
HTML Embed Code: