Forwarded from Senior Frontend - javascript, html, css
Что такое двустороннее связывание ?
Двустороннее связывание данных (Two-way data binding) — это паттерн проектирования, используемый в разработке пользовательских интерфейсов, при котором пользовательский интерфейс автоматически обновляется при изменении данных, и наоборот, данные автоматически изменяются при модификации пользовательским интерфейсом. Это означает, что модель и представление (view) синхронизированы в реальном времени: изменение в модели немедленно отражается в представлении, и любое изменение в представлении немедленно обновляет модель.
Как это работает
У вас есть текстовое поле в форме (представление) и переменная (модель), которая хранит значение этого текстового поля. С двусторонним связыванием, если пользователь изменяет значение в текстовом поле, переменная в модели будет автоматически обновлена соответствующим образом. Аналогично, если переменная изменяется программно (например, в результате какой-то логики приложения), изменение отразится в текстовом поле.
Оно широко используется в фреймворках и платформах для разработки одностраничных приложений (SPA), таких как Angular. В Angular, например, это достигается с помощью директивы
В этом примере,
Преимущества:
- Упрощение разработки, поскольку не нужно вручную обновлять представление или модель при изменении другой части.
- Улучшение пользовательского опыта, обеспечивая немедленное отображение изменений без дополнительных действий пользователя или дополнительного кода.
Недостатки:
- Сложность отладки, поскольку автоматическое обновление значений в обе стороны может привести к неожиданным эффектам и затруднить трассировку потока данных.
- Производительность, особенно в больших и сложных приложениях, где непрерывная синхронизация данных между моделью и представлением может повлиять на быстродействие.
👉 @seniorFront
Двустороннее связывание данных (Two-way data binding) — это паттерн проектирования, используемый в разработке пользовательских интерфейсов, при котором пользовательский интерфейс автоматически обновляется при изменении данных, и наоборот, данные автоматически изменяются при модификации пользовательским интерфейсом. Это означает, что модель и представление (view) синхронизированы в реальном времени: изменение в модели немедленно отражается в представлении, и любое изменение в представлении немедленно обновляет модель.
Как это работает
У вас есть текстовое поле в форме (представление) и переменная (модель), которая хранит значение этого текстового поля. С двусторонним связыванием, если пользователь изменяет значение в текстовом поле, переменная в модели будет автоматически обновлена соответствующим образом. Аналогично, если переменная изменяется программно (например, в результате какой-то логики приложения), изменение отразится в текстовом поле.
Оно широко используется в фреймворках и платформах для разработки одностраничных приложений (SPA), таких как Angular. В Angular, например, это достигается с помощью директивы
[(ngModel)], которая связывает значение HTML элемента формы (например, <input>) с свойством компонента.<input [(ngModel)]="user.name">
В этом примере,
user.name — это свойство компонента, которое связано с текстовым полем. Любое изменение в поле ввода немедленно обновит user.name, и любое изменение user.name будет немедленно отражено в поле ввода.Преимущества:
- Упрощение разработки, поскольку не нужно вручную обновлять представление или модель при изменении другой части.
- Улучшение пользовательского опыта, обеспечивая немедленное отображение изменений без дополнительных действий пользователя или дополнительного кода.
Недостатки:
- Сложность отладки, поскольку автоматическое обновление значений в обе стороны может привести к неожиданным эффектам и затруднить трассировку потока данных.
- Производительность, особенно в больших и сложных приложениях, где непрерывная синхронизация данных между моделью и представлением может повлиять на быстродействие.
👉 @seniorFront
Forwarded from Веб-страница
Деплоим свой React-сайт, или что делать на сервере
Когда ваш первый сайт готов, и VPS арендован, появляются закономерные вопросы: как развернуть проект на домене? Пост подойдет новичкам, которые впервые привязывают что-то свое к домену.
Шаг 1. Стягиваем код
Сначала клонируем репозиторий проекта на VPS:
Если для запуска понадобится Node.js определенной версии, установим через официальный скрипт:
После этого установим зависимости проекта (их указываем в package.json):
Если на сервере маловато оперативной памяти (например, минималка на 1-2 ГБ RAM) — может помочь добавление swap-файла:
Шаг 2. Настраиваем переменные окружения
Создаем файл
Обратите внимание на префикс
Шаг 3. Собираем проект
Для деплоя нужна готовая сборка с оптимизированными файлами в папке build/
Шаг 4. Автоматический запуск с PM2
pm2 — удобный менеджер процессов для Node.js, с его помощью каждый новый коммит будет «усвоен» автоматически. Устанавливаем глобально:
Запускаем приложение через конфигурационный файл:
Последняя команда создаст автозапуск после перезагрузки сервера.
Шаг 5. Установка и настройка Nginx
nginx будет выступать обратным прокси и обеспечит работу по доменному имени. Устанавливаем:
Создаём конфигурацию сайта:
Это стартовая версия конфиги. Адаптировать ее под свои нужды помогут документация и нейронки:
Активируем сайт и проверяем конфигурацию:
Шаг 6. Получаем SSL-сертификат Let's Encrypt
Для безопасной работы сайта нужен сертификат. Установим certbot:
Добавим в доменном регистраторе (например, reg.ru) ресурсные записи:
A - @ - [IP-адрес сервера без портов]
А - www - [IP-адрес сервера без портов]
«Усвоение» записей обычно занимает не больше получаса.
Запустим получение сертификата:
Certbot автоматически настроит Nginx на использование HTTPS. Его, правда, придется перегенерировать раз в 4 месяца. Но можно настроить и автообновление.
Бывает, что, несмотря на отсутствие правил файервола, блокирующих порты 80 и 443, генерация SSL-сертификата через Let's Encrypt падает. Это может быть связано с политиками хостинг-провайдера, NAT, или другими непрозрачными ограничениями.
Если столкнулись с такой проблемой, попробуйте сменить хостинг-провайдера — чаще всего это решает вопрос с выдачей сертификата.
Это последний шаг, теперь ваш сайт на домене, и у вас в копилке новая ачивка :)
#бэкенд #react
@tproger_web
Когда ваш первый сайт готов, и VPS арендован, появляются закономерные вопросы: как развернуть проект на домене? Пост подойдет новичкам, которые впервые привязывают что-то свое к домену.
Шаг 1. Стягиваем код
Сначала клонируем репозиторий проекта на VPS:
git clone https://github.com/username/repo-name.git
cd repo-name/
Если для запуска понадобится Node.js определенной версии, установим через официальный скрипт:
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs
После этого установим зависимости проекта (их указываем в package.json):
npm install
Если на сервере маловато оперативной памяти (например, минималка на 1-2 ГБ RAM) — может помочь добавление swap-файла:
sudo fallocate -l 2G /swapfile
sudo chmod 600 /swapfile
sudo mkswap /swapfile
sudo swapon /swapfile
Шаг 2. Настраиваем переменные окружения
Создаем файл
.env в корне проекта. Админ использует условно бесплатную БД Supabase, потому шаблон состоит из таких средовых переменных:
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
Обратите внимание на префикс
NEXT_PUBLIC_ — он необходим, чтобы переменные стали доступны на клиенте в приложениях, построенных на Next.js. Шаг 3. Собираем проект
Для деплоя нужна готовая сборка с оптимизированными файлами в папке build/
npm run build
Шаг 4. Автоматический запуск с PM2
pm2 — удобный менеджер процессов для Node.js, с его помощью каждый новый коммит будет «усвоен» автоматически. Устанавливаем глобально:
sudo apt install -y curl
sudo npm install -g pm2
Запускаем приложение через конфигурационный файл:
pm2 start ecosystem.config.js
pm2 save
pm2 startup
Последняя команда создаст автозапуск после перезагрузки сервера.
Шаг 5. Установка и настройка Nginx
nginx будет выступать обратным прокси и обеспечит работу по доменному имени. Устанавливаем:
sudo apt update
sudo apt install -y nginx
Создаём конфигурацию сайта:
sudo vim /etc/nginx/sites-available/helenkapatsa
Это стартовая версия конфиги. Адаптировать ее под свои нужды помогут документация и нейронки:
server {
listen 80;
server_name example.com www.example.com;
location / {
proxy_pass http://localhost:3000; # порт вашего React-приложения или PM2 процесса
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
Активируем сайт и проверяем конфигурацию:
sudo ln -s /etc/nginx/sites-available/domain/etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx
Шаг 6. Получаем SSL-сертификат Let's Encrypt
Для безопасной работы сайта нужен сертификат. Установим certbot:
sudo apt install -y certbot python3-certbot-nginx
Добавим в доменном регистраторе (например, reg.ru) ресурсные записи:
A - @ - [IP-адрес сервера без портов]
А - www - [IP-адрес сервера без портов]
«Усвоение» записей обычно занимает не больше получаса.
Запустим получение сертификата:
sudo certbot --nginx -d example.com -d www.example.com
Certbot автоматически настроит Nginx на использование HTTPS. Его, правда, придется перегенерировать раз в 4 месяца. Но можно настроить и автообновление.
Бывает, что, несмотря на отсутствие правил файервола, блокирующих порты 80 и 443, генерация SSL-сертификата через Let's Encrypt падает. Это может быть связано с политиками хостинг-провайдера, NAT, или другими непрозрачными ограничениями.
Если столкнулись с такой проблемой, попробуйте сменить хостинг-провайдера — чаще всего это решает вопрос с выдачей сертификата.
Это последний шаг, теперь ваш сайт на домене, и у вас в копилке новая ачивка :)
#бэкенд #react
@tproger_web
Пользуемся ИИ ИИ без регистрации и VPN
Сегодня воспользоваться всеми возможности ИИ всё ещё остаётся непростой задачей, ведь у многих сервисов нет прямой оплаты российскими картами. Да и вообще, многие инструменты даже не открываются без использования VPN.
Но есть решения, которые помогают обойти эти ограничения. Мы собрали подборку таких решений, указав их ключевые особенности и возможности. В ней вы узнаете, как получить доступ к возможностях ChatGPT, Claude и Gemini, а также других нейросетей.
А что предпочитаете вы?
❤️ — ChatGPT
👍 — Claude
😂 — Gemini
#chatgpt #claude #ИИ
Original post link: t.me/tproger_web/5652
Forwarded and filtered by @smartfeed_bot
Сегодня воспользоваться всеми возможности ИИ всё ещё остаётся непростой задачей, ведь у многих сервисов нет прямой оплаты российскими картами. Да и вообще, многие инструменты даже не открываются без использования VPN.
Но есть решения, которые помогают обойти эти ограничения. Мы собрали подборку таких решений, указав их ключевые особенности и возможности. В ней вы узнаете, как получить доступ к возможностях ChatGPT, Claude и Gemini, а также других нейросетей.
А что предпочитаете вы?
❤️ — ChatGPT
👍 — Claude
😂 — Gemini
#chatgpt #claude #ИИ
Original post link: t.me/tproger_web/5652
Forwarded and filtered by @smartfeed_bot
Forwarded from Веб-страница
Псевдоэлемент vs Псевдокласс: Практические советы для реальных проектов
Что такое псевдоэлемент?
Псевдоэлемент позволяет добавить виртуальный элемент внутрь выбранного, не изменяя HTML-разметку. Это похоже на добавление штампа к документу: элемент остаётся прежним, а его оформление дополняется декоративными деталями, например, первой буквой абзаца или декоративной линией.
Пример:
Используйте псевдоэлементы, если хотите добавить что-то дополнительное, например, декоративные иконки или элементы оформления, которые не требуют отдельного HTML-блока.
Псевдоэлементы бывают следующими:
—
—
—
—
—
—
—
—
Что такое псевдокласс?
Псевдокласс меняет внешний вид элемента в зависимости от состояния, как будто элемент «перевоплощается» в зависимости от вашего взаимодействия с ним. Это работает, когда пользователь наводит курсор, активирует элемент или переводит его в фокус.
Пример:
Псевдоклассы применяются для управления активностью элемента — от наведения до фокуса — и помогают улучшить интерактивность пользовательского интерфейса.
Псевдоклассов очень много. Вот некоторые популярные виды псевдоклассов:
—
—
—
—
—
Когда использовать каждый вариант?
Псевдоэлементы добавляют декоративные или вспомогательные элементы визуально, не нарушая структуру HTML. Если вам нужно, чтобы страница выглядела ярче или содержала дополнительные визуальные подсказки (например, стрелочки, рамки, иконки), выбирайте псевдоэлементы.
Псевдоклассы же изменяют внешний вид уже существующих элементов в зависимости от их состояния. Это удобно для создания интерактивного интерфейса: ссылки изменяют цвет при наведении, поля выделяются в фокусе и так далее.
Важные моменты и подводные камни
При использовании этих инструментов важно учитывать совместимость браузеров: некоторые старые версии могут не поддерживать все возможности.
Также будьте внимательны к вопросам доступности: добавляемый декоративный контент не должен нарушать читаемость страницы или мешать пользователям с ограниченными возможностями. Кроме того, чрезмерное использование может усложнить поддержку кода, поэтому старайтесь использовать именно те варианты, которые действительно улучшают интерфейс и не дублируют функционал HTML.
Как вы применяете псевдоэлементы и псевдоклассы в своих проектах? Поделитесь опытом в комментариях!
#простымисловами #фронтенд #css
Что такое псевдоэлемент?
Псевдоэлемент позволяет добавить виртуальный элемент внутрь выбранного, не изменяя HTML-разметку. Это похоже на добавление штампа к документу: элемент остаётся прежним, а его оформление дополняется декоративными деталями, например, первой буквой абзаца или декоративной линией.
Пример:
p::first-letter {
font-size: 2em;
color: red;
}Используйте псевдоэлементы, если хотите добавить что-то дополнительное, например, декоративные иконки или элементы оформления, которые не требуют отдельного HTML-блока.
Псевдоэлементы бывают следующими:
—
::before — добавляет контент перед содержимым элемента.—
::after — добавляет контент после содержимого.—
::first-letter — стилизует первую букву элемента.—
::first-line — оформляет первую строку текста.—
::grammar-error — позволяет оформить часть документа, содержащую грамматическую ошибки, подсвеченную браузеров.—
::marker — стилизует поле маркера пункта, как маркированного, так и нумерованного.—
::selection — соответствует части документа, которая была выбрана.—
::spelling-error — как и ::grammar-error выделяет ошибку, отмеченную браузером, но уже орфографическуюЧто такое псевдокласс?
Псевдокласс меняет внешний вид элемента в зависимости от состояния, как будто элемент «перевоплощается» в зависимости от вашего взаимодействия с ним. Это работает, когда пользователь наводит курсор, активирует элемент или переводит его в фокус.
Пример:
a:hover {
color: green;
}Псевдоклассы применяются для управления активностью элемента — от наведения до фокуса — и помогают улучшить интерактивность пользовательского интерфейса.
Псевдоклассов очень много. Вот некоторые популярные виды псевдоклассов:
—
:hover — применяется при наведении курсора.—
:active — активируется во время нажатия.—
:focus — используется, когда элемент находится в фокусе (например, форма ввода).—
:visited — для посещённых ссылок.—
:not() — позволяет исключить элементы из селектора.Когда использовать каждый вариант?
Псевдоэлементы добавляют декоративные или вспомогательные элементы визуально, не нарушая структуру HTML. Если вам нужно, чтобы страница выглядела ярче или содержала дополнительные визуальные подсказки (например, стрелочки, рамки, иконки), выбирайте псевдоэлементы.
Псевдоклассы же изменяют внешний вид уже существующих элементов в зависимости от их состояния. Это удобно для создания интерактивного интерфейса: ссылки изменяют цвет при наведении, поля выделяются в фокусе и так далее.
Важные моменты и подводные камни
При использовании этих инструментов важно учитывать совместимость браузеров: некоторые старые версии могут не поддерживать все возможности.
Также будьте внимательны к вопросам доступности: добавляемый декоративный контент не должен нарушать читаемость страницы или мешать пользователям с ограниченными возможностями. Кроме того, чрезмерное использование может усложнить поддержку кода, поэтому старайтесь использовать именно те варианты, которые действительно улучшают интерфейс и не дублируют функционал HTML.
Как вы применяете псевдоэлементы и псевдоклассы в своих проектах? Поделитесь опытом в комментариях!
#простымисловами #фронтенд #css
Ключевые понятия LLM
Современные языковые модели (large language models) стали ключевым элементом в развитии искусственного интеллекта и обработки естественного языка.
Модели, основанные на глубоком обучении и архитектуре трансформеров, способны генерировать текст, отвечать на вопросы, писать код, создавать художественные произведения и даже участвовать в логических рассуждениях.
Освоение ключевых концепций, лежащих в основе LLM, позволяет глубже осознать их возможности и ограничения. В этом материале мы рассмотрим базовые термины и идеи, необходимые для работы с LLM и понимания их роли в современном мире.
Знание фундаментальных принципов, лежащих в основе работы LLM, открывает двери как для исследователей и разработчиков, так и для бизнес-специалистов, студентов и всех, кто хочет эффективно использовать эти технологии в своей практике.
Приятного прочтения!
Original post link: t.me/seniorFront/5443
Forwarded and filtered by @smartfeed_bot
Современные языковые модели (large language models) стали ключевым элементом в развитии искусственного интеллекта и обработки естественного языка.
Модели, основанные на глубоком обучении и архитектуре трансформеров, способны генерировать текст, отвечать на вопросы, писать код, создавать художественные произведения и даже участвовать в логических рассуждениях.
Освоение ключевых концепций, лежащих в основе LLM, позволяет глубже осознать их возможности и ограничения. В этом материале мы рассмотрим базовые термины и идеи, необходимые для работы с LLM и понимания их роли в современном мире.
Знание фундаментальных принципов, лежащих в основе работы LLM, открывает двери как для исследователей и разработчиков, так и для бизнес-специалистов, студентов и всех, кто хочет эффективно использовать эти технологии в своей практике.
Приятного прочтения!
Original post link: t.me/seniorFront/5443
Forwarded and filtered by @smartfeed_bot
CSS‑функция scroll() — новый способ задавать позиционирование
Вместо того чтобы вычислять координаты через JavaScript и вручную высчитывать положение пользователя на странице для создания полосы прокрутки, теперь можно задать позицию элемента прямо в CSS всего лишь с помощью
Здесь вы узнаете, как работает
#css #фронтенд #scroll
Original post link: t.me/tproger_web/5678
Forwarded and filtered by @smartfeed_bot
Вместо того чтобы вычислять координаты через JavaScript и вручную высчитывать положение пользователя на странице для создания полосы прокрутки, теперь можно задать позицию элемента прямо в CSS всего лишь с помощью
scroll(). Эта функция — часть CSS Anchor Positioning и позволяет точно управлять тем, как элемент ведёт себя в зависимости от положения якоря.Здесь вы узнаете, как работает
scroll(), какие у неего параметры и как он вписывается в современную систему позиционирования.#css #фронтенд #scroll
Original post link: t.me/tproger_web/5678
Forwarded and filtered by @smartfeed_bot
Когда попросил нейронку навайбкодить тебе сайт:
Original post link: t.me/tproger_web/5688
Forwarded and filtered by @smartfeed_bot
Original post link: t.me/tproger_web/5688
Forwarded and filtered by @smartfeed_bot
This media is not supported in your browser
VIEW IN TELEGRAM
Делаем своего LLM-агента на TypeScript
Годная статья для тех, кто хочет сделать свою Алису, Сири, Джарвиса или ещё кого. Автор реализовал своего агента, который понимает запросы, умеет выделять из них суть и преобразовывать её в команды для различных сервисов. Теперь вы можете также, ведь он подробно рассказал, что делать, используя TS и MCP.
Читаем тут: https://habr.com/ru/articles/926548/
#llm #ии #ypescript
Original post link: t.me/tproger_web/5716
Forwarded and filtered by @smartfeed_bot
Годная статья для тех, кто хочет сделать свою Алису, Сири, Джарвиса или ещё кого. Автор реализовал своего агента, который понимает запросы, умеет выделять из них суть и преобразовывать её в команды для различных сервисов. Теперь вы можете также, ведь он подробно рассказал, что делать, используя TS и MCP.
Читаем тут: https://habr.com/ru/articles/926548/
#llm #ии #ypescript
Original post link: t.me/tproger_web/5716
Forwarded and filtered by @smartfeed_bot
🎮 Пишем геймтон на nodejs!
Многие участвовали в хакатонах и гейм-тонах, но задумывались ли вы, как они создаются изнутри? Автор статьи пошёл дальше и с нуля разработал собственный геймтон на стеке Node.js + Prisma + Vue.js + Fastify. В материале подробно разбирается архитектура проекта, работа API, механика игры и даже тонкости расчёта попаданий по холсту.
Игровая идея проста: у вас есть катапульта, палитра цветов и задача максимально точно воспроизвести картинку уровня на виртуальном холсте. Можно подключиться к готовому соревнованию или даже запустить локально свой геймтон со своими правилами.
А вы пробовали писать игры или геймификацию на Node.js?
⛓ Полностью ознакомиться со статьёй
🚪 Frontender's notes
Original post link: t.me/frontendnoteschannel/5155
Forwarded and filtered by @smartfeed_bot
Многие участвовали в хакатонах и гейм-тонах, но задумывались ли вы, как они создаются изнутри? Автор статьи пошёл дальше и с нуля разработал собственный геймтон на стеке Node.js + Prisma + Vue.js + Fastify. В материале подробно разбирается архитектура проекта, работа API, механика игры и даже тонкости расчёта попаданий по холсту.
Игровая идея проста: у вас есть катапульта, палитра цветов и задача максимально точно воспроизвести картинку уровня на виртуальном холсте. Можно подключиться к готовому соревнованию или даже запустить локально свой геймтон со своими правилами.
• Хороший разбор фулстек-приложения с чистым кодом и примерами
• Практическое использование Fastify, Prisma, canvas и TypeScript
• Интересный пример геймификации API
А вы пробовали писать игры или геймификацию на Node.js?
⛓ Полностью ознакомиться со статьёй
🚪 Frontender's notes
Original post link: t.me/frontendnoteschannel/5155
Forwarded and filtered by @smartfeed_bot
«Хватит писать try/catch вокруг fetch: история о том, как я устал ловить ошибки»
Этот мем смешной, пока не осознаешь, что в реальных проектах мы именно так и поступаем. Только заворачиваем не весь код сразу, а каждый HTTP-запрос по отдельности.
Пишешь
Библиотека
#библиотека #javascript
Original post link: t.me/tproger_web/5776
Forwarded and filtered by @smartfeed_bot
Этот мем смешной, пока не осознаешь, что в реальных проектах мы именно так и поступаем. Только заворачиваем не весь код сразу, а каждый HTTP-запрос по отдельности.
Пишешь
fetch и рефлекторно добавляешь try/catch. Где-то словил TypeError, где-то таймаут, где-то сервер вернул 500. В итоге половина кода превращается в кашу проверок, а другая половина — в обработчики ошибок. Но проблема не в том, что мы ловим ошибки. Проблема в том, что fetch заставляет нас их ловить везде и всегда.Библиотека
safe-fetch решает эту проблема. Её задача проста: убрать try/catch из проектов навсегда. Как это работает и какие плюсы дает — в материале.#библиотека #javascript
Original post link: t.me/tproger_web/5776
Forwarded and filtered by @smartfeed_bot
Forwarded from Frontender's notes [ru]
В TypeScript часто приходится работать с объектами, которые должны строго соответствовать определённому контракту. Раньше это было не так уж и просто, и часто приходилось использовать as или дублировать типы вручную, что ломало строгую типизацию. Но satisfies решает эти проблемы.
type Theme = {
primary: string;
secondary: string;
};
const theme: Theme = {
primary: 'blue',
secondary: 'green',
extra: 'oops', // Ошибка не подсветится
};const theme = {
primary: 'blue',
secondary: 'green',
extra: 'oops',
} satisfies Record<'primary' | 'secondary', string>;TypeScript не замечал лишнее поле extra, потому что проверка шла только на совместимость типов, а не на полную соответствие. Теперь TypeScript сразу подскажет:
— Object literal may only specify known properties...
Поле extra не проходит проверку, что делает ваш код гораздо более безопасным.
Satisfies позволяет избежать добавления лишних свойств в объект. Это не только улучшает типизацию, но и сохраняет оригинальные типы объектов, не превращая их в универсальные Record.
Отлично подходит для тех, кто хочет сделать контракт с типами ещё более понятным и безопасным.
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from Data Science | Machinelearning [ru]
ИИ уже сам настраивает окружение и разворачивает приложения
Открытые репозитории с кодом, моделями и датасетами предлагают массу готовых решений. Однако, чтобы заставить всё работать, разработчикам часто приходится вручную настраивать окружение, устанавливать зависимости, скачивать нужные файлы и правильно настроить параметры. Но теперь есть решение, которое меняет подход.
Data Science
Открытые репозитории с кодом, моделями и датасетами предлагают массу готовых решений. Однако, чтобы заставить всё работать, разработчикам часто приходится вручную настраивать окружение, устанавливать зависимости, скачивать нужные файлы и правильно настроить параметры. Но теперь есть решение, которое меняет подход.
EnvX — это не просто инструмент, а настоящий ассистент для разработчиков, который использует возможности больших языковых моделей (LLM) для автоматизации многих задач. Он помогает автоматизировать не только подготовку окружения, но и взаимодействие между разными репозиториями, обеспечивая их «умную» кооперацию через стандартный интерфейс. Агент понимает README файлы, автоматически настраивает все необходимые компоненты и выполняет функции, руководствуясь природными инструкциями, без необходимости переписывать код.
Как это работает? Всё делится на три ключевых фазы. Первая — подготовка рабочего окружения. EnvX автоматически извлекает все необходимые шаги из документации и туториалов, собирает их в TODO-план и может выполнить их в нужной последовательности, при этом откатывая изменения, если что-то пошло не так. Это позволяет существенно упростить настройку и проверку окружения.
Вторая фаза — агентная автоматизация. Агент осваивает базовые DevOps-инструменты и понимает, как взаимодействовать с конкретным репозиторием. Он находит нужные функции и вызывает их с корректными параметрами, объясняя, что именно происходит на каждом шаге. Важно, что это всё происходит прозрачно и с возможностью повторить шаги при необходимости.
Третья фаза — взаимодействие агентов. Благодаря стандартизированному интерфейсу (A2A) агенты могут обмениваться информацией и работать вместе, решая задачи, которые требуют кооперации между различными репозиториями. Это позволяет создать действительно эффективную мультиагентную систему, где все элементы работают как единое целое.
В основе работы EnvX лежат несколько важных технологий, включая загрузку артефактов, управление зависимостями, чтение и запись файлов, а также поддержку множества популярных инструментов. Всё это даёт возможность работать с репозиториями в любом контексте, независимо от их специфики.
В испытаниях на репозиториях с различными типами задач (от обработки изображений до работы с текстами и видео) EnvX показал лучшие результаты в области исполнимости и качества работы. В сравнении с другими решениями, такими как OpenHands и Aider, система на основе EnvX продемонстрировала заметные улучшения по нескольким меткам, включая процент успешных завершённых задач (ECR) и качество выполнения задач (TPR).
Data Science
Нет, ну я знал, что программирование это то ещё извращение, но чтоб настолько...
Original post link: t.me/tproger_web/5789
Forwarded and filtered by @smartfeed_bot
Original post link: t.me/tproger_web/5789
Forwarded and filtered by @smartfeed_bot
Forwarded from Data Science | Machinelearning [ru]
Революция в код-ревью и автоматизации программирования 💃
OpenAI выпустила обновление GPT-5-Codex, который стал не просто усовершенствованной версией GPT-5, но и мощным инструментом для профессиональных разработчиков. Специально настроенный для агентного программирования, GPT-5-Codex решает сложные задачи разработки — от код-ревью до масштабных рефакторингов и автономного выполнения долгих задач.
Обновления в Codex поднимут качество код-ревью и взаимодействия с командой на новый уровень. GPT-5-Codex значительно упрощает процессы разработки и делает работу с кодом более интуитивно понятной и менее подверженной ошибкам. Что вы думаете о таких возможностях? Будете ли вы использовать GPT-5-Codex в своих проектах?
Data Science
OpenAI выпустила обновление GPT-5-Codex, который стал не просто усовершенствованной версией GPT-5, но и мощным инструментом для профессиональных разработчиков. Специально настроенный для агентного программирования, GPT-5-Codex решает сложные задачи разработки — от код-ревью до масштабных рефакторингов и автономного выполнения долгих задач.
— Новые возможности GPT для разработки
GPT-5-Codex стал значительно более управляемым и точным в выполнении задач. Модель теперь не просто генерирует код по запросу, но и активно участвует в процессе отладки, тестирования и поиска критических ошибок в коде. Это особенно важно на стадии разработки, где даже малейшая ошибка может привести к серьёзным последствиям. Помогает находить баги ещё до релиза и минимизирует нагрузку на разработчиков, анализируя всю кодовую базу и зависимости.
Поддерживает длительные задачи, например, масштабные рефакторинги, и может работать с проектами, включающими сотни файлов и тысячи строк кода. Этот инструмент оптимизирует взаимодействие с разработчиком, снижая затраты времени на многократные итерации.
— Как Сodex улучшает рабочие процессы
Теперь GPT интегрируется не только в облако и GitHub, но и в локальные среды, такие как IDE и Codex CLI. Разработчики могут работать как в облаке, так и локально, не теряя контекста и мгновенно переключаясь между различными платформами. Важным обновлением стала возможность работы с изображениями и визуальными элементами — теперь можно анализировать скриншоты и вайрфреймы для упрощения дизайна интерфейсов.
— К тому же, Codex стал ещё более безопасным
Новая версия включает расширенные меры защиты данных, минимизируя риски утечек и злоупотреблений.
Обновления в Codex поднимут качество код-ревью и взаимодействия с командой на новый уровень. GPT-5-Codex значительно упрощает процессы разработки и делает работу с кодом более интуитивно понятной и менее подверженной ошибкам. Что вы думаете о таких возможностях? Будете ли вы использовать GPT-5-Codex в своих проектах?
Data Science
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from Frontender's notes [ru]
В последние годы инструменты с большими языковыми моделями (LLM) для разработчиков стали настоящим трендом. GitHub Copilot, Cody, Windsurf, Cursor, Continue, Pieces, Codeium — каждый из них обещает «в 10 раз ускорить разработку» и «освободить от рутины». Но давайте быть честными — далеко не все из них действительно экономят ваше время и усилия.
• GitHub Copilot
Лучший инструмент для подсказок и автокомплита. Понимает контекст функции и предлагает адекватные продолжения.
Но вот минус — часто предлагает «почти правильный» код, который нужно тщательно проверять. Полностью полагаться на него не стоит.
• Cursor / Windsurf
IDE с встроенным LLM. Ты можешь взаимодействовать с кодом прямо внутри проекта. Например, сказать: «переделай этот хук под Zustand», и — вуаля — работает!
Это не просто плагин, а настоящая интеграция с вашей средой разработки.
• Cody (Sourcegraph)
Прекрасно справляется с большими кодовыми базами. Читает весь репозиторий, понимает зависимости и может ответить на вопросы вроде «где используется эта функция?»
Это особенно полезно для крупных проектов, где нужно быстро ориентироваться в коде.
— Например, плагины для VSCode, которые просто подключают ChatGPT. Они не понимают контекста проекта, путаются в импортax, иногда предлагают код, который не компилируется. Эти инструменты вряд ли сильно помогут в реальной работе.
— LLM уже не игрушка. Это совершенно новый способ взаимодействия с кодом. Но эффективность зависит от того, насколько хорошо этот инструмент интегрирован в рабочий процесс.
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from Data Science | Machinelearning [ru]
GPT-5.1-Codex-Max: Новый кодинг от OpenAI 🍆
OpenAI анонсировала новинку, которая может стать настоящим прорывом — GPT-5.1-Codex-Max. Выглядит как не просто шаг в ответ на бурю вокруг Gemini, а вполне себе уверенный шаг вперёд.
Так что, эта версия уже доступна для использования в IDE и Codex CLI. Ждете API? Обещают скоро добавить.
Data Science
OpenAI анонсировала новинку, которая может стать настоящим прорывом — GPT-5.1-Codex-Max. Выглядит как не просто шаг в ответ на бурю вокруг Gemini, а вполне себе уверенный шаг вперёд.
Что же интересного в этой версии? Давайте разберёмся.
Революция для Windows и Powershell
Теперь Codex не просто кодит как обычно. Он понял, как работать в среде Windows, и особенно с Powershell. Это означает, что модель теперь точно разбирается в особенностях файловой системы, путях и всем, что связано с Windows. Но это ещё не всё — появилась новая фича под названием "Agent mode". Эта штука позволяет модели работать автономно в терминале, выполняя задачи без постоянного контроля. Не забудьте, что доступ можно настроить, если надо.
Автономность на новом уровне
OpenAI заявляет, что модель способна работать более 24 часов без остановки. Можете себе представить? Правда, тут стоит напомнить про достижение Anthropic с их Sonnet 4.5, которая обещает 30 часов работы. Но всё равно впечатляет, правда?
Новая память — что это значит?
Модель теперь умеет работать с большими контекстами, благодаря новой фиче "compaction". Что это? Когда окно контекста близко к своему пределу, Codex сжимает старую информацию и переносит её в новое окно вместе с актуальной информацией. Как бы креативная версия краткосрочной и долгосрочной памяти, не так ли?
Результаты и метрики
GPT-5.1-Codex-Max показывает отличные результаты — 77.9% точности на SWE-bench Verified, что превосходит даже Gemini 3 и Sonnet 4.5 от Claude. К тому же, модель теперь тратит на 30% меньше токенов при среднем уровне рассуждений, но результаты всё те же.
Так что, эта версия уже доступна для использования в IDE и Codex CLI. Ждете API? Обещают скоро добавить.
Data Science
Please open Telegram to view this post
VIEW IN TELEGRAM
Кликджекинг без JavaScript — это возможно
Researcher Lyra Rebane открыла уязвимость, которая ломает классические защиты: атаку можно провести чистым CSS и SVG, обходя Content Security Policy и X-Frame-Options.
В чём суть:
🔘 SVG фильтры (feBlend, feComposite) работают как полноценные логические вентили;
🔘 можно перехватить пиксели со скрытых iframes, не используя JS;
🔘 защита от XSS есть, но от CSS-атак ещё нет.
Proof-of-concept: атака на Google Docs — украдены текст документа через фальшивую кнопку «Generate Document».
Google выплатила $3133.70 за bug report. Уязвимость всё ещё не пофиксена и затрагивает Chrome, Firefox и другие браузеры.
Полный разбор читайте по ссылке:
https://www.theregister.com/2025/12/05/css_svg_clickjacking/
#безопасность
Original post link: t.me/tproger_web/5992
Forwarded and filtered by @smartfeed_bot
Researcher Lyra Rebane открыла уязвимость, которая ломает классические защиты: атаку можно провести чистым CSS и SVG, обходя Content Security Policy и X-Frame-Options.
В чём суть:
🔘 SVG фильтры (feBlend, feComposite) работают как полноценные логические вентили;
🔘 можно перехватить пиксели со скрытых iframes, не используя JS;
🔘 защита от XSS есть, но от CSS-атак ещё нет.
Proof-of-concept: атака на Google Docs — украдены текст документа через фальшивую кнопку «Generate Document».
Google выплатила $3133.70 за bug report. Уязвимость всё ещё не пофиксена и затрагивает Chrome, Firefox и другие браузеры.
Полный разбор читайте по ссылке:
https://www.theregister.com/2025/12/05/css_svg_clickjacking/
#безопасность
Original post link: t.me/tproger_web/5992
Forwarded and filtered by @smartfeed_bot
ScrapeGraphAI — умный веб-скраппер на основе ИИ
Это Python-библиотека для веб-скрапинга, которая использует LLM и логику direct graph для создания конвейеров скрапинга для веб-сайтов и локальных документов (XML, HTML, JSON, Markdown и т.д.).
Просто укажите, какую информацию вы хотите извлечь, и библиотека сделает это за вас!
Инструкция по использованию тут: https://github.com/ScrapeGraphAI/Scrapegraph-ai
#инструменты #python
Original post link: t.me/tproger_web/6035
Forwarded and filtered by @smartfeed_bot
Это Python-библиотека для веб-скрапинга, которая использует LLM и логику direct graph для создания конвейеров скрапинга для веб-сайтов и локальных документов (XML, HTML, JSON, Markdown и т.д.).
Просто укажите, какую информацию вы хотите извлечь, и библиотека сделает это за вас!
Инструкция по использованию тут: https://github.com/ScrapeGraphAI/Scrapegraph-ai
#инструменты #python
Original post link: t.me/tproger_web/6035
Forwarded and filtered by @smartfeed_bot
Forwarded from Data Science | Machinelearning [ru]
Cursor обновил BugBot: как автоматический code review стал в 2,5 раза эффективнее 🤔
Знаете, как это бывает: создаёшь инструмент, думаешь, что он будет решать все проблемы, а он — ну такой себе. Вроде работает, но не идеально. Так вот, недавно Cursor прокачал своего BugBot — агента для автоматического code review. И теперь это уже не просто игрушка, а реально полезный инструмент.
Так что теперь можно с уверенностью сказать, что BugBot от Cursor — это полноценный инструмент, который уже решает реальные задачи.
Data Science
Знаете, как это бывает: создаёшь инструмент, думаешь, что он будет решать все проблемы, а он — ну такой себе. Вроде работает, но не идеально. Так вот, недавно Cursor прокачал своего BugBot — агента для автоматического code review. И теперь это уже не просто игрушка, а реально полезный инструмент.
Когда BugBot только появился, было сложно сказать, что его польза настолько велика. Однако после нескольких месяцев улучшений и доработок, мы видим не просто маленький рост, а настоящий скачок. Вот вам цифры:
• Resolution rate (уровень разрешённых багов) вырос с 52% до 70%. Это уже звучит серьёзно
• Среднее количество багов, которые ловит Bot за один запуск, увеличилось с 0,4 до 0,7
• А самое главное, доля разрешённых багов на PR (pull request) возросла с 0,2 до 0,5 — то есть, BugBot стал в 2,5 раза эффективнее!
Как они этого добились?😡
Да, не просто так. Чтобы достичь такого результата, команде Cursor пришлось провести аж 40 итераций экспериментов. Посмотрите на график их работы — там прямо видно, как всё постепенно улучшалось.
Раньше BugBot анализировал PR одним способом, а теперь он прогоняет его через несколько представлений diff’а. Что это значит? Он анализирует код по-разному — с обычным контекстом, с расширенным, с учётом изменений, и даже разбивает код на слова. После этого Bot склеивает все результаты в одну картину. И это работает. Похоже на супер-агент с несколькими «глазами» для проверки.
Так что теперь можно с уверенностью сказать, что BugBot от Cursor — это полноценный инструмент, который уже решает реальные задачи.
Data Science
Please open Telegram to view this post
VIEW IN TELEGRAM