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

🇪🇸 Лучшая страна в Европе для переезда для IT специалистов 🇪🇸 Хотите жить в спокойной стране и дружелюбной среде? Если ваша цель получения ВНЖ в Европе, рекомендуем скорее воспользоваться шансом! Наши друзья из Outbox, сделают за вас всю неприятную работу от оформления шенгенской визы, сбора всех документов до подачи документов на ВНЖ и подбором жилья. С ними ваш переезд будет без стресса, т.к ребята прошли весь процесс релокации сами и получили бесценный опыт! ❗️До 7 сентября осталось 4 места на бесплатную консультацию по получению ВНЖ в Испании! Успейте записаться по ссылке @outbox_tm Также узнать подробнее об услугах и познакомиться с нами по-ближе можно в нашем телеграм канале. Подпишитесь, чтобы не потерять.

​Почему важно использовать h1–h6 и каким пользователям они приносят пользу? Зачем соблюдать иерархию заголовков? Заголовки важно использовать по крайне мере по двум причинам — SEO и доступность. В первом случае поисковые роботы используют заголовки <h1>–<h6>, чтобы понять структуру и смысл содержимого на странице. Это один из факторов ранжирования в поисковой выдаче. К примеру, Google может определить, когда уместно отображать страницу в ответ на запрос пользователя, и делать страницу доступной для избранных фрагментов. Избранные фрагменты — это быстрые ответы на поисковые запросы пользователей Google. Если заглянуть в код страницы, то можно увидеть, что заголовок «Самые кассовые фильмы» обёрнут в тег <h2>. Так что правильное структурирование контента на сайте, включая теги заголовков, — это то, что помогает Google с этой задачей. Во втором случае заголовки <h1>–<h6> делают удобной навигацию по сайту для пользователей, особенно для тех, кто пользуется скринридерами. Распространённая техника — быстро перемешаться с заголовка к заголовку для общего понимания содержимого страницы. Важно не пропускать уровни заголовков, так как это запутает пользователя скринридера. Он может даже попытаться найти, где находится отсутствующий заголовок. 👉 @frontendInterview

Log without dates Вам дан массив событий, состоящий из строк, представляющих собой время в формате HH:MM:SS. Все события в хронологическом порядке и не могут происходить в одну и ту же секунду. Посчитайте, какой минимальное количество дней пройдет, когда произойдут все события. Примеры: Input -> ["00:00:00", "00:01:11", "02:15:59", "23:59:58", "23:59:59"] Output -> 1 Input -> ["12:12:12"] Output -> 1 Input -> ["12:00:00", "23:59:59", "00:00:00"] Output -> 2 Input -> [] Output -> 0 👉 @frontendInterview

Код, который умещается в голове: эвристики для разработчиков Незаменимые практические советы по написанию кода в устойчивом темпе и по управлению сложностью, из-за которой проекты часто выходят из-под контроля. В книге описываются методы и процессы, позволяющие решать ключевые вопросы: от создания чек-листов до организации командной работы, от инкапсуляции до декомпозиции, от проектирования API до модульного тестирования. Автор иллюстрирует свои выводы фрагментами кода, взятыми из готового проекта. Написанные на языке C#, они будут понятны всем, кто использует любой объектно-ориентированный язык, включая Java, C++ и TypeScript. Для более глубокого изучения материала вы можете загрузить весь код и подробные комментарии к коммитам. 👉 @frontendInterview

​В чем преимущество использования стрелочных функций для метода в конструкторе? Основным преимуществом использования стрелочной функции в качестве метода внутри конструктора является то, что значение this устанавливается во время создания функции и не может измениться после этого. Таким образом, когда конструктор используется для создания нового объекта, this всегда будет ссылаться на этот объект. Например, допустим, у нас есть конструктор Person, который принимает имя в качестве аргумента, имеет два метода для вывода в консоль этого имени, один в качестве обычной функции, а другой в качестве стрелочной:

 const Person = function (firstName) {
   this.firstName = firstName;
   this.sayName1 = function () {
     console.log(this.firstName);
   };
   this.sayName2 = () => {
     console.log(this.firstName);
   };
 };

 const john = new Person('John');
 const dave = new Person('Dave');

 john.sayName1(); // John
 john.sayName2(); // John

 // У обычной функции значение `this` может быть изменено, но у стрелочной функции нет
 john.sayName1.call(dave); // Dave (потому что 'this' сейчас ссылается на объект dave)
 ohn.sayName2.call(dave); // John

john.sayName1.apply(dave); // Dave (потому что 'this' сейчас ссылается на объект dave)
john.sayName2.apply(dave); // John

john.sayName1.bind(dave)(); // Dave (потому что 'this' сейчас ссылается на объект dave)
john.sayName2.bind(dave)(); // John

 var sayNameFromWindow1 = john.sayName1;
 sayNameFromWindow1(); // undefined (потому что 'this' сейчас ссылается на объект window)

 var sayNameFromWindow2 = john.sayName2;
 sayNameFromWindow2(); // John

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

👉 @frontendInterview

🔥 Внимание! Вот Ваше Приглашение на ТОП-конференцию по фронтенду!  FrontendConf2023 - это знаковое профессиональное мероприятие всего IT-коммьюнити, которое посвящено только актуальным вопросам разработки клиентской части web-пространств.  На FrontendConf2023 2 и 3 октября Вас ждут интересные и полезные доклады от звездных спикеров, реальные кейсы акул IT-компаний, мощный нетворкинг - Вы легко сможете пообщаться с ТОПами индустрии, а также крутые мастер-классы и интересные активности на стендах партнеров.  Посмотрите фотоотчет #FC2022 и прочувствуйте атмосферу нашей конференции❤️  📌Переходите на сайт мероприятия - изучайте расписание докладов и бронируйте свой билет✅, чтобы успеть оказаться вместе с нами 2 и 3 октября на FrontendConf2023.

👉 @frontendInterview

​Почему хорошей практикой считается располагать <link> для подключения CSS между <head></head>, а <script> для подключения JS ставить перед </body>? Знаете ли вы исключения? Размещение <link> внутри <head> Размещение <link> внутри тега <head> необходимо при создании оптимизированного веб-сайта. Когда страница загружается впервые, HTML и CSS анализируются одновременно; HTML создает DOM (объектную модель документа), а CSS создает CSSOM (объектную модель CSS). И то, и другое необходимо для создания визуальных элементов на веб-сайте, что позволяет быстро определить время «первого значимого рисования». Этот прогрессивный рендеринг является категорией оптимизации сайтов, которые измеряются в их показателях эффективности. Размещение таблиц стилей в нижней части документа - это то, что препятствует прогрессивной загрузке страницы во многих браузерах. Некоторые браузеры блокируют рендеринг, чтобы избежать перерисовки элементов страницы, если ее стили изменятся. Все это время пользователь будет пялиться на пустую белую страницу. В других случаях может возникать мерцание нестилизованного содержимого (FOUC), на котором может отображаться веб-страница без применения стилей. Размещение <script> прямо перед </body> Теги <script> блокируют отрисовку HTML на то время, пока они скачиваются и исполняются. Размещение скриптов внизу позволяет сперва распарсить и показать пользователю весь HTML. Исключением является случай, когда в вашем скрипте содержится document.write(). Но на сегодняшний день его использование не считается хорошей практикой. К тому же, расположение скриптов внизу разметки означает, что браузер не может начать их скачивать до тех пор, пока не отрисован весь документ. Единственным рабочим способом, при котором <script> будет расположен внутри <head>, является добавление атрибута defer. 👉 @frontendInterview

Как я стал фронтендером 1. Смотрел уроки на ютубе 2. Делал портфолио на гитхаб 3. Начал читать Frontend || Vollex Frontend Vollex выжимает воду из курсов, книг, видеоуроков и заботливо делится самым главным. Гайды, готовый код, тесты и никакой копипасты. Вы знаете, что делать: @vollex_frontend

Стартануть в IT быстро и эффективно — подготовительный курс по Frontend-разработке. Изучаем базу за 14 дней — всего за 990 рублей! 🗓 Начинаем 7 сентября. Даем: 72 урока с практикой в браузере, 3 онлайн вебинара и 1 сессию лайвкодинга с практикующим разработчиком. Получаем: крепкие знания базы языка, умение понимать код и первую программу на JavaScript, написанную вместе с наставником. 🔜 Запишитесь прямо сейчас!

​Для чего используется атрибут srcset в теге изображения? Опишите процесс, который браузер использует при обработке содержимого этого атрибута. Вы должны использовать атрибут srcset, когда хотите показывать пользователям разные изображения в зависимости от их ширины дисплея их устройств - предоставление изображений более высокого качества устройствам с retina-дисплеями улучшает работу пользователя, в то время как предоставление изображений с низким разрешением на устройства с низким разрешением повышает производительность и уменьшает объём передаваемых данных (поскольку нет видимой разницы с большими изображениями). Например: <img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt=""> указывает браузеру отображать малое, среднее или большое изображение в зависимости от разрешения дисплея пользователя. Первое значение - это имя изображения, а второе - ширина изображения в пикселях. Для ширины устройства 320px выполняются следующие расчеты:

 500 / 320 = 1.5625
 1000 / 320 = 3.125
 2000 / 320 = 6.25

Если у клиента стандартное разрешение 1x, то 1.5625 является ближайшим коэффициентом, и 500w соответствующее small.jpg будет отображено в браузере. Если же разрешение retina (2x), браузер будет использовать ближайшее разрешение выше минимального. Это означает, что он не выберет 500w (1.5625), потому что оно больше 1 и изображение может выглядеть плохо. Браузер затем выберет изображение с результирующим соотношением ближе к 2, то есть 1000w (3.125). srcset решает проблему, когда вы хотите показывать файлы изображений меньшего размера для устройств с узким экраном, поскольку они не нуждаются в больших изображениях, как на настольных дисплеях, - а также, при желании, вы можете показывать изображения с различным разрешением для экранов с высокой/низкой плотностью пикселей. 👉 @frontendInterview

Яндекс Практикум запустил бесплатный курс по алгоритмическим собеседованиям. Курс поможет студентам подготовиться к таким интервью, чтобы устроиться на работу в крупные IT-компании. Уроки сделаны на основе курса «Алгоритмы и структуры данных»‎, но здесь полностью бесплатны. Курс будет полезен тем, кто знаком с алгоритмами, и тем, кто только планирует их изучать: → знатоки смогут применить умения на практике; → новички смогут сориентироваться и понять, на что стоит обратить внимание. На курсе студенты: — узнают, как проходят собеседования и как к ним готовиться; — научатся отвечать на неочевидные вопросы; — пройдут тесты на знание алгоритмов и структур данных; — решат практические задачи с реальных собеседований. Авторы курса — опытные разработчики, которые прошли, провели и оценили не одну сотню алгоритмических интервью. Они собрали всю нужную информацию об алгоритмических собеседованиях в одном месте и на русском языке. Начинайте готовиться вместе с Практикумом Реклама АНО ДПО "Образовательные технологии Яндекса", ИНН:7704282033, erid: LjN8KAkbm

String incrementer Создайте функцию, которая принимает строку. Если на конце строки есть цифра, то она должна увеличиться на 1. Если цифры нет, то к строке приписывается цифра 1. Примеры: foo -> foo1 foobar23 -> foobar24 foo0042 -> foo0043 foo9 -> foo10 foo099 -> foo100 👉 @frontendInterview

React Programming: The Big Nerd Ranch Guide (2023) Используйте React для написания надежного, декларативного кода, создания корзин и других функций электронной коммерции, оптимизации производительности, а также для получения опыта компонентного и сквозного тестирования. Попутно вы научитесь использовать такие инструменты, как Create React App, функциональные компоненты, хуки, ESLint, React Router, вебсокеты, библиотека React Testing Library и Cypress. 👉 @frontendInterview