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

​Как создать радиальный градиент в CSS? Функция radial-gradient используется для задания фона в виде радиального (кругового, эллиптического) градиента. Самый простой градиент задаётся двумя цветами. .element { background-image: radial-gradient(#6e4aff, #49A16C); } В этом случае начальная точка помещается в центр элемента, а градиент рисуется таким образом, чтобы в углах элемента был последний указанный в скобках цвет. Цветов мы можем перечислить сколько угодно. Браузер сам распределит градиент таким образом, чтобы последний цвет всегда заходил в угол элемента. Форма градиента задаётся ключевым словом circle или ellipse (по умолчанию). Мы можем задавать положение центральной точки, используя те же ключевые слова, что и для background-position, но с приставкой at: at left, at top, at right, at bottom, at center (по умолчанию). Значения можно сочетать, чтобы поместить центр градиента в нужный угол элемента: at top left — центр градиента в верхнем левом углу. 👉 @frontendInterview

👉 @frontendInterview

Frontend на YaTalks: 30 лет — полёт нормальный! Что происходит в вебе прямо сейчас обсудят на главной конференции Яндекса для IT-сообщества уже 3-4 декабря. — Как и чему учиться для написания интерфейсов? — Как создать универсальную UI-библиотеку? — Как создать и поддерживать понятную навигацию по документации? — В какой момент пора создавать новый репозиторий? — Где найти пользователей для тестирования и как его организовать? На конференции выступят эксперты из Яндекса, Microsoft, Meta, VK Group, Hexlet, HTML Academy, Evil Martians, Osome, Веб-стандартов и других компаний. 👉 Программа и регистрация по ссылке.

Что такое API? Разные программы могут быть написаны на разных языках. Это очевидно, и на первый взгляд кажется, что не вызывает никаких проблем. На деле же, если программы написаны на разных языках, их может быть трудно «подружить» и сделать так, чтобы они могли друг с другом «общаться». Именно для того, чтобы подружить разные модули, системы, языки, программы — и существуют API. Давайте сразу рассмотрим пример: мы работаем в «Twitter» и делаем фичу для браузерного приложения на JavaScript. Когда нам нужны какие-то данные, мы запрашиваем их у сервера. Однако сервер написан, скорее всего, не на JavaScript, а на каком-то другом языке: Python, C#, Java. Чтобы сервер понял, что мы от него хотим, нам нужно как-то объяснить наш запрос. Именно для этого нужно API — оно позволяет разным системам общаться, понимая друг друга. 👉 @frontendInterview

👉 @frontendInterview

Как проверить, поддерживается ли определенное CSS свойство в используемом браузере? Директива @supports позволяет проверить, поддерживает ли браузер свойство, правило, селектор CSS. Если условие срабатывает, то будет выполнен CSS-код, написанный внутри фигурных скобок. Пример Если нужно проверить свойство или значение, нужная конструкция записывается сразу в круглых скобках: @supports (transform: perspective(150px)) { div { transform: perspective(150px); } } 👉 @frontendInterview

Программа подготовки по профессии «Фронтенд-разработчик» с сертификатом Хекслета и гарантированными собеседованиями. ➕Полноценный курс по JavaScript и React с настройкой окружения. ➕Тренажер кода с моментальной автопроверкой. ➕Наставник. ➕Сильные проекты на GitHub и практика в Open Source. Попробуйте наш формат асинхронного обучения, без ожидания потока: https://bit.ly/3l5HIxI

What is between? Вам даны два числа. Создайте функцию, которая выведет все целые числа, которые находятся между двумя данными числами, включая их самих. Пример: a = 1 b = 4 --> [1, 2, 3, 4] 👉 @frontendInterview

Web Development and Design Foundations with HTML5, 9th Edition (2018) Книга знакомит с темами из HTML и CSS, такими как конфигурация текста, цвета и макет страницы, уделяя много внимания дизайну, доступности и веб-стандартам. В книге рассматриваются как непосредственно разработка (HTML5, CSS и JavaScript), так и другие навыки (дизайн, электронная коммерция и стратегии продвижения), которые считаются основополагающими в современной веб-разработке. Акцент на практике поможет читателю начать карьеру веб-разработчика. 👉 @frontendInterview

👉 @frontendInterview

Какие бывают стандартные ошибки в JavaScript и как создавать собственные типы ошибок? Программа может работать правильно, только если код написан корректно и не содержит ошибок. JavaScript умеет обрабатывать некорректный код и сообщать об ошибке в коде. Существует семь встроенных видов ошибок, также можно создать свои собственные. Встроенные ошибки генерируются самим движком JavaScript при выполнении программы, а пользовательские — создаются с помощью конструктора Error. Оба типа ошибок можно ловить в конструкции try...catch. Описание всех стандартных ошибок можно найти в прикрепленной статье. 👉 @frontendInterview

Как стать классным web разработчиком? Технологии не стоят на месте и погоня за ними забирает много времени и сил. FrontEndDev поможет тебе освоить web разработку и писать приложения как профессионал. Здесь собраны: ▫️фишки и тонкости JS / TS / NodeJS / CSS; ▫️лучшие практики по написанию эффективного кода; ▫️библиотеки, упрощающие разработку; ▫️уроки по языкам программирования и фреймворкам. Становись профи вместе с FrontEndDev!

💣 Создайте игру «Сапёр» с помощью React Hooks! Приглашаем 13 и 14 декабря на интенсив от OTUS! Вебинар проведет преподаватель-практик Никита Овчинников. Что вас ждет на интенсиве? ✔️ Разберем принципы игры, алгоритм для построения поля и интерфейса игры. ✔️ Сделаем 2 реализации — с использованием useEffect и useRedux. ✔️ Разберем, как тестировать React Components с использованием React-Testing-Library. Бесплатный интенсив — это часть хардкорного онлайн-курса «React.js Developer» от OTUS для опытных JS-разработчиков, для регистрации пройдите вступительный тест. 👉 Регистрация на 1-й день интенсива: https://otus.pw/sPnh/ 👉 Регистрация на 2-й день интенсива: https://otus.pw/FTKn/

​Расскажите про координаты в браузере. Чтобы перемещать и позиционировать элементы на экране в браузере имеется система координат. Оси координат начинаются в левом верхнем углу экрана и идут вправо для оси x и вниз для оси y. Позиционирование с помощью координат может быть относительно окна браузера или относительно отдельного элемента. Всего существует две системы координат: одна начинается от угла HTML-страницы (документа), а вторая от угла окна браузера. С помощью первой можно определять как элемент расположен относительно всей страницы, а с помощью второй – как элемент расположен относительно окна браузера и того что там находится. Объекты события мыши и тач-события содержат координаты места на экране и в документе, где событие произошло: pageX/pageY – для документа, clientX/clientY – для экрана. Координатами элемента является расстояние в пикселях от осей системы координат до его левого верхнего угла. С помощью метода элемента getBoundingClientRect можно получить подробные данные о координатах элемента и его размере. 👉 @frontendInterview