👎2🔥2
Как добавить две фоновые картинки к одному элементу?
Браузеры позволяют добавлять к элементу произвольное число фоновых изображений, перечисляя параметры каждого фона через запятую. Достаточно воспользоваться универсальным свойством background и указать для него вначале один фон, а через запятую второй.
Для примера рассмотрим создание вертикальных декоративных линий слева и справа от блока. Для этого вначале подготовим изображения, которые должны без стыков повторяться по вертикали.
В качестве элемента, к которому добавляется фон, воспользуемся <div>, а чтобы отличать его от остальных элементов, к нему добавим класс block
👉 @frontendInterview
Браузеры позволяют добавлять к элементу произвольное число фоновых изображений, перечисляя параметры каждого фона через запятую. Достаточно воспользоваться универсальным свойством background и указать для него вначале один фон, а через запятую второй.
Для примера рассмотрим создание вертикальных декоративных линий слева и справа от блока. Для этого вначале подготовим изображения, которые должны без стыков повторяться по вертикали.
В качестве элемента, к которому добавляется фон, воспользуемся <div>, а чтобы отличать его от остальных элементов, к нему добавим класс block
<html>
<head>
<meta charset="utf-8">
<title>Два фоновых изображения</title>
<style>
body {
background: #f2f0e3; /* Цвет фона веб-страницы */
}
.block {
background: url(/example/image/bg_left.png) repeat-y,
url(/example/image/bg_right.png) repeat-y 100% 0 #fff;
padding: 10px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<div class="block">
За 11 месяцев вахты радисты провели 8642 сеансов связи общим
объёмом 300625 групп. Это только метео и аэротелеграммы.
Принято от радиостанции мыс Челюскин 7450 групп.
</div>
</body>
</html>
👉 @frontendInterview
Два собеседования
Именно столько нужно, чтобы нанять или не нанять человека, считает автор. А всё остальное — непродуктивно. И это не просто желание из лени, тут есть смысл.
Допустим, когда на каждом этапе кандидата собеседуют разные люди, ответственность как бы делится между ними. А если ответственны все — то ответственность не несет никто.
Еще у опытных сеньоров просто не выдерживают нервы от количества этапов, и они уходят. Хотя компания думает наоборот, что самые опытные доходят до конца.
Короче, есть о чем подумать. В тексте еще много примеров в защиту двухэтапного собеса:
👉 @frontendInterview
Именно столько нужно, чтобы нанять или не нанять человека, считает автор. А всё остальное — непродуктивно. И это не просто желание из лени, тут есть смысл.
Допустим, когда на каждом этапе кандидата собеседуют разные люди, ответственность как бы делится между ними. А если ответственны все — то ответственность не несет никто.
Еще у опытных сеньоров просто не выдерживают нервы от количества этапов, и они уходят. Хотя компания думает наоборот, что самые опытные доходят до конца.
Короче, есть о чем подумать. В тексте еще много примеров в защиту двухэтапного собеса:
👉 @frontendInterview
🔥1
Для чего используется протокол WebSocket?
Anonymous Quiz
6%
Для отправки HTTP-запросов
2%
Для хранения данных на сервере
92%
Для передачи данных между клиентом и сервером через постоянное соединение без разрыва
1%
Для обработки изображений
Приоритеты операторов
Приоритет операторов определяет порядок, в котором операторы выполняются. Операторы с более высоким приоритетом выполняются первыми.
Пример:
Ассоциативность
Ассоциативность определяет порядок, в котором операторы с одинаковым приоритетом обрабатываются. Например, рассмотрим выражение:
Левая ассоциативность (left-to-right) означает, что оно обрабатывается как (a OP b) OP c, в то время как правая ассоциативность (right-to-left) означает, что оно интерпретируется как a OP (b OP c). Операторы присваивания являются право-ассоциативными, так что Вы можете написать:
с ожидаемым результатом, что a и b будут равны 5. Это происходит, потому что оператор присваивания возвращает тот результат, который присваивает. Сначала b становится равным 5, затем a принимает значение b.
Данная таблица упорядочена с самого высокого приоритета (1) до самого низкого (18).
Приоритет операторов определяет порядок, в котором операторы выполняются. Операторы с более высоким приоритетом выполняются первыми.
Пример:
3 + 4 * 5 // возвращает 23
Ассоциативность
Ассоциативность определяет порядок, в котором операторы с одинаковым приоритетом обрабатываются. Например, рассмотрим выражение:
a OP b OP c
Левая ассоциативность (left-to-right) означает, что оно обрабатывается как (a OP b) OP c, в то время как правая ассоциативность (right-to-left) означает, что оно интерпретируется как a OP (b OP c). Операторы присваивания являются право-ассоциативными, так что Вы можете написать:
a = b = 5;
с ожидаемым результатом, что a и b будут равны 5. Это происходит, потому что оператор присваивания возвращает тот результат, который присваивает. Сначала b становится равным 5, затем a принимает значение b.
Данная таблица упорядочена с самого высокого приоритета (1) до самого низкого (18).
👍2❤1
Основы TypeScript. 3-е изд.
Полностью обновленное третье издание классического бестселлера Адама Фримена. В нем освещены все возможности TypeScript 5, включая новые, такие как декораторы. Сначала вы узнаете, зачем и почему был создан язык TypeScript, а затем почти сразу перейдете к практическому применению статических типов.
Каждая глава посвящена навыкам, необходимым для написания потрясающих веб-приложений.
👉 @frontendInterview
Полностью обновленное третье издание классического бестселлера Адама Фримена. В нем освещены все возможности TypeScript 5, включая новые, такие как декораторы. Сначала вы узнаете, зачем и почему был создан язык TypeScript, а затем почти сразу перейдете к практическому применению статических типов.
Каждая глава посвящена навыкам, необходимым для написания потрясающих веб-приложений.
👉 @frontendInterview
👍7👎2
This media is not supported in your browser
VIEW IN TELEGRAM
С каждым годом собеседования в IT становятся всё сложнее. Пора начать готовиться к ним правильно!
Мы — сообщество «Собесит», и мы помогаем успешно проходить собеседования в IT для Java, GO, QA, ML, Python и других программистов. У нас есть бесплатная база реально пройденных и актуальных собеседований из крупных компаний в видеоформате с документациями, от Junior до Team Lead позиций, которые ты можешь использовать прямо сейчас.
Запускай нашего бесплатного бота и готовься к собеседованиям с умом!
Начни подготовку сегодня и сделай шаг к жирному офферу!
erid: LjN8K916w
Мы — сообщество «Собесит», и мы помогаем успешно проходить собеседования в IT для Java, GO, QA, ML, Python и других программистов. У нас есть бесплатная база реально пройденных и актуальных собеседований из крупных компаний в видеоформате с документациями, от Junior до Team Lead позиций, которые ты можешь использовать прямо сейчас.
Запускай нашего бесплатного бота и готовься к собеседованиям с умом!
Начни подготовку сегодня и сделай шаг к жирному офферу!
erid: LjN8K916w
👍2🔥2
Arrays of cats and dogs
Рассмотрим массив, содержащий кошек и собак. Каждая собака может поймать только одного кота, но не может поймать кота, находящегося на расстоянии более n элементов. Вашей задачей будет вернуть максимальное количество котов, которых удастся поймать.
Примеры:
👉 @frontendInterview
Рассмотрим массив, содержащий кошек и собак. Каждая собака может поймать только одного кота, но не может поймать кота, находящегося на расстоянии более n элементов. Вашей задачей будет вернуть максимальное количество котов, которых удастся поймать.
Примеры:
solve(['D','C','C','D','C'], 2) = 2, because the dog at index 0 (D0) catches C1 and D3 catches C4.
solve(['C','C','D','D','C','D'], 2) = 3, because D2 catches C0, D3 catches C1 and D5 catches C4.
solve(['C','C','D','D','C','D'], 1) = 2, because D2 catches C1, D3 catches C4. C0 cannot be caught because n == 1.
solve(['D','C','D','D','C'], 1) = 2, too many dogs, so all cats get caught!
👉 @frontendInterview
Архитектурный паттерн MVC
Когда мы пишем сложные приложения, нам нужно выполнять различные операции, иногда совершенно друг на друга не похожие:
- обновить данные на сервере;
- показать всплывающее окно после клика пользователя;
- валидировать данные из формы;
- загрузить дополнительные ресурсы, картинки, скрипты;
- вызвать стороннее API и обработать ответ.
Считается хорошим тоном делить отличающийся код на модули, которые отвечают за свои конкретные задачи. Как именно разделить код на модули, по каким критериям и принципам — на эти вопросы старается ответить паттерн MVC.
MVC (сокращение от Model—View—Controller) — это архитектурный паттерн, который делит модули на три группы:
Model
Модель содержит данные приложения, за которыми приходит пользователь. Например, список своих заказов в интернет-магазине.
View
Представление показывает эти данные в понятном для пользователя виде. Например, на свёрстанной странице сайта или в приложении на телефоне.
Сontroller
Контроллеры принимают пользовательские команды и преобразуют данные по этим командам. Например, если пользователь нажимает кнопку «Удалить заказ», то контроллер отмечает этот заказ в модели удалённым.
👉 @frontendInterview
Когда мы пишем сложные приложения, нам нужно выполнять различные операции, иногда совершенно друг на друга не похожие:
- обновить данные на сервере;
- показать всплывающее окно после клика пользователя;
- валидировать данные из формы;
- загрузить дополнительные ресурсы, картинки, скрипты;
- вызвать стороннее API и обработать ответ.
Считается хорошим тоном делить отличающийся код на модули, которые отвечают за свои конкретные задачи. Как именно разделить код на модули, по каким критериям и принципам — на эти вопросы старается ответить паттерн MVC.
MVC (сокращение от Model—View—Controller) — это архитектурный паттерн, который делит модули на три группы:
Model
Модель содержит данные приложения, за которыми приходит пользователь. Например, список своих заказов в интернет-магазине.
View
Представление показывает эти данные в понятном для пользователя виде. Например, на свёрстанной странице сайта или в приложении на телефоне.
Сontroller
Контроллеры принимают пользовательские команды и преобразуют данные по этим командам. Например, если пользователь нажимает кнопку «Удалить заказ», то контроллер отмечает этот заказ в модели удалённым.
👉 @frontendInterview
👍3
👍8
Как задать цвет посещённых ссылок?
Как только пользователь открывает ссылку, она помечается как посещённая и меняет свой цвет на фиолетовый, установленный по умолчанию. Чтобы задать вид оформления посещённых ссылок, используйте псевдокласс :visited, который добавляется к селектору a.
Результат данного примера показан на рисунке. Обычные ссылки заданы красным цветом, а посещённые — серым.
👉 @frontendInterview
Как только пользователь открывает ссылку, она помечается как посещённая и меняет свой цвет на фиолетовый, установленный по умолчанию. Чтобы задать вид оформления посещённых ссылок, используйте псевдокласс :visited, который добавляется к селектору a.
a {
color: #A02932; /* Цвет обычной ссылки */
}
a:visited {
color: #9FA4AF; /* Цвет посещённой ссылки */
}
Результат данного примера показан на рисунке. Обычные ссылки заданы красным цветом, а посещённые — серым.
👉 @frontendInterview
👍3❤1👎1
ИТ-перестройка: трансформация рынка разработки программного обеспечения в 2023-2024 гг
2022 год стал судьбоносным, в частности для ИТ-индустрии.
I полугодие 2022: антироссийские санкции, уход западных вендоров, утверждение программы импортозамещения.
II полугодие 2022: государственная поддержка ИТ-индустрии, старт импортозамещения, начало эпохи технологического суверенитета, рост числа кэптивных ИТ-компаний.
С конца 2022 года началась активная ИТ-перестройка: чтобы продолжить существование и начать расти, компаниям приходилось «крутиться» в прямом смысле этого слова — менять стратегию на 180 градусов.
Какое влияние оказала сложившаяся ситуация на разработчиков программного обеспечения и как они чувствуют себя сейчас - разбирается в этой статье.
👉 @frontendInterview
2022 год стал судьбоносным, в частности для ИТ-индустрии.
I полугодие 2022: антироссийские санкции, уход западных вендоров, утверждение программы импортозамещения.
II полугодие 2022: государственная поддержка ИТ-индустрии, старт импортозамещения, начало эпохи технологического суверенитета, рост числа кэптивных ИТ-компаний.
С конца 2022 года началась активная ИТ-перестройка: чтобы продолжить существование и начать расти, компаниям приходилось «крутиться» в прямом смысле этого слова — менять стратегию на 180 градусов.
Какое влияние оказала сложившаяся ситуация на разработчиков программного обеспечения и как они чувствуют себя сейчас - разбирается в этой статье.
👉 @frontendInterview
❤2👎1
Что верно о статичных методах в классах?
Anonymous Quiz
21%
Статичные методы доступны только для объектов класса.
5%
Статичные методы доступны только для других классов, а не для объектов того же класса.
46%
Статичные методы доступны только для класса, а не для его объектов.
28%
Статичные методы доступны для всех объектов класса и других классов.
👍3👎2🔥1
Бесплатный практический вебинар: Профессия «Frontend-разработчик».
⏰ Когда: 20 августа в 19:00 по мск.
Погрузитесь в решение реальной задачи и напишите мини-игру, которая работает прямо в браузере.
Расскажем, что ждут работодатели от джунов, какие есть грейды во фронтенд-разработке и на какую зарплату рассчитывать в перспективе. Какие JS фреймворки учить: Vue, React, а может, Angular?
Задайте вопросы опытному спикеру, сделайте первый шаг в направлении новой профессии.
🎁 Всем, кто зарегистрировался - Гайд «Как заговорить на сленге IT-специалистов», а каждому участнику - Карта компетенций начинающего Frontend-разработчика.
⏰ Когда: 20 августа в 19:00 по мск.
Погрузитесь в решение реальной задачи и напишите мини-игру, которая работает прямо в браузере.
Расскажем, что ждут работодатели от джунов, какие есть грейды во фронтенд-разработке и на какую зарплату рассчитывать в перспективе. Какие JS фреймворки учить: Vue, React, а может, Angular?
Задайте вопросы опытному спикеру, сделайте первый шаг в направлении новой профессии.
🎁 Всем, кто зарегистрировался - Гайд «Как заговорить на сленге IT-специалистов», а каждому участнику - Карта компетенций начинающего Frontend-разработчика.
Пробовать новое всегда страшно, но не у нас!
На бесплатном интенсиве по frontend-разработке вы с нуля под руководством опытного наставника создадите свой проект и сможете пополнить портфолио.
В рамках интенсива мы:
— Сверстаем сайт на Html
— Напишем стили к сайту на Css
— Реализуем некоторые функции на JavaScript
И многое другое, о чем подробно рассказываем на сайте.
Этот проект предоставит вам возможность погрузиться в разнообразные технологии веб-разработки и усовершенствовать навыки работы с HTML, CSS, а также научит вас создавать посадочные страницы с нуля.
Занимайте место прямо сейчас: https://tglink.io/54eb3bd57fa2
На бесплатном интенсиве по frontend-разработке вы с нуля под руководством опытного наставника создадите свой проект и сможете пополнить портфолио.
В рамках интенсива мы:
— Сверстаем сайт на Html
— Напишем стили к сайту на Css
— Реализуем некоторые функции на JavaScript
И многое другое, о чем подробно рассказываем на сайте.
Этот проект предоставит вам возможность погрузиться в разнообразные технологии веб-разработки и усовершенствовать навыки работы с HTML, CSS, а также научит вас создавать посадочные страницы с нуля.
Занимайте место прямо сейчас: https://tglink.io/54eb3bd57fa2
👍2
Set.isSubsetOf()
Метод isSubsetOf() сравнивает текущую коллекцию с другой и возвращает true, если все элементы указанной коллекции находятся так же в другой коллекции, и false — если нет.
Пример
Имеется два массива чисел. Определим входят ли все элементы первого массива так же и во второй массив. Для решения этой задачи, создадим из массивов Set-объекты и сравним их используя метод isSubsetOf():
Поддержка метода isSubsetOf() в основных браузерах и в Node.js появилась в 2024 году. Если попробуете использовать метод в более ранних версиях, это приведёт к ошибке.
👉 @frontendInterview
Метод isSubsetOf() сравнивает текущую коллекцию с другой и возвращает true, если все элементы указанной коллекции находятся так же в другой коллекции, и false — если нет.
Пример
Имеется два массива чисел. Определим входят ли все элементы первого массива так же и во второй массив. Для решения этой задачи, создадим из массивов Set-объекты и сравним их используя метод isSubsetOf():
const array1 = [ 34, 42, 0, -8 ]
const array2 = [ -8, 0, 1, 2, 16, 34, 42 ]
const set1 = new Set(array1)
const set2 = new Set(array2)
console.log(set1.isSubsetOf(set2))
// true
console.log(set2.isSubsetOf(set1))
// false
Поддержка метода isSubsetOf() в основных браузерах и в Node.js появилась в 2024 году. Если попробуете использовать метод в более ранних версиях, это приведёт к ошибке.
👉 @frontendInterview
👍4❤1