Как работают плавающие элементы (floats)?
float – это CSS-свойство, которое позволяет "выплывать" элементу из обычного потока документа и обтекаться другими элементами (например, текстом).
Пример:
Почему родитель "схлопывается" при использовании
Когда внутри
Решение 1:
Решение 2:
Как остановить обтекание (`clear`)?
Чтобы отменить обтекание, используется
Почему `float` устарел и что использовать вместо него?
Раньше
Flexbox (
CSS Grid (
👉 @frontendInterview
float – это CSS-свойство, которое позволяет "выплывать" элементу из обычного потока документа и обтекаться другими элементами (например, текстом).
Пример:
<img src="image.jpg" class="float-img">
<p>Это текст, который будет обтекать картинку.</p>
.float-img {
float: left;
margin-right: 10px;
}Почему родитель "схлопывается" при использовании
float? Когда внутри
div есть только float-элементы, браузер считает, что он пустой, потому что float убирает элемент из потока. <div class="container">
<img src="image.jpg" class="float-img">
<p>Текст обтекает картинку.</p>
</div>
.container {
background: lightgray;
}
.float-img {
float: left;
}Решение 1:
overflow: hidden; .container {
overflow: hidden; /* Контейнер теперь учитывает float-элементы */
}Решение 2:
clearfix (старый способ) .container::after {
content: "";
display: block;
clear: both;
}Как остановить обтекание (`clear`)?
Чтобы отменить обтекание, используется
clear. <img src="image.jpg" class="float-img">
<p>Этот текст обтекает картинку.</p>
<div class="clear"></div>
<p>Этот текст пойдёт на новую строку.</p>
.float-img {
float: left;
margin-right: 10px;
}
.clear {
clear: both;
}Почему `float` устарел и что использовать вместо него?
Раньше
float использовали для создания колонок и сеток, но сегодня его заменили: Flexbox (
display: flex;) – лучше для адаптивных макетов. CSS Grid (
display: grid;) – мощный инструмент для сложных сеток. .container {
display: flex;
align-items: center;
}👉 @frontendInterview
👍3❤1👎1
Learning TypeScript (2022)
Вы узнаете:
- Преимущества TypeScript и общие характеристики его системы типов
- Почему и как TypeScript полезен поверх JavaScript
- Как информировать свою систему типов с помощью аннотаций типов, предназначенных только для разработчиков
- Как TypeScript анализирует и понимает код, чтобы помочь вам дополнить существующие модели разработки
- Как TypeScript помогает работать с массивами, классами, функциями, объектами и другими важными встроенными конструкциями JavaScript
👉 @frontendInterview
Вы узнаете:
- Преимущества TypeScript и общие характеристики его системы типов
- Почему и как TypeScript полезен поверх JavaScript
- Как информировать свою систему типов с помощью аннотаций типов, предназначенных только для разработчиков
- Как TypeScript анализирует и понимает код, чтобы помочь вам дополнить существующие модели разработки
- Как TypeScript помогает работать с массивами, классами, функциями, объектами и другими важными встроенными конструкциями JavaScript
👉 @frontendInterview
👎1
Alphabetized
Создайте функцию, которая отсортирует символы строки в алфавитном порядке.
Пример:
👉 @frontendInterview
Создайте функцию, которая отсортирует символы строки в алфавитном порядке.
Пример:
alphabetized("The Holy Bible") // "BbeehHilloTy"👉 @frontendInterview
Что такое meta теги?
Meta-теги – это специальные HTML-теги, которые содержат метаинформацию о веб-странице. Они располагаются внутри
Зачем нужны meta-теги?
- Улучшают SEO (поисковую оптимизацию)
- Управляют отображением в соцсетях и поисковиках
- Настраивают адаптивность страницы (например, на мобильных устройствах)
- Определяют кодировку, язык и авторство страницы
Основные meta-теги с примерами
Кодировка страницы
Описание страницы (SEO)
Ключевые слова (SEO, устарело)
Автор страницы
Запрет индексации страницы
Адаптивность на мобильных устройствах
Социальные сети (Open Graph, Twitter Cards)
Facebook и другие соцсети (Open Graph)
Twitter-карточки
👉 @frontendInterview
Meta-теги – это специальные HTML-теги, которые содержат метаинформацию о веб-странице. Они располагаются внутри
<head> и не отображаются на самой странице, но помогают браузерам, поисковым системам и социальным сетям правильно обрабатывать и отображать страницу. Зачем нужны meta-теги?
- Улучшают SEO (поисковую оптимизацию)
- Управляют отображением в соцсетях и поисковиках
- Настраивают адаптивность страницы (например, на мобильных устройствах)
- Определяют кодировку, язык и авторство страницы
Основные meta-теги с примерами
Кодировка страницы
<meta charset="UTF-8">
Описание страницы (SEO)
<meta name="description" content="Лучший сайт с рецептами вкусных блюд!">
Ключевые слова (SEO, устарело)
<meta name="keywords" content="рецепты, еда, кулинария, блюда">
Автор страницы
<meta name="author" content="Иван Иванов">
Запрет индексации страницы
<meta name="robots" content="noindex, nofollow">
Адаптивность на мобильных устройствах
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Социальные сети (Open Graph, Twitter Cards)
Facebook и другие соцсети (Open Graph)
<meta property="og:title" content="Вкусные рецепты">
<meta property="og:description" content="Попробуйте лучшие блюда со всего мира!">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com">
Twitter-карточки
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Рецепты для гурманов">
<meta name="twitter:image" content="https://example.com/image.jpg">
👉 @frontendInterview
👍6
Как можно убрать пробелы в начале и конце строки?
При работе с полями ввода <input> и <textarea> может встречаться ситуация, когда пользователи добавляют пробелы в начале или конце текста. В некоторых случаях это не критично — например, в чатах или мессенджерах. Но есть ситуации, где важно получить чистые данные без лишних пробелов, как при вводе email для авторизации.
Для удаления таких пробельных символов используется метод .trim(), который нужно применить к значению поля перед отправкой данных на сервер.
Метод также помогает получить чистые данные в required-полях. Атрибут required указывает, что поле формы обязательно для заполнения, но он не всегда правильно работает с пробельными символами. Если пользователь введёт только пробелы в поле с атрибутом required, браузер может посчитать поле заполненным, хотя фактически полезной информации там нет.
Пример
Метод не принимает аргументов и работает напрямую со строкой, на которой вызван:
👉 @frontendInterview
При работе с полями ввода <input> и <textarea> может встречаться ситуация, когда пользователи добавляют пробелы в начале или конце текста. В некоторых случаях это не критично — например, в чатах или мессенджерах. Но есть ситуации, где важно получить чистые данные без лишних пробелов, как при вводе email для авторизации.
Для удаления таких пробельных символов используется метод .trim(), который нужно применить к значению поля перед отправкой данных на сервер.
Метод также помогает получить чистые данные в required-полях. Атрибут required указывает, что поле формы обязательно для заполнения, но он не всегда правильно работает с пробельными символами. Если пользователь введёт только пробелы в поле с атрибутом required, браузер может посчитать поле заполненным, хотя фактически полезной информации там нет.
Пример
const phrase = ' А быть может, каждый из вас уже начал — не заметив этого — тот единственный путь, который предназначен ему судьбой.\n '
console.log(phrase.length)
// 124
const phraseWithoutSpaces = phrase.trim()
console.log(phraseWithoutSpaces)
// 'А быть может, каждый из вас уже начал — не заметив этого — тот единственный путь, который предназначен ему судьбой.'
console.log(phraseWithoutSpaces.length)
// 115
Метод не принимает аргументов и работает напрямую со строкой, на которой вызван:
const str = ' Привет, Дока! '
console.log(str.trim()) // 'Привет, Дока!'
👉 @frontendInterview
👍4❤1
Как создать веб-приложение со своей картой: подключение API v3 Яндекс Карт
Сколько карт установлено на вашем смартфоне? Попробуйте ответить на этот вопрос и задумайтесь, как часто их добавляют разработчики приложений. Кто-то отмечает на картах свои магазины, кто-то — делает проекты в духе Zenly, другие — показывают зоны доставки еды и т. д.
Если вам тоже пришлось «вшить» в свое веб-приложение карты, запаситесь терпением. В инструкции рассказываем, как это сделать и настроить тестовое окружение с IDE в облаке.
👉 @frontendInterview
Сколько карт установлено на вашем смартфоне? Попробуйте ответить на этот вопрос и задумайтесь, как часто их добавляют разработчики приложений. Кто-то отмечает на картах свои магазины, кто-то — делает проекты в духе Zenly, другие — показывают зоны доставки еды и т. д.
Если вам тоже пришлось «вшить» в свое веб-приложение карты, запаситесь терпением. В инструкции рассказываем, как это сделать и настроить тестовое окружение с IDE в облаке.
👉 @frontendInterview
❤1👍1
Является ли Drag and Drop частью спецификации HTML5?
Anonymous Quiz
33%
Нет, Drag and Drop реализуется только через JS
59%
Да, это встроенный API в HTML5
2%
Да, но работает только для мобильных устройств
6%
Да, но работает только на устройствах с мышью
👍4
Как можно узнать, есть ли в двух множествах Set общие элементы?
Метод isDisjointFrom() позволяет проверить, имеют ли два множества хотя бы один общий элемент. Возвращает true, если множества не имеют общих элементов, и false, если хотя бы один элемент совпадает.
Проверку, которую выполняет метод, можно выразить так:
A ∩ B = ∅
Пример
В одной компании два разработчика, Анна и Павел, решили организовать учебный кружок по программированию. Чтобы понять, могут ли они вести занятия вместе, им нужно проверить, есть ли у них пересекающиеся области знаний. В этом им поможет метод isDisjointFrom():
Как мы видим, у них нет общих навыков, но тут оказалось, что Анна забыла указать, что она также знает Node.js.
👉 @frontendInterview
Метод isDisjointFrom() позволяет проверить, имеют ли два множества хотя бы один общий элемент. Возвращает true, если множества не имеют общих элементов, и false, если хотя бы один элемент совпадает.
Проверку, которую выполняет метод, можно выразить так:
A ∩ B = ∅
Пример
В одной компании два разработчика, Анна и Павел, решили организовать учебный кружок по программированию. Чтобы понять, могут ли они вести занятия вместе, им нужно проверить, есть ли у них пересекающиеся области знаний. В этом им поможет метод isDisjointFrom():
const annaSkills = new Set(['JavaScript', 'HTML', 'CSS', 'Vue.js']);
const pavelSkills = new Set(['Python', 'Node.js', 'PostgreSQL', 'Redis']);
console.log(annaSkills.isDisjointFrom(pavelSkills));
// true, т.к. у Ани и Павла нет общих навыков
Как мы видим, у них нет общих навыков, но тут оказалось, что Анна забыла указать, что она также знает Node.js.
/ Добавим навык в существующее множество.
annaSkills.add('Node.js');
console.log(annaSkills.isDisjointFrom(pavelSkills));
// false, т.к. Node.js уже есть в обоих множествах
👉 @frontendInterview
👍9
Алгоритмы
В этом руководстве содержатся основные сведения об алгоритмах: анализируются различные типы алгоритмов, рассматриваются мето-ды их построения (рекурсия, динамическое программирование и др.), приводятся практические примеры. В конце каждой главы приводятся упражнения, направленные на закрепление пройденного. Для изучения материала требуется знание основ дискретной математики и методов доказательств, а также представление об основных вычислительных задачах и алгоритмах. Желателен практический опыт работы с языком программирования, поддерживающим косвенную адресацию и рекурсию.Издание адресовано студентам и преподавателям технических вузов, а также тем, кто хочет изучить основы алгоритмизации.
👉 @frontendInterview
В этом руководстве содержатся основные сведения об алгоритмах: анализируются различные типы алгоритмов, рассматриваются мето-ды их построения (рекурсия, динамическое программирование и др.), приводятся практические примеры. В конце каждой главы приводятся упражнения, направленные на закрепление пройденного. Для изучения материала требуется знание основ дискретной математики и методов доказательств, а также представление об основных вычислительных задачах и алгоритмах. Желателен практический опыт работы с языком программирования, поддерживающим косвенную адресацию и рекурсию.Издание адресовано студентам и преподавателям технических вузов, а также тем, кто хочет изучить основы алгоритмизации.
👉 @frontendInterview
👍1
My Language Skills
Вам дан объект, содержащий результаты теста по языкам. Верните массив языков, для которых результат теста больше 60 в убывающем порядке.
Примеры:
👉 @frontendInterview
Вам дан объект, содержащий результаты теста по языкам. Верните массив языков, для которых результат теста больше 60 в убывающем порядке.
Примеры:
{"Java": 10, "Ruby": 80, "Python": 65}
// ["Ruby", "Python"]
{"Hindi": 60, "Dutch" : 93, "Greek": 71}
// ["Dutch", "Greek", "Hindi"]
{"C++": 50, "ASM": 10, "Haskell": 20}
// []👉 @frontendInterview
Что такое вычисляемые свойства и как их использовать?
Это функция в JavaScript, которая позволяет использовать выражения в качестве имен свойств объекта. Это особенно полезно, когда имя свойства динамически вычисляется или создается на основе переменной.
Вычисляемые свойства в объектных литералах задаются в квадратных скобках
Использование вычисляемых свойств
1. Динамическое имя свойства на основе переменной
2. Использование выражений в качестве имен свойств
3. Вложенные вычисляемые свойства
4. Использование функции для вычисления имен свойств
Применение в реальных сценариях
Создание объекта с динамическими ключами
Предположим, вам нужно создать объект для хранения оценок студентов, где ключи представляют собой имена студентов, а значения — их оценки.
Использование вычисляемых свойств для формирования запросов
Допустим, у вас есть объект, представляющий параметры фильтра для поиска, и вы хотите динамически создавать ключи на основе выбранных фильтров.
👉 @frontendInterview
Это функция в JavaScript, которая позволяет использовать выражения в качестве имен свойств объекта. Это особенно полезно, когда имя свойства динамически вычисляется или создается на основе переменной.
Вычисляемые свойства в объектных литералах задаются в квадратных скобках
[].let propName = 'name';
let person = {
[propName]: 'Alice'
};
console.log(person.name); // 'Alice'
Использование вычисляемых свойств
1. Динамическое имя свойства на основе переменной
let key = 'age';
let person = {
name: 'Alice',
[key]: 25
};
console.log(person.name); // 'Alice'
console.log(person.age); // 25
2. Использование выражений в качестве имен свойств
let i = 0;
let obj = {
['prop_' + ++i]: i,
['prop_' + ++i]: i,
['prop_' + ++i]: i
};
console.log(obj); // { prop_1: 1, prop_2: 2, prop_3: 3 }
3. Вложенные вычисляемые свойства
let prefix = 'user';
let index = 1;
let users = {
[prefix + index]: { name: 'Alice' },
[prefix + (index + 1)]: { name: 'Bob' }
};
console.log(users.user1.name); // 'Alice'
console.log(users.user2.name); // 'Bob'
4. Использование функции для вычисления имен свойств
function createKey(base, index) {
return base + index;
}
let obj = {
[createKey('key', 1)]: 'value1',
[createKey('key', 2)]: 'value2'
};
console.log(obj.key1); // 'value1'
console.log(obj.key2); // 'value2'Применение в реальных сценариях
Создание объекта с динамическими ключами
Предположим, вам нужно создать объект для хранения оценок студентов, где ключи представляют собой имена студентов, а значения — их оценки.
let studentName1 = 'Alice';
let studentName2 = 'Bob';
let grades = {
[studentName1]: 85,
[studentName2]: 92
};
console.log(grades.Alice); // 85
console.log(grades.Bob); // 92
Использование вычисляемых свойств для формирования запросов
Допустим, у вас есть объект, представляющий параметры фильтра для поиска, и вы хотите динамически создавать ключи на основе выбранных фильтров.
function getFilterKey(filterName) {
return `filter_${filterName}`;
}
let filters = {};
filters[getFilterKey('age')] = 25;
filters[getFilterKey('location')] = 'New York';
console.log(filters); // { filter_age: 25, filter_location: 'New York' }👉 @frontendInterview
👍6
Позиционирование элементов с помощью JavaScript
Элементы на странице можно позиционировать не только с помощью стилей, но и с помощью JavaScript. В этой статье мы рассмотрим ситуации, когда это оправдано и как таким позиционированием пользоваться.
👉 @frontendInterview
Элементы на странице можно позиционировать не только с помощью стилей, но и с помощью JavaScript. В этой статье мы рассмотрим ситуации, когда это оправдано и как таким позиционированием пользоваться.
👉 @frontendInterview
👍3
Вот самое крутое:
Подпишись и находи для себя мощные нейросети бесплатно: https://t.iss.one/+poa2Q_32wcFhY2Yy
Please open Telegram to view this post
VIEW IN TELEGRAM