Успел на созвон

👉 @frontendInterview

Атрибут autofocus в HTML5: нужно ли указывать значение?

HTML-атрибут autofocus позволяет немедленно после загрузки страницы установить фокус на конкретном элементе. Оба варианта — autofocus="autofocus" и autofocus — верны, однако предпочтение отдается короткой записи autofocus для сокращения и очистки кода.
<input type="text" autofocus>
При этом, текстовое поле станет активным сразу после завершения загрузки страницы.

👉 @frontendInterview

Жемчужины проектирования алгоритмов: функциональный подход

В этой книге Ричард Бёрд представляет принципиально новый подход к проектированию алгоритмов, а именно проектирование посредством формального вывода. Основное содержание книги разделено на 30 коротких глав, называемых жемчужинами, в каждой из которых решается конкретная программистская задача. Эти задачи, некоторые из них абсолютно новые, происходят из таких разнообразных источников, как игры и головоломки, захватывающие комбинаторные построения и более традиционные алгоритмы сжатия данных и сопоставления строк. Каждая жемчужина начинается с постановки задачи, формулируемой на функциональном языке пpoгpaммиpoвaния Haskell, чрезвычайно мощном и в то же время лаконичном, позволяющем легко и просто выражать алгоритмические идеи. Новшество книги состоит в том, что каждое решение формально вычисляется из исходной постановки задачи посредством обращения к законам функционального программирования.

👉 @frontendInterview

isItLetter

Создайте функцию, которая проверяет, является ли переданный символ буквой.

Примеры:
isItLetter('a') => true, `'a' is a letter`
isItLetter('1') => false, `'1' is not a letter`

👉 @frontendInterview

​Как вывести картинку заданных размеров без искажений?

Для элемента <img> размеры картинки задаются с помощью атрибутов width и height.
<img src="image/redfox.jpg" alt="Лиса" width="500" height="286">

Если оставить только один размер, к примеру, ширину равную 100%, то браузер высоту вычислит самостоятельно и выведет картинку с сохранением исходных пропорций.

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

- с помощью свойства object-fit;
- вывести изображение в виде фона через свойство background.

Использование свойства object-fit
Свойство object-fit применяется для масштабирования картинки, ограниченной заданными размерами. Значение cover у этого свойства заставляет изображение полностью заполнить область указанных размеров при сохранении пропорций картинки.
.hero {
width: 100%; /* Ширина */
height: 300px; /* Высота */
object-fit: cover; /* Изображение вписывается в вышеуказанные размеры */
}

Центр картинки при масштабировании по умолчанию остаётся в центре области. Не для всех изображений это является подходящим, поэтому с помощью свойства object-position можно задать выравнивание картинки относительно её края
object-position: center top; /* Положение изображения */

👉 @frontendInterview

👉 @frontendInterview

Как изменить вид нажатой кнопки?

Чтобы пользователь понимал, что его щелчок по кнопке сработал, в момент щелчка меняют вид самой кнопки. Для этого используется псевдокласс :active, который добавляется к селектору button. Стилевые правила для этого селектора определяют вид нажатой кнопки

Результат данного примера показан на рисунке ниже. Для селектора button:active используется свойство box-shadow со значением inset, оно создаёт внутреннюю полупрозрачную тень, за счёт чего кнопка кажется вдавленной.

👉 @frontendInterview

Как сохранять мотивацию при разработке в одиночку

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

👉 @frontendInterview

Когда решил удалить из кода костыль

👉 @frontendInterview

Как убрать рамку у кнопок?

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

Сама рамка устанавливается через универсальное свойство border, оно одновременно определяет толщину рамки, её стиль и цвет. Соответственно, чтобы у кнопки убрать рамку есть три способа:

- задать нулевую толщину рамки - Используем свойство border-width с нулевым значением.
- указать стиль рамки как none или hidden - За стиль рамки отвечает свойство border-style.
- установить прозрачный цвет рамки - В CSS для прозрачного цвета зарезервировано ключевое слово transparent. Так что для рамки пишем свойство border-color с этим значением.

👉 @frontendInterview

Современный подход к программной архитектуре: сложные компромиссы

В архитектуре программного обеспечения нет простых решений. Напротив, есть масса сложностей — задач и проблем, для решения которых нет готовых ответов и приходится выбирать между различными компромиссами. Эта книга научит вас критически относиться к компромиссам, связанным с распределенными архитектурами. Опытные архитекторы Нил Форд, Марк Ричардс, Прамод Садаладж и Жамак Дехгани обсуждают стратегии выбора архитектуры, подходящей для тех или иных случаев. История Sysops Squad — вымышленной группы специалистов — позволяет исследовать все аспекты выбора архитектуры: от определения степени гранулярности сервисов, управления рабочими процессами и оркестрации, разделения контрактов и управления распределенными транзакциями до оптимизации таких операционных характеристик, как масштабируемость, адаптируемость и производительность.

👉 @frontendInterview

Strip Comments

Создайте функцию, которая удаляет весь текст, следующий за любым из переданных маркеров комментариев. Любые пробелы в конце строки также нужно удалить.

Пример
var result = solution("apples, pears # and bananas\ngrapes\nbananas !apples", ["#", "!"])
// result should == "apples, pears\ngrapes\nbananas"

👉 @frontendInterview

Как добавить тень к тексту?

Тень к тексту добавляется с помощью стилевого свойства text-shadow. С помощью его параметров можно установить положение тени, степень её размытия и цвет тени

Обязательных параметров у text-shadow два:
- смещение тени по горизонтали, значение может быть положительным (тень будет справа от текста) или отрицательным (тень будет слева от текста);
- смещение тени по вертикали, значение может быть положительным (тень будет ниже текста) или отрицательным (тень будет выше текста).

Остальные два необязательных параметра указывают размытие тени и её цвет.

Например, чтобы добавить тень к заголовку, можете использовать следующий код:
h1 {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

В данном примере тень будет смещена на 2 пикселя вправо и вниз от текста, размытие тени составит 4 пикселя, а цвет тени будет полупрозрачным чёрным (rgba(0, 0, 0, 0.5)).

👉 @frontendInterview

👉 @frontendInterview

​Как увеличить картинку при наведении?

За изменение масштаба изображения отвечает свойство transform с функцией scale(). В качестве её значения указывается число больше 1 для увеличения масштаба и меньше 1 — для уменьшения масштаба. К примеру, число 1.2 увеличивает масштаб на 20%.
Чтобы картинка увеличивалась при наведении на неё курсора мыши, свойство transform следует привязать к псевдоклассу :hover
.scale {
transition: 1s; /* Время эффекта */
}
.scale:hover {
transform: scale(1.2); /* Увеличиваем масштаб */
}

Если требуется масштабировать картинку, не увеличивая при этом её размеры, то каждое изображение надо поместить в <div>. Для него задать свойство display со значением inline-block, чтобы <div> стал размером с изображение; а также overflow со значением hidden, чтобы пряталось всё за пределами <div>
.scale {
display: inline-block; /* Строчно-блочный элемент */
overflow: hidden; /* Скрываем всё за контуром */
}
.scale img {
transition: 1s; /* Время эффекта */
display: block; /* Убираем небольшой отступ снизу */
}
.scale img:hover {
transform: scale(1.2); /* Увеличиваем масштаб */
}

👉 @frontendInterview