👩‍💻 Массивы в JavaScript: основы и интересные факты

🦋 Массив в JavaScript — это структура данных, которая позволяет хранить множество значений в одном месте. Значения могут быть любыми типами данных, включая числа, строки, объекты и даже другие массивы.

💎 Интересный методы массивов:
▶️ map: возвращает новый массив, содержащий результаты вызова функции для каждого элемента массива.

let lengths = fruits.map(fruit => fruit.length);

▶️ filter: создает новый массив, содержащий элементы, прошедшие проверку, задаваемую в переданной функции.

let longFruits = fruits.filter(fruit => fruit.length > 5);

▶️ reduce: применяет функцию к аккумулятору и каждому значению массива (слева направо) для его свертки в одно значение.

let totalLength = fruits.reduce((sum, fruit) => sum + fruit.length, 0);

👩‍💻 WebSockets в JavaScript: Реальное время для ваших веб-приложений

📌 WebSockets — это протокол, предоставляющий двустороннюю связь между клиентом и сервером через единственное постоянное соединение. В отличие от традиционного HTTP, WebSocket позволяет обмениваться данными в режиме реального времени, что делает его идеальным для приложений, требующих быстрых и непрерывных обновлений, таких как чаты, онлайн-игры и системы мониторинга.

Пример использования:

let socket = new WebSocket("ws://example.com/socket");

// Открытие соединения
socket.onopen = function(event) {
  console.log("Connection established");
  socket.send("Hello Server!");
};

// Получение сообщений
socket.onmessage = function(event) {
  console.log("Message from server", event.data);
};

// Обработка ошибок
socket.onerror = function(event) {
  console.error("WebSocket error observed:", event);
};

// Закрытие соединения
socket.onclose = function(event) {
  if (event.wasClean) {
    console.log(`Connection closed cleanly, code=${event.code}, reason=${event.reason}`);
  } else {
    console.error("Connection died");
  }
};

👩‍💻 IFrame в HTML: Встраивание контента легко и просто

📌 <iframe> (инлайн фрейм) — это HTML-элемент, который позволяет встраивать один HTML-документ в другой. Это удобный способ отображения внешнего контента, например, веб-страниц, карт, видео и многого другого, непосредственно на вашем сайте.

💎 Преимущества использования <iframe>
🟣Встраивание внешнего контента
🟣Изоляция контента
🟣Легкость обновления

💎 Примеры использования:
Видео:

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>

Веб-страницы:

<iframe src="https://www.wikipedia.org" width="800" height="600"></iframe>

👩‍💻 Стрелочные функции в JavaScript: Современный подход к написанию кода

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

💎 Синтаксис:

// Традиционная функция
function add(a, b) {
  return a + b;
}

// Стрелочная функция
const add = (a, b) => a + b;

💎 Основные особенности:
🟡Краткость: Стрелочные функции часто короче и понятнее, чем традиционные функции.
🟡Отсутствие this: В стрелочных функциях this не привязывается к контексту вызова, а берется из внешней области.

✏️ Стрелочные функции — мощный инструмент, который делает код более читаемым и удобным. Они особенно полезны при работе с методами массивов и callback-функциями, благодаря своей краткости и особенностям работы с this.

📱 Оператор switch в C#: Эффективное управление потоками выполнения

💎 Оператор switch в C# позволяет выбрать один из множества возможных вариантов исполнения кода на основе значения выражения. Это удобный способ замены множества вложенных операторов if-else, что делает код более читаемым и легким для поддержки.

int number = 2;

switch (number)
{
    case 1:
        Console.WriteLine("One");
        break;
    case 2:
        Console.WriteLine("Two");
        break;
    case 3:
        Console.WriteLine("Three");
        break;
    default:
        Console.WriteLine("Other number");
        break;
}

📌 Преимущества использования switch:
🟡 Читаемость
🟡 Управление множеством условий
🟡 Производительность

📱 Оператор switch в C#: Продвинутые возможности

🥰 Группировка случаев:

int number = 1;

switch (number)
{
    case 1:
    case 2:
    case 3:
        Console.WriteLine("Number is between 1 and 3");
        break;
    default:
        Console.WriteLine("Other number");
        break;
}

🥰 Паттерн сопоставление (C# 7.0 и выше):

object obj = "Hello";

switch (obj)
{
    case int i:
        Console.WriteLine($"Integer: {i}");
        break;
    case string s:
        Console.WriteLine($"String: {s}");
        break;
    default:
        Console.WriteLine("Other type");
        break;
}

👩‍💻 Docker Hub

☹️ 30.05.24 стало известно, что сервис Docker Hub закрыл доступ для пользователей из России, оставив на сайте сообщение: «На данный момент мы больше не сотрудничаем с российскими или белорусскими компаниями и отключили приобретение подписок в этих странах».

📱 Циклы в C#

😊 Циклы в языке программирования C# позволяют выполнять блок кода несколько раз. В C# существует несколько типов циклов: for, while, do-while и foreach.

1️⃣ Цикл for
Цикл for используется, когда известно количество итераций.
Пример:

for (int i = 0; i < 10; i++)
{
    Console.WriteLine(i);
}

2️⃣ Цикл while
Цикл while выполняется, пока условие истинно.
Пример:

int i = 0;
while (i < 10)
{
    Console.WriteLine(i);
    i++;
}

3️⃣ Цикл do-while
Цикл do-while похож на while, но сначала выполняет код, а затем проверяет условие.
Пример:

int i = 0;
do
{
    Console.WriteLine(i);
    i++;
} while (i < 10);

4️⃣ Цикл foreach
Цикл foreach используется для перебора элементов коллекции.
Пример:

int[] numbers = { 1, 2, 3, 4, 5 };
foreach (int number in numbers)
{
    Console.WriteLine(number);
}

👩‍💻 Правильная разметка страницы (Часть 1)

😊 Правильная разметка страницы в HTML помогает создавать структурированные и семантически правильные веб-страницы, что улучшает их доступность и SEO. Основные элементы разметки включают в себя header, footer, nav, main, article, section и другие.

👍 <header>
Элемент <header> используется для определения заголовочной части страницы или раздела. Он обычно содержит логотип, название сайта, навигационные ссылки и другие важные элементы.

<header>
    <h1>Название сайта</h1>
    <nav>
        <ul>
            <li><a href="#home">Главная</a></li>
            <li><a href="#about">О нас</a></li>
            <li><a href="#contact">Контакты</a></li>
        </ul>
    </nav>
</header>

👍 <footer>
Элемент <footer> используется для определения нижней части страницы или раздела. Он может содержать контактную информацию, авторские права, ссылки на политику конфиденциальности и т.д.

<footer>
    <p>&copy; 2024 Название компании. Все права защищены.</p>
    <nav>
        <ul>
            <li><a href="#privacy">Политика конфиденциальности</a></li>
            <li><a href="#terms">Условия использования</a></li>
        </ul>
    </nav>
</footer>

👩‍💻 jQuery

📌 jQuery — это быстрая, маленькая и богатая функциями JavaScript-библиотека. Она упрощает использование JavaScript на вашем веб-сайте, предоставляя удобные методы для работы с HTML-документами, обработки событий, анимации и AJAX.

🤓 Основные возможности jQuery:
🟡 Управление DOM: jQuery позволяет легко находить элементы на странице и манипулировать ими.
🟡 Обработка событий: jQuery упрощает добавление обработчиков событий к элементам.
🟡 Анимация: jQuery включает методы для создания простых анимаций.
🟡 AJAX: jQuery облегчает выполнение AJAX-запросов для взаимодействия с сервером без перезагрузки страницы.
🟡 Кроссбраузерная совместимость: jQuery решает многие проблемы, связанные с несовместимостью разных браузеров.

Пример использования:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#myButton').click(function() {
                $('#myElement').toggle();
            });
        });
    </script>
</head>
<body>
    <button id="myButton">Показать/Скрыть элемент</button>
    <div id="myElement" style="display:none;">Это скрытый элемент</div>
</body>
</html>

👩‍💻 Правильная разметка страницы (Часть 2)

🥰 <nav>
Элемент <nav> используется для создания навигационных блоков, содержащих ссылки на другие части сайта или страницы.

<nav>
    <ul>
        <li><a href="#home">Главная</a></li>
        <li><a href="#services">Услуги</a></li>
        <li><a href="#contact">Контакты</a></li>
    </ul>
</nav>

🥰 <main>
Элемент <main> используется для определения основного содержимого страницы. В этом элементе располагается основная информация, уникальная для данной страницы.

<main>
    <article>
        <h2>Заголовок статьи</h2>
        <p>Основное содержимое страницы.</p>
    </article>
</main>

👩‍💻 Обрезка текста с помощью CSS

🤓 Обрезка текста в CSS используется для того, чтобы управлять отображением длинных строк текста, которые не помещаются в выделенную область. Это полезно для создания аккуратных и читаемых интерфейсов.

Основные свойства для обрезки текста
💎 overflow: hidden:
Это свойство скрывает весь содержимый текст, который выходит за пределы элемента.

.text-container {
    width: 200px;
    overflow: hidden;
    background-color: #f4f4f4;
    border: 1px solid #ccc;
    padding: 10px;
}

💎 white-space: nowrap:
Это свойство предотвращает перенос текста на новую строку. Вся строка текста отображается на одной линии.

.text-container {
    white-space: nowrap;
}

💎 text-overflow: ellipsis:
Это свойство добавляет многоточие (...) в конце строки, если текст не помещается.

.text-container {
    text-overflow: ellipsis;
}

👩‍💻 Docker

😎 3 июня 2024 года администрация Docker Hub сняла блокировку по геоайпи для пользователей из России.

Заявление по этой ситуации от ресурса huecker.io:

Мы победили! Docker Hub снова доступен в России.

Поддержка huecker.io будет продолжаться до 14 июня 2024 года 15:00 UTC. После этого времени, мы начнём отключать сервисы обхода блокировки. Документация останется доступной в исторических целях.

Это был невероятный опыт, и мы благодарим всех, кто поддерживал нас в течение короткого срока работы проекта.

👩‍💻 Закрепление элементов с помощью CSS

⭐️ Закрепление элементов на странице позволяет фиксировать их позицию при прокрутке. Это часто используется для создания фиксированных заголовков, боковых панелей или всплывающих окон.

1️⃣ position: fixed:
Элемент с position: fixed закрепляется относительно окна браузера. Он остается на одном месте даже при прокрутке страницы.

.fixed-header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #333;
    color: white;
    padding: 10px;
    text-align: center;
}

Пример HTML:

<div class="fixed-header">
    Это закрепленный заголовок
</div>
<div style="height: 2000px;">
    Прокручиваемое содержимое страницы
</div>

2️⃣ position: sticky:
Элемент с position: sticky ведет себя как relative до тех пор, пока не достигнет заданного порога (например, top), после чего становится fixed. Это полезно для создания "липких" заголовков или навигационных панелей.

.sticky-header {
    position: -webkit-sticky; /* Для поддержки в Safari */
    position: sticky;
    top: 0;
    background-color: #333;
    color: white;
    padding: 10px;
    text-align: center;
}

Пример HTML:

<div class="sticky-header">
    Это липкий заголовок
</div>
<div style="height: 2000px;">
    Прокручиваемое содержимое страницы
</div>

👩‍💻 Правильная разметка страницы (Часть 3)

🔥 <section>
Элемент <section> используется для разделения содержимого на логические секции. Каждая секция обычно имеет свой заголовок.

<section>
    <h2>Раздел 1</h2>
    <p>Содержимое первого раздела.</p>
</section>

<section>
    <h2>Раздел 2</h2>
    <p>Содержимое второго раздела.</p>
</section>

🔥 <article>
Элемент <article> используется для самостоятельных частей содержимого, таких как статьи, блоги, новости и т.д.

<article>
    <h2>Заголовок статьи</h2>
    <p>Текст статьи.</p>
</article>

🤓 Использование семантических элементов HTML помогает создавать структурированные и понятные веб-страницы. Это улучшает опыт пользователя и упрощает работу поисковых систем.

👩‍💻 Наглядный пример разницы между space-between, space-around и space-evenly (justify-content) в CSS Flexbox

👩‍💻 Transition CSS

🤟 CSS Transition позволяет управлять скоростью, с которой изменяются CSS-свойства. Это свойство делает изменения плавными, создавая анимацию между старым и новым состоянием элемента.

Основные свойства Transition:
⭐️ transition-property: определяет, какие CSS-свойства будут анимироваться (например, color, background-color, width).
⭐️ transition-duration: задает продолжительность анимации (временные значения, например, 2s для двух секунд).
⭐️ transition-timing-function: определяет, как будут распределяться скорости изменения в течение анимации (например, ease, linear, ease-in, ease-out).
⭐️ transition-delay: задает задержку перед началом анимации (например, 1s для одной секунды задержки).

Пример:

.button {
  background-color: blue;
  transition: background-color 0.5s ease;
}

.button:hover {
  background-color: green;
}

Полезные советы:
🔥 Комбинируйте несколько свойств для создания более сложных анимаций.
🔥 Используйте задержку для синхронизации анимаций с другими элементами на странице.
🔥 Пробуйте разные функции времени для достижения наилучшего визуального эффекта.

📱 Math.min()

⭐️ Math.min() возвращает наименьшее значение из списка переданных чисел. Это особенно полезно, когда нужно найти минимальное значение в массиве или нескольких переменных.

Синтаксис:

Math.min(value1, value2, ..., valueN);

Пример:

let minValue = Math.min(10, 5, 8, 3, 6); // вернет 3
console.log(minValue); // 3

Пример с массивом:
Чтобы найти минимальное значение в массиве, используйте оператор разворота '...':

let numbers = [10, 5, 8, 3, 6];
let minValue = Math.min(...numbers);
console.log(minValue); // 3

👩‍💻 Flex 🆚 Grid

💎 Flexbox и Grid – мощные инструменты для создания современных макетов. Используйте Flexbox для одномерного выравнивания и Grid для создания сложных двумерных макетов. Овладение этими инструментами сделает ваш веб-дизайн более гибким и адаптивным!

😱 Flexbox (Flexible Box)
Flexbox предназначен для одномерного макета – работы с элементами в строке или столбце. Он идеален для создания выровненных по центру, распределенных или адаптивных макетов.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

😱 Grid (CSS Grid Layout)
CSS Grid предназначен для двумерного макета – работы с элементами в строках и столбцах одновременно. Grid идеально подходит для сложных макетов страниц с несколькими строками и столбцами.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

📱 Math.max()

⭐️ Math.max() возвращает наибольшее значение из списка переданных чисел. Это удобно для поиска максимального значения среди нескольких переменных или в массиве.

Синтаксис:

Math.max(value1, value2, ..., valueN);

Пример:

let maxValue = Math.max(10, 5, 8, 3, 6); // вернет 10
console.log(maxValue); // 10

Пример с массивом:
Для нахождения максимального значения в массиве используйте оператор разворота '...':

let numbers = [10, 5, 8, 3, 6];
let maxValue = Math.max(...numbers);
console.log(maxValue); // 10