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(), поскольку это может привести к бесконечному циклу.