Frontend Interview - собеседования по Javascript / Html / Css
الذهاب إلى القناة على Telegram
Канал для подготовки к собеседованиям по фронтенду Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront Купить рекламу: https://telega.in/c/frontendinterview Канал в реестре РКН: https://rknn.link/su
إظهار المزيد
الشبكة:📈 نظرة تحليلية على قناة تيليجرام Frontend Interview - собеседования по Javascript / Html / Css
تُعد قناة Frontend Interview - собеседования по Javascript / Html / Css (@frontendinterview) في القطاع اللغوي الروسية لاعباً نشطاً. يضم المجتمع حالياً 10 737 مشتركاً، محتلاً المرتبة 11 405 في فئة التكنولوجيات والتطبيقات والمرتبة 60 354 في منطقة روسيا.
📊 مؤشرات الجمهور والحراك
منذ تأسيسه في невідомо، حقق المشروع نمواً سريعاً وجمع 10 737 مشتركاً.
بحسب آخر البيانات بتاريخ 12 يوليو, 2026، تحافظ القناة على نشاط مستقر. خلال آخر 30 يوماً تغيّر عدد الأعضاء بمقدار -96، وفي آخر 24 ساعة بمقدار -3، مع بقاء الوصول العام مرتفعاً.
- حالة التحقق: غير موثّقة
- معدل التفاعل (ER): يبلغ متوسط تفاعل الجمهور 6.80%. وخلال أول 24 ساعة من النشر يحصد المحتوى عادةً 4.13% من ردود الفعل نسبةً إلى إجمالي المشتركين.
- وصول المنشورات: يحصل كل منشور على متوسط 731 مشاهدة. وخلال اليوم الأول يجمع عادةً 444 مشاهدة.
- التفاعلات والاستجابة: يتفاعل الجمهور بانتظام؛ متوسط التفاعلات لكل منشور يبلغ 2.
- الاهتمامات الموضوعية: يركز المحتوى على مواضيع رئيسية مثل javascript, браузер, html, css, видимость.
📝 الوصف وسياسة المحتوى
يصف المؤلف القناة بأنها مساحة للتعبير عن الآراء الذاتية:
“Канал для подготовки к собеседованиям по фронтенду
Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront
Купить рекламу: https://telega.in/c/frontendinterview
Канал в реестре РКН:
https://rknn.link/su”
بفضل وتيرة التحديث المرتفعة (أحدث البيانات بتاريخ 13 يوليو, 2026) تحافظ القناة على حداثتها ومستوى وصول مرتفع. وتُظهر التحليلات تفاعلاً نشطاً من الجمهور، ما يجعلها نقطة تأثير مهمة ضمن فئة التكنولوجيات والتطبيقات.
10 737
المشتركون
-324 ساعات
-247 أيام
-9630 أيام
أرشيف المشاركات
Назовите популярные решения для работы с анимацией в React.
ReactCSSTransitionGroup - это высокоуровневое API, основанное на ReactTransitionGroup, предоставляющее легкий способ выполнения CSS-переходов и анимации при монтировании компонента в DOM и удалении из него. Он содержит 4 компонента, отображающих переходы компонента из одного состояния в другое с помощью декларативного API:
1. Transition
2. CSSTransition
3. SwitchTransition
4. TransitionGroup
Пример
import ReactCSSTransitionGroup from 'react-transition-group'
class TodoList extends React.Component {
constructor(props) {
super(props)
this.state = {items: ['привет', 'народ', 'нажми', 'на меня']}
this.handleAdd = this.handleAdd.bind(this)
}
handleAdd() {
const newItems = this.state.items.concat([
prompt('Введите текст')
])
this.setState({items: newItems})
}
handleRemove(i) {
const newItems = this.state.items.slice()
newItems.splice(i, 1)
this.setState({items: newItems})
}
render() {
const items = this.state.items.map((item, i) => (
<div key={item} onClick={() => this.handleRemove(i)}>
{item}
</div>
))
return (
<div>
<button onClick={this.handleAdd}>Добавить элемент</button>
<ReactCSSTransitionGroup
transitionName="example"
transitionEnterTimeout={500}
transitionLeaveTimeout={300}>
{items}
</ReactCSSTransitionGroup>
</div>
)
}
}
Здесь при добавлении нового элемента в ReactCSSTransitionGroup, ему сначала будет присвоен CSS-класс example-enter, затем example-enter-active. Это является соглашением, основанным на пропе transitionName.
👉 @frontendInterview
Вебинар «Конечные автоматы в реальной жизни»
Наставник курса «Мидл фронтенд-разработчик» Захар Овчаров расскажет про применение автоматов, а выпускник курса Антон Субботин попытается понять, зачем всё это нужно и как применять.
Что будет на вебинаре:
1. Поговорим про абстрактные машины, не существующие в реальности. Вы увидите, как на их основе строятся алгоритмы решения широкого круга задач.
2. Разберём на примерах, как работают конечные автоматы и где находят применение.
3. Построим небольшой конечный автомат для валидации и допуска строк пользовательского ввода.
4. Обсудим использование, сложности и ограничения конечных автоматов для решения прикладных повседневных задач.
Для кого?
— Для тех, кто хочет лучше разбираться в фундаментальных алгоритмах.
— Для разработчиков, которые воспринимают регулярные выражения как магию, а валидацию форм как ужасную проблему.
— Для начинающих разработчиков, которые хотят построить прочный фундамент знаний.
8 мая в 15:00 (Мск)
Какой из перечисленных шрифтов является моноширным?
Чем React Router отличается от обычной маршрутизации?
В React существует лишь один HTML-файл (index.html). Когда пользователь переходит по новому адресу, вместо получения данных от сервера, роутер возвращает тот или иной компонент. У пользователя создается впечатление перемещения между разными страницами, но, в действительности, компоненты приложения являются не более чем различными представлениями одной страницы.
Как React это делает?
Router "заглядывает" в History каждого компонента и при наличии изменений в истории, компонент перерисовывается. До Router 4 версии нам приходилось устанавливать значение History вручную. Однако, начиная с Router 4, большая часть работы, связанной с маршрутизацией, автоматически выполняется компонентом BrowserRouter (на стороне клиента).
👉 @frontendInterview
Команда разработчиков Яндекса создала канал по IT-обучению
Даже самый ленивый сможет легко и быстро обучиться программированию на Python с нуля. Видео, лайфхаки, фичи и советы для новичков — всё на этом канале.
Один канал вместо 1000 учебников, бесполезных туториалов на Ютубе и преподавателя за 15.000р/час — @PythonAA
Какое значение примет result?
Что такое перенаправление или передача ссылок (refs forwarding)?
Перенаправление ссылок - это техника, заключающаяся в передаче ref через компонент в один из его потомков. Данная техника часто используется в библиотеках компонентов и компонентах высшего порядка.
Мы можем передать ref в компонент с помощью функции React.forwardRef(). Перенаправление ссылок позволяет компоненту передавать полученную ссылку потомку.
На картинке у нас имеется компонент TextInput с потомком, представляющим собой поле для ввода текста. Мы начинаем с создания ссылки:
const inputRef = React.createRef()Затем мы передаем ссылку в
<TextInput ref={inputRef}/>, определяя ее как JSX-атрибут. React передает ref в функцию forwardRef() в качестве второго аргумента. Далее этот аргумент передается в <input ref={ref}/>. После этого значение DOM-узла становится доступным через inputRef.current.
Аналогичный функционал предоставляется хуком useRef().
👉 @frontendInterviewКакое значение примет result?
Перенос нулей в конец
Вам дан массив. Напишите функцию, которая переместит все нули в конец массива и вернет новый массив.
Пример:
moveZeros([false,1,0,1,2,0,1,3,"a"]) // returns[false,1,1,2,1,3,"a",0,0]
👉 @frontendInterviewПочему название компонента в React должно начинаться с большой буквы?
В JSX имена тегов в нижнем регистре считаются названиями HTML-тегов. Существует одно исключение: имена с точкой (аксессор свойства).
Когда название элемента начинается с маленькой буквы, это указывает на встроенный элемент, такой как div или span, передаваемые в React.createElement(). Названия элементов, начинающиеся с большой буквы, указывают на созданный (пользовательский) или импортированный компонент.
<component /> компилируется в React.createElement('component') (HTML-тег)
<Component /> компилируется в React.createElement(Component)
<obj.component /> компилируется в React.createElement(obj.component)
👉 @frontendInterviewЧто выведется в консоль?
FrontendQuiz задачи с собеседований - канал на котором публикуются задачки для фронтендщиков:
алгоритмы, регулярные выражения, вопросы с интервью, задачи для Junior Frontend и разбор их решения.
Проверь свои знания на @frontendquiz
В чем заключаются недостатки паттерна MVW?
MVW расшифровывается как Model-View-Whatever (Модель-Представление-Что угодно)
MVC - Model-View-Controller
MVP - Model-View-Presenter
MVVM - Model-View-ViewModel
MVW / MV* / MVx - Model-View-Whatever
HMVC - Hierarchical Model-View-Controller
MMV - Multiuse Model View
MVA - Model-View-Adapter
MVW легко управлять в простом приложении, содержащем несколько моделей/контроллеров. При росте приложения мы неизбежно сталкиваемся со следующими проблемами:
1. Модели/контроллеры взаимодействуют друг с другом (возможно, через сервисный слой). Эти модули меняют состояния друг друга. Чем больше модулей, тем легче утратить контроль над тем, кто изменил состояние того или иного модуля
2. Асинхронные сетевые запросы привносят элемент неожиданности в то, когда модель будет изменена или модифицирована. Представьте, что пользователь изменил UI до того, как пришел ответ на асинхронный запрос. Это приведет к "недетерменированному" статусу UI
3. Изменение состояния/модели добавляет еще один уровень сложности - мутацию. Требуется определить, каким образом изменяется состояние или модель, и какие инструменты необходимы для распознавания мутации
4. Представьте, каким сложным будет код совместно используемого приложения (такого как google docs, например), где множество данных меняется в режиме реального времени
5. Нет возможности отменять действия (возвращаться назад во времени) без добавления большого количества дополнительного кода
👉 @frontendInterview
Pro React 16 by Adam Freeman.pdf18.27 MB
Pro React 16 (2019)
Если вы являетесь фронтенд разработчиком и желаете вырасти как специалист на рынке разработки, вам не обойтись без знания современных фреймворков, таких как Angular, React и Vue. В настоящем руководстве рассматривается последняя на данный момент, 16-я версия, фреймворка, из которого вы узнаете про основные особенности и практики работы с ним
👉 @frontendInterview
Цифровизация
Вам дано неотрицательное число. Напишите функцию, которая обработает это число и вернет массив из отдельных цифр этого числа.
Примеры:
123 => [1,2,3]
1 => [1]
8675309 => [8,6,7,5,3,0,9]
👉 @frontendInterview