JavaScript'er

😍Коли код запустився з першого разу JavaScript'ер

#Задача Напишіть функцію, яка приймає пропозицію та повертає найдовше слово у цій пропозиції Якщо в речення кілька слів з однаковою довжиною, поверніть перше з них.

 input: 'I love? javascript!
output: javascript

Рішення 👆 Пояснення 👇 1. Приймаємо аргументом пропозицію (sentence) 2. Поділяємо пропозицію на масив слів за допомогою методу split('') 3. Заводимо 2 змінні, які зберігатимуть найдовше слово та його довжину 4. У циклі for проходимо по кожному слову і за допомогою регулярного виразу видаляємо всі символи окрім літер, а так само визначаємо довжину слова в змінну wordLength 5. Робимо перевірку. Якщо поточне слово довше, ніж збережене слово, оновлюємо значення змінних (longWord та MaxLength) 6. Повертаємо змінну longWord JavaScript'ер

#Задача Перевірте, чи є рядок паліндром, ігноруючи регістр символів, знаки пунктуації та пробіли. Відповідь 👆 Пояснення👇 1. Спочатку ми перетворимо вхідний рядок в нижній регістр за допомогою методу toLowerCase(), потім видаляємо всі символи, крім літер і цифр, за допомогою регулярного виразу та методу replace(/[^a-z0-9]/g, ''). Це створює "очищену" версію вихідного рядка, готову до перевірки на паліндром. 2. Потім ми розбиваємо "очищений" рядок на масив окремих символів за допомогою методу split(''), перевертаємо цей масив за допомогою reverse(), а потім об'єднуємо його назад у рядок за допомогою join(''). Це створює перевернуту версію "очищеного" рядка. 3. Наприкінці ми просто порівнюємо cleaningString з reversedString і виводимо результат. JavaScript'ер

🖥Slider with Button Wave Effect Логіка перемикання слайдів реалізована у JS. Анімована бібліотекою gsap. Посилання на Codepen *ТИЦЬ JavaScript'ер

⭐️CSS Mathematics - infinity loop Реалізовано на HTML та SCSS. В анімації прописано рух осями X і Y для частинок. Для цього використовується CSS transform зі значеннями calc(cos(var(--angle)) * var(--radius)) і calc(sin(var(--angle)) * var(--radius) * -1); Посилання на Codepen *ТИЦЬ JavaScript'ер

Офісний Антон – канал, де можна посміятись з неадекватних вимог керівництва та крінжових переписок з колегами. Ідеальне місце для тих, кого за%бала робота. Підписуйтесь, буде з чого поржати у вільний час: https://t.me/+MhcsNrTszM45ZjMy

👩‍💻Шпаргалка по 10 найкращим методам роботи з масивами в JavaScript JavaScript'ер

🥸Порядок виконання Порядок виконання або потік виконання (англ. control flow) - це порядок, в якому інтерпретатор JavaScript виконує написані в коді інструкції. Стандартний порядок виконання інструкцій називають послідовним — інтерпретатор читає та виконує інструкції рядково зверху донизу. Порядок виконання можна змінювати за допомогою керуючих конструкцій if...else, while, switch, for та інших. JavaScript'ер

🥲Коли кажуть, що підеш на обід після того, як пофіксиш баг, але ти розумієш, що до обіду тепер кілька місяців JavaScript'ер

▶️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'ер