Latest posts
Ghostly Frontend
10 Sept, 13:36
⚙️ Работа с событиями в JavaScript — взаимодействие с пользователем через Event ListenersСобытия позволяют отслеживать действия пользователя (клики, ввод текста, прокрутка и т.д.) и реагировать на них в реальном времени. Это основа интерактивного фронтенда.📦 Полезно для обработки кликов по кнопкам, динамических изменений интерфейса, работы с формами, анимаций и интерактивных компонентов⚙️ Пример кодаJavaScript <button id="btn">Нажми меня</button> <input id="input" placeholder="Введите текст" />const button = document.getElementById("btn"); const input = document.getElementById("input");// Обработка клика button.addEventListener("click", () => { alert("Кнопка нажата!"); });// Обработка ввода текста input.addEventListener("input", (event) => {
Ghostly Frontend
13 Aug, 11:18
⚙️ БЭМ + Tailwind: прагматичный гибрид для современного фронтендаПоказываю, как из двух спорных CSS-подходов собрать что-то вменяемое. Меньше боли с классами, меньше хаоса в стилях, больше скорости. Без фанатизма — только то, что реально работает.➡️ Читать статью🧡 Ghostly Frontend | #статьи
Ghostly Frontend
3 Aug, 09:36
Страх. Гнев. Стыд. Вина. Тревога. Апатия. Уныние. Изоляция. Бессилие.Контакт. Тепло. Чувство. Живость. Ясность. Точность. Присутствие. Тишина.Покой.
Ghostly Frontend
27 Jun, 15:01
👩💻 Устаревшие техники CCS, от которых уже можно отказатьсяВыходящие обновления часто упрощают и оптимизируют работу, однако, не все успевают следить за нововведениями.Именно для таких кодеров автор статьи собрал устаревшие техники и переписал их на современный лад.➡️ Читать статью🧡 Ghostly Frontend | #статьи
Ghostly Frontend
19 Jun, 15:00
3D-слайдер из двух кубовРеализован с помощью jQuery➡️ Ссылка на код🧡 Ghostly Frontend | #codepenGhostly Frontend
12 Jun, 15:00
Даже индусам уже найдена замена в виде котиков🧡 Ghostly Frontend | #мемGhostly Frontend
5 Jun, 15:00
👩💻 Фишка: 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; }, {});Ghostly Frontend
30 May, 15:00
👩💻 Smashing Magazine - один из самых авторитетных ресурсов по веб-дизайну и разработкеГлубокие, практически полезные статьи о CSS (например, @scope), JavaScript API (Temporal), производительности и архитектуре. Продвинутый уровень, must-read для профессионалов.⛓ Ссылка на ресурс🧡 Ghostly Frontend | #ресурсы
Ghostly Frontend
23 May, 15:00
Сборник из десятка кнопокButton Collection — сборник кнопок с самыми разнообразными эффектами, созданы на CSS.➡️ Ссылка на код🧡 Ghostly Frontend | #codepenGhostly Frontend
18 May, 11:05
🥲🧡 Ghostly Frontend | #мемGhostly Frontend
18 May, 09:00
👩💻 Фишка: Оператор расширения 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 }Ghostly Frontend
14 May, 11:01
⚙️ Работа с формами в 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);
Ghostly Frontend
9 May, 15:00
Animated BottomBar — несколько вариантов нижней панелиРеализовано на CSS и JS➡️ Ссылка на код🧡 Ghostly Frontend | #codepenGhostly Frontend
3 May, 15:00
Да и назвать git-ветку вполне себе романтично🧡 Ghostly Frontend | #мем
Ghostly Frontend
26 Apr, 14:32
👩💻 BFE.dev — годный ресурс для подготовки к собесам и прокачки навыковРесурс собрал в себе более 6 сотен задач по JS, React, TypeScript, CSS и даже по системному дизайну. Решать задачи можно сразу в браузере, т.к платформа имеет встроенную проверку.➡️ Ссылка на платформу🧡 Ghostly Frontend | #ресурс
Ghostly Frontend
24 Apr, 15:00
👩💻 Фишка: 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; }📌 Преимущества:Ghostly Frontend
21 Apr, 14:01
Landing page with swiperКарусель с изображениями реализованная на CSS и JS➡️ Ссылка на код🧡 Ghostly Frontend | #codepenGhostly Frontend
20 Apr, 13:12
🧡 Ghostly Frontend | #мем
Ghostly Frontend
17 Apr, 16:40edited
⚙️ Вам больше не нужен JavaScriptПокажем, как вытянуть интерактив из HTML/CSS: :has(), вложенность, @starting-style, dvh/dvw, транзишны. Где хватает без скриптов и когда всё-таки нужен JS. Мини-демки.➡️ Читать статью🧡 Ghostly Frontend | #статьи
Ghostly Frontend
16 Apr, 11:01
⚙️ Работа с 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 = "Новый элемент"; contain
Related Channels
Other channels in the same section of the catalogue.
