Frontend Interview - собеседования по Javascript / Html / Css
Kanalga Telegram’da o‘tish
Канал для подготовки к собеседованиям по фронтенду Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront Купить рекламу: https://telega.in/c/frontendinterview Канал в реестре РКН: https://rknn.link/su
Ko'proq ko'rsatish
Tarmoq:📈 Telegram kanali Frontend Interview - собеседования по Javascript / Html / Css analitikasi
Frontend Interview - собеседования по Javascript / Html / Css (@frontendinterview) Rus til segmentidagi kanali faol ishtirokchi. Hozirda hamjamiyat 10 696 obunachidan iborat bo'lib, Texnologiyalar & Aralashmalar toifasida 11 427-o'rinni va Rossiya mintaqasida 60 447-o'rinni egallagan.
📊 Auditoriya ko‘rsatkichlari va dinamika
невідомо sanasidan buyon loyiha tez o‘sib, 10 696 obunachiga ega bo‘ldi.
23 Iyul, 2026 dagi oxirgi ma’lumotlarga ko‘ra kanal barqaror faollikka ega. Oxirgi 30 kunda obunachilar soni -103 ga, so‘nggi 24 soatda esa -4 ga o‘zgardi va umumiy qamrov yuqori darajada qolmoqda.
- Tasdiqlash holati: Tasdiqlanmagan
- Jalb etish (ER): Auditoriya o‘rtacha 7.92% darajada jalb etiladi. Nashrdan keyingi dastlabki 24 soatda kontent odatda umumiy obunachilar sonining 4.34% ini tashkil etuvchi reaksiyalarni to‘playdi.
- Post qamrovi: Har bir post o‘rtacha 847 marta ko‘riladi; birinchi sutkada odatda 464 ta ko‘rish yig‘iladi.
- Reaksiyalar va o‘zaro ta’sir: Auditoriya faol: har bir postga o‘rtacha 1 ta reaksiya keladi.
- Tematik yo‘nalishlar: Kontent javascript, браузер, html, css, видимость kabi asosiy mavzularga jamlangan.
📝 Tavsif va kontent siyosati
Muallif resursni shaxsiy fikrni ifoda etish maydoni sifatida ta’riflaydi:
“Канал для подготовки к собеседованиям по фронтенду
Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront
Купить рекламу: https://telega.in/c/frontendinterview
Канал в реестре РКН:
https://rknn.link/su”
Yuqori yangilanish chastotasi (oxirgi ma’lumot 24 Iyul, 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.
10 696
Obunachilar
-424 soatlar
-277 kunlar
-10330 kunlar
Postlar arxiv
Ищу помощницу по дизайну интерьеров.
Пост для тех, кто хочет работать удаленно, занимаясь творческой профессией.
Работа заключается в создании уютных пространств и стильных интерьеров. Можно работать из дома за ноутбуком.
- Для работы достаточно несколько часов в день, вам не придется сидеть в офисе с 9 до 17.
- Высшее образование не требуется, всему научу сама.
- На обучение достаточно 1-2 часа в день, так как вся информация структурирована и очень доступно изложена.
Я помогу вам разобраться в профессии дизайнер интерьеров, объясню с чего начать и покажу весь процесс работы от и до. Дам первых клиентов и скрипты продаж.
Учеников много не набираю, чтобы была возможность уделить внимание каждому.
Успевайте зарегистрироваться, пока места еще есть.
Начать обучение можно по ссылке «Зарегистрироваться».
Зарегистрироваться
#реклама
udesignschool.ru
О рекламодателе
Что такое ErrorBoundary в React?
Error boundaries- это компоненты, которые отлавливают ошибки JavaScript, возникающие в любом дочернем компоненте, сообщают об этих ошибках и отображают резервный UI.
Классовый компонент становится предохранителем при определении в нем нового метода жизненного цикла componentDidCatch(error, info) или static getDerivedStateFromError() :
class ErrorBoundary extends React.Component {
constructor(props) {
super(props)
this.state = { hasError: false }
}
componentDidCatch(error, info) {
// Вы также можете отправлять ошибки в специальный сервис по их обработке
logErrorToMyService(error, info)
}
static getDerivedStateFromError(error) {
// Обновляем состояние, чтобы при следующем рендеринге использовался запасной UI
return { hasError: true };
}
render() {
if (this.state.hasError) {
// Вы можете рендерить любой резервный интерфейс
return <h1>{'Что-то пошло не так.'}</h1>
}
return this.props.children
}
}
После этого, предохранитель используется как обычный компонент:
<ErrorBoundary>
<MyWidget />
</ErrorBoundary>
👉 @frontendInterviewТребуются парни и девушки в возрасте 19–40 лет, желающие работать в сфере IT. Опыт в программировании не нужен.
С 6 по 12 декабря проводим бесплатный онлайн-интенсив по Frontend-разработке, где будем учить, как разрабатывать сайты и веб-приложения.
За эти 7 дней обучения ты:
1. Создашь полноценный веб-сайт на HTML и CSS;
2. Оживишь страницу с помощью JavaScript;
3. Используешь фронтенд-фреймворк Angular;
4. Подключишь Backend и загрузишь сайт на хостинг;
5. Получишь советы по доработке своего проекта;
6. Узнаешь сколько можно зарабатывать и как работать;
7. Получишь в подарок чек-лист «45 мест для поиска работы».
А главное, ты увидишь, что разрабатывать сайты и приложения не так сложно, как кажется. И поймёшь, как тебе развиваться в этой профессии, чтобы уже в следующем году зарабатывать от 1000$ на вёрстке сайтов.
👉 Проскочить на интенсив бесплатно
У button font-size: 16px. Как можно установить значение 8px для свойства padding в единицах измерения em?
erid: LjN8KKVxp
👋Уважаемая публика, не проходите мимо! Только у нас на вебинаре вы узнаете то, чего ещё никогда не знали!
🔥Проникнитесь невероятными лайфхаками в жанре team lead survival на бесплатном уроке «Agile Circus: как выжить в цирке гибкой разработки ПО»: регистрация
На занятии обсудим:
— зачем вообще нужны гибкие подходы к организации процессов разработки (и поддержки) ПО и можно ли обойтись без них.
— как правильно выбирать способ организации разработки программного обеспечения.
— что делать в ситуации, когда одна команда не справляется.
Вебинар будет полезен тимлидам, руководителям разработки, проектным и продуктовым менеджерам, которые недовольны текущими процессами в своей компании.
👉Понравился урок — берите полный курс «Team Lead разработки», его можно пройти по скидке Чёрной пятницы, и даже в рассрочку.
Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.
В чем разница между interface и type в TypeScript?
interface X {
a: number
b: string
}
type X = {
a: number
b: string
};
В ряде случаев они взаимозаменяемы. Однако, различия присутствуют:
- с типами можно использовать пересечение и объединение
- интерфейс можно расширять, строя цепочку наследований
- интерфейс может быть использован для описания класса
- интерфейс может быть использован для описания функции
- в случае, если в одной области видимости объявлено несколько одноимённых интерфейсов, они будут объединены в один
- если в нескольких одноимённых интерфейсах будут описаны одноимённые методы с разными сигнатурами, они будут расценены, как описание перегрузки.
В целом, можно сказать, что ключевое слово type больше подходит для типизации примитивных значений или объектных значений, не являющихся звеньями сложной цепочки. interface же необходим и удобен при осознанном построении объектно-ориентированной архитектуры.
👉 @frontendInterviewAlternating Loops
Создайте функцию, которая принимает некоторое количество массивов. Из каждого массива поочередно берутся элементы и записываются в новый массив.
Примеры:
combine(['a', 'b', 'c'], [1, 2, 3])
// ['a', 1, 'b', 2, 'c', 3]
combine(['a', 'b', 'c'], [1, 2, 3, 4, 5])
// ['a', 1, 'b', 2, 'c', 3, 4, 5]
combine(['a', 'b', 'c'], [1, 2, 3, 4, 5], [6, 7], [8])
// ['a', 1, 6, 8, 'b', 2, 7, 'c', 3, 4, 5]
👉 @frontendInterviewПроектирование гибких программ.pdf18.10 MB
Проектирование гибких программ. Как не загнать себя в угол
Бывает так, что при написании программы вы попадаете в тупик. Возможно, это потому, что вы, как оказалось, не учли некоторые особенности исходной задачи. Однако до обидного часто дело в том, что на начальной стадии проектирования вы приняли какое-то решение, выбрали какую-то структуру данных или способ организации кода, который затем оказался слишком ограниченным, а теперь его трудно заменить.
Эта книга служит мастер-классом по стратегиям организации программ, которые позволяют сохранить гибкость. В каждой главе можно видеть, как два эксперта демонстрируют тот или иной передовой метод, шаг за шагом разрабатывая работающую подсистему, объясняют на ходу стратегию своей работы и время от времени указывают на подводный камень или способ обойти то или иное ограничение.
👉 @frontendInterview
Как тестировать React-приложение?
- Использовать фреймворк для тестирования, такой как Jest, для запуска и организации тестов.
- Использовать библиотеку для моков, такую как Sinon.js, для мокирования зависимостей в тестах.
- Написать модульные тесты для отдельных компонентов, чтобы убедиться, что они работают правильно изолированно.
- Написать интеграционные тесты, чтобы проверить взаимодействие между компонентами.
- Использовать snapshot-тестирование, чтобы гарантировать результат отрисовки компонента.
- Использовать разработку через тестирование (TDD) для написания тестов перед реализацией функций.
- Написать e2e тесты для тестирования приложения в целом, имитируя взаимодействие пользователя в реальном браузере.
👉 @frontendInterview
Что представляет собой React.Suspense?
Какая ширина у элемента span?
Как быстро собрать такую форму оплаты? Легко!
Фронтенд гайд, это канал для верстальщиков, в котором публикуют:
✓ Готовый код
✓ Макеты для верстки
✓ Тесты на знание кода
Ускорь работу над своим проектом!
Как оптимизировать React-приложение?
- избавиться от причин лишних ререндеров
- вынести тяжелые вычисления в отдельный поток (Web Workers)
- использовать useMemo, useCallback, React.memo для мемоизации вычислений
- избавиться от утечек памяти
- использовать атрибут key в списках
- кэшировать негорячие вычисления
- кэшировать ответы запросов сервера на N минут/секунд (применимо не всегда)
👉 @frontendInterview
Будет ли отступ между элементом .child и верхней границей родительского элемента в следующем коде?
Что такое reducer?
reducer - это функция-преобразователь, принимающая на вход текущее состояние и идентификатор действия, которое необходимо совершить над этим состоянием.
Иными словами, reducer возвращает модифицированную требуемым образом версию переданного ему состояния.
Параметром, идентифицирующим действие, обычно выступает объект с полями type (название команды для изменения состояния) и payload (полезная нагрузка - данные, необходимые для модификации).
Эта простая концепция лежит в основе большой части программных решений в рамках React.js для управления состоянием. Она может быть реализована как с использованием хука useReducer, экспортируемого из React, так и в рамках, к примеру, Redux, где она является более развитой.
Вот так может выглядеть реализация функции-преобразователя (reducer):
export default function reducer(state, action) {
switch (action.type) {
case 'add':
return {
...state,
sum: state.sum + action.payload,
}
default: {
throw new Error(`Unknown action: ${action.type}`)
}
}
}
А вот так её использование:
import { useReducer } from 'react'
import reducer from './reducer'
const MyComponent = () => {
const [state, dispatch] = useReducer(reducer, sum: 0)
return (
<div>{state.sum}</div>
)
}
Хук useReducer принимает на вход reducer и начальное состояние, а возвращает текущее состояние и функцию dispatch для обращения к reducer.
👉 @frontendInterview