Что такое 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
На пальцах про WebRTC на примере своего мессенджера
Сегодня разберёмся, как сделать видеозвонки — ту самую фичу, без которой сложно представить современное общение в 2025 году, на примере реализации мессенджера.
Для этого мы познакомимся с WebRTC — технологией, которая позволяет приложениям устанавливать прямое соединение друг с другом для обмена аудио, видео и другими данными. Это мощный, но местами капризный инструмент, который требует понимания архитектуры, сигналинга и сетевых нюансов вроде NAT и ICE.
В этой части мы:
- разберёмся, как работает WebRTC под капотом;
- напишем сигнальный сервер для обмена данными между участниками звонка;
- научим клиентов подключаться друг к другу и передавать медиапотоки;
- настроим поддержку STUN и TURN — чтобы звонки работали даже за NAT или в мобильных сетях;
Готовы? Поехали 🚀
👉 @frontendInterview
Сегодня разберёмся, как сделать видеозвонки — ту самую фичу, без которой сложно представить современное общение в 2025 году, на примере реализации мессенджера.
Для этого мы познакомимся с WebRTC — технологией, которая позволяет приложениям устанавливать прямое соединение друг с другом для обмена аудио, видео и другими данными. Это мощный, но местами капризный инструмент, который требует понимания архитектуры, сигналинга и сетевых нюансов вроде NAT и ICE.
В этой части мы:
- разберёмся, как работает WebRTC под капотом;
- напишем сигнальный сервер для обмена данными между участниками звонка;
- научим клиентов подключаться друг к другу и передавать медиапотоки;
- настроим поддержку STUN и TURN — чтобы звонки работали даже за NAT или в мобильных сетях;
Готовы? Поехали 🚀
👉 @frontendInterview
🔥2
Для чего используется ESLint?
Anonymous Quiz
4%
Для компиляции JavaScript кода
93%
Для автоматического анализа и исправления кода
1%
Для запуска тестов
2%
Для управления зависимостями проекта
👍6🤔2
Как отследить демонтирование функционального компонента?
В функциональных компонентах React можно отслеживать демонтирование компонента с помощью хука
Пример с реальным использованием
Открытие WebSocket соединения
Обработка входящих сообщений
Закрытие WebSocket соединения при демонтировании
👉 @frontendInterview
В функциональных компонентах React можно отслеживать демонтирование компонента с помощью хука
useEffect. Когда компонент демонтируется, React вызывает функцию очистки, которую можно определить внутри useEffect.import React, { useEffect } from 'react';
const MyComponent = () => {
useEffect(() => {
console.log('Component mounted');
// Функция очистки вызывается при демонтировании компонента
return () => {
console.log('Component will unmount');
};
}, []); // Пустой массив зависимостей означает, что эффект выполнится только при монтировании и демонтировании
return (
<div>
<p>My Component</p>
</div>
);
};
export default MyComponent;Пример с реальным использованием
import React, { useEffect, useState } from 'react';
const WebSocketComponent = () => {
const [messages, setMessages] = useState([]);
useEffect(() => {
const socket = new WebSocket('ws://example.com/socket');
socket.onmessage = (event) => {
setMessages((prevMessages) => [...prevMessages, event.data]);
};
console.log('WebSocket connection opened');
return () => {
socket.close();
console.log('WebSocket connection closed');
};
}, []);
return (
<div>
<h1>WebSocket Messages</h1>
<ul>
{messages.map((message, index) => (
<li key={index}>{message}</li>
))}
</ul>
</div>
);
};
export default WebSocketComponent;Открытие WebSocket соединения
const socket = new WebSocket('ws://example.com/socket'); Обработка входящих сообщений
socket.onmessage = (event) => {
setMessages((prevMessages) => [...prevMessages, event.data]);
};
Закрытие WebSocket соединения при демонтировании
return () => {
socket.close();
console.log('WebSocket connection closed');
};👉 @frontendInterview
👍4