Javascript

🖥 Scramble - альтернатива Grammarly с открытым исходным кодом.

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

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

https://github.com/zlwaterfield/scramble

@javascriptv

🖥 Создание навигации по боковой панели с помощью HTML, CSS и JavaScript

📌 Код

@javascriptv

🖥 Анимация: Два похожих, но таких разных эффекта наведения на кнопки.

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

#hover #кнопки

@javascriptv

🖥 annyang — мини библиотека JS распознавания речи, которая позволяет вашим пользователям управлять вашим сайтом с помощью голосовых команд.

🖥 GitHub

#javascript #js

@javascriptv

🖥 Vue.js и Vite — что нового в 2024 году?

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

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

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

@javascriptv

🚴‍♀️ Оригинальный прелоадер с велосипедом для вашей страницы.

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

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

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

@javascriptv

🔥 Готовая анимация карточек - при наведении на карточку весь остальной фон становится размытым.

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

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

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

@javascriptv

🚀 Яндекс разработал AI-ассистента для работы с кодом

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

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

→ Как попробовать
Yandex Code Assistant доступен бесплатно на облачной платформе Yandex Cloud в режиме Preview. Для тестирования оставьте заявку.

🖥 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

🖥 Material Input Animation

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

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

#css #формы

📌 Код

@javascriptv

CSS Совет дня 💡

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

📌 Код

@javascriptv

⚡️ ​​Топ-50 ресурсов с бесплатными HTML/CSS/JS шаблонами

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

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

#подборка #frontend

@javascriptv

🤫 Некоторые популярные методы аутентификации

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

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

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

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

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

@javascriptv

⚡️ Demo:Input Field Animation Floating Label | HTML & CSS

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

#формы

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

@javascriptv

⚡️Легкий способ получать свежие обновления и следить за трендами в разработке на вашем языке. Находите свой стек и подписывайтесь:

МАШИННОЕ ОБУЧЕНИЕ: t.me/ai_machinelearning_big_data
C++ t.me/cpluspluc
Python: t.me/pro_python_code
Хакинг: t.me/linuxkalii
Devops: t.me/devOPSitsec
АНАЛИЗ Данных: t.me/data_analysis_ml
Javascript: t.me/javascriptv
C#: t.me/csharp_ci
Java: t.me/javatg
Базы данных: t.me/sqlhub
Linux: t.me/linuxacademiya
Python собеседования: t.me/python_job_interview
Мобильная разработка: t.me/mobdevelop
Docker: t.me/DevopsDocker
Golang: t.me/golang_interview
React: t.me/react_tg
Rust: t.me/rust_code
PHP: t.me/phpshka
Android: t.me/android_its
Frontend: t.me/front
Big Data: t.me/bigdatai
Собеседования МЛ: t.me/machinelearning_interview
МАТЕМАТИКА: t.me/data_math
Kubernets: t.me/kubernetc


💼 Папка с вакансиями: t.me/addlist/_zyy_jQ_QUsyM2Vi
Папка Go разработчика: t.me/addlist/MUtJEeJSxeY2YTFi
Папка Python разработчика: t.me/addlist/eEPya-HF6mkxMGIy
Папка ML: https://t.me/addlist/2Ls-snqEeytkMDgy
Папка FRONTEND: https://t.me/addlist/mzMMG3RPZhY2M2Iy

😆ИТ-Мемы: t.me/memes_prog
🇬🇧Английский: t.me/english_forprogrammers
🧠ИИ: t.me/vistehno

🎓954ГБ ОПЕНСОРС КУРСОВ: @courses
📕Ит-книги бесплатно: https://t.me/addlist/BkskQciUW_FhNjEy

⚡️ Наглядно, как работает Веб и что происходит при переходе по URL

#doc #cheatsheet

🖥 tinyhttp — легкий и модульный веб-фреймворк для Node.js

— npm i @tinyhttp/app

tinyhttp — это современный Express-подобный веб-фреймворк, написанный на TypeScript и скомпилированный в нативный ESM, который использует минимальное количество зависимостей и минимум легаси.

🖥 GitHub

@javascriptv

🚀⚒️ es-toolkit — современная библиотека JavaScript-инструментов

Представьте себе Lodash, но более новый, быстрый, компактный, с tree shaker и встроенной поддержкой TypeScript.

В справочном руководстве показаны поддерживаемые фичи на данный момент.

⚡️ GitHub

@javascriptv

🖥 Milkdown — фреймворк TypeScript для создания лёгких WYSIWYG-редакторов Markdown

Milkdown состоит из 2 частей:

— ядро, которое предоставляет загрузчик плагинов и всевозможные внутренние плагины

— множество дополнительных плагинов, которые предоставляют синтаксис, добавляют новые команды и компоненты

С помощью Milkdown можно создать собственный WYSIWYG-редактор Markdown с возможностью включения/отключения пользовательского синтаксиса и функций.
Также Milkdown позволяет создавать разные плагины

🖥 GitHub
🟡 Страничка Milkdown

@javascriptv