ar
Feedback
Ghostly Frontend

Ghostly Frontend

الذهاب إلى القناة على Telegram

Погружаемся в мир Frontend: задачи, фишки, библиотеки и террабайты полезного материала. Сотрудничество: @heywan_n1 Цены: @heywan_media

إظهار المزيد
2 518
المشتركون
-124 ساعات
-97 أيام
-3130 أيام

جاري تحميل البيانات...

جذب المشتركين
يونيو '26
يونيو '26
+1
في 0 قنوات
مايو '26
+14
في 0 قنوات
Get PRO
أبريل '26
+17
في 0 قنوات
Get PRO
مارس '26
+9
في 0 قنوات
Get PRO
فبراير '26
+9
في 0 قنوات
Get PRO
يناير '26
+8
في 0 قنوات
Get PRO
ديسمبر '25
+24
في 7 قنوات
Get PRO
نوفمبر '25
+10
في 1 قنوات
Get PRO
أكتوبر '25
+476
في 59 قنوات
Get PRO
سبتمبر '25
+480
في 32 قنوات
Get PRO
أغسطس '25
+15
في 7 قنوات
Get PRO
يوليو '25
+37
في 11 قنوات
Get PRO
يونيو '25
+79
في 23 قنوات
Get PRO
مايو '25
+539
في 21 قنوات
Get PRO
أبريل '25
+236
في 2 قنوات
Get PRO
مارس '25
+170
في 4 قنوات
Get PRO
فبراير '25
+176
في 6 قنوات
Get PRO
يناير '25
+226
في 6 قنوات
Get PRO
ديسمبر '24
+155
في 6 قنوات
Get PRO
نوفمبر '24
+222
في 5 قنوات
Get PRO
أكتوبر '24
+353
في 6 قنوات
Get PRO
سبتمبر '24
+179
في 1 قنوات
Get PRO
أغسطس '24
+145
في 4 قنوات
Get PRO
يوليو '24
+835
في 3 قنوات
التاريخ
نمو المشتركين
الإشارات
القنوات
19 يونيو0
18 يونيو0
17 يونيو0
16 يونيو0
15 يونيو0
14 يونيو0
13 يونيو+1
12 يونيو0
11 يونيو0
10 يونيو0
09 يونيو0
08 يونيو0
07 يونيو0
06 يونيو0
05 يونيو0
04 يونيو0
03 يونيو0
02 يونيو0
01 يونيو0
منشورات القناة
3D-слайдер из двух кубов Реализован с помощью jQuery ➡️ Ссылка на код 🧡 Ghostly Frontend | #codepen

2
Совет на 2027 год — перекатывайтесь в системную аналитику. Системные аналитики остаются одними из самых дефицитных специалистов в IT. Они проектируют интеграции, работают с API и требованиями, а зарплаты мидлов начинаются от 200 000 ₽. А чтобы освоить профессию всего за 3 месяца и получить первый оффер — изучите канал Насти Глазовой. Её бэкграунд: 5 лет в IT, путь от джуна до лида аналитики, опыт работы в Wildberries, Самокате и Ralf Ringer, а также более 150 выпускников со средней зарплатой от 177 000 ₽. На канале вы найдёте: — Всё, что нужно системному аналитику: UML, BPMN, SQL, REST API, интеграции и работа с требованиями. — Советы по резюме, которые помогают выделяться среди сотен кандидатов. — Практические материалы по трудоустройству: от подготовки к интервью до выхода на первый оффер. Помимо обучения, Настя помогает подготовить сильное резюме, пройти пробные собеседования с HR и получить рекомендации в компании-партнёры. Переходи в закрепленное сообщение в канале: @nastyacareera
150
3
Даже индусам уже найдена замена в виде котиков 🧡 Ghostly Frontend | #мем
Даже индусам уже найдена замена в виде котиков 🧡 Ghostly Frontend | #мем
224
4
👩‍💻 Фишка: 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 | #фишки
348
5
👩‍💻 Smashing Magazine - один из самых авторитетных ресурсов по веб-дизайну и разработке Глубокие, практически полезные стат
👩‍💻 Smashing Magazine - один из самых авторитетных ресурсов по веб-дизайну и разработке Глубокие, практически полезные статьи о CSS (например, @scope), JavaScript API (Temporal), производительности и архитектуре. Продвинутый уровень, must-read для профессионалов. ⛓ Ссылка на ресурс 🧡 Ghostly Frontend | #ресурсы
378
6
⚡️ Писать код руками больше не нужно! Привет. Меня зовут Кирилл. Я создаю топовые подборки с уроками по AI и вайбкодингу: — 6
⚡️ Писать код руками больше не нужно! Привет. Меня зовут Кирилл. Я создаю топовые подборки с уроками по AI и вайбкодингу: — 60+ промптов для дебага: поиск ошибок, оптимизация кода — 40 бесплатных курсов по вайбкодингу — 150 гайдов, как использовать ChatGPT, Claude Code, Antigravity, Cursor, Perplexity, Lovable — 100 готовых модулей: авторизация, админки, логирование, тесты, i18n — 37 MCP серверов: дизайн, разработка, Тесты/QA, деплой Всего 10 минут в день на канале и ты научишься вайб-кодить проекты любой сложности. Материалы в закрепе, постоянно пополняются👆🏻
0
7
Сборник из десятка кнопок Button Collection — сборник кнопок с самыми разнообразными эффектами, созданы на CSS. ➡️ Ссылка на
Сборник из десятка кнопок Button Collection — сборник кнопок с самыми разнообразными эффектами, созданы на CSS. ➡️ Ссылка на код 🧡 Ghostly Frontend | #codepen
545
8
👨👨👨👨👨👨👨👨👨👨 Каналы с Junior IT вакансиями и стажировками Подписывайся и забирай свой оффер 🤘 1. Стажировки и ваканс
👨👨👨👨👨👨👨👨👨👨 Каналы с Junior IT вакансиями и стажировками Подписывайся и забирай свой оффер 🤘 1. Стажировки и вакансии по России и миру 2. IT вакансии по СНГ 3. IT стажировки по СНГ 4. ИИ-ассистент для автооткликов 5. IT стажировки и волонтерства 6. IT стажировки в топовых компаниях мира 7. Удалённые IT вакансии и стажировки 8. Python вакансии и стажировки 9. БИГТЕХ вакансии и стажировки 10. Design вакансии и стажировки 11. QA вакансии и стажировки 12. Junior вакансии и стажировки 13. Frontend вакансии и вопросы собесов 14. Вакансии и стажировки для аналитиков 15. Вакансии в русских стартапах за границей 16. Вакансии и стажировки для DevOps 17. Вакансии, которых нет на ХХ.РУ
0
9
👨👨👨👨👨👨👨👨👨👨 Каналы с IT мероприятиями Подписывайся, чтобы не пропустить 🤘 1. IT мероприятия для стажеров и студенто
👨👨👨👨👨👨👨👨👨👨 Каналы с IT мероприятиями Подписывайся, чтобы не пропустить 🤘 1. IT мероприятия для стажеров и студентов 2. IT мероприятия по РФ 3. IT мероприятия и хакатоны 4. Бесплатные IT мероприятия 5. IT мероприятия онлайн 6. IT мероприятия Москва 7. IT мероприятия Санкт-Петербург
0
10
🥲 🧡 Ghostly Frontend | #мем
🥲 🧡 Ghostly Frontend | #мем
565
11
В России можно посещать IT-мероприятия хоть каждый день: как оффлайн, так и онлайн Но где их находить? Как узнавать о них ран
В России можно посещать IT-мероприятия хоть каждый день: как оффлайн, так и онлайн Но где их находить? Как узнавать о них раньше, чем когда все начнут выкладывать фотографии оттуда? Переходите на канал IT-Мероприятия России. В нём каждый день анонсируются мероприятия со всех городов России 📆 в канале размещаются как онлайн, так и оффлайн мероприятия; 👩‍💻 можно найти ивенты по любому стеку: программирование, frontend-backend разработка, кибербезопасность, дата-аналитика, osint, devops и другие; 🎙 разнообразные форматы мероприятий: митапы с коллегами по цеху, конференции и вебинары с известными опытными специалистами, форумы и олимпиады от важных представителей индустрии и многое другое А чтобы не искать по разным форумам и чатам новости о предстоящих ивентах: 🚀 IT-мероприятия России — подписывайся и будь в курсе всех предстоящих мероприятий!
0
12
👩‍💻 Фишка: Оператор расширения 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 | #фишки
440
13
Хотите стать frontend разработчиком или выйти на новый уровень в карьере? Frontend Alliance — канал и сообщество о frontend-разработке, собеседованиях, карьерном росте и системном развитии в IT. Автор канала — Андрей Автушенко, Senior/TechLead с 9+ годами коммерческого опыта во фронтенде. Андрей занимается архитектурой, техническим развитием продуктов, менторством разработчиков и развитием собственной программы обучения, через которую уже проходят более 250 студентов. В канале Андрей делится тем, что действительно помогает расти в профессии: — разборы frontend-собеседований и типичных ошибок кандидатов; — материалы по JavaScript, TypeScript, React/Vue и архитектуре; — советы по росту от junior до middle/senior; — посты про System Design; — карьерные рекомендации, основанные на реальном опыте и работе с большим количеством студентов; — честный взгляд на разработку, рынок и развитие в профессии. Если хотите не просто учить технологии, а реально расти как frontend-разработчик — подписывайтесь на Frontend Alliance 👉 https://t.me/+k2_CDHQ3nv8yZjU6
0
14
⚙️ Работа с формами в JavaScript — управление вводом и валидацией данных на клиенте Формы — важная часть любого 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 | #гайды
353
15
Как превратить нейросеть в источник дохода без навыков кодинга? 🧠 Многие сейчас в панике: “ИИ отнимает мою работу!”, но умные знают, что “ИИ - это наш друг, и те кто не умеют им пользоваться теряют деньги и время!” Именно поэтому, чтобы собрать все самые топовые фишки нейросети, экперт по нейросетям Анна Райская создала бот «Стань ИИ-гуру» с бесплатными уроками, чтобы не пришлось гуглить месяцами и сливать деньги на бесполезные курсы.  «Стань ИИ-гуру» - это твой персональный гид в мире денег на ИИ. Внутри ты найдешь:  🤖Короткие и простые уроки,которые ты не найдешь нигде,  о том какие навыки тебе нужны для заработка на ИИ, и какой формат подходит именно тебе, и все это абсолютно бесплатно 🪜Пройдешь по интересным интерактивным платформам и узнаешь, как внедрить ИИ в разные сферы свой жизни, значительно упростив ее 🧮Получишь расчет на умном калькуляторе, который основан на реальных данных по аналитике базы фриланса, который покажет сколько ты сможешь заработать в месяц, исходя из твоих возможностей 💼Как можно совмещать работу в найме, с заработком на ИИ, и как можно внедрить нейросеть в жизнь, для выполнения рутинных задач Переходи в «Стань ИИ-гуру»пройди интерактив и получи бесплатные уроки, которые доступны только пока висит этот пост. Не упусти возможность освоить навык, который в 2026 году приносит хороший доход 💰
0
16
Animated BottomBar — несколько вариантов нижней панели Реализовано на CSS и JS ➡️ Ссылка на код 🧡 Ghostly Frontend | #codepe
Animated BottomBar — несколько вариантов нижней панели Реализовано на CSS и JS ➡️ Ссылка на код 🧡 Ghostly Frontend | #codepen
418
17
Да и назвать git-ветку вполне себе романтично 🧡 Ghostly Frontend | #мем
Да и назвать git-ветку вполне себе романтично 🧡 Ghostly Frontend | #мем
568
18
👩‍💻 BFE.dev — годный ресурс для подготовки к собесам и прокачки навыков Ресурс собрал в себе более 6 сотен задач по JS, Rea
👩‍💻 BFE.dev — годный ресурс для подготовки к собесам и прокачки навыков Ресурс собрал в себе более 6 сотен задач по JS, React, TypeScript, CSS и даже по системному дизайну. Решать задачи можно сразу в браузере, т.к платформа имеет встроенную проверку. ➡️ Ссылка на платформу 🧡 Ghostly Frontend | #ресурс
0
19
🔔 Ты до сих пор пишешь код руками? Очнись, на дворе 26 год, есть куча топовых нейронок, способных сделать стартапы. Более 36
🔔 Ты до сих пор пишешь код руками? Очнись, на дворе 26 год, есть куча топовых нейронок, способных сделать стартапы. Более 360 человек уже обучаются этому подходу на нашем курсе. К вашему вниманию: "Вайбкодинг Telegram ботов и Сайтов с Claude | Полный гайд" 🔥 В нем вы научитесь: — Создавать топовые тг-боты с поддержкой ИИ за 20 минут — Создавать лендинговые сайты за один вечер — Деплоить проекты на удалённый виртуальный сервер — Превращать идеи в рабочие продукты и доводить их до монетизации — Работать с базой данных и хранением пользователей — Промпт инжинирингу, экономя часы работы за счёт правильных промптов — Проектировать архитектуру бота, чтобы его можно было масштабировать У вас также будет инструкция/абуз по получению Claude Opus 4.6/4.7 (самой топовой модели в мире) ➡️Приятным бонусом будет скидка 30% на данный курс.
0
20
👩‍💻 Фишка: 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 | #фишки
0