Add new posts

src/css/main.css

@@ -1327,6 +1327,7 @@ html[dir=rtl] select.form-control:not([multiple]):not([size]) {
   --cone-base-color-marker: hsl(194, 85%, 56%);
   --cone-base-color-primary: hsl(194, 85%, 56%);
   --cone-base-color-secondary: hsl(326, 100%, 65%);
+  --cone-base-color-strong: hsl(0, 0%, 95%);
   --cone-base-color-text: hsl(0, 0%, 90%);
 }
 
@@ -1671,9 +1672,9 @@ html[dir=rtl] select.form-control:not([multiple]):not([size]) {
   justify-content: center;
 }
 .post-heading__title {
-  font-size: clamp(2.25rem, 5vw + 1rem, 4.5rem);
+  font-size: clamp(1.75rem, 5vw + 1rem, 3.5rem);
   margin-block: 0;
-  max-inline-size: 70rem;
+  max-inline-size: 60rem;
   text-wrap: balance;
 }
 .post-heading__meta {
@@ -2485,10 +2486,10 @@ html[dir=rtl] select.form-control:not([multiple]):not([size]) {
   --size: 2.25rem;
   align-items: center;
   background-color: var(--cone-base-color-tertiary);
+  block-size: var(--size);
   border-radius: var(--cone-border-radius-sm);
   color: var(--cone-base-color-heading);
   display: flex;
-  block-size: var(--size);
   flex-shrink: 0;
   inline-size: var(--size);
   justify-content: center;
@@ -2745,9 +2746,9 @@ html[dir=rtl] select.form-control:not([multiple]):not([size]) {
 
 .l-step__inner {
   --column: 1;
-  display: grid;
   background-color: var(--cone-highlighted-color-background);
   border-radius: var(--cone-border-radius-xl);
+  display: grid;
   gap: clamp(1.5rem, 5vw, 3rem);
   grid-template-columns: repeat(var(--column), minmax(0, 1fr));
   padding: calc(var(--cone-section-gap) / 1.25) calc(var(--cone-section-gap) / 2);

src/hu/posts/a-kodot-a-weben-frissiteni-kell-legyen-az-weboldal-vagy-alkalmazas.md

@@ -0,0 +1,49 @@
+---
+title: "A kódot a weben frissíteni kell, legyen az weboldal, vagy alkalmazás"
+date: "2024-03-12"
+tags: ["fejlesztés"]
+thumbnail: "/img/blog/a-kodot-a-weben-frissiteni-kell-legyen-az-weboldal-vagy-alkalmazas.jpg"
+thumbnailAlt: "Update felirat Scrabble elemekből kirakva"
+---
+
+**A dolgok elavulnak, ez a világ rendje. Egy olyan korszakban élünk, ahol ez az elavulás elképesztő sebességre kapcsolt. A 2000-es évek elején még volt VHS, floppy és CD is. Ma már egyik sem.**
+
+Az évi új iPhone kiadás csak egy példa a modern korból a felgyorsult technikai fejlődésre. Manapság az általános elavulási időt durván 5 évre tudjuk belőni, ami nagyon gyors.
+
+Értelemszerűen ez nem egy kőbe vésett szabály, hiszen a régebbi dolgok is működnek és megoldják a problémáinkat. Ami a különbség az új dolgokkal - úgy öt év után - hogy jobban és hatékonyabban teszik mindezt.
+
+Természetesen ez alól az elavulás alól van kivétel is, általában az olyan termékek, amik már nagyon régóta velünk vannak, mint például az személyautó. Ebben az esetben az az állítás, hogy jobb és hatékonyabb már nem egy éles határ.
+
+**A web és a webfejlesztés egy elég  jó példa, ahol az elavult rendszerek hátrányt okozhatnak nekünk**, mivel legalább kevésbé biztonságosabbak és sokkal lassabbak.
+
+## Egy weboldal, vagy webalkalmazás gyorsan avul el
+
+Amikor fejlesztünk valamit - legyen az egy weboldal, vagy alkalmazás - mindig 3rd-party (harmadik fél által készített) rendszereket használunk.
+
+Ezek a rendszerek, eszközök különböző területen lépnek be a projektekbe. Alapvető választás a programnyelv, hogy [PHP](https://www.php.net/)-t, GO-t, Python-t, vagy Node.js-t használunk.
+
+Ezeket a programnyelveket rendszeresen frissítik, amiket nekünk (többnyire a szerverünk fenntartója telepít) kell beállítanunk, átkapcsolnunk új verzióra.
+
+Ha választottunk egy nyelvet (mint például a PHP), akkor valószínűleg egy ahhoz kapcsolódó keretrendszer segítségével fogunk fejleszteni (mint a [Laravel](https://laravel.com/)). Ezt a keretrendszert ugyanúgy folyamatosan frissíteni kell, mert jöhet egy biztonsági kiadás, vagy egy teljesen új főverzió, ami jobban használja ki az új - programnyelv által nyújtott - funkciókat. A teljesítményről [rengeteg mérést találunk online](https://kinsta.com/blog/php-benchmarks/).
+
+A programnyelv csak az egyik példa. Igaz mindez az adatbázisra (MySQL), a webkiszolgálóra (Apache, NGINX), valamint a front-end oldalra is.
+
+**Az elavulás egy olyan ár, amit vagy így, vagy úgy de megfizetünk.** Ha nem olyan hatékony az oldalunk, alkalmazásunk, mint lehetne, akkor elmulasztott értékeesítést kockáztatunk. Ha beragadunk egy régi verzióba, akkor nagy az esély, hogy nehezebb lesz tovább fejleszteni, mert nem lesz, aki elvállalja nagyobb ráfordítás nélkül.
+
+## A WordPress weboldalad frissíteni kell, amit akár te is megtehetsz
+
+A folyamatos frissítésre a WordPress mindig az egyik legtriviálisabb példa lesz, főként a biztonság miatt. [A WP oldalakat gyakran törik fel](https://kinsta.com/blog/is-wordpress-secure/), aminek a leggyakoribb oda egyszerűen az, hogy nem frissítik őket.
+
+Ha van egy jól elkészített oldalunk, egy egyedi témával, kevés függőséggel, akkor a frissítést akár mi is megcsinálhatjuk. Ma már automata bővítmény frissítést is bekapcsolhatunk, ami egy használható és kényelmes funkció.
+
+Fontos, ha így döntünk utána mindig teszteljünk manuálisan, főleg a számunkra kritikus funkciókat (webáruház esetén a vásárlás folyamatot).
+
+**Téma frissítésnél általában a legnagyobb gondot mindig egy 3rd-party téma**, valamilyen builderrel okozza majd. Ezek különösen problémásak biztonság szempontjából, ezért mindig frissítsük őket!
+
+## Webfejlesztés nincs fenntartás nélkül
+
+**Egy online projekt esetén érdemes 5 évben gondolkodni és öt évre előre tervezni.** Mint mindig most is igaz, hogy a fenntartás, továbbfejlesztés és a frissítés szinte csak akkor lesz kritikus, ha olyan alkalmazásod van, amit sokat használnak vagy/és közvetlen termel pénzt.
+
+Egy egyszerű portfólió oldalnak kevesebb funkciója van és kevesebb előnye is. Itt is fontos, hogy versenyben legyünk a konkurenciával, de a fenntartás elenyésző lesz egy webáruházhoz képest.
+
+Minden esetben számoljunk azzal, hogy az új fejlesztések mellett fenntartási, frissítési költségeink lesznek. Ezekről kérdezzük meg a fejlesztőinket, hogy ők hogy látják mire és hogyan lesz szükség.

src/hu/posts/egy-wordpress-weboldal-fenntartasanak-koltsegei.md

@@ -0,0 +1,112 @@
+---
+title: "Egy WordPress weboldal fenntartásának költségei"
+date: "2024-04-21"
+tags: ["fejlesztés"]
+thumbnail: "/img/blog/egy-wordpress-weboldal-fenntartasanak-koltsegei.png"
+thumbnailAlt: ""
+---
+
+<p class="lead">Egy weboldal fenntartásának költsége sokszor nem egyértelmű, főként akkor, ha már nem egy egyszerű portfólió oldalról van szó. De mégis mennyi? Hogyan tudunk nagyságrendi összeget számolni egy WordPress weboldal esetén?</p>
+
+Értelemszerűen a saját tapasztalatainkról beszélünk elsődlegesen, ami lehet egy jó kiindulási alap, ha te is kíváncsi vagy mennyi fenntartani egy weboldalt, vagy alkalmazást.
+
+## Nem mindegy, hogy milyen WordPress weboldalt üzemeltetsz
+
+A költséget leginkább az elvárásaid és az, hogy mit üzemeltetsz fogja meghatározni. Elvárás alatt értjük a céljaidat. Ha egy profi megoldást akarsz, annak mindig ára lesz. Egy gyors oldal mögött jó hardware, jó software és jó folyamatok vannak.
+
+**Fontos megkülönböztetni két oldalt típust. A statikusabb portfólió oldalt, ami bemutat téged, a céged és annak szolgáltatásait, valamint bármit ami már inkább egy alkalmazás, mint egy webáruház.**
+
+Onnantól, hogy az oldaladon felhasználók regisztrálhatnak és végezhetnek műveletet a ugrásszerűen növekszik a háttérben futó folyamatok száma, ami röviden azt jelenti, hogy mindenből több kell (szerver, szolgáltatás).
+
+## Domain + szerver bérlés díja egy WordPress weboldalhoz
+
+A legalapvetőbb költségünk a domain és szerver vásárlás, bérlés költsége lesz. **Domain esetén durván éves szinten 3 - 5 000 forint közötti árral érdemes számolnunk.**
+
+Tárhely esetén már nem lesz ennyire az egyszerű a becslés. **A legolcsóbb tárhely mindig a shared-hoszting lesz**, ami azt jelenti, hogy egy olyan szerveren vásárolhatsz tárhelyet, amit sokan mások is használnak. Te megveszed ennek a tárhelynek egy szeletét, ami többnyire fizikai tárhelyet jelent és valamilyen formán fixált teljesítményt (felhasználható memória és CPU mag).
+
+**A megosztott tárhely szinte mindig jó választás lehet, ha egy sima portfólió oldalról beszélünk**, havi pár ezer egyedi látogatóval.
+
+Egy ilyen tárhely **durván 20 000 forintba kerül évente** ~10 GB tárhellyel (fájl + e-mail).
+
+**Ha a WordPress oldalad nem csak egy portfólió oldal, hanem egy webáruház, vagy bármi más, ami inkább viselkedik már alkalmazásként (a felhasználók be tudnak lépni) már érdemes elgondolkodni egy VPS-en**, vagy bármilyen premium - célzott - hoszting szolgáltatáson, aminek a havi díja körülbelül ott mozog majd, ahol a shared-hoszting **éves díja (10 - 20 000 forint/hónap)**.
+
+A VPS (Virtual Private Server) magyarul “virtuális dedikált szervert” jelent, ami csak téged szolgál és nem osztozol rajta a hagyományos értelemben másokkal. Ebből vásárolhatsz olyat, amin már van előre telepített program is (cPanel), de olyat is, ahol te telepítesz szabadon mindent.
+
+## WordPress bővítmények költsége
+
+Mi egyedi WordPress oldalakat készítünk, ami röviden azt jelenti, hogy nem dolgozunk vásárolt sablonnal, template builderek-kel, így ezek költségét nem soroljuk fel.
+
+A bővítmények költsége függ az igényektől és a fejlesztőktől. Mi például két darab fizetős bővítményt használunk általában:
+
+- **ACF ($49 / év):** egyedi mezőket tudunk létrehozni vele, egy fejlesztői eszköz.
+- **WP Rocket ($59 / év):** teljesítmény optimalizáló bővítmény, ami hozzáad a kész oldalhoz egy extra réteget, hogy jobban teljesítsen (mérhetően). Felhasználóként ezzel sem találkozol majd, így ez is egy fejlesztői eszköz, azzal a különbséggel, hogy a bővítmény feladata közvetlenül befolyásolja a végfelhasználói élmény.
+
+<figure class="figure">
+    <img src="/img/blog/wp-rocket-preview.jpg" alt="Képernyőkép az aktuális WP Rocket landing oldalról"/>
+    <figcaption class="figure-caption">A <a href="https://wp-rocket.me/">WP Rocket</a> az egyik legprofibb WordPress teljesítmény bővítmény.</figcaption>
+</figure>
+
+Mind a két bővítmény ára benne van a az általunk ajánlott árban. Ettől függetlenül nézzük a matekot:
+
+- egy átlagos weboldalt durván 5 évig fenn fogunk tartani, tehát máris érdemes felszorozni öttel. **($49 + $59) * 5 = $540**
+- Dollárban fogunk fizetni, így át kell váltani forintra. Ez a forint árfolyamtól függően nézhet ki jobban, vagy rosszabbul. A cikk írásakor: **199 330 Ft (369-es árfolyamon)**.
+- Erre rájön még a 27%-os áfa szinte mindig: **253 149 Ft**.
+
+Negyedmillió forint 5 évre vetítve, csak két bővítménnyel számolva úgy, hogy ez az olcsóbb bővítmény kategória. Ha Woo-hoz akarunk például ismétlődő fizetést, az $199 / év.
+
+Mindez egy webáruház esetén már érdekesebben néz ki, mivel nagy az esély arra, hogy:
+
+- legalább kell egy fizetési kapu bővítmény, mint [a mi SimplePay WooCommerce integrációnk](https://simplepay.conedevelopment.com/).
+- Kell egy szállítást kezelő (például csomagpont választó) bővítmény.
+- Kell egy számlázást kezelő integrációs bővítmény (Billingo, vagy számlázz.hu).
+
+**Egy dolog biztos:** legyen bármilyen bővítmény az oldaladban (ingyenes, fizetős) mindig frissítened kell, mert WordPress oldal esetén magas a feltörési kockázat (lévén nagyon népszerű rendszerről van szó),  így ha van az oldaladban egy fizetős bővítmény, az egy fix és előre kalkulálható költség.
+
+## E-mail küldés, hogy a WordPress webáruházad üzenetei oda is érjenek
+
+**A legjobb példa az extra költségekre talán az e-mail küldés**, amit triviálisnak tekintünk, hiszen természetes része az életünknek. Az e-mail küldés nem az, amit felhasználóként veszünk igénybe a hétköznapokban.
+
+Szeretnéd, hogy az e-mailjeid oda is érjenek a felhasználókhoz? A legegyszerűbb és legbiztosabb megoldás az lesz, ha fizetsz egy 3rd-party szolgáltatónak (mint a SendGrid), aki garanciát vállal, hogy a küldött e-mailek 99.9% oda is fog érni a felhasználóhoz (valamint nem kerül spambe). Ennek az ára durván $20-tól kezdődik havonta, attól függően, hogy mennyi a kiküldött e-mailek száma.
+
+Az hogy miért nem akarsz a saját tárhelyről e-mailt küldeni? Mert osztozol a küldőn sok másik felhasználóval. Nem tudhatod mikor kerül feketelistára (aminek a közvetlen következménye lesz, hogy spambe kerülsz) az egész szerver, amit simán okozhatsz te is. Gondolj bele abba, hogy egy webáruház esetén csupán egy rendeléshez hány db e-mailt kell kiküldeni (rendelés rögzítés, állapotváltozások, fizetés, visszaigazolások, admin értesítések).
+
+**Az e-mail küldés kritikus része lesz egy webáruháznak, vagy bármilyen regisztrációt kezelő WordPress alapú webalakalmazásnak.**
+
+Ciki kiírni, hogy “légyszíves nézd meg a spam mappát is”, plusz az e-maileddel történhet ezer más dolog is. Ezért jó, ha van egy dedikált felület, ahol meg tudod nézni, hogy melyik e-mail, milyen hibával nem ért oda. Amire aztán tudsz reagálni.
+
+Természetesen mindezt úgy írjuk, hogy az oldalad költségvetését neked kell megtervezned. Ha tudod mennyi a havi bevételed, már tudsz is kalkulálni, hogy mennyi jut a fenntartásra.
+
+Értelemszerűen a növekedéshez kellenek a jó eszközök, de elindulni lehet kicsiben, majd váltani, ha már pénzt is termel az áruház. De váltani kell.
+
+## GitHub + Deploy, mert az oldalt fejleszteni és telepíteni is kell
+
+Az egyedi témád (vagy bővítmény) kódját tárolni kell valahol. Mi GitHub-ot használunk erre. A GitHub egy kódtároló megoldás a Git verziókezelőhöz.
+
+Arról, hogy mik a [verziókezelés előnyei](http://localhost:8080/hu/a-verziokezeles-elonyei/) már írtunk korábban. Ami ebben az esetbe fontos, hogy habár GitHub-ot bizonyos megkötések mellett tudjuk ingyenesen használni, de lehetnek olyan esetek, amikor már nem.
+
+Az oldalunkat telepíteni is kell, lehetőleg nem FTP keresztül, manuálisan. Azért fontos egy continuous deployment megoldás, hogy az új fejlesztéseket, javításokat biztonságosan és egyszerűen tudjuk használni.
+
+Automata telepítéskor a CI ([continuous integration](https://en.wikipedia.org/wiki/Continuous_integration)) felültünkön futtathatjuk a tesztjeinket még mielőtt bármit az éles helyre másolnánk, így akadályozva meg az esetleges hibákat.
+
+Minderre nagyon sok lehetőség és megoldás van. Alkalmazhatunk külön személyt a beállítására, vagy használhatjuk (ha a fejlesztőknek is megfelel) a [GitHub](https://github.com/) + [Forge](https://forge.laravel.com/) kombinációt.
+
+## Felügyelet, karbantartás, fejlesztési idő
+
+Mi van akkor, ha az egyik akciód felhívását (e-mailben) egy hiba miatt nem kapta meg durván 200-300 felhasználód, ezért ők most panaszkodnak, mert igazságtalannak érzik, hogy kimaradtak belőle?
+
+Hogyan deríted, ki, hogy pontosan kik ők és hogyan éred el őket? Itt jön be az, hogy kell neked két ember:
+
+- egy aki ért a kódhoz,
+- egy aki ért a szerverhez.
+
+Ketten mindezt fel tudják kutatni (megoldani a hibát), majd ki tudják küldeni azokat a kuponokat, amikkel tudod kárpótolni a kihagyott vásárlókat (hogy további pénzt keress).
+
+Ez egy nagyon triviális példa, de talán jól érthető. Ezer másik ilyen lehet, ahol egy apróságon elcsúszik valami és pénzt veszíthetünk. Ez előfordul, de cél, hogy minimalizáljuk és kezeljük, ha megtörténik.
+
+Ahhoz, hogy egy ilyet meg lehessen oldani fizetnünk kell valakinek, aki felügyeli az oldalt és beavatkozik, ha kell. Valamint, aki elé megy ezeknek a hibáknak.
+
+## Összefoglalás: mennyibe kerül egy WordPress oldal üzemeltetése?
+
+- **Egy “statikus” portfólió oldal**, ahol te szerkeszted a tartalmat és nem kell továbbfejleszteni durván 25-30 000 Ft-ból kijön évente (havi 1-10 ezer egyedi látogatóval) a hoszting + domain. Ehhez jönnek hozzá az egyedi bővítmények és fejlesztések (óradíj alapon), ami egyedi igény mindig.
+- **Egy kisebb, közepes áruház esetén**, ahol havi 2 500 - 5 000 rendeléssel számolunk már egy shared hoszting nem a legjobb választás, legalább szükségünk lesz egy VPS-re, vagy egy premium tárhelyre. Ennek a költség havi szinten 10 - 20 000 Ft között mozoghat. E-mail küldésért célszerű fizetnünk, ez durván $25 havonta (110 000 Ft / év). A fizetési kapu bővítmény valószínűleg fizetős lesz: 15 - 40 000 Ft között évente. A végösszeg durván 300 000 Ft plusz óradíjas fejlesztések, rendszerfelügyelet.
+- **Nagyobb áruház esetén (+5 000 rendelés havonta)**, el kell indulni a lehető legkisebb optimális felállással és megnézni, hogy hogyan lehet skálázni. A közepes áruházak költségei lehetnek jó alapok, de mivel többet termel, többet szolgál ki ezért a költségek majd arányosan növekednek. Azt mindig látod, ha valamivel hiba van, vagy elfogy a szerver, de ezt általában nem éri meg megvárni.

src/scss/config/_dark-colors.scss

@@ -24,6 +24,7 @@ $colors: (
     'marker': $color-primary,
     'primary': $color-primary,
     'secondary': $color-secondary,
+    'strong': $color-white,
     'text': $color-gray,
   ),
   'btn': (

src/scss/section/_post-heading.scss

@@ -14,7 +14,7 @@
   &__title {
     font-size: responsive-font-size(3.5rem, 50, '5vw + 1rem');
     margin-block: 0;
-    max-inline-size: 70rem;
+    max-inline-size: 60rem;
     text-wrap: balance;
   }