Frontend Interview - собеседования по Javascript / Html / Css
11.8K subscribers
2.08K photos
115 videos
316 files
522 links
Канал для подготовки к собеседованиям по фронтенду

Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront
Менеджер по рекламе: @Spiral_Yuri

Купить рекламу: https://telega.in/c/frontendinterview

Канал в реестре РКН:
https://rknn.link/su
Download Telegram
forced-colors

Одно из значений директивы @media для проверки пользовательских настроек. Отслеживает режим принудительных цветов. Одна из его реализаций — режим высокой контрастности в Windows.

Режим принудительных цветов (forced colors mode) ограничивает количество цветов, чтобы повысить читаемость текста за счёт изменения контраста текста и фона. В основном используются цвета с высоким контрастом. Этот режим автоматически изменяет цвета и в системе, и на сайтах.

Когда браузер узнаёт о выборе режима принудительных цветов, он ограничивает цветовую палитру до небольшого набора цветов. С помощью forced-colors можно гибче настраивать поддержку этого режима на сайте.

Пример
<button class="button button-aqua">
<svg
xmlns="https://www.w3.org/2000/svg"
width="36"
height="36"
viewBox="0 0 24 24"
fill="none"
stroke="#000000"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="button-icon"
>
<path d="M2 12C2 6.5 6.5 2 12 2a10 10 0 0 1 8 4"/>
<path d="M5 19.5C5.5 18 6 15 6 12c0-.7.12-1.37.34-2"/>
<path d="M17.29 21.02c.12-.6.43-2.3.5-3.02"/>
<path d="M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4"/>
<path d="M8.65 22c.21-.66.45-1.32.57-2"/>
<path d="M14 13.12c0 2.38 0 6.38-1 8.88"/>
<path d="M2 16h.01"/>
<path d="M21.8 16c.2-2 .131-5.354 0-6"/>
<path d="M9 6.8a6 6 0 0 1 9 5.2c0 .47 0 1.17-.02 2"/>
</svg>
<span class="visually-hidden">
Зайти по отпечатку пальца
</span>
</button>


@media (forced-colors: active) {
.button-icon {
stroke: buttonText;
}
}


Если посмотрите демку в режиме принудительных цветов без директивы и с ней, в первом случае иконка с отпечатком пальца останется чёрной (#000000), а во втором — перекрасится в белый цвет как у кнопки.

👉 @frontendInterview
🔥4
This media is not supported in your browser
VIEW IN TELEGRAM
‼️Всем кодерам посвящается‼️

Code Ready — твоя готовая библиотека кода:
JS шпаргалки, разработка веб-приложений. Лучшие подборки эффектов, анимаций, и многое другое для твоих проектов, сразу с готовым кодом и примером их использования.

🌐Расставь приоритеты, добавь лёгкости в свою работу и становись лучше с @code_read
Please open Telegram to view this post
VIEW IN TELEGRAM
Какими способами можно визуально скрыть элемент в CSS?

В CSS существует несколько способов визуально скрыть элемент от пользователей, сохраняя его доступность для скринридеров и поисковых систем. Ниже перечислены некоторые из часто используемых способов:

1. display: none;
- Свойство display: none; полностью убирает элемент из потока документа, делая его невидимым и не занимающим место на странице.

2. visibility: hidden;
- Свойство visibility: hidden; скрывает элемент, но все равно оставляет его в потоке документа, так что место на странице будет занято.

3. opacity: 0;
- Установка opacity: 0; делает элемент полностью прозрачным, но он остается в потоке и может влиять на макет страницы.

4. position: absolute; left: -9999px;
- Присвоение элементу position: absolute; left: -9999px; перемещает его за пределы видимой области экрана, сохраняя доступность для скринридеров.

5. clip-path: inset(100%); opacity: 0;
- Этот метод использует clip-path: inset(100%); opacity: 0; для скрытия элемента за пределами видимой области.

6. width: 0; height: 0; overflow: hidden;
- Установка width: 0; height: 0; overflow: hidden; может быть использована для скрытия содержимого элемента.

Каждый из этих методов имеет свои особенности и может применяться в зависимости от требуемого поведения элемента на странице.

👉 @frontendInterview
👍13🔥7
Программируй & типизируй

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

В книге рассказывается, как с помощью типизации создавать программное обеспечение, которое не только было бы безопасным и работало без сбоев, но также обеспечивало простоту в сопровождении.
Примеры решения задач, написанные на TypeScript, помогут развить ваши навыки работы с типами, начиная от простых типов данных и заканчивая более сложными понятиями, такими как функторы и монады.

👉 @frontendInterview
👍3👎1
Simple string characters

Вам будет дана строка, и вашей задачей будет вернуть массив чисел, содержащий количество заглавных букв, строчных, цифр и специальных символов.

Пример:

solve("aAbBcC") => [3,3,0,0]
solve("bgA5<1d-tOwUZTS8yQ") => [7,6,3,2]

👉 @frontendInterview
font-family

С помощью font-family можно задать семейство шрифтов, которым будет написан текст. Можно прописать конкретно, например "Arial". А можно задать только желаемый тип: например, любое семейство шрифтов с засечками (serif) или без засечек (sans-serif).

Пример
Допустим, мы хотим, чтобы текст был набран шрифтами семейства PT Sans. Если такое семейство шрифтов не установлено у пользователя, то пускай текст отобразится шрифтами из семейства Arial. Если и такого нет, то пусть будет первое доступное в системе пользователя семейство без засечек:
body {
font-family: "PT Sans", "Arial", sans-serif;
}


Обычно в font-family задают сразу несколько семейств шрифтов, перечисляя их через запятую. На первом месте ставят самую редкую гарнитуру из тех, что хотят использовать для этого элемента. Затем — похожую, но более распространённую. В самом конце — желаемый тип гарнитуры. Браузер проходит по списку слева направо и использует первое найденное на компьютере семейство шрифтов.
👍92
Укажите верный вариант ответа на вопрос с картинки.
Anonymous Quiz
75%
1
6%
2
19%
3
🔥Тест по JavaScript от OTUS 🔥

Хотите изучить JavaScript на продвинутом уровне? Ответьте на 20 вопросов и проверьте, насколько вы готовы к обучению на курсе «JavaScript Developer. Professional»

🔗 Ссылка для прохождения теста

📅 После прохождения теста вы сможете записаться на два бесплатных открытых урока:
- Как разрабатывать CLI на Node.js — 6 марта
- TypeScript в Node.js для server-side приложений — 21 марта

💥 Получите высокую оценку при прохождении теста, сможете забронировать место в мартовской группе курса «JavaScript Developer. Professional» по спеццене!

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru Erid 2SDnjeZMZAx
👎2👍1
column-count

Свойство column-count управляет количеством колонок, на которые будет разбит контент элемента.

Если мы указываем только column-count, браузер думает: «Я разделю этот контент на столько-то колонок во что бы то ни стало».
Если мы указываем одновременно column-count и column-width, например column-count: 4; и column-width: 250px;, то браузер думает так:
- Если в элемент влезут 4 колонки по 250 px, то я отображу ровно 4 колонки, даже если они будут шире 250 px.
- Иначе я отображу столько колонок, сколько получится, но чтобы ширина каждой была не менее 250 px.
- Если ширина всего элемента меньше 250 px, то покажу контент в одну колонку на всю ширину.

В демо ниже вы можете поменять количество колонок у заданного текста. Если выбрать вариант auto, ширина одной колонки составит 160px.

👉 @frontendInterview
👍94
Какой из перечисленных методов является установлением постоянного соединения для обмена данными в реальном времени?
Anonymous Quiz
7%
Long-Polling
85%
Websockets
8%
Server-Sent Events
This media is not supported in your browser
VIEW IN TELEGRAM
scrollIntoView

Метод scrollIntoView позволяет программно прокрутить окно до определённого элемента вне зависимости от положения элемента в окне.

let element = document.querySelector("#about") // в element должен быть любой DOM-элемент на странице
element.scrollIntoView()

У scrollIntoView может быть аргумент типа boolean:
- Если указать true, то скролл будет перемещён чтобы верхняя граница элемента совпала с верхней границе окна.
- Если указать false, то скролл остановится так, чтобы нижняя граница элемента была вровень с нижней границей окна.

А ещё в scrollIntoView() можно передать объект с опциями скролла, где:
- behavior отвечает за анимацию прокрутки. Принимает smooth, чтобы было плавно, по умолчанию резкое auto;
- block за вертикальное выравнивание. Принимает start, center, end и nearest;
- inline за горизонтальное выравнивание. Принимает то же, что и block.

👉 @frontendInterview
👍11