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
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4❤1🔥1
Ответ:
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
❤5
Свойство
aspect-ratio задаёт соотношение сторон элемента, удерживая пропорции при изменении размеров.Больше не нужно рассчитывать высоту через отступы или JavaScript — теперь это делается нативно
<div class="card"></div>
<style>
.card {
width: 300px;
aspect-ratio: 16 / 9;
background: #007bff;
border-radius: 8px;
}
</style>
Частые применения:
• видео, изображения и превью с фиксированным соотношением сторон
• карточки, аватары и responsive UI
• создание адаптивных сеток без "резиновых" искажений
CodeBase | Frontend | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2👍2🔥1
❤2🔥1
CodeBase | Frontend | #Stylus
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2❤1🔥1
Сегодня я решил показать вам несколько проверенных трюков. Выбрал самые лёгкие в освоении, чтобы вы смогли внедрить их уже сегодня, не отвлекаясь на сложности.
CodeBase | Frontend | #article
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1🔥1😁1
Proxy — это мощный инструмент, который позволяет перехватывать операции над объектами. С его помощью можно контролировать доступ к свойствам, их изменение или даже добавлять кастомное поведение для объектов.
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, который разрешает устанавливать только числовые значения. В случае ошибки выводится сообщение.
• Валидация данных в объектах.• Логирование действий.• Защита от случайного изменения данных.CodeBase | Frontend | #js
Please open Telegram to view this post
VIEW IN TELEGRAM
❤4
Тернарный оператор работает с тремя операндами: одним условием и двумя выражениями. Возвращает первое выражение, если условие истинно и второе, если условие ложно.
Используется как компактная замена условного оператора
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
Please open Telegram to view this post
VIEW IN TELEGRAM
❤3👍2🔥1
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
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4❤2🔥1
Метод
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
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3❤1🔥1
23 июля(уже завтра!) в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика.
Как это будет:
Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы.
Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot
Реклама.
О рекламодателе.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1👍1
🔥 Трюк с :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
Селектор :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
❤2
🎯 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
Когда нужно задать отступ между элементами, но не последнему, часто пишут:
.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
❤2👍2🔥1