👉 @frontendInterview

​Какими способами можно визуально скрыть элемент в 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

Программируй & типизируй

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

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

👉 @frontendInterview

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 задают сразу несколько семейств шрифтов, перечисляя их через запятую. На первом месте ставят самую редкую гарнитуру из тех, что хотят использовать для этого элемента. Затем — похожую, но более распространённую. В самом конце — желаемый тип гарнитуры. Браузер проходит по списку слева направо и использует первое найденное на компьютере семейство шрифтов.

👉 @frontendInterview

🔥Тест по 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

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

👉 @frontendInterview

👉 @frontendInterview

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

TypeScript. Подробное Руководство (4.9 beta)

TypeScript — это язык программирования со статической типизацией, позиционирующий себя как язык, расширяющий возможности jаvascript. Typescript код компилируется в jаvascript код, который можно запускать как на клиентской стороне (браузер), так и на стороне сервера (Node.js). Мультиплатформенный компилятор TypeScript отличается высокой скоростью компиляции и публикуется под лицензией Apache, а в его создании принимают участие разработчики со всего мира, что привело к традиции выпускать новую версию каждые два месяца. Несмотря на такую периодичность, версии долгое время сохраняют совместимость, а по истечению долгого времени устаревшее поведение остается доступным при активизации специальных флагов компилятора.

👉 @frontendInterview

validate PIN code

Банкоматы позволяют использовать 4-6-значные PIN-коды, а PIN-коды не могут содержать ничего, кроме 4-х цифр или 6-ти цифр.
Если функция передана корректной PIN-строке, верните true, иначе верните false.

Пример:
"1234" --> true
"12345" --> false
"a234" --> false

👉 @frontendInterview

Что такое SVG-спрайты, как их создавать, когда применять и как они могут помочь вам в улучшении производительности вашего сайта.

SVG-спрайт — это файл, получаемый в результате объединения нескольких файлов SVG. Файл-спрайт используется для сокращения количества запросов к сети — вместо загрузки нескольких файлов, грузится только один. Также для уменьшении размеров и читаемости HTML-кода при многократном использовании векторной графики в разметке.

Как создать SVG-спрайт
Предположим что уже имеется подготовленный набор отдельных SVG-иконок. Перейдём к формированию SVG-спрайта.

Для начала создадим отдельный файл с расширением .svg. Внутрь созданного файла добавим обёртку для SVG-файла состоящую из тега <svg> и атрибута xmlns, указывающего используемый диалект XML.

 <svg xmlns="https://www.w3.org/2000/svg">
  ...
 </svg>

Далее каждая SVG-иконка помещается внутрь тега <symbol>, который предоставляет возможность группировать элементы. При этом данные объекты не отображаются до тех пор пока на них не будут ссылаться при помощи тега <use>.

Код ниже сокращён для удобства чтения.

 <svg xmlns="https://www.w3.org/2000/svg">
  ...
  <symbol id="social-facebook" viewBox="0 0 6 12">
    <path d="M1.09903 2.72854C1.09903 ..."/>
  </symbol>

  <symbol id="social-twitter" viewBox="0 0 16 11">
    <path d="M13.3758 4.62011C14.2231 ..."/>
  </symbol>
  ...
 </svg>

Каждый элемент <symbol> содержит атрибут id с уникальным идентификатором, который будет использоваться для ссылки на иконку в HTML. Также, каждая иконка содержит атрибут viewBox, который определяет размеры окна отображения. Управляя данным атрибутом, можно указать в какой части холста находится конкретная иконка. Это позволяет использовать в спрайте иконки разных размеров и масштабировать их.

Чтобы использовать иконку из спрайта на странице, нужно добавить внутрь тега <svg> тег <use> с обязательным атрибутов href. Данный атрибут должен ссылаться на файл спрайта с указанием id символа, содержащего нужное изображение.

 <svg class="social-icon" viewBox="0 0 24 24" width="24" height="24">
   <use href="sprite.svg#social-vk" x="0" y="0"></use>
 </svg>

Полученные таким образом элементы можно стилизовать с помощью CSS, как и обычные HTML-элементы.

👉 @frontendInterview

Драг-н-дроп для загрузки файлов

Задача
Загрузка пользователем файлов на сервер — часто встречающаяся задача при создании сайтов и приложений. Текущие возможности JavaScript позволяют нам выбирать нужный файл простым его перетаскиванием в установленную область страницы браузера.

Широкую поддержку событий перетаскивания обеспечивают современные десктопные браузеры, среди мобильных браузеров такая поддержка пока низкая. Поэтому, если необходимо реализовать передачу файла на сервер также и для пользователей мобильных устройств, стоит добавлять возможность выбрать файл с использованием элемента <input type="file">.

В статье будет рассматриваться вариант выбора файла с использованием перетаскивания.

Загрузка файла на сервер состоит из трёх частей:
1. Выбор пользователем файла на своём устройстве.
2. Проверка параметров обработки файла и формирование данных с обращением к серверу.
3. Обработка данных на сервере и отправка ответа клиенту.

👉 @frontendInterview