JavaScript'er

Як забезпечуєш відображення сторінок у старих/обмежених браузерах? - Використання прогресивного покращення; - Підключення polyfill-ів; - Перевірка @supports або умовні коментарі (для IE); - Мінімізація сучасних CSS-ефектів; - Використання більш сумісних фолбеків (наприклад, display: block замість flex). JavaScript'ер

Класика JavaScript'ер

Ще один чудовий розбір SVG від Джоша Комо. Цього разу він детально розбирає, що і як працює всередині <path d="..."\/>, чим відрізняються M від m, L від l, чим кубічні криві Безьє відрізняються від квадратичних і як коректно малювати дуги різних форм Всередині наочні візуалізації, інтерактиви та зрозуміла теорія. Читаємо тут 👍 JavaScript'ер

Порада щодо JS Найпростіший спосіб отримувати/встановлювати query-параметри Можна використовувати властивість searchParams (екземпляр URLSearchParams) об'єкта URL, щоб отримувати та задавати query-параметри URL JavaScript'ер

Краще б він тільки свій IP спалив, а то він злив IP всіх нас 👀 JavaScript'ер

Шпаргалка по CSS JavaScript'ер

Анімація іконки гамбургера 6 варіантів анімації для кнопки, яка відкриває та закриває мобільне меню. Реалізовано за допомогою CSS. ⤷ Забрати код Ти не знаєш JavaScript

Excalidraw – це графічний редактор для створення ескізів і діаграм, орієнтований на простоту та швидкість роботи

Деякі особливості Excalidraw: — Стиль рукописного малюнка: Діаграми та малюнки виглядають так, ніби їх намалювали від руки. — Спільна робота в реальному часі: Кілька користувачів можуть одночасно працювати над одним малюнком. — Простий та інтуїтивно зрозумілий інтерфейс: Excalidraw розроблений так, щоб користувачі могли швидко і легко створювати діаграми. — Фокус на конфіденційність: Є можливість зберігати малюнки на пристрої або безпечно ділитися ними з іншими. — Кросплатформеність: Веб-сервіс доступний з будь-якого пристрою з веб-браузером. — Варіанти експорту: Користувачі можуть експортувати малюнки у різні формати, включно з PNG, SVG та файлами Excalidraw для подальшого редагування або обміну.

Мови: TypeScript (94.0%), SCSS (2.5%), MDX (2.0%), ... ⭐️ Star 106k https://github.com/excalidraw/excalidraw JavaScript'ер

Порада з CSS: Одиниця виміру turn Іноді простіше задати обертання за допомогою одиниці turn замість deg, особливо коли потрібно вказати значення більше 360 градусів (1 turn = 360 deg) JavaScript'ер

База JavaScript'ер

💻 TypeScript — одна з найпопулярніших мов програмування в українському IT, а її частка зростає як у фронтенд-розробці, так і в бекенді та фулстеку. Основна особливість — із TypeScript код стає передбачуваним і контрольованим. Завдяки типізації кількість помилок ще до запуску зменшується, а складні системи легше підтримувати й масштабувати. Навчіться писати стабільний код для Frontend-, Backend- і Fullstack-проєктів — на курсі «TypeScript Development». Протягом 14 занять ви навчитеся: ❯❯ правильно типізувати Frontend і Backend (React, Node.js) ❯❯ контролювати асинхронний код і запити ❯❯ впроваджувати Generics і складну типізацію без дублювання ❯❯ будувати стабільні системи для командної роботи 🔥 У фіналі — створите власний Fullstack-застосунок із drag’n’drop-механікою, API та базою даних у портфоліо. Лектор — Ігор Постриган, Senior Software Engineer у N-iX. Він має понад 9 років комерційного досвіду у Frontend- та Fullstack-розробці. Старт: 23 вересня Деталі, програма та реєстрація ⬅️

крута карта при наведенні Ефект наведення на картку з плавним розмиванням зображення. Реалізовано за допомогою CSS. ⤷ Забрати код Ти не знаєш JavaScript

Які методи спілкування є в протоколі HTTP? - GET — отримання даних; - POST — відправка/створення; - PUT — оновлення; - PATCH — часткове оновлення; - DELETE — видалення; - OPTIONS, HEAD, CONNECT, TRACE — допоміжні методи. JavaScript'ер

Коли ви не чіпаєте код протягом місяця JavaScript'ер

Натрапив на класний плагін для Tailwind з >70 готовими анімаціями + туторіал, як його збирали. Без конфігу, просто ставиш, підключаєш плагін і використовуєш класи типу animate-fade-in. Можна кастомізувати тривалість, затримку тощо. Сайт: tailwindcss-animations.vercel.app Писали плагін у лайві — є туторіал на YouTube. Відмінний спосіб розібратися, як працює Tailwind зсередини. Адже класи на кшталт pl-0, w-full і т.п. теж використовують ту ж систему, про яку говорять у відео JavaScript'ер

CSS-функції вже тут 👎 Тепер можна робити ось так:

@function --alpha(--color, --opacity) {
  result: rgb(from var(--color) r g b / var(--opacity));
}

div {
  background: --alpha(red, 80%);
}

("вже тут" = з’явилися у останній стабільній версії Chrome 139) На даний момент Chrome є єдиним браузером, у якому вже реалізована ця функція, але вона пройшла етап драфту CSSWG Ось хороша стаття з прикладами використання: 5 корисних CSS-функцій з використанням нового правила @function JavaScript'ер