JavaScript'er
Закрытый канал
Заявки приймаємо автоматично! Канал з лайфхаками для кожного поважаючого себе веб-розробника Запросити друга, якщо є: https://t.me/+my7itn9CGMplOTAy Зв'язок: @Ekater1na_admin
Больше
6 879
Подписчики
-524 часа
-377 дней
-11930 дней
Архив постов
6 879
Офісний Антон – канал, де можна посміятись з неадекватних вимог керівництва та крінжових переписок з колегами.
Ідеальне місце для тих, кого за%бала робота.
Підписуйтесь, буде з чого поржати у вільний час:
https://t.me/+MhcsNrTszM45ZjMy
6 879
🥸Порядок виконання
Порядок виконання або потік виконання (англ. control flow) - це порядок, в якому інтерпретатор JavaScript виконує написані в коді інструкції.
Стандартний порядок виконання інструкцій називають послідовним — інтерпретатор читає та виконує інструкції рядково зверху донизу.
Порядок виконання можна змінювати за допомогою керуючих конструкцій
if...else, while, switch, for та інших.
JavaScript'ер6 879
🥲Коли кажуть, що підеш на обід після того, як пофіксиш баг, але ти розумієш, що до обіду тепер кілька місяців
JavaScript'ер
6 879
▶️Icon Hover Effect Using
Іконки з оригінальним ефектом при наведенні створені на HTML і CSS.
Посилання на Codepen *ТИЦЬ
JavaScript'ер
6 879
🔗Custom Cursor Effect
Реалізовано на HTML, CSS та чистому JS.
Посилання на Codepen *ТИЦЬ
JavaScript'ер
6 879
🥸Питання із співбесіди
Що таке БЕМ?
Відповідь:
Методологія БЕМ (Блок, Елемент, Модифікатор) - компонентний підхід до веб-розробки. В його основі лежить принцип поділу інтерфейсу на незалежні
блоки. Він дозволяє легко та швидко розробляти інтерфейси будь-якої складності та
повторно використовувати існуючий код, уникаючи Copy-Paste.
Блок — функціонально незалежний компонент сторінки, який може бути повторно використаний.
Елемент - складова частина блоку, яка не може використовуватися у відриві від нього.
Модифікатор - сутність, що визначає зовнішній вигляд, стан або поведінку блоку або елемента.
JavaScript'ер
6 879
Який атрибут HTML використовується для визначення вбудованих стилів?
6 879
🗣️Usbsas – це інструмент для безпечного читання інформації з ненадійних USB-накопичувачів.
Мови : Rust (74.8%), JavaScript (18.9%), HTML (2.2%), …
JavaScript'ер
6 879
🆒Простий спосіб створення ефекту нескінченної каруселі за допомогою 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>
.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);
}
}6 879
👩💻Найпоширеніші питання із співбесід по JavaScript з прикладами
Ентузіаст на GitHub створив класну колекцію з 1000 питань для співбесід з JavaScript, що охоплюють React, Vue.js, Angular та інші теми. Ідеальний ресурс для підготовки до інтерв'ю або поглиблення знань в програмуванні.
Посилання лишаємо.
JavaScript'ер
6 879
🔍CSS Dots wave
Анімована сцена виконана за допомогою SCSS
Посилання на Codepen *ТИЦЬ
JavaScript'ер
6 879
😮Не популярний, але корисний метод -
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'ер6 879
⁉️Якими методами можна візуально приховати елемент у 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'ер