Ghostly Frontend

⚙️ БЭМ + Tailwind: прагматичный гибрид для современного фронтенда Показываю, как из двух спорных CSS-подходов собрать что-то вменяемое. Меньше боли с классами, меньше хаоса в стилях, больше скорости. Без фанатизма — только то, что реально работает. ➡️ Читать статью 🧡 Ghostly Frontend | #статьи

Страх. Гнев. Стыд. Вина. Тревога. Апатия. Уныние. Изоляция. Бессилие. Контакт. Тепло. Чувство. Живость. Ясность. Точность. Присутствие. Тишина. Покой. Если выбор сделан, твоё место здесь: мэверик Входи осторожно. Кислород зашкаливает.

👩‍💻 Устаревшие техники CCS, от которых уже можно отказаться Выходящие обновления часто упрощают и оптимизируют работу, однако, не все успевают следить за нововведениями. Именно для таких кодеров автор статьи собрал устаревшие техники и переписал их на современный лад. ➡️ Читать статью 🧡 Ghostly Frontend | #статьи

3D-слайдер из двух кубов Реализован с помощью jQuery ➡️ Ссылка на код 🧡 Ghostly Frontend | #codepen

Даже индусам уже найдена замена в виде котиков 🧡 Ghostly Frontend | #мем

👩‍💻 Фишка: Array.reduce() — универсальный метод для свёртки массива Этот метод последовательно обрабатывает каждый элемент массива, накапливая единый результат — число, строку, объект или даже новый массив. Мощный инструмент для трансформации данных. // Суммирование чисел const numbers = [10, 20, 30, 40]; const sum = numbers.reduce((acc, num) => acc + num, 0); console.log(sum); // → 100 // Преобразование массива в объект const users = [ { id: 1, name: "Alice" }, { id: 2, name: "Bob" }, { id: 3, name: "Charlie" } ]; const usersById = users.reduce((acc, user) => { acc[user.id] = user.name; return acc; }, {}); console.log(usersById); // → { 1: "Alice", 2: "Bob", 3: "Charlie" } // Группировка элементов по условию const fruits = ["apple", "banana", "apple", "orange", "banana", "apple"]; const fruitCount = fruits.reduce((acc, fruit) => { acc[fruit] = (acc[fruit] || 0) + 1; return acc; }, {}); console.log(fruitCount); // → { apple: 3, banana: 2, orange: 1 } // Функциональная обработка: фильтрация + трансформация за один проход const products = [ { name: "Laptop", price: 1000, inStock: true }, { name: "Mouse", price: 25, inStock: false }, { name: "Keyboard", price: 80, inStock: true } ]; const availableProductNames = products.reduce((acc, product) => { if (product.inStock) { acc.push({ name: product.name, price: product.price }); } return acc; }, []); console.log(availableProductNames); // → [{ name: "Laptop", price: 1000 }, { name: "Keyboard", price: 80 }] 📌 Преимущества: — Универсальность: заменяет map(), filter(), find() в сложных сценариях — Мощное агрегирование: превращает массив во что угодно (объект, Map, число, строку) — Один проход: фильтрация и трансформация за один обход массива — Функциональный стиль: чистая функция без побочных эффектов — Контроль аккумулятора: полная гибкость над накоплением результата 🧡 Ghostly Frontend | #фишки

👩‍💻 Smashing Magazine - один из самых авторитетных ресурсов по веб-дизайну и разработке Глубокие, практически полезные статьи о CSS (например, @scope), JavaScript API (Temporal), производительности и архитектуре. Продвинутый уровень, must-read для профессионалов. ⛓ Ссылка на ресурс 🧡 Ghostly Frontend | #ресурсы

Сборник из десятка кнопок Button Collection — сборник кнопок с самыми разнообразными эффектами, созданы на CSS. ➡️ Ссылка на код 🧡 Ghostly Frontend | #codepen

🥲 🧡 Ghostly Frontend | #мем

👩‍💻 Фишка: Оператор расширения spread — копирование и объединение данных Оператор расширения (spread) позволяет «развернуть» элементы массива или свойства объекта в другом месте, упрощая копирование, объединение и преобразование структур данных. // Копирование массива const originalArray = [1, 2, 3]; const copiedArray = [...originalArray]; console.log(copiedArray); // → [1, 2, 3] // Объединение массивов const arr1 = [1, 2]; const arr2 = [3, 4]; const mergedArray = [...arr1, ...arr2]; console.log(mergedArray); // → [1, 2, 3, 4] // Копирование объекта const user = { name: "Alice", age: 30 }; const userCopy = { ...user }; console.log(userCopy); // → { name: "Alice", age: 30 } // Объединение и переопределение свойств const userWithCity = { ...user, city: "Berlin" }; console.log(userWithCity); // → { name: "Alice", age: 30, city: "Berlin" } const updatedUser = { ...user, age: 31 }; console.log(updatedUser); // → { name: "Alice", age: 31 } // Функциональное преобразование (добавление элемента без мутации) const addNewSkill = (user, newSkill) => ({ ...user, skills: [...(user.skills || []), newSkill] }); const userWithSkills = addNewSkill({ name: "Alice" }, "JavaScript"); console.log(userWithSkills); // → { name: "Alice", skills: ["JavaScript"] } 📌 Преимущества: — Иммутабельность: создаёт новые массивы/объекты вместо изменения исходных — Краткость: заменяет методы concat(), Object.assign() и ручное копирование — Удобство в React/Vue: идеален для обновления состояния без мутаций — Читаемость: интуитивно понятный синтаксис 🧡 Ghostly Frontend | #фишки

⚙️ Работа с формами в JavaScript — управление вводом и валидацией данных на клиенте Формы — важная часть любого frontend-приложения. JavaScript позволяет получать доступ к значениям полей, проверять их, реагировать на события и отправлять данные без перезагрузки страницы. 📦 Полезно для создания интерактивных UI: регистраций, авторизации, поиска, обратной связи и др ⚙️ Пример кода <form id="contact-form"> <input type="text" name="name" placeholder="Ваше имя" required /> <input type="email" name="email" placeholder="Email" required /> <button type="submit">Отправить</button> </form> const form = document.getElementById("contact-form"); form.addEventListener("submit", (event) => { event.preventDefault(); // Предотвращаем перезагрузку const formData = new FormData(form); const name = formData.get("name"); const email = formData.get("email"); if (!name.trim() || !email.includes("@")) { alert("Пожалуйста, введите корректные данные."); return; } console.log("Имя:", name); console.log("Email:", email); // Здесь можно отправить данные на сервер через fetch/AJAX }); 💬 Как это работает: 1. addEventListener("submit") перехватывает отправку формы. 2. event.preventDefault() отключает стандартное поведение браузера. 3. FormData(form) позволяет легко получить значения полей. 4. Простая валидация может быть реализована вручную до отправки. 📝 Для сложной валидации лучше использовать HTML5-валидацию, регулярные выражения или специализированные библиотеки (например, Yup в связке с React Hook Form). 🗣️ Управление формами — базовый, но очень важный навык frontend-разработчика. Особенно критичен для UX, а также защиты от ошибок ввода и невалидных данных 🧡 Ghostly Frontend | #гайды

Animated BottomBar — несколько вариантов нижней панели Реализовано на CSS и JS ➡️ Ссылка на код 🧡 Ghostly Frontend | #codepen

Да и назвать git-ветку вполне себе романтично 🧡 Ghostly Frontend | #мем

👩‍💻 BFE.dev — годный ресурс для подготовки к собесам и прокачки навыков Ресурс собрал в себе более 6 сотен задач по JS, React, TypeScript, CSS и даже по системному дизайну. Решать задачи можно сразу в браузере, т.к платформа имеет встроенную проверку. ➡️ Ссылка на платформу 🧡 Ghostly Frontend | #ресурс

👩‍💻 Фишка: has() — родительский селектор в CSS без JS Раньше, чтобы стилизовать блок при наличии внутри чекбокса, картинки или ошибки, приходилось подключать JS. Теперь всё решается одной строкой CSS. <div class="card"> <p class="title">Заказ</p> <input type="checkbox" class="feature"> </div> <div class="card"> <p class="title">Другой заказ</p> </div> /* Подсвечиваем карточку, если внутри есть выбранный чекбокс */ .card:has(.feature:checked) { background-color: #e6f7e6; border-left: 4px solid #2ecc71; } 📌 Преимущества: - Работает с :checked, :focus, :empty, :target, другими псевдоклассами - Можно комбинировать: .section:has(h2, .warning, img) - Поддерживается во всех современных браузерах (Chrome, Edge, Safari, Firefox — с 2023 года) - Упрощает адаптивы: main:has(aside) { grid-template-columns: 1fr 250px; } 🧡 Ghostly Frontend | #фишки

Landing page with swiper Карусель с изображениями реализованная на CSS и JS ➡️ Ссылка на код 🧡 Ghostly Frontend | #codepen

🧡 Ghostly Frontend | #мем

⚙️ Вам больше не нужен JavaScript Покажем, как вытянуть интерактив из HTML/CSS: :has(), вложенность, @starting-style, dvh/dvw, транзишны. Где хватает без скриптов и когда всё-таки нужен JS. Мини-демки. ➡️ Читать статью 🧡 Ghostly Frontend | #статьи

⚙️ Работа с DOM в JavaScript — динамическое управление элементами на странице DOM (Document Object Model) — это структура HTML-документа, с которой можно взаимодействовать через JavaScript: изменять элементы, добавлять новые или удалять существующие. Это основа для построения динамичных интерфейсов. 📦 Полезно для создания интерактивных UI, модальных окон, динамических списков, табов и любых элементов, которые должны обновляться без перезагрузки страницы ⚙️ Пример кода <div id="container"></div> <button id="add-btn">Добавить элемент</button> const container = document.getElementById("container"); const button = document.getElementById("add-btn"); // Создание и добавление нового элемента button.addEventListener("click", () => { const newItem = document.createElement("p"); newItem.textContent = "Новый элемент"; container.appendChild(newItem); }); // Изменение содержимого container.innerHTML = "<strong>Обновлённый текст!</strong>"; // Удаление элемента setTimeout(() => { container.remove(); }, 5000); 💬 Как это работает: 1. document.getElementById() или querySelector() позволяют находить элементы на странице. 2. createElement() создаёт новый элемент. 3. appendChild() или append() добавляют элемент в DOM. 4. innerHTML меняет содержимое элемента. 5. remove() полностью удаляет элемент. 📝 Используйте classList.add/remove/toggle для управления классами и стилями. Минимизируйте количество прямых изменений DOM для повышения производительности. Для сложных проектов лучше использовать фреймворки (React, Vue, Angular), которые управляют DOM более эффективно. 🗣️ Работа с DOM — один из первых шагов в освоении frontend, без него невозможно строить интерактивные приложения 🧡 Ghostly Frontend | #гайды

👩‍💻 Сайт-сборник разнообразных css-анимаций Огромный сборник анимаций для самых разнообразных задач. Есть как анимации, так и отдельно эффекты анимаций и элементы веб-страниц. ⛓ Переход на сборник 🧡 Ghostly Frontend | #ресурсы