Frontend Interview - собеседования по Javascript / Html / Css
11.9K subscribers
2.07K photos
111 videos
313 files
511 links
Канал для подготовки к собеседованиям по фронтенду

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

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

Канал в реестре РКН:
https://rknn.link/su
Download Telegram
Как обычный парень может стать гением Кремниевой долины

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

Вы узнаете, какова роль интеллекта, гениальности и IQ-тестирования в достижении успеха в сфере информационных технологий; овладеете творческими навыками, основанными на нейробиологии, усовершенствуете когнитивные механизмы и поведенческие реакции; изучите особенности образа мышления, характера и поведения техногениев; поймете, почему им свойственно быть белыми воронами, познакомитесь с их профессиональными секретами и узнаете, как они способствовали созданию успешного бизнеса и как можно применить их в своей деятельности; прочитаете истории бурного роста Dropbox, Snapchat, Groupon и многих других высокотехнологичных компаний.
Maximum and minimum

Создайте две функции - max и min, которые возвращают соответственно максимальное и минимальное из переданных в них числа. Нельзя использовать Math.max и Math.min.

Примеры:
max(1,2,3,4) //returns 4
max(1,2,3,['4']) //returns 4; note it returned 4 not '4'
max(1,2,[3,4]) //returns 4
max(1,2,[3,[4]]) //returns 4
max(1,2,[3,['4r']]) //returns NaN
max([[],[-4]]) // returns -4
max() or max([]) //returns 0


👉 @frontendInterview
5👍2👎2
Чем удобен селектор :is()

Функция-псевдокласс :is() принимает один или несколько селекторов в качестве аргумента. Браузер при чтении применяет стили к любому из селекторов-аргументов.

Полностью поддерживается во всех стабильных браузерах с января 2021 года. Чуть более широкую поддержку можно получить, если использовать устаревшие версии с префиксами :-webkit-any(), :-moz-any() и :matches().

Применяем стили по наведению курсора на абзацы, вложенные в <header>, <main> или <footer>:
:is(header, main, footer) p:hover {
color: red;
cursor: pointer;
}


Иначе этот селектор пришлось бы записать гораздо более многословно:
header p:hover,
main p:hover,
footer p:hover {
color: red;
cursor: pointer;
}


👉 @frontendInterview
👍174
Какова ширина элемента h1?
Anonymous Quiz
29%
200px
59%
100px
12%
100vw
👍17👎5🔥3
🔥Тесты для подготовки к собеседованию🔥
Выбери своё направление:

1. Frontend
2. Python
3. Java
4. Тестировщик QA
5. Data Science
6. DevOps
7. C#
8. С/C++
9. Golang
10. PHP
11. Kotlin
12. Swift
Please open Telegram to view this post
VIEW IN TELEGRAM
👎1
line-clamp

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

Пример:
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}


👉 @frontendInterview
👍1
👩‍💻 Хотите научиться создавать API с использованием GraphQL и NestJS?

Ждём вас на открытом практическом уроке от OTUS, где вы получите теоретические знания о GraphqL и NestJS и практические навыки по созданию и интеграции GraphQL с NestJS.

Спикер Николай Лапшин — опытный разработчик на нескольких языках, архитектор, тимлид и преподаватель.

Встречаемся 25 июня в 20:00 мск в преддверии старта курса «JavaScript Developer. Professional».
Все участники вебинара получат специальную цену на обучение!

➡️ Регистрируйтесь прямо сейчас, чтобы не пропустить бесплатный урок: https://vk.cc/cxL4vE

🎁 Только до 23 июня скидка 10%, подробности у наших менеджеров.

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576 erid 2SDnjdDCbFQ
👎1
Разбираем как решать задачи на LeetCode

Примеры решений
Пояснения

Выбери своё направление:

1. Python
2. JavaScript
3. Java
4. C#
5. Golang
6. С/C++
7. PHP
8. Kotlin
9. Swift
👍2👎1
Вечный покой .env: как эффективнее удалять закомиченный файл .env из Git-репозитория

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

👉 @frontendInterview
👍4👎1
Какой из следующих фрагментов кода возвращает первую форму на странице?
Anonymous Quiz
60%
document.forms[0]
11%
document.form
7%
document.firstForm
22%
document.getForm(0)
👍7
Атрибут autofocus в HTML5: нужно ли указывать значение?

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

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

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

👉 @frontendInterview
5👎1
isItLetter

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

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


👉 @frontendInterview
👍4
Как вывести картинку заданных размеров без искажений?

Для элемента <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
👍71
Что выведется в консоль?
Anonymous Quiz
17%
5
57%
10
18%
undefined
7%
Ошибка
👍14