Так, cамі по собі Signals синхронні, вони просто тримають значення і сповіщають підписників при зміні. А для асинхронності в Angular придумали Resource, який обгортає async-логіку в реактивний шар: завантажує дані, трекає статус (loading / error / success) і синхронно оновлює сигнал зі станом результату.

У React поки прямого аналога Resource немає, там або useEffect + useState/useReducer, або зовнішні штуки типу React Query чи Zustand

Так, у статті хотілось максимально спростити, але ваш поінт валідний!
хочеш «подешевше» — через namespace, хочеш «подорожче» — окремі кластери 🙂

Дякую за фітбек, врахую це для наступної статті!

Він був на момент написання цієї статті. Чомусь на зараз його прибрали з сайту...

Можу поділитися ще кількома порадами зі свого досвіду користування Pi-hole:

1. Забезпечте стабільне живлення.
Найкраще під’єднати Raspberry Pi до невеликого джерела безперебійного живлення (UPS), щоб він міг працювати навіть під час відключень електроенергії. Те саме стосується і роутера. Якщо Pi вимкнеться — разом із ним «ляже» ваш локальний DNS-сервер, і в результаті інтернет перестане працювати.

2. Виділіть Raspberry Pi лише для Pi-hole.
Ідеально, якщо на ньому буде працювати лише Pi-hole, без додаткових навантажень. Якщо ж на цій самій машині запущені ще й Docker-контейнери, торрент-клієнти, Plex, інші сервери тощо — усе це створює додаткове навантаження і може викликати затримки у роботі DNS або навіть повні зависання.

згадайте історію про Монтгомері і Роммеля, до його призначення німця немогли подолати 3 попередні командувачі. Фактор лідера завжди є. Хоча стратегічно, Монтгомері лише прискорив поразку...

Наприкінці я вже добряче підплавився і забув зробити return у функції render. Потім довго шукав, чому нічого не працює 😅 Але все ж — дякую всім, хто завітав! Це був мій перший досвід у такому форматі🙌

Я додам, що зараз навіть стек змінити важко, скажімо гіпотетично я хочу знайти проект на якомусь React, але ринок каже, у тебе є 5+ років досвіду на ньому? Немає!? Допобачення! І всім пофіг що я наприклад фронт розетки написав чи сільпо 🙂. А ви кажете залетіти з нуля.

в наступних статтях :)

Головна killer-фіча

standalone

— це можливість легко збирати різні в’юхи з самодостатніх UI-компонентів у будь-якому місці додатку. Коли все побудовано на standalone-компонентах, вам не потрібно тягнути модулі, думати про forRoot, прокидувати інпути а в середені все обмазувати *ngIf.

Наприклад, на сторінці А картка має виглядати одним чином, а на сторінці Б — інакше. Ви просто збираєте з різних UI-компонентів те, що потрібно саме в цьому контексті.

Саме для цього їх і запровадили.

В Angular також є можливість створювати Custom Elements. Ми скористались цим підходом для компонента вибору адреси: у флоу на Angular він використовується напряму як звичайний компонент, а для React-додатка ми збираємо його у вигляді Custom Element і вставляємо як веб-компонент.

Вибачаюсь. Якщо переглянеш приклад на Stackblitz, побачиш, що кнопки мають атрибути:

<button data-action="increment">Збільшити</button>  
<button data-action="changeText">Змінити текст</button>

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

За порєбріком зробили аналог Пікабу — схоже, називається Капібара. Це практично повний клон 1 в 1, але є нюанс — він повністю open source: і бекенд, і фронтенд. Будь-хто може завантажити код і підняти свій соцблог.

Можливо, як варіант, якщо ви теж викладете все на GitHub і напишете нормальну документацію, людям буде цікаво долучитися до розробки. Це реально може розкачати проєкт.

Мій шлях у фронтенді починався з чистого JavaScript. Згодом я відкрив для себе jQuery, як і багато хто на той час це був зручний інструмент для спрощення взаємодії з DOM.

Далі я зробив вибір на користь AngularJS на той момент один із найпопулярніших фреймворків.

Десь у 2015 я працював із PHP та Laravel, мені дуже імпонув підхід, чітке розділення, DI, шаблони, сервіси. І коли я почав шукати фреймворк для фронтенду, Angular 2+ став очевидним вибором, який повністю базувався на TypeScript. Відтоді вже майже десять років основна частина моїх проєктів реалізована саме на Angular.

На мою думку, якщо ви добре розумієте базові концепції на кшталт ООП, шаблонів проєктування, принципів DI то Angular буде для вас найбільш зрозумілим фреймворком.

Плюс зараз його нехіло так спростили, додали сигнали, це зараз мейнстрім, більшість інших фреймворків переводять свою реактивщину на них. Викинули модулі, тепер у вас також є підхід одного комопненту, завезли покращений control flow, де у шаблонах ви контролюєте, що і як буде відображатись завзядки @if/else/for. Також є SSR з коробки + додали адекватну гідрацію. Короче, спробуйте, не пожалкуєте :)

Якщо ж вам ближчий функціональний стиль, підхід «один файл один компонент», то мої симпатії тут на боці Vue. Він дуже вдало поєднує в собі філософію AngularJS та React, залишаючись при цьому простим і гнучким.

Щодо React — він беззаперечний лідер ринку, але особисто для мене менш зручний. JSX здається диким після Angular або Vue. Проте, якщо говорити про щось більш цілісне, то рішення на кшталт Next.js набагато більше схожі на повноцінний фреймворк і в них працювати значно приємніше, хоча там вже стільки всього накрутили, з серверними компонентами, екшенами, і тд :D

Написав універсальний memoized декоратор для TypeScript. Використовую в Angular схожий.
Він кешує результати методів і геттерів для уникнення повторних обчислень.

github.com/eurusik/memoized

Ахахаха, я програю цей спір )

Дуже крута стаття! Тепер хочу зробити все теж саме що і ти, тільки на Angular 🙃

пишеш все в Notion, а потім ctrl-C -> ctrl-V, я так зазвичай роблю :)

nextjs.org/...​-mutations#error-handling — в доке кажуть юзати ось такий підхід

'use server'
 
import { redirect } from 'next/navigation'
 
export async function createUser(prevState: any, formData: FormData) {
  const res = await fetch('https://...')
  const json = await res.json()
 
  if (!res.ok) {
    return { message: 'Please enter a valid email' }
  }
 
  redirect('/dashboard')
}

'use client'
 
import { useActionState } from 'react'
import { createUser } from '@/app/actions'
 
const initialState = {
  message: '',
}
 
export function Signup() {
  const [state, formAction, pending] = useActionState(createUser, initialState)
 
  return (
    <form action={formAction}>
      <label htmlFor="email">Email</label>
      <input type="text" id="email" name="email" required />
      {/* ... */}
      <p aria-live="polite">{state?.message}</p>
      <button disabled={pending}>Sign up</button>
    </form>
  )
}