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

​Что такое семантика в HTML? Семантика в контексте веб-разработки относится к использованию HTML-тегов в соответствии с их предназначением и значением. Это означает выбор подходящих тегов для разметки различных частей контента на веб-странице таким образом, чтобы они отражали его смысл и структуру. Такая разметка помогает не только людям, но и поисковым системам и другим машинным агентам понимать структуру и содержание веб-страницы, что влияет на доступность сайта и его поисковую оптимизацию (SEO). Примеры: - <article>: Для независимого контента, который имеет смысл сам по себе (например, статья в блоге). - <aside>: Для контента, слабо связанного с основным содержимым страницы (например, боковая панель). - <details>: Для контента, который можно скрыть или показать по запросу пользователя. - <figcaption>: Для подписи к изображению в элементе <figure>. - <figure>: Для самостоятельных элементов, таких как изображения, диаграммы, коды, которые сопровождаются подписью. - <footer>: Для нижнего колонтитула документа или раздела. - <header>: Для верхнего колонтитула документа или раздела. - <main>: Для основного содержимого документа. - <mark>: Для выделения частей текста. - <nav>: Для навигационных ссылок. - <section>: Для разделов содержимого, которые связаны с определенной темой. - <summary>: Для заголовка элемента <details>. Значение семантики: - Доступность: Делает веб-контент более доступным для людей с ограниченными возможностями, использующих вспомогательные технологии, такие как экранные читалки, поскольку эти технологии могут интерпретировать структуру и предоставлять контент в более понятной форме. - SEO: Поисковые системы используют ее для лучшего понимания структуры и содержания веб-страницы, что может улучшить индексацию и ранжирование сайта. - Улучшенная поддержка и разработка: Делает код более читаемым и легким для понимания, что облегчает сопровождение и дальнейшую разработку сайта. 👉 @frontendInterview

Я в программировании как рыба в воде. Какая я рыба: 👉 @frontendInterview

Помощь в трудоустройстве в IT-сфере! В России из-за дефицита айтишников запустили бесплатную программу по обучению IT-специалистов. Теперь любой желающий может попробовать себя в IT с полного нуля и начать обучение бесплатно! Узнайте про дальнейшее трудоустройство в ведущие IT-компании для восполнения кадрового дефицита. Для этого нужно: - Перейти по ссылке - Заполнить анкету и ответить на вопросы (занимает менее 3 минут) - На основании ваших ответов вы сразу узнаете, подходит ли вам сфера IT и сможете ли вы в ней работать Перейти на сайт #реклама 16+ urban-university.ru О рекламодателе

Истории и боли frontend-разработчика В этой статье опытный frontend-разработчик рассказывает интересные истории из своей практики. 👉 @frontendInterview

Станьте AI-разработчиком на Python и зарабатывайте от 150.000₽ в месяц 🔥🔥🔥 Мы научим вас создавать и тренировать нейронные сети, и вы сможете: 1️⃣ Устроиться разработчиком в крупную компанию и зарабатывать от 150 тыс. ₽ в месяц 2️⃣ Разрабатывать такие проекты на заказ и зарабатывать от 500 тыс. ₽ за проект 3️⃣ Создать нейро-сотрудника в вашей компании и вырасти на +30-100% в зарплате На интенсиве будет много практики: создадим 9 нейросетей за 1 вечер: 🧬 Прогноз стоимости золота 🧬 Сегментация изображения для робота доставщика 🧬 Трекинг людей на видео Ведущий интенсива - Senior AI-разработчик и основатель Университета искусственного интеллекта 🔥 Регистрируйтесь на бесплатный интенсив! Встречаемся в ближайшую среду

Как визуально выровнять текст с маркерами? Любой верстальщик регулярно сталкивается с маркированными списками и маркерами для этих списков, которыми можно красиво стилизовать эти списки, особенно если это пункты меню. Списки выглядят круто и вроде больше ничего не надо дорабатывать, пока не появляется многострочный пункт, когда переносящийся текст начинает выглядеть некрасиво. Такое происходит всегда, когда используется CSS свойство lift-style-position: indise, которое помещает буллеты внутрь блока, где располагается список. Если же этого не сделать, то маркеры будут выходить за границу блока списка. Это хорошо видно на прилагающейся картинке. На ней так же хорошо видно, что когда к правому списку было применено свойство lift-style-position: indise весь переносимый текст стал выезжать за визуальные границы размещения маркеров, что выглядит некрасиво. Для того, что исправить данную ситуацию необходимо воспользоваться небольшой хитростью.

li {text-indent:-1em;padding:0 0 0 1em;}

👉 @frontendInterview

👉 @frontendInterview

Хочешь щёлкать задачи по фронтенду как орешки? Канал Frontend tests & tasks научит! Это не очередной канал с задачами. Здесь придется думать. Убедись сам 👉 @Frontend_tasks

Зачем в webpack чанки ? Чанки используются для оптимизации загрузки и выполнения веб-приложений. Чанки позволяют разделить код приложения на более мелкие, независимые блоки, которые могут быть загружены по мере необходимости или параллельно. Это улучшает производительность приложения, сокращает время начальной загрузки и повышает эффективность использования кэша браузера. Рассмотрим основные причины их использования: Ленивая загрузка (Lazy Loading) Позволяют реализовать ленивую загрузку компонентов или модулей, то есть код загружается только тогда, когда он действительно нужен. Например, компоненты страниц, которые пользователь еще не посетил, могут быть загружены только при их первом запросе. Это снижает объем данных, необходимых для начальной загрузки приложения, и ускоряет его старт. Разделение кода (Code Splitting) Позволяет разделять код приложения на чанки с помощью разделения кода. Это может быть автоматическое разделение, основанное на анализе графа зависимостей, или явное, когда разработчик указывает, какие модули или библиотеки следует загружать отдельно. Разделение кода помогает уменьшить размер каждого чанка, что положительно сказывается на времени загрузки. Кэширование При правильной настройке чанки могут быть эффективно закэшированы браузером пользователя. Если часть кода приложения меняется редко (например, сторонние библиотеки), её можно выделить в отдельный чанк, который будет загружен один раз и сохранён в кэше браузера на долгое время. Это уменьшает объем данных, которые необходимо загружать при повторных посещениях. Параллельная загрузка Браузеры могут загружать несколько чанков параллельно, что ускоряет загрузку всего приложения. Разделение большого приложения на меньшие чанки позволяет браузеру эффективнее использовать пропускную способность сети, загружая множество небольших файлов одновременно, вместо одного большого. Пример: В конфигурации Webpack можно настроить разделение кода с помощью optimization.splitChunks, что позволяет автоматически определять и выделять общие модули в отдельные чанки.

Какие есть примеры микрозадач ? Микрозадачи — это задачи, которые планируются для выполнения после завершения текущего выполнения скрипта, но до того, как браузер продолжит другие задачи, такие как рендеринг или обработка событий. Они имеют более высокий приоритет по сравнению с макрозадачами и выполняются немедленно после текущего стека вызовов, но перед любыми другими событиями или рендерингом. 1. Промисы используют механизм таких задач для своих колбэков then, catch, и finally. Когда промис переходит в состояние выполнено (fulfilled) или отклонено (rejected), соответствующие колбэки планируются как микрозадачи. Это означает, что они будут выполнены сразу после текущего стека вызовов, но до того, как движок возьмется за выполнение следующей макрозадачи, например, обработку событий или таймеров.

console.log('Начало');

Promise.resolve().then(() => {
    console.log('Обработан промис');
});

console.log('Конец');

Вывод будет следующим:

Начало
Конец
Обработан промис

Сначала выполняется синхронный код (Начало и Конец), и только после его завершения, но до того как браузер перейдет к другим задачам, выполняются микрозадачи, связанные с промисами (Обработан промис). 2. Функция queueMicrotask позволяет явно добавить микрозадачу в очередь микрозадач. Это может быть полезно для разделения вычислений на более мелкие асинхронные операции, не блокируя поток выполнения и интерфейс.

console.log('Перед queueMicrotask');

queueMicrotask(() => {
    console.log('Выполнено в микрозадаче');
});

console.log('После queueMicrotask');

Вывод будет аналогичным:

Перед queueMicrotask
После queueMicrotask
Выполнено в микрозадаче

Сначала выполняется основной поток кода, затем микрозадача, добавленная через queueMicrotask. 👉 @frontendInterview

❓Как прототипное наследование может улучшить ваши навыки разработки на JavaScript? 🗓 Ждем вас на открытом вебинаре 18 сентября в 20:00 мск, где мы разберем: - что такое прототипное наследование в JavaScript и как оно работает; - как прототипное наследование помогает при разработке программ; - как лучше понять объектную модель JavaScript; - как писать ООП код с экономией памяти. Урок подходит для тех, кто знает основы JavaScript и хочет углубить свои знания в области разработки. 🔥 Встречаемся в преддверии старта курса «JavaScript Developer. Basic». Все участники вебинара получат специальную цену на обучение! 👉 Регистрируйтесь прямо сейчас, чтобы не пропустить мероприятие: https://otus.pw/khIQ/ Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru erid 2SDnjd7VsMt

Методичка: как сделать онлайн-встречи эффективнее Надоело ждать коллег, которые постоянно забывают о встречах, а отсутствие повестки и потерянные договоренности мешают нормально работать? Команда МТС Линк собрала на 37 страницах полезные материалы, чек-листы и кейсы, которые помогают компаниям проводить эффективные совещания в онлайне с помощью сервиса Встречи. Из методички узнаете: - Как создать постоянную ссылку и подключаться на встречи в 2 клика, - Как делать заметки и работать с файлами, не переживая за качество связи и безопасность данных. - Как облегчает жизнь ИИ, который расшифровывает созвоны в текст и автоматически отправляет расшифровку на почту. Еще в методичке описаны 7 способов оценки текущей эффективности ваших онлайн-встреч. Получить гайд можно бесплатно на сайте. Скачать #реклама mts-link.ru О рекламодателе

Last Найдите последний элемент из данных аргументов Если передан один аргумент, который представляет собой список/массив или строку, верните его последний элемент. Гарантируется, что будет хотя бы один аргумент и что массивы/списки/строки с одним аргументом не будут пустыми. Примеры:

last(5)               ==> 5
last([1, 2, 3, 4])    ==>  4
last("xyz")           ==> "z"
last(1, 2, 3, 4)      ==>  4
last([1, 2], [3, 4])  ==>  [3, 4]
last([[1, 2], [3, 4]])  ==>  [3, 4]

👉 @frontendInterview

Html, Css & Javascript in easy steps Special Edition Книга в простых шагах инструктируют читателя по каждому из трех аспектов веб разработки, которые используются для создания современных веб-страниц: - Теги языка разметки гипертекста (HTML) - Правила каскадных таблиц стилей (CSS) - Функции JavaScript Вы узнаете, как создавать веб-страницы для отображения текста, изображений, списков, таблиц, гиперссылок, форм, аудио и видео. Каждая глава, для укрепления знаний, содержит контрольные вопросы 👉 @frontendInterview

Большая конференция Яндекс Рекламы на ВТБ Арене 22 октября приглашаем маркетологов и специалистов по рекламе обсудить новые технологии и рекламные тренды. Ключевые участники рынка поделятся опытом и расскажут: ✅ Как развиваться специалистам в сфере рекламы ✅ Как продвигаться и продавать в интернете ✅ Какие тренды в маркетинге появляются сейчас Вас ждут доклады на актуальные темы, конкурсы и возможности для нетворкинга. Встречаемся 22 октября на ВТБ Арене. Будем вести прямую трансляцию — вы сможете посмотреть выступления, даже если не планируете приехать лично. Конференция бесплатная, нужно только зарегистрироваться. Зарегистрироваться #реклама 16+ ya.rekonfa.ru О рекламодателе

​Что такое PWA? PWA — это сокращение от словосочетания Progressive Web Applications, которое переводится на русский язык как «прогрессивные веб-приложения». Есть 3 подхода к определению прогрессивных веб-приложений. Обывательское Это определение можно использовать, когда нужно объяснить, что такое прогрессивные веб-приложения, человеку, который не является веб-разработчиком. PWA — это такие сайты, которые можно добавить в виде иконки на главный экран или рабочий стол, и при запуске их с этой иконки они будут выглядеть и работать неотличимо от нативных приложений, то есть запускаться в автономном режиме (standalone mode), в котором нет адресной строки и других элементов интерфейса браузера, работать без доступа к интернету, получать push-уведомления и т. д. Официальное PWA — это веб-приложения, которые применяют стратегию прогрессивного улучшения (progressive enhancement), то есть проверяют, поддерживает ли браузер те или иные Web API, и если да, то могут их использовать, чтобы обеспечить опыт взаимодействия (user experience) наравне с нативными приложениями. Отсюда и название — прогрессивные веб-приложения. Техническое PWA — это сайты, формально удовлетворяющие определённым техническим критериям. Критерии у каждого браузера на каждой платформе могут быть различны и меняться со временем. У браузеров на основе Chromium это: - использование защищённого соединения HTTPS или локального хоста; - наличие манифеста веб-приложения (JSON-файла, в котором указаны название приложения, описание приложения, ссылка хотя бы на одну растровую иконку с разрешением не ниже 512 x 512 px или векторную иконку в формате SVG). Ранее браузеры на основе Chromium требовали также наличия Service Worker (JavaScript-кода, который работает в фоновом режиме независимо от веб-страницы, даже если вкладка или браузер закрыты). Service Worker позволяет получать push-уведомлений, синхронизировать данные в фоне, перехватывать и обрабатывать сетевые запросы, что позволяет реализовать кеширование и работу без доступа к интернету, и выполнять другие задачи. Если сайт удовлетворяет этим критериям, то при его открытии в браузерах на основе Chromium появится предложение установить этот сайт как приложение 👉 @frontendInterview

Обычный рабочий день удаленщика 👉 @frontendInterview