Frontend Interview - собеседования по Javascript / Html / Css
Open in Telegram
Канал для подготовки к собеседованиям по фронтенду Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront Купить рекламу: https://telega.in/c/frontendinterview Канал в реестре РКН: https://rknn.link/su
Show more
Network:📈 Analytical overview of Telegram channel Frontend Interview - собеседования по Javascript / Html / Css
Channel Frontend Interview - собеседования по Javascript / Html / Css (@frontendinterview) in the Russian language segment is an active participant. Currently, the community unites 10 731 subscribers, ranking 11 409 in the Technologies & Applications category and 60 392 in the Russia region.
📊 Audience metrics and dynamics
Since its creation on невідомо, the project has demonstrated rapid growth, gathering an audience of 10 731 subscribers.
According to the latest data from 13 July, 2026, the channel demonstrates stable activity. Although there has been a change in the number of participants by -104 over the last 30 days and by -8 over the last 24 hours, overall reach remains high.
- Verification status: Not verified
- Engagement rate (ER): The average audience engagement rate is 8.00%. Within the first 24 hours after publication, content typically collects 4.14% reactions from the total number of subscribers.
- Post reach: On average, each post receives 859 views. Within the first day, a publication typically gains 444 views.
- Reactions and interaction: The audience actively supports content: the average number of reactions per post is 2.
- Thematic interests: Content is focused on key topics such as javascript, браузер, html, css, видимость.
📝 Description and content policy
The author describes the resource as a platform for expressing subjective opinions:
“Канал для подготовки к собеседованиям по фронтенду
Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront
Купить рекламу: https://telega.in/c/frontendinterview
Канал в реестре РКН:
https://rknn.link/su”
Thanks to the high frequency of updates (latest data received on 14 July, 2026), the channel maintains relevance and a high level of publication reach. Analytics show that the audience actively interacts with content, making it an important point of influence in the Technologies & Applications category.
10 731
Subscribers
-824 hours
-297 days
-10430 days
Posts Archive
Посмотрите, как пишут код уровня 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(), поскольку это может привести к бесконечному циклу.