Firibgarlarga uchmang! Telemetrio bunday kanallarni topadi va belgilaydi 👉 Belgini ko‘rmoqchi bo‘lsangiz, obuna bo‘ling

Frontend | Вопросы собесов

Kanalga Telegram’da o‘tish

Сайт: https://easyoffer.ru/ Все каналы: t.me/+xGeAw6ckJ4liYzQy Контакт для рекламы: @sendme_ads

Ko'proq ko'rsatish

Tarmoq: easyofferRossiya37 797Texnologiyalar & Aralashmalar7 467...

📈 Telegram kanali Frontend | Вопросы собесов analitikasi

Frontend | Вопросы собесов (@easy_javascript_ru) Rus til segmentidagi kanali faol ishtirokchi. Hozirda hamjamiyat 17 341 obunachidan iborat bo'lib, Texnologiyalar & Aralashmalar toifasida 7 467-o'rinni va Rossiya mintaqasida 37 797-o'rinni egallagan.

📊 Auditoriya ko‘rsatkichlari va dinamika

невідомо sanasidan buyon loyiha tez o‘sib, 17 341 obunachiga ega bo‘ldi.

04 Noyabr, 2026 dagi oxirgi ma’lumotlarga ko‘ra kanal barqaror faollikka ega. Oxirgi 30 kunda obunachilar soni -284 ga, so‘nggi 24 soatda esa -13 ga o‘zgardi va umumiy qamrov yuqori darajada qolmoqda.

Tasdiqlash holati: Tasdiqlanmagan
Jalb etish (ER): Auditoriya o‘rtacha 6.78% darajada jalb etiladi. Nashrdan keyingi dastlabki 24 soatda kontent odatda umumiy obunachilar sonining 4.42% ini tashkil etuvchi reaksiyalarni to‘playdi.
Post qamrovi: Har bir post o‘rtacha 1 175 marta ko‘riladi; birinchi sutkada odatda 766 ta ko‘rish yig‘iladi.
Reaksiyalar va o‘zaro ta’sir: Auditoriya faol: har bir postga o‘rtacha 4 ta reaksiya keladi.
Tematik yo‘nalishlar: Kontent ставь, браузер, html, border, flex kabi asosiy mavzularga jamlangan.

📝 Tavsif va kontent siyosati

Muallif resursni shaxsiy fikrni ifoda etish maydoni sifatida ta’riflaydi:
“Сайт: https://easyoffer.ru/ Все каналы: t.me/+xGeAw6ckJ4liYzQy Контакт для рекламы: @sendme_ads”

Yuqori yangilanish chastotasi (oxirgi ma’lumot 05 Noyabr, 2026 da olingan) sababli kanal doimo dolzarb va katta qamrovli bo‘lib qoladi. Analitika auditoriya kontent bilan faol hamkorlik qilishini, uni Texnologiyalar & Aralashmalar toifasidagi muhim ta’sir nuqtasiga aylantirishini ko‘rsatadi.

17 341

Obunachilar

-1324 soatlar

-1037 kun

-28430 kun

1 175

Post ko'rishlar

~ 76624 soatlar

~ 88148 soatlar

6.78%

Muloqot nisbati

~ 2

Kuniga postlar

Ads index

Postlar arxiv

\n\n\n

Сайт загружается...

\n\n\n🟠Решение: подключение в конце `` \nЕсли разместить \n\n\n🟠Альтернативы: `defer` и `async` \ndefer – отложенное выполнение после загрузки HTML\n\n \n\n\nasync – загрузка и выполнение параллельно \n\n \n\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-02-20T09:10:11Z","dateModified":"2025-02-20T09:10:11Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":4269},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":30},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":24}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/1149","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/1149","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/1149","headline":"— Кто мы? — Фронтендеры! — Чего мы хотим? — Делать крутые проекты! — Где этому научиться? — На канале «Будни…","articleBody":"— Кто мы?\n— Фронтендеры!\n— Чего мы хотим?\n— Делать крутые проекты!\n— Где этому научиться?\n— На канале «Будни разработчика», конечно!\n— А что там?\n— Скрытые фишки фронтенда, реальные проекты и топовые статьи!","datePublished":"2025-02-20T07:00:15Z","dateModified":"2025-02-22T07:00:12Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"image":["https://n1.tlmtr.cc/v/5298629263912618681?ty=x"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2508},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":7},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/1148","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/1148","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/1148","headline":"🤔 Что сделать, чтобы setTimeout выполнился позже? Для того чтобы setTimeout выполнялся позже, необходимо зада…","articleBody":"🤔 Что сделать, чтобы setTimeout выполнился позже?\n\nДля того чтобы setTimeout выполнялся позже, необходимо задать время задержки (в миллисекундах) в его втором аргументе. Чем больше значение, тем позже будет выполнен переданный callback. Например, setTimeout(() => console.log('Hello'), 5000) выполнит код через 5 секунд.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-02-19T16:10:33Z","dateModified":"2025-02-19T16:10:33Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3883},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":64},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/1147","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/1147","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/1147","headline":"🤔 Как взаимодействуешь с eventloop? Event Loop (Цикл событий) – это механизм, который управляет выполнением к…","articleBody":"🤔 Как взаимодействуешь с eventloop?\n\nEvent Loop (Цикл событий) – это механизм, который управляет выполнением кода, обработкой асинхронных задач и взаимодействием с Web API. \n\n🚩Как мы взаимодействуем с Event Loop? \n\nИспользуем асинхронный код: setTimeout, setInterval, fetch, Promise, async/await \nОптимизируем выполнение тяжелых задач \nУправляем приоритетами выполнения (Microtask vs Macrotask) \n\n🟠Как работает Event Loop?\nJavaScript выполняет код в однопоточном режиме, но может обрабатывать асинхронные задачи через очередь событий (Event Queue) и микрозадачи (Microtask Queue). \nconsole.log(\"1\");\n\nsetTimeout(() => console.log(\"2\"), 0);\n\nPromise.resolve().then(() => console.log(\"3\"));\n\nconsole.log(\"4\");\n\nВывод в консоли \n1\n4\n3\n2\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-02-19T09:10:07Z","dateModified":"2025-02-19T09:10:07Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":4197},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":28},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":16}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/1146","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/1146","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/1146","headline":"ТОП 2 канала для тех кто увлекатеся хакингом и кибербезопасностью: Этичный Хакер — крупнейший в СНГ канал по…","articleBody":"ТОП 2 канала для тех кто увлекатеся хакингом и кибербезопасностью:\n\nЭтичный Хакер — крупнейший в СНГ канал по информационной безопасности. OSINT, анонимность, пентест, социальная инженерия.\n\nЛаборатория Хакера — авторский канал от специалиста по ИБ. Новости даркнета, сетевая разведка, обзоры инструментов с github, полезные подборки.","datePublished":"2025-02-19T07:00:19Z","dateModified":"2025-02-21T07:00:18Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2427},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/1145","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/1145","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/1145","headline":"Прокачаем ваш frontend скилл с junior до middle Научим писать код, который не стыдно показать Первые 7 дней б…","articleBody":"Прокачаем ваш frontend скилл с junior до middle\n\nНаучим писать код, который не стыдно показать \n\nПервые 7 дней бесплатно. Попробуй!\n \n\nУзнать больше\n\n#реклама 16+\nykul.ru\nО рекламодателе","datePublished":"2025-02-18T22:05:09Z","dateModified":"2025-02-20T20:05:45Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2501},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1}]}}]}

17 341

Repost from easyoffer

💡 В EasyOffer 2.0 появится фильтрация вопросов по грейдам и типам интервью! 📊 Например, вот вероятности ТОП-30 вопросов, которые задают на HR-скрининге Python-разработчику уровня Middle/Senior. Данные основаны на 53 реальных интервью. 97% Какие у тебя зарплатные ожидания 73% Какие у тебя есть вопросы 44% Какие критерии при выборе будущей работы 41% Расскажи о себе 38% Почему ищешь работу 35% Расскажи про свой опыт 35% Расскажи про проект на предыдущей работе 32% Почему уволился с предыдущей работы 29% Где территориально сейчас живешь/находишься 23% Есть ли другие предложения по работе 17% Есть ли военный билет 17% Почему хочешь сменить работу 17% Как проводишь свободное время 17% Расскажи про задачи на предыдущей работе 17% Сколько коммерческого опыта работы с Python 17% С какими БД работал 14% Находишься ли в активном поиске работы 14% С каким стеком работаешь 14% Почему решил откликнуться на нашу вакансию 14% Какой текущий статус поиска работы 11% Почему решил стать программистом 11% С какими фреймворками работал 11% Какую зарплату получал на предыдущей работе 11% Работаешь ли в настоящий момент 11% На какой грейд себя оцениваешь 11% Как быстро можешь приступить к работе после получения офера 11% Расскажи про свои pet-проекты 8% Какие знаешь типы данных в Python 8% Что такое декоратор в Python 8% Что ищешь на новой работе 🚀 Скоро стартует краудфандинговая кампания, которая поможет ускорить разработку EasyOffer 2.0. Первые спонсоры получат уникальные лимитированные награды! 📢 Если вам это интересно, подписывайтесь на канал 👉 этот телеграм канал

17 341

🤔 Расскажи про особенности свойства color color – одно из самых базовых CSS-свойств, которое отвечает за цвет текста и текста в элементах (например, градиентных фонах и SVG).

p {
  color: red;
}

🟠Какие значения принимает `color`? CSS позволяет задавать цвета несколькими способами 🟠Особенности работы `color` Наследование color наследуется потомками по умолчанию, в отличие от многих других свойств CSS (например, background).

body {
  color: blue;
}
p {
  color: inherit; /* Явное наследование */
}

currentColor — скрытое золото Это специальное значение, которое означает "используй текущее значение color". Очень полезно для стилизации border, box-shadow, outline и SVG.

button {
  color: red;
  border: 2px solid currentColor; /* Использует color */
}

transparent — особый цвет

p {
  color: transparent;
}

Когда rgba() или hsla() лучше

p {
  color: rgba(255, 0, 0, 0.5); /* Полупрозрачный красный */
}

color и mix-blend-mode Можно заставить текст взаимодействовать с фоном с помощью mix-blend-mode

h1 {
  color: white;
  mix-blend-mode: difference;
}

color в ::selection и ::placeholder Некоторые элементы (например, выделенный текст или placeholder в input) требуют отдельного указания color

::selection {
  background: blue;
  color: white;
}

input::placeholder {
  color: gray;
}

Ставь 👍 и забирай 📚 Базу знаний

17 341

💻 Ты разработчик, который хочет зарабатывать больше? В IT важно не просто кодить, а разбираться в архитектуре, понимать бизнес и грамотно выстраивать свою карьеру. Иначе через пару лет ты окажешься в толпе мидлов, которым ИИ уже подбирает замену. 📌 В своем канале Саня об IT говорит не про «как войти в IT», а как не застрять в нём. • Какие технологии будут востребованы в 2025? • Реальные кейсы: разбор IT-трендов без маркетинговой шелухи. • Карьерный рост: как перейти из мидлов в сеньоры, а дальше – хоть в техлиды. 🚀 Подписывайся, если хочешь развиваться, а не топтаться на месте! 👉 https://t.me/+Soa4Lzwkqqw3Yjgy

17 341

Курс по Java-разработке с junior до middle Несколько фактов о нашем курсе: - личный ментор/наставник; - помогаем решать твои текущие задачи; - доучиваем после онлайн-школы; - ведем от уровня junior до middle Уже во время обучения наши ученики зарабатывают от 60 000 рублей. Хватит тратить деньги, покупая не оправдывающие себя курсы Забронируй курс по специальной цене! Узнать больше #реклама 16+ ykul.ru О рекламодателе

17 341

🤔 От чего зависит this? Значение this определяется контекстом вызова функции. В глобальной области видимости this ссылается на глобальный объект (например, window в браузере). В строгом режиме или внутри методов, значение this зависит от способа вызова функции. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 341

🤔 Почему map используют чаще, чем объект? Хотя объекты {} исторически использовались как ассоциативные массивы (ключ-значение), у Map есть ряд преимуществ, которые делают его более удобным в большинстве случаев. 🟠`Map` может использовать любые типы данных в качестве ключей В объектах {} ключи всегда автоматически приводятся к строке.

const obj = {};
const key1 = {};
const key2 = {};

obj[key1] = "value1";
obj[key2] = "value2";

console.log(obj); // { '[object Object]': 'value2' }
console.log(obj[key1]); // "value2" (ключи перезаписались, потому что оба стали "[object Object]")

Пример с Map:

const map = new Map();
map.set(key1, "value1");
map.set(key2, "value2");

console.log(map.get(key1)); // "value1"
console.log(map.get(key2)); // "value2"

🟠`Map` хранит порядок ключей В объекте {} порядок ключей не гарантируется (особенно для числовых ключей).

const obj = { 2: "two", 1: "one", 3: "three" };
console.log(Object.keys(obj)); // ["1", "2", "3"] (порядок числовых ключей изменился!)

Пример с Map

const map = new Map();
map.set(2, "two");
map.set(1, "one");
map.set(3, "three");

console.log([...map.keys()]); // [2, 1, 3] (порядок сохраняется!)

🟠`Map` быстрее при частых добавлениях/удалениях Объекты {} оптимизированы для хранения структуры данных, но операции delete и Object.keys(obj).length могут быть медленными, потому что движок JavaScript выполняет дополнительные проверки. Разница в скорости В Map операции .set(), .get(), .delete() выполняются быстрее. В объекте {} delete obj[key] может работать медленнее, так как JavaScript оптимизирует объекты для других целей. 🟠У `Map` есть удобные методы Объект {} не имеет встроенных методов для работы с ключами и значениями. Чтобы, например, узнать размер объекта, приходится использовать Object.keys(obj).length.

const map = new Map();
map.set("a", 1);
map.set("b", 2);

console.log(map.size); // 2
console.log(map.has("a")); // true
console.log(map.delete("b")); // true (удалит "b")

В объекте {}

const obj = { a: 1, b: 2 };

console.log(Object.keys(obj).length); // 2 (нужно вызывать Object.keys())
console.log(obj.hasOwnProperty("a")); // true (менее удобный синтаксис)
delete obj.b; // Удаление ключа

🟠`Map` не имеет проблем с прототипами В объекте {} могут быть неожиданные проблемы, если ключ совпадает с именем встроенного метода.

const obj = {};
console.log(obj.toString); // [Function: toString] (унаследованное свойство!)
console.log(obj["toString"]); // [Function: toString] (может вызвать баги)

Чтобы обойти это, приходится делать так

const obj = Object.create(null); // Теперь у объекта нет прототипа
obj.toString = "custom";
console.log(obj.toString); // "custom"

В Map таких проблем нет

const map = new Map();
map.set("toString", "custom");
console.log(map.get("toString")); // "custom" (никаких багов!)

Ставь 👍 и забирай 📚 Базу знаний

17 341

🤔 Как JS понимает, что есть следующий прототип? Каждый объект в JavaScript содержит ссылку на прототип через специальное свойство proto (или [[Prototype]], доступное через Object.getPrototypeOf()). Если свойство или метод не найдено у объекта, движок JavaScript автоматически переходит к его прототипу. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 341

🤔 В чем отличие атрибутов от свойств в html тегах? Атрибуты — это то, что записано в HTML. Свойства — это то, что появляется в JavaScript-объекте element. Когда браузер загружает страницу, он парсит HTML и создает DOM-объекты, в которых атрибуты превращаются в свойства. Однако атрибуты и свойства не всегда совпадают! 🟠Атрибуты (`attributes`) Хранятся в HTML. Всегда являются строками. Их можно получить с помощью .getAttribute() и изменить через .setAttribute(). Они не меняются динамически при изменении свойства элемента в JS.

<input id="myInput" type="text" value="Hello">

const input = document.getElementById("myInput");
console.log(input.getAttribute("value")); // "Hello"

🟠Свойства (`properties`) Хранятся в объекте элемента (HTMLElement). Имеют разные типы данных (строки, числа, булевые и т. д.). Меняются динамически при взаимодействии с DOM.

console.log(input.value); // "Hello"
input.value = "New text"; // Меняем свойство
console.log(input.getAttribute("value")); // "Hello" (атрибут НЕ поменялся)
console.log(input.value); // "New text" (свойство изменилось)

Пример с checked у чекбокса

<input type="checkbox" id="myCheckbox" checked>

const checkbox = document.getElementById("myCheckbox");

console.log(checkbox.getAttribute("checked")); // "checked" (атрибут есть, значит включен)
console.log(checkbox.checked); // true (свойство JS - boolean)

checkbox.checked = false; // Меняем состояние чекбокса
console.log(checkbox.getAttribute("checked")); // "checked" (атрибут не поменялся!)
console.log(checkbox.checked); // false (свойство изменилось)

🟠Как правильно работать с атрибутами и свойствами? Если хотите работать с DOM → используйте свойства (element.value, element.checked и т. д.). Если хотите работать с атрибутами в HTML → используйте .getAttribute() и .setAttribute().

const img = document.querySelector("img");

// Меняем атрибут src
img.setAttribute("src", "new-image.jpg");

// Меняем свойство width
img.width = 300;

Ставь 👍 и забирай 📚 Базу знаний

17 341

Как масштабировать команду? — Нанять аутсорс А как проще всего работать с аутсорсерами? — В Битрикс24 Коллабах. Это платформа для работы с внешними специалистами внутри вашего Битрикс24. Выглядит как чат, только удобнее. Встроены задачи, встречи, файлы. Для коротких и долгосрочных проектов. Особенно удобно для взаимодействия команд, где обсуждается несколько параллельных задач. Узнать больше #реклама 16+ collabs.bitrix24.ru О рекламодателе

17 341

🤔 Как обратиться к методу в цепочке? Чтобы вызвать метод, доступный через прототип, достаточно обратиться к нему через объект. Например, если метод toString находится в прототипе объекта, его можно вызвать так: obj.toString(). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 341

Господи, да в чём проблема стать фронтендером? Подписался на эти три канала: 👉 Фронтенд 👉 Верстка 👉 Node.JS Заходишь каждый день, тратишь 15 минут и изучаешь актуальную информацию. Можешь сразу применять на практике. ВСЁ! Это настолько просто, что даже твой кот справится. Подпишись сейчас, потом спасибо скажешь.

17 341

🤔 Какие используешь подходы для написания приложения которую проще поддерживать, чем делать первоначальную разработку? При разработке frontend-приложений, которые в будущем будет проще поддерживать и масштабировать, я придерживаюсь ряда ключевых подходов. 🟠Разделение ответственности (Separation of Concerns) Это значит, что код должен быть разделен по зонам ответственности. В frontend-разработке это проявляется в: Чистом разделении логики, представления и данных (например, с помощью архитектуры MVC, MVVM или FLUX). Использовании компонентов в React/Vue или шаблонов в Angular. Разделении CSS, JS и HTML, либо использовании методологий, где стили хранятся рядом с компонентом (CSS Modules, Styled Components). Вместо того, чтобы писать всю логику и разметку в одном файле:

function App() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

Я разделяю бизнес-логику и представление

// CounterLogic.js
export function useCounter() {
  const [count, setCount] = useState(0);
  const increment = () => setCount(count + 1);
  return { count, increment };
}

// Counter.js
import { useCounter } from "./CounterLogic";
function Counter() {
  const { count, increment } = useCounter();
  return <button onClick={increment}>Count: {count}</button>;
}

🟠Компонентный подход и повторное использование кода Frontend-приложения должны строиться из переиспользуемых и изолированных компонентов. Это уменьшает дублирование кода и делает его понятным.

// Button.js (переиспользуемый компонент)
function Button({ onClick, children }) {
  return <button onClick={onClick}>{children}</button>;
}

// Counter.js (использует Button)
function Counter() {
  const [count, setCount] = useState(0);
  return <Button onClick={() => setCount(count + 1)}>Count: {count}</Button>;
}

🟠Чистый код и читаемость Код должен быть понятным не только мне, но и другим разработчикам. Понятные имена переменных и функций. Вместо x → userAge, вместо doSmth() → calculateTotalPrice(). Меньше вложенности. Вместо кучи if и else, лучше использовать early return. Разбиение кода на модули. Один файл = одна зона ответственности.

function getDiscountedPrice(price, discount) {
  if (discount <= 0) return price;
  return price - price * (discount / 100);
}

🟠Состояние приложения: локальное vs глобальное В зависимости от сложности приложения нужно правильно управлять состоянием: Локальное состояние – useState (React), ref (Vue) для простых данных внутри компонента. Глобальное состояние – Redux, MobX, Zustand, Pinia, Context API – когда данные нужны многим компонентам. Серверное состояние – React Query, SWR – когда данные приходят с API и их нужно кешировать. 🟠Следование принципам SOLID и DRY DRY (Don't Repeat Yourself) – не повторяем код, используем функции, хуки, компоненты. SOLID – например, принцип единственной ответственности (Single Responsibility Principle) гласит, что каждый компонент или функция должны решать только одну задачу.

function sendEmailAndSaveToDB(user) {
  sendEmail(user.email);
  saveUserToDatabase(user);
}

Лучше разделить логику

function sendEmail(email) { /* отправка письма */ }
function saveUserToDatabase(user) { /* сохранение в БД */ }
function registerUser(user) {
  sendEmail(user.email);
  saveUserToDatabase(user);
}

🟠Использование TypeScript TypeScript помогает избежать ошибок и делать код предсказуемым.

type User = {
  id: number;
  name: string;
};

function getUserName(user: User): string {
  return user.name;
}

🟠Документация и кодстайл ESLint + Prettier → автоформатирование и проверка стиля. JSDoc/TypeScript → документация функций и типов данных. Storybook → для документирования UI-компонентов. Ставь 👍 и забирай 📚 Базу знаний

17 341

1–2 марта проводим Weekend Offer Analytics Устроиться в Яндекс за выходные — реально. Ищем крутых аналитиков с опытом работы от 2 лет на Python, готовых работать в офисном или гибридном режиме на территории России. Подавайте заявку до 24 февраля — и всего за 2 дня пройдите все технические собеседования. После сможете пообщаться с одиннадцатью нанимающими командами и выбрать ту, которая покажется самой интересной. Если всё сложится хорошо, сразу же пришлём вам офер. Зарегистрироваться #реклама yandex.ru О рекламодателе

17 341

🤔 Что такое цепочка прототипов? Это механизм в JavaScript, который обеспечивает наследование между объектами. Каждый объект имеет ссылку на свой прототип, где ведётся поиск методов или свойств, если их нет у самого объекта. Поиск продолжается вверх по цепочке, пока не будет найдено свойство или достигнут null. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 341

🤔 Для чего скрипт подключают в концe body? Основная причина – ускорение загрузки страницы и избежание блокировки рендеринга. Когда браузер загружает HTML, он читает код сверху вниз. Если в <head> встречается <script>, браузер останавливает разбор HTML, загружает и выполняет скрипт, а только потом продолжает загружать страницу. 🟠Проблема: блокировка рендеринга Если скрипт загружается в <head>, он останавливает отрисовку страницы до завершения загрузки.

<head>
  <script src="script.js"></script> <!-- ❌ Плохо: блокирует рендеринг -->
</head>
<body>
  <h1>Сайт загружается...</h1>
</body>

🟠Решение: подключение в конце `<body>` Если разместить <script> перед закрывающим </body>, сначала загружается контент страницы, а потом выполняется JavaScript.

<body>
  <h1>Контент загрузился!</h1>
  <script src="script.js"></script> <!-- Хорошо: не блокирует рендеринг -->
</body>

🟠Альтернативы: `defer` и `async` defer – отложенное выполнение после загрузки HTML

<head>
  <script src="script.js" defer></script>
</head>

async – загрузка и выполнение параллельно

<head>
  <script src="script.js" async></script>
</head>

Ставь 👍 и забирай 📚 Базу знаний

17 341

— Кто мы? — Фронтендеры! — Чего мы хотим? — Делать крутые проекты! — Где этому научиться? — На канале «Будни разработчика», конечно! — А что там? — Скрытые фишки фронтенда, реальные проекты и топовые статьи!

17 341

🤔 Что сделать, чтобы setTimeout выполнился позже? Для того чтобы setTimeout выполнялся позже, необходимо задать время задержки (в миллисекундах) в его втором аргументе. Чем больше значение, тем позже будет выполнен переданный callback. Например, setTimeout(() => console.log('Hello'), 5000) выполнит код через 5 секунд. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 341

🤔 Как взаимодействуешь с eventloop? Event Loop (Цикл событий) – это механизм, который управляет выполнением кода, обработкой асинхронных задач и взаимодействием с Web API. 🚩Как мы взаимодействуем с Event Loop? Используем асинхронный код: setTimeout, setInterval, fetch, Promise, async/await Оптимизируем выполнение тяжелых задач Управляем приоритетами выполнения (Microtask vs Macrotask) 🟠Как работает Event Loop? JavaScript выполняет код в однопоточном режиме, но может обрабатывать асинхронные задачи через очередь событий (Event Queue) и микрозадачи (Microtask Queue).

console.log("1");

setTimeout(() => console.log("2"), 0);

Promise.resolve().then(() => console.log("3"));

console.log("4");

Вывод в консоли

Ставь 👍 и забирай 📚 Базу знаний

17 341

ТОП 2 канала для тех кто увлекатеся хакингом и кибербезопасностью: Этичный Хакер — крупнейший в СНГ канал по информационной безопасности. OSINT, анонимность, пентест, социальная инженерия. Лаборатория Хакера — авторский канал от специалиста по ИБ. Новости даркнета, сетевая разведка, обзоры инструментов с github, полезные подборки.

17 341

Прокачаем ваш frontend скилл с junior до middle Научим писать код, который не стыдно показать Первые 7 дней бесплатно. Попробуй! Узнать больше #реклама 16+ ykul.ru О рекламодателе