Code Ukraine // Програмування

🖥 PGlite - це легковага версія PostgreSQL, що працює в WebAssembly (WASM), що дає змогу запускати Postgres у браузері або Node.js без необхідності встановлення додаткових залежностей!

Вона підтримує реальний час і реактивні прив'язки, дає змогу використовувати базу даних у пам'яті або зі збереженням на файлову систему чи IndexedDB. Підходить для використання в локальних додатках з мінімальними ресурсами.

🔐 Ліцензія: Apache-2.0

🖥 Github

Code Ukraine

🖥 Вивчіть Three.js, створивши п'ять проєктів!

Three.js абстрагує складнощі WebGL (бібліотека веб-графіки), спрощуючи розробникам створення і відображення анімованої 3D-комп'ютерної графіки на веб-сторінці. З Three.js ви можете створювати все: від простих 3D-моделей до складних інтерактивних вражень.

🔗 Посилання: *клік*

Code Ukraine

Створюємо React з нуля

У цьому гайді міститься інструкція зі створення аналога React з нуля. Навряд чи ви станете використовувати його в реальних проєктах, але зате дізнаєтеся, як влаштовані основні функції та можливості бібліотеки. Крім гайда всередині ви знайдете посилання на GitHub з готовим кодом.

Подробиці.

#react #туторіал

Code Ukraine

🖥 Використання async і defer для керування скриптами

У світі веб-розробки оптимізація часу завантаження сторінок має вирішальне значення. Два потужні атрибути тега - async і defer - можуть істотно вплинути на продуктивність сайту. Давайте почнемо з основ і дізнаємося, що роблять ці атрибути і коли їх слід використовувати.

Подробиці.

#javascript #html

Code Ukraine

🖥 Метод pop() :

Цей метод видаляє останній елемент масиву і повертає видалений елемент.

Code Ukraine

Create Phone Number

Напишіть функцію, яка приймає масив із 10 цілих чисел (від 0 до 9) і повертає рядок цих чисел у вигляді номера телефону

Приклад:
createPhoneNumber([1, 2, 3, 4, 5, 6, 7, 8, 9, 0])
// => returns «(123) 456-7890»

Ось посилання.

Code Ukraine

Що таке innerHTML і чому інколи його краще не використовувати?

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

Приклад:
// Беремо елемент зі сторінки
const div = document.getElementById("example");

// Встановлюємо його вміст
div.innerHTML = "Привіт, я новий текст!";

Після виконання в з’явиться:
Привіт, я новий текст!.
Весь попередній вміст (якщо він був) буде замінено.

Переваги innerHTML

— Простота та швидкість. Одним рядком можна додати до елемента складний HTML-код.
— Динамічність. HTML-контент можна створювати програмно, наприклад, на основі даних з API.
Приклад:
const list = ["яблуко", "банан", "апельсин"];

document.getElementById("list").innerHTML = list.map(item => ${item}).join("");
Результат:

яблуко
банан
апельсин


Чому innerHTML не завжди варто використовувати?

1. Уразливість до XSS-атак.
При роботі з innerHTML ви вставляєте HTML-код у сторінку. Якщо код генерується на основі сторонніх даних (наприклад, від користувача або сервера), це може призвести до впровадження шкідливого коду.

2. Перезапис старого вмісту.
innerHTML повністю замінює вміст елемента. Якщо елемент мав обробники подій (додані через addEventListener), вони будуть видалені.

3. Низька продуктивність із великими обсягами даних.
При кожному використанні innerHTML вся внутрішня структура елемента пересоздається, навіть якщо зміни мінімальні.

Чим замінити innerHTML?

1. textContent
Якщо потрібно змінити лише текст (без HTML), використовуйте textContent. Це безпечніше, адже текст не інтерпретується як HTML.

2. insertAdjacentHTML
Цей метод дозволяє додавати HTML-код у конкретне місце елемента без перезапису всього вмісту.

3. DOM-методи
Для складної логіки краще створювати елементи через методи на кшталт document.createElement та appendChild.

Порада
Якщо ви все ж вирішили використати innerHTML, переконайтеся, що дані, які ви вставляєте, безпечні та ретельно перевірені.

#простимисловами #html #javascript

EbookFoundation: безкоштовні книги та ресурси з програмування

Цей репозиторій зібрав усе для прокачування ваших навичок: книжки, курси, завдання, тренажери, подкасти, шпаргалки практично з усіх МП.

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

#програмування #навчання

Code Ukraine

Перестаньте молитися на принципи S.O.L.I.D.

У світі розробки програмного забезпечення існує безліч принципів і практик, які приймаються як даність і рідко піддаються критичному аналізу. Це стосується і принципів SOLID, яким присвячено величезну кількість статей, де кожен автор тлумачить їх по-своєму.

У зв'язку з цим виникає парадокс: принципи SOLID вкрай важливі, але кожен розуміє їх по-своєму. Виходить, що це вже не якась одна концепція, а безліч різних під однією назвою.

#solid

Code Ukraine

Майбутнє мікросервісів: чи підемо ми до монолітів 2.0

Деякі компанії, зіткнувшись зі складністю мікросервісів, повертаються до монолітів, але з використанням сучасних технологій. Інші тільки починають впроваджувати мікросервісну архітектуру.

Ідея монолітів 2.0 пропонує альтернативний підхід: поєднати простоту класичних монолітів із сучасними технологіями, мінімізуючи технічну складність. Це не означає повного повернення до старих методів — це спроба переосмислити архітектуру так, щоб зробити її більш ефективною та доступною для сучасних вимог.

Чому компанії повертаються до спрощення, і що саме стоїть за концепцією "монолітів 2.0"? Це питання залишається відкритим для роздумів та обговорень.

Code Ukraine

Хочеш вдосконалити англійську для кар’єри чи навчання в Амерікан Юніверсіті Київ?

Курс AUK English for Professionals допоможе тобі:

♦️Розширити словниковий запас для вільного спілкування
♦️Покращити міжнародні кар'єрні перспективи
♦️Підготуватися до навчання на магістерських програмах АЮК у сфері IT та менеджменту
♦️Стати частиною динамічної спільноти АЮК

Старт: 3 березня 2025 року
Формат: онлайн
Викладач: носій мови

Більше інформації та реєстрація за посиланням.

Забронюй місце зі знижкою -30% до 16 лютого, щоб впевнено володіти англійською у роботі та навчанні!

Як працює псевдоклас :has() в CSS

Псевдоклас :has — це потужний інструмент у CSS, який дозволяє обирати елементи на основі їхнього вмісту або дочірніх елементів. Іншими словами, він дає можливість стилізувати елементи на основі контексту всередині них, чого раніше неможливо було зробити лише за допомогою CSS.

Як це працює?

element:has(selector) вибирає елемент, який містить певного нащадка або відповідає вказаному селектору.

/* Вибрати картки, що містять кнопку */
.card:has(button) {
border: 2px solid blue;
}
Тут будуть виділені тільки ті .card, всередині яких є .

Для чого він потрібен?

Робота з батьківськими елементами. Наприклад, стилізувати , якщо всередині нього є конкретний елемент.

Умовне форматування. Наприклад, можна вибрати контейнери, які мають певний стан, наприклад, відмічений чекбокс.

/* Стилізувати батьківський div, якщо всередині є відмічений чекбокс */
div:has(input[type="checkbox"]:checked) {
background-color: lightgreen;
}
#простословами #css

Code Ukraine

Пишемо свій двигун для Flexbox-верстки

Пропонуємо вам написати свій рушій для компонування елементів з нуля на TypeScript. У результаті у вас вийде аналог Yoga або Stretch, який ви зможете використовувати у своїх проєктах.

Якщо зацікавилися, то давайте без зайвих слів приступимо до справи. Подробиці за посиланням:

https://tchayen.com/how-to-write-a-flexbox-layout-engine

#фронтенд #typescript #css

Code Ukraine

Ловіть годноту від Google. Компанія викотила безкоштовний курс по ШІ-агентам, на якому можна опанувати цю сферу на рівні експерта.

Зрозумієте, як працюють нейронки, як юзати їх на 100% та самому створювати ШІ-продукти.

Зберігайте.

Code Ukraine