​Что такое семантика в HTML?

Семантика в контексте веб-разработки относится к использованию HTML-тегов в соответствии с их предназначением и значением. Это означает выбор подходящих тегов для разметки различных частей контента на веб-странице таким образом, чтобы они отражали его смысл и структуру. Такая разметка помогает не только людям, но и поисковым системам и другим машинным агентам понимать структуру и содержание веб-страницы, что влияет на доступность сайта и его поисковую оптимизацию (SEO).

Примеры:
- <article>: Для независимого контента, который имеет смысл сам по себе (например, статья в блоге).
- <aside>: Для контента, слабо связанного с основным содержимым страницы (например, боковая панель).
- <details>: Для контента, который можно скрыть или показать по запросу пользователя.
- <figcaption>: Для подписи к изображению в элементе <figure>.
- <figure>: Для самостоятельных элементов, таких как изображения, диаграммы, коды, которые сопровождаются подписью.
- <footer>: Для нижнего колонтитула документа или раздела.
- <header>: Для верхнего колонтитула документа или раздела.
- <main>: Для основного содержимого документа.
- <mark>: Для выделения частей текста.
- <nav>: Для навигационных ссылок.
- <section>: Для разделов содержимого, которые связаны с определенной темой.
- <summary>: Для заголовка элемента <details>.

Значение семантики:
- Доступность: Делает веб-контент более доступным для людей с ограниченными возможностями, использующих вспомогательные технологии, такие как экранные читалки, поскольку эти технологии могут интерпретировать структуру и предоставлять контент в более понятной форме.
- SEO: Поисковые системы используют ее для лучшего понимания структуры и содержания веб-страницы, что может улучшить индексацию и ранжирование сайта.
- Улучшенная поддержка и разработка: Делает код более читаемым и легким для понимания, что облегчает сопровождение и дальнейшую разработку сайта.

👉 @frontendInterview

Как получить реальный опыт во фронтенд-разработке за 7 дней?

А именно:

- Сверстать веб-сайт на HTML + CSS;
- Реализовать функционал на JavaScript;
- Пощупать фронтенд-фреймворк Angular;
- Подключить Backend и загрузить сайт на хостинг.

В итоге своими руками разработаешь качественный сайт, который не стыдно добавить в портфолио или продать.

Такой опыт можно получить на бесплатном практикуме от Айтилогии с поддержкой от опытных разработчиков на каждом этапе.

👉 Приходи на бесплатное обучение и зови с собой друзей

Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку.

Регулярные выражения. Основы

Если вы программист, не имеющий опыта работы с регулярными выражениями, то данная книга – как раз то, что нужно для первого знакомства с ними. Многочисленные примеры, приведенные в книге, не только помогут вам освоить основы регулярных выражений, но и научат применять их для поиска, извлечения и преобразования фрагментов текста посредством их сопоставления с определенными символами, словами и шаблонами. Регулярные выражения эффективно применяются во многих областях программирования. Они доступны в утилитах UNIX и таких языках программирования, как Perl, Java, javascript и С#. Прочитав книгу, вы будете знать синтаксис наиболее распространенных диалектов регулярных выражений и понимать, в каких случаях они смогут обеспечить вам значительную экономию времени.

👉 @frontendInterview

Two to One

Вам даны две строки s1 и s2, содержащие только буквы от a до z. Создайте функцию, которая возвращает новую отсортированную строку (в алфавитном порядке по возрастанию), максимально длинную, содержащую отдельные буквы (каждая из которых берется только один раз), из s1 или s2.

Примеры:

a = "xyaabbbccccdefww"
b = "xxxxyyyyabklmopq"
longest(a, b) -> "abcdefklmopqwxy"

a = "abcdefghijklmnopqrstuvwxyz"
longest(a, a) -> "abcdefghijklmnopqrstuvwxyz"

👉 @frontendInterview

​Что такое чистая функция ?

Чистая функция — это концепция, особенно популярная в функциональном программировании, которая описывает функцию, обладающую следующими характеристиками:

Детерминированность: Возвращаемое значение зависит только от её входных параметров и не изменяется при повторных вызовах с теми же параметрами. Это означает, что функция всегда возвращает один и тот же результат при одинаковых входных данных, не обращаясь при этом к внешним состояниям или данным.

Отсутствие побочных эффектов: Не вызывает побочных эффектов в приложении, то есть не изменяет состояние программы или внешнего окружения (например, не изменяет глобальные переменные, не записывает данные на диск, не выводит информацию на экран и т.д.). Все, что делает чистая функция — это обрабатывает входные данные и возвращает результат.

Пример:

function add(a, b) {
  return a + b;
}

Функция add является чистой, потому что она всегда возвращает одно и то же значение для одних и тех же аргументов и не имеет побочных эффектов.

Пример нечистой функции:

let counter = 0;

function incrementCounter(value) {
  counter += value;
}

Функция incrementCounter не является чистой, так как она изменяет глобальную переменную counter, что является побочным эффектом. Также результат выполнения функции зависит от внешнего состояния (значения counter), что нарушает принцип детерминированности.

Преимущества чистых функций:
- Простота тестирования: Легко тестировать, так как их поведение зависит только от входных данных.
- Предсказуемость: Отсутствие побочных эффектов и зависимость только от входных параметров делает поведение их предсказуемым.
- Повторное использование: Могут быть легко переиспользованы в различных частях программы.
- Модульность: Программы, построенные с использованием их, обычно обладают высокой модульностью и легкостью в поддержке и расширении.

👉 @frontendInterview

👉 @frontendInterview

​Медиа запросы в адаптивной верстке

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

История медиа-запросов началась еще с далекого 2002 года, с правила @media, которое появилось в спецификации CSS2. Тогда это была относительно простая технология, которая позволяла выводить различные стили в зависимости от типа устройства. Со временем технология развивалась, стала более совершенной в CSS2.1, но оценить полную мощь данной технологии веб-разработчики смогли только после выхода спецификации CSS3.

Медиа-запросы (media-queries) – технология, реализуемая на стороне браузера, позволяющая загружать разные стили в зависимости от типа и характеристик устройства, и позволяющая тем самым влиять на процесс отображения информации.

В CSS3 спецификации в обработке правила @media появилась полноценная работа с размерами устройства и экрана устройства. Именно благодаря этой поддержке появилась возможность делать адаптивные сайты. Рассмотрим медиа-запросы более внимательно.

Структура медиа-запроса

@media [not|only] type [logical] (expression) {
  CSS код
}

@media – объявление правила
not – оператор отрицания, используется для отрицания всего последующего выражения
only – оператор позволяет скрыть медиа-запросы от браузеров, которые их не поддерживают
type – тип устройства
logical – логический оператор (и или или) позволяет лучше управлять логикой медиа-запроса
expression – выражение проверяющее характеристики устройства

Медиа-функции
Медиа-функции - это набор операторов, позволяющих проверять те или иные технические характеристики и свойства устройств. Они позволяют производить тонкую настройку запроса. Медиа-функции способны проверять следующие параметры:

Ширина (min-width, max-width) – позволяет применить стили в зависимости от ширины видимой части.
Высоты (min-height, max-height) – позволяет применить стили в зависимости от высоты видимой части.
Ширина устройства (min-device-width, max-device-width) – позволяет применить стили в зависимости от ширины устройства.
Высота устройства (min-device-height, max-device-height) – позволяет применить стили в зависимости от высоты устройства.
Разрешение (min-resolution, max-resolution) – позволяет применить стили в зависимости от разрешения.
Ориентация (orientation) – позволяет применить стили в зависимости от ориентации устройства.
Соотношение ширины и высоты (min-aspect-ratio, max-aspect-ratio) – позволяет применить стили в зависимости от соотношения сторон видимой части.
Соотношение ширины и высоты устройства (min-device-aspect-ratio, max-device-aspect-ratio) – позволяет применить стили в зависимости от соотношения сторон устройства.
Цветность (min-color, max-color) – позволяет применить стили в зависимости от соотношения сторон устройства.
Количество поддерживаемых цветов (min-color-index, max-color-index) – позволяет применить стили в зависимости от количества поддерживаемых цветов.
Монохромность (min-monochrome, max-monochrome) – позволяет применить стили в зависимости от монохромности и количества оттенков серого.
Сетка (grid) – позволяет применить стили в зависимости от поддержки устройством фиксированной сетки.

👉 @frontendInterview

Магия CSS на практике: советы по вёрстке от гика

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

В этой статье рассмотрим:
- почему декоративные элементы, сделанные с помощью чистого CSS могут не отобразиться в режиме повышенной контрастности Windows;
- чем можно заменить объявления свойства height со значением auto для изображений;
- какой есть нюанс при установке максимальной ширины у группы элементов;
- плавную прокрутку без неприятных ситуаций для пользователя;
- чего не хватает при использовании фоновых изображений.

👉 @frontendInterview

🔥Тест по JavaScript от OTUS 🔥

Ответьте на 20 вопросов и проверьте, насколько вы готовы к обучению на курсе - «JavaScript Developer. Professional»

💣 Пройдете тест и получите:
✔️ Живое общение с экспертами JavaScript-сообщества
✔️ Видео-курс по Git в подарок к основной программе
✔️ Лучшие открытые уроки прошлых наборов курса
✔️ Продвинутые темы и проектная работа, направленная на решение реальных рабочих задач, уровня Middle+

Курс стартует 26 сентября и вы можете попасть в группу с 5% скидкой
Ваш промод - JSPRO9

Erid 2SDnjeAJ3nr

Разработчики: «У нас нет выгорания»
Разработчики после рабочего дня:

👉 @frontendInterview

Разбираем как решать задачи на LeetCode

✅ Примеры решений
✅ Пояснения

Выбери своё направление:

1. Python
2. JavaScript
3. Java
4. C#
5. Golang
6. C/C++
7. PHP
8. Kotlin
9. Swift

​Что такое операторы сравнения?

Операторы сравнения используются для сравнения двух значений и возвращают логическое значение: true (истина), если сравнение верно, и false (ложь), если нет. Они играют ключевую роль в управлении потоком выполнения программы, позволяя выполнить определённый код в зависимости от результатов сравнения.

Виды:
- Равенство (==): Проверяет равенство двух значений после приведения их к одному типу. Например, 5 == '5' вернёт true.
- Не равно (!=): Проверяет, не равны ли два значения после приведения их к одному типу. Например, 5 != '5' вернёт false.
- Строгое равенство (===): Проверяет равенство двух значений без приведения типов, то есть значения должны быть одного типа. Например, 5 === '5' вернёт false.
- Строгое не равенство (!==): Проверяет, не равны ли два значения без приведения типов. Например, 5 !== '5' вернёт true.
- Больше (>): Проверяет, больше ли первое значение, чем второе. Например, 5 > 3 вернёт true.
- Больше или равно (>=): Проверяет, больше ли первое значение или равно второму. Например, 5 >= 5 вернёт true.
- Меньше (<): Проверяет, меньше ли первое значение, чем второе. Например, 3 < 5 вернёт true.
- Меньше или равно (<=): Проверяет, меньше ли первое значение или равно второму. Например, 5 <= 5 вернёт true.

Примеры:

console.log(5 == '5');   // true, потому что значения равны после приведения типов
console.log(5 === '5');  // false, потому что значения разных типов
console.log(5 != '4');   // true, потому что значения не равны после приведения типов
console.log(5 !== '5');  // true, потому что значения разных типов
console.log(5 > 3);      // true
console.log(5 >= 5);     // true
console.log(3 < 5);      // true
console.log(5 <= 5);     // true

Важные моменты:
- При использовании операторов равенства (== и !=) происходит автоматическое приведение типов, что может привести к неожиданным результатам. Поэтому рекомендуется использовать строгие операторы равенства (=== и !==) для точного сравнения значений.
- Операторы сравнения часто используются в условных операторах (if, else if, switch) и циклах (while, for), позволяя управлять потоком выполнения программы в зависимости от результатов сравнения.

👉 @frontendInterview

Веб-компоненты в действии

Один из основных факторов, способствующих трансформации интернета в последние годы, – широкое внедрение разработки пользовательского интерфейса на основе компонентов. В этой книге подробно описываются рабочие процессы, которые дают вам полный контроль над стилями и поведением компонентов и существенно упрощают их создание, совместное и повторное использование в проектах.

👉 @frontendInterview

Срочно❗️ Нужны люди, которые имеют минимальный опыт в IT. Покажем, как освоить профессию "Frontend" с зп от 150.000 ₽. Обучение с нас бесплатно!
График: 2-3 часа или полный день, на выбор.

Frontend-разработчик (frontend developer) — это специалист, который отвечает за создание пользовательского интерфейса сайта, приложения или ПО.

Для вас:
1) Удаленная работа
2) Свободный график

Можно совмещать с основной работой🔥

✔️Не нужно что-то продавать или привлекать людей.
✔️За полгода вполне реально вырасти до зп в 300.000 рублей и больше денег.
✔️Мы научим вас искать клиентов, так что у вас уже будет работа.

Сперва проводим бесплатный вводный урок:
👉 Регистрация на урок

На уроке расскажем:

— чем занимается Fronted-разработчик и за что ему готовы платить
— зарплатные вилки разных специалистов от стажёра до тимлида
— сколько времени нужно на обучение и стажировку
— 8 шагов, чтобы стать frontend-разработчиком

Если хотите попробовать себя в одной из самых востребованных профессий в 2024 году, то это ваш шанс! С нами вы сможете научиться этому быстро и уже через пару месяцев найти первых клиентов, а мы с этим поможем!

Регистрируйтесь на бесплатный вводный урок по профессии:
👉 Зарегистрироваться

Насколько вы действительно хороши?

Напишите функцию, которая принимает массив чисел (баллы по предметам) и ваш результат. Верните True, если ваш результат больше среднего значения, иначе False! Примечание: Ваши баллы не включаются в массив. Для вычисления среднего балла добавите свой балл в данный массив!

Пример:

betterThanAverage([2, 3], 5) = true

👉 @frontendInterview