JavaScript'er

🔍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'ер

🚀 FRONTEND ТА FULLSTACK: ПЛАН ОСВОЄННЯ ПРОФЕСІЙ 🪐 Хей-хей! На зв'язку планета Mate academy! Вже у цей вівторок проведемо безоплатний вебінар, де розберемо найбільш хвилюючі питання початківців та розкажемо, як з нуля стартувати в IT Frontend / Fullstack спеціалісту. 📝Про що поговоримо? 📌 Чому Frontend (аналітика вакансій, зарплат, конкуренції тощо) 📌 З чого краще починати: JavaSсript, HTML/CSS 📌 Як освоїти GIT + GITHUB 📌 Frameworks: React vs Angular vs Vue. Що справді потрібно роботодавцям 📌 Де шукати безкоштовні ресурси 📌 Що таке Fullstack та чи він кращий? 🗓 Коли: 12 березня о 19:00 👉 Тицяй кнопку нижче або переходь за посилання для реєстрації: mate.academy/webinars/frontend_fullstack

🥸Питання із співбесіди Різниця між function declaration та function expression? Відповідь: Function Declaration: • Використовується ключове слово function на початку рядка коду. • Зазвичай використовується для створення функцій, які мають бути доступні у всьому поточному контексті виконання (наприклад, усередині будь-яких блоків коду у поточному скрипті). • Функції, оголошені таким чином, піднімаються вгору в області видимості, що означає, що вони можуть бути викликані до фактичного оголошення функції в коді. Function Expression: • Функція надається змінною як значення. • Зазвичай використовується для створення анонімних функцій або функцій, які мають бути доступні лише в межах певного контексту виконання. • Функції, створені таким чином, не піднімаються вгору в області видимості (hoisting), їх можна викликати лише після того, як вони були надані змінною. JavaScript'ер

😉Підклас "зум-дзвіни" JavaScript'ер

🚀 FRONTEND ТА FULLSTACK: ПЛАН ОСВОЄННЯ ПРОФЕСІЙ 🪐 Хей-хей! На зв'язку планета Mate academy! Вже у цей вівторок проведемо безоплатний вебінар, де розберемо найбільш хвилюючі питання початківців та розкажемо, як з нуля стартувати в IT Frontend / Fullstack спеціалісту. 📝Про що поговоримо? 📌 Чому Frontend (аналітика вакансій, зарплат, конкуренції тощо) 📌 З чого краще починати: JavaSсript, HTML/CSS 📌 Як освоїти GIT + GITHUB 📌 Frameworks: React vs Angular vs Vue. Що справді потрібно роботодавцям 📌 Де шукати безкоштовні ресурси 📌 Що таке Fullstack та чи він кращий? 🗓 Коли: 12 березня о 19:00 👉 Тицяй кнопку нижче або переходь за посилання для реєстрації: mate.academy/webinars/frontend_fullstack

✔️MacOSBigSurWeb – Веб-імплементація інтерфейсу MacOS Big Sur. Реалізована використовуючи Svelte. Мови : Svelte (64.1%), TypeScript (29.8%), SCSS (3.9%), … JavaScript'ер

🥸Що таке цикл подій (event loop) та як він працює? Двигун браузера виконує JavaScript в одному потоці. Для потоку виділяється область пам'яті - стек, де зберігаються фрейми (аргументи, локальні змінні) функцій, що викликаються. Список подій, що підлягають обробці, формує чергу подій. Коли стек звільняється, двигун може обробляти подію з черги. Координування цього процесу відбувається в event loop. Це, власне, нескінченний цикл, у якому виконуються численні обробники подій. Якщо черга порожня - двигун браузера чекає, коли надійде подія. Якщо не порожня — перша у ній подія витягується і її обробник починає виконуватися. І так до безкінечності. Python'er

😄Такі і працюємо JavaScript'ер

✨Шпаргалка з альтернативними способами (які не змінюють вихідний масив) для 9 методів, що мутують *Мутують методи масиву - це методи, які при використанні на масиві змінюють його JavaScript'ер

👩‍💻Чуйна сітка CSS Grid одним рядком коду Використовуючи Grid, ми можемо створити чуйний набір стовпців, які створюють самі себе за необхідності.

 .container {
max-width: 1000px;
width: 100%;
display: grid;
/* той самий рядок 👇 */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 32px;
}

JavaScript'ер