Haszprus überblog

Haszprus überblog

Kedves Blogolvasók!

Milyen témákra van igény?

1. More code dump?
2. More psycho?
3. More energy?
4. More passion?

Jöhet privben is, kamu email címről is.

Thx

The Überblog Management Team

• amikor látok valami hírlevelet, feliratkozok rá
• blogok
• amikor látok valami érdekes cikket, felveszem egy Learn mappába könyvjelzőnek, és rendszeresen végigmegyek rajta
• google developers, learn.microsoft.com, coursera, linkedin learning (subscriber vagyok évek óta), pluralsight, daily.dev, web.dev, dev.to, reddit, amazon oldalak, infoq
• bizonyos projektek/nyelvek dokumentációi, pl. Laravel, Flask
• youtube fejlesztői csatornákra feliratkozás & könyvjelző
• tiktokon meglepő módon csomó érdekes főképp css/frontend tartalom jön szembe, de vannak keményebb fejlesztői témák is, pl. van egy csávó aki a GitHubnál dolgozik és szokott gondolatokat megosztani
• podcastok nem annyira, de hallgattam Python podcastot pl.
• freecodecamp
• GitHub projektem van arról hogy miket akarok tanulni
• a blogomba is gyűjtök listákat hogy miket akarok csinálni/tanulni
• idén kipróbáltam a React Native-et, a Vercelt, a Laravelt, az Android Studiot, egy rakat CSS újdonságot aktívan használok, lokálban kipróbáltam a PHP8 újdonságait
• ChatGPT-vel / Geminivel generáltattam egy rakás kártyát és betettem Ankiba aztán végigmentem rajtuk / egy részükön
• néha megnézek interjú kérdéssorokat, volt h ebből is csináltam Anki kártyákat
• még 2019-ben vettem egy Remarkable-t, időnként elolvasok 1-2 könyvet rajta
• ja és vannak mindenféle audio anyagok is, én pl. sokáig subscriber voltam (vagyok? ) Headwayre, úton valamerre vagy kondi közben kiváló

Perpill a tábláimat és a kódjaimat szétkúrja a markdown és a saját formázásom viaskodása, sry. Fix this.

$ ./sail composer require laravel/breeze --dev

(Ja a ./vendor/bin/sail -re van egy symlink.)

(Ezt a parancsot így wsl-ben kell kiadni ha épp Windowson vagyunk.)

Milyen csomagjaink vannak most?

Csomi	Miez
laravel/breeze	User reg, login, pwchange, pw confirm, pwreset, simple profile page + opcionálisan Livewire, Inertia + opcionálisan Vue/React. Pretty much out of box if you ask me.
laravel/sail	A Laravel saját Docker wrappere, felhúz neked egy PHP containert, MySQL containert, Redis containert, látok itt még valami test, mailpit és selenium konténereket. Aham a mailpitet eléred a 8025-ös porton, ahol ül egy lokál inbox a rendszerből kiküldött emailekkel (standard thing)
laravel/sanctum	"authentication system for SPAs (single page applications), mobile applications, and simple, token based APIs"
laravel/tinker	A Laravel REPL-je
nesbot/carbon	DateTime, bővebben egy hamarosan megjelenő bejegyzésben
nunomaduro/collision	"beautiful error reporting"
nunomaduro/termwind	it's like Tailwind CSS, but for the PHP command-line applications
spatie/laravel-ignition	"beautiful error page for Laravel apps" - hozzáteszem tényleg kurvajól néz ki, ez volt az első dolog amivel találkoztam a Laravel felrakása után (írási jogosultság-para miatt), szép, true.

Aham, a feléről nemtom micsoda, a Breeze-t most ismertetem, a Sail egy Docker-compose wrapper a Laraveltől, a Tinker öö passz, a Carbon ha az amire gondolok akkor valami időkezelés, Collision az valami hibakezelő cucc commandline-ban, Termwind passz, Ignition mintha az is valami hibakezelés lenne. ápr. 07. 19:35, közben utánanéztem a dolgoknak, be is írtam a táblázatba

Breeze

Laravel Breeze is a minimal, simple implementation of all of Laravel's authentication features, including login, registration, password reset, email verification, and password confirmation. In addition, Breeze includes a simple "profile" page where the user may update their name, email address, and password.

Okés.

Laravel Breeze's default view layer is made up of simple Blade templates styled with Tailwind CSS. Additionally, Breeze provides scaffolding options based on Livewire or Inertia, with the choice of using Vue or React for the Inertia-based scaffolding.

Értem.

Igazából Nekem egy loginra (screenre) volt szükségem, mert eggyel korábban, amikor még aludtatok, a

$ ./sail artisan install:api

eredményeképp azt kaptam, hogy

Route [login] not defined.

Szóval gondoltam mi lenne ha kivételesen ezt nem írnám meg magamnak manuálban, hanem megnézném, hogy mit ad a Laravel. Hát itt tartunk. Azaz már nem egészen itt, mert a composer require laravel/breeze után ez volt a javasolt köv lépés:

$ ./sail artisan breeze:install

Itt felajánlott amolyan ASCII UI-on egy pár választási lehetőséget, én a következő szavazatokat adtam le:

Kérdés	Válasz
Which Breeze stack would you like to install?	React with Inertia Az inertiáról egyelőre nem tudom hogy micsoda, de a React az azért jó, mert a csőben levő ügyfelünk Reactozik.
Would you like any optional features?	Dark mode & TypeScript Ezeknek meg Pas fog örülni
Which testing framework do you prefer?	Pest Itt fel volt kínálva a PHPUnit is de azt ismerjük és véletlen túl hatékonyak lennénk benne.

Generic stuff

• Bounded Context
• DDD - Domain-Driven Design
• Első (előző) körből kiderült dolgok
• Hogyan tartom up-to-date-en magam?

PHP

• use array_walk instead of foreach
• PSR
• Match expression
• Potherca's rules for creating more robust code in PHP
• Arc.dev PHP interview questions
• EPAM Senior PHP interview questions
• Senior PHP interview questions @ Google

Maybe

• Clean code
• SOLID

Egy kis finomítás a kommentdobozon.

Blog health check & maintenance.

(A második kép valójában nem kattintható de már a fülemen jön ki a CSS hegesztés, sry.)

Még gondolkodom rajta hogy automatizáljam-e az ilyen orphanok törlését. Bizonyos esetekben mehet, de mondjuk találtam értékes adatokat is a múltból amiket restauráltam. (Pl. egy rakás kommentet egy törölt bejegyzéshez.)

But also respects reader's calm.

CSS is getting out of control, soon the site will be just effects without content.

Közben lett nekünk egy gyönyörű sticky footerünk btw, kikukáztam a mindenféle float meg absolute divet a múltból.

Kezd kurvajó lenni ez a dolog

Anyone interested in a fancy online keyword based diary (lifelog)?

Az most senkit ne zavarjon hogy a napok még nem jó sorrendben jelennek meg.

• PHP optimalizálás
  • Jenkinses elemzés a kódra
    • CPD és PMD checkre van szükség
  • XHPROF elemzés
• DB optimalizálás
  • CT mérés javítása
    • Ne okozzon table lockot a CT mérés során keletkező INSERT-ek és UPDATE-ek. Lehetőségek: delayed vagy low priority.
  • MySQL 5.5 percona frissítés
  • Adatok elemzése
    • Nagy méretű táblák elemzése, törlési, archiválási stratégiák kialakítása és a szerkesztőséggel egyeztetés.
  • InnoDB storage engine használat
  • Query optimalizálások
    • Queries not using indexes lekérdezések optimalizálása
    • Slow query optimalizálás
    • Jetprofiler elemzések
  • Táblák particionálása
• Kereső optimalizálás, Sphinx bevezetés
  • Admin és frontend kereső átalakítása
  • Feleslegessé vált indexek törlése
• Admin folyamatok optimalizálása
  • Workflow felülvizsgálata, tapasztalatok implementálása
• HTML, JS, CSS optimalizálás
  • http://gtmetrix.com/ javaslatok alkalmazása

Na ez például egy remek szakmai fejlődési program.

Igazából nem kéne meglepődnöm. Abban a szobában kb. 40 projektnek a fejlesztése zajlik, rengeteg külsős cégnek adnak ki megbízásokat a senior fejlesztőink. Csupa ilyen arccal vagyok körülvéve, juniorok nem nagyon dolgoznak a Sanomában, mert a legtöbb projektet kizárólag külső erőforrásokkal fejlesztik, plusz a hotfixeket belül, meg a deploy, üzemeltetés, ilyesmi. A lényeg hogy rengeteg tudás koncentrálódik körülöttem, és ha jól csinálom akkor rengeteget profitálhatok az itt eltöltött időből. Sajnos ebből a szobából hamarosan ki leszünk emelve egy kevésbé szakmai közegbe, de lobbizni fogok hogy tarthassam minél jobban a DPO-s kapcsolataimat.

Ott voltunk ezen is Orcával és PAStheLoDdal.

Szubjektív véleményem: nagyon hardcore advanced cuccot vártam, ehhez képest kicsit bme-sre sikerült, legalábbis az első egy-két előadást a magam részéről túl lassúnak ill. bealvósnak éreztem, a verziókezelős és a scrumos teljesen triviális dolgokról beszélt (szerintem elhibázott tematika). Volt viszont nagyon kellemes meglepetés is, éspedig a PHP Security, ami nagyon élvezetes volt (erről a témakörről még valszeg többször ennyit szívesen hallgatnék), illetve a HTML5 bemutató, ami viszonylag meglepő módon még mindig tudott egy csomó újdonsággal szolgálni a HTML 5 konferencia után is.

Amik voltak:

• Multiplatform mobil fejlesztések (Dr. Forstner Bertalan)
• Hogyan optimalizáljunk C/C++ kódokat! - Esettanulmány (Illés Márton)
• Verziókövető rendszerek alkalmazása fejlesztési projektekben (Gyöngyösi Péter)
• Webműves Kelemen tanácsai, avagy mi kell a PHP falába? (Varga-Perke Bálint)
• Hogy kerül a csizma az asztalra? HTML 5, CSS3, JavaScript (Magyar Attila és Györkő Péter)
• AGILIS / SCRUM fejlesztés (Bakonyi András)

Üdítő volt végre egy erősen szakmaibb konferencián ott lenni, nekem Bátorfi Zsolt HTML 5 bevezető előadása kellőképpen hatásosnak bizonyult. Mondjuk a későbbiek nem értek a nyomába, de ettől még rengeteg implementáció szinten új dolgot láttam. Örülök hogy ott voltam, legnagyobb hiba lett volna kihagyni. Az MS nagyon nyomulni akar, és valszeg a legjobb helyen teszik (a fejlesztőknél). Atomprofi szervezés stb. Elvileg lesz majd még ilyen, feltétlen menni akarok arra is.

IRCQuote fight! In the ring:

	Volt egy kis ráncfelvarrás a blogon, kapott sokminden színátmenetet meg shadowt, sztem tök pofás lett, képek is kaptak shadowt, de remélem nem overused.
	láttam, nice... css3... faintos

nov. 30. 03:46 1-2 dolog megvalósult Hedge év eleji design-ötleteiből, nyomjatok egy refresht.

nov. 30. 05:34 toltam rá némi animációt is.

Kipróbáltam a blog készülő v3-as motorján a LESS JavaScriptes implementációját, és hát tök fasza cucc. Aki esetleg nem ismerné, változókat, számításokat, függvényhívásokat visz a LESS a CSS-be, illetve írhatsz nested szabályokat is (erre mi a magyar szó?). Tökjó.

• Quick LESS.js tutorial

Betoltam egy-két HTML5 elemet a blog alá. Semmi komoly, csak pl.

• új doctype, ami abszolút elnyerte a tetszésemet. Az első doctype amit fejből megjegyeztem.
• header - a site logója ebbe megy
• footer - copyright és egyéb infók
• nav - sidebarok
• article - bejegyzések
• time - a bejegyzések időpontjainak, datetime paraméterrel, amibe egy sztenderd formátumban is eltettem az infót
• figure és figcaption - képek és képaláírások
• linkek és scriptek type attribútum nélkül
• néhány inputnak required attribútum (amit a megfelelő böngészők már kliensoldalon beépítetten validálnak)

Hát sokmindent nem kellett átírni, mivel ezek legtöbbje különböző divek 1:1 megfelelője.

Disclaimer: Ezt az egész site-ot ugye 2003-ban csináltam javarészt, azóta is volt rajta fejlesztés rendesen de az utóbbi években már semennyit sem foglalkozok vele.

Gyakran előjövő probléma, hogy a látogatónak szeretnénk megadni a lehetőséget a táblázataink rendezhetőségére. Erre nyújt megoldást a draw_table_from_array függvényem, amelyet egy munkám során hoztam létre. Nemcsak egyforma (teljesen css-ből formázott) megjelenést nyújt a táblázatoknak, de erőfeszítés nélkül lehetővé teszi, hogy bármely oszlop szerint rendezzük őket. Egy-egy tábla előállításához a kód pusztán ennyi, az sql lekérdezéstől a felhasználó által rendezhető tábla megjelenítéséig:

Az eredmény:

A dolog működése élőben is kipróbálható [itt egy link volt, közben meghalt].

As you can see, it spares a lot of space and it doesn't screw up the page layout when opened. This menu structure has been achieved by using a two level unordered list (standard semantic blind friendly xhtml) and some pretty heavy css usage. The underlying php script needed only a tiny tweak, 'cause the month list was already generated by a generic function.

What you can't see on this image is that, in my opinion, it's really ergonomic. You can point to the month of your choice really fast (because the list is clean and short, there is absolutely no clutter), and the whole hide-and-show thing works just like someone would expect.

Sorry for my English, I'm just practising.

Az a blogra pakolt lightweight galéria még mindig lightweight de egyre durvább lesz… Most már tud onthefly, oldalújratöltés nélkül album nézetet is. Ilyet:

Nomeg billentyűzetről jobbra-balra lapozgatni, ha valaki nem lenne naprakész a kommentekből.

Az a helyzet hogy teljesen lightweight módon megoldottam egy atombrutál full-featured highly advanced client-side cached galériát, amihez se külön db nem kell, se adminfelület, se semmi, full automatikusan onthefly ráépül a bejegyzésekre. 37 sor php (!), 60 sor html, 121+64 sor javascript (és 139 sor css). Az egész cucc 10 KB. Csak viszonyítás képpen a Haszprus Private Gallery 110 KB, amiből az adminfelület 26 KB - ez utóbbi ugye itt nem is kell.

Ki lehet próbálni (akárhol az ablakban katt, előjön az album nézet), ráadásul egy olyan képgalérián, ami egy egyelőre nem is publikált bejegyzésből táplálkozik (így a bejegyzésre mutató link nem fog működni (számotokra)… ez nem bug).

Örülnék, ha adnátok valami feedbacket, hogy mégis milyen lett.

ie-ben az album nézet nem jelenik meg de pillanatnyilag lesz*rom. a jó hír hogy valszeg ez elég könnyen javítható, csak rá kéne nézni hogy pontosan mi a hézag.
Update szep. 03. 01:11: na megy.

Íme az überblog legújabb, highly advanced feature-e, a képlapozó.

Semmiféle adatbázis-módosítás nem kellett hozzá, egyszerűen kideríti hogy a képet melyik bejegyzésből linkelték (mégpedig erőforráskímélően, de még lehet rajta fejleszteni), megnézi hogy a bejegyzésben mely képek veszik körbe őt (azaz melyik kép van előtte és utána (ezen is lehet gyorsítani)), belinkeli azokat, sőt belinkeli magát a bejegyzést is, így megkönnyítvén a navigációt. Ha jók lesztek akkor előbb-utóbb talán megcsinálom javascriptesen széjjelcache-elve is, mint a private galleryt, 0 sec késleltetéssel, lapújratöltés nélkülire.

Ha az egeret az előző/következő link fölé viszed, kapsz egy kis thumbnailt is arról, hogy mégis milyen képre jutsz a linkre kattintva. Mindez nem feltétlen lóg rá egyébként a képre, alapvetően 1280*1024-re illetve afölé van kitalálva mindez, ahol rálógás nincs, sőt az egész kép kifér.

Azt kell mondjam, ez kurvajó lett. Elégedetten dőlök hátra. Vegyük észre hogy ez egy lightweight galleryt akaszt a blogra, amely így 2.9-es stádiumba léphet.

A dolog működését megtekintheted például itt, vagy nyilván bármelyik bejegyzésnél, ahol van mik között lapozgatni.

Update aug. 23. 18:18: lett 0 sec delayes lapozás, cache-eléssel, oldalújratöltés nélkül. Tudnivalók:

• Első képletöltéskor nincs cache-elés, megelőzendő a fölösleges cache-elést. Ez leghasznosabb olyankor, amikor a júzer külön fülekre megnyitogatja a képeket egyesével, ilyenkor a cache-rendszer nem okoz fölösleges többletforgalmat.
• Abba az irányba cache-el, amerre a néző lapoz.

Nem igazán nevezném trükknek, de gyakorlatilag sehol sem láttam még alkalmazni, márpedig a Firefox 2 pl. már érti. A többit meg magasról. (Vigyázat: mindig az oldal gazdájának egyéni döntése, hogy a többi böngészőt magasról-e, e tekintetben legfeljebb irányelvek adhatók különféle indoklásokkal ellátva.)

Szóval pl. van egy pix_section classunk, amely a benne helyet foglaló képeknek 1 pixeles fekete keretet ad. Ok. Van emellett egy right classunk, amely bármely blokkszintű elemet jobbra floatol. Ok. Szeretnénk, ha a képeink jobb oldalon jelennének meg fekete kerettel. Nyilván:

<div class='pix_section right'>...</div>

Csak az a baj, hogy a baloldalon folyó szöveg hozzá fog érni a képeinkhez rossz esetben, hiszen paddinget senki se állított be. És nem akarunk se a righthoz, se a pix_sectionhöz paddinget. Hozzunk létre egy padding classt? Létrehozhatunk, de van másik megoldás is:

div[class='pix_section right'] { padding-left: 10px; }

Ez css selector azokat a diveket választja ki, amelyeknek class paramétere 'pix_section right'. Zsír. Megoldottuk a paddinget anélkül, hogy erre vonatkozó utalást kellett volna a html-be írnunk.

A témáról bővebben a W3C CSS dokumentációjában.

Ps. ígértem, hogy a sortörésre mutatok egy másik megoldást. Íme:

*[class~='keprendezo'] + * { clear: both }

A * bármely elemre illeszkedik, a [class~='keprendezo'] azokra, amelyeknek legalább egyik classuk keprendező. Az A+B szintaktika pedig egy olyan B elemre illeszkedik, amely előtt egy A áll, azaz jelen esetben minden elemre, amelyet egy képrendező előz meg.

Adott egy csomó float left-es elemünk, pl. thumbnailek egymás után. Szeretnénk, ha a float left ellenére az ezek után következő szöveg (vagy akármi) nem folyna rá a thumbnailjeinkre.

Többféle hagyományos megoldás létezik, ezek közül néhány:

<br clear='all' />
<br style='clear: both' />
<div style='clear: both'></div>

Fontos látni, hogy mindegyiknél arra van szükség, hogy a szöveg írásakor tudatában legyen az író, hogy az előtte levő izére rá fog folyni az ő szövege, és ezért beszúrja a fenti kódok vmelyikét. Ez elég szopó, hiszen a formázást minél inkább szeretnénk a tartalomtól elszeparálni.

Van egy másik megoldás is. Ha a float leftes elemeink pl. egy 'keprendezo' classú divben vannak, akkor a következő stílus segítségével a keprendezo után automatikusan sortörés lesz:

.keprendezo:after { 
    display: block; clear: both; content: ''; 
}

Ekkor a képrendezőt követő paragrafusnak nem kell tudnia róla, hogy ráfolyna a képrendezőre, a képrendező ugyanis beszúr maga után egy sortörő blokkot. Is nice. I like.

Egy másik alternatív megoldás ugyanezen problémára CSS attribútum selectorok bejegyzésben.

Rágjátok.

style=3

(A html ugyanaz, csak a css-t cseréltem le. Van benne 1-2 bug / dolog amit még nem oldottam meg, és az aloldalak nincsenek megformázva. Firefox 2.0-val megy Windowson 1280x1024-ben, ettől eltérő konfigurációk esetén passz. Ez egyáltalán nem végleges, csak gondoltam kirakom és begyűjtök pár véleményt.)

• CSS Naked Day 2006

Sziasztok gyerekek, remélem jók voltatok, ma esti mese gyanánt a css first-child pszeudo-osztályával szeretnélek megismertetni benneteket.

First-child, azaz első gyermek. Ha a html doksit nézzük, akkor egy

<b><em>jajdejó</em><em>szupi</em></b>

kódban a b tag első gyermeke az em, tartalma "jajdejó", a második gyermeke szintén egy em, tartalma "szupi". A két em közül tehát a jajdejó tartalmú egy first-child. A b first-childja. A napokban a CSS :first-child pszeudo-osztállyal valósítottam meg azt, hogy egy táblázatban az első oszlop a többitől eltérően jelenjenjék meg.

<p class='center'>IRCQuote fight! In the ring:</p><div class='u_pic_big keprendezo ircquote-stats center'> <a href='/user/Haszprus'> <img loading='lazy' src='/pix/users/1_01.jpg' alt='Haszprus' /> _Haszprus _{<div class='show-on-grandparent-hover'>950797 pageload</div>} </a><div class='quotebig'>vs</div> <a href='/user/balazs'> <img loading='lazy' src='/pix/users/685_01.jpg' alt='Balázs' /> _Balázs _{<div class='show-on-grandparent-hover'>3280 pageload</div>} </a></div><table class="ircquote"> <tr> <td><div class='u_pic_xsmall u_pic_xsmall-flex balazs'> <a href='/user/balazs'><img loading='lazy' loading="lazy" class="u_pic_xsmall" src="/pix/users/685_01.jpg" alt="Balázs" class="right" /></a></div></td> <td>melyik php fgv is csinál md5-öt egy karaktersorozatból?</td> </tr> <tr> <td><div class='u_pic_xsmall u_pic_xsmall-flex Haszprus'> <a href='/user/Haszprus'><img loading='lazy' loading="lazy" class="u_pic_xsmall" src="/pix/users/1_01.jpg" alt="Haszprus" class="right" /></a></div></td> <td>md5() :-) </td> </tr> </table>

A fenti táblázat első oszlopában szereplő neveket ha pl. szeretnénk jobbra zárni, akkor azt a következő módon lehet elérni css-ben anélkül, hogy külön minden nyomorult td-nek megadnánk egy class-t.

.ircquote td:first-child { text-align: right; }

Ennek magyarázata, hogy a neveket tartalmazó td-k a sorokat jelentő tr-ek első gyermekei.

És boldogan éltek, míg meg nem haltak. Jó éjt gyerekek, ennyi volt a mese mára.

Update 17:43: ja igen, a módszer apró hátránya, hogy az IE6 nem kezeli

Na, validhuszárok, webdizájnerek, csorgassátok a nyálatokat, itt egy XSLT + XPath + CSS alapon megjelenített RSS feed.

Mi ebben az érdekes? Először is, teljesen tetszőleges tartalmat rakhatok a böngészőben megjelenő rss feed köré. Másodszor, a bejegyzések címei immáron linkként mutathatnak a komment.php-re. Ezt css alapú formázással nem lehet megvalósítani.

Igazából ha az RSS nem kényszerítene arra, hogy CDATA-ba tegyem a descriptiont, akkor még frankóbb lenne. Lehetséges egyébként hogy ezt a problémát valahogy át lehet hidalni, nem jártam körül a témát, őszintén szólva.

Szerintem szép lett.

Egy pusztán css-sel formázott RSS feed így nézne ki. For the record, a Haszprus überblog közel fél éve CSS-sel formázott RSS-sel nyomul(t eddig).

Végül, nem tudok itthon még egy megszállottról, aki RSS feedre XSLT sablont rakott volna. Igaz, nem is kerestem. És az itthon alatt most nem a lakást értem, lol.

Megpróbálok 10 perc alatt áttérni tableless layoutra aztán meglátjuk összejön-e, ha nem, akkor visszarakom backupból a table-ös megoldást.

Update 2005. jún. 07. 00:03: a jobbalsó szövegdobozokat nem tudom oda tenni a helyükre. Aki tudja hogy miért, elmondhatja. Ez itt a concept (időközben töröltem).