Frontend Interview - собеседования по Javascript / Html / Css
Открыть в Telegram
Канал для подготовки к собеседованиям по фронтенду Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront Купить рекламу: https://telega.in/c/frontendinterview Канал в реестре РКН: https://rknn.link/su
Больше
Сеть:📈 Аналитический обзор Telegram-канала 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(), поскольку это может привести к бесконечному циклу.