-
GAMEPOD.hu
JavaScript != Java (A JavaScript nem összekeverendő a Javával, két különböző programozási nyelvről van szó!)
Új hozzászólás Aktív témák
-
bucihost
senior tag
válasz martonx #7750 üzenetére
[link] itt a teljes neten lelt kód.
Van egy chat, ami js alapú. Annak a smiley listájába szeretném beintegrálni, de jelen formában nem nyeli be. Ott a chat agya egy 2000 soros JS file.
A fenti kódban amúgy 1 dolgot nem értek. $(".name").hide(); "name" class nem létezik, akkor mit rejtene el?
-
martonx
veterán
válasz bucihost #7751 üzenetére
Az a sor semmit nem csinál, picit megformázva: https://jsfiddle.net/8yvxuk6n/
[ Szerkesztve ]
Én kérek elnézést!
-
bandi0000
nagyúr
válasz bandi0000 #7747 üzenetére
+ egy kis Responsive ötlet is jól jönne
Szintén Angular material, + Angular Flex-Layout
Ötlet az az, hogy angularba nyitok egy dialogot a bejelentkezés és regisztrációhoz, viszont úgy szeretném megoldani a kettő közti váltást, hogy a dialogon belül 2 db gomb lenne, egymás mellett, amik egyenként elfoglalják a szélesség 50-50%-át, viszont a legkisebb állapotában minden vezérlő egymás alá kerülne
Nagyrészt ezek meg is vannak, csak az első fejtörést az okozza, hogy a dialognak kellene egyáltalán adni szélességet? mert ugye elvileg felveszi a tartalomnak a szélességét
A másik dolog, hogy ahogy összehúzom a böngészőt, a beviteli mezők szépen egymás alá kerülnek, viszont a gombok nem, ez azért lehet mert megadtam nekik, hogy 100% legyen a szélességük, ha viszont ezt kiveszem, akkor meg nem töltik ki a helyet
(beviteli mezők külön komponensben vannak, azokat alul szúrom be)<div fxLayout="column">
<div fxLayout="row" fxLayoutAlign="end">
<button mat-button (click)="closeDialog()">
<i class="material-icons">close</i>
</button>
</div>
<div fxLayout="row">
<div fxFlex="100">
<button mat-button (click)="isLoginActive= true"
[class.btn--disable]="isLoginActive"
class="full-width no-shape">Login</button>
<button mat-button (click)="isLoginActive= false"
[class.btn--disable]="!isLoginActive"
class="full-width no-shape">Registration</button>
</div>
</div>
</div>
<div *ngIf="isLoginActive">
<app-login></app-login>
</div>
<div *ngIf="!isLoginActive">
<app-registration></app-registration>
</div>
[ Szerkesztve ]
Xbox One: bandymnc
-
cattus
őstag
válasz bandi0000 #7753 üzenetére
FxLayout esetében van olyan, hogy megadod, hogy egyes méretekben hogy viselkedjen. Pl.
<div fxLayout="row" fxLayout.xs="column"></div>
esetén xs méret esetén column, felette row elrendezést használ. Így maradhat a 100% is. Van még gt-xs meg lt-xs is (meg persze a többi méretre is).Do the thing!
-
-
petyus_
senior tag
válasz bandi0000 #7747 üzenetére
Ha mutatsz kódot, kicsit könnyebb lenne. Írtad, hogy Materialt használsz, ott ha több hibaüzenet is van, akkor neked kell kezelned, hogy melyik mikor jelenjen meg, alapból csak annyit néz, hogy dirty || touched, és ha van hiba, akkor megjeleníti (ha több hiba van, akkor mindet). Neked megírnod mindegyik hibára, hogy melyik mikor jelenjen meg.
Illetve, ha már dirty || touched, és ezért mutatja a required hibát, akkor egyértelmű, hogy mutatja a "nincs e betű" hibát, mert ha üres, akkor nincs e betű .
Nekem pl van egy ilyenem:
<mat-form-field>
<mat-label>Name</mat-label>
<input type="text" id="name" formControlName="name" matInput />
<mat-error *ngIf="accountName.hasError('required')">Account name is required</mat-error>
<mat-error *ngIf="accountName.hasError('minlength')">Account name must be at least 3 characters</mat-error>
</mat-form-field>Itt a required akkor jelenik meg, ha dirty || touched, a minlength-es pedig akkor, ha 1 vagy 2 karakter van beírva, de ez a gyári minlength, itt megvan írva ez a viselkedés.
[ Szerkesztve ]
-
bandi0000
nagyúr
válasz petyus_ #7758 üzenetére
Igazából [ennyi]
egyenlőre még hunglish de majd többnyelvűsítés a cél, igazából a gyári validatoroknál le van valahogy kezelve ez szerintem, mert pl egy üres mezőre nem írja ki, hogy kötelező, és email formátumnak meg kell felelnieDe akkor majd utánanézek, hogy lehet ezt normálisan kezelni
Xbox One: bandymnc
-
martonx
veterán
-
petyus_
senior tag
válasz bandi0000 #7759 üzenetére
Nemrég kezdtem el használni a materialt, tehát nem 100%, hogy én tudom jól, de "mat-error"-ból lehet több, abba kell belerakni az error-message-eket (szerkesztettem az előzőt, raktam be egy saját kódot).
Viszont itt most a ts file kéne, ahol megírtad a custom validatort.
Egyébként pl a minlength így van megírva:static minLength(minLength: number): ValidatorFn {
return (control: AbstractControl): ValidationErrors | null => {
if (isEmptyInputValue(control.value)) {
return null; // don't validate empty values to allow optional controls
}
const length: number = control.value ? control.value.length : 0;
return length < minLength ?
{'minlength': {'requiredLength': minLength, 'actualLength': length}} :
null;
};
}isEmpty ennyit csinál:
return value == null || value.length === 0;
-
bandi0000
nagyúr
válasz petyus_ #7761 üzenetére
Az igazából ennyi:
export function containDigit(control: AbstractControl): { [key: string]: boolean } | null {
if(control.errors?.required || control.errors?.minlength || control.errors?.maxlength){return null; }
if (!/[A-Z]/.test(control.value) && environment.passwordContainDigit) {return {
'containUpperCase': true }
}
return null;}
Akkor ír ki 2 hibaüzenetet amikor belekattintottam a mezőbe, de nem írtam semmit, nyilván olyankor required-re is lő, meg erre is, ezért próbálkoztam az első if-ben, megnézni, hogyha van már a required-re hiba, akkor ne is nézze ezt
[ Szerkesztve ]
Xbox One: bandymnc
-
bucihost
senior tag
válasz martonx #7760 üzenetére
Patika!
Annyi, hogy az image.style.display = ''; és image.style.display = 'none'; -t fel kellett cserélni, valamint .addEventListener('keyup', event => { helyett document.addEventListener('keyup', event => { lett, mert amugy beintegrálva Cannot read property 'addEventListener' of null hibát dobott. Már tökéletesen működik a chaten is. Köszönöm szépen
-
petyus_
senior tag
válasz bandi0000 #7762 üzenetére
Kipróbáltam most a te validátorodat, és nekem jól működik.
Így néz ki a html:
<mat-form-field class="w-100">
<mat-label>Name</mat-label>
<input type="text" id="name" formControlName="name" matInput placeholder="Enter category name" />
<mat-error *ngIf="name.hasError('required')">Name is required.</mat-error>
<mat-error *ngIf="name.hasError('minlength')">Name must be at least 3 characters.</mat-error>
<mat-error *ngIf="name.hasError('containUpperCase')">Must conatin uppercase</mat-error>
</mat-form-field>
És a ts-ben annyit csináltam, hogy beleraktam a te functionödet, meg hozzáadtam a formcontrolhoz:
name: new FormControl('', [Validators.required, Validators.minLength(3), this.containUpperCase]),
Így üresen, és 3 karakter alatt csak a minlength hibát írja, containUpperCase-t meg utána (átneveztem containDigit-ről ).
A name az egy sima getter, vissza adja a 'this.form.control.name'-et, így átláthatódd a html.
[ Szerkesztve ]
-
petyus_
senior tag
válasz bandi0000 #7765 üzenetére
Ezeket a mat-error alapból figyeli, required-öt is pl csak akkor írja ki, ha rámész az input mezőre, és kijössz belőle, tehát ha rákattintasz, de még nem írtál bele, akkor ki sem írja, csak ha úgy hagyod el, hogy üresen hagytad, vagy írtál bele, de visszatörölted.
"Errors are hidden initially and will be displayed on invalid form fields after the user has interacted with the element" - ezért, ha csak egy error-message van a fieldhez, akkor nem is kell neked foglalkozni az ngIf-ekkel, csak ha több van, és akkor is elég, ha csak az adott error-t teszed az ngIf-be
[ Szerkesztve ]
-
bandi0000
nagyúr
Szerintetek Angularba "komoly" appban mennyire állja meg a helyét az olyan megoldás, hogy egymásba ágyazom a regisztrációt és a beléptetést is
Ugye, úgy néz ki a dolog, hogy van egy dialog componemsem, abban pedig selectorral illesztem be a regisztráció vagy a bejelentkezés form komponensét
És most vettem észre, hogy visszafele nem tudok kommunikálni, tehát ha regisztrál a user, akkor se nem tudom átváltani a felületet login-re, és se nem tudok visszafele adni adatot
Így 1.0 verzióban azt csináltam, hogy egymásba ágyaztam a regisztrációnál a 2 service hívást, sikeres regisztráció után meghívja a beléptetést, de ez így elég hoki megoldásnak tűnik, pláne, hogy hibát se tudok kezelni, bár elvileg nem is lehetne, mert a regisztrációs adatokat használja beléptetésnél ism de akkor is
2.0 refatorba arra gondoltam, hogy akkor 1 dialog lenne és benne 2 divvel belerakva mindkét form, nyilván *ngIf-el elválasztva, és így talán normálisabban lehetne megoldani, de még ez se tűnik annyira jónak
Bocs a sok apró kérdésért, de végre egy viszonylag "normálisabb" dolgot akarok összerakni, és tapasztalat híján nem tudom mik a best practice-k
(#7766) petyus_ : Na akkor ezt majd megnézem egy kis refactorral köszönöm
[ Szerkesztve ]
Xbox One: bandymnc
-
petyus_
senior tag
válasz bandi0000 #7767 üzenetére
Ha az a cél, hogy a regisztrált felhasználó egyből be is legyen léptetve, akkor az API-d register action-je akár vissza is küldheti egyből a tokent (nem tudom, hogy oldod meg a logint, gondolom jwt-vel, azt visszaadhatja a register method is), de ez csak egy tipp így hirtelen, működni működik, de nem tudom hogy szokták ezt megoldani.
[ Szerkesztve ]
-
bandi0000
nagyúr
válasz bandi0000 #7767 üzenetére
Na igazából rájöttem, maradjon itt az utókornak + nekemi is, ha elfelejtem
Tök jól meg van oldva, mert bármelyik componensből be lehet zárni a dialogot, csak el kell kérni a referenciáját a dialognak
private dialogRef: MatDialogRef<AccountModalComponent>
ürüm az ürümben, hogyha meghívom a dialofRef.close() metódust, akkor bármit vissza lehet adni benne, annak a komponensnek, amelyik megnyitotta a dialogot
Xbox One: bandymnc
-
Tomi_78
tag
Sziasztok ismét!
Módosítottam a játékom kódján egy kicsit, hogy - elvileg - minden számítógépen azonos sebességgel fusson, bár ezt még most nem tudom leellenőrizni, mivel pillanatnyilag nem vagyok ama "gyorsabb de a játékot lassabban futtató" gép közelében.
Ezért közzétenném itt a kódom ezt végző részét, hogy megnézhessétek és meg tudjátok mondani, hogy jó-e , ahogy csináltam.
Szóval szerintetek jó ez így? Az én gépemen simán fut. Akkor elvileg minden képfrissítési frekvencián jól működne?let jateksebessege = 100;
function jatekciklus() {
setTimeout(function() {
requestAnimationFrame(jatekciklus);
//a játékom fő kódja a rajzolással, stb.
}, 1000 / jateksebessege);
};
requestAnimationFrame(jatekciklus);
Egyébként innen puskáztam ki:
https://www.kirupa.com/html5/animating_with_requestAnimationFrame.htm
és annyit kellett átalakítanom rajta, hogy fentebb az utolsó sorba is be kellett szúrnom a requestAnimationFrame()-et, mert különben csak nagy fehérséget mutatott valamiért.
-
martonx
veterán
válasz Tomi_78 #7772 üzenetére
Két dolog:
1. tanuljuk már meg végre, hogy mi a különbség a let és const között ez a halálom, amikor valaki a legalapabb dolgot is fogalmatlanul használja.
2. nekem ez a megoldás sokkal szimpatikusabb: https://stackoverflow.com/questions/19764018/controlling-fps-with-requestanimationframe minden olyan megoldástól a hideg kiráz, ami animációval kapcsolatos és settimeout / setinterval van benne. Ezt a megoldás még kombinálnám annyival, hogy magát az animációt kiszervezném egy külön worker thread-be, mert ezekben az esetekben az a gond, hogy ha komplex az animáció / nagyon gyenge a futtató vas, akkor lehet, hogy több frame-et is át fogsz lépni, mint eredetileg tervezted.Én kérek elnézést!
-
Tomi_78
tag
válasz martonx #7773 üzenetére
Szia!
1. Ahogy én tudom (nem régóta és meglehet, rosszul), a különbség a let és a var között (e kettő alapján néztem utána) az, hogy a var egy blokkon belül érvényes, tehát ugyanolyan változó már nem lehet azon belül, míg a let esetében ilyen megkötés nincsen.
2. Megcsináltam most az általad ajánlott megoldás alapján; az én gépemen jól működik, tehát remélem, mindenhol így lesz. Csak azt nem értem, hogy a startTime változóra mi szükség van, hiszen azon kívül, hogy egyszer értéket kap, nem használatos?
Tehát itt a kód a játékomból:var fps, jateksebessege, startTime, most, akkor, eltelt;
// initialize the timer variables and start the animation
startAnimating(120);
function startAnimating(fps) {
jateksebessege = 1000 / fps;
akkor = Date.now();
startTime = akkor;
jatekciklus();
};
function jatekciklus() {
requestAnimationFrame(jatekciklus);
most = Date.now();
eltelt = most - akkor;
if (eltelt > jateksebessege) {
akkor = most - (eltelt % jateksebessege);
//...a program többi, rajzoló része...
-
Aureal
senior tag
Egy [object HTMLEmbedElement] tartalmát hogy tudom js-ben lekérni, ha szöveget tartalmaz?
-
K1nG HuNp
őstag
visszaterve picit meg a let es const reszelgetesre: a constot is teljesen feleslegesen hasznaljak az emberek az egyetlen hely ahol azt fogja csinalni a const mint amire szamitasz mas nyelvekbol az a
const SOME_VALUE = 12;
aconst obj = {};
pontosan ugyan ugy modositgathato mint a let-es baratja, cserebe jo megteveszto[ Szerkesztve ]
(raw_item.get("pk").unwrap().as_s().unwrap().to_string()).split("#").collect::<Vec<&str>>()[1].to_string()
-
disy68
aktív tag
-
disy68
aktív tag
Annyit hozzátennék, hogy az Object.freeze() is csak az adott object-re vonatkozik, ha van neki más object adattagja, ami mutable az az is marad. Teljes immutability-hez minden adattagon végig kell menni és az összes objectet freeze-elni.
Fiddle“Yeah, well, you know, that’s just, like, your opinion, man.” — The Dude
-
K1nG HuNp
őstag
én
let
-es vagyok, kevesebb karakter :pRemélem tetszenek kattingatni a Next.js-t, eleg durva dolgok jottek most
En most greenlightot kaptam cegnel, hogy osszedobjak egy alap projektet, amivel levaltanam a mostani korosodo boilerplatet ami meg jQuerys alapokon nyugszik mivel rajottunk, hogy mire behuzzuk a jQueryt es azt a par libet ami meg kell ugyan ott van a JS footprintunk mintha egy reactet tolnank, cserebe kezzel kell forditani a css-t es picit kaka a dev experience.
Annak nagyon orultem pl, hogy kezd leesni embereknek, hogy az SPA szar UX.
Kb jottunk egy teljes kort, en pl sosem irtam phpt de onboarding hetemen abban kellett site buildelnem, es volt valami elegancia abban hogy felpakolsz egy php filet ftpre es fut es atom gyors 123kB js nelkul isCRA-t pl mar ne hasznaljon senki, aki arra vetemedne, hogy mostanaban Reactozik, es mostmar a Gatsbyba is szerintem felesleges sok idot foccolni, tud mindent a Next 9.3 ota, kissebb bundlesizeval, kb 0 proprietary dologgal es tobb lehetoseggel.
[ Szerkesztve ]
(raw_item.get("pk").unwrap().as_s().unwrap().to_string()).split("#").collect::<Vec<&str>>()[1].to_string()
-
martonx
veterán
válasz K1nG HuNp #7789 üzenetére
"es volt valami elegancia abban hogy felpakolsz egy php filet ftpre es fut es atom gyors 123kB js nelkul is" - a PHP előnyei kb. itt meg is állnak
Amúgy meg a server side rendering mindig is nagyságrendekkel gyorsabb volt, nem véletlenül erőltetik majdnem mindenhol az SSR-t.Én kérek elnézést!
-
K1nG HuNp
őstag
Ezt miota hazakuldtek Pestrol korona miatt es szar a netem hatvanyozottan ateltem:
Egy weboldalnak nem kellene masodpercekig full page loadereket a kepedbe tolnia. Elkepesztoen rosszak a First Meaningful Paint es Time to Interactive szamok az osszes SPA-nal.
Szandekosan irtam, weboldalt, a webappoknak termeszetesen nagyon nincs mas lehetoseguk, ott szukseg van a teljes js bundlera elso megjelenites elott, bar a PWA ott is eleg jo megoldast kinal, lasd: twitter.
Maradva a CRA-nal: miert szednel le olyan JS kodot ami olyan aloldalhoz tartozik amit lehet sosem latogatsz meg, es teszed ezt minden oldallekeres soran?
A Gatsby es a Next is ezt ugy kuszoboli ki, hogy egyreszt aloldalankent code splittel, masreszt az alapvetes a statikus html kesobbi rehidratalasa reactel, azaz lemegy az usernek a skeleton, a time to first byte teljesen megegyezik azzal mintha semmi JS kod nem lenne az oldalon, majd amint vege a rehidratalasnak ott vagy egy teljes Reactel
tisztazva:
Server Side Rendering: http keresre a szerver on-demand legeneralja a html-t es lekuldni.
Static Site Generation: build idoben, azaz otthon a te gepeden lefut a react statikus html, js, css fajlokba exportalas es ezt te csak felrakod CDNre.Mindket esetben ugyan az a vegeredmeny, eloszor egy html filet kapsz jobb esetben beinjektalt critical css-el, ez valszeg ki is teszi az elso TCP kort, es csak kesobb kapod meg a JS kodod ami megint legelso korben rehidratal.
[ Szerkesztve ]
(raw_item.get("pk").unwrap().as_s().unwrap().to_string()).split("#").collect::<Vec<&str>>()[1].to_string()
-
K1nG HuNp
őstag
Nem lesz SPA, az SPA-kban a routingot a React oldja meg, a Next.js es Gatsby eseteben kulon fajlod van minden pathodra.
Pl: SPAnal a weboldal.hu/asd eleresehez le kell jonnie a teljes hobelebancnak mire beroffen a router es atrak a /asdra.
Az gatsbynal van alapbol fajlod a /asd endpointra amit egybol tudsz lekuldeni, nextnel is same, esetleg ha SSR-t valasztottal akkor varni kell meg a szerver megcsinalja es lekuldi
Az hogy hidratalas utan lesz meno JS routered amiel weblap ujratoltes nelkul tudsz maszkalni az nem azt jelenit hogy SPA lenne az oldalad, az a React velejaroja
[ Szerkesztve ]
(raw_item.get("pk").unwrap().as_s().unwrap().to_string()).split("#").collect::<Vec<&str>>()[1].to_string()
-
Zedz
addikt
válasz K1nG HuNp #7794 üzenetére
lesz meno JS routered amiel weblap ujratoltes nelkul tudsz maszkalni az nem azt jelenit hogy SPA lenne az oldalad
Dehogynem, attol lesz SPA, hogy egy "shellben" folyamatosan csereled a tartalmat, dinamikusan, ujratoltes nelkul. Az, hogy ez a cucc most CSR vagy SSR, az mindegy. -
K1nG HuNp
őstag
En azt tartom SPA-nak aminek egy index.js endpointja van es semmi mas A fentebb leirtaknak nem egy van.
(raw_item.get("pk").unwrap().as_s().unwrap().to_string()).split("#").collect::<Vec<&str>>()[1].to_string()
-
bandi0000
nagyúr
Nem tudtok ajánlani valami jó és egyszerű Text editort?
Kb annyi és olyan elem kellene mint itt a ph-n, viszont nem bootstrap alapú, mert Angular Materialt használom
Korábban martonx ajánlotta a CkEditor-t, de kicsit overkillnek érzem ehhez a projekthez,plusz elég sokat bogarászok mire megtalálom hogy kell 1-1 beállítást megcsinálni
[ Szerkesztve ]
Xbox One: bandymnc
-
K1nG HuNp
őstag
Ha letiltod a javascriptet a bongeszodben akkor az SPA-k konkretan meghalnak mig a next es gatsby mukodik + nem index.html lesz az eredmeny, nezd meg a bongeszod network tabjen, egyenkent cachelheto kulonallo html fajljaid vannak, pont mintha kezzel irtad volna oket.
Tultargyaltuk
(raw_item.get("pk").unwrap().as_s().unwrap().to_string()).split("#").collect::<Vec<&str>>()[1].to_string()
Új hozzászólás Aktív témák
- Léghűtés topik
- Érkezik Magyarországa az LG szuper dizájnos hordozható projektora
- World of Tanks - MMO
- Otthoni hálózat és internet megosztás
- Ukrajnai háború
- Stellar Blade
- AMD off topik: VGA, CPU, APU és minden, ami AMD
- AMD K6-III, és minden ami RETRO - Oldschool tuning
- Így építsd a billentyűzeted!
- Linux felhasználók OFF topikja
- További aktív témák...
Állásajánlatok
Cég: Promenade Publishing House Kft.
Város: Budapest
Cég: Ozeki Kft.
Város: Debrecen