![VS [Front-end]](https://cdn.tlmtr.io/_next/image?url=https%3A%2F%2Fimg.tlmtr.io%2Fc%2F1sfz5B%2F5219802342310929784%3Fty%3Dl&w=48&q=75){kind=small}
VS [Front-end]
Open in Telegram
Вітаємо на каналі про JavaScript,який здивувує вас більше,ніж реклама,яка знає,що ви шукаєте в Інтернеті!На каналі ми збираємося розповісти вам все про JavaScript. Якщо у вас виникли питання зверніться до адміністраторів: -@vlad_sha2 -@alina_mytsa
Show more2 540
Subscribers
No data24 hours
-87 days
-2730 days
Posts Archive
![VS [Front-end]](https://cdn.tlmtr.io/_next/image?url=https%3A%2F%2Fimg.tlmtr.io%2Fc%2F1sfz5B%2F5219802342310929784%3Fty%3Dx&w=64&q=75){kind=small}
2 540
Hidden Search Widget📱
Логіка розкриття реалізована у JS. Плавність досягається за допомогою CSS transition.
🔗ПОСИЛАННЯ НА CODEPEN
#useful
👀 Telegram | Youtube | LinkedIn
2 540
Вписування зображення в область🧑💻
Властивість
object-fit в CSS використовується для визначення, як зображення або відео вписується в контейнер (наприклад, img, video або div).
Це особливо корисно, коли розмір зображення не відповідає розміру контейнера, і потрібно вирішити, як зображення буде заповнювати цей простір.
1. fill – значення за замовчуванням. Зображення розтягується або стискається, щоб повністю заповнити контейнер. Пропорції можуть бути змінені, і зображення може виглядати спотвореним.
img {
object-fit: fill;
}contain – зображення зберігає свої пропорції та масштабуватиметься так, щоб повністю поміститися в контейнер, але залишить порожні поля, якщо співвідношення сторін зображення і контейнера не співпадають.
img {
object-fit: contain;
}cover – зображення масштабуватиметься так, щоб повністю заповнити контейнер, обрізуючи краї, якщо пропорції зображення і контейнера не співпадають. Це часто використовується для створення фонових зображень, де важливо, щоб весь контейнер був заповнений, навіть якщо частина зображення буде обрізана.
img {
object-fit: cover;
}none – зображення не масштабується і відображається в оригінальних розмірах. Якщо воно більше за контейнер, то обрізатиметься до його меж.
img {
object-fit: none;
}scale-down – зображення масштабується до меншого розміру між none і contain. Якщо зображення більше за контейнер, воно буде зменшене як у contain; якщо менше — залишиться без змін, як у none.
img {
object-fit: scale-down;
}
2 540
Cards with hover effects👋 Для тих, кому треба :)
10 прикладів того, як можна анімувати інтерактивні елементи у картках. Реалізовано з допомогою SCSS.
🔗ПОСИЛАННЯ НА CODEPEN
#useful
👀 Telegram | Youtube | LinkedIn
2 540
2 540
Геттери та Сеттери в JavaScript: робимо дані контрольованими 🔥
Геттери та сеттери — це спосіб контролю доступу до властивостей об’єкта. Замість того, щоб напряму працювати з властивостями, ми можемо створити логіку, яка “фільтрує” або трансформує дані під час запису або зчитування.
Уявімо, що ми створюємо клас
BankAccount, де можна слідкувати за балансом рахунку. Кожен раз, коли ми намагаємося зняти кошти, будемо перевіряти, чи достатньо балансу.
class BankAccount {
constructor(balance) {
this._balance = balance; // Приватна властивість балансу
}
// Геттер для отримання балансу
get balance() {
return this._balance;
}
// Сеттер для поповнення балансу
set deposit(amount) {
if (amount > 0) {
this._balance += amount;
console.log(`Поповнено на ${amount}. Новий баланс: ${this._balance}`);
} else {
console.log("Сума поповнення повинна бути більшою за нуль!");
}
}
// Сеттер для зняття коштів
set withdraw(amount) {
if (amount > this._balance) {
console.log("Недостатньо коштів на рахунку!");
} else if (amount <= 0) {
console.log("Сума зняття повинна бути більшою за нуль!");
} else {
this._balance -= amount;
console.log(`Знято ${amount}. Новий баланс: ${this._balance}`);
}
}
}
const account = new BankAccount(500); // Початковий баланс: 500
console.log(`Поточний баланс: ${account.balance}`); // 500
account.deposit = 200; // Поповнюємо рахунок на 200
console.log(`Поточний баланс: ${account.balance}`); // 700
account.withdraw = 100; // Знімаємо 100
console.log(`Поточний баланс: ${account.balance}`); // 600
account.withdraw = 1000; // Спроба зняти 1000
// Відобразиться повідомлення: Недостатньо коштів на рахунку!
2 540
Хелло, знайшли прикольну штуку для тих, хто виділяє час на самонавчання :)
Наша особиста рекомендація: берете питання, яке не розумієте (або тему), просите AI згенерувати текст на цю тему і отримуєте текст + можливість додати до кожного абзацу приблизно дофіга різних діаграм/графіків/графічних пояснень тексту. Вуа-ля!
А якщо ви спитаєте мене на більш глибокому рівні:
Napkin AI — це інноваційний інструмент, який перетворює текстовий контент на візуальні елементи, такі як діаграми, інфографіку та блок-схеми. Це особливо корисно для створення документів, де візуалізація інформації підвищує її сприйняття.
Основні можливості Napkin AI:
• Автоматичне створення візуалізацій:
Введіть або вставте свій текст, і Napkin AI автоматично генерує відповідні візуальні елементи, що відображають зміст вашого тексту.
• Редагування та налаштування:
Створені візуалізації можна редагувати, змінюючи іконки, кольори, шрифти та інші елементи, щоб вони відповідали вашому стилю або бренду.
• Експорт у різних форматах:
Готові візуалізації можна експортувати у форматах PNG, PDF або SVG для подальшого використання в презентаціях, на веб-сайтах або в документах.
• Підтримка кількох мов:
Хоча Napkin AI спочатку був доступний англійською мовою, наразі він підтримує також німецьку, французьку, японську та китайську мови.
• Інтуїтивний інтерфейс:
Простий та зрозумілий інтерфейс дозволяє швидко створювати візуалізації без необхідності володіння спеціальними дизайнерськими навичками.
🔗ПОСИЛАННЯ
#useful
👀 Telegram | Youtube | LinkedIn
