CodeBase | Frontend

🎯 CSS tip: как избавиться от :last-child и упростить отступы Когда нужно задать отступ между элементами, но не последнему, часто пишут: .item:not(:last-child) { margin-bottom: 16px; } Но есть современный способ без селекторов и костылей 👇 ✅ Используй gap с flex или grid: .container { display: flex; flex-direction: column; gap: 16px; } 📌 Преимущества: – Нет нужды в :last-child – Чище HTML и CSS – Работает одинаково в любом направлении (row, column) – Поддерживается во всех современных браузерах Итог: если ты всё ещё пишешь :not(:last-child) — пришло время обновить подход. CodeBase | Frontend | #CSS

🔥 Трюк с :has() в CSS — как маленький хак улучшает UX Селектор :has() поддерживается во всех современных браузерах. Его часто называют «селектором родителя», но он куда мощнее. Вот пример, как улучшить UX форм без JS 👇 form:has(input:invalid) button[type="submit"] { opacity: 0.5; pointer-events: none; } 📌 Что делает: Если в форме есть невалидный input, сабмит-кнопка становится неактивной. 💡 Применения :has(): - Показывать/прятать элементы в зависимости от вложенности; - Делать UI реактивным без JS; - Улучшать доступность форм и состояний. ✅ Минимализм, UX и современный CSS — в одном трюке. Попробуй! CodeBase | Frontend | #CSS

erid: 2W5zFGVzefj Терминальная стадия Новости, сжатые до состояния, из которого уже нечего выкинуть https://tterminal_stadia

CodeBase | Frontend | #meme

🔍Тестовое собеседование с ТимЛидом Frontend-разработки в этот четверг 23 июля(уже завтра!) в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика. Как это будет: 📂 Алексей Романов, Teamlead в Underhood.dev с опытом 6+ лет, будет задавать реальные вопросы и задачи разработчику-добровольцу 📂 Алексей будет комментировать каждый ответ респондента, чтобы дать понять, чего от вас ожидает собеседующий на интервью 📂 В конце можно будет задать любой вопрос Алексею Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы. Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot Реклама. О рекламодателе.

CodeBase | Frontend | #meme

👩‍💻 Метод Array.from() в JavaScript и как он используется Метод Array.from() создаёт настоящий массив из массивоподобных или итерируемых объектов (например, NodeList, arguments, Set, Map). ➡️ Пример: const buttons = document.querySelectorAll("button"); const btnArray = Array.from(buttons); btnArray.forEach(btn => btn.classList.add("active")); 🗣️ В этом примере: • querySelectorAll возвращает NodeList, а не массив • Array.from() превращает его в массив • после этого доступны map, filter, forEach и другие методы Array.from() — это мост между «псевдомассивами» и полноценными массивами, без костылей и циклов CodeBase | Frontend | #JS

CodeBase | Frontend | #meme

Главное, чтобы ещё стул был на колёсиках CodeBase | Frontend | #meme

⚙️ Что такое свойство opacity в CSS и зачем оно используется? opacity — это CSS-свойство, которое задаёт степень прозрачности элемента. Значение opacity может быть от 0 (полностью прозрачный) до 1 (полностью непрозрачный). Это полезно для создания визуальных эффектов, таких как затемнение или появление элементов. ➡️ Пример: <div class="opaque-box">Прозрачный текст</div> <style> .opaque-box { background-color: lightblue; opacity: 0.5; /* Устанавливаем 50% прозрачности */ padding: 20px; text-align: center; } </style> 🗣 В этом примере свойство opacity делает элемент .opaque-box полупрозрачным, что особенно полезно для наложений и визуального выделения интерфейсов. CodeBase | Frontend | #CSS

👩‍💻 Тернарный оператор Тернарный оператор работает с тремя операндами: одним условием и двумя выражениями. Возвращает первое выражение, если условие истинно и второе, если условие ложно. Используется как компактная замена условного оператора if...else. const num = 5 console.log(num === 5 ? 'Пять' : 'Не пять') // Пять ➡️ Обьяснение: (A) ? (B) : (C) Где A — условие, B — первое выражение, C — второе выражение. Если первый операнд A вычисляется в истинное выражение true, то оператор вернёт выражение B. Если в false — вернёт выражение C. 💡 Внутри одного тернарного оператора можно написать другой: const num = 10 const result = num > 10 ? 'Число больше 10' : num === 10 ? 'Число равно 10' : 'Число меньше 10' console.log(result) // 'Число равно 10' В этом случае запись идентична использованию конструкций if...else if ... else. Сначала проверяется первое условие, если оно ложно, то проверяется второе и так далее. 🗣️ Отступы в примере проставлены для лучшей читаемости конструкции, они не влияют на выполнение кода. CodeBase | Frontend | #js

👩‍💻 Proxy в JavaScript Proxy — это мощный инструмент, который позволяет перехватывать операции над объектами. С его помощью можно контролировать доступ к свойствам, их изменение или даже добавлять кастомное поведение для объектов. 🔍 Как это работает? Proxy создаёт «обёртку» вокруг объекта, которая перехватывает любые обращения к нему через специальные «ловушки» (traps). Это позволяет реализовывать различные сценарии: от валидации данных до логирования. ➡️ Пример: let target = {}; let proxy = new Proxy(target, { set(obj, prop, value) { if (typeof value === 'number') { obj[prop] = value; } else { console.log(`Значение ${prop} должно быть числом!`); } } }); proxy.age = 30; // работает proxy.age = "не число"; // ошибка Здесь мы создали прокси для объекта target, который разрешает устанавливать только числовые значения. В случае ошибки выводится сообщение. ⚙️ Примеры использования Proxy: • Валидация данных в объектах. • Логирование действий. • Защита от случайного изменения данных. CodeBase | Frontend | #js

🖥 Делаем интерфейс дружелюбнее. Коллекция простых HTML/CSS лайфхаков Сегодня я решил показать вам несколько проверенных трюков. Выбрал самые лёгкие в освоении, чтобы вы смогли внедрить их уже сегодня, не отвлекаясь на сложности. 🔗 Ссылка CodeBase | Frontend | #article

🟢 Stylus — плюсы и минусы 🟢 ⚡️ Stylus запустили в 2010 году как универсальный CSS-препроцессор с гибкой синтаксической структурой. ➕Плюсы 🟢Гибкий синтаксис. Позволяет опускать двоеточия, точки с запятой и фигурные скобки. Код получается более лаконичным и читаемым. 🟢Использование отступов для организации кода. Отступы для блоков улучшают структуру и визуальное восприятие кода. 🟢Расширенный функционал. Переменные, миксины и вложенные селекторы. ➖Минусы 🟠Отличается от традиционного CSS. Его уникальный синтаксис может потребовать дополнительного времени на обучение, особенно для тех, кто привык к стандартному CSS. 🟠Нестандартный синтаксис может привести к путанице. Особенно в командной работе, где участники проекта используют разные стили написания кода. CodeBase | Frontend | #Stylus

Канал наших друзей с мемами для программистов и айтишников 👇 https://max.ru/iwannabeprogrammer

CodeBase | Frontend | #meme

⚙️ Что такое свойство 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

CodeBase | Frontend | #meme

✅ Вопрос на собеседовании ✅ ❓ Какие различия существуют между map и set в JavaScript? Ответ: ➡️ Map и Set - это две разные структуры данных в JavaScript, предназначенные для хранения уникальных значений. 🔵 Map представляет собой коллекцию пар ключ-значение. Ключи могут быть любого типа данных, включая объекты или примитивы. Он используется для хранения пар ключ-значение, где каждый элемент имеет свой уникальный ключ. 🔵 Set представляет собой коллекцию уникальных значений, известную как «множество». Он используется для хранения уникальных значений и не разрешает наличие двух и более одинаковых элементов. CodeBase | Frontend

👩‍💻 Метод 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