👩‍💻 Валидируем форму прямо в браузере. Без JavaScript, регистрации и смс!

Псевдоклассы :valid и :invalid в CSS позволяют стилизовать поля формы в зависимости от результата встроенной HTML-валидации. Они работают с ограничениями вроде required, pattern, min, max, type="email" и другими.

Как это используется:
• :valid — поле заполнено корректно;
• :invalid — значение не прошло проверку;
• можно менять цвет рамки, фона или отображать состояние поля.

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

📣 Code Ready | #свойство

🐙 Text Behind Image – полезный инструмент для создания текста на заднем плане фотографии. Проект имеет открытый исходный код.

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

🐙 Text Behind Image – полезный инструмент для создания текста на заднем плане фотографии. Проект имеет открытый исходный код.

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

🖥 Glass Flowers 3D Assets – набор PNG-изображений стеклянных цветов. Есть три варианта картинок: золотые, сине-розовые (с фильтром) и черно-белые.

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

🔥 Шпаргалка по Selenium на русском — бери и автоматизируй всё!

💻 Selenium — твой инструмент для управления браузером, парсинга и автоматизации: клики, ввод текста, авторизация, сбор данных с динамических сайтов.

Внутри:
💬 Настройка браузера.
💬 Поиск элементов разными способами.
💬 Работа с вкладками, cookie, фреймами.
💬 Запуск JavaScript прямо из Python и многое другое.

💾 Обязательно сохрани, пригодится!
Всё с примерами и пояснениями — открыл и работаешь!

Спасибо за поддержку! 👍

#python #cheatsheet #doc #soft

Ещё не все языки программирования выучил, ещё один — и тогда пойдёшь искать работу?
А там: пройдите стажировку за печеньки 3 месяца, и только потом статус джуна с оплатой до 100 000 ₽. Сомнительный план.

Сережа так и делал.
Самоучка, 4 месяца откликов, ноль ответов. Каждое утро — открыть сайт, отправить 10 резюме, закрыть ноутбук и ждать письмо "вы нам не подходите".

Проблема была не в знаниях, а в устаревшем стеке и понимании как дойди до живого HR.
После проработки по системе:
оффер AQA-инженера на 265 000 ₽ через 149 дней, без коммерческого опыта.

Зачем терять полгода на статусе джуна и терять в деньгах, когда можно потратить то же время на мидла — конкуренция меньше, оплата больше.
Но чтобы вписаться сразу на мидла, нужна опробованная система.
Подробно о ней — по ссылке.
Гайд как пройти испытательный срок внутри.
Еще реферальные ссылки сразу на живых hr компании

доступ сразу. без регистрации → https://t.me/find_it_mentor_bot?start=utm_tg_ad_l1

ссылка сгорит через 24 часа

Passive Event Listeners: оптимизация обработки touch- и wheel-событий!

При обработке некоторых событий ввода браузеру необходимо понимать, может ли JavaScript-обработчик отменить стандартное поведение события.

Например, при взаимодействии с экраном пользователь ожидает мгновенной прокрутки страницы. Однако обработчик touchmove может вызвать event.preventDefault() и заблокировать стандартный жест браузера. Если обработчик считается непассивным, браузеру может потребоваться дождаться завершения его выполнения, прежде чем начать или продолжить прокрутку. Обычный обработчик события:
window.addEventListener(
'touchmove',
event => {
const touch = event.touches[0];

console.log(
touch.clientX,
touch.clientY
);
},
{
passive: false
}
);

В этом случае браузер должен учитывать, что обработчик потенциально может вызвать preventDefault(). Поэтому прокрутка может быть отложена до завершения выполнения JavaScript-кода.

Чтобы явно указать, что обработчик не будет отменять стандартное поведение, используется параметр passive.
window.addEventListener(
'touchmove',
event => {
const touch = event.touches[0];

console.log(
touch.clientX,
touch.clientY
);
},
{
passive: true
}
);

Теперь браузер знает, что обработчик не вызовет preventDefault(), и может обрабатывать прокрутку без ожидания завершения JavaScript-кода.

Следует учитывать, что современные браузеры в некоторых случаях автоматически используют пассивный режим для обработчиков touchstart, touchmove, wheel и mousewheel, зарегистрированных на window, document или body. Конкретное поведение зависит от браузера, события и целевого элемента. Поэтому, если обработчик должен гарантированно вызывать preventDefault(), лучше явно указать:
{
passive: false
}

Событие scroll отличается тем, что возникает после изменения позиции прокрутки и не может быть отменено через preventDefault(). Поэтому использование passive для scroll не даёт преимуществ производительности. Например:
window.addEventListener(
'scroll',
() => {
const position = window.scrollY;

document.querySelector(
'.header'
).style.opacity = Math.min(
position / 500,
1
);
}
);

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

В подобных случаях эффективнее заранее сохранить ссылку на элемент, сократить объём выполняемой работы и при необходимости использовать requestAnimationFrame или throttling.
const header = document.querySelector('.header');

let scheduled = false;

window.addEventListener('scroll', () => {
if (scheduled) {
return;
}

scheduled = true;

requestAnimationFrame(() => {
header.style.opacity = Math.min(
window.scrollY / 500,
1
);

scheduled = false;
});
});

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

Также важно учитывать, что passive: true запрещает отмену стандартного поведения события. Вызов:
event.preventDefault();

Внутри пассивного обработчика не остановит стандартное поведение браузера и обычно приведёт к предупреждению в консоли.
window.addEventListener(
'touchmove',
event => {
event.preventDefault();
},
{
passive: true
}
);

passive: true целесообразно использовать, если обработчик только анализирует событие или обновляет интерфейс и ему не требуется вызывать preventDefault(). Если обработчик должен отменять стандартное поведение браузера, его нельзя делать пассивным.

🔥 Passive Event Listeners уменьшают задержки при обработке touch- и wheel-событий, поскольку браузеру не требуется ожидать возможного вызова preventDefault(). При этом они не устраняют проблемы, связанные с тяжёлыми JavaScript-обработчиками.

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

💾 Circular Animations – девять современных минималистичных лоадеров. Фигуры состоят из одинаковых белых кружков, которые могут менять размер и прозрачность.

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

💾 3D Realistic Bee – лендинг с 3D-анимацией пчелы и 3D-иллюстрациями на заднем плане. Текст находится "между" этими двумя слоями.

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

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

HEX | RGB
#D6E0E2 | rgb(214, 224, 226)
#D5FF5F | rgb(213, 255, 95)
#4E6075 | rgb(78, 96, 117)

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

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

👩‍💻 Отключает валидацию формы. Зачем нам валидация формы браузером, когда у нас есть JS?

Атрибут novalidate используется у тега <form> и отключает стандартную валидацию полей браузером при отправке формы.

По умолчанию браузер сам проверяет такие ограничения, как:
• обязательные поля (required);
• корректность email (type="email");
• формат данных (pattern);
• минимальные и максимальные значения (min, max).

После добавления novalidate эта проверка не выполняется, и отправка формы передаётся полностью под контроль JS или серверной логики. Важно: novalidate не отключает атрибуты в HTML, а только запрещает браузеру автоматически проверять их при отправке.

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

💾 Metal Gear Radar States – уведомления в стиле ретро-дисплеев. Для создания атмосферы используется зернистый фон, пиксельный шрифт и приглушенные цвета.

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

🔣Павлу грозят пожизненным.
🔣Телеграм могут признать террористическим.
🔣Госдума призвала россиян не покупать Премиум в Телеграме.
🔣Финляндия отрезает Россию от европейского интернета.

🔜Прошла только половина дня

🤨

Symbol: как добавлять внутренние свойства объектов без конфликтов!

В JavaScript объекты часто используются разными частями приложения, библиотеками и компонентами одновременно. Иногда требуется добавить к существующему объекту дополнительные данные: состояние компонента, метаданные, кэш или внутренние флаги.

Добавление обычных свойств может привести к конфликтам. Если такое имя уже используется другим кодом, одно значение может случайно заменить другое.
const element = {
value: "button"
};

element.state = {
mounted: true
};

Если свойство state уже существует в объекте, новое значение перезапишет старое. В больших приложениях такие ситуации могут быть сложными для поиска, особенно когда объект расширяется несколькими независимыми модулями.

Для решения этой задачи существует Symbol — это примитивный тип данных, который создаёт уникальные ключи свойств объектов. Каждый созданный символ является уникальным, поэтому он не может случайно совпасть с обычным строковым свойством или другим символом.
const internalState = Symbol("internalState");

const component = {
value: "button",

[internalState]: {
mounted: true
}
};

console.log(component[internalState]);

// { mounted: true }

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

Даже если другой код добавит свойство с похожим названием, конфликт не возникнет:
component.internalState = false;

console.log(component[internalState]);

// { mounted: true }

Symbol-свойства имеют ещё одну особенность: они не отображаются в большинстве стандартных способов перебора объектов. Например, Object.keys() возвращает только строковые ключи:
Object.keys(component);

// ["value"]

Это позволяет хранить дополнительные данные внутри объекта, не добавляя их в обычное представление объекта и его публичный API. При необходимости получить символьные свойства можно явно:
Object.getOwnPropertySymbols(component);

Такой подход часто используется в библиотеках и компонентах, которым необходимо хранить внутренние данные, связанные с объектом. Например, можно добавить метаданные компонента:
const meta = Symbol("meta");

function initComponent(component) {
component[meta] = {
id: crypto.randomUUID(),
createdAt: Date.now()
};
}

После этого объект получает внутреннюю информацию, но его внешний интерфейс остаётся неизменным:
component.id;

// undefined

component[meta].id;

// UUID

Кроме пользовательских символов, JavaScript содержит встроенные Symbol, которые позволяют изменять стандартное поведение объектов:
Symbol.iterator
Symbol.asyncIterator
Symbol.toPrimitive

Например, Symbol.iterator позволяет объекту поддерживать цикл for...of:
const collection = {
items: ["a", "b"],

[Symbol.iterator]() {
return this.items[Symbol.iterator]();
}
};

for (const item of collection) {
console.log(item);
}

Важно понимать: Symbol не является механизмом настоящей приватности. Символьные свойства можно найти через:
Object.getOwnPropertySymbols();

Reflect.ownKeys();

Основная задача Symbol — создавать уникальные ключи и безопасно расширять объекты без риска конфликтов имён. Для настоящей приватности в классах JavaScript используются #private fields.

🔥 Symbol — практический инструмент для создания библиотек, компонентов и больших frontend-систем, где требуется добавлять внутренние данные, сохраняя чистый публичный API объекта.

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

‌Издательский дом «Новые отраслевые медиа» собрал для вас лучшие каналы из сферы искусственного интеллекта и интернет-технологий, которые помогают своим подписчикам быть в курсе всех важных профессиональных новостей.

Здесь - всё про ключевых игроков отрасли, государственное регулирование, инсайды и кейсы от отраслевых лидеров.

✅Серверная - канал об индустрии дата-центров: технологиях, инфраструктуре, облачных решениях, энергоэффективности и применении ЦОД в ключевых отраслях экономики.

✅Робосфера - канал об индустрии робототехники: технологии и тренды. Промышленные и сервисные роботы, коботы, автоматизация, ИИ, машинное зрение, автономные системы.

✅AI для бизнеса - всё об AI-решениях для бизнеса: внедрение, автоматизация, корпоративный ИИ, агенты.

✅ТехноРитейл - канал о производстве и продаже бытовой техники и электроники в России: бренды, e-com, маркетинг, retail tech.

Подписывайтесь, и эти каналы смогут изменить вашу жизнь к лучшему!

Реклама. Харламов А.Е. ИНН 712803816807. erid: 2W5zFJNTBaZ

💾 Deconstructed Cards – два варианта карточек с эффектом зума и подвижным фоном. Текст в активном режиме становится ярче, а графика – заметнее.

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

💾 Text Circle Animation – круг со словами, который можно вращать курсором. При быстром движении буквы "разлетаются" в стороны.

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