Pixel Perfect - це міф для замовників? 🫣

Деякі замовники хочуть від розробників максимальної точності кожного пікселя при перетворенні дизайну в реальний сайт 🔄 Зазвичай це бажання зʼявляється від прочитання статті про Pixel Perfect (PP) або від знайомих 😁

Але скільки ж є вагомих підстав для того, щоб вмовити замовника відмовитися від Pixel Perfect! 😱

1️⃣ Час

Звичайно, найголовніше - це час. При імплементації PP ви витратите набагато більше свого часу на відтворення дизайну, а потім - на будь-яку, навіть дрібʼязкову, переробку. А ваш час - це гроші, які сплачує замовник. Кому від цього краще? 🤔

2️⃣ Екрани

Дизайнери малюють веб-сайти, спираючись на декілька екранів: ноутбук, планшет та мобільний (хоча й таке іноді буває розкішшю). Але згадайте, яка насправді існує безліч варіацій екранів різних девайсів. А потім врахуйте, що кожен з екранів може перевертатися, ділитися навпіл і бути відкритим НЕ на весь екран 😏

3️⃣ Шрифти

Кожен браузер може рендерити шрифти по різному. Ви можете зробити ідеальний PP у себе, потім цей сайт відкриє замовник на іншій ОС або іншому моніторі і шрифт буде виглядати інакше 🥲

4️⃣ Відносні одиниці

Кожен PP вимагає дотримуватися всіх розмірів в пікселях, що абсолютно незручно при написанні стилей. Простіше написати один раз розмір у відносних одиницях, який сам буде підлаштовуватися під різні екрани, ніж створити 5 media query під різні випадки.

5️⃣ Figma

Дуже багато початківців сприймають фігму як еталон дизайну. Починають копіювати звідти всі розміри, кольори тощо, а потім дивуються, що якось не так виглядає 😁 Фігма вам пропонує розміри, а не змушує їх використовувати.
На неї треба орієнтуватися лише візуально та брати всі розміри, перевіряючи кожен.

Скільки ж болю завдав Pixel Perfect всім розробникам 😥

@wannabe_javascript #PixelPerfect

HTMX дозволяє писати інтерактивний фронтенд без JavaScript? 🤨

Next та Nuxt активно розробляють серверні компоненти. Головна їх ціль - відрендеритись на сервері та віддати готовий HTML на клієнт. Але звичайний HTML вміє надсилати тільки GET чи POST запити та не має інтерактивності.

❗️Саме для таких цілей був створений HTMX. Його основна задача - відмовитись від JS, але мати інтерактивність на клієнті й надалі з великою кількістю функціоналу.

HTMX підключається одним тегом script до вашого HTML і все, він працює. Ніяких бандлерів та всього іншого. При підключенні HTMX сканує весь HTML на наявність атрибутів, які він розуміє.

🔖 hx-get/post/patch/put/delete

Ви можете вказати будь-якому елементу, на який ендпоінт зробити запит при кліці від юзера, наприклад: <div hx-delete="/users/1">

🔖 hx-trigger

А якщо треба робити запит не на клік? 🤨 Тоді додайте атрибут hx-trigger з різними варіантами тригерів, як-от load, mouseenter, keyup або навіть динамічні every 2s, delay:1s тощо.

🔖 hx-target

Головний сенс цих AJAX атрибутів - робити запит та отримувати дані. Але де тут інтерактивність? 🤔 Сенс запитів в тому, щоб отримати від серверу HTML, який буде замінений в тому місці, де ви вкажете. Для цього потрібен hx-target.

За замовчуванням HTML від серверу буде замінений на тому елементі, де був зроблений реквест. Але це легко змінити, вказавши селектор всередину атрибута hx-target.

☄️ Та багато-багато іншого..

Окрім цього всього, HTMX має свої події, вміє працювати з вебсокетами, має логінг, анімації тощо.

Технологія дуже цікава, але поки що ми не бачимо її майбутнього, так як є дуже багато обмежень при додаванні інтерактивності 😢

Ось приклади для ознайомлення.

@wannabe_javascript #htmx

esbuild, в чому твоя фішка? 🤔

Нещодавно ми проводили опитування “який JavaScript бандлер є найпопулярнішим по кількості скачувань?” і несподівано для всіх, і нас також, лідером став esbuild з 27.5 мільйонами завантаженнями на тиждень 😱

⭐️ Чому він такий популярний?

Звичайно, найголовніша перевага в esbuild - це його швидкість. Він показує просто неймовірні результати в демо на сайті самого esbuild 🔥

Наприклад, команда esbuild скопіювала бібліотеку three.js 10 разів і протестувала швидкість Webpack, Rollup та Parcel. За результатами:

- Webpack справився за 41 с
- Rollup - за 34 с
- Parcel - за 15 с
- esbuild - за 0.4 с 🤯

⭐️ Як вдалося досягнути такої швидкості?

esbuild був написаний мовою Go, яка сама по собі вже є дуже швидкою. Також при створенні білда esbuild компілює файли паралельно, використовуючи всі доступні ядра процесора.

⭐️ Що підтримує з коробки?

Використовуючи тільки CLI, ви можете білдити CSS, JS, TS та навіть JSX. Звичайно, також є вбудований дев сервер та підтримка ESM та CommonJS модулів.

⭐️ Які недоліки?

Хоча й завантажень в esbuild найбільше, про нього й досі мало хто чув. Чому? Вся справа в його API, адже воно не має всіх звичних для нас речей, наприклад, того ж alias resolver. Тому його можна брати як основу, але з урахуванням, що треба буде щось під себе доробити 🤫

За таким принципом і був побудований Vite, бо він має все, до чого ми звикли, використовуючи під капотом Rollup. І, як вказано на сайті самого Vite, вони не використовують esbuild як бандлер саме тому, що їх API не сумісне з esbuild 😢

Але скоро вийде Rolldown як заміна Rollup, і Vite стане набагато швидше 😎

@wannabe_javascript #esbuild

Досить болю від налаштування Eslint та Prettier! 💪

Впевнені, у вас були складнощі з налаштуванням Eslint або Prettier, чи навіть з обома одночасно. Наприклад, ціла купа різних конфігів для Eslint, які можуть конфліктувати з Prettier. Або Prettier, який вміє форматувати за базовими правилами, які йдуть всупереч правилам Eslint. Знайомо? 😒

Чому тоді ми використовуємо Eslint та Prettier в одному проєкті? 🤔

Eslint відповідає за велику кількість правил, таких як: імпорти, типи даних, спрощення логіки тощо. А Prettier у свою чергу просто вміє форматувати з мінімальними налаштуваннями.

Ось вам декілька порад, які допоможуть використовувати тільки один Eslint та позбутися купи конфігів:

✍️ Видалити Prettier 😄
✍️ Встановити @antfu/eslint-config
✍️ Налаштувати formatOnSave, використовуючи Eslint

Звісно, вам може не сподобатися конфіг від antfu. Нам також знадобився час на звикання, бо він відрізняється від звичного для нас стайлгайду 🤓

Але ми наполегливо рекомендуємо встановити конфіг від antfu у ваші проєкти з наступних причин:

🤝 Легкість налаштування:

// eslint.config.ts
export default antfu()

Тим самим ви позбудетеся проблем з налаштуванням, оновленням та конфліктами конфігів.

🤝 Він підтримує з коробки TypeScript, React, Vue, Astro, тести і ще багато іншого

🤝 Якщо вам треба все ж таки щось додати, то виглядає це наступним чином:

export default antfu(
  {},
  ...compat.extends('plugin:tailwindcss/recommended'),
)

Тож, обов'язково спробуйте, а якщо не сподобається, завжди можна зробити git revert 😉

@wannabe_javascript #eslint #antfu

Дякуємо, все зрозуміло 🫡

@wannabe_javascript

Навіщо нам потрібен ще один реєстр пакетів під назвою JSR? 🧐

Всі ми використовуємо npm, який встановлюється автоматично разом з Node.js, для додавання пакетів у проєкти. Але скільки всього треба врахувати під час паблішингу пакетів в npm? 🤨

👎 Скомпілювати TS у JS
👎 Потім цей самий JS згенерувати для ESM та CJM
👎 Згенерувати .d.ts типи
👎 Написати примітивну документацію

Саме ці проблеми й вирішує JSR. Ви можете запаблішити пакет тільки в TypeScript і забути про все інше.

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

// jsr.json
{
  "name": "wannabe-school",
  "version": "1.0.0",
  "exports": "index.ts"
}

// index.ts
console.log('Hello, Wannabe!');

І після запуску команди npx jsr publish ваш пакет буде доступний в реєстрі JSR. Але це не означає, що ви повинні відмовитися від npm, JSR працює разом з ним 😉

Поки під питанням, чи зможе цей реєстр триматися “на плаву”. Бо не дивлячись на реально крутий функціонал, для розробників open-source проєктів це може бути ускладненням, оскільки більшість людей використовують npm, а підтримувати декілька реєстрів нікому не хочеться.

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

А яка у вас думка стосовно JSR? 🤔

@wannabe_javascript #jsr #npm

Де взяти типові хуки для проєкту? 😏

Кожного разу ми пишемо купу однакових хуків з проєкту в проєкт. Всім знайомі debounce, dark mode, clipboard, window size тощо. Так зʼявилися бібліотеки, які налічують неймовірну кількість хуків, які можуть бути корисні в будь-якому проєкті. Розглянемо деякі з них.

😎 React Use (40.2K ⭐️)

Найбільша та найпопулярніша бібліотека для React, яка налічує близько 110 хуків. Серед них є як усі базові, наприклад, useDebounce, useLocalStorage, useWindowSize, так і унікальні, як-от useFullscreen чи useGetSet.

😎 useHooks (8,5K ⭐️)

Ще одна бібліотека для React, яка налічує майже 40 різних хуків. Також має всі базові та деякі унікальні хуки. Сама бібліотека зроблена дуже просто, так як написана всього в одному файлі.

😎 useHooks.ts (5.5K ⭐️)

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

😎 VueUse (18.5K ⭐️)

Бібліотека для Vue, яка налічує близько 140 composable функцій. Окрім функцій, також пропонує директиви та компоненти. Налічує як всі базові, так і деякі унікальні composable функції, як-от useDevicePixelRatio або useTextSelection.

Всі ці бібліотеки можуть в рази спростити життя. Головне уважно подивитися, які в них є хуки або composables, і вже наступного разу не треба буде винаходити велосипед 🤓

@wannabe_javascript #react #vue #hooks #composables

Друзі, певний час ми були відсутні у соцмережах, оскільки всі наші сили були направлені на розробку платформи. Але ми готові повертатися, і не з «пустими руками», ми раді анонсувати, що наш сайт wannabe.school офіційно зарелізився! 🥳

Ми вважаємо його нашою гордістю, оскільки він розроблений власноруч нашим співзасновником та експертом Валерієм Стрільцем без сторонньої допомоги. А також цей сайт - обличчя школи, бо ми навчаємо тому, що самі вміємо та відкрито це демонструємо.

Ми будемо продовжувати створювати корисний контент у Телеграм-каналі та дублювати пости в блог на сайті в розширеному форматі 👌Функціонала Телеграму не завжди вистачає, аби розкрити тему повністю, тому тепер з цією задачею будуть справлятися статті на нашому сайті, щоб ви отримували ще більше корисної інформації.

Наразі сайт у версії Beta і ми будемо ділитися із вами усіма етапами, які він буде проходити 👩‍💻

Будемо раді вашому фідбеку по будь-яким багам, які ви зможете знайти на сайті. Радо їх приймемо у будь-який зручний для вас спосіб: дірект в Інстаграм, Телеграм, e-mail форма зворотного звʼязку на сайті тощо.

А тепер, хутчіш на сайт - wannabe.school 🥳

Якщо цікаво дізнатися деталі імплементації сайту, обов'язково дайте знати в коментарях або в нашому ком'юніті @wannabe_community 🤝

@wannabe_javascript

Друзі, разом із сайтом ми анонсуємо наш перший навчальний продукт - бібліотеку лекцій 🥳

Цей формат має свої переваги:

• миттєвий доступ до матеріалу: лекція стає доступною до перегляду одразу після покупки
• економія часу: кожна лекція - це концентрат інформації, яка викладається протягом 60-90 хвилин
• різноманіття тем: бібліотека буде містити лекції з різних тем, що дає можливість обирати та купляти тільки релевантні відеоматеріали

А щоб ви самостійно у цьому переконалися, на сайті вже доступна до перегляду перша лекція - Загальні основи React та нововведення версії 19 🚀

Що ми розглянемо у лекції:

• основний функціонал React
• нововведення версії 19
• хуки React, як-от useState і useEffect, та функції, як, наприклад, forwardRef і createContext
• використання React Router, TailwindCSS, TanStack Query тощо

А більше деталей по наповненню лекції - на нашому сайті.

Поглиблюйте свої знання разом із Wannabe School 😎

@wannabe_javascript #бібліотеки

Починаючи проєкт на React або Vue, кожного разу виникає питання, куди складати файли, бо у нас може бути багато компонентів, утилітарних функцій, стилів тощо.

Із варіантів архітектури проєкту частіше за все ми обираємо серед:

🔥Пласкої архітектури
🔥Модульної архітектури
🔥Feature Sliced Design
🔥Мікрофронтендів

Давайте розберемо плюси та мінуси кожної з них, та визначимося, для яких проєктів їх краще обирати.

@wannabe_javascript #frontend