Frontend Interview - собеседования по Javascript / Html / Css

Kanalga Telegram’da o‘tish

Канал для подготовки к собеседованиям по фронтенду Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront Купить рекламу: https://telega.in/c/frontendinterview Канал в реестре РКН: https://rknn.link/su

Ko'proq ko'rsatish

Tarmoq:Senior Frontend - javascript, html, css Rossiya60 392 Texnologiyalar & Aralashmalar11 409...

📈 Telegram kanali Frontend Interview - собеседования по Javascript / Html / Css analitikasi

Frontend Interview - собеседования по Javascript / Html / Css (@frontendinterview) Rus til segmentidagi kanali faol ishtirokchi. Hozirda hamjamiyat 10 731 obunachidan iborat bo'lib, Texnologiyalar & Aralashmalar toifasida 11 409-o'rinni va Rossiya mintaqasida 60 392-o'rinni egallagan.

📊 Auditoriya ko‘rsatkichlari va dinamika

невідомо sanasidan buyon loyiha tez o‘sib, 10 731 obunachiga ega bo‘ldi.

13 Iyul, 2026 dagi oxirgi ma’lumotlarga ko‘ra kanal barqaror faollikka ega. Oxirgi 30 kunda obunachilar soni -104 ga, so‘nggi 24 soatda esa -8 ga o‘zgardi va umumiy qamrov yuqori darajada qolmoqda.

Tasdiqlash holati: Tasdiqlanmagan
Jalb etish (ER): Auditoriya o‘rtacha 8.00% darajada jalb etiladi. Nashrdan keyingi dastlabki 24 soatda kontent odatda umumiy obunachilar sonining 4.14% ini tashkil etuvchi reaksiyalarni to‘playdi.
Post qamrovi: Har bir post o‘rtacha 859 marta ko‘riladi; birinchi sutkada odatda 444 ta ko‘rish yig‘iladi.
Reaksiyalar va o‘zaro ta’sir: Auditoriya faol: har bir postga o‘rtacha 2 ta reaksiya keladi.
Tematik yo‘nalishlar: Kontent javascript, браузер, html, css, видимость kabi asosiy mavzularga jamlangan.

📝 Tavsif va kontent siyosati

Muallif resursni shaxsiy fikrni ifoda etish maydoni sifatida ta’riflaydi:
“Канал для подготовки к собеседованиям по фронтенду Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront Купить рекламу: https://telega.in/c/frontendinterview Канал в реестре РКН: https://rknn.link/su”

Yuqori yangilanish chastotasi (oxirgi ma’lumot 14 Iyul, 2026 da olingan) sababli kanal doimo dolzarb va katta qamrovli bo‘lib qoladi. Analitika auditoriya kontent bilan faol hamkorlik qilishini, uni Texnologiyalar & Aralashmalar toifasidagi muhim ta’sir nuqtasiga aylantirishini ko‘rsatadi.

10 731

Obunachilar

-824 soatlar

-297 kunlar

-10430 kunlar

859

Post ko'rishlar

~ 44424 soatlar

~ 51248 soatlar

8.00%

Muloqot nisbati

Ma'lumot yo'q

Kuniga postlar

Ads index

beta

Postlar arxiv

10 731

Определите разницу между компонентами с состоянием и компонентами без состояния Компоненты с состоянием и без называются по разному: Компоненты-контейнеры и компоненты-представители Умные и глупые компоненты Разница между ними, как следует из названия, состоит в том, что одни компоненты имеют состояние, а другие нет. Это означает, что компоненты с состоянием следят за изменением данных, а компоненты без состояния рендерят то, что передается им с помощью пропов, т.е. они всегда рендерят одно и тоже. Пример Stateful/Container/Smart компонент:

 class Main extends Component {
  constructor() {
    super()
    this.state = {
      books: []
    }
  }
  render() {
    <BooksList books={this.state.books} />
  }
 }

Пример Stateless/Presentational/Dumb компонент

 const BooksList = ({ books }) => {
  return (
    <ul>
      {books.map(book => <li key={book.id}>{book.name}</li>})}
    </ul>
  )
 }

10 731

Обязательно ли использовать JSX при написании приложения на React?

Anonymous voting

10 731

Сортировка по последней букве Вам дана строка, состоящая из слов. Вам нужно отсортировать слова по последней букве. Если в двух словах одинаковая последняя буква, то они должны выводиться в исходном порядке. Примеры:

 last('man i need a taxi up to ubud')
 //['a', 'need', 'ubud', 'i', 'taxi', 'man', 'to', 'up']

last('what time are we climbing up the volcano')
 //['time', 'are', 'we', 'the', 'climbing', 'volcano', 'up', 'what'])

last('take me to semynak')
 //['take', 'me', 'semynak', 'to']

10 731

Изучаете HTML & CSS и задаетесь вопросом, как сделать процесс разработки более комфортным? Приходите на бесплатный вебинар от GeekBrains, мы поговорим о том, как повысить скорость и качество. Рассмотрим: ⁃ Методологии названия классов ⁃ Валидаторы ⁃ Препроцессоры ⁃ Необходимые расширения ⁃ Плагины Будем говорить о преимуществах и минусах использования, поэтому после вебинара вы сможете углубиться в технологии, подходящие под ваши задачи. Записывайтесь тут https://geekbrains.ru/link/xc9-Bx

10 731

В чем преимущество виртуального DOM? При добавлении новых элементов в UI создается виртуальное представление дерева элементов. Каждый элемент является узлом этого дерева. При изменении состояния любого из этих элементов создается новый виртуальный DOM. Новое представление сравнивается со старым, определяется разница. После этого вычисляется наиболее эффективный способ применения изменений к браузерному DOM. Это позволяет минимизировать количество операций обновления, что, в свою очередь, снижает "цену" обновления реального DOM. Преимущества виртуального DOM 1. Процесс обновления является сбалансированным и оптимизированным 2. Связывание данных в React предполагает соблюдение некоторых правил для создания динамичных приложений 3. Идеально подходит для "mobile first" приложений 4. Умный рендеринг. Использование эвристических методов сравнения позволяет минимизировать количество операций обновления

10 731

Что выведется в консоль?

Anonymous voting

10 731

В чем разница между браузерным и виртуальным DOM? Браузерный DOM DOM расшифровывается как "Document Object Model" (объектная модель документа). Браузерный DOM предоставляет интерфейс (API) для работы с узлами. Данный интерфейс включает методы querySelector(), textContent(), appendChild(), removeChild() и т.д. DOM представляет собой древовидную структуру данных. Поэтому изменения и обновления DOM являются достаточно быстрыми. Однако, после обновления элемент и его потомки должны быть повторно отрисованы для обновления слоя представления. Именно это делает DOM медленным. Виртуальный DOM Виртуальный DOM - это объектное представление DOM, хранимое в оперативной памяти. При каждом изменении состояния приложения обновляется виртуальный, а не браузерный DOM. Виртуальный DOM - это абстракция браузерного DOM. Он является легковесным и не зависит от специфичных для браузера деталей реализации. Поскольку браузерный DOM сам по себе является абстракцией, правильнее будет сказать, что виртуальный DOM - это абстракция абстракции.

10 731

🔥 Новости от команды Лектрума🔥 18 марта в 19:30 по Киеву и 20:30 по Москве пройдёт вебинар для новичков на тему «Старт в веб-разработку: JavaScript». Программа: 🔸 Зачем нужен JavaScript? 🔸 План развития в разработке на основе JS. 🔸 Как эффективно стартовать новичку в разработку? 🔸 Требования к начинающим разработчикам. 🔸 QA с экспертом: разберём вопросы, которые беспокоят новичков. Приглашаем на вебинар: 🤓 Верстальщиков, которые хотят продвигаться в веб-разработке. 🤓 Новичков-самоучек, которые запутались в своём пути. Нажимайте на кнопку для регистрации ⬇️ и занимайте места.

10 731

Эффективный TypeScript 2020.pdf17.25 MB

10 731

Эффективный TypeScript Эффективный TypeScript необходим тем, кто уже имеет опыт работы с JavaScript. Цель этой книги — не научить пользоваться инструментами, а помочь повысить профессиональный уровень. TypeScript представляет собой не просто систему типов, а набор служб языка, удобных в использовании. Он повышает безопасность разработки в JavaScript, делает работу увлекательнее и проще.

10 731

Двойная сортировка Вам дан массив, состоящий из чисел и слов. Вам нужно написать функцию, которая вернет отсортированный массив, в котором сначала идут числа по возрастанию, а затем слова в алфавитном порядке. Примеры:

 dbSort(["Banana", "Orange", "Apple", "Mango", 0, 2, 2])
 //[0,2,2,"Apple","Banana","Mango","Orange"]);

 dbSort(["C", "W", "W", "W", 1, 2, 0])
 //[0,1,2,"C","W","W","W"]);

10 731

Паттерны. 2020.pdf6.37 MB

10 731

Паттерны объектно-ориентированного проектирования В предлагаемой книге описываются простые и изящные решения типичных задач, возникающих в объектно-ориентированном проектировании.

10 731

Что выведется в консоль?

Anonymous voting

10 731

Что произойдет при вызове setState() в конструкторе? При использовании setState() происходит присвоение значения объекту состояния и повторный рендеринг компонента и всех его потомков. При инициализации экземпляра с помощью конструктора, компонент еще не отрисован. Поэтому у нас нет необходимости в его перерисовке. В конструкторе объекту состояния присваивается начальное значение с помощью this.state = {}. Для обновления состояния используется this.setState(). Пример

 import React, { Component } from 'react'

 class Food extends Component {
   constructor(props) {
     super(props)

     this.state = {
       fruits: ['яблоко', 'апельсин'],
       count: 0
     }
   }
   render() {
     return (
       <div className = "container">
         <h2> Привет!!!</h2>
         <p> У меня есть {this.state.count} фруктов</p>
       </div>
     )
   }
 }

10 731

Кто зимой постит селфи с ноутбуком под пальмой? Кто работает в удобное время, положив ноги на стол и не вылезая из пижамы? Кто сам решает, за какие проекты браться, а от каких отказаться? Правильно: фронтенд-разработчик. И не стоит ему завидовать — лучше им стать. И сделать это лучше сейчас, пока порог входа в профессию не стал намного выше. Несколько лет назад начинающему фронтендеру было достаточно знать HTML, CSS и совсем чуть-чуть JavaScript. Сегодня junior-разработчику нужен хороший JS и хотя бы минимальные представления о каком-нибудь фреймворке. А каким будет порог входа еще через 5 лет? Впрочем, неважно: если вы начнете учиться сейчас, через 5 лет сами будете знать, какие инструменты нужны — и сможете научить этому джунов. Чтобы получить действительно актуальные знания и успешно стартовать в профессии, приходите на курс «Frontend-разработчик» в SkillFactory: получите нужные навыки и отточите их на тренажерах и реальных задачах, составите внушительное портфолио и прокачаете алгоритмическое мышление. Через 7 месяцев вы — фронтенд-разработчик! Готовы научиться делать сайты и брать первые заказы? Тогда вперед — > https://clc.am/n7oabA Cкидка 45% на курс по промокоду INTERVIEW!

10 731

Можно ли сделать все буквы текстового элемента заглавными, используя только CSS?

Anonymous voting

10 731

Что вы понимаете под ссылками (refs)? Refs предоставляют доступ к узлам DOM или элементам React, созданным с помощью метода render(). Рефы являются ссылками на DOM-элементы или классовые компоненты из родительского компонента. Refs также предоставляют возможность связывания элементов дочернего компонента с родительским в форме передачи (перенаправления) ссылок (ref forwarding). Пример

 class App extends React.Component {
     constructor(props) {
       super(props)
       // создаем ссылку на DOM-элемент
       this.textInput = React.createRef()
       this.state = {
         value: ''
       }
     }

   // обновляем состояние с помощью ссылки
   handleSubmit = e => {
     e.preventDefault()
     this.setState({ value: this.textInput.current.value})
   }

   render() {
     return (
       <div>
         <h1>React Ref - createRef</h1>
          {/* данное значение будет обновлено */}
         <h3>Значение: {this.state.value}</h3>
         <form onSubmit={this.handleSubmit}>
           {/* добавляем ссылку к <input> для обновления <h3> его значением */}
           <input type="text" ref={this.textInput} />
           <button>Отправить</button>
         </form>
       </div>
     )
   }
 }

Случаи использования ссылок 1. Установка фокуса, выделение текста или воспроизведение медиа 2. Запуск императивной анимации 3. Интеграция со сторонними библиотеками для работы с DOM