👩‍💻 «REST API клиенты для C#» — доклад Артёма Квашнина про типичные ошибки при работе со стандартным HttpClient и многое другое.

Артем разбирает реализацию межсервисного взаимодействия от Microsoft и самое главное — рассматривает плюсы и минусы популярных генераторов для API клиентов.

➡️ Ссылка на доклад

👩‍💻 Автокомплит в HTML

🤓 Автокомплит — это атрибут в HTML, который можно использовать в элементах формы, таких как <input>, <form>, или <textarea>. Он помогает браузерам предсказывать, заполнять или дополнять информацию, основываясь на ранее введенных данных.

▶️ Пример включения автокомплита для всей формы:

<form action="/submit-form" method="POST" autocomplete="on">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">Submit</button>
</form>

▶️ Отключение автокомплита для конкретного поля:

<input type="text" name="username" autocomplete="off">

▶️ Спецификация для полей:

<input type="text" name="email" autocomplete="email">
<input type="tel" name="phone" autocomplete="tel">

⚔️ HTTP 🆚 HTTPS

🔥 HTTP (HyperText Transfer Protocol)
🔥 Назначение: Используется для передачи данных между браузером и сервером.
🔥 Безопасность: Данные передаются в незашифрованном виде. Это значит, что любой, кто перехватит соединение, может увидеть передаваемую информацию.
🔥 Применение: Подходит для сайтов, где безопасность не является приоритетом (например, информационные страницы).

🔥 HTTPS (HyperText Transfer Protocol Secure)
🔥 Назначение: Также используется для передачи данных между браузером и сервером.
🔥 Безопасность: Данные передаются в зашифрованном виде с помощью SSL/TLS протоколов. Это значит, что даже если соединение будет перехвачено, данные останутся защищенными.
🔥 Применение: Обязательно для сайтов, где передаются чувствительные данные (например, интернет-магазины, онлайн-банкинг).

🔥 Основные различия:
📌 Шифрование данных: HTTPS шифрует данные, тогда как HTTP — нет.
📌 SSL/TLS сертификат: Для работы HTTPS требуется SSL/TLS сертификат, который подтверждает подлинность сайта.
📌 SEO и доверие: Сайты с HTTPS получают более высокий рейтинг в поисковых системах и вызывают больше доверия у пользователей.

👩‍💻 HTTP Статусы

🤓 HTTP статусы — это коды, которые сервер отправляет в ответ на запрос клиента. Они помогают определить, что произошло с запросом.

Категории HTTP статусов:
🪄 Информационные (100-199)
🪄 Успешные (200-299)
🪄 Перенаправления (300-399)
🪄 Ошибки клиента (400-499)
🪄 Ошибки сервера (500-599)

Основные HTTP статусы:
💎 200 OK: Запрос выполнен успешно, и сервер вернул запрашиваемые данные.
💎 201 Created: Запрос выполнен успешно, и на сервере создан новый ресурс.
💎 204 No Content: Запрос выполнен успешно, но сервер не возвращает никаких данных.
💎 301 Moved Permanently: Ресурс перемещен на новый постоянный URL.
💎 302 Found: Ресурс временно доступен по другому URL.
💎 304 Not Modified: Ресурс не изменен с последнего запроса.
💎 400 Bad Request: Некорректный запрос из-за синтаксической ошибки.
💎 401 Unauthorized: Требуется аутентификация для доступа к ресурсу.
💎 403 Forbidden: Доступ к ресурсу запрещен.
💎 404 Not Found: Ресурс не найден.
💎 405 Method Not Allowed: Метод запроса не поддерживается для данного ресурса.
💎 500 Internal Server Error: Общая ошибка сервера.
💎 501 Not Implemented: Сервер не поддерживает функциональность, необходимую для выполнения запроса.
💎 503 Service Unavailable: Сервер временно недоступен из-за перегрузки или обслуживания.

👩‍💻 Тег <audio> в HTML: Включаем Звук в Веб

😳 Тег <audio> в HTML предоставляет простой способ встраивания аудиоконтента на веб-страницы.

😍 Ключевые Атрибуты:
controls: Показывает встроенные элементы управления (плей, пауза, регулировка громкости).
autoplay: Автоматически запускает воспроизведение при загрузке страницы.
loop: Воспроизводит аудио в цикле.
muted: Начинает воспроизведение без звука.

<audio controls>
  <source src="example.ogg" type="audio/ogg">
  <source src="example.mp3" type="audio/mpeg">
  Ваш браузер не поддерживает элемент audio.
</audio>

👩‍💻 Модификаторы Доступа в C#: Контроль над Видимостью

😳 Модификаторы доступа в C# — это ключевые слова, которые определяют уровень видимости и доступа к типам и членам классов. Правильное использование модификаторов помогает защитить данные и организовать код.

Основные модификаторы:
⭐️ public: полный доступ. Члены доступны из любого места в коде.

public class MyClass
{
    public int myPublicField;
}

⭐️ private: oграниченный доступ. Члены доступны только внутри того же класса.

class MyClass
{
    private int myPrivateField;
}

⭐️ protected: доступ ограничен текущим классом и наследниками.

class MyBaseClass
{
    protected int myProtectedField;
}

class MyDerivedClass : MyBaseClass
{
    void MyMethod()
    {
        myProtectedField = 10;
    }
}

⭐️ internal: доступен в пределах текущей сборки (assembly).

internal class MyClass
{
    internal int myInternalField;
}

👩‍💻 Media Queries в HTML: Адаптивный Дизайн в Действии

😳 Media Queries — мощный инструмент в HTML и CSS, который позволяет создавать адаптивные веб-страницы, изменяющиеся в зависимости от устройства пользователя.

Преимущества Media Queries
🤟 Адаптивность: Позволяют создавать сайты, которые отлично смотрятся на любых устройствах — от телефонов до больших мониторов.
🤟 Гибкость: Легко изменять стили в зависимости от характеристик устройства.
🤟 Улучшенный UX: Обеспечивают лучший пользовательский опыт, адаптируя контент под размеры экрана.

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

@media (min-width: 768px) {
  .container {
    display: flex;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 24px;
  }
}

@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
}

👩‍💻 Анимированный скролл с эффектом подсветки на CSS

➡️ Ссылка на код

👩‍💻 Красивое оформление цитат на CSS

➡️ Ссылка на код

👩‍💻 Метод split в JavaScript: Мастер Разделения Строк

😳 Метод split в JavaScript — это мощный инструмент для работы со строками. Он позволяет легко разбивать строки на массивы подстрок, используя определенный разделитель.

🔜 Метод split разбивает строку на массив подстрок на основе заданного разделителя. Вот базовый синтаксис:

let string = "Hello, world!";
let result = string.split(", ");
console.log(result); // ["Hello", "world!"]

Преимущества:
✔️ Гибкость: Можно использовать любой символ или регулярное выражение в качестве разделителя.
✔️ Удобство: Легко преобразовать строки в массивы для дальнейшей обработки.
✔️ Широкое применение: Подходит для различных задач, от парсинга CSV до обработки пользовательского ввода.

Примеры использования:
🟡 Разделение по пробелу:

let text = "JavaScript is awesome";
let words = text.split(" ");
console.log(words); // ["JavaScript", "is", "awesome"]

🟡 Разделение по символу:

let date = "2024-05-19";
let parts = date.split("-");
console.log(parts); // ["2024", "05", "19"]

🟡 Использование регулярного выражения:

let data = "one, two; three|four";
let items = data.split(/[,;|]/);
console.log(items); // ["one", "two", "three", "four"]

👩‍💻👩‍💻 HEX, RGB и RGBA: Цвета в Веб-дизайне

😳 Цвета играют ключевую роль в веб-дизайне, и существует несколько способов их определения в CSS. Наиболее популярные из них — это HEX, RGB и RGBA.

1️⃣ HEX
Цвета в формате HEX представляют собой шестнадцатеричные числа. Они начинаются с символа # и состоят из шести цифр, каждая пара которых определяет интенсивность красного, зеленого и синего цвета соответственно.

color: #ff5733; /* Ярко-оранжевый */

2️⃣ RGB
Формат RGB использует десятичные значения для определения интенсивности каждого цвета (красного, зеленого и синего). Значения варьируются от 0 до 255.

color: rgb(255, 87, 51); /* Ярко-оранжевый */

3️⃣ RGBA
RGBA расширяет RGB, добавляя альфа-канал для управления прозрачностью. Альфа-канал принимает значения от 0 (полностью прозрачно) до 1 (полностью непрозрачно).

color: rgba(255, 87, 51, 0.5); /* Полупрозрачный ярко-оранжевый */

📌Когда использовать что?
🟣HEX: Легко читаем и широко используется для фиксированных цветов.
🟣RGB: Удобен для динамической генерации цветов в JavaScript.
🟣RGBA: Идеален для создания полупрозрачных эффектов и наложений.

👩‍💻 Тег <video> в HTML: Визуальная Магия на Веб-страницах

😳 Тег <video> в HTML позволяет встраивать видеофайлы прямо на веб-страницы, делая их более интерактивными и привлекательными.

😍 Ключевые Атрибуты
controls: Показывает встроенные элементы управления (плей, пауза, регулировка громкости, ползунок прогресса).
autoplay: Автоматически запускает воспроизведение при загрузке страницы.
loop: Воспроизводит видео в цикле.
muted: Начинает воспроизведение без звука.
poster: Устанавливает изображение, отображаемое до начала воспроизведения.

<video width="640" height="360" controls poster="poster.jpg">
  <source src="example.mp4" type="video/mp4">
  <source src="example.webm" type="video/webm">
  Ваш браузер не поддерживает элемент video.
</video>

👩‍💻 Можно ли хранить смешанные типы данных, такие как int, string, float, char, в одном массиве?

⚡️ Да, это возможно, поскольку массив может иметь тип объекта, который может хранить не только любой тип данных, но и объект класса.

object[] mixedArray = new object[] { 42, "Hello", 3.14, 'A' };
        
foreach (var item in mixedArray)
{
  Console.WriteLine($"{item} (Type: {item.GetType()})");
}

☀️ Это особенно полезно в случаях, когда вам нужно собрать в одном месте разнотипные данные, например, для обработки данных из различных источников или для создания более гибкой структуры данных. В языках программирования, таких как C#, такие массивы могут быть полезны для написания более универсального и адаптивного кода.

👩‍💻 Переменные в CSS

😳 Переменные в CSS, также известные как пользовательские свойства (custom properties), позволяют хранить значения, которые можно повторно использовать в разных местах вашего CSS-кода. Это делает ваш код более чистым, организованным и легко поддерживаемым.

🔜 Объявление переменных:

:root {
    --main-bg-color: #3498db;
    --main-text-color: #2c3e50;
    --main-padding: 10px;
}

🔜 Использование переменных:

body {
    background-color: var(--main-bg-color);
    color: var(--main-text-color);
    padding: var(--main-padding);
}

Преимущества переменных:
1️⃣ Повторное использование: Определив переменную один раз, вы можете использовать ее значение в разных местах вашего CSS.
2️⃣ Удобство изменений: Изменение значения переменной автоматически обновляет все места, где она используется.
3️⃣ Организация кода: Переменные делают ваш CSS более структурированным и легким для понимания.

👩‍💻 Типы null и undefined в JavaScript

👀 В JavaScript существуют два особых типа данных: null и undefined. Эти типы используются для обозначения отсутствия значения или неопределенного состояния переменной.

❗️undefined
Значение undefined указывает на то, что переменной не было присвоено значение.

let x;
console.log(x); // Выведет: undefined

❗️ null
Значение null указывает на намеренное отсутствие значения.

let y = null;
console.log(y); // Выведет: null

👩‍💻 Дублирование записей в PostgreSQL

👀 В PostgreSQL часто возникает необходимость найти дублирующиеся записи в таблице. В зависимости от того, по каким полям вы хотите искать дубликаты, запросы могут различаться. Рассмотрим два сценария: поиск дубликатов по одному полю и по нескольким полям.

Поиск дубликатов по одному полю:

SELECT email, COUNT(*)
FROM users
GROUP BY email
HAVING COUNT(email) > 1;

Поиск дубликатов по нескольким полям:

SELECT name, email, COUNT(*)
FROM users
GROUP BY name, email
HAVING COUNT(*) > 1;

👩‍💻 Структура HTML страницы

👩‍💻 Анимации в CSS: Живые Веб-Страницы

👀 Анимации в CSS позволяют оживить веб-страницы, добавляя плавные переходы и динамичные эффекты.

📌 Вот пример использования CSS-анимаций с помощью @keyframes и transition:

 <div class="box"></div>

.box {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    animation: moveAndRotate 4s infinite;
    transition: background-color 0.5s;
}

.box:hover {
    background-color: #e74c3c;
}

@keyframes moveAndRotate {
    0% {
        transform: translateX(0) rotate(0deg);
    }
    50% {
        transform: translateX(200px) rotate(180deg);
    }
    100% {
        transform: translateX(0) rotate(360deg);
    }
}

👩‍💻 Массивы в 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");
  }
};