💾 Boxy Preloaders – лоадеры, в основе которых лежат квадраты и прямоугольники. Каждый элемент при движении меняет свой цвет.

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

💾 Spooky Scrolling – слайдер с анимированными элементами. При прокрутке слой с кустами накладывается на слой с небом.

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

🖥 Beauty Product Web Design – изысканный дизайн лендинга для бренда натуральной косметики. Основа дизайна – глубокие приглушенные тона.

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

Взял заказ. Собрал бота. Агентство получило 15 000 рублей.

Пока ты ждёшь лучшую вакансию в своём городе — Владислав Пурвиньш закрывает заказы на чат-ботов силами учеников. (Заказов сейчас висит в поиске 10 786 запросов). Каждый получает от 15 000 рублей за заказ.

Которые даже не шарят в коде. Просто научились одному инструменту. И бизнесы платят им 200-250 000 рублей в месяц.

Схема простая: берёшь реальный заказ из базы → собираешь бота по шаблону → наставник проверяет → сдаёшь и забираешь деньги.

Старт 70-80 000 рублей. С опытом от 200 000 рублей в месяц.

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

👉 @other_digital_bot

Обучение проходит официально — Владислав Пурвиньш имеет образовательную лицензию.

🖥 Mobile & Web Portfolio UI Design – дизайн сайта-портфолио в оттенках персикового и темно-зеленого цветов. Особо выделяются заголовки, выделенные контрастным шрифтом с засечками.

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

Как сделать адаптивный текст без media queries?

Очень часто для адаптации текста под разные экраны используют отдельные breakpoint. В итоге CSS разрастается, а шрифты начинают масштабироваться неравномерно.

Обычно это выглядит так:
.title {
font-size: 3rem;
}

@media (max-width: 768px) {
.title {
font-size: 2rem;
}
}

Но CSS умеет нативно адаптировать размер текста под экран:
.title {
font-size: clamp(1.2rem, 4vw, 3rem);
}

clamp() задаёт минимальный размер, адаптивное значение и максимальный предел.

Теперь текст плавно масштабируется вместе с viewport.
.subtitle {
font-size: clamp(1rem, 2vw, 1.5rem);
}

Особенно хорошо это работает для hero-блоков, заголовков, кнопок и адаптивных интерфейсов.

Media queries часто вообще становятся не нужны.

🔥 clamp() позволяет создавать по-настоящему адаптивные интерфейсы без множества контрольных точек и дублирования CSS.

📣 Code Ready | #совет

💾 Night && Day Toggle – переключатель темной и светлой темы. Чтобы переключить тему, можно нажимать не на сам кружок, а на любое место внутри элемента.

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

😎 У армян есть свой Boston Dynamics

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

👩‍💻 Для удобной работы с .sass-синтаксисом в VS Code!

Sass (.sass only) — добавляет полноценную поддержку indented-синтаксиса Sass: подсветку, автодополнение, навигацию и корректное распознавание .sass-файлов без фигурных скобок и точек с запятой. Помогает комфортно работать со старыми и современными Sass-проектами прямо в редакторе.

📣 Code Ready | #vscode

💾 Star Rating in Pure CSS – шкала рейтинга в виде сердечек, которые загораются уже при наведении курсора. Выбор сердечка помечается изменением его размера.

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

🚀 ScreenCoder — Новый уровень магии для фронтендеров и дизайнеров.

Загружаете скриншот или макет, а нейросеть превращает его в чистый, готовый к продакшену HTML/CSS-код 🤯

Больше не нужно вручную верстать кнопки и блоки — ScreenCoder понимает визуал, сам планирует layout и пишет код, который можно сразу редактировать и использовать.

Что умеет:
🟢Превращает любой дизайн в HTML/CSS;
🟢Генерирует чистую и читаемую верстку;
🟢Позволяет менять стили и структуру под себя;
🟢Подходит и для быстрых прототипов, и для пиксель-перфект интерфейсов.

Просто — загрузил, скопировал, подправил, развернул.

Design → Code за пару секунд.

♎️ GitHub/Инструкция по установке

#python

⌨️ Подгон для вайб-кодеров! Бесплатный сайт, который научит работать с ИИ.

Ресурс, где собраны материалы по вайбкодингу — от основ мышления и правильной работы с нейросетями до практических гайдов по созданию Telegram-ботов, сайтов и собственных AI-проектов.

✅ Без сложной теории и платных курсов.
✅ Всё структурировано, понятно и доступно бесплатно.
✅ На русском.

🔥 Это бесплатно! Сохраняем и пробуем ТУТ

😁 Админ | 📲 Зеркало Max

#нейросеть #cheatsheet

ИИ-ассистенты уже умеют писать код, предлагать исправления и ускорять разработку.

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

На открытом уроке:
• разберём, почему красивые демонстрации не всегда работают в production-задачах и как перейти от случайного использования ИИ к системному подходу
• поговорим о типичных ошибках при работе с ИИ-ассистентами, разберём практики, которые помогают получать предсказуемый результат
• покажем, как использовать шаблоны и подходы, применимые в реальной разработке
• разберём живую демонстрацию на open-source проекте

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

🗓 Открытый урок пройдёт 16 июня в 20:00 МСК в преддверии старта курса «ИИ для разработчиков».

Подробности и регистрация: https://otus.pw/80CU/

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

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

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

⭐ Ладно — это смешно

💾 Interactive Wheel Menu – меню, которое появляется при нажатии на экран. Оно исчезает, если экран перестать удерживать.

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

День сурка frontend-разработчика

Зарплата стоит, скучные задачи день за днем, календарь забит созвонами, которые не влияют вообще ни на что.

Откликаешься на вакансии, а в ответ тишина либо какие-то мутные конторы. На собесах вместо нормальной оценки навыков цирк с алгоритмами на скорость, как будто ты на олимпиаде, а не работу ищешь.

И самое неприятное, пока ты варишься в этом болоте, кто-то спокойно проходит собесы и уходит в Яндекс, VK или на хорошую Валютную удаленку без лишней драмы.

Есть классные проекты и сильные команды, где разработчиков действительно ценят, дают расти, поддерживают развитие и платят достойно и ты можешь туда попасть!

👋 Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Я за руку довожу до оффера на хорошую позицию в Big Tech и сопровождаю на испытательном сроке.

Также из учеников я собираю комьюнити, где уже более 220 frontend-разработчиков🫂

А в своем канале:
👉Объясняю,...

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

preventDefault(): контроль стандартного поведения браузера!

При работе с DOM-событиями часто нужно отменить действие браузера: переход по ссылке, отправку формы, скролл и т.д. Для этого используется event.preventDefault().

Метод отменяет стандартное поведение браузера, но не останавливает всплытие события. Для этого используется stopPropagation().

Базовый пример:
document.querySelector('a').addEventListener('click', (e) => {
e.preventDefault();

console.log('link click handled manually');
});

После вызова preventDefault() переход по ссылке не произойдёт, и обработка полностью перейдёт под контроль JavaScript.

Это особенно полезно в SPA-приложениях, где навигация управляется роутером без перезагрузки страницы.

Пример — работа с формой:
const form = document.querySelector('form');

form.addEventListener('submit', (e) => {
e.preventDefault();

const data = new FormData(form);
send(data);
});

По умолчанию форма отправляет данные и перезагружает страницу. preventDefault() позволяет перехватить submit и самостоятельно управлять отправкой данных. Так обычно реализуются AJAX-формы, async-запросы и кастомная валидация.

Важно: preventDefault() работает только для событий, которые поддерживают отмену. Проверить это можно через свойство cancelable.

Пример — проверка cancelable:
if (e.cancelable) {
e.preventDefault();
}

Если событие не является cancelable, вызов preventDefault() не даст эффекта. Отдельный нюанс связан с passive listeners.

Пример — passive listeners:
window.addEventListener('touchmove', (e) => {
e.preventDefault(); // будет проигнорирован
}, { passive: true });

При passive: true браузер заранее считает, что обработчик не будет отменять действие события. Это используется для оптимизации scroll/touch-событий.

В таком режиме preventDefault() игнорируется. Иногда отмена зависит от состояния интерфейса или бизнес-логики.

Пример — условная отмена:
button.addEventListener('click', (e) => {
if (!button.matches('.enabled')) {
e.preventDefault();
}
});

Здесь действие отменяется только при определённом условии.

Также важно понимать разницу между preventDefault() и старым подходом через return false. Пример:
el.addEventListener('click', (e) => {
e.preventDefault();
});

В addEventListener конструкция return false не отменяет действие браузера и не останавливает propagation. Такое поведение было характерно для inline-обработчиков и jQuery, поэтому многие разработчики до сих пор путают эти механики.

Ещё момент: у кастомных событий (CustomEvent) обычно нет встроенного browser behavior. Это значит, что preventDefault() не отменяет никаких действий браузера. Но если событие создано с cancelable: true, вызов установит event.defaultPrevented = true.

🔥 preventDefault() — базовый инструмент управления пользовательскими взаимодействиями в js.

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

🤔 Code JavaScript — большой учебник и практикум по JS!

На сайте собрана полноценная база материалов по JavaScript: от базового синтаксиса и работы с DOM до более сложных тем вроде замыканий, событий, async/await и ООП. Материал построен в формате уроков и практических заданий, поэтому подходит не только для чтения, но и для закрепления знаний на практике.

📌 Оставляю ссылочку: code.mu

📣 Code Ready | #сайт

🖥 3D Blobs – набор абстрактных глянцевых 3D-фигур обтекаемой формы. В шаблоне также есть примеры их использования в UI.

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

💪 Кто сейчас вообще получает офферы в IT в 2026?

Я создатель YeaHub — базы IT собеседований.
И я регулярно вижу, как реально выглядит рынок изнутри.

Вакансий стало меньше, а ATS и фильтры просто не пропускают до живого рекрутера.

Собеседования стали жёстче — задают абсурдные вопросы, о которых ты никогда не слышал.

Из-за высокой конкуренции выросли ожидания: задач стало больше и они стали сложнее.

Но при этом каждый день кто-то всё равно получает офферы в крупные компании — даже в текущем рынке. Вопрос в другом: как получить оффер именно тебе?

✊🏻 Меня зовут Руслан.
Я IT-Founder & Tech Lead, строю продукты и руковожу командами из 100+ человек. Занимаюсь подготовкой Frontend-разработчиков к собеседованиям и трудоустройству в Big Tech.

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

💼 На канале:
• база реальных IT собеседований (РФ и зарубежные компании)
• задачи, которые дают в BigTech и продуктовых компаниях
• полный гайд по подготовке к...

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