Blog

[ ÚJ BEJEGYZÉS ]   [ ÚJ CIKK ]

• Javascript kód futtatása másolás vagy kivágás esemény után

  Hogyan futtathatsz egy bizonyos kódrészlet vagy függvényt, miután a felhasználó a másolás vagy kivágás gombot megnyomta, vagy a CTRL+V vagy CTRL+X billentyű kombinációt használta? A videóból kiderül.

  Ha érdekel további hasznos videó webfejlesztés, JavaScript témakörben, kérlek iratkozz fel a csatornára.

  

  Bzozoo 7 napja 7

• Javascript kép be(nem)töltés hibakezelés

  Ebben a videóban bemutatom egy Javascript-es módszerét annak, hogy hogyan kerüld el nemlétező kép betöltését a weboldaladba.
  3 élő és egy nem létező kép URL címei egy tömbben vannak. Az oldal frissítésekor random betöltődik valamelyik kép. A módszer segítségével, ha a betöltendő kép nem létezik, akkor helyette egy másik kép fog betöltődni.

  Ha tetszett a videó, ne felejts el feliratkozni

  

  Csatlakozz Discord szerverünkhöz
  

  Csatlakozz Facebook csoportunkhoz
  

  Bzozoo 1 hete 5

• Elloptam a sessiont.

  Mi történik a videóban?
  Van két böngészőm. Az egyik a Chrome, ahol a fiókjaimmal be vagyok lépve, a másik a Firefox, ahol nem. A devtools segítségével a sütiben tárolt session tokeneket átviszem a Crome-ból a Firefox-ba, így ott mindenféle jelszó vagy email beírásra nélkül belépek a felhasználói profilomba.
  Jelen esetben a sajátomba. De ha mondjuk ez egy munkahelyi gép lenne, akkor vihetném akárkiét, aki nem jelentkezett ki.
  De akár azt is megtehetném, hogy egy user scriptben Fetchel elküldöm egy backendnek az adatokat és ott szépen letárolom és akárhonnan hozzáférhetnék az aktuális user sessionhoz. A backend, akár mailben is kiküldhetné a sessiont.
  Szóval ezért szánjatok mindig időt a kijelentkezésre.
  A videóban a Codepen.io és a Hup.hu fiókjaimat használva mutattam be a dolgokat. Természetesen a videóban látható tokenek már nem érvényesek

  Bzozoo 1 hete 8

• Animációs videót készítek HTML, CSS, JavaScript -el

  Új videót készítek legújabb Youtube csatornámra.
  A csatornán HTML, CSS, JavaScript-el készített animációkat fogok bemutatni no copyright-os aláfestő zenékkel.
  Tegnap már feltettem az első ilyen videót, ami alatt az Else - Paris remix szól és loopban fut egy Javascript által generált 3D-s animáció, amint épp összedőlni készülő város képe bontakozik ki, mialatt megyünk végig az úton.
  Nemrég ismertem meg ezt a zenét és valahogy ennek az animációnak a képe társult (illett) mellé a gondolatvilágomban. Épp ezért Adobe Premiere-el gyorsan összetársítottam. Így született meg az eredmény az első videó a csatornán:
  

  Ezen a Codepen.IO-s linken megnézheted a kódot is.

  Ma pedig egy kicsit vidámabb hangulatú videót készítek el, aminek az inspirálója ez a videó volt
  

  Folytatás...

  Bzozoo 2 hete 1

• Alap NodeJS szerver a Heroku-n

  Ebben a blogbejegyzésben megmutatom, hogy hogyan készíthetsz el egy alap (default) Node.JS szervert a Herokun-n. Illetve a szerver környezeti változók használatát is bemutatom.

  De először röviden leírom, hogy mi az a Heroku, azok számára, akik nem ismerik.
  A Heroku egy felhőplatform, amely lehetővé teszi különböző webalkalmazások futtatását és ezek számára szerver infrastruktúrát biztosítson.

  

  Először is hozzunk létre a Githubon egy repo-t. Innen lehet majd feltölteni a Node.JS szerverfájlokat a Herokura.

  

  A package.json fájlba beírhatjuk a webalkalmazásunk nevét, leírását, verziószámát és akár függőségeket adhatunk majd a Node.JS alkalmazásunkhoz.
  A scripts.start-al hivatkozhatunk a szerverünk alapértelmezett fájljára.

  

  A Heroku a futáshoz megkövetel egy Procfile-t is a képen látható sorral. Hozzuk ezt is létre a Git-en.

  Folytatás...

  Bzozoo 2 hónapja 8

• JavsScript Hungary csoport a Facebookon

  

  Ezt a Facebook csoportot azért hozom létre, hogy itt külön dedikáltan csak JavaScript programozással tudjunk foglalkozni, a Javascript és annak keretrendszerei, mint Angular, Reakt, VueJS stb... iránt érdeklődő személyeket gyűjtsön össze.
  Hírek, Tutorialok, Videók, Példakódok, Kérések és kérdések, minden jöhet, ami JavaScript-el kapcsolatos.
  Csatlakozz!

  https://www.facebook.com/groups/javascripthun

  Bzozoo 7 hónapja 5

• Építsünk Tetris játékot JavaScript alapokon II - Dobáljunk random tetrominokat!

  Az előző bejegyzésben bemutattam a Teris játék alapját a Grid játékteret és azt, hogyan tudunk erre különböző Tetris alakzatokat kirajzolni, különböző színekkel egy adott pozícióban. Ebben a bejegyzésben pedig random tetrominok-kal fogunk dobálózni és ide-oda forgatni.

  

  Továbbra is azokkal a tömbökkel dolgozunk, mint az előző bejegyzésben. A tetrominoNames tárolja a tetromin-ók elnevezését az oTeromino, lTetromino, zTetromino stb... a tetrominok mátrixát a squeren (a squares tömb tárolja magát a játékteret), a theTetrominoes pedig az összes tetrominot gyűjti egy tömbbe. A colors tömb a színeket tárolja.
  Ezt azt egészet amúgy célszerű lenne egy objektumban tárolni, de ez majd csak a következő verziók feature-e lesz.

  
  A random változóval továbbra is egy véletlen számot lehet generálni a tetromino tömb hosszának függvényében.
  A current változó tartalmazza az aktuális tetrominot, amit épp irányítunk, forgatunk stb.
  A nextRotatedCurrent pedig a current tetromino következő forgatott változatát jelenti az aktuális tetrominonak.

  Folytatás...

  Bzozoo 8 hónapja 7

• Új online háttérrendszer tesztelő alkalmazást kerestem.

  Eddig csak a #POSTMAN-t ismertem API tesztelésre (amit szintén alig pár hónapja ismertem meg igazán és jöttem rá a webfejlesztésben betöltött fontos szerepére), de a használata során rájöttem, hogy nekem kissé túlbonyolított a felülete, így valami letisztultabbat, mégis dizájnosabb felületet kerestem.
  Elsőkörben a ReqBin-t dobta fel a Google, ami pedig kissé fapadosnak tűnt a Postman után. Aztán mentem tovább és így futottam bele az Apitester.Com-ba, ami egy béta projekt, de rendkívül bíztató, hogy a Google ezt dobta másodiknak.
  Egyelőre nem keresek tovább, ez bőven megfelel a céljaimnak.
  Azért kommentben megírhatod, hogy te milyen eszközzel teszteled a háttérrendszered működését, az mért jó, milyen extrákat tud, stb...
  
  
  
  

  Folytatás...

  Bzozoo 8 hónapja 0

• NodeJS JavsScript alkalmazások automatikus futtatása

  NodeJS alkalmazások automatikus futtatására találtam egy remek cuccot a PM2-t

  A NMP INSTALL -G PM2 PARANCCSAL TELEPÍTHETJÜK, AMIT A TERMINÁLON TUDUNK KIADNI.
  EZUTÁN PM2 START SERVERNEVE.JS PARANCCSAL INDÍTHATJUK A NODEJS-ES JAVASCRIPT ALKALMAZÁSAINKAT

  
  1. kép: A PM2 monit parancsot kiadva egy négy felé osztott ablak nyílik meg a terminálon, ahol egy helyen figyelhetjük az elindított NodeJS alkalmazásainkat. A JavaScript alkalmazás által console log-ot és az alkalmazás minden fontos adatát

  
  2. kép: A PM2 list paranccsal a terminálban kilistáztathatjuk a futó alkalmazásainkat, azok CPU és memóriahasználatát és futási idejét lehet látni, illetve a NodeJS alkalmazásaink futtató rendszerfelhasználó nevét.

  Folytatás...

  Bzozoo 9 hónapja 0

• Építsünk Tetris Játékot JavaScript alapokon I - Rajzoljunk Tetromino-t

  Készítettem egy Tetris játékot JavaScript programnyelven , ami alatt rengeteg sok dolgot tanultam, sok minden amit eddig nem láttam az körvonalazódni kezdett, illetve nagyon sok minden teljesen kivilágosodott számomra. Ezért szeretnélek téged is végigvinni ezen a folyamaton, a játék kódjainak bemutatásával.

  A cikk több részes lesz, mert az anyag nagyon terjedelmes, nem fér bele egy teljes cikkbe, illetve így az egész cucc emészthetőbb lesz.

  Hol is kezdjük?
  Elsőként készítsük el magát a játék teret.
  A Tetris játék fő játéktere egy téglalap, amiben különböző alakú objektumok haladnak felülről lefelé. Ha a leérkezett objektumokból kirakunk egy teljes sort, a sor eltűnik és pontot kapunk. De most nem azért vagyunk itt, hogy a játék menetét ismertessem.
  Ha már foglalkoztál HTML-el, vélhetően rögtön beugrik, hogy a téglalap fő játéktér kivitelezhető egy <div>-vel, a benne lévő alakzatok rácsba rendezett div-ek színezésével kirajzolható. Tehát lesz egy fő téglalap alakú div-ünk, benne négyzet alakú div-ekkel.

  

  Folytatás...

  Bzozoo 11 hónapja 0

• Felhasználói felület PHP sessionnal és Fetch API-val

  Az alábbi tutorialban egy olyan felhasználói felületet készítek el, SQL kapcsolat nélkül, ami a PHP sessionjából dolgozik

  A "Webalkalmazás" egy egyszerű login felületből áll, majd bejelentkezve az USER PROFIL-t érhetjük el. A felületre jelszó nélkül lehet belépni, a felhasználónév pedig a login felületen beírt név lesz. A backend SQL-hez nem kapcsolódik, szóval a profilok nem "valóságosak", most csak a PHP session működését és a sessionból kinyert adatok frontend oldalon történő megjelenítését szeretném megmutatni.
  De nézzük meg képekben, hogy miről is van szó.

  

  Ez a login form. Benne egyetlen input mezővel. Ide bármit beírhatunk, a login gomb megnyomásakor ez lesz a felhasználónevünk. A gyors instant user létrehozás érdekében az inputmező alapértelmezett értéke a Guest + 4 jegyű szám.

  

  Folytatás...

  Bzozoo 11 hónapja 0

• Easybackend PHP-vel és Fetch API frontendel

  A backendet legtöbbször arra használunk, hogy adatokat küldjünk neki és az letárolja ezeket a kapott adatokat, majd visszaküldje azt a frontendnek, ha annak szüksége van rá. Magyarul úgy is mondhatjuk, hogy háttérrendszer. De akár számításokat is lehet elvégeztetni egy ilyen háttérrendszerrel, nemcsak tárolásra alkalmas.
  A cikkben bemutatott kódok egyikében sincsenek adatbázis kapcsolatok, nincsenek benne bonyolult dolgok, épp ezért szeretném az alább bemutatott kis "Easybackend"-en illetve az ehhez kapcsolódó "Easyfrontend"-en keresztül bemutatni neked a Backend vs Frontend kommunikáció működését, ha kezdő vagy és nem nagyon érted miről van szó.

  Mit csinál a bemutató alkalmazás? Az alkalmazás bekér egy számot, amit továbbít a szervernek, az megkapja ezt a számadatot, majd nagyon egyszerű műveleteket hajt végre rajta (Duplázás, Felezés, Hozzáad egyet, Levon belőle egyet stb), ezután a frontend lekéri a kiszámolt végeredményeket és kiírja egy megadott "div"-be (Lásd HTML alapismeretek).

  Folytatás...

  Bzozoo 11 hónapja 0