👩‍💻 Вложенность (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. Семантические теги делают ваши стили и скрипты более конкретными и мощными, что облегчает работу с дизайном и функционалом.

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

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

✔️ Правильный пример:

<header>
  <h1>Добро пожаловать на мой сайт</h1>
</header>
<main>
  <article>
    <h2>Первая статья</h2>
    <p>Содержимое статьи.</p>
  </article>
  <article>
    <h2>Вторая статья</h2>
    <p>Содержимое статьи.</p>
  </article>
</main>
<footer>
  <p>&copy; 2024 Мой сайт</p>
</footer>

❌ Неправильный пример:

<div>
  <h1>Добро пожаловать на мой сайт</h1>
</div>
<div>
  <h2>Первая статья</h2>
  <p>Содержимое статьи.</p>
</div>
<div>
  <h2>Вторая статья</h2>
  <p>Содержимое статьи.</p>
</div>
<div>
  <p>&copy; 2024 Мой сайт</p>
</div>

‼️ Соблюдение тегов в HTML – это не просто рекомендация, а необходимость для создания качественных веб-приложений. Это улучшает доступность, поддерживаемость и кросс-браузерную совместимость вашего сайта. Так что помните: правильные теги – это основа успешного веб-дома!

👩‍💻 CSS свойство box-shadow

📱 Ключевое слово namespace

📌 Ключевое слово namespace используется для объявления области действия, которая содержит набор связанных объектов. Пространство имен можно использовать для организации элементов кода и для создания глобально уникальных типов.

📱 Большая шпаргалка по TypeScript

📱 Шпаргалка по C#

📱 Break 🆚 Continue

👍 break: используется в циклах (for и т. д.) и операторах переключения, завершает итерацию/переключение и пропускает весь оставшийся код в цикле или блоке переключения.
👍continue: используется только в циклах, пропускает весь оставшийся код в цикле и начинает следующую итерацию с начала цикла.

👩‍💻 Маскирование в CSS c помощью свойства mask

🔥 Данное css свойство устанавливает изображение, которое используется как слой маски для элемента.

📱 Как маппить массивы в EF Core 8

👀 Для большинства баз данных, которые не поддерживают массивы нативно, EF Core 8 автоматически использует JSON массивы.

📌 Это прозрачно для разработчика приложений, использующего EF Core 8: вы просто пишете свой LINQ-запрос, и EF Core 8 использует наиболее подходящий перевод для базы данных, которую вы используете.

➡️ Подробнее в гайде

📱 Что такое закрытый класс?

👀 Мы используем ключевое слово «sealed» для создания закрытого класса. Классы создаются как закрытый класс, когда нет необходимости наследовать это дальше или когда есть необходимость ограничить наследование этого класса.

📱 Краткий совет по C#

👀 Существует простой способ инициализации словаря!

❌ В предыдущих версиях C# для инициализации словаря, мы применяли старый подход.

✔️ Однако в C# 12 используется более лаконичный синтаксис инициализации. Вместо использования нового оператора вы можете использовать только скобки [].

👩‍💻 С помощью CSS свойства mix-blend-mode можно смешать цвет элемента с расположенными ниже элементами или родительским фоном, получая интересные эффекты.

📱 «Дроны и .NET» — доклад Романа Булдыгина на встрече SpbDotNet №98

⭐️ Доклад Романа — своего рода ликбез в сфере FPV квадрокоптеров и рассказ о своём хобби от мальчика 35 лет. Вы узнаете, какое применение находит .NET в области, где балом правят C и C++.

➡️Смотреть

👩‍💻 SCSS mixin

🔥 SCSS mixin позволяет группировать CSS объявления, которые можно использовать повторно в разных местах вашего кода. Это помогает избежать дублирования и делает код более чистым и структурированным.

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

// Определяем миксин
@mixin box-shadow($x, $y, $blur, $color) {
  -webkit-box-shadow: $x $y $blur $color;
  -moz-box-shadow: $x $y $blur $color;
  box-shadow: $x $y $blur $color;
}

// Используем миксин
.button {
  @include box-shadow(0px, 4px, 5px, rgba(0, 0, 0, 0.3));
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

🔝 Преимущества использования SCSS mixin:
✔️ Переиспользуемость: Миксины позволяют многократно использовать одни и те же стили в разных местах кода.
✔️ Удобство изменений: Внесение изменений в стили можно сделать в одном месте, а не по всему проекту.
✔️ Читабельность: Код становится более читаемым и понятным.

👩‍💻 CSS Фильтры (Часть 1)

📈 CSS фильтры позволяют добавлять разнообразные визуальные эффекты к элементам на веб-странице, такие как размытие, изменение яркости, контраста и другие. Эти эффекты могут значительно улучшить визуальное восприятие и интерактивность вашего сайта.

Основные CSS Фильтры:
✔️ blur() – Размытие элемента

.image {
  filter: blur(5px);
}

✔️ brightness() – Изменение яркости элемента

.image {
  filter: brightness(150%);
}

✔️ contrast() – Изменение контраста

.image {
  filter: contrast(200%);
}

👩‍💻 CSS Фильтры (Часть 2)

Основные CSS Фильтры:
✔️ sepia() – Преобразование в сепию

.image {
  filter: sepia(100%);
}

✔️ invert() – Инверсия цветов

.image {
  filter: invert(100%);
}

✔️ opacity() – Прозрачность

.image {
  filter: opacity(50%);
}

Комбинирование фильтров:

.image {
  filter: grayscale(100%) blur(2px) contrast(150%);
}