JavaScript'er

▶️Icon Hover Effect Using Іконки з оригінальним ефектом при наведенні створені на HTML і CSS. Посилання на Codepen *ТИЦЬ JavaScript'ер

🔗Custom Cursor Effect Реалізовано на HTML, CSS та чистому JS. Посилання на Codepen *ТИЦЬ JavaScript'ер

🥸Питання із співбесіди Що таке БЕМ? Відповідь: Методологія БЕМ (Блок, Елемент, Модифікатор) - компонентний підхід до веб-розробки. В його основі лежить принцип поділу інтерфейсу на незалежні блоки. Він дозволяє легко та швидко розробляти інтерфейси будь-якої складності та повторно використовувати існуючий код, уникаючи Copy-Paste. Блок — функціонально незалежний компонент сторінки, який може бути повторно використаний. Елемент - складова частина блоку, яка не може використовуватися у відриві від нього. Модифікатор - сутність, що визначає зовнішній вигляд, стан або поведінку блоку або елемента. JavaScript'ер

😂Що? JavaScript'ер

🗣️Usbsas – це інструмент для безпечного читання інформації з ненадійних USB-накопичувачів. Мови : Rust (74.8%), JavaScript (18.9%), HTML (2.2%), … JavaScript'ер

🆒Простий спосіб створення ефекту нескінченної каруселі за допомогою CSS HTML :

 <div class="brand-list">
<div class="wrapper">
<img src="logo1" alt="brand1">
<img src="logo2" alt="brand2">
<img src="logo3" alt="brand3">
<img src="logo4" alt="brand4">
// дублюємо
<img src="logo1" alt="">
<img src="logo2" alt="">
<img src="logo3" alt="">
<img src="logo4" alt="">
</div>
</div>

CSS:

 .brand-list {
overflow: hidden;
}
.wrapper {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 240px;
animation: scroll 10s linear infinite;
}
@keyframes scroll {
to {
translate: calc(-4 * 240px);
}
}

Як це працює? Коли четвертий елемент досягне кінцевої позиції, п'ятий елемент (дублікат першого) опиниться на початку списку. Після цього анімація негайно повертається в початкову позицію. Анімація продовжується плавно, оскільки п'ятий елемент і перший елемент однакові. JavaScript'ер

😄Життя їх до такого не готувало JavaScript'ер

👩‍💻Найпоширеніші питання із співбесід по JavaScript з прикладами Ентузіаст на GitHub створив класну колекцію з 1000 питань для співбесід з JavaScript, що охоплюють React, Vue.js, Angular та інші теми. Ідеальний ресурс для підготовки до інтерв'ю або поглиблення знань в програмуванні. Посилання лишаємо. JavaScript'ер

🔍CSS Dots wave Анімована сцена виконана за допомогою SCSS Посилання на Codepen *ТИЦЬ JavaScript'ер

😮Не популярний, але корисний метод - Array.from . Цей метод дозволяє нам створювати нові масиви з різних об'єктів, які можна перетворити на масив. Що таке Array.from? Array.from - це статичний метод класу Array , який створює новий екземпляр масиву з масивоподібного або об'єкта, що ітерується. Іншими словами, якщо у вас є щось, що виглядає як масив або поводиться як масив (наприклад, рядок або об'єкт NodeList , отриманий за допомогою методів DOM, таких як document.querySelectorAll ), ви можете перетворити це "щось" у справжній масив. Приклади використання

 // Перетворення рядка на масив
let str = "Привіт!";
let strArray = Array.from(str);
console.log(strArray); // ["Вітання", "!"]

// Використання з об'єктами NodeList
let elements = document.querySelectorAll('div'); // уявімо, що у нас на сторінці є div'и
let elementsArray = Array.from(elements);
elementsArray.forEach(element => console.log(element)); // тепер із цим масивом можна працювати як із звичайним масивом

Другий аргумент функції А ви знали, що є ще й другий аргумент? Другий аргумент - це функція, яка викликається для кожного елемента об'єкта, що ітерується, дозволяючи не тільки створити масив, але і трансформувати його елементи. Він скорочує необхідність у додаткових викликах map , роблячи код більш читаним і елегантним, а також зменшує кількість проходів масивом, що потенційно може підвищити продуктивність вашого коду.

 const array = Array.from({length: 10}, (v, i) => i + 1);
console.log(array); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Переваги: - Array.from працює з будь-якими об'єктами, що ітеруються, даючи нам гнучкість в обробці даних. - Перетворює дані в масиви для подальшого використання всіх методів масиву, таких як map , filter , reduce і т.д. - Допомагає уникнути мутацій. Створюючи новий масив, ми змінюємо вихідний об'єкт. Це був короткий розбір Array.from . Сподіваюся, це допоможе вам краще зрозуміти, як і коли використати цей метод. JavaScript'ер

👩‍💻Шпаргалка по хукам в React JS JavaScript'ер

⁉️Якими методами можна візуально приховати елемент у CSS? У CSS існує кілька способів візуально приховати елемент від користувачів, зберігаючи його доступність для скріндрідерів та пошукових систем. Нижче наведено деякі з часто використовуваних способів: 1. display: none; - Властивість display: none; повністю прибирає елемент із потоку документа, роблячи його невидимим і не займає місце на сторінці. 2. visibility: hidden; - Властивість visibility: hidden; приховує елемент, але залишає його в потоці документа, так що місце на сторінці буде зайняте. 3. opacity: 0; - встановлення opacity: 0; робить елемент повністю прозорим, але залишається в потоці і може впливати на макет сторінки. 4. position: absolute; left: -9999px; - Присвоєння елементу position: absolute; left: -9999px; переміщує його за межі видимої області екрана, зберігаючи доступність для скринридерів. 5. clip-path: inset(100%); opacity: 0; - Цей метод використовує clip-path: inset(100%); opacity: 0; для приховування елемента поза видимої області. 6. width: 0; height: 0; overflow: hidden; - Установка width: 0; height: 0; overflow: hidden; може бути використана для приховування вмісту елемента. Кожен з цих методів має свої особливості і може застосовуватись залежно від необхідної поведінки елемента на сторінці. JavaScript'ер

🤩Звичайний робочий день фронтедера JavaScript'ер

☕Кав'ярня програміста - авторський канал баристи, який перейшов в IT Тут автор лампово пояснює за мови програмування, розповідає інсайди та факапи з роботи, а також дає стусана під зад, тим хто тільки починає✌️ Хутчіш заварюй свою каву та підписуйся: @coffee_prog

🔝Сьогодні дізнаємося як за допомогою CSS перетворити звичайний текст на елегантний макет з колонками, як у газеті Ми розберемося, як використовувати властивості columns та column-rule , щоб організувати вміст сторінки більш привабливо та читабельно. Про властивості Властивість columns CSS дозволяє легко розділити текст на кілька колонок, роблячи читання на довгих сторінках більш комфортним. Ця властивість є шорткатом для column-width (ширина колонки) та column-count (кількість колонок), дозволяючи задавати їх одним рядком.

 .columns {
columns: 2 200px; /* Ширина колонки 200px та кількість колонок 2 */
column-gap: 40px; /* Встановлюємо проміжок між колонками */
}

Властивість column-rule додає розділову лінію між колонками, що надає макету додаткової вишуканості та структури. Воно працює подібно до border , але застосовується між колонками.

 .columns {
column-rule: 2px solid #333; /* Додає розділову лінію між колонками */
}

Висновок Використання властивостей columns і column-rule CSS може значно прискорити процес створення адаптивних колонок. JavaScript'ер

👩‍💻Робимо різні фігури з картинок CSS-властивість clip-path створює обмежену область, яка визначає яка частина елемента має бути видимою. Частини, які знаходяться всередині області, є видимими, а частини поза областю приховані. Якщо хочете створювати будь-які фігури з картинок, тримайте посилання на офіційний сайт Clip Path, там можна як користуватися шаблонами, так і робити власні фігури. Як перший приклад, залишаю код для створення хреста з картинки:

img {
width: 280px;
height: 280px;
clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}

JavaScript'ер