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، کانال فعالیت پایداری دارد. در ۳۰ روز گذشته تغییر اعضا برابر -104 و در ۲۴ ساعت گذشته برابر -8 بوده و همچنان دسترسی گستردهای حفظ شده است.
- وضعیت تأیید: تأیید نشده
- نرخ تعامل (ER): میانگین تعامل مخاطب 8.00% است و در ۲۴ ساعت نخست پس از انتشار، محتوا معمولاً 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(), поскольку это может привести к бесконечному циклу.