Ghostly Frontend
Open in Telegram
Погружаемся в мир Frontend: задачи, фишки, библиотеки и террабайты полезного материала. Сотрудничество: @heywan_n1 Цены: @heywan_media
Show more2 415
Subscribers
-124 hours
-87 days
-4130 days
Data loading in progress...
Similar Channels
Tags Cloud
Incoming and Outgoing Mentions
---
---
---
---
---
---
Attracting Subscribers
August '26
August '26
+7
in 0 channels
July '26
+4
in 0 channels
Get PRO
June '26
+3
in 0 channels
Get PRO
May '26
+14
in 0 channels
Get PRO
April '26
+17
in 0 channels
Get PRO
March '26
+9
in 0 channels
Get PRO
February '26
+9
in 0 channels
Get PRO
January '26
+8
in 0 channels
Get PRO
December '25
+24
in 7 channels
Get PRO
November '25
+10
in 1 channels
Get PRO
October '25
+476
in 59 channels
Get PRO
September '25
+480
in 32 channels
Get PRO
August '25
+15
in 7 channels
Get PRO
July '25
+37
in 11 channels
Get PRO
June '25
+79
in 23 channels
Get PRO
May '25
+539
in 21 channels
Get PRO
April '25
+236
in 2 channels
Get PRO
March '25
+170
in 4 channels
Get PRO
February '25
+176
in 6 channels
Get PRO
January '25
+226
in 6 channels
Get PRO
December '24
+155
in 6 channels
Get PRO
November '24
+222
in 5 channels
Get PRO
October '24
+353
in 6 channels
Get PRO
September '24
+179
in 1 channels
Get PRO
August '24
+145
in 4 channels
Get PRO
July '24
+835
in 3 channels
| Date | Subscriber Growth | Mentions | Channels | |
| 26 August | +1 | |||
| 25 August | 0 | |||
| 24 August | 0 | |||
| 23 August | 0 | |||
| 22 August | 0 | |||
| 21 August | 0 | |||
| 20 August | +1 | |||
| 19 August | 0 | |||
| 18 August | 0 | |||
| 17 August | 0 | |||
| 16 August | 0 | |||
| 15 August | 0 | |||
| 14 August | 0 | |||
| 13 August | +1 | |||
| 12 August | 0 | |||
| 11 August | 0 | |||
| 10 August | +1 | |||
| 09 August | +1 | |||
| 08 August | +1 | |||
| 07 August | 0 | |||
| 06 August | 0 | |||
| 05 August | 0 | |||
| 04 August | 0 | |||
| 03 August | 0 | |||
| 02 August | 0 | |||
| 01 August | +1 |
Channel Posts
ИИ уже умеет написать тысячи строк кода за вечер. Вопрос теперь не в том, умеете ли вы пользоваться нейросетью, а понимаете ли вы, что именно она делает с вашим проектом.
«ИИнтеллигенция» - канал для тех, кто хочет разбираться в ИИ глубже обычного пользователя.
Здесь выходят:
— полезные open-source-инструменты с исходниками;
— разборы ИИ-агентов и автоматизации разработки;
— локальные модели и self-hosted-сервисы;
— реальные инциденты, уязвимости и проблемы AI-кода.
Из поста понятно не только что вышло, но и зачем это вам, как запустить и где искать подвох.
Читайте «ИИнтеллигенцию» → @clucai
| 2 |  ⚙️ БЭМ + Tailwind: прагматичный гибрид для современного фронтенда
Показываю, как из двух спорных CSS-подходов собрать что-то вменяемое. Меньше боли с классами, меньше хаоса в стилях, больше скорости. Без фанатизма — только то, что реально работает.
➡️ Читать статью
🧡 Ghostly Frontend | #статьи | 297 |
| 3 |  Страх.
Гнев.
Стыд.
Вина.
Тревога.
Апатия.
Уныние.
Изоляция.
Бессилие.
Контакт.
Тепло.
Чувство.
Живость.
Ясность.
Точность.
Присутствие.
Тишина.
Покой.
Если выбор сделан,
твоё место здесь:
мэверик
Входи осторожно.
Кислород
зашкаливает. | 427 |
| 4 |  ⚡️ Айтишник из «VISION» скупил курсы айти школ и выложил гигабайты материалов к себе
Каждый найдет что-то по душе:
1202 ГБ — Python
1811 ГБ — Frontend
1100 ГБ — C / C++ / C#
804 ГБ — Java
411 ГБ — SQL & БД
309 ГБ — DevOps
998 ГБ — ИБ & Хакинг
773 ГБ — Kotlin / Swift
189 ГБ — PHP
201 ГБ — GoLang
170 ГБ — Rust
167 ГБ — QA / Тестирование
310 ГБ — 1C + Лицензии
495 ГБ — Машинное обучение
704 ГБ — Аналитика Данных
991 ГБ — Дизайн
Материалы в закрепе, постоянно пополняются👆🏻 | 188 |
| 5 |  ⚡️ Айтишник из «VISION» скупил курсы айти школ и выложил гигабайты материалов к себе
Каждый найдет что-то по душе:
1202 ГБ — Python
1811 ГБ — Frontend
1100 ГБ — C / C++ / C#
804 ГБ — Java
411 ГБ — SQL & БД
309 ГБ — DevOps
998 ГБ — ИБ & Хакинг
773 ГБ — Kotlin / Swift
189 ГБ — PHP
201 ГБ — GoLang
170 ГБ — Rust
167 ГБ — QA / Тестирование
310 ГБ — 1C + Лицензии
495 ГБ — Машинное обучение
704 ГБ — Аналитика Данных
991 ГБ — Дизайн
Материалы в закрепе, постоянно пополняются👆🏻 | 1 |
| 6 |  👩💻 Устаревшие техники CCS, от которых уже можно отказаться
Выходящие обновления часто упрощают и оптимизируют работу, однако, не все успевают следить за нововведениями.
Именно для таких кодеров автор статьи собрал устаревшие техники и переписал их на современный лад.
➡️ Читать статью
🧡 Ghostly Frontend | #статьи | 411 |
| 7 |  3D-слайдер из двух кубов
Реализован с помощью jQuery
➡️ Ссылка на код
🧡 Ghostly Frontend | #codepen | 472 |
| 8 | Совет на 2027 год — перекатывайтесь в системную аналитику.
Системные аналитики остаются одними из самых дефицитных специалистов в IT. Они проектируют интеграции, работают с API и требованиями, а зарплаты мидлов начинаются от 200 000 ₽.
А чтобы освоить профессию всего за 3 месяца и получить первый оффер — изучите канал Насти Глазовой.
Её бэкграунд: 5 лет в IT, путь от джуна до лида аналитики, опыт работы в Wildberries, Самокате и Ralf Ringer, а также более 150 выпускников со средней зарплатой от 177 000 ₽.
На канале вы найдёте:
— Всё, что нужно системному аналитику: UML, BPMN, SQL, REST API, интеграции и работа с требованиями.
— Советы по резюме, которые помогают выделяться среди сотен кандидатов.
— Практические материалы по трудоустройству: от подготовки к интервью до выхода на первый оффер.
Помимо обучения, Настя помогает подготовить сильное резюме, пройти пробные собеседования с HR и получить рекомендации в компании-партнёры.
Переходи в закрепленное сообщение в канале: @nastyacareera | 150 |
| 9 |  Даже индусам уже найдена замена в виде котиков
🧡 Ghostly Frontend | #мем | 548 |
| 10 | 👩💻 Фишка: 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 | #фишки | 495 |
| 11 |  👩💻 Smashing Magazine - один из самых авторитетных ресурсов по веб-дизайну и разработке
Глубокие, практически полезные статьи о CSS (например, @scope), JavaScript API (Temporal), производительности и архитектуре. Продвинутый уровень, must-read для профессионалов.
⛓ Ссылка на ресурс
🧡 Ghostly Frontend | #ресурсы | 421 |
| 12 |  ⚡️ Писать код руками больше не нужно!
Привет. Меня зовут Кирилл. Я создаю топовые подборки с уроками по AI и вайбкодингу:
— 60+ промптов для дебага: поиск ошибок, оптимизация кода
— 40 бесплатных курсов по вайбкодингу
— 150 гайдов, как использовать ChatGPT, Claude Code, Antigravity, Cursor, Perplexity, Lovable
— 100 готовых модулей: авторизация, админки, логирование, тесты, i18n
— 37 MCP серверов: дизайн, разработка, Тесты/QA, деплой
Всего 10 минут в день на канале и ты научишься вайб-кодить проекты любой сложности.
Материалы в закрепе, постоянно пополняются👆🏻 | 156 |
| 13 |  Сборник из десятка кнопок
Button Collection — сборник кнопок с самыми разнообразными эффектами, созданы на CSS.
➡️ Ссылка на код
🧡 Ghostly Frontend | #codepen | 559 |
| 14 |  👨👨👨👨👨👨👨👨👨👨
Каналы с 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. Вакансии, которых нет на ХХ.РУ | 119 |
| 15 |  👨👨👨👨👨👨👨👨👨👨
Каналы с IT мероприятиями
Подписывайся,
чтобы не пропустить 🤘
1. IT мероприятия для стажеров и студентов
2. IT мероприятия по РФ
3. IT мероприятия и хакатоны
4. Бесплатные IT мероприятия
5. IT мероприятия онлайн
6. IT мероприятия Москва
7. IT мероприятия Санкт-Петербург | 141 |
| 16 |  🥲
🧡 Ghostly Frontend | #мем | 565 |
| 17 |  В России можно посещать IT-мероприятия хоть каждый день: как оффлайн, так и онлайн
Но где их находить? Как узнавать о них раньше, чем когда все начнут выкладывать фотографии оттуда?
Переходите на канал IT-Мероприятия России. В нём каждый день анонсируются мероприятия со всех городов России
📆 в канале размещаются как онлайн, так и оффлайн мероприятия;
👩💻 можно найти ивенты по любому стеку: программирование, frontend-backend разработка, кибербезопасность, дата-аналитика, osint, devops и другие;
🎙 разнообразные форматы мероприятий: митапы с коллегами по цеху, конференции и вебинары с известными опытными специалистами, форумы и олимпиады от важных представителей индустрии и многое другое
А чтобы не искать по разным форумам и чатам новости о предстоящих ивентах:
🚀 IT-мероприятия России — подписывайся и будь в курсе всех предстоящих мероприятий! | 186 |
| 18 | 👩💻 Фишка: Оператор расширения 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 |
| 19 | Хотите стать 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 | 163 |
| 20 |  ⚙️ Работа с формами в 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 |
