Видео
нажмите — покажем
нажмите — покажем
Найдена идеальная анимация для загрузочного экрана 🤔
CodeBase | Frontend | #meme
482 · Фотография
нажмите — покажем
нажмите — покажем
🖥 Этот CSS пора оставить в прошлом
Показываю, как переписать привычные решения — центрирование, сетки, эффекты и адаптивность — на свежие фичи вроде :has(), контейнерных запросов и subgrid. Коротко, практично и без JS.
🔗 Ссылка
CodeBase | Frontend | #article
531 · ⚙️Тег <noscript> используется для отображения контента, если JavaScript отключен в браузере. Он позволяет предоставить альтернативное содержимое или сообщение для пользователей, которые не могут или не хотят использовать JavaScript.
Пример:
<noscript>
<p>Please enable JavaScript to use this website.</p>
</noscript>
- Контент внутри <noscript> отображается только при отключенном JavaScript.
- Часто используется для информирования пользователей или предоставления базовой функциональности без JavaScript.
CodeBase | Frontend | #Основы
433 · Фотография
нажмите — покажем
нажмите — покажем
⚙️ Что такое атрибут role в HTML и зачем он используется?
Атрибут role используется для улучшения доступности веб-страниц. Он сообщает вспомогательным технологиям (например, экранным читалкам), какую функцию выполняет элемент.
➡️ Пример:
<!-- Обозначение навигационного меню -->
<nav role="navigation">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
</ul>
</nav>
<!-- Определение элемента как диалогового окна -->
<div role="dialog" aria-labelledby="dialog-title">
<h2 id="dialog-title">Подтвердите действие</h2>
<button>ОК</button>
</div>
🗣️ Почему полезно:
• role="navigation" помогает читалкам распознавать меню.
• role="dialog" делает <div> доступным как модальное окно.
CodeBase | Frontend | #Основы
404 · Фотография
нажмите — покажем
нажмите — покажем
Без вот этого вот
В случае, если долго грузится пост или видео, рассмотрите, пожалуйста, возможность перейти в МАХ
4.7K · Фотография
нажмите — покажем
нажмите — покажем
⚡️ Псевдокласс ::first-letter ⚡️
🔥 Этот псевдокласс позволяет стилизовать первую букву текстового элемента. Он часто используется для создания инициалов или других типографических эффектов.
➡️ Принятые свойства:
🔵 color — цвет первой буквы
🔵 background-color — цвет фона
🔵 font-family — шрифт первой буквы
🔵 font-size — размер шрифта
🔵 font-weight – насыщенность шрифта
🔵 line-height — высота строки
🔵 text-decoration — текстовое оформление (подчеркивание, зачеркивание)
🔵 text-transform — преобразование текста (в верхний регистр, в нижний регистр)
🔵 margin - внешние отступы
🔵 padding - внутренние отступы
🔵 border — граница первой буквы
🔵 float — выравнивание (например, слева, справа).
🔵 text-shadow — тень текста
CodeBase | Frontend
388 · id 1798973851⚡️ Псевдокласс ::first-letter ⚡️
🔥 Этот псевдокласс позволяет стилизовать первую букву текстового элемента. Он часто используется для создания инициалов или других типографических эффектов.
➡️ Принятые свойства:
🔵 color — цвет первой буквы
🔵 background-color — цвет фона
🔵 font-family — шрифт перв
Чтобы в спан не оборачивать? 🧐
Фотография
нажмите — покажем
нажмите — покажем
В случае, если долго грузится пост или видео, рассмотрите, пожалуйста, возможность перейти в МАХ
4.4K · ⚙️ Что такое свойство gap в CSS и зачем оно используется?
Свойство gap управляет расстоянием между элементами во flex- и grid-контейнерах.
Это современная замена margin для управления отступами между, а не вокруг элементов
➡️ Пример:
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<style>
.container {
display: flex;
gap: 16px;
}
.item {
padding: 10px;
background: #007bff;
color: white;
}
</style>
🗣 gap — чистый и предсказуемый способ управлять расстояниями в современных интерфейсах.
CodeBase | Frontend | #CSS
340 · 👩💻 Метод every() в JavaScript и как он используется
Метод every() проверяет, удовлетворяют ли все элементы массива заданному условию.
Возвращает true, если условие выполняется для каждого элемента, иначе false.
➡️ Пример:
const numbers = [2, 4, 6, 8];
const allEven = numbers.every(num => num % 2 === 0);
console.log(allEven); // true
🗣️ В этом примере:
• every() проверяет все числа на чётность
• Возвращает true, так как все элементы подходят
• Полезен для валидации данных (например, все ли поля заполнены)
every() часто используют для проверки массивов перед отправкой данных на сервер
CodeBase | Frontend | #JS
301 · Фотография
нажмите — покажем
нажмите — покажем
Beyond Vibe Coding: From Coder to AI-Era Developer (Final Release) 2025
Автор: Addy Osmani
AI is transforming software development, shifting programmers from writing code to collaborating with AI in an intent-driven workflow—this is vibe coding. Beyond Vibe Coding explores how AI-powered coding assistants like GitHub Copilot and OpenAI Codex are reshaping the way we build software, from automating routine coding tasks to influencing architecture and design decisions.
Written by Addy Osmani, this guide provides developers, tech leads, and organizations with practical strategies to integrate AI into their workflows effectively. Learn how to refine AI-generated code, master prompt engineering, and explore advanced techniques like model fine-tuning and multiagent coding systems. Whether you're adopting AI tools today or preparing for the future of software engineering, this book offers insights and hands-on examples to keep your skills sharp in this evolving landscape.
Скачать: https://max.ru/iwannabeprogrammer/AZ5i4n4fB34
🤩 Я хочу стать вайб-программистом
Фотография
нажмите — покажем
нажмите — покажем
✅ Вопрос на собеседовании ✅
❓ Какие различия существуют между map и set в JavaScript?
Ответ:
➡️ Map и Set - это две разные структуры данных в JavaScript, предназначенные для хранения уникальных значений.
🔵 Map представляет собой коллекцию пар ключ-значение. Ключи могут быть любого типа данных, включая объекты или примитивы. Он используется для хранения пар ключ-значение, где каждый элемент имеет свой уникальный ключ.
🔵 Set представляет собой коллекцию уникальных значений, известную как «множество». Он используется для хранения уникальных значений и не разрешает наличие двух и более одинаковых элементов.
CodeBase | Frontend
340 · Фотография
нажмите — покажем
нажмите — покажем
В случае, если долго грузится пост или видео, рассмотрите, пожалуйста, возможность перейти в МАХ
4.2K · Фотография
нажмите — покажем
нажмите — покажем
В случае, если долго грузится пост или видео, рассмотрите, пожалуйста, возможность перейти в МАХ
4.2K · ⚙️ Что такое свойство aspect-ratio в CSS и зачем оно используется?
Свойство aspect-ratio задаёт соотношение сторон элемента, удерживая пропорции при изменении размеров.
Больше не нужно рассчитывать высоту через отступы или JavaScript — теперь это делается нативно
➡️ Пример:
<div class="card"></div>
<style>
.card {
width: 300px;
aspect-ratio: 16 / 9;
background: #007bff;
border-radius: 8px;
}
</style>
🗣 В этом примере элемент всегда сохраняет пропорции 16:9, независимо от ширины контейнера.
Частые применения:
• видео, изображения и превью с фиксированным соотношением сторон
• карточки, аватары и responsive UI
• создание адаптивных сеток без "резиновых" искажений
CodeBase | Frontend | #CSS
219 · Фотография
нажмите — покажем
нажмите — покажем
День сурка frontend-разработчика
Зарплата стоит, скучные задачи день за днем, календарь забит созвонами, которые не влияют вообще ни на что.
Откликаешься на вакансии, а в ответ тишина либо какие-то мутные конторы. На собесах вместо нормальной оценки навыков цирк с алгоритмами на скорость, как будто ты на олимпиаде, а не работу ищешь.
И самое неприятное, пока ты варишься в этом болоте, кто-то спокойно проходит собесы и уходит в Яндекс, VK или на хорошую Валютную удаленку без лишней драмы.
Есть классные проекты и сильные команды, где разработчиков действительно ценят, дают расти, поддерживают развитие и платят достойно и ты можешь туда попасть!
👋 Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Я за руку довожу до оффера на хорошую позицию в Big Tech и сопровождаю на испытательном сроке.
Также из учеников я собираю комьюнити, где уже более 220 frontend-разработчиков🫂
А в своем канале:
👉Объясняю, как проходить HR-фильтр и превращать отклики в реальные приглашения
👉Помогаю найти мотивацию, борюсь убеждениями, которые мешают развиваться
👉На примерах объясняю, как проходить собеседования, включая техничку
👉Разбираю резюме и делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров
А еще регулярно публикую полезные материалы:
▪️Задачи, на которых валяться кандидаты
▪️База по микрофронтам
▪️Подборка из 100+ каналов с вакансиями для разработчиков
▪️100 вопросов, которые точно помогут тебе на собеседовании
▪️Чек лист проверки своего резюме
А еще у меня множество успешных кейсов и отзывов, найти их можно в канале.
Реклама, erid: 2W5zFJN5zLZ ИП Галактионов Тихон Витальевич, ИНН 771618975809
id 1798973851⚙️ Что такое свойство aspect-ratio в CSS и зачем оно используется?
Свойство aspect-ratio задаёт соотношение сторон элемента, удерживая пропорции при изменении размеров.
Больше не нужно рассчитывать высоту через отступы или JavaScript — теперь это делается нативно
➡️ Пример:
<div class="card"></d
aspect-ratio реально спас, раньше городила padding-top хак на превьюшки и каждый раз лезла гуглить проценты. А ты как с safari себя ведёт, у меня на старых версиях иногда пропорция слетала.
Канал наших друзей с мемами для программистов и айтишников
👇
https://max.ru/iwannabeprogrammer
224 · Фотография
нажмите — покажем
нажмите — покажем
🟢 Stylus — плюсы и минусы 🟢
⚡️ Stylus запустили в 2010 году как универсальный CSS-препроцессор с гибкой синтаксической структурой.
➕Плюсы
🟢Гибкий синтаксис. Позволяет опускать двоеточия, точки с запятой и фигурные скобки. Код получается более лаконичным и читаемым.
🟢Использование отступов для организации кода. Отступы для блоков улучшают структуру и визуальное восприятие кода.
🟢Расширенный функционал. Переменные, миксины и вложенные селекторы.
➖Минусы
🟠Отличается от традиционного CSS. Его уникальный синтаксис может потребовать дополнительного времени на обучение, особенно для тех, кто привык к стандартному CSS.
🟠Нестандартный синтаксис может привести к путанице. Особенно в командной работе, где участники проекта используют разные стили написания кода.
CodeBase | Frontend | #Stylus
247 ·