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 731 مشتركاً، محتلاً المرتبة 11 409 في فئة التكنولوجيات والتطبيقات والمرتبة 60 392 في منطقة روسيا.
📊 مؤشرات الجمهور والحراك
منذ تأسيسه في невідомо، حقق المشروع نمواً سريعاً وجمع 10 731 مشتركاً.
بحسب آخر البيانات بتاريخ 13 يوليو, 2026، تحافظ القناة على نشاط مستقر. خلال آخر 30 يوماً تغيّر عدد الأعضاء بمقدار -104، وفي آخر 24 ساعة بمقدار -8، مع بقاء الوصول العام مرتفعاً.
- حالة التحقق: غير موثّقة
- معدل التفاعل (ER): يبلغ متوسط تفاعل الجمهور 8.00%. وخلال أول 24 ساعة من النشر يحصد المحتوى عادةً 4.14% من ردود الفعل نسبةً إلى إجمالي المشتركين.
- وصول المنشورات: يحصل كل منشور على متوسط 859 مشاهدة. وخلال اليوم الأول يجمع عادةً 444 مشاهدة.
- التفاعلات والاستجابة: يتفاعل الجمهور بانتظام؛ متوسط التفاعلات لكل منشور يبلغ 2.
- الاهتمامات الموضوعية: يركز المحتوى على مواضيع رئيسية مثل javascript, браузер, html, css, видимость.
📝 الوصف وسياسة المحتوى
يصف المؤلف القناة بأنها مساحة للتعبير عن الآراء الذاتية:
“Канал для подготовки к собеседованиям по фронтенду
Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront
Купить рекламу: https://telega.in/c/frontendinterview
Канал в реестре РКН:
https://rknn.link/su”
بفضل وتيرة التحديث المرتفعة (أحدث البيانات بتاريخ 14 يوليو, 2026) تحافظ القناة على حداثتها ومستوى وصول مرتفع. وتُظهر التحليلات تفاعلاً نشطاً من الجمهور، ما يجعلها نقطة تأثير مهمة ضمن فئة التكنولوجيات والتطبيقات.
10 731
المشتركون
-824 ساعات
-297 أيام
-10430 أيام
أرشيف المشاركات
Посмотрите, как пишут код уровня Senior Frontend в Google или Uber
На собеседованиях и среди коллег обсуждают не работоспособность вашей программы, а то, как она написана.
Чтобы ваш код выглядел достойно и опрятно, опытные FrontEnd-разработчики создали канал @seniorFront.
— примеры лучших решений во Frontend-разработке
— тесты на проверку знаний, чтобы сравнить свой уровень с уровнем конкурентов
— статьи по JS, HTML, CSS за 2020
В каком проекте примените навыки, полученные после подписки на @seniorFront?
Что выведется в консоль?
Что такое useContext()?
React Context API позволяет легко получать данные на разных уровнях дерева компонентов без передачи данных через props.
import React from "react"
import ReactDOM from "react-dom"
// создаем контекст
const NumberContext = React.createContext()
// он возвращает объект с двумя значениями
// { Provider, Consumer }
function App() {
// используем провайдер для предоставления потомкам
// доступа к данным, содержащимся в контексте
return (
<NumberContext.Provider value={10}>
<div>
<Display />
</div>
</NumberContext.Provider>
)
}
function Display() {
const value = useContext(NumberContext)
return <div>Ответ: {value}.</div>
}Какое CSS свойство нужно использовать, чтобы сделать текст элемента span подчеркнутым?
Наибольшее и наименьшее
Вам дана строка, состоящая из цифр. Ваша задача - написать функцию, которая вернет наибольшее и наименьшее числа.
Примеры:
highAndLow("1 2 3 4 5");
// return "5 1"
highAndLow("1 2 -3 4 5");
// return "5 -3"
highAndLow("1 9 3 4 -5");
// return "9 -5"Что такое useReducer()?
useReducer() - это хук, принимающий функцию-редуктор и начальное состояние приложение в качестве аргументов и возвращающий текущее состояние и диспетчер (dispatcher) для отправки (dispatch) операций.
Несмотря на то, что useState() - это базовый хук, а useReducer() - продвинутый, на самом деле useState() реализован с помощью useReducer(). Это означает, что useReducer() - это примитив, который может использоваться во всех случаях использования useState(). Редуктор - мощный инструмент, который может использоваться в самых разных сценариях:
Пример
import React, { useReducer } from 'react'
const initialState = 0
const reducer = (state, action) => {
switch (action) {
case 'increment': return state + 1
case 'decrement': return state - 1
case 'reset': return 0
default: return state
}
}
const ReducerExample = () => {
const [count, dispatch] = useReducer(reducer, initialState)
return (
<div>
{count}
<button onClick={() => dispatch('increment')}>+1</button>
<button onClick={() => dispatch('decrement')}>-1</button>
<button onClick={() => dispatch('reset')}>reset</button>
</div>
)
}
export default ReducerExample
Сначала мы определяем начальное состояние и редуктор. Затем передаем их в useReducer(). Хук возвращает текущее значение состояния и диспетчер, который используется для обновления состояния. Когда пользователь нажимает на кнопку, происходит отправка определенной операции в редуктор, который обновляет счетчик на основе операции. Мы может определять столько операций, сколько требуется нашему приложению.Что выведется в консоль?
Что такое useState()?
useState() - это хук, позволяющий функциональным компонентам иметь состояние. Раньше это было возможно только в классовых компонентах.
import React, { useState } from 'react'
const App = () => {
const [count, setCount] = React.useState(0)
const handleIncrease = () => {
setCount(count + 1)
}
const handleDecrease = () => {
setCount(count - 1)
}
return (
<div>
Значение счетчика: {count}
<hr />
<div>
<button type="button" onClick={handleIncrease}>
Увеличить
</button>
<button type="button" onClick={handleDecrease}>
Уменьшить
</button>
</div>
</div>
)
}
useState() принимает единственный аргумент - значение начального состояния. В примере таким значением является 0. Хук возвращает массив из двух элементов: count и setCount. Вы можете думать об этих элементах как о паре геттер/сеттер.
Геттер позволяет получать текущее значение состояния, а сеттер - устанавливать новое значение, т.е. обновлять состояние. На самом деле, эти элементы можно называть как угодно (поскольку мы имеем дело с деструктуризацией массива). Такой способ именования является распространенным соглашением и отражает суть возвращаемых useState() значений.Объектно_ориентированный_подход_2020_Вайсфельд_.pdf5.43 MB
Мэтт Вайсфельд: Объектно-ориентированный подход
Эта книга написана разработчиком для разработчиков, и позволяет выбрать оптимальные подходы для решения конкретных задач. Вы узнаете, как правильно применять наследование и композицию, поймете разницу между агрегацией и ассоциацией и перестанете путать интерфейс и реализацию.
Технологии программирования непрерывно меняются и развиваются, но объектно-ориентированные концепции не зависят от платформы и остаются неизменно эффективными. В этом издании основное внимание уделяется фундаментальным основам ООП: паттернам проектирования, зависимостям и принципам SOLID, которые сделают ваш код понятным, гибким и хорошо сопровождаемым.
8 марта — день, который вдохнёт в тебя уверенность! Старт пятидневного марафона по вёрстке 💥
Специально для тех, кто хочет знать наверняка, подходит ли ему профессия программиста мы создали онлайн марафон.
Всего 5 дней, которые через практику дадут понимание, быть ли тебе программистом. Пора ли менять свою жизнь? Начни 8 марта и к 13 уже будешь знать ответ на этот вопрос!
Приходи на онлайн марафон, если ты:
🔳 задумываешься сменить профессию и стать веб-разработчиком;
🔳 боишься, что разработка — это сложно и не готов брать дорогой и долгий курс;
🔳 хочешь разобраться в HTML И CSS на практике.
По итогам марафона ты:
🔲 создашь и разместишь в сети собственную веб-страницу с интерактивными элементами;
🔲 научишься работать с инструментами веб-разработки: Visual Studio Code и Figma;
🔲 поймёшь, как работать с языками HTML и CSS;
❗️И самое главное — ты получишь подробный план освоения профессии Frontend-разработчика!
Не упусти свою возможность и регистрируйся по ссылке: https://s.algoritmika.org/1rebfcn
Старый switcheroo
Напишите функцию vowel2index(str), которая принимает строку и заменяет все гласные на их номера в строке.
Примеры:
vowel2index('this is my string')
// 'th3s 6s my str15ng'
vowel2index('Codewars is the best site in the world')
// 'C2d4w6rs 10s th15 b18st s23t25 27n th32 w35rld'
vowel2index('')
//''Закас_Н_ECMAScript_6_для_разработчиков.pdf10.27 MB
ECMAScript 6 для разработчиков Николас Закас
Прочитав эту книгу вы узнаете о том чем полезны итераторы и генераторы, чем ссылочные функции отличаются от обычных, какие дополнительные опции позволяют работать с данными, о наследовании типов, об асинхронном программировании, о том как модули меняют способ организации кода и многое другое.
Что выведется в консоль?
Какой второй опциональный аргумент может быть передан setState() и в чем его назначение?
Таким аргументом является коллбек, вызываемый после обновления состояния и повторного рендеринга компонента.
Функция setState() является асинхронной, поэтому она принимает коллбек в качестве второго параметра. Как правило, лучше использовать другой метод жизненного цикла, чем полагаться на этот коллбек, но не лишним будет знать о такой возможности.
this.setState(
{ username: 'Alex' },
() => console.log('Обновление состояние завершено и компонент повторно отрисован.')
)
setState() всегда влечет за собой повторный рендеринг, пока shouldComponentUpdate() не вернет false. Во избежание лишних рендерингов, вызывайте setState() только когда новое состояние отличается от предыдущего. Также избегайте вызова setState() в таких методах жизненного цикла, как componentDidUpdate(), поскольку это может привести к бесконечному циклу.