🐙 PeerTube – видеохостинг с открытым исходным кодом, созданный на Typescript. Его главное отличие от других платформ – децентрализованное хранение данных.

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

😳 Что такое 4D

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

👨‍💻 Front-End Web Development Resources — большая подборка ресурсов по frontend-разработке!

Здесь собраны ресурсы по HTML, CSS, JavaScript, React, Angular, Vue.js, TypeScript, Git, UI/UX, адаптивной вёрстке, инструментам разработки и многим другим направлениям. Материалы подойдут как начинающим разработчикам, так и тем, кто уже работает и хочет расширить знания или быстро найти качественные источники по конкретной теме.

Оставляю ссылочку: GitHub 📱

📣 Code Ready | #репозиторий

✍️ Orbitron – геометрический шрифт без засечек с футуристическим дизайном. Он подходит для постеров, заголовков и обложек книг. Пример шрифта есть в дизайне "Virtual Reality Landing Page Concept"

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

Искусственный интеллект не заберёт работу у вас. Её заберет человек, который подружился с нейросетями раньше вас.

Хватит просто наблюдать за тем, как технологии меняют рынок! Пора заставить их работать на себя.

До 31 июля 2026 на Stepik проходит распродажа курсов по искусственному интеллекту. Все курсы со скидками вы можете найти в каталоге и тг-канале @stepik_courses.

В подборке курсы, которое помогают сразу применять практические навыки на практике:

✏️ писать код и автоматизировать задачи даже без опыта программирования;
✏️ избавляться от рутинной отчётности с помощью ИИ;
✏️ создавать изображения и видео без навыков дизайна;
✏️ искать информацию быстрее и глубже обычных поисковиков;
✏️ осваивать ИИ-инструменты для разработки, анализа данных и машинного обучения.

Скидки на курсы по ИИ действуют до 31 июля 2026.

Реклама. ООО «Цифровые образовательные решения», ОГРН 1157847164309 erid=CQH36pWzJqEWSXKAXLrMp3wmgBTEhy6UzmEag48JRtNJfT

💀 Это круче терминатора T-800: узрите прототип робота-ликвидатора Phantom MK-1

Вы только кнопку принудительного отключения не забудьте встроить 🚬

🎨 Цветовая палитра макета "Interior Design Website"

HEX | RGB
#CED4D2 | rgb(206,212,210)
#FFD476 | rgb(255,212,118)
#2C8879 | rgb(44,136,121)

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

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

💾 Design Wormhole – карточка с трехмерным вращением и эффектом стекла. Внизу – непрерывная анимация с исчезающим предметом.

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

🚘 За рулем главное быть вежливым

Хейтеры скажут, что ИИ...

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

👩‍💻 Валидируем форму прямо в браузере. Без 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