👉 @frontendInterview

Initial letter

Это свойство CSS, которое выбирает первую букву элемента и определяет количество строк, которые будет занимать эта буква.

.subhead::first-letter {
initial-letter: 2;
color: orange;
font-weight: bold;
margin-right: .75em;
}

👉 @frontendInterview

Пять строк кода.

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

👉 @frontendInterview

Strict Mode

Создайте функцию, которая определит, запущена ли она в строгом режиме (strict mode).

👉 @frontendInterview

Псевдоэлементы для подсветки текста

Псевдоэлементы выделения представляют собой части документа, которым присвоен определенный статус, и обычно имеют другой стиль, чтобы указать этот статус пользователю. Например, выбранные части документа обычно выделяются (заданы альтернативные цвета фона и переднего плана или цветовая размывка), чтобы указать их выбранный статус.

::selection: выделенный текст
::target-text: represents text directly targetted by the document URL’s fragment
::spelling-error: содержимое, которое было помечено user-agent как ошибочное
::grammar-error: содержимое, которое было помечено user-agent как грамматически не верное

Последние два псевдоэлемента еще не поддерживаются браузерами.

Эти псевдоэлементы могут принимать свойства:
- color
- background-color
- cursor
- caret-color
- outline
- text-decoration
- text-emphasis-color
- text-shadow

👉 @frontendInterview

👉 @frontendInterview

Scroll Snap

CSS Scroll Snap позволяет привязать положение прокрутки к местоположению или определённым элементам после того, как пользователь прокрутил страницу.

Если относиться к этому ответственно, привязка прокрутки может стать полезным инструментом. Точки привязки CSS позволяют вам включиться во встроенный в браузер процесс работы с прокруткой без ущерба плавности интерфейса.

Свойство хорошо поддерживается браузерами.

👉 @frontendInterview

👉 @frontendInterview

Как определить местоположение пользователя?

Geolocation API позволяет пользователю предоставлять свое местоположение web-приложению. При вызове метода navigator.geolocation.getCurrentPosition() браузер запросит разрешение на передачу данных о геолокации, в случае разрешения будет вызван первый колбэк, в случае отказа - второй.

В примере реализовано получение координат пользователя через Geolocation API и если геолокация не доступна - используется сервис определения местоположения по ip-адресу

👉 @frontendInterview

Совершенный алгоритм

Алгоритмы — это сердце и душа computer science. Без них не обойтись, они есть везде — от сетевой маршрутизации и расчетов по геномике до криптографии и машинного обучения. «Совершенный алгоритм» превратит вас в настоящего профи, который будет ставить задачи и мастерски их решать как в жизни, так и на собеседовании при приеме на работу в любую IT-компанию.

👉 @frontendInterview

Посчитать слова

Вам дана строка, состоящая из нескольких слов и символов. За слова считаются только последовательности из латинских букв, отделенных пробелами. Посчитайте количество таких слов в строке и верните результат.

Примеры:
wordCount("hello there") => 2
wordCount("I'd like to say goodbye") => 6

👉 @frontendInterview

box-sizing

CSS свойство box-sizing определяет как вычисляется общая ширина и высота элемента.

Согласно CSS размеры блока складывается из размера контента, внешних отступов, внутренних отступов и границ. Box-sizing позволяет изменить этот алгоритм, чтобы width и height задавали размеры не контента, а блока.

Расчет размеров блока по умолчанию слегка не очевиден и может причинить немало проблем.

Рассмотрим пример:

 .parent{
   width: 100px;
 }
 .child{
   width: 50%;
   padding: 10px;
 }

Кажется что ширина блока .child должна быть равна 50px, но по факту ширина будет равна половине ширины родителя + левый padding + правый padding = 70px. Разумеется, можно изначально указать размер блока calc(50% - 20px), но это не всегда удобно.

Для решения этой проблемы часто используется переопределение box-sizing для всех элементов, делается это элементарно:

 *{box-sizing: border-box}

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