JavaScript'er

Встановлюємо колір залежно від теми операційної системи користувача Функція light-dark() приймає два аргументи і повертає один з них залежно від того, яку тему вибрав користувач. Перше значення буде повернено, якщо у користувача встановлена світла тема, або тема не вибрана, а друге, якщо встановлена темна тема Щоб функція light-dark() працювала, необхідно вказати властивість color-scheme зі значенням light dark. Зазвичай це роблять у псевдокласі :root. Якщо ця властивість не вказана, то функція завжди буде повертати тільки перше значення На даний момент підтримка — 87.36% JavaScript'еr

Сторінка з помилкою 404 Кумедna анімація сторінки з помилкою #404. Реалізовано за допомогою SCSS. ⤷ Забрати код JavaScript'еr

Інтерактивна бібліотека візуалізації даних — ECharts Дозволяє додавати до проекту інтуїтивно зрозумілі, інтерактивні та налаштовувані діаграми. - Надає більш ніж 20 типів діаграм - Перемикання між рендерингом Canvas і SVG - Автоматично генеруються описи діаграм - Написана на чистому JavaScript Завантажуємо тут JavaScript'еr

Проста кнопка у стилі ретро Хитрощі тут полягають у тому, щоб створити бокс-тень без розмиття для стану за замовчуванням Для активного стану я переміщую кнопку, зменшуючи при цьому тінь, так що тінь здається статичною. Подібного трюку можна досягти за допомогою псевдоелементів, але я віддаю перевагу цьому методу за його простоту. JavaScript'еr

criesInSqlDateTime JavaScript'еr

🧠 Чому варто вчити JS через маленькі проекти Теорія — це добре, але справжнє розуміння приходить, коли ти робиш щось власними руками. Замість довгих уроків роби маленькі mini-apps: калькулятор, ToDo, таймер або просту гру. Кожен проект показує, як працює код на практиці, дозволяє одразу помічати помилки, виправляти їх і закріплювати знання. Такий підхід допомагає розвивати м’язову пам’ять для програмування. Ти швидко починаєш розуміти логіку JS, структуруєш свій код і навчаєшся писати чисто. Замість запам’ятовування синтаксису ти реально бачиш, як він працює у живих задачах, і це значно прискорює твій прогрес. JavaScript'еr

Як структурувати масштабований проект React: app/ → pages/ → features/ → shared/ JavaScript'еr

Колекція ефектів наведення на кнопки Кілька варіантів ефектів наведення для кнопок на вашому сайті. Реалізовано за допомогою SCSS. ⤷ Завантажити код JavaScript'еr

Дуже крута штука для вивчення типів у TypeScript: Візуальні типи Сайт зроблений максимально приємно: все інтерактивне, з навігацією за допомогою клавіатури (і навіть зі звуковими ефектами). Матеріал подається через 149 прикладів з прогресом і досягненнями, виходить майже як міні-курс у форматі playground'а Забираємо тут ✌️ JavaScript'еr

JavaScript і TypeScript мають широку сферу застосування — від веб- і мобільних застосунків до ігор та front- і back-end розробки. Опанувавши ці технології, ти зможеш розвиватися як frontend, backend або fullstack розробник, працювати у компанії чи на фрилансі. Приєднуйся до курсу Оснвои JavaScript/TypeScript від SoftServe Academy і отримай практичні навички: ти навчишся створювати динамічні вебсторінки, працювати з асинхронним програмуванням, розробляти серверні застосунки та використовувати TypeScript для надійної типізації коду. За прокомодом telegram10 — отримай 10% знижки на навчання. 🔥 cтарт навчання — 23 лютого.

Оптимізація SVG – короткий гайд для новачків Часто на сайтах зустрічаються SVG-зображення, які не оптимізовані належним чином: вони містять зайві групи, непотрібні атрибути та числа з величезним кількістю десятичних розрядів Лаура Калбаг з Penpot ділиться практичними порадами, як зробити SVG-файли меншими за розміром, але без видимої втрати якості – від базових прийомів до корисних автоматизованих інструментів Читайте тут JavaScript'еr

Спочатку давай уточнимо деталі реалізації JavaScript'еr

Підкреслення при наведенні курсора на елементи меню Ефект наведення курсора з плавним підкресленням і перефарбовуванням елементів меню. Реалізовано за допомогою SCSS. ⤷ Забрати код JavaScript'еr

🧩 Spread — копіюємо і об’єднуємо масиви та об’єкти Оператор spread (...) дозволяє створювати нові масиви або об’єкти на основі існуючих, не змінюючи старі. Це особливо корисно, коли треба додати елементи або властивості, не мутуючи оригінал. Приклади:

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4]; 
console.log(arr2); // [1, 2, 3, 4]

const obj1 = {x: 1};
const obj2 = {...obj1, y: 2};
console.log(obj2); // {x: 1, y: 2}

Spread робить код чистим і зрозумілим, дозволяє легко об’єднувати дані і швидко працювати з новими структурами без ризику випадково змінити старі. JavaScript'еr

Форма входу з плаваючим маркером і світловим кнопкою Форма для авторизації. Реалізовано за допомогою CSS. ⤷ Взяти код JavaScript'еr