👩‍💻 Использование агрегатных функций в SQL
Сегодня мы поговорим о функциях COUNT, SUM, AVG, MIN, и MAX.

❤️‍🔥 Функция COUNT()
Функция COUNT() используется для подсчета количества строк в столбце или в таблице. Очень полезно, когда нужно узнать, сколько записей соответствует определенному критерию.

SELECT COUNT(*) FROM employees;

❤️‍🔥 Функция SUM()
Функция SUM() суммирует числовые значения в столбце. Это идеальный инструмент для получения общих сумм, например, общей зарплаты сотрудников.

SELECT SUM(salary) FROM employees;

❤️‍🔥 Функция AVG()
Функция AVG() вычисляет среднее значение по набору числовых данных. Она особенно полезна для анализа общих тенденций.

SELECT AVG(salary) FROM employees;

❤️‍🔥 Функции MIN() и MAX()
Функции MIN() и MAX() используются для нахождения минимального и максимального значения в столбце соответственно.

SELECT MIN(salary), MAX(salary) FROM employees;

📌 Используя эти функции, вы можете извлечь значительную ценность из ваших данных, позволяя принимать обоснованные решения на основе вашего анализа.

👩‍💻 Наглядная шпаргалка по Box-shadow в CSS

👩‍💻 Sass/SCSS
Sass/SCSS - это мощный препроцессор CSS, который помогает вам управлять стилями вашего веб-проекта более эффективно и организованно!

💎 SASS — это препроцессор CSS, который добавляет множество удобных функций для более эффективного и удобного написания стилей.
💎 SCSS (Sassy CSS) — это синтаксис SASS, который полностью совместим с CSS, но добавляет новые возможности.

🔥 Основные возможности SCSS:
🔥 Переменные:
Вы можете определять переменные для хранения значений, которые вы часто используете, например, цвета или размеры шрифтов.

$primary-color: #333;
$font-size: 16px;

body {
  color: $primary-color;
  font-size: $font-size;
}

🔥 Вложенность:
SCSS позволяет использовать вложенные правила, что делает ваш CSS более организованным и легче читаемым.

.navbar {
  background-color: $primary-color;
  li {
    display: inline-block;
    a {
      text-decoration: none;
      color: white;
    }
  }
}

🔥 Миксины:
Миксины позволяют создавать переиспользуемые блоки стилей, которые можно включать в другие селекторы.

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.header {
  @include flex-center;
}

➡️ Ссылка на документацию

👩‍💻 Небольшая шпаргалка по CSS Flexbox

👩‍💻 Docker
Docker — это платформа для разработки, доставки и запуска приложений в контейнерах. Контейнеры изолируют программное обеспечение от его окружения и обеспечивают консистентность независимо от того, где именно оно запускается.

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

➡️Ссылка на Docker

👩‍💻 Простой способ упрощения CSS селекторов с использованием :where()

🤓 Селектор :where() позволяет объединять несколько селекторов внутри одной функции.

Без использования:

.special-section h1,
.special-section h2,
.special-section h3,
.special-section h4,
.special-section h5,
.special-section h6 {
    color: red;
}

Пример с использованием :where()

.special-section :where(h1, h2, h3, h4, h5, h6) {
    color: red;
}

👩‍💻 Ленивая загрузка изображения (lazy loading)

🤓 Ленивая загрузка — это техника, при которой содержимое (например, изображения) загружается по мере необходимости, а не сразу при загрузке страницы. Это снижает начальное время загрузки и экономит трафик, так как изображения загружаются только тогда, когда пользователь прокручивает страницу до них.

<img src="path/to/image.jpg" loading="lazy" alt="Описание изображения">

loading="lazy" — указывает браузеру на необходимость ленивой загрузки.

🔖 Категории разработчиков по уровню квалификации:

💎 Junior Developer (Джуниор)
📌 Опыт: Менее 2 лет.
📌 Особенности: Джуниоры часто нуждаются в наставничестве и руководстве.

💎 Middle Developer (Миддл)
📌 Опыт: 2-5 лет.
📌 Особенности: Миддлы уже уверенно владеют необходимыми технологиями и начинают принимать самостоятельные решения. Они меньше зависят от наставников.

💎 Senior Developer (Синьор)
📌 Опыт: Более 5 лет.
📌 Особенности: Синьоры обладают глубокими знаниями в определенных областях. Они способны руководить проектами, менторить младших коллег и вносить стратегический вклад в развитие продукта.

👩‍💻 Функции min() и max() в CSS

✔️ min() возвращает наименьшее из переданных значений. Используется для ограничения размера элемента сверху.

.container {
  width: min(90vw, 600px);
  margin: auto;
}

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

.section {
  min-height: max(500px, 50vh);
}

👩‍💻 React

🤓 React — это декларативная, эффективная и гибкая JavaScript библиотека для создания пользовательских интерфейсов. Разработана Facebook для управления динамическими данными в больших веб-приложениях.

Основные особенности React:
☝️ Компонентный подход: Приложение разбивается на множество изолированных компонентов, что упрощает разработку и тестирование.
☝️ Виртуальный DOM: Обеспечивает высокую производительность за счёт эффективных обновлений DOM.
☝️ Однонаправленный поток данных: Улучшает понимание и отладку кода благодаря строгой организации передачи данных.

React используется для создания как простых, так и сложных интерфейсов в проектах всех масштабов.

➡️ Ссылка на React

👩‍💻 «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"]