JavaScript 🇺🇦

Sparkly Stars Красивий ефект при наведенні на текст. Реалізовано на canvas і чистому JS. #codepen // #practice // JS

Особливості використання innerHTML innerHTML — це властивість JavaScript, яка дозволяє працювати з вмістом HTML-елементів.

Простіше кажучи, за допомогою innerHTML можна отримати або змінити все, що знаходиться всередині HTML-тега: текст, інші теги, атрибути тощо. Детальніше — у нашій статті.

Мова: 🇺🇦 #innerHTML // #theory // JS

Статичний метод Reflect.preventExtensions() запобігає додаванню нових властивостей до об'єкта. Він схожий на Object.preventExtensions(), але з деякими відмінностями.

const object1 = {};

console.log(Reflect.isExtensible(object1));
// true

Reflect.preventExtensions(object1);

console.log(Reflect.isExtensible(object1));
// false

Якщо аргумент target методу Reflect не є об'єктом (примітивом), це викличе TypeError. З методом Object аргумент target, що не є об'єктом, перетвориться на об'єкт. #Reflect // #practice // JS

Адаптуємо лендінг, ч.5 На 13-му уроці відеокурсу "HTML+CSS+JS для всіх" автор дає п'яту частину свого детального пояснення-демонстрації верстки лендінгу — і розповідає про його адаптацію. Мова: 🇺🇦 Тривалість: 1 год 17 хв #JS // #lessons // Вакансії IT

Text Scroll And Hover Effect Ефект для тексту "два в одному": при прокручуванні сторінки текст заповнюється кольором, а при наведенні курсора — змінюється на інший текст з кольоровим фоном. #codepen // #practice // JS

Гібридний онлайн WYSIWYG-редактор для React Паралельно з розвитком World Wide Web вдосконалювались інструменти для швидкого та зручного створення контенту в форматі HTML. Одним з простих та поширених рішень для цього є онлайн WYSIWYG-редактори. Про їхні останні досягнення і піде мова в цій статті. Мова: 🇺🇦 #WYSIWYG #React // #theory // JS

Image Slider Effect Website Створено й анімовано на HTML і CSS. Логіка перемикання слайдів реалізована в чистому JS. #codepen // #practice // JS

Тестуємо введення даних на міцність Репозиторій Big List of Naughty Strings зібрав символи і рядки, які здатні викликати баги, збої та вразливості під час користувацького введення.

Тут є невидимі Unicode-символи, рядки, що порушують валідацію, та інші хитрі кейси. Ідеальний інструмент для QA-тестування, щоб переконатися, що ваш застосунок справляється з граничними і незвичайними ситуаціями.

👉 Скачати з GitHub #JS // #news // Вакансії IT

Дуже зручна однорядкова функція JavaScript, яка важлива ще й з міркувань безпеки:

const stripHtml = html => (new DOMParser().parseFromString(html, 'text/html')).body.textContent || '';
stripHtml('<h1>Hello <strong>World</strong>!!!</h1>');
// Результат: Hello World!!!

Користувачі можуть вводити значення на основі тегів. При прийомі введення користувача можна вилучати будь-які HTML-елементи з тексту, введеного користувачем, за допомогою DOMParser. #JS // #practice // Вакансії IT

Вакансія: Front-End Developer Провідний постачальник комплексних ІТ-рішень компанія Asap Demo шукає на офісну роботу в Києві фронтенд-розробника з досвідом роботи на React, Vite, TypeScript, Tailwind CSS від 1-го року — для розробки та підтримки сучасних веб-додатків. 📝 Відкрити анкету #JS // #jobs // Архів книг

Метод toUpperCase() повертає рядкове значення виклику, перетворене на верхній регістр.

const sentence =
'The quick brown fox jumps over the lazy dog.';

console.log(sentence.toUpperCase());
// THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.

Значення перетвориться на рядок, якщо воно не є рядком. Якщо викликається null або undefined, буде TypeError. #toUpperCase // #practice // JS

📚 Безкоштовні книги та ресурси з програмування Репозиторій EbookFoundation зібрав усе для прокачування ваших навичок: книжки, курси, завдання, тренажери, подкасти, шпаргалки практично з усіх мов програмування.

І головне — все це доступно не тільки англійською, а й іншими мовами.

#JS // #books // Вакансії IT

Нажаль це правда! Більшість людей не знають, як зайнятись саморозвитком Проведені в 2024 році опитування показало, що більше 95% людей, досі не розуміють, як розвиватися без зайвих зусиль. Але ж вже давно створили Mind the gap — канал для тих, хто хоче стати кращим, без знущання над собою. 😪 Після підписки, ти 100% змінеш своє життя – @Mind_the_gap

Як працює key в React У цій статті ми заглибимось в концепцію атрибута key в React та виявимо, що key має значно ширші способи використання, ніж всі звикли думати.

Автор показує, як атрибут key працює під капотом у динамічних списках, а також інші його можливості, які допомагають контролювати поведінку React у деяких ситуаціях.

Мова: 🇺🇦 #React // #theory // JS

console.log(1234 / 10 | 0);
console.log(1234 / 100 | 0);
console.log(43.21 | 0);

👉 Відповідь #JS // #practice // Архів книг

Frosted Glass loader Оригінальна анімація завантаження у вигляді svg-картинки. Зроблено за допомогою бібліотеки gsap. #codepen // #practice // JS

Первозданний JavaScript Автор цієї статті — сертифікований Software Engineer, який 10 років працює з JavaScript. Тут він вирішив поговорити про первозданний JavaScript — до 2015-го.

Це JS, який знають піонери й про який, на жаль, не чуло молоде покоління.

Мова: 🇺🇦 #JS // #theory // Архів книг

Статичний метод Reflect.isExtensible() визначає, чи об'єкт розширюється (чи можуть до нього додаватися нові властивості). Він схожий на Object.isExtensible(), але з відмінностями.

const object1 = {};

console.log(Reflect.isExtensible(object1));
// true

Reflect.preventExtensions(object1);

console.log(Reflect.isExtensible(object1));
// false

const object2 = Object.seal({});

console.log(Reflect.isExtensible(object2));
// false

Якщо аргумент target тут не є об'єктом (примітивом), то викликається TypeError. Із Object.isExtensible() аргумент target, який не є об'єктом, поверне false без жодних помилок. #JS // #practice // Архів книг

Верстаємо лендінг з нуля: дещо про фронтенд На 12-му уроці відеокурсу "HTML+CSS+JS для всіх" автор дає багато корисних рекомендацій щодо фронтенд-розробки в рамках верстки лендінгу і не тільки. Мова: 🇺🇦 Тривалість: 2 год 5 хв #JS // #lessons // Вакансії IT

Wiggly Squiggly Реалізовано на TypeScript, анімовано за допомогою бібліотеки TweenMax. #codepen // #practice // JS