📂 Напоминалка для работы с Query Parameters!

Например, get() позволяет получить значение параметра, set() обновить существующий параметр, append() добавить новый, а delete() удалить ключ вместе со всеми значениями.

На картинке — основные методы URLSearchParams, примеры работы с параметрами запроса и базовые сценарии использования в современной web-разработке.

Сохрани, чтобы не потерять!

📣 Code Ready | #ресурс

16 июля встречаемся с JS‑сообществом SberProfi в Сбер.Среде.

AI уже меняет JavaScript‑разработку. Вопрос не в том, заменит ли он инженеров, а в том, кто освоит его быстрее и качественнее.

🔥 Обсудим изменения на реальных кейсах от Сбера, Cloud․ru и Mish. Очные участники увидят спецформат от блогеров и пообщаются с экспертами GigaCode и GitVerse.

⏳ Начало в 17:00, встреча очных гостей - в 16:00.
Количество очных мест ограничено – успейте зарегистрироваться!

👩‍💻 Добавляем подсказки в поля формы с помощью атрибута placeholder!

Атрибут, который подсказывает пользователю, что именно нужно ввести в поле ввода (обычно это пример слова или фразы). А ещё значение атрибута исчезает, как только пользователь начинает вводить текст.

Чаще всего используется с:

• — для текстовых полей, поиска, email, телефона и других типов ввода;
• — для подсказок в многострочных полях.

Часто из-за дизайнерских решений placeholder используется для замены более семантического элемента метки. Однако это не означает, что текст-заполнитель может заменить , поскольку это создаёт неудобства для пользователей с особыми потребностями.

📣 Code Ready | #атрибут

Ищем новичков во фронтенд-разработке и вёрстке сайтов.

Поможем добавить в портфолио проект стоимостью 50 000 рублей и получить опыт работы с опытными разработчиками.

А именно:

- Сверстать веб-сайт на HTML + CSS;
- Реализовать функционал на JavaScript;
- Пощупать фронтенд-фреймворк Angular;
- Подключить Backend и загрузить сайт на хостинг.

Чтобы в итоге ты своими руками разработал качественный сайт, который не стыдно добавить в портфолио или продать.

Такой опыт можно получить на бесплатном практикуме уже завтра с поддержкой от опытных кураторов на каждом этапе.

👉 Приходи на бесплатное обучение

🔥 Набор идёт до 21.07.

Проверяем интернет-скорость!

Хочешь узнать, насколько быстрый у тебя интернет? Для этого есть готовый пакет speedtest-net, который позволяет получить скорость загрузки, отдачи и пинга.

Такой скрипт можно встроить в мониторинг или просто проверить сеть без браузера.

Шаг 1 — импортируем:
const speedTest = require('speedtest-net');

Шаг 2 — запускаем тест:
(async () => {
const res = await speedTest({ acceptLicense: true });
})();

Шаг 3 — форматируем и выводим результаты:
// Загрузка
console.log(`Download: ${(res.download.bandwidth / 125000).toFixed(2)} Mbps`);

// Выгрузка
console.log(`Upload: ${(res.upload.bandwidth / 125000).toFixed(2)} Mbps`);

// Пинг
console.log(`Ping: ${res.ping.latency} ms`);

🔥 Теперь у тебя свой speedtest прямо в коде. Можно запускать вручную или добавить в cron для регулярного замера.

📣 Code Ready | #практика

🖥 Presentation Template – яркие карточки для презентаций с крупными, броскими иллюстрациями. Они помогут привлечь внимание и не перегружать слайды информацией.

Сайтодел | #макет #figma

Крутая статья попалась на Хабре: «HTML Sanitizer API: конец эпохи DOMPurify и XSS-страданий»!

В этой статье:
• Разбирается, почему привычные способы защиты от XSS становятся сложнее и какие проблемы есть у старых подходов вроде DOMPurify;
• Показывается новый HTML Sanitizer API, который позволяет безопаснее работать с пользовательским HTML прямо на уровне браузера;
• Объясняется, как современные веб-разработчики могут упростить код и повысить безопасность приложений.

🔊 Продолжай читать на Habr!

📣 Code Ready | #статья

💾 Neural Noise – эффект для фона, который напоминает плазму. Пучки света двигаются за курсором, на нажатия они не реагируют.

Сайтодел | #сниппет #css

‌Первое ощущение от ИИ-помощника — восторг. Второе — что каждый второй кусок кода приходится править за ним руками

Инструмент вторичен — Cursor, Copilot, Codeium, что угодно. Проблема одна: модель не знает, какие в вашей команде соглашения, какие типы обязательны, где заканчивается общий стандарт и начинается «в этом проекте у нас так». И пока она этого не знает — она пишет усредненно, а вам приходится дорабатывать.

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

На воркшопе karpovꓸcourses «AI-first разработка на Python» Алексей Жиряков за 4 часа показывает, как это делается. Собираете рабочую агентную среду: правила, автоматические проверки, тесты через агента, ревью по чек-листу архитектуры, метрики вклада ИИ в цифрах по коммитам.
Не слайды и не демо: рабочее место, которое переносите к себе в проект.

Стек — Litestar + PostgreSQL + Alembic. Тем, кто пишет на FastAPI, тоже подходит. Модели подключаете через OpenRouter (один ключ — gpt-5, Claude, DeepSeek, Qwen), сравниваете на своей задаче.

Алексей — 15+ лет в бэкенде, ex-Stream CTO KION, сейчас исполнительный директор в Сбере (блок «Развитие генеративного ИИ»).

Соберите правила один раз, чтобы не править за агентом:
С промокодом aikarpov20 — скидка 20%

Реклама. ООО «КАРПОВ КУРСЫ». ИНН 7811764627. erid: 2W5zFHjVXbP

Опа, тут бывший сеньор одного из IT-отделов Яндекса Игорь Никитин выкатил целый канал про Python — и это лучшее, что есть в рунете по теме.

Качественные гайды. Советы от известных прогеров. Тематические мемасы. Короче, ничего лишнего.

Хватит душить питона, учись его кодить: https://telegram.me/+TdJokxIz7K5lOTQ6 🐍

IT мероприятия 🤘

Всё самое интересное для карьеры в IT: митапы, хакатоны, конференции, стажировки и обучение.

Подписывайся 🤘

1. Москва
2. Санкт-Петербург
3. Для стажеров и студентов

Node.replaceWith() — замена DOM-элемента без пересборки HTML!

Когда нужно заменить элемент на странице, часто используют innerHTML, outerHTML или удаляют старый узел, а потом создают новый. В небольших интерфейсах разницы почти не видно, но внутри браузера это разные операции.

Если вы работаете с динамическими интерфейсами, где есть состояние элементов и обработчики событий, такие детали становятся важными. Например:
const oldElement = document.querySelector('.message');

oldElement.outerHTML = `

Saved

`;

Выглядит просто: старый элемент заменили новым. Но браузер получает строку HTML, разбирает её и создаёт новый DOM-узел. Старый элемент исчезает из DOM, а на его месте появляется другой объект.

Если где-то была сохранена ссылка на старый элемент или на нём были обработчики событий, они не перейдут автоматически. Для браузера это уже другой DOM-объект.

Для замены конкретного узла есть более подходящий метод:
const oldElement = document.querySelector('.message');

const newElement = document.createElement('div');

newElement.textContent = 'Saved';

oldElement.replaceWith(newElement);

replaceWith() работает непосредственно с DOM-узлами. Браузеру не нужно заново парсить HTML-строку — он получает готовый элемент и заменяет только нужное место в DOM-дереве.

Это удобно, когда вокруг элемента есть другая разметка, которую не нужно трогать. Например:
const button = document.querySelector('.button');

const loader = document.createElement('span');

loader.textContent = 'Loading...';

button.replaceWith(loader);

Меняется только button. Родительский элемент, соседние узлы и остальная структура страницы остаются без изменений.

Разница хорошо заметна, если сравнить с innerHTML. Например:
const container = document.querySelector('.container');

container.innerHTML = `

New content

`;

Здесь браузер заново создаёт содержимое контейнера из строки. Даже если часть элементов выглядит так же, это могут быть уже новые DOM-объекты. Например:
const input = document.querySelector('.search');

input.value = 'frontend';

container.innerHTML += `

New block

`;

Если input находится внутри container, старый элемент будет пересоздан вместе с содержимым. Можно потерять значение поля, обработчики событий и ссылки на старые DOM-объекты.

Именно поэтому innerHTML += часто становится причиной багов. replaceWith() такого поведения не создаёт, потому что меняет только указанный узел. Например:
const title = document.querySelector('.title');

const newTitle = document.createElement('h2');

newTitle.textContent = 'New title';

title.replaceWith(newTitle);

Это удобно, когда один элемент интерфейса переходит в другое состояние: загрузка заменяется результатом, временный блок заменяется данными с сервера или один компонент меняется на другой.

Но важно учитывать: новый элемент не наследует обработчики старого. Например:
const button = document.querySelector('.button');

button.addEventListener('click', handleClick);

const newButton = document.createElement('button');

button.replaceWith(newButton);

После замены новый button будет другим объектом, поэтому старый обработчик к нему не относится.

Если нужно сохранить поведение, обработчик нужно добавить заново:
newButton.addEventListener('click', handleClick);

Также replaceWith() может принимать несколько узлов:
element.replaceWith(title, text, button);

Браузер удалит старый элемент и вставит переданные узлы на его место. Причём это могут быть не только элементы, но и текстовые узлы:
element.replaceWith('Hello');

🔥 Подведем итог: replaceWith() удобен для точечной замены DOM-элементов без повторного парсинга HTML и пересоздания всей окружающей структуры. В отличие от innerHTML, он работает напрямую с узлами и даёт больше контроля над изменениями DOM.

📣 Code Ready | #практика

🖥 DesignCode UI – дизайн-система для создания мобильных приложений. Она включает в себя полупрозрачные скругленные карточки и элементы с разноцветными градиентами.

Сайтодел | #макет #figma

⚡️ FOOTRUE — мега полезный сайт с более чем 300 сервисами для работы, учебы и отдыха в одном месте.

Надо быстро обработать PDF, сгенерировать пароль, отредактировать текст или поработать с кодом? Не нужно искать отдельные сервисы.

Footrue объединяет множество бесплатных онлайн-инструментов в одном интерфейсе.

Что умеет?
💬 Предлагает полезные инструменты для работы с кодом.
💬 Помогает с финансовыми расчетами и другими повседневными задачами.
💬 Форматирует, очищает и анализирует текст.
💬 Склеивает, разделяет, сжимает и конвертирует PDF.
💬 Генерирует QR-коды, надежные пароли и случайные данные.
💬 Обрезает, объединяет видео и много ещё чего интересного.

💥 Добавляем в закладки! Один сайт — десятки полезных сервисов на каждый день.

😳 Лайф | 📲 Зеркало Max

#soft

🎨 Цветовая палитра макета "Beauty And Skincare Landing Page"

HEX | RGB
#D1E3E3 | rgb(209,227,227)
#93CCDF | rgb(147,204,223)
#2B6477 | rgb(43,100,119)

⚠️ Цвет копируется одним кликом!

Сайтодел | #палитра

🎨 Цветовая палитра макета "Mid Mod"

HEX | RGB
#F9BACB | rgb(249,186,203)
#B7B129 | rgb(183,177,41)
#4B442B | rgb(75,68,43)

⚠️ Цвет копируется одним кликом!

Сайтодел | #палитра

💀 Нейронка Claude попыталась списать с карты пользователя более $16 миллионов долларов.

Anthropic позже признала сбой. Банк тем временем заподозрил работягу в подозрительных операциях.

Хорошо они хоть кредиты пока не научились брать 🤨

С добрым утром! ☕️

👩‍💻 Отображаем математические формулы с помощью тега !

Тег используется для встраивания математических выражений на веб-страницу с помощью языка MathML. Он позволяет отображать дроби, степени, корни, индексы, матрицы и другие математические конструкции без изображений.

Кроме глобальных атрибутов, поддерживает:

• display="inline" — формула отображается внутри строки (по умолчанию).
• display="block" — формула выводится отдельным блочным элементом.
• alttext — альтернативное текстовое описание формулы.

Все теги MathML чувствительны к регистру: используйте строго строчные (, а не ). Для лучшего внешнего вида можно подключать стили к формуле, но аккуратно, некоторые свойства не работают

📣 Code Ready | #атрибут

⚡️ HunyuanOCR — это не обычный OCR, который путает буквы и плачет от плохого качества.

Распознаёт текст на фото, сканах и даже кривых телефонных снимках с точностью, что ставит Google Vision в неловкое положение.

Что умеет:
📸 Считывает текст на любых изображениях — документы, фото, меню, вывески, рукописные заметки.
🧠 Мощная модель от Tencent — понимает структуру, расположение блоков, выделяет зоны текста.
🌚 Работает даже на плохих фото — шум, тени, наклон, бликующий экран — распознаёт всё.
😰 Есть Python-интерфейс — можно встроить в бота, сервис или свою автоматизацию.
🗂 Разбирает сложные макеты — таблицы, колонки, многостраничные файлы.
🆓 Полностью бесплатно и open-source.

▶️ Пример использования:
from vllm import LLM, SamplingParams
from PIL import Image
from transformers import AutoProcessor

def clean_repeated_substrings(text):
"""Clean repeated substrings in text"""
n = len(text)
if n<8000:
return text
for length in range(2, n // 10 + 1):
candidate =...

Перейти на оригинальный пост