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

👉 @frontendInterview

👉 @frontendInterview

.dataset Свойство dataset позволяет считывать или устанавливать любые дата-атрибуты на HTML-элементе. Дата-атрибут — это пользовательский атрибут на элементе, название которого начинается с data-, например data-testid. Дата атрибуты используются, чтобы хранить значения на элементах в HTML. Обращение к свойству dataset вернёт объект со всеми дата-атрибутами, которые есть на элементе. Названиями полей в объекте будут имена дата-атрибутов после префикса data-. Например, если атрибут называется data-columns, то поле в объекте для этого атрибута будет называться columns. <h1>Известные ситхи</h1> <ul> <li data-id="1541" data-episode="1">Дарт Мол</li> <li data-id="9434" data-episode="4">Дарт Вейдер</li> <li data-id="5549" data-episode="4">Дарт Сидиус</li> </ul> const items = document.querySelectorAll('li') const firstItem = items[0] console.log(firstItem.dataset) // { id: '1541', episode: '1' } 👉 @frontendInterview

Стать сотрудником Яндекса быстрее и проще, чем кажется. Участвуйте в днях быстрого найма: решите тестовое, пройдите несколько секций собеседования и получите офер за несколько дней. Теперь дни быстрого найма будут проходить регулярно. Чтобы вам было удобно следить за расписанием, собрали все мероприятия на отдельной странице. Ближайшие мероприятия: • 19–25 декабря — Week Offer для frontend, backend, mobile-разработчиков и аналитиков в команду Рекламы Узнать подробнее и зарегистрироваться

👉 @frontendInterview

❓ Хотите развиваться как JavaScript-разработчик? Приходите 16 декабря в 20:00 на открытый урок «Минимум для работы с системой» в OTUS. Вебинар пройдет в рамках специализации «Fullstack Developer» — Git на этом онлайн-курсе тоже пригодится, поскольку процесс обучения организован так же, как процесс разработки в IT-компаниях. 🔥 На вебинаре вы узнаете, для чего нужна система Git и как ее использовать, а также у вас будет возможность создать свой первый пуллреквест — уведомление о завершении работ для команды и попробовать базовый сценарий по выполнению домашнего задания. Для этого вам нужно будет скачать и настроить Git. Как это сделать, рассказываем в статье https://otus.pw/AKhq/ 📌 Занятие подойдет тем, кто хочет освоить актуальные навыки разработки на JavaScript и получить новую профессию. Не упустите свой шанс освоить профессию «Fullstack Developer» со скидкой 36800₽ 👉 Чтобы участвовать в мероприятии, нужно зарегистрироваться https://otus.pw/NIRz/

​outline Что-то вроде border на стероидах. Не влияет на размеры элемента, можно отодвинуть от границ на любое расстояние. Присутствует в стандартных стилях браузера для акцента на сфокусированных интерактивных элементах. Типа размеры не меняются, вёрстка страницы не ломается, но пользователь наглядно видит, какой элемент в фокусе. outline на самом деле шорткат — короткое свойство для записи сразу нескольких значений. Внутри себя оно содержит свойства outline-width, outline-style и outline-color. Разберём доступные значения для каждого из свойств, а потом соберём всё в одну коробку: outline-width Ключевые слова thin, medium, thick — задают тонкую, среднюю или толстую ширину. Значения в пикселях на усмотрение браузера, но обычно соответствует 1, 3 и 6 пикселям соответственно. Конкретный размер — размер в любых единицах измерения, доступных в вебе. Например, 10px или 0.2em. outline-style none — обводка не отображается, даже если задано значение для outline-width. dotted — обводка будет состоять из точек. Круглых точек, вроде такого ••••• dashed — обводка будет в виде пунктирной линии. solid — значение по умолчанию, если не задано иное. Сплошная линия. double — двойная сплошная линия. groove — обводка будет отображаться так, будто рамка объёмная, с вдавленной серединой и подсвечена. Цвет обводки (если он отличен от чёрного) станет двухцветным. ridge — обводка отобразится объёмной, её центр будет приподнят. Противоположно groove. inset — объёмная рамка, края направлены внутрь элемента. outset — объёмная рамка, края направлены наружу элемента, противоположно inset. outline-color любое доступное значение цвета в вебе, включая ключевые слова transparent, currentColor invert — ключевое слово, устанавливающее противоположный цвету фона элемента цвет обводки. Удобно для достижения максимальной контрастности. 👉 @frontendInterview

You're a square! Создайте функцию, которая проверит, является ли число полным квадратом. Полный квадрат, также точный квадрат или квадратное число, — число, являющееся квадратом некоторого целого числа. Примеры: isSquare (-1) // => false isSquare 3 // => false isSquare 4 // => true isSquare 25 // => true isSquare 26 // => false 👉 @frontendInterview

Fullstack GraphQL: The Complete Guide to Writing GraphQL Servers and Clients with TypeScript (2020) Full stack GraphQL - это руководство для программистов по созданию серверной и клиентской логики на GraphQL с примерами на Node.js , React, TypeScript и Apollo. 👉 @frontendInterview

🤖 НИКАКИХ СОБАЧЕК На финтех-форуме мы показывали животных. А как строим финтех — расскажем на Alfa Digital Open. Где? Онлайн, 13 декабря. Каждый год мы рассказываем про наши новые digital-сервисы, технологии и людей, которые делают Альфу 🧑🏻‍💻👩🏻‍💻 Что обсудим: — Как перезапустили мобильный банк Альфа-Онлайн за месяц, а не за год. — Как научили нейросети распознавать мошенников в 3 раза лучше людей. — Сколько раз мы ошибались, пока делали приложение для сотрудников 📱 Это бесплатно? Да. Мы делимся знаниями бесплатно. Где записаться? Прямо сейчас на сайте 👈 @alfabank

Position sticky Липкое или приклеенное позиционирование используется для фиксации элемента в заданном месте при прокрутке страницы, отличается от fixed тем что положение фиксируется относительно родительского элемента. Использование sticky требует определенной разметки и стилей блока, если блок не прилипает нужно проверить эти условия: - блок имеет свойство top или bottom - высота родителя больше высоты блока - у родительских блоков, вплоть до html не стоит overflow: hidden - для сафари прописано position: -webkit-sticky Пример реализации прилипающего бокового меню по ссылке. 👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

🔥Проверь себя, пройди хардкорный тест по Frontend🔥 ✅ Ответь на 20 вопросов и проверь свои знания. Сможешь сдать — пройдёшь на продвинутый курс "Angular Developer" по специальной цене. 👀Занимаетесь JS-разработкой и хотите расширить свои навыки? Курс "Angular Developer" — Best Practices по одному из мощнейших JavaScript фреймворков ❌Тест смогли пройти только 40% УЧАСТНИКОВ ⏰ Время прохождения теста ограничено 25 минут 👉🏻ПРОЙТИ ТЕСТ: https://otus.pw/dsGR/ 💭 13 декабря в 20:00 открытый урок «Реактивное программирование в Angular».

Тест по JavaScript от OTUS Ответьте на 20 вопросов и проверьте, насколько вы готовы к обучению на курсе «JavaScript Developer. Professional». Сможете сдать — пройдёте на продвинутый курс по специальной цене, а также получите видео-курс по Git в подарок ПРОЙТИ ТЕСТ https://otus.pw/rD2a/