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

Чтобы пользователь понимал, что его щелчок по кнопке сработал, в момент щелчка меняют вид самой кнопки. Для этого используется псевдокласс :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

Перед тем, как выбрать оффер, пойми себя

Представьте, что вам нужно решить, сменить работу или остаться. Какую компанию выберете? Ту, где платят больше?

Если бы только оклад решал, все бы хотели в компанию А, а в компанию Б никто бы не шёл. Но кто-то выбирает крипту, а кто-то госорганизацию. Как не оказаться случайно в стартапе, если вы хотите стабильности на годы — попробуем ответить в статье. Обойдусь без коучинга, мы научимся определять, что важно для нас, любимых.

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

👉 @frontendInterview

📚 Здесь собраны все вопросы, которые могут спросить на собеседовании. Теперь можно легко получить оффер, подготовившись к самым популярным вопросам. Просто выбери своё направление:

1. Frontend / JavaScript
2. Python
3. Java
4. Тестировщик QA
5. Data Science
6. DevOps
7. C#
8. С/C++
9. Golang
10. PHP
11. Kotlin
12. Swift

Наглядное пособие по горячим клавишам

👉 @frontendInterview

Почему вместо кириллического текста выводятся ромбики?

Иногда при отображении в браузере веб-страницы вместо текста можно наблюдать ромбики или другие символы. Но совсем не тот текст, который мы ожидаем

Такое происходит при сохранении файла в неверной кодировке, например, в ANSI. Недостаточно добавить <meta charset="utf-8"> в код, нужно чтобы и сам HTML-файл был сохранён в кодировке UTF-8. Для этого следует использовать редакторы, которые поддерживают разные кодировки и могут преобразовать текст из одной кодировки в другую. К примеру, в популярном редакторе Notepad++ под Windows для нужной кодировки следует выбрать меню Кодировки > Преобразовать в UTF-8

👉 @frontendInterview

Блистательный Agile. Гибкое управление проектами с помощью Agile, Scrum и Kanban

Что такое гибкое управление проектами? Нужно ли оно вашему проекту? Будет ли от этого выгода? Хотите разобраться, как работает гибкое управление проектами и воспользоваться этим мощным подходом? Тогда вы выбрали правильную книгу. «Блистательный Agile» – это не очередной рассказ о методах и процессах, основное внимание уделено реальным примерам использования Agile в бизнес-средах.

👉 @frontendInterview