[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?

Az a sor semmit nem csinál, picit megformázva: https://jsfiddle.net/8yvxuk6n/

[ Szerkesztve ]

Én kérek elnézést!

+ 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

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!

Köszönöm, ez lett a megoldás

Xbox One: bandymnc

bakker, már épp teljesen átírtam, amikor sikerült reloadolnom a nyomorult jsfiddle-t. Ez esetben sok sikert hozzá. Bagatell átírni, kivéve a fadeout-ot, ami vanillajs-ben nyilván nincs. De én már nem állok neki még egyszer.

Én kérek elnézést!

Köszi! Megnéztem, de nem működik. jsfiddle-n sem szűri a "képeket"

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 ]

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 felelnie

De akkor majd utánanézek, hogy lehet ezt normálisan kezelni

Xbox One: bandymnc

Tessék. https://jsfiddle.net/6n0g8cyw/

Én kérek elnézést!

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;

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

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

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 ]

De így nem figyeli a dirty és pristine tulajdonságokat nem? Mármint ha belekattintassz a mezőbe, akkor nem ír ki hibát, sőt elvileg a a requiredre nem is fog hibát jelezni csak a form lesz invalid

Xbox One: bandymnc

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 ]

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

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 ]

Igen ezen is gondolkodtam, talàn lehet ez lenne a legjobb kompromisszum

Xbox One: bandymnc

nm. Máskor ne félj nekiállni jquery mentesíteni egy kódot. A jqueryben semmi varázslat nincs.

Én kérek elnézést!

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

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.

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!

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...

Csakhogy ő nem a var vs let-ről beszélt, hanem a let vs const-ról

Ki beszélt var-ról? Starttime akkor lehet, hogy nem is kell. 120 fps felejtős. Jó lenne a magyar változó neveket elfelejteni.

Én kérek elnézést!

Egy [object HTMLEmbedElement] tartalmát hogy tudom js-ben lekérni, ha szöveget tartalmaz?

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; a const 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()

Ez azért így nem igaz. A const-al létrehozott változó referenciája nem lesz változtatható, viszont ettől a változó nem válik immutable-é, ez ahogy tudom más nyelveknél is így van.
Fiddle

“Yeah, well, you know, that’s just, like, your opinion, man.” — The Dude

Más, nem szkripnyelvekben a const általában fordítás idejú konstanst jelöl, tehát utána a belső állapota sem változhat meg (pl. objectek esetében) az első értékadás után. Ugyanezt JS-ben az Object.freeze() tudja elérni.

Do the thing!

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

én let-es vagyok, kevesebb karakter :p

Remé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 is

CRA-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()

az SPA szar UX

Miert?

"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!

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()

Azt ugye vagod, hogy a Next is SPA lesz vegul? Az SSR csak az elso loadnal segit.

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()

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.

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()

Mindig egy index.html lesz az eredmeny. Az, hogy mondjuk nextjsben kulon fileok jelentik a routingot, az megint mas. Angularban is meg tudod csinalni ezt a fajta codesplittinget, es ott a routing az teljesen kulonbozik.

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

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()