Фронтенд Гайд
7.25K subscribers
615 photos
308 videos
286 links
Канал для фронтендеров, много полезных лайфхаков, фичей, макетов, тестов!

Все представлено в виде готового кода, бери и юзай в своем проекте.

По всем вопросам: @it_dashka
Реклама: https://telega.in/channels/frontend_dev5/card
Download Telegram
🤔 Какой метод JavaScript можно использовать для поиска первого элемента в DOM, который соответствует CSS селектору?
Anonymous Poll
16%
document.getElement()
69%
document.querySelector()
3%
document.findAll()
12%
document.getElementById()
This media is not supported in your browser
VIEW IN TELEGRAM
⚛️ Pure CSS Gravity Button – Красивая кнопка с эффектом притяжения "частиц". Она имеет внешнюю тень и внутренний градиент.
🤔 Какой атрибут HTML используется для определения стилей, написанных прямо в элементе?
Anonymous Poll
82%
style
6%
class
8%
styles
4%
stylesheet
HTML вопрос: Какой тег представляет собой контейнер, внутри которого располагаются элементы <option>, объединенные в одну группу?
Anonymous Poll
13%
options
11%
optionsgroup
7%
optgroup
8%
options-group
49%
Такой тег существует, но здесь не упомянут
11%
Посмотреть ответы
Требуются парни и девушки в возрасте 19–40 лет, желающие работать в сфере IT.

Опыт в программировании не нужен.

Завтра запускаем бесплатный онлайн-интенсив по Frontend-разработке, где будем показывать, как разрабатывать сайты и веб-приложения.

За 7 дней обучения ты:

1. Создашь полноценный веб-сайт на HTML и CSS;
2. Оживишь страницу с помощью JavaScript;
3. Используешь фронтенд-фреймворк Angular;
4. Подключишь Backend и загрузишь сайт на хостинг;
5. Получишь советы по доработке своего проекта;
6. Узнаешь сколько можно зарабатывать и как работать;
7. Получишь в подарок чек-лист «45 мест для поиска работы».

А главное, ты увидишь, что разрабатывать сайты и приложения не так сложно, как кажется. И поймёшь, как тебе развиваться в этой профессии, чтобы уже в следующем году зарабатывать от 1000$ на вёрстке сайтов.

👉 Проскочить на интенсив бесплатно

🔥 С нас обучение, практика и помощь с выходом на фриланс.
🗿6
📌 В чем различие методов call apply bind?

Методы call, apply и bind принадлежат к функциональному объекту Function и используются для указания контекста this при вызове функции. Хотя все три метода позволяют контролировать значение this внутри функции, между ними существуют ключевые различия в способе использования и поведении.

🤔 Сall

Вызывает функцию, явно устанавливая this в первом аргументе. Остальные аргументы передаются в вызываемую функцию как есть.

Пример:
function greet(message, name) {
console.log(${message}, ${name}. This is ${this});
}

greet.call("Earth", "Hello", "Alice"); // "Hello, Alice. This is Earth"


Здесь он используется для вызова функции greet с this, установленным в "Earth", и двумя дополнительными аргументами "Hello" и "Alice".

🤔 Apply

Очень похож на call, но принимает аргументы в виде массива, а не по отдельности.

Пример:
function greet(message, name) {
console.log(
${message}, ${name}. This is ${this}
);
}

greet.apply("Earth", ["Hello", "Alice"]); // "Hello, Alice. This is Earth"


В этом случае он вызывает функцию greet с this, установленным в "Earth", и аргументами, переданными в виде массива.

🤔 Bind

Создаёт новую функцию, которая, когда она вызывается, имеет установленный контекст this, указанный в первом аргументе. В отличие от call и apply, bind не вызывает функцию сразу, а возвращает новую функцию, которую можно вызвать позже.

Пример:
function greet(message, name) {
console.log(
${message}, ${name}. This is ${this}
);
}

const greetEarth = greet.bind("Earth", "Hello", "Alice");
greetEarth(); // "Hello, Alice. This is Earth"


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

🤔 Итог:

call вызывает функцию с указанным контекстом this и отдельными аргументами.

apply аналогичен call, но принимает аргументы в виде массива.

bind создаёт новую функцию с предустановленным контекстом this и аргументами, если они были предоставлены, но не вызывает её немедленно.

Эти методы позволяют более гибко управлять контекстом выполнения функций, что является мощным инструментом, особенно при работе с объектно-ориентированным кодом и асинхронными вызовами.
🤔 Какой тег HTML используется для создания выпадающего списка?
Anonymous Poll
20%
<dropdown>
55%
<select>
16%
<list>
9%
<option>
🤨3🤓3
🤔 Какой объект JavaScript предоставляет функциональность для работы с URL текущего документа?
Anonymous Poll
28%
document.location
37%
window.location
17%
navigator.url
19%
document.href
JavaScript. Каким будет результат?
[1, 2, 3, 4].reduce((x, y) => console.log(x, y));
Anonymous Poll
8%
1 2, 3 3, 6 4
21%
1 2, 2 3, 3 4
29%
1 undefined, 2 undefined, 3 undefined, 4 undefined
11%
1 2, undefined 3, undefined 4
31%
Посмотреть ответы
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️ Красивая анимированная шкала рейтинга на JS + CSS
CSS. Какое свойство устанавливает количество колонок в многоколоночном тексте?
Anonymous Poll
33%
columns
24%
text-columns
9%
columns-number
26%
column-count
8%
Посмотреть ответы
This media is not supported in your browser
VIEW IN TELEGRAM
🚴‍♀️ Оригинальный прелоадер с велосипедом для вашей страницы.
2
📌 В чем разница == и === ?

Операторы == (равно) и === (строго равно) используются для сравнения значений, но работают по-разному, что важно понимать для написания надёжного и предсказуемого кода.

🤔 Оператор == (равно)

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

Примеры:
'2' == 2 // true, так как строка '2' преобразуется в число 2 перед сравнением
0 == false // true, так как 0 и false считаются эквивалентными
null == undefined // true, специальное правило языка


🤔 Оператор ===(строго равно)

В отличие от ==, он сравнивает и значения, и типы без приведения типов. Если типы различаются, оператор немедленно возвращает false, не пытаясь преобразовать один тип в другой. Это делает сравнение более строгим и предсказуемым.

Примеры:
'2' === 2 // false, так как типы различаются
0 === false // false, разные типы: число и булево значение
null === undefined // false, разные типы


🤔 Почему важно знать разницу

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

🤔 Итог:

== сравнивает значения, приводя их к общему типу, что может привести к неожиданным результатам из-за неявного приведения типов. === сравнивает как значения, так и типы без приведения типов, обеспечивая более строгое и предсказуемое сравнение. Использование === рекомендуется для большей надёжности и читабельности кода.
👍5
👨‍💻16😱3👍1
CSS. Выберите значение свойства opacity, которое не сработает
Anonymous Poll
2%
0.3
24%
.3
26%
30%
45%
Все перечисленные сработают
3%
Посмотреть ответы