Пример использования 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;
}
Please open Telegram to view this post
VIEW IN TELEGRAM
Основные CSS Фильтры:
blur() – Размытие элемента.image {
filter: blur(5px);
}brightness() – Изменение яркости элемента.image {
filter: brightness(150%);
}contrast() – Изменение контраста.image {
filter: contrast(200%);
}Please open Telegram to view this post
VIEW IN TELEGRAM
Основные CSS Фильтры:
sepia() – Преобразование в сепию.image {
filter: sepia(100%);
}invert() – Инверсия цветов.image {
filter: invert(100%);
}opacity() – Прозрачность.image {
filter: opacity(50%);
}Комбинирование фильтров:
.image {
filter: grayscale(100%) blur(2px) contrast(150%);
}Please open Telegram to view this post
VIEW IN TELEGRAM
<meta>charset - Задает кодировку документа.content - Устанавливает значение атрибута, заданного с помощью name или http-equiv.http-equiv - Предназначен для конвертирования метатега в заголовок HTTP.name - Имя метатега, также косвенно устанавливает его предназначение.Please open Telegram to view this post
VIEW IN TELEGRAM
const video = document.querySelector('video');
video.play(); // Запуск воспроизведения
video.pause(); // Пауза воспроизведенияvideo.volume = 0.5; // Установка громкости на 50%
video.currentTime = 60; // Перемотка на 60-ю секунду видео
Вы можете отслеживать различные события, такие как начало воспроизведения, пауза, завершение и другие.
video.addEventListener('ended', () => {
alert('Видео завершено!');
});const track = video.addTextTrack('subtitles', 'English', 'en');
track.mode = 'showing';
track.addCue(new VTTCue(0, 10, 'Hello, world!'));@codeWeaveChannel | #JavaScript
Please open Telegram to view this post
VIEW IN TELEGRAM
display: none: Убирает элемент из документа, он не занимает места на странице и не отображается.display: block: Элемент становится блочным, занимает всю ширину контейнера и переносится на новую строку.display: inline: Элемент становится строчным, занимает только необходимую ширину и находится в одной строке с другими строчными элементами.display: inline-block: Комбинация блочного и строчного элементов: ведет себя как строчный, но позволяет задавать размеры (ширину и высоту).@codeWeaveChannel | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
display: flex: Включает гибкую раскладку (Flexbox), что позволяет легко выравнивать и распределять пространство между элементами в контейнере.display: grid: Включает сеточную раскладку (CSS Grid), что дает возможность создавать сложные макеты с использованием рядов и столбцов.display: table: Элемент ведет себя как таблица, что полезно для макетов, требующих табличной структуры.<div class="block">Я блочный элемент</div>
<span class="inline">Я строчный элемент</span>
<div class="inline-block">Я строчно-блочный элемент</div>
<div class="flex-container">
<div>Я часть flex-контейнера</div>
</div>
<div class="grid-container">
<div>Я часть grid-контейнера</div>
</div>
@codeWeaveChannel | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
Используя систему сеток Bootstrap, вы можете создать базовую структуру страницы:
<div class="container">
<div class="row">
<div class="col-md-8">Основной контент</div>
<div class="col-md-4">Боковая панель</div>
</div>
</div>
Этот код создаст две колонки: одна займет 8 частей из 12, а вторая — 4 части, на устройствах среднего размера (например, планшетах) и больше.
Пример модального окна на Bootstrap:
<!-- Кнопка для открытия модального окна -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Запустить демо модальное окно
</button>
<!-- Модальное окно -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Заголовок модального окна</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Содержимое модального окна...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
<button type="button" class="btn btn-primary">Сохранить изменения</button>
</div>
</div>
</div>
</div>
Пример использования утилит Bootstrap для отступов и выравнивания текста:
<div class="p-3 mb-2 bg-light text-center">Центрированный текст с внутренними отступами</div>
Этот пример создает блок с текстом, который центрируется и имеет внутренние отступы.
@codeWeaveChannel | #bootstrap
Please open Telegram to view this post
VIEW IN TELEGRAM
@codeWeaveChannel
Please open Telegram to view this post
VIEW IN TELEGRAM
foreach в C#foreach (var item in collection) {
Console.WriteLine(item);
}foreach (var pair in dictionary) {
Console.WriteLine($"Key: {pair.Key}, Value: {pair.Value}");
}foreach (var item in collection.Where(x => x.IsActive)) {
Console.WriteLine(item.Name);
}@codeWeaveChannel | #csharp
Please open Telegram to view this post
VIEW IN TELEGRAM
@codeWeaveChannel
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Значимые типы хранят свои данные непосредственно в самой переменной. Они включают примитивные типы (int, float, bool), а также структуры (struct). Значимые типы всегда копируются при присваивании, что означает создание новой копии данных.
int a = 10;
int b = a; // b = 10, это копия значения a
b = 20; // a не изменится
Ссылочные типы хранят ссылку на данные, которые размещены в куче (heap). К ним относятся классы (class), массивы и строки (string). При присваивании ссылочных типов копируется ссылка, а не сами данные, что означает, что изменения через одну ссылку отразятся на всех ссылках на этот объект.
class Person {
public string Name;
}
Person person1 = new Person { Name = "Alice" };
Person person2 = person1; // person2 и person1 указывают на один и тот же объект
person2.Name = "Bob"; // Изменится и person1.Name, и person2.Name@codeWeaveChannel | #csharp
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Основные логические операторы:
let a = true;
let b = false;
console.log(a && b); // false
let a = true;
let b = false;
console.log(a || b); // true
let a = true;
console.log(!a); // false
@codeWeaveChannel | #javascript
Please open Telegram to view this post
VIEW IN TELEGRAM
Применение логических операторов
let age = 20;
if (age >= 18 && age < 65) {
console.log("Взрослый человек");
}
let user = null;
let defaultUser = user || "Гость";
console.log(defaultUser); // "Гость"
let isMember = true;
let isPremium = false;
if (isMember && !isPremium) {
console.log("Обычный член");
}
Корректное понимание короткого замыкания
Логические операторы в JavaScript используют принцип короткого замыкания (short-circuiting). Это означает, что выполнение прекращается, как только результат становится очевиден.
let a = true;
let b = false;
console.log(a || (b && someFunction())); // someFunction() не будет вызвана
Логические операторы помогают сделать код более гибким и читаемым, а также оптимизировать выполнение логики программы.
@codeWeaveChannel | #javascript
Please open Telegram to view this post
VIEW IN TELEGRAM
.animate() в jQuery$("#element").animate({
left: '100px',
opacity: '0.5',
height: 'toggle'
}, 2000);@codeWeaveChannel | #jquery
Please open Telegram to view this post
VIEW IN TELEGRAM
.circle {
width: 100px;
height: 100px;
background-color: red;
clip-path: circle(50%);
}
.polygon {
width: 200px;
height: 200px;
background-color: green;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}@codeWeaveChannel | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
.fadeIn() и .fadeOut() в jQuery$("#element").fadeIn(1000); // Плавное появление за 1 секунду
$("#element").fadeOut(1000); // Плавное исчезновение за 1 секунду@codeWeaveChannel | #jquery
Please open Telegram to view this post
VIEW IN TELEGRAM
.slideUp() и .slideDown() в jQuery$("#element").slideUp(1000); // Скользящее скрытие за 1 секунду
$("#element").slideDown(1000); // Скользящее раскрытие за 1 секунду@codeWeaveChannel | #jquery
Please open Telegram to view this post
VIEW IN TELEGRAM