CodeBase | Frontend
1.97K subscribers
467 photos
208 videos
3 files
780 links
Все самое интересное и полезное у нас 😎

Контакт: @Filgood777 (реклама, сотрудничество)
Download Telegram
🟢 Stylus — плюсы и минусы 🟢

⚡️ Stylus запустили в 2010 году как универсальный CSS-препроцессор с гибкой синтаксической структурой.

Плюсы

🟢Гибкий синтаксис. Позволяет опускать двоеточия, точки с запятой и фигурные скобки. Код получается более лаконичным и читаемым.
🟢Использование отступов для организации кода. Отступы для блоков улучшают структуру и визуальное восприятие кода.
🟢Расширенный функционал. Переменные, миксины и вложенные селекторы.

Минусы

🟠Отличается от традиционного CSS. Его уникальный синтаксис может потребовать дополнительного времени на обучение, особенно для тех, кто привык к стандартному CSS.
🟠Нестандартный синтаксис может привести к путанице. Особенно в командной работе, где участники проекта используют разные стили написания кода.

CodeBase | Frontend | #Stylus
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21🔥1
🖥 Делаем интерфейс дружелюбнее. Коллекция простых HTML/CSS лайфхаков

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

🔗 Ссылка

CodeBase | Frontend | #article
Please open Telegram to view this post
VIEW IN TELEGRAM
1🔥1😁1
👩‍💻 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
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
👍42🔥1
Главное, чтобы ещё стул был на колёсиках

CodeBase | Frontend | #meme
😁52🔥1
👩‍💻 Метод 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
Please open Telegram to view this post
VIEW IN TELEGRAM
👍31🔥1
🔍Тестовое собеседование с ТимЛидом Frontend-разработки в этот четверг

23 июля(уже завтра!) в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика.

Как это будет:
📂 Алексей Романов, Teamlead в Underhood.dev с опытом 6+ лет, будет задавать реальные вопросы и задачи разработчику-добровольцу
📂 Алексей будет комментировать каждый ответ респондента, чтобы дать понять, чего от вас ожидает собеседующий на интервью
📂 В конце можно будет задать любой вопрос Алексею

Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы.

Переходи в нашего бота, чтобы получить ссылку на эфир →
@shortcut_front_bot

Реклама.
О рекламодателе.
Please open Telegram to view this post
VIEW IN TELEGRAM
1👍1
erid: 2W5zFGVzefj

Терминальная стадия
Новости, сжатые до состояния, из которого уже нечего выкинуть

https://tterminal_stadia
👍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
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
2👍2🔥1