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

👉 @frontendInterview

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

​Как передавать параметры в обработчик событий или функцию обратного вызова в React? Для того, чтобы передать параметр в обработчик событий, можно обернуть его в стрелочную функцию:

 onClick={() => this.handleClick(id)} />

Это является эквивалентом вызова bind():

 onClick={this.handleClick.bind(this, id)} />

Пример const A = 65 // ASCII-код символа class Alphabet extends React.Component { constructor(props) { super(props) this.handleClick = this.handleClick.bind(this) this.state = { justClicked: null, letters: Array.from({length: 26}, (_, i) => String.fromCharCode(A + i)) } } handleClick(letter) { this.setState({ justClicked: letter }) } render() { return ( <div> Только что была нажата клавиша {this.state.justClicked} <ul> {this.state.letters.map(letter => <li key={letter} onClick={() => this.handleClick(letter)}> {letter} </li> )} </ul> </div> ) } } 👉 @frontendInterview

👉 @frontendInterview

Наибольшее и наименьшее Вам дана строка, состоящая из цифр, разделенных пробелами. Напишите функцию, которая обработает строку и вернет наибольшее и наименьшее число. Примеры: 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" 👉 @frontendInterview

Что представляют собой .map-файлы в TypeScript? Файлы с расширением .map хранят карты кода (source map), которые содержат данные о соответствии кода, написанного на TypeScript, JavaScript-коду, созданному на его основе. С этим файлами могут работать многие отладчики (например — Visual Studio и инструменты разработчика Chrome). Это позволяет, в ходе отладки, работать с исходным кодом программ на TypeScript, а не с их JS-эквивалентами. 👉 @frontendInterview

Хочешь углубленно изучить Frontend-разработку? Уже знаком с HTML и СSS, но не готов останавливаться на достигнутом? Тогда курс «Профессия Frontend-разработчик» как раз для тебя! Даже не имея нужных знаний, ты станешь junior-разработчиком всего за полгода. 👉 Все подробности по ссылке: https://clc.am/NhJE3g Быть frontend-разработчиком это: ➕ работать в перспективной и хорошо оплачиваемой сфере; ➕ участвовать в интересных проектах; ➕ строить карьеру; ➕ по желанию работать из любой точки мира. По итогам курса: ➕ за твоими плечами будет много часов практики; ➕ в голове будут структурированные знания; ➕ крутое портфолио; ➕ бессрочный доступ к системе обучения; ➕ индивидуальная проверка домашнего задания преподавателем и разбор ошибок; ➕ диплом новой востребованной профессии; ➕ гарантированное трудоустройство. После прохождения курса и выполнения всех дипломных работ ты получишь диплом frontend-разработчика и пополнишь свое резюме новыми и нужными навыками.

👉 @frontendInterview

​Как привязать функцию к экземпляру компонента в React? Существует несколько способов предоставить функции доступ к свойствам компонента, таким как props и state. Синтаксис полей класса

 class App extends Component {
   // обратите внимание: данный синтаксис является экспериментальным и пока не стандартизирован
   handleClick = () => {
     console.log('Произошло нажатие кнопки')
   }
   render() {
     return <button onClick={this.handleClick}>Нажми на меня</button>
   }
 }

Привязка в методе render()

 class App extends Component {
   handleClick() {
     console.log('Произошло нажатие кнопки')
   }
   render() {
     return <button onClick={this.handleClick.bind(this)}>Нажми на меня</button>
   }
 }

Обратите внимание: использование Function.prototype.bind() в методе render() приводит к созданию функции при каждом рендеринге компонента, что потенциально может повлечь проблемы с производительностью. Стрелочная функция в методе render()

 class App extends Component {
   handleClick() {
     console.log('Произошло нажатие кнопки')
   }
   render() {
     return <button onClick={() => this.handleClick()}>Нажми на меня</button>
   }
 }

Обратите внимание: использование стрелочной функции в методе render() также приводит к созданию функции при каждом рендеринге компонента, что может нивелировать оптимизацию, основанную на проведении строгого сравнения состояния и пропов. 👉 @frontendInterview

CSS для профи Перед вами прямой путь в высшую лигу веб-разработки. Книга «CSS для профи» подарит вам не только свежие идеи, но и вдохновит на подвиги, а облегчить этот тернистый путь помогут новейшие технические достижения - адаптивный дизайн, библиотеки шаблонов и многое другое. 👉 @frontendInterview

Отфильтровать длинные слова Задача проста - напишите функцию, которая принимает строку, состоящую из слов и число. Функция должна вернуть массив слов, длина которых больше данного числа. Пример: filterLongWords("The quick brown fox jumps over the lazy dog", 4) //['quick', 'brown', 'jumps'] 👉 @frontendInterview

Изучаем TypeScript 3. Книга начинается со знакомства с языком TypeScript, и, поэтапно переходит от базовых понятий к продвинутым и мощным функциям языка, включая методы асинхронного программирования, декораторы и обобщения. Также параллельно рассматривается множество современных фреймворков JavaScript и TypeScript - для каждого из них подробно описано модульное и интеграционное тестирование. Описаны некоторые из известных объектно-ориентированных методов и шаблонов проектирования, а также представлены их реальные реализации. К концу книги вы создадите всеобъемлющее комплексное вебприложение, которое покажет, как можно объединить в реальном сценарии возможности языка TypeScript, шаблоны проектирования и передовые практики разработки. 👉 @frontendInterview

👉 @frontendInterview

Где обучаться Middle и Senior React разработчикам, чтобы проще проходить собесы? 10 мая стартует React Marathon PRO Edition для НЕ новичков в Реакте. Задача — совершить карьерный рывок за 4 недели. В программе: Webpack, TypeScript, работа с API, тестирование компонентов, работа с макетом из Figma и не только. Пишешь код и получаешь комментарии ментора. У марафонцев будет возможность побороться за место в интернатуре международной IT-компании.

Расскажите об основных компонентах TypeScript. TypeScript включает в себя три основных компонента: 1. Язык. Это, с точки зрения разработчиков, самая важная часть TypeScript. «Язык» — это синтаксис, ключевые слова, всё то, что позволяет писать программы на TypeScript. 2. Компилятор. TypeScript обладает компилятором с открытым исходным кодом, он является кросс-платформенным, с открытой спецификацией, и написан на TypeScript. Компилятор выполняет преобразование TypeScript-кода в JavaScript-код. Кроме того, если с программой что-то не так, он выдаёт сообщения об ошибках. Он позволяет объединять несколько TypeScript-файлов в один выходной JS-файл и умеет создавать карты кода. 3. Вспомогательные инструменты. Вспомогательные инструменты TypeScript предназначены для облегчения процесса разработки с его использованием в различных IDE. 👉 @frontendInterview