Всім привіт!

Нещодавно мені прилетіла задача, винюхати щось таке, на чому можна було б почати новий проект. Взагалі вибір був з двох - Next.js та Remix. Якщо хтось їх ще не зустрічав - це фреймворки для написання React додатків. Вони дозволяють рендерити сторінки на сервері, що робить сайт швидшим, та мають ще ряд переваг. Так як з Next.js я вже знайомий, головна ціль була зрозуміти чи буде Remix кращим вибором.

Сам фреймворк створений розробниками react-router. Також він дуже швидко білдиться, так як не використовує бандлерів, по типу, webpack чи rollup. Взагалі його творці повернулись до основ web-додатків. Самі запити відбуваються на стороні сервера, а клієнт робить їх за допомогою старих добрих форм. Якщо слідувати всім принципам фреймворку, то на клієнті можна обійтись і без підтримки Javascript. Але в свою чергу, це змушує вас робити все незручним (на мою думку) способом.

Моя думка сходиться з думкою автора відео нижче - Remix більше підходить для додатків з відображенням даних, наприклад, певної аналітики. Тому зараз моїм вибором став Next.js. В додачу виходу нової версії React, думаю, фреймворки теж отримають значні покращення.

В будь-якому випадку буде цікаво почути і вашу думку!

Дивитись відео

Читати документацію

#article

React v18.0

Ті хто слідкують за оновленнями знають що не так давно вийшла нова версія React.

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

1. Concurrent mode. Це такий собі механізм який може одночасно готувати кілька рендерів для вашої компоненти.

2. Auto-batching. Колись, якщо ви в функції робили два setState - React робив два рендера, тепер ж він зробить тільки один.

3. Transitions. Тепер ви можете функцією або хуком помічати деякі задачі, які не є критичними. Як приклад це фільтрування користувачем даних. Поле для вводу має завжди швидко змінювати свій стан, а от саме фільтрування може зайняти якийсь час.

4. Ще кілька нових хуків, такі як useId та useDefferedValue.

Особисто я думаю, що оновлення це майже завжди дуже добре. Щодо цього конкретно, то було багато зроблено на покращення продуктивності. Не знаю тільки чи будуть активно використовуватись transition чи useId, useDefferedValue.

Читати статтю

#article

Навігація

#article - ділимось цікавими статтями
#experience - розповідаємо все з нашого досвіду
#tips - даємо поради, яких не просили
#todo - пушимо робити щось корисне
#interview - розбираємо питання на інтерв'ю будь-якої складності (кожного вівторка)
#quiz - вирішуємо tricky завдання (кожної середи)
#library - рекомендуємо бібліотеки, які неодноразово нас рятували
#news - пишемо про події в сфері ІТ, які не залишать вас байдужими
#english_friday - обговорюємо цікаві теми англійською (кожну п'ятницю)
#how_to - ділимось класно реалізованими кейсами
#localhost - щось на особистому

Infinite scroll

Infinite scroll - це техніка, яка автоматично додає наступну сторінку, коли користувач прокручує вміст. Якщо по простому, то уявіть, що у вас є список покемонів. І коли ви прокручуєте цей список до кінця, то вам підгружаються ще дані. Або хто сидить в TikTok, знає, що можна вічно скролити відосіки - це і є infinity scroll.

Зайшли хорошу статтю, яка показує як можна імплементувати цю техніку різними способами в React - читати статтю

Зберігайте 💛

#article

Всім привіт! Хотіли почати тиждень з чогось нескладного. Нескладне - значить невелике, а невелике - це розмір екрану в смартфорнах (хоча вони чим далі, тим більші).

Коли ви відкриваєте веб-сайт на мобілці, браузер хоче дозволити вам бачити чим-побільше і може приховувати пошуковий рядок. Також буває таке, що ваш сайт має зайняти всю висоту екрану і НЕ СКРОЛИТИСЬ. Тут і зʼявляються проблеми на мобілці.

Тому, щоб було нескладно, нам круті розробники на Medium написали статтю, яка розкаже, що можна з цим зробити. З радістю ділимося статтею і бажаємо вам продуктивного старту тижня! 💛

Читати статтю

#article

Duck typing 🦆

Хто ми? - JS розробники.
Що ми хочемо? - Зберігати в одній змінній булеани, стрічки та функції.
~ Мій розумний знайомий

Сьогодні не про типізацію в JS, а про duck typing (качину типізацію, якщо українською) у програмуванні. Коротко, це можна описати так: "Якщо воно виглядає як качка, плаває як качка і крякає як качка - це напевно і є качка".

Реальний кейс: уявіть, що у вас завантажуються дані з якогось джерела (бекенд, файл тощо). Хай це буде Користувач (User) з полями імʼя (firstName) і прізвища (lastName). І вам для достовірності потрібно перевірити чи справді цей обʼєкт є Користувачем. Тому у вас зʼявиться схожа умова:

‘firstName’ in user && ‘lastName’ in user

Помітили щось схоже? Якщо є імʼя і прізвище, то це - Користувач. А насправді там може бути ще багато інших полів. І якщо піти далі, то можна додавати перевірки і на інші поля. Але принцип перевірки не зміниться - на основі властивостей обʼєкта, ми будемо асоціювати його з певним типом. Це і є duck typing.

Трішки детальніше можете ознайомитись тут - читати статтю
А якщо хтось добре знайомий з Typescript, можете також глянути Type Predicates - читати статтю

А які у вас були випадки використання такої типізації?

#article

Reduce в JS

[🍔,🍟,🍕,🍿].reduce(eat)
>> 💩

Обіцяли - виконуємо. Тому, що ж з себе представляє метод reduce і з чим його їсти?

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

Роботу цього методу я хотів би показати на різних прикладах, тому нижче прикріпляю посилання на свій же пост в Notion. Також чекаємо відгуків, про такий формат статтей.

До речі, у статті можна залишати свої коментарі 😉

Читати статтю

#article

Що таке ORM?

Або як працювати з базою даних, не використовуючи прямих запитів до неї.

ORM - це технологія, підхід, який звʼязує типи обʼєктів між різними системами. Найчастіше, це саме про звʼязок між базою даних та мовою програмування. Техніка, що доволяє маніпулювати базою даних, використовуючи обʼєктно-орієнтований підхід. В такому випадку утворюється така собі “віртуальна база даних”.

Без використання ORM пошук жовтого покемона виглядав би десь отак:

data = query(“SELECT pokemon FROM pokemon_table WHERE color = ‘Yellow’”)
while (pokemon = data.next()) {
do_something_with(pokemon)
}

А з використанням ORM все буде трохи простіше:

pokemons = Pokemon.query(color=”yellow”)

Помітили, що немає самого SQL-запиту?

Все, що вам потрібно зробити - це створити клас, який опише певну сутність в базі даних. А тоді сама бібліотека ORM надасть вам інтерфейс для роботи з базою.

Безумовно є ряд переваг і недоліків. І от саме ця простота в користуванні, відсутність повторень в написанні запитів виглядає круто.

В кожній мові реалізовані свої бібліотеки, з тих що мені знайомі це:
- JS - TypeORM, Sequalize, Prisma (яка зараз досить сильно набрала популярність);
- Python - Django ORM, SQLAlchemy;
- C# - Entity Framework;
- Go - GORM;
… і багато інших.

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

Більше можете почитати тут - читати коментар

#article

🚀 Нові властивості CSS

Не так давно вийшло оновлення css, яке має нові фічі - container і :has(). Обидва вже підтримуються в Chrome 105 і в Safari 16 (якщо вірити CanIUse).

Container запити дозволяють стилізувати елементи в залежності від розміру батьківського елемента (те саме, що і media query, але в залежності від розміру батьківського елемента, а не екрану).

:has() - це псевдоклас, який відображає елемент у тому випадку, якщо будь-який із селекторів, переданий як параметр, відповідає хоча б одному елементу.

Читати більше

#article

Смакота!

Code Smells - виберіть найкращий переклад - код з запашком; код, що погано пахне; смердючий код.

Чому запах? Тому що на вигляд код виглядає нормально, але має ознаки, які вказують, що десь глибоко є певні проблеми. Вони і створюють цей запах. Code Smells може мати різні ознаки, але зазвичай схожий результат - складність ефективно розвивати систему, використовування можливостей ООП (або інших підходів) та складний для розуміння код.

Наявність таких запахів означає необхідність у рефакторингу (але про нього вже наступного разу).

Більше про Code Smells та їх приклади можна почитати у статті нижче.

Читати статтю

Хоча б гляньте підзаголовок у цій статті, він того вартий :)

#article

Scroll to top

Сьогодні в чат прилетіло круте питання: як після рендеру контенту (після так би мовити "переходу" з одної сторінки на іншу) перенести користувача на початок сторінки? Адже якщо залишити все як є, користувач опиняється на тому ж місці, на якому була відкрита попередня сторінка. Наприклад, у вас є футер з лінками. І після того як ви натиснули на будь-який лінк, у вас відкривається нова сторінка з фокусом внизу, де і був футер (якщо це звичайно посилання на сторінку вашого сайту). Проект на React і використовується React Router.

Це досить поширена проблема, тому ділимось досить хорошим рішенням - читати статтю. АЛЕ це рішення підходить лише для тих, хто використовує React Router п’ятої версії. А для тих хто любить тестувати щось нове - ось бета рішення для шостої версії React Router - читати статтю.

Бажаємо вам продуктивного тижня! 💛

#article

Що таке one-liner?

Чим менше коду - тим краще

One-liner - це короткий однострічковий код. Якщо при використанні даного підходу не втрачається простота і читабельність, то думаю, що це класне і лаконічне рішення. На Medium знайшли статтю, в якій ви можете знайти для себе кілька хороших прикладів.

Також додаємо один від себе, який досить часто використовуємо в роботі:

const fullName = (...names: string[]) => names.filter(Boolean).join(' ');

А своїм корисним one-liner діліться з нами в коментарях!

Читати статтю

#article

12-factor application

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

Застосунок 12-ти факторів - це методологія для створення веб-застосунків, яка описує фактори, що впливають на масштабованість, переносимість та можливість розгортання на хмарних платформах, або просто ті, які зможуть значно полегшити вам життя та розробку.

Давайте глянемо на декілька з них:

- оголошення та ізоляція залежностей - всі залежності вашого застосунку мають бути описані (package.json, Pipfile) для того, щоб можна було з легкістю зрозуміти, що потрібно встановити, та мають бути ізольованими (node_modules/, virtualenv).
- конфігурація - налаштування, що можуть змінюватись для різних середовищ, мають перебувати саме в змінних оточення. Щоб було простіше, згадайте .env файли, process.env або os.getenv.
- dev/prod паритет - застосунок проектується для Continuous Deployment, отже потрібно мінімізувати різницю між dev та prod середовищами. Завдяки цьому, ви зможете побачити однакову поведінку при розробці та в релізі, тому зможете релізитись хоч щогодини.

Як не дивно, там є ще 9 правил (бо всього 12), тому переходьте за посиланням і дивіться повний опис.

Читати документацію

Звісно, буває нелегко дотримуватись багатьох правил. Дану методологію, наприклад, часто критикують через її заточеність під Heroku (саме розробники платформи Heroku описали правила 12-factor додатку).

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

#article

❗️До кінця розіграшу залишилось 11 днів - доєднатись

SemVer + CHANGELOG

Чи помічали ви коли-небудь "нотатки", коли оновлювали додаток в App Store чи Play Market? Часто там можна побачити щось таке, як "Bug Fixes", або ж зміни, що були додані в новій версії, описані людською мовою. Такі деталі зберігаються в файлику CHANGELOG, в якому від версії до версії описано, що ж було додано, змінено чи видалено.

До речі, якщо говорити про самі версії, там зазвичай є три числа, записаних через крапку. Коли і як їх потрібно змінювати? Тут рекомендуємо коротко переглянути такий підхід як Семантичне Версіонування (SemVer).

Прикріпляємо для вас документації/статті українською мовою:

Читати про CHANGELOG
Читати про SemVer

#article

Advanced VS Code Shortcuts

Працюєш у VS Code? Маємо для вас дещо корисне! 🤩

Ні для кого не секрет, що робота за допомогою комбінацій клавіш на клавіатурі набагато швидша, ніж за допомогою миші.

Тому знайшли 2 статті (2 частини), де показано на детальних прикладах використання крутих шорткатів. Деякі для нас добре відомі і ми постійно їх використовуємо, а деякі ми побачили вперше, але вже активно практикуємо в роботі!

👉 Читати частину 1
👉 Читати частину 2

Зберігайте і, найголовніше, використовуйте! 💛

#article

APIs for your project

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

Хочемо поділитися з вами статтею з списком відкритих API, з яких ви можете почерпнути трохи натхнення та знайти ідею для власного проекту.

👉 Читати статтю

#article

ChatGPT Extensions

Всі ми вже чули, що минулого тижня ChatGPT став доступним в Україні! 🎉

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

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

👉 Читати статтю

#article

http.dev 💌

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

👉 Відкрити посилання

А щоб було трішки веселіше, ділимося з вами ресурсами, на яких ви зможете знайти різні HTTP-статуси ілюстровані картинками з котиками та собачками 🐱🐶 Вони ну прям дууужеее смішні!

👉 HTTP Cat
👉 HTTP Dog
👉 HTTP Dog 2

#article

CLI Guidlines 🦮

Якщо ви будуєте свою CLI, то вам теж треба продумати хороший UX. Щоб користувачам було просто і зручно користуватись вашим застосунком, необхідно дотримуватись певних стандартів та правил. Сьогодні ділимось з вами списком настанов та найкращих практик щодо побудови свого CLI.

👉 Відкрити посилання

#article

Як додати перевірку свого коду на GitHub Actions? 🌩️

Припустимо, що ваш застосунок написаний на JavaScript. Якщо ж ви використовуєте іншу мову, можете теж використовувати цей підхід, потрібно буде лише замінити скрипт перевірки. Отож, уявіть себе девопсом yaml-розробником і почнімо.

Власне, перед початком налаштовування GitHub Action ми зазвичай робимо ще одну річ - додаємо власний скрипт в package.json, який трохи спростить використання і запуск команди. Найчастіше ми додаємо там перевірку форматування через prettier та статичний аналіз з допомогою eslint та tsc. Виглядає це приблизно отак:

"scripts": {
  "check": "prettier --check . && eslint . && tsc --noEmit"
}

Для початку в корені свого проєкту потрібно створити директорію .github, всередині якої ще одну з назвою workflows. Тут ми і будемо розміщувати свій файл конфігурації. Створимо цей файл і дамо йому назву check.yml.

Якщо ви не знайомі з YAML, це як JSON на Python. Головне слідкуйте за відступами.

Почнемо з імені, додайте у файл:

name: Run web check

Тепер треба прописати, коли ж запускати цей екшн. Дозволимо запускати його ручками та будемо автоматично запускати його при будь-якому пуші.

on:
  workflow_dispatch: # вручну на GitHub
  push: # при push в репозиторій

Почнімо ж нарешті описувати кроки перевірок. Створимо job з іменем check. Запускати це все ми будемо на останній ubuntu, а першим кроком додамо клонування вашого репозиторію.

jobs:
  check:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

Отож, на цій машині вже є наш репозиторій. А на ubuntu одразу встановлений Node.js? Не знаємо, тому краще встановити його. На всяк випадок вкажемо версію Node.js. А ще, GitHub сам вміє кешувати модулі Node.js, тому скажемо йому робити це також.

      - name: Setup Node.js 20
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'

Ну тепер Node.js точно є, але немає node_modules. Ну це вже дуже просто, всі ми знаємо потрібну команду.

      - name: Install dependencies
        run: npm install

Нарешті, все готово, залишилось тільки запустити нашу перевірку. Оскільки ми вже підготували потрібний скрипт, просто запустимо його.

      - name: Run check
        run: npm run check

Усе це разом, а також з невеличким налаштуванням pnpm, concurrency, strategy та монорепо (Node.js застосунок знаходиться не в корені проєкту), можна знайти за посиланням нижче.
👉 Відкрити файл

Щоб більше почитати про GitHub Actions використовуйте посилання внизу. А від @MatiGreen чекаємо повідомлення про те, як зробити те саме на GitLab 😉
👉 Відкрити посилання

#article