Frontend Interview - собеседования по Javascript / Html / Css
31 Jul 2024 11:02
Как добавить две фоновые картинки к одному элементу?
Браузеры позволяют добавлять к элементу произвольное число фоновых изображений, перечисляя параметры каждого фона через запятую. Достаточно воспользоваться универсальным свойством 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>
👉 @
Читать полностью…
Frontend Interview - собеседования по Javascript / Html / Css
30 Jul 2024 18:01
👉 @
Читать полностью…
Frontend Interview - собеседования по Javascript / Html / Css
29 Jul 2024 07:45
Срочно требуются Веб-Дизайнеры в Figma. Обучим с нуля.
Онлайн-программа с наставником и чатом.
Осторожно! 80% практики.
По результату обучения у вас будет портфолио из нескольких работ.
Сертификат о прохождении курса.
Возможность пройти полное обучение и получить гарантированное трудоустройство!
Учитесь дизайну у профессионалов.
Переходи по кнопки: "Узнать больше" и начинай свое обучение.
Доступ 0 руб.
Узнать больше
#реклама 16+
yudaevschool24.online
О рекламодателе
Читать полностью…
Frontend Interview - собеседования по Javascript / Html / Css
28 Jul 2024 12:03
Как устроен JavaScript
Большинство языков программирования выросли из древней парадигмы, порожденной еще во времена Фортрана. Гуру Javascript — Дуглас Крокфорд — выкорчевывает эти засохшие корни, позволяя нам задуматься над будущим программирования, перейдя на новый уровень понимания требований к Следующему Языку (The Next Language). Автор начинает с основ: имен, чисел, логических значений, символов и другой базовой информации. Вы узнаете не только о проблемах и трудностях работы с типами в JavaScript, но и о том как их можно обойти. Затем вы приступите к знакомству со структурами данных и функции, чтобы разобраться с механизмами, лежащими в их основе, и научитесь использовать функции высшего порядка и объектно-ориентированный стиль программирования без классов.
👉 @
Читать полностью…
Frontend Interview - собеседования по Javascript / Html / Css
27 Jul 2024 18:02
Что такое Компонент высшего порядка (Higher-Order Component, HOC)?
Говоря просто, компонент высшего порядка — это функция, которая принимает компонент и возвращает новый компонент. HOC часто встречаются в сторонних библиотеках, например connect в Redux и createFragmentContainer в Relay.
const EnhancedComponent = higherOrderComponent(WrappedComponent);
Давайте реализуем функцию withSubscription — она будет создавать компоненты и подписывать их на обновления DataSource (наподобие CommentList и BlogPost). Функция будет принимать оборачиваемый компонент и через пропсы передавать ему новые данные:
const CommentListWithSubscription = withSubscription(
CommentList,
(DataSource) => DataSource.getComments()
);
const BlogPostWithSubscription = withSubscription(
BlogPost,
(DataSource, props) => DataSource.getBlogPost(props.id)
);
Первый параметр — это оборачиваемый компонент. Второй — функция, которая извлекает нужные нам данные, она получает DataSource и текущие пропсы.
Заметьте, что HOC ничего не меняет и не наследует поведение оборачиваемого компонента, вместо этого HOC оборачивает оригинальный компонент в контейнер посредством композиции. HOC является чистой функцией без побочных эффектов. Вот и всё! Оборачиваемый компонент получает все пропсы, переданные контейнеру, а также проп data. Для HOC не важно, как будут использоваться данные, а оборачиваемому компоненту не важно, откуда они берутся.
👉 @
Читать полностью…
Frontend Interview - собеседования по Javascript / Html / Css
27 Jul 2024 08:45
Jobski - твой помощник при поиске работы в IT
Сервис индивидуально подбирает вакансии, учитывая ваш опыт, навыки и стек технологий.
Узнать больше
#реклама
jobski.ru
О рекламодателе
Читать полностью…
Frontend Interview - собеседования по Javascript / Html / Css
26 Jul 2024 10:00
Офер в Яндекс для опытных фронтендеров за два дня
24–25 августа приглашаем фронтендеров с опытом работы от четырёх лет получить офер в Яндекс через multitrack за 2 дня. Достаточно решить задачи онлайн до 20 августа и пройти несколько технических секций 24 августа, чтобы уже 25-го получить офер и выбрать три команды, к которым вам было бы интересно присоединиться.
Как правило, за несколько собеседований сложно понять, подходит ли вам команда и наоборот. Multitrack позволит вам поработать в трёх разных командах Яндекса и выбрать подходящую. Вы сможете погрузиться в рабочие процессы, познакомиться с будущими коллегами и понять, с какими задачами и технологиями хотите работать.
Узнать подробности и зарегистрироваться.
Реклама. ООО "Яндекс". ИНН 7736207543
Читать полностью…
Frontend Interview - собеседования по Javascript / Html / Css
25 Jul 2024 08:46
Запустите рекламу в телеграм-каналах с Яндекс Директом
Перфоманс-реклама теперь в телеграм-каналах ⚡
Яндекс Директ знает, как привлечь целевую аудиторию 💰👌
Попробовать
#реклама
yandex.ru
О рекламодателе
Читать полностью…
Frontend Interview - собеседования по Javascript / Html / Css
23 Jul 2024 09:35
Портфолио, которое хотят видеть рекрутеры
Не тратьте время на пет-проекты. Сделайте проект на микросервисной структуре на Kafka и заберите свой оффер в крупную IT-компанию. Все потому что проект не должен быть стандартным crud-приложением, а иметь в основе то, чего ждет каждый работодатель – микросервисы.
Ребята из FAANG School подготовили полезную лекцию, где расскажут, как собрать идеальный проект для портфолио:
– что ждет работодатель и какие темы выбрать для проекта
– какой стек технологий самый востребованный
– как перейти от древнего монолита к современным микросервисам
– когда и зачем добавлять Kafka в проект-портфолио
Участников ждут подарки: классный мерч, полезные материалы, возможность пройти индивидуальную карьерную сессию и грант на обучение.
Переходите и забирайте Большую Шпаргалку по Kafka с подробной информацией об основных концепциях, характеристиках и способах использования одной из самых популярных технологий в разработке.
Читать полностью…
Frontend Interview - собеседования по Javascript / Html / Css
22 Jul 2024 12:30
Что такое статический метод класса (static)?
Ключевое слово static используется в классах для определения статичных методов. Статичные методы функции, принадлежащие объекту класса, но не доступные другим объектам того же класса.
class Repo {
static getName() {
return "Repo name is modern-js-cheatsheet"
}
}
// нам не нужно создавать объект класса Repo
console.log(Repo.getName()) // "Repo name is modern-js-cheatsheet"
let r = new Repo();
console.log(r.getName()) // необработанная ошибка TypeError: r.getName не является функцией
Cтатические методы вызываются через имя класса. Вызывать статические методы через имя объекта запрещено. Статические методы часто используются для создания вспомогательных функций приложения.
👉 @
Читать полностью…
Frontend Interview - собеседования по Javascript / Html / Css
20 Jul 2024 18:02
Что такое Веб-компоненты и какие технологии в них используются?
Веб-компоненты — технология, которая позволяет создавать многократно используемые компоненты в веб-документах и веб-приложениях. Веб-компоненты поддерживаются веб-браузерами напрямую и не требуют дополнительных библиотек для работы.
Веб-компоненты включают четыре технологии, каждая из которых может использоваться отдельно от других:
- Custom Elements — API для создания собственных HTML элементов.
- HTML Templates — тег template позволяет реализовывать изолированные DOM-элементы.
- Shadow DOM — изолирует DOM и стили в разных элементах.
- HTML Imports — импорт HTML документов.
👉 @
Читать полностью…
Frontend Interview - собеседования по Javascript / Html / Css
18 Jul 2024 20:00
Где учиться IT: 70% опрошенных проходили онлайн-курсы
Эта статья про самое важное — обучение. Как вообще IT-специалисты относятся к онлайн-образованию и в чем разница с полноценным обучением в университете. Авторы статьи провели опрос. Ожидания от ответов были разные, но вот, что они выяснили:
- 70% опрошенных IT-специалистов, которые сейчас работают, проходили онлайн-курсы — кто-то из них получал полноценную профессию, а кто-то прокачивал навыки;
- половина из них относятся к такому формату обучения положительно.
В статье разбираемся, какие школы чаще всего выбирали опрошенные специалисты и как выбрать по-настоящему качественный курс.
👉 @
Читать полностью…
Frontend Interview - собеседования по Javascript / Html / Css
18 Jul 2024 07:46
Jobski - твой помощник при поиске работы в IT
Сервис индивидуально подбирает вакансии, учитывая ваш опыт, навыки и стек технологий.
Узнать больше
#реклама
jobski.ru
О рекламодателе
Читать полностью…
Frontend Interview - собеседования по Javascript / Html / Css
17 Jul 2024 09:00
Бесплатный практический вебинар: Профессия «Frontend-разработчик».
⏰ Когда: 25 июля в 19:00 по мск.
Погрузитесь в решение реальной задачи и напишите мини-игру, которая работает прямо в браузере.
Расскажем, что ждут работодатели от джунов, какие есть грейды во фронтенд-разработке и на какую зарплату рассчитывать в перспективе. Какие JS фреймворки учить: Vue, React, а может, Angular?
Задайте вопросы опытному спикеру, сделайте первый шаг в направлении новой профессии.
🎁 Всем, кто зарегистрировался - Гайд «Как заговорить на сленге IT-специалистов», а каждому участнику - Карта компетенций начинающего Frontend-разработчика.
Читать полностью…
Frontend Interview - собеседования по Javascript / Html / Css
31 Jul 2024 08:38
Такси для бизнеса. Яндекс Go
Оптимизируйте свои расходы и повысьте эффективность бизнеса с Яндекс Go
Узнать больше
#реклама
business.go.yandex
О рекламодателе
Читать полностью…
Frontend Interview - собеседования по Javascript / Html / Css
29 Jul 2024 14:05
undefined и null
В JavaScript есть два отдельных типа для представления ничего.
Тип undefined
Это тип с единственным возможным значением: undefined.
Кроме этого, в языке определена глобальная переменная со значением undefined, и эта переменная так и называется — undefined. Не являясь константой, она не является и ключевым словом. Из этого следует, что её значение можно с лёгкостью переопределить.
Несколько случаев, когда возвращается undefined:
- При попытке доступа к глобальной переменной undefined (если она не изменена).
- Неявный возврат из функции при отсутствии в ней оператора return.
- Из операторов return, которые ничего не возвращают.
- В результате поиска несуществующего свойства у объекта (и доступа к нему).
- Параметры, которые не были переданы в функцию явно.
- При доступе ко всему, чьим значением является undefined.
Обработка изменений значения undefined
Поскольку глобальная переменная undefined содержит копию настоящего значения undefined, присвоение этой переменной нового значения не изменяет значения типа undefined.
Но при этом, чтобы сравнить что-либо со значением undefined, прежде нужно получить значение самой переменной undefined.
Чтобы защитить код от переопределения переменной undefined, часто используется техника анонимной обёртки, которая использует отсутствующий аргумент.
var undefined = 123;
(function(something, foo, undefined) {
// в локальной области видимости `undefined`
// снова ссылается на правильное значене.
})('Hello World', 42);
Другой способ достичь того же эффекта — использовать определение внутри обёртки.
var undefined = 123;
(function(something, foo) {
var undefined;
...
})('Hello World', 42);
Единственная разница между этими вариантами в том, что последняя версия будет больше на 4 байта при минификации, а в первом случае внутри анонимной обёртки нет дополнительного оператора var.
Использование nullЗначение null записывается литералом null. Оно является самостоятельным, а не свойством глобального объекта (как undefined). В API, null часто присутствует в местах где ожидается объект, но подходящего объекта нет.
null является определённым значением отсутствия объекта, тогда как undefined обозначает неопределённость. Например:
var element;
// значение переменной element до её инициализации не определённо: undefined
element = document.getElementById("not-exists");
// здесь при попытке получения несуществующего элемента, метод getElementById возвращает null
// переменная element теперь инициализирована значением null, её значение определено
Читать полностью…
Frontend Interview - собеседования по Javascript / Html / Css
28 Jul 2024 18:02
Fix My Phone Numbers!
Номер телефона должен состоять из 11 цифр и всегда начинаться с 0.
Вам дана строка, где в номер телефона подмешаны различные символы. Очистите строку от лишних символов и верните номер.
👉 @
Читать полностью…
Frontend Interview - собеседования по Javascript / Html / Css
28 Jul 2024 07:45
ТОП-4 Курса по UX/UI-дизайну по версии Tutortop
Tutortop — маркетплейс курсов №1 по количеству школ-партнеров, курсов и реальных отзывов студентов.
Освойте востребованную профессию с нуля за 4-5 месяцев.
Соберите портфолио из 10+ проектов.
Выйдите на заработок 100 000₽+ и работайте удаленно в гибком графике.
Выбрать
#реклама 16+
tutortop.ru
О рекламодателе
Читать полностью…
Frontend Interview - собеседования по Javascript / Html / Css
27 Jul 2024 11:02
Самая сложная часть собеседования
👉 @
Читать полностью…
Frontend Interview - собеседования по Javascript / Html / Css
26 Jul 2024 18:00
Фронтендеры, го бустить скиллы в CodeRun: будем решать скриншотные задачки и выигрывать призы в турнирах
CodeRun — бесплатный онлайн-тренажер Яндекса с огромным каталогом задач от разработчиков Яндекса и внешних экспертов. Здесь можно учиться, готовиться к техническим собесам и получать призы за победу в сезонных турнирах: мерч, сертификаты и даже возможность попасть в Яндекс по упрощенному формату найма.
Одна из топовых фич — наличие скриншотных задач для фронтенд-направления. В подборке заданий от руководителя проектов Контеста Никиты Дубко можно пройти путь от рисования простых примитивов до полноценных CSS-иллюстраций.
Залетай в CodeRun, проходи подборки от экспертов, отслеживай прогресс и лутай призы в турнирах: 2 сезон сейчас в самом разгаре!
Читать полностью…
Frontend Interview - собеседования по Javascript / Html / Css
25 Jul 2024 18:02
Как вернуть энергию и интерес
В этой статье автор постарался честно и вдумчиво проанализировать свой опыт выгорания и последующего восстановления нормального уровня энергии. Если что-то упустил, спрашивайте в комментариях.
👉 @
Читать полностью…
Frontend Interview - собеседования по Javascript / Html / Css
24 Jul 2024 12:00
Как сделать отступ первой строки абзаца?
Отступ первой строки называется также «красная строка» и применяется для выделения отдельных абзацев и быстрого к ним перехода.
Для создания красной строки предназначено стилевое свойство text-indent, значение которого управляет величиной отступа. Причём значение может быть положительным, и тогда первая строка сдвигается вправо
В качестве значения text-indent можно использовать пиксели, em, rem и другие единицы размера CSS. Само свойство пишется для селектора P, тем самым все абзацы будут иметь указанный отступ первой строки.
p {
text-indent: 15px;
}
В примере на картинке применяется единица ch, которая определяет ширину символа 0. Для моноширинного шрифта (вроде Courier), где все буквы имеют одинаковую ширину, 2ch показывает что первая строка абзаца сдвигается на две буквы вправо.
👉 @
Читать полностью…
Frontend Interview - собеседования по Javascript / Html / Css
23 Jul 2024 18:07
👉 @
Читать полностью…
Frontend Interview - собеседования по Javascript / Html / Css
22 Jul 2024 14:05
Что такое статический метод класса (static)?
Ключевое слово static используется в классах для определения статичных методов. Статичные методы функции, принадлежащие объекту класса, но не доступные другим объектам того же класса.
class Repo {
static getName() {
return "Repo name is modern-js-cheatsheet"
}
}
// нам не нужно создавать объект класса Repo
console.log(Repo.getName()) // "Repo name is modern-js-cheatsheet"
let r = new Repo();
console.log(r.getName()) // необработанная ошибка TypeError: r.getName не является функцией
Cтатические методы вызываются через имя класса. Вызывать статические методы через имя объекта запрещено. Статические методы часто используются для создания вспомогательных функций приложения.
👉 @
Читать полностью…
Frontend Interview - собеседования по Javascript / Html / Css
22 Jul 2024 08:30
Ищем новичков во фронтенд-разработке и вёрстке сайтов.
Хотим показать, как получить реальный опыт в разработке сайтов и веб-приложений.
А именно:
- Сверстать веб-сайт на HTML + CSS;
- Реализовать функционал на JavaScript;
- Пощупать фронтенд-фреймворк Angular;
- Подключить Backend и загрузить сайт на хостинг.
Чтобы в итоге ты своими руками разработал качественный сайт, который не стыдно добавить в портфолио или продать.
Такой опыт можно получить на бесплатном практикуме уже завтра с поддержкой от опытных кураторов на каждом этапе.
👉 Приходи на бесплатное обучение и зови с собой друзей
Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку.
Читать полностью…
Frontend Interview - собеседования по Javascript / Html / Css
20 Jul 2024 11:02
Ставь лайк, если получал чашку/ручку/блокнотик от компании.
👉 @
Читать полностью…
Frontend Interview - собеседования по Javascript / Html / Css
18 Jul 2024 16:00
Фронтендеры, го бустить скиллы в CodeRun: будем решать скриншотные задачки и выигрывать призы в турнирах
CodeRun — бесплатный онлайн-тренажер Яндекса с огромным каталогом задач от разработчиков Яндекса и внешних экспертов. Здесь можно учиться, готовиться к техническим собесам и получать призы за победу в сезонных турнирах: мерч, сертификаты и даже возможность попасть в Яндекс по упрощенному формату найма.
Одна из топовых фич — наличие скриншотных задач для фронтенд-направления. В подборке заданий от руководителя проектов Контеста Никиты Дубко можно пройти путь от рисования простых примитивов до полноценных CSS-иллюстраций.
Залетай в CodeRun, проходи подборки от экспертов, отслеживай прогресс и лутай призы в турнирах: 2 сезон сейчас в самом разгаре!
Читать полностью…
Frontend Interview - собеседования по Javascript / Html / Css
17 Jul 2024 12:00
Как изменить вид маркера списка?
С помощью CSS допускается устанавливать один из трёх типов маркеров: disc (точка), circle (кружок), square (квадратик). Добавлять эти значения нужно к стилевому свойству list-style-type, которое указывается для селектора ul или li
ul {
list-style-type: square; /* Квадратные маркеры */
}
Использование псевдоэлемента ::beforeВыбор и установка собственного символа маркера происходит через псевдоэлемент ::before. Вначале следует вообще убрать маркеры у списка, присвоив значение none стилевому свойству list-style-type, а затем добавить псевдоэлемент ::before к селектору li. Сам вывод символа осуществляется с помощью свойства content, в качестве значения которого и выступает желаемый символ
li {
list-style-type: none; /* Убираем маркеры у списка */
}
li::before {
content: "►"; /* Маркер списка */
padding-right: 0.5em; /* Расстояние от маркера до текста */
}
Использование псевдоэлемента ::markerПсевдоэлемент ::marker позволяет управлять настройками маркера списка и работает схожим с ::before образом. При этом убирать исходные маркеры, как это делалось в предыдущем примере, необходимости нет.
Для ::marker не работают свойства margin и padding, поэтому для изменения расстояния от маркера до текста свойство padding-left добавляется к селектору li
li {
padding-left: 0.5em; /* Расстояние от маркера до текста */
}
li::marker {
content: "►"; /* Маркер списка */
}
👉 @
Читать полностью…
Frontend Interview - собеседования по Javascript / Html / Css
17 Jul 2024 07:46
Реклама для бизнеса любого уровня в Яндекс Директе
Создайте эффективную рекламную кампанию с алгоритмами Яндекс Директа 👌
Начните прямо сейчас ⚡
Зарегистрироваться
#реклама
direct.yandex.ru
О рекламодателе
Читать полностью…
12730
