📱 Пример использования Task.WhenEach в .NET 9

👀 В .NET 9 Preview 5 появилась новый API Task.WhenEach, который позволяет легко обрабатывать асинхронные задачи по мере их завершения.

Пример ниже выполняет несколько вызовов HttpClient и обрабатывает их результаты по мере завершения:

using System;
using System.Net.Http;
using System.Threading.Tasks;

class Program
{
    static async Task Main(string[] args)
    {
        HttpClient client = new HttpClient();
        Task<string>[] tasks = new Task<string>[]
        {
            client.GetStringAsync("https://example.com/1"),
            client.GetStringAsync("https://example.com/2"),
            client.GetStringAsync("https://example.com/3")
        };

        await Task.WhenEach(tasks, async task =>
        {
            string result = await task;
            Console.WriteLine(result);
        });
    }
}

📱 Типы комментариев в C#

💎 Одна линия

//This is a single line comment

💎 Несколько строк

/*This is a multiple line comment
We are in line 2
Last line of comment*/

💎 XML-комментарии

/// <summary>
/// Set error message for multilingual language.
/// </summary>

📱 Что такое зубчатый массив в C#?

👀 Зубчатый массив состоит из элементов, которые также являются массивами, но каждый из этих массивов может иметь разный размер. Благодаря такому составу мы можем называть зубчатый массив «массивом массивов».

👩‍💻 Красивая анимация при нажатии и наведении на кнопку при помощи CSS

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

📱 👩‍💻Красивая анимация при нажатии на кнопку при помощи Js и CSS

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

👩‍💻 DISTINCT - исключение дубликатов

🤨 Оператор SQL DISTINCT используется для указания на то, что следует работать только с уникальными значениями столбца.

Синтаксис:

SELECT DISTINCT column_name FROM table_name

📱 Коллекции

🤨 Представляет строго типизированный список объектов, доступных по индексу. Поддерживает методы для поиска по списку, выполнения сортировки и других операций со списками.

Примеры:

List<string> people = new List<string>();

Обращение к элементам списка:

var people = new List<string>() { "Tom", "Bob", "Sam" };
 
string firstPerson = people[0]; // получаем первый элемент
Console.WriteLine(firstPerson); // Tom
people[0] = "Mike";     // изменяем первый элемент
Console.WriteLine(people[0]); // Mike

Длина списка:

var people = new List<string>() { "Tom", "Bob", "Sam" };
Console.WriteLine(people.Count);    // 3

Добавление в список:

List<string> people = new List<string> () { "Tom" };
 
people.Add("Bob"); // добавление элемента
// people = { "Tom", "Bob" };
 
people.AddRange(new[] { "Sam", "Alice" });   // добавляем массив
// people = { "Tom", "Bob", "Sam", "Alice" };
// также можно было бы добавить другой список
// people.AddRange(new List<string>(){ "Sam", "Alice" });
 
people.Insert(0, "Eugene"); // вставляем на первое место
// people = { "Eugene", "Tom", "Bob", "Sam", "Alice" };
 
people.InsertRange(1, new string[] {"Mike", "Kate"}); // вставляем массив с индекса 1
// people = { "Eugene", "Mike", "Kate", "Tom", "Bob", "Sam", "Alice" };
 
// также можно было бы добавить другой список
// people.InsertRange(1, new List<string>(){ "Mike", "Kate" });

👩‍💻 HTML data-атрибуты

📌 Data-атрибуты в HTML позволяют хранить дополнительную информацию об HTML-элементах, не влияя на представление или поведение. Они прекрасно подходят для хранения данных, которые должны быть использованы JavaScript без необходимости использования нестандартных атрибутов, ID или классов.

Пример кода:

<div data-role="page" data-hidden="true" data-custom="12345">Пример элемента</div>

👩‍💻 CSS - clip-path

👀 Clip-path позволяет обрезать элементы в соответствии с заданной формой. Можно использовать предопределенные формы (как круг или эллипс) или создать пользовательскую форму с помощью полигона.

Пример:

clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

Пример интерактивного элемента:

<style>
  #demo-image { 
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  }
</style>
<img id="demo-image" src="path/to/image.jpg" alt="Demo Image">
<input type="range" min="0" max="100" value="50" oninput="updateClipPath(this.value)">
<script>
  function updateClipPath(value) {
    document.getElementById('demo-image').style.clipPath = `polygon(${value}% 0%, 100% 50%, ${value}% 100%, 0% 50%)`;
  }
</script>

📱 JavaScript и HTML data-атрибутов

👀 Data-атрибуты — это специальные атрибуты, которые начинаются с data- и позволяют хранить дополнительную информацию непосредственно в HTML тегах. JavaScript может легко доступаться и манипулировать этими данными.

Интерактивное демо:
‼️ Задача
Написать код JavaScript, который активирует кнопку, меняя её data-status с inactive на active.

<button data-status="inactive" data-user-id="12345">Activate User 12345</button>
<button data-status="inactive" data-user-id="12346">Activate User 12346</button>
<script>
  document.querySelectorAll('button').forEach(button => {
    button.addEventListener('click', function() {
      if (this.dataset.status === 'inactive') {
        this.dataset.status = 'active';
        this.textContent = 'Deactivate User ' + this.dataset.userId;
      } else {
        this.dataset.status = 'inactive';
        this.textContent = 'Activate User ' + this.dataset.userId;
      }
    });
  });
</script>

📱 try-catch C#

👀 Try-catch используется для обработки исключений, которые могут возникнуть в блоке кода. Блок try выполняет код, блок catch обрабатывает исключение, если оно возникает.

Пример кода:

try {
  int divisor = 0;
  int result = 10 / divisor;
} catch (DivideByZeroException ex) {
  Console.WriteLine("Error: " + ex.Message);
}

❗️ Использование try-catch в C# позволяет вам контролировать выполнение программы даже в случае ошибок.

👩‍💻 Условные конструкции в Sass

💎 Условные конструкции в Sass позволяют создавать адаптивные и динамичные стили, делая ваш CSS более гибким и мощным. С их помощью можно использовать условия (@if), циклы (@for, @each, @while) и операторы (==, !=, >, <, >=, <=).

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

$theme: dark;

body {
  @if $theme == dark {
    background-color: #333;
    color: #fff;
  } @else {
    background-color: #fff;
    color: #000;
  }
}

Преимущества:
💣 Гибкость: Условные конструкции позволяют адаптировать стили под различные условия и требования.
💣 Удобство: Упрощают создание адаптивных и динамичных стилей.
💣 Читаемость: Делают код более структурированным и понятным.

📱 Оператор объединения с null (Nullish Coalescing)

👀 Оператор объединения с null (??) — это мощный инструмент в JavaScript, который упрощает работу с переменными, значение которых может быть null или undefined.

❓ Зачем нужен?
Часто возникает необходимость задать значение по умолчанию, если переменная не задана (равна null или undefined). Раньше для этого использовали оператор ИЛИ (||), но он также срабатывал для ложных значений, таких как 0, false, NaN или пустая строка.

❓ Как работает?
Оператор ?? возвращает правый операнд, если левый операнд равен null или undefined. В противном случае он возвращает левый операнд.

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

let userInput = null;
let defaultInput = userInput ?? "Значение по умолчанию";
console.log(defaultInput); // "Значение по умолчанию"

userInput = "";
defaultInput = userInput ?? "Значение по умолчанию";
console.log(defaultInput); // ""

👩‍💻 Частичные файлы и директива @import в Sass

📌 Частичные файлы и директива @import в Sass позволяют структурировать CSS-код, делая его более организованным и легко управляемым. Это особенно полезно в больших проектах.

Например, создадим два частичных файла:
🥇 _reset.scss

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

🥈 _variables.scss

$primary-color: #3498db;
$font-stack: 'Helvetica, sans-serif';

Директива @import

Директива @import используется для включения частичных файлов в основной файл стилей. Это позволяет разбивать стили на логические части и легко их объединять.

styles.scss

@import 'reset';
@import 'variables';

body {
  font-family: $font-stack;
  color: $primary-color;
}

Пример структуры проекта:

// _reset.scss
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

// _variables.scss
$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-stack: 'Helvetica, sans-serif';

// _mixins.scss
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

// _base.scss
body {
  font-family: $font-stack;
  color: $primary-color;
}

h1 {
  color: $secondary-color;
}

// styles.scss
@import 'reset';
@import 'variables';
@import 'mixins';
@import 'base';

.container {
  @include border-radius(10px);
}

✔️ Использование частичных файлов и директивы @import в Sass помогает поддерживать код чистым, организованным и удобным для масштабирования. Эта практика особенно полезна для крупных проектов, где важно сохранять структуру и упрощать управление стилями.

📱 Деструктуризация объектов в JavaScript

👀 Деструктуризация — это удобная возможность JavaScript, которая позволяет извлекать значения из массивов или свойств объектов и присваивать их переменным. Это делает ваш код более чистым и понятным.

🔥 С помощью деструктуризации объектов можно извлекать свойства и присваивать их переменным с теми же именами.

const user = { name: 'Alice', age: 25, city: 'New York' };
const { name, age, city } = user;

console.log(name); // "Alice"
console.log(age);  // 25
console.log(city); // "New York"

Вы также можете задавать значения по умолчанию и переименовывать переменные.

const user = { name: 'Bob' };
const { name, age = 30, city: hometown = 'Unknown' } = user;

console.log(name);    // "Bob"
console.log(age);     // 30 (значение по умолчанию)
console.log(hometown);// "Unknown" (переименование и значение по умолчанию)

👩‍💻 Вложенность (Nesting) в Sass

☄️ Вложенность (Nesting) — это одна из самых полезных и мощных функций Sass, которая позволяет писать CSS в стиле вложенных правил. Это делает ваш код более читаемым и структурированным, особенно при работе с вложенными элементами и сложной иерархией.

Преимущества вложенности:
🔥 Читаемость: Вложенность отражает структуру HTML, что делает код более интуитивным и легким для понимания.
🔥 Сокращение кода: Уменьшает количество повторяющихся селекторов и делает стили более компактными.
🔥 Удобство: Позволяет легко управлять стилями для вложенных элементов и модификаторов.

Пример использования:
❌ CSS без вложенности:

nav {
  background: #333;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  display: inline-block;
}

nav ul li a {
  color: white;
  text-decoration: none;
  padding: 10px;
  display: block;
}

✔️ Sass с вложенностью

nav {
  background: #333;

  ul {
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      display: inline-block;

      a {
        color: white;
        text-decoration: none;
        padding: 10px;
        display: block;
      }
    }
  }
}

📌 Вложенные псевдоклассы и псевдоэлементы:

button {
  background: #3498db;
  color: white;

  &:hover {
    background: #2980b9;
  }

  &::after {
    content: '→';
    padding-left: 5px;
  }
}

📱 Шаблонные строки (Template Strings) в JavaScript

📌 Шаблонные строки — это мощная и удобная функция JavaScript, которая упрощает работу с текстом и переменными. С их помощью можно создавать строки, включающие переменные и выражения, с минимальным количеством кода.

😮 Особенности:
Шаблонные строки оборачиваются в обратные кавычки (`), а не в обычные одинарные (') или двойные (") кавычки. Они позволяют:
✔️ Интерполяцию переменных: Легко вставлять переменные и выражения в строки.
✔️ Многострочные строки: Создавать строки, состоящие из нескольких строк, без необходимости использования символов новой строки (\n).
✔️ Встраивание выражений: Выполнять любые выражения внутри строки.

Примеры:
🟢 Интерполяция переменных

const name = 'Alice';
const greeting = `Hello, ${name}!`;
console.log(greeting); // "Hello, Alice!"

🟢 Встраивание выражений

const a = 5;
const b = 10;
const result = `The sum of ${a} and ${b} is ${a + b}.`;
console.log(result); // "The sum of 5 and 10 is 15."

👩‍💻 React

👏 React – это библиотека JavaScript, созданная Facebook в 2013 году для упрощения разработки пользовательских интерфейсов. Основная идея – компонентный подход: каждая часть интерфейса представляется как независимый компонент, который можно переиспользовать.

Почему React так популярен?
⭐️ Компонентность: Разделяй и властвуй! React позволяет разбивать приложение на небольшие, легко управляемые компоненты.
⭐️ Виртуальный DOM: Обновления происходят быстро и безболезненно. React использует виртуальный DOM для минимизации изменений в реальном DOM.
⭐️ Однонаправленный поток данных: Это делает логику приложения предсказуемой и простой для отладки.

Основные концепции
⭐️ JSX: Синтаксический сахар, позволяющий писать HTML-подобный код прямо в JavaScript.
⭐️ Компоненты: Можно создавать функциональные и классовые компоненты, каждый из которых отвечает за свой кусочек интерфейса.
⭐️ Props и State: Props – это параметры, передаваемые компонентам, а State – это внутреннее состояние компонента.

👩‍💻 HTML тег <div>

🥰 Тег <div> (от слова "division" – деление) – это один из самых используемых тегов в HTML. Он служит контейнером для группировки элементов и создания структуры страницы.

Основные применения:
💕 Группировка элементов: Хотите объединить несколько элементов в один блок? <div> – ваш лучший друг.
💕 Макет и стилизация: С помощью CSS вы можете стилизовать <div> как угодно – изменять размеры, фон, границы и многое другое.
💕 Создание сложных макетов: Flexbox и Grid в связке с <div> позволяют создавать адаптивные и сложные макеты без особых усилий.

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

<div class="header">
  <h1>Добро пожаловать на мой сайт</h1>
</div>

<div class="content">
  <p>Здесь вы найдете много интересного.</p>
  <div class="gallery">
    <img src="image1.jpg" alt="Изображение 1">
    <img src="image2.jpg" alt="Изображение 2">
  </div>
</div>

👩‍💻 Важность соблюдения тегов в HTML (Часть 1)

Почему важны правильные теги?
💎 Представьте себе строительство дома. Если использовать неправильные материалы и не соблюдать строительные нормы, дом может рухнуть. Веб-разработка работает по тому же принципу: HTML-теги – это строительные блоки вашего сайта. Их правильное использование критически важно для создания надежного, доступного и оптимизированного веб-сайта.

Ключевые причины соблюдать теги
✔️ Семантика и структура
Семантические теги (например, <header>, <article>, <footer>) не только улучшают структуру вашего кода, но и делают его понятным для поисковых систем и вспомогательных технологий, таких как экранные читалки. Это улучшает SEO и доступность.

✔️ Поддержка и масштабируемость
Когда код структурирован правильно, его легче читать, понимать и поддерживать. Это особенно важно в командной работе. Правильное использование тегов помогает избежать путаницы и ошибок в будущем.

✔️ Кросс-браузерная совместимость
Корректное использование HTML-тегов гарантирует, что ваш сайт будет отображаться правильно во всех браузерах. Неправильные теги или их отсутствие могут привести к некорректному отображению элементов на разных устройствах.

✅ Легкость стилизации
CSS и JavaScript легче применять к хорошо структурированному HTML. Семантические теги делают ваши стили и скрипты более конкретными и мощными, что облегчает работу с дизайном и функционалом.