👉 @frontendInterview

Как встроить содержимое внешнего сайта на свой?

<iframe> — это контейнер, который позволяет вставить любой HTML-документ из другого источника. Часто этот документ интерактивный — например, карта, видео или пост из соцсети.

Этот контейнер обычно называют фреймом. Внешний вид фрейма и его положение на странице можно задать через CSS.

Пример
С помощью такого нехитрого кода мы можем встроить карту размером 560 на 400 пикселей на любую страницу:

<iframe
  id="inlineFrameExample"
  title="Inline Frame Map"
  width="560"
  height="400"
  frameborder="1"
  allowfullscreen="true"
  src="https://yandex.ru/map-widget/v1/-/CBFkaYSE0A"
>
</iframe>

Часто сервисы, из которых мы хотим что-то встроить (карты, посты и тому подобное), сами могут сгенерировать вам <iframe>. Его останется только добавить в свой код.

👉 @frontendInterview

🧑🏻‍💻Хотите начать разрабатывать с Vue.js, но не знаете, с чего начать? 

На открытом вебинаре 22 апреля в 20:00 мск мы расскажем вам о Vue.js 3. Вы увидите, как просто установить Vue, какие основные концепции нужно освоить и какие библиотеки вам понадобятся для старта. Убедитесь, что этот фреймворк проще, чем кажется, и намного мощнее, чем вы могли бы подумать!

После вебинара вы будете понимать, как применять Vue.js в своих проектах. Это простой, быстрый и эффективный фреймворк для вашего будущего в веб-разработке.

👉Регистрируйтесь прямо сейчас и получите скидку на большое обучение «Vue.js-разработчик»: hhttps://otus.pw/xI5x/?erid=2W5zFHhsSUG 

Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.

Мои 7 правил при собеседовании разработчиков

За последние несколько лет я перестроил свой процесс найма разработчиков, начал по-другому готовиться к собеседованиям и проверять нужные навыки. Как мне кажется, у меня получилось повысить свою продуктивность и научиться нанимать подходящих разработчиков в проекты, где я работаю.

Пару недель назад меня попросили помочь на техническом собеседовании для Senior/Lead backend-разработчика и поделиться опытом. В процессе я формализовал несколько правил, которых придерживаюсь при проверке кандидатов. Чем я и хочу поделиться.

Ниже — мои советы по проведению интервью с конкретными примерами. Уточню, что это не подробное руководство по найму на конкретную должность, а универсальные рекомендации для всех интервью с разработчиками.

👉 @frontendInterview

Обычный дейлик

👉 @frontendInterview

​Как работают плавающие элементы (floats)?

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

Learning TypeScript (2022)

Вы узнаете:
- Преимущества TypeScript и общие характеристики его системы типов
- Почему и как TypeScript полезен поверх JavaScript
- Как информировать свою систему типов с помощью аннотаций типов, предназначенных только для разработчиков
- Как TypeScript анализирует и понимает код, чтобы помочь вам дополнить существующие модели разработки
- Как TypeScript помогает работать с массивами, классами, функциями, объектами и другими важными встроенными конструкциями JavaScript

👉 @frontendInterview

Alphabetized

Создайте функцию, которая отсортирует символы строки в алфавитном порядке.

Пример:
alphabetized("The Holy Bible") // "BbeehHilloTy"

👉 @frontendInterview

​Что такое meta теги?

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

👉 @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

Как создать веб-приложение со своей картой: подключение API v3 Яндекс Карт

Сколько карт установлено на вашем смартфоне? Попробуйте ответить на этот вопрос и задумайтесь, как часто их добавляют разработчики приложений. Кто-то отмечает на картах свои магазины, кто-то — делает проекты в духе Zenly, другие — показывают зоны доставки еды и т. д.

Если вам тоже пришлось «вшить» в свое веб-приложение карты, запаситесь терпением. В инструкции рассказываем, как это сделать и настроить тестовое окружение с IDE в облаке.

👉 @frontendInterview

Тестировщик vs Разработчик

👉 @frontendInterview

​Как можно узнать, есть ли в двух множествах Set общие элементы?

Метод 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

Алгоритмы

В этом руководстве содержатся основные сведения об алгоритмах: анализируются различные типы алгоритмов, рассматриваются мето-ды их построения (рекурсия, динамическое программирование и др.), приводятся практические примеры. В конце каждой главы приводятся упражнения, направленные на закрепление пройденного. Для изучения материала требуется знание основ дискретной математики и методов доказательств, а также представление об основных вычислительных задачах и алгоритмах. Желателен практический опыт работы с языком программирования, поддерживающим косвенную адресацию и рекурсию.Издание адресовано студентам и преподавателям технических вузов, а также тем, кто хочет изучить основы алгоритмизации.

👉 @frontendInterview