Как включить в расчёт ширины и высоты элемента его border?
Anonymous Quiz
2%
display: block
12%
box-sizing: content-box
4%
box-sizing: fit-content
82%
box-sizing: border-box
Какой элемент будет рисоваться выше других? Или ниже остальных? Решает браузер по определённым правилам.
Контекст наложения — это концепция трёхмерного расположения элементов по оси z относительно пользователя, смотрящего на экран.
Самый базовый контекст наложения, существующий на любой странице формируется корневым элементом <html>. Все элементы внутри этого контекста сортируются и располагаются с оглядкой друг на друга.
Но мы можем создавать контексты наложения не только на странице целиком, но и в каждом отдельном блоке. Тогда вложенные в него дочерние блоки будут сортироваться и располагаться уже по правилам этого нового, родительского контекста наложения.
Новый контекст наложения формируется если:
1. это корневой элемент (<html>),
2. элемент позиционирован абсолютно (position: absolute) или относительно (position: relative) со свойством z-index, значение которого не auto,
3. флекс-элемент со свойством z-index, значение которого не auto и чей родительский элемент имеет свойство display: flex или display: inline-flex,
4. элементу задано свойство opacity со значением меньше 1,
5. элементу задано свойство transform со значением не none,
6. элементу задано свойство mix-blend-mode со значением не normal,
7. элементу задано свойство filter со значением не none,
8. элементу задано свойство isolation со значением isolate,
9. элемент с position: fixed,
10. элементу задано свойство will-change или аналогичный атрибут,
11. элементу задано свойство -webkit-overflow-scrolling со значением touch.
Остальные элементы, не создающие собственный контекст наложения, используют родительский контекст.
Обычно достаточно запомнить первые три сценария и чуть-чуть помнить про следующие два. Если браузер рисует что-то, чего вы не ожидали, можно всегда вернуться и подсмотреть остальные.
👉 @frontendInterview
Контекст наложения — это концепция трёхмерного расположения элементов по оси z относительно пользователя, смотрящего на экран.
Самый базовый контекст наложения, существующий на любой странице формируется корневым элементом <html>. Все элементы внутри этого контекста сортируются и располагаются с оглядкой друг на друга.
Но мы можем создавать контексты наложения не только на странице целиком, но и в каждом отдельном блоке. Тогда вложенные в него дочерние блоки будут сортироваться и располагаться уже по правилам этого нового, родительского контекста наложения.
Новый контекст наложения формируется если:
1. это корневой элемент (<html>),
2. элемент позиционирован абсолютно (position: absolute) или относительно (position: relative) со свойством z-index, значение которого не auto,
3. флекс-элемент со свойством z-index, значение которого не auto и чей родительский элемент имеет свойство display: flex или display: inline-flex,
4. элементу задано свойство opacity со значением меньше 1,
5. элементу задано свойство transform со значением не none,
6. элементу задано свойство mix-blend-mode со значением не normal,
7. элементу задано свойство filter со значением не none,
8. элементу задано свойство isolation со значением isolate,
9. элемент с position: fixed,
10. элементу задано свойство will-change или аналогичный атрибут,
11. элементу задано свойство -webkit-overflow-scrolling со значением touch.
Остальные элементы, не создающие собственный контекст наложения, используют родительский контекст.
Обычно достаточно запомнить первые три сценария и чуть-чуть помнить про следующие два. Если браузер рисует что-то, чего вы не ожидали, можно всегда вернуться и подсмотреть остальные.
👉 @frontendInterview
👍3❤1
Big O
Нотация Big O («О» большое) — это способ описания производительности функции без измерения времени ее выполнения. Вместо того, чтобы засекать, сколько секунд выполняется функция от начала до конца, Big O показывает, как меняется время ее выполнения по мере увеличения размера входных данных. Этот подход помогает понять, как программа будет вести себя при разных объемах входящей информации.
В этой статье я разберу четыре наиболее часто встречающиеся категории нотации Big O: константную, логарифмическую, линейную и квадратичную. Не переживайте, если эти термины пока ничего вам не говорят — мы подробно рассмотрим каждый из них и наглядно визуализируем в процессе.
👉 @frontendInterview
Нотация Big O («О» большое) — это способ описания производительности функции без измерения времени ее выполнения. Вместо того, чтобы засекать, сколько секунд выполняется функция от начала до конца, Big O показывает, как меняется время ее выполнения по мере увеличения размера входных данных. Этот подход помогает понять, как программа будет вести себя при разных объемах входящей информации.
В этой статье я разберу четыре наиболее часто встречающиеся категории нотации Big O: константную, логарифмическую, линейную и квадратичную. Не переживайте, если эти термины пока ничего вам не говорят — мы подробно рассмотрим каждый из них и наглядно визуализируем в процессе.
👉 @frontendInterview
🔥1
Что показывает Call Stack в инструментах разработчика?
Anonymous Quiz
2%
Список всех изображений на странице
91%
Последовательность вызовов функций
6%
Значения переменных в реальном времени
2%
Список загруженных CSS-файлов
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Немного не договорили, что стек с которым придется работать был актуален 10 лет назад
👉 @frontendInterview
👉 @frontendInterview
🔥3
Как изменить стили кнопок с атрибутом disabled?
C атрибутом
Пример использования Селектора [disabled]
Этот селектор выбирает все элементы, у которых присутствует атрибут
Пример использования Псевдокласса :disabled
Этот селектор выбирает все элементы, которые находятся в состоянии
Комбинированный подход
Вы можете комбинировать селекторы атрибутов с другими селекторами для более точного применения стилей.
👉 @frontendInterview
C атрибутом
disabled, используя селекторы атрибутов. Селектор [disabled] позволяет выбрать все элементы, которые имеют этот атрибут, а селектор :disabled позволяет выбрать все элементы, которые находятся в состоянии disabled.Пример использования Селектора [disabled]
Этот селектор выбирает все элементы, у которых присутствует атрибут
disabled.button[disabled] {
background-color: gray;
color: white;
border: 1px solid #ccc;
cursor: not-allowed; /* Указывает, что элемент недоступен для взаимодействия */
opacity: 0.6; /* Уменьшает непрозрачность */
}Пример использования Псевдокласса :disabled
Этот селектор выбирает все элементы, которые находятся в состоянии
disabled.button:disabled {
background-color: gray;
color: white;
border: 1px solid #ccc;
cursor: not-allowed;
opacity: 0.6;
}Комбинированный подход
Вы можете комбинировать селекторы атрибутов с другими селекторами для более точного применения стилей.
/* Стили для кнопок с классом .special, которые имеют атрибут disabled */
button.special[disabled] {
background-color: darkgray;
color: black;
border: 1px dashed #999;
cursor: not-allowed;
opacity: 0.7;
}
👉 @frontendInterview
👍2🔥2
Чистый Agile. Основы гибкости
Автор: Роберт Мартин
Agile — это всего лишь небольшая подборка методов и инструментов, помогающая небольшим командам программистов управлять небольшими проектами,… но приводящая к большим результатам, потому что каждый крупный проект состоит из огромного количества кирпичиков. Пять десятков лет работы с проектами всех мыслимых видов и размеров позволяют Дяде Бобу показать, как на самом деле должен работать Agile. Если вы хотите понять преимущества Agile, не ищите лёгких путей — нужно правильно применять Agile. «Чистый Agile» расскажет, как это делать разработчикам, тестировщикам, руководителям, менеджерам проектов и клиентам.
👉 @frontendInterview
Автор: Роберт Мартин
Agile — это всего лишь небольшая подборка методов и инструментов, помогающая небольшим командам программистов управлять небольшими проектами,… но приводящая к большим результатам, потому что каждый крупный проект состоит из огромного количества кирпичиков. Пять десятков лет работы с проектами всех мыслимых видов и размеров позволяют Дяде Бобу показать, как на самом деле должен работать Agile. Если вы хотите понять преимущества Agile, не ищите лёгких путей — нужно правильно применять Agile. «Чистый Agile» расскажет, как это делать разработчикам, тестировщикам, руководителям, менеджерам проектов и клиентам.
👉 @frontendInterview
isItLetter
Создайте функцию, которая проверяет, является ли переданный символ буквой.
Примеры:
👉 @frontendInterview
Создайте функцию, которая проверяет, является ли переданный символ буквой.
Примеры:
isItLetter('a') => true, `'a' is a letter`
isItLetter('1') => false, `'1' is not a letter`👉 @frontendInterview
🤔1
Какая разница между композицией и наследованием?
Наследование представляет собой механизм, при котором один класс (подкласс или производный класс) наследует свойства и методы от другого класса (суперкласса или базового класса). Подкласс может расширить или изменить функциональность суперкласса. Это позволяет создавать иерархию классов, где подклассы наследуют общие атрибуты и методы от своих суперклассов.
Композиция представляет собой механизм, при котором объект содержит ссылки на другие объекты, называемые компонентами. Вместо того, чтобы наследовать функциональность, объекты используют функциональность компонентов, которые могут быть созданы независимо друг от друга. Это позволяет создавать объекты, состоящие из множества независимых компонентов, и изменять их поведение, комбинируя различные компоненты.
В идеале, выбор между композицией и наследованием зависит от конкретных требований вашей системы и ее дизайна. Оба подхода имеют свои преимущества и недостатки, и иногда их можно комбинировать для достижения лучших результатов.
👉 @frontendInterview
Наследование представляет собой механизм, при котором один класс (подкласс или производный класс) наследует свойства и методы от другого класса (суперкласса или базового класса). Подкласс может расширить или изменить функциональность суперкласса. Это позволяет создавать иерархию классов, где подклассы наследуют общие атрибуты и методы от своих суперклассов.
Композиция представляет собой механизм, при котором объект содержит ссылки на другие объекты, называемые компонентами. Вместо того, чтобы наследовать функциональность, объекты используют функциональность компонентов, которые могут быть созданы независимо друг от друга. Это позволяет создавать объекты, состоящие из множества независимых компонентов, и изменять их поведение, комбинируя различные компоненты.
В идеале, выбор между композицией и наследованием зависит от конкретных требований вашей системы и ее дизайна. Оба подхода имеют свои преимущества и недостатки, и иногда их можно комбинировать для достижения лучших результатов.
👉 @frontendInterview
👍2
Как frontend-разработчику получить оффер в Bigtech?
Ты вроде бы уже не джун, но всё равно чувствуешь, что топчешься на месте? Рынок перегрет, требований всё больше, а откликов — всё меньше? На собесах валят на алгоритмах или просят "нарисовать" архитектуру, как будто ты ведущий.
При этом вокруг кто-то постоянно получает офферы в Яндекс или VK, а у тебя не получается даже дойти до финального этапа? Хочется стабильности, интересных задач и наконец-то попасть в сильную команду...
В своем канале:
👉 публикую видео с решением задач, которые прямо сейчас дают крупные компании на собеседованиях
👉даю примеры по прохождению собеседований
👉разбираю резюме и докручиваю резюме подписчиков
👉и просто создаю дружелюбное, комфортное сообщество, где коллеги всегда готовы подсказать и поддержать
🎁В закрепе тебя ждёт подборка из 60 задач, которые сейчас дают на собеседованиях Яндекс, Т-Банк и другие крупные IT игроки.
Подписывайся и получай максимум пользы, а нас уже больше 3500 🤓: frontend_punks
Реклама, erid: 2W5zFGjSGm6 ИП Галактионов Тихон Витальевич, ИНН 771618975809
Ты вроде бы уже не джун, но всё равно чувствуешь, что топчешься на месте? Рынок перегрет, требований всё больше, а откликов — всё меньше? На собесах валят на алгоритмах или просят "нарисовать" архитектуру, как будто ты ведущий.
При этом вокруг кто-то постоянно получает офферы в Яндекс или VK, а у тебя не получается даже дойти до финального этапа? Хочется стабильности, интересных задач и наконец-то попасть в сильную команду...
Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Помогаю устроиться на хорошие позиции в Bigtech и сопровождаю на испытательном сроке.
В своем канале:
👉 публикую видео с решением задач, которые прямо сейчас дают крупные компании на собеседованиях
👉даю примеры по прохождению собеседований
👉разбираю резюме и докручиваю резюме подписчиков
👉и просто создаю дружелюбное, комфортное сообщество, где коллеги всегда готовы подсказать и поддержать
🎁В закрепе тебя ждёт подборка из 60 задач, которые сейчас дают на собеседованиях Яндекс, Т-Банк и другие крупные IT игроки.
Подписывайся и получай максимум пользы, а нас уже больше 3500 🤓: frontend_punks
Реклама, erid: 2W5zFGjSGm6 ИП Галактионов Тихон Витальевич, ИНН 771618975809
❤2👎1
МТС приглашает на масштабный ИТ-чемпионат True Tech Champ 2025!
Соревнования пройдут в двух треках: алгоритмы и программирование роботов. Участвовать могут начинающие ИТ-специалисты и опытные разработчики.
В этом году ты сможешь:
— решать алгоритмические задачи в индивидуальном зачете;
— объединиться в команду с другими участниками и управлять роботом в лабиринте с помощью кода;
— попасть на офлайн шоу-финал в качестве участника или зрителя;
— побороться за призовой фонд 10 250 000 рублей.
Отборочные этапы состоятся онлайн, финал — 21 ноября в МТС Live Холл в Москве.
Регистрация открыта до 20 октября. Подай заявку прямо сейчас.
Соревнования пройдут в двух треках: алгоритмы и программирование роботов. Участвовать могут начинающие ИТ-специалисты и опытные разработчики.
В этом году ты сможешь:
— решать алгоритмические задачи в индивидуальном зачете;
— объединиться в команду с другими участниками и управлять роботом в лабиринте с помощью кода;
— попасть на офлайн шоу-финал в качестве участника или зрителя;
— побороться за призовой фонд 10 250 000 рублей.
Отборочные этапы состоятся онлайн, финал — 21 ноября в МТС Live Холл в Москве.
Регистрация открыта до 20 октября. Подай заявку прямо сейчас.
Вот 17 авторских обучающих IT каналов по самым востребованным областям программирования:
Выбирай своё направление:
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2
Назовите способ изменения opacity для всех строк таблицы кроме той, на которую навёл пользователь.
Anonymous Quiz
57%
tbody:hover tr:not(:hover)
16%
tbody:hover:not(:hover)
8%
tbody:not(:hover):hover
20%
tr:not(:hover) tbody:hover
Создание массива из большого количества повторяющихся элементов
Есть несколько разных способов для создания массива с котиками.
Допустим, нам нужно завести котиков в 100 комнат, по одному на комнату, как это сделать? Можно выделить место (память) для котиков, а потом заселить туда котиков:
Также мы можем выделить 100 комнат, а потом пройти в каждую и руками туда посадить кота. Массив можно создать с помощью деструктуризации [...].
Также можно создать массив с помощью функции Array.from, указав способ обработки каждого элемента.
В Array.from также можно передать array-like структуру данных, для этого нам нужно передать поле length.
Можно создать пустой массив, создать цикл и поселить в каждую комнату по её индексу по коту.
Также можно пушить элементы в конец массива, это будет работать быстрее на большом количестве элементов.
👉 @frontendInterview
Есть несколько разных способов для создания массива с котиками.
Допустим, нам нужно завести котиков в 100 комнат, по одному на комнату, как это сделать? Можно выделить место (память) для котиков, а потом заселить туда котиков:
Array(100).fill("😸") // Чуть более функциональный стиль
Также мы можем выделить 100 комнат, а потом пройти в каждую и руками туда посадить кота. Массив можно создать с помощью деструктуризации [...].
[...Array(100)].map(() => "😸")
Также можно создать массив с помощью функции Array.from, указав способ обработки каждого элемента.
Array.from(Array(100), () => "😸")
В Array.from также можно передать array-like структуру данных, для этого нам нужно передать поле length.
Array.from({ length: 100}, () => '😸')
Можно создать пустой массив, создать цикл и поселить в каждую комнату по её индексу по коту.
const arr = []
for(let i=0; i<100;i++){
arr[i] = "😸" // Чуть более императивный стиль
}
Также можно пушить элементы в конец массива, это будет работать быстрее на большом количестве элементов.
const arr = []
for(let i=0; i<100;i++){
arr.push("😸")
}
👉 @frontendInterview
👍2🔥2🤔2
К вопросу о кошмарном качестве книг по программированию. Моя не наглядная книга о наглядном CSS
Сколько раз уже писано‑переписано о том, что современные печатные книги на компьютерную тематику — это на редкость некачественный товар. И всё равно каждый раз я не перестаю удивляться, как же их создатели не стыдятся выпускать, да ещё и продавать за деньги такой редкостный треш.
И дело даже не в кривом переводе. Мы уже давно научились догадываться, что именно «хотел сказать автор» на языке оригинала. Этот этап повсеместного падения качества книг уже пройден. Теперь издательства нацелились на новые антирекорды — соревнуются, кто кого переплюнет по количеству фактических ошибок в своих творениях. Например, по ужасающим косякам в исходных кодах программ. Каждый раз хочется воскликнуть: «Ребята, вы сами‑то хоть один раз перечитали своё творение?!»
👉 @frontendInterview
Сколько раз уже писано‑переписано о том, что современные печатные книги на компьютерную тематику — это на редкость некачественный товар. И всё равно каждый раз я не перестаю удивляться, как же их создатели не стыдятся выпускать, да ещё и продавать за деньги такой редкостный треш.
И дело даже не в кривом переводе. Мы уже давно научились догадываться, что именно «хотел сказать автор» на языке оригинала. Этот этап повсеместного падения качества книг уже пройден. Теперь издательства нацелились на новые антирекорды — соревнуются, кто кого переплюнет по количеству фактических ошибок в своих творениях. Например, по ужасающим косякам в исходных кодах программ. Каждый раз хочется воскликнуть: «Ребята, вы сами‑то хоть один раз перечитали своё творение?!»
👉 @frontendInterview
🤔1
Какая область видимости у переменных, объявленных с var внутри функции?
Anonymous Quiz
39%
Глобальная
14%
Блочная
44%
Функциональная
3%
Модульная
Чем отличаются REST и RESTful API?
REST (Representational State Transfer) — это архитектурный стиль, используемый при проектировании распределенных систем. Он был описан в диссертации Роя Филдинга в 2000 году и является основой для создания RESTful API.
RESTful API — это веб-сервис, который использует протокол HTTP для обмена данными. Он предоставляет возможность получать, создавать, обновлять и удалять данные на удаленном сервере, используя стандартные HTTP-методы (GET, POST, PUT, DELETE и т. д.).
RESTful API использует ресурсы (например, товары, пользователи, заказы) и URI (Uniform Resource Identifier) для доступа к этим ресурсам. Клиент отправляет запросы на сервер, указывая URI и метод HTTP, а сервер возвращает ответ, который может содержать данные в различных форматах (например, JSON или XML).
Принципы RESTful API:
- Клиент-серверная архитектура: сервер и клиент независимы друг от друга, что позволяет развивать их независимо.
- Отсутствие состояния (stateless): каждый запрос клиента должен содержать всю необходимую информацию для его обработки, без сохранения состояния на сервере.
- Кэширование: клиенты могут кэшировать ответы сервера, чтобы уменьшить количество запросов.
- Единообразие интерфейса: единообразный интерфейс между клиентом и сервером упрощает взаимодействие и увеличивает его надежность.
- Слои: клиент не должен знать о слоях на сервере, которые обрабатывают запросы.
👉 @frontendInterview
REST (Representational State Transfer) — это архитектурный стиль, используемый при проектировании распределенных систем. Он был описан в диссертации Роя Филдинга в 2000 году и является основой для создания RESTful API.
RESTful API — это веб-сервис, который использует протокол HTTP для обмена данными. Он предоставляет возможность получать, создавать, обновлять и удалять данные на удаленном сервере, используя стандартные HTTP-методы (GET, POST, PUT, DELETE и т. д.).
RESTful API использует ресурсы (например, товары, пользователи, заказы) и URI (Uniform Resource Identifier) для доступа к этим ресурсам. Клиент отправляет запросы на сервер, указывая URI и метод HTTP, а сервер возвращает ответ, который может содержать данные в различных форматах (например, JSON или XML).
Принципы RESTful API:
- Клиент-серверная архитектура: сервер и клиент независимы друг от друга, что позволяет развивать их независимо.
- Отсутствие состояния (stateless): каждый запрос клиента должен содержать всю необходимую информацию для его обработки, без сохранения состояния на сервере.
- Кэширование: клиенты могут кэшировать ответы сервера, чтобы уменьшить количество запросов.
- Единообразие интерфейса: единообразный интерфейс между клиентом и сервером упрощает взаимодействие и увеличивает его надежность.
- Слои: клиент не должен знать о слоях на сервере, которые обрабатывают запросы.
👉 @frontendInterview
👍3
Современный JavaScript для нетерпеливых
Язык JavaScript изначально был предназначен для написания небольших объемов кода внутри браузера, но современный JavaScript радикально отличается от своего прародителя. В наши дни программисты на JavaScript активно осваивают функциональный, объектно-ориентированный и асинхронный стили программирования, оставляя в прошлом архаичные конструкции, чреватые ошибками. Данная книга – полное, но при этом лаконичное руководство по версии JavaScript E6 и выше. Вам не потребуется знаний старых версий языка, а сразу предлагается начать с более мощных современных.
👉 @frontendInterview
Язык JavaScript изначально был предназначен для написания небольших объемов кода внутри браузера, но современный JavaScript радикально отличается от своего прародителя. В наши дни программисты на JavaScript активно осваивают функциональный, объектно-ориентированный и асинхронный стили программирования, оставляя в прошлом архаичные конструкции, чреватые ошибками. Данная книга – полное, но при этом лаконичное руководство по версии JavaScript E6 и выше. Вам не потребуется знаний старых версий языка, а сразу предлагается начать с более мощных современных.
👉 @frontendInterview
❤2