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

CSS | Pointer-events Свойство pointer-events позволяет управлять тем, как элементы будут реагировать на события мыши или прикосновения к сенсорному экрану. Свойство позволяет контролировать когда, как и может ли вообще указатель устройства взаимодействовать с элементом. pointer-events: none предотвращает события указателя для элемента: hover, active, click и т.п., в том числе и JavaScript событие click. pointer-events: auto восстанавливает стандартное взаимодействие указателя с элементом. Применение pointer-events на практике: Запретить пользователю клик правой кнопкой мыши по фото на сайте. Выключить взаимодействие со странице во время обработки ajax-запроса. Блокировать любой элемент страницы от взаимодействия с курсором. 👉 @frontendInterview

Как работать с архитектурой больших Vue-приложений? 🟡 8 декабря в 20:00 состоится открытый урок «Архитектура больших Vue-приложений и лучшие практики». На занятии мы: - Узнаем, как можно структурировать код по мере роста приложения. - Рассмотрим монолитную и модульную архитектуру приложения. - Обсудим, какие приемы можно применить для снижения сложности разработки и сопровождения. - Разберем хорошие практики и правила хорошего стиля. - Поговорим про антипаттерны и чего следует избегать при разработке. Занятие проведет Юрий Тимофеев, Senior Software Engineer и преподаватель в OTUS. После занятия еще больше приемов будет ждать вас на онлайн-курсе «Vue.js разработчик». ✍️ Для регистрации на вебинар пройдите вступительный тест https://otus.pw/p5y9/

❓ Хотите выучить html с нуля? Тогда этот бесплатный справочник по html то, что вам нужно. 🎁 Оставьте заявку на тест-драйв курса специализация «Fullstack developer» и получите: - справочник по html; - приглашение на бесплатные уроки курса по html, css, javascript Для получения подарка нужно быть авторизованным в Вк. 👉 https://vk.cc/cjlDfC Или посетить бесплатный урок 07.12 в 20:00 https://otus.pw/jYRK/

CSS calc() Используется для указания вычисляемого значения свойств, которые в качестве значений используют размер. Это позволяет задавать значения основанные на сложении или вычитании разных единиц измерений, например можно задать 100% - 20px. Если значение не может быть вычислено, оно игнорируется. Функция calc() принимает любую комбинацию значений размеров.

 {
  font-size: calc(3vw + 2px);
  width:     calc(100% - 20em); 
  height:    calc(100vh - 20rem); 
  padding:   calc(1vw + 15%); 
}

Допустимые математические операции - сложение (width: calc(20px + 20px)); - вычитание (padding: calc(10% - 10px)); - умножение (height: calc(20% * 2)) - деление. На ноль делить запрещено (width: calc(100% / 3)). Знаки плюс и минус должны отбиваться пробелами с двух сторон. 👉 @frontendInterview

Что такое GRPC и как его использовать в среде Node.js? 21 декабря в 20:00 мск состоится вебинар «GRPC Микросервисы в Node.js». На открытом уроке онлайн-курса «Node.js Developer» мы рассмотрим протокол GRPC, технические характеристики и области применения. В ходе обучения мы научимся создавать простейшие GRPC клиенты и серверы на Node.js, а также микросервисы с NestJS. Это занятие будет полезно тем, кто хочет познакомиться со стандартом GRPC, сравнить этот подход с традиционным REST API и использовать его в среде Node.js. Для участия пройдите вступительный тест https://otus.pw/9g8w/

altERnaTIng cAsE <=> ALTerNAtiNG CaSe Создайте функцию, которая принимает строку и меняет регистр букв в этой строке. Примеры: "hello world".toAlternatingCase() === "HELLO WORLD" "HELLO WORLD".toAlternatingCase() === "hello world" "hello WORLD".toAlternatingCase() === "HELLO world" "HeLLo WoRLD".toAlternatingCase() === "hEllO wOrld" "12345".toAlternatingCase() === "12345" // Non-alphabetical characters are unaffected "1a2b3c4d5e".toAlternatingCase() === "1A2B3C4D5E" "String.prototype.toAlternatingCase".toAlternatingCase() === "sTRING.PROTOTYPE.TOaLTERNATINGcASE" 👉 @frontendInterview

Frontend! Frontend! Frontend! Много FRONTEND’a! Зачем платить за курсы, если они есть в открытом доступе? Выучи такие языки бесплатно: >JavaScript (56 уроков) >Figma (44 видеоурока) >Web Design (57 видеоуроков) >HTML/CSS (41 курс) >UI/UX (33 урока) >Верстка (71 курс) >React (32 курса) >Другие (144 Курса) Подпишись, что бы не потерять возможность выучиться бесплатно!❤️

Beginning DevOps with Docker: Automate the deployment of your environment with the power of the Docker toolchain (2018) Эта книга познакомит вас с основами Docker и DevOps, а также с тем как они интегрируются. Затем вы поймете, что такое контейнеры, как их создавать и управлять ими. Далее в книге описывается работа с файлом docker-compose и CLI. Затем будет произведена настройка сети с помощью инструмента docker-compose. Постепенно вы узнаете, как масштабировать конвейер доставки приложений с помощью Docker. Также, вы поймете концепцию оркестровки и научитесь реализовывать доставку приложений в контейнерах. 👉 @frontendInterview

​Что такое ARIA-атрибуты? ARIA-атрибуты — это группа дополнительных атрибутов из спецификации WAI-ARIA, которая состоит из свойств и состояний. Состояния (states) описывают состояния элементов и отвечают на вопрос «В каком состоянии сейчас элемент?». Свойства (properties) нужны для раскрытия дополнительных функций элементов. Отвечают на вопрос «Что ещё делает этот элемент?». ARIA-атрибуты поддерживают роли и помогают браузерам и Accessibility API правильно обрабатывать элементы для вспомогательных технологий. Сами по себе, без CSS и JavaScript, они не изменяют внешний вид и функциональность элементов. Общий синтаксис ARIA-атрибутов — aria-атрибут="значение". Для примера сообщим скринридеру с помощью ARIA-атрибута, что у поля есть инструкция к нему. <label for="psw">Пароль</label> <input type="password" name="password" id="psw" aria-describedby="hint" > <span id="hint">Пароль должен содержать не меньше 20 знаков</span> aria-describedby связывает с помощью одинакового ID два элемента — поле и подсказку из тега <span>. Скринридер озвучит текст подсказки после подписи и основной информации о поле. 👉 @frontendInterview

Что не умеет делать JavaScript на веб-странице? - Не может читать/записывать произвольные файлы на жёстком диске, копировать их или запускать программы. Может быть что-то еще? В канале Собес.js собраны самые актуальные вопросы с собеседований по самому популярному в мире языку программирования. Сохраняй себе и повторяй материал, чтобы быть готовым к любому собесу

👉 @frontendInterview

👉 @frontendInterview

Хотите профессионально разрабатывать бэкенд на Node.js? Приглашаем Frontend- и Backend-разработчиков на Javascript прокачать свои навыки. ❗️6 декабря в 20:00 состоится открытый урок «NodeJS и performance. Поиск узких мест в NodeJS серверах». На занятии мы обсудим, какая может быть причина проблем с производительностью в NodeJS, как ее найти, и какие есть способы решения этой проблемы. Не упустите возможность познакомиться с форматом обучения на онлайн-курсе «Node.js Developer» и преподавателем OTUS. Регистрация https://otus.pw/VIE3/

👉 @frontendInterview

A?.Frontend х Selectel: приглашаем вас в гости frontend-сообщества 💌 Когда: 7 декабря (среда), в 19:00 Где: Санкт-Петербург, ул. Цветочная, д. 19 💡 «Добро пожаловать в Storybook Community» Доклад Никиты Дукина, Frontend-разработчика в Альфа-Банке. Расскажем об инструменте Storybook. 💡 «Оптимизируем графику для веба like a boss» Ведущий разработчик сайта в Selectel, Евгений Полосухин поделится секретами создания изображения для веб-приложений. 💡 «Патология вёрстки» C Николаем Громовым, ведущим разработчиком интерфейсов в ООО «Наука», рассмотрим описание клинической картины и принципов лечения некоторых болезней вёрстки. Модерирует встречу Ольга Болотова, руководитель направления JavaScript в Альфа-Банке. Это ещё не все 🎄 🎅🏼 Будем вместе создавать новогоднее настроение, играть в «Тайного Санту». Необходимо только зарегистрироваться https://alfa-digital-org.timepad.ru/event/2245478/ и для входа в офис захватить с собой паспорт. Подписывайтесь на сообщество фронтенда: https://t.me/alfa_frontend

Как определить, поддерживается ли CSS свойство в браузере пользователя? CSS директива @supports помогает разработчикам определять справится ли браузер пользователя с CSS свойством или нет. Синтаксис директивы @supports такой же, как и у @media запросов:

 @supports(prop:value) {
   /* стили */
 }

Простая проверка свойства

 @supports (display: flex) {
   div { display: flex; }
 }

Ключевое слово not @supports в паре со словом not осуществляет проверку на отсутствие поддержки какого-либо свойства: @supports not (display: flex) { div { float: left; } } 👉 @frontendInterview