Hirdetés
-
Toyota Corolla Touring Sport 2.0 teszt és az autóipar
lo Némi autóipari kitekintés után egy középkategóriás autót mutatok be, ami az észszerűség műhelyében készül.
-
Destiny 2 - Végre megérkeztek a régóta várt új pályák
gp A PVP csomag mindenki számára ingyen elérhető lett a minap.
-
Egyre nagyobb a hatása a választásokra az AI-generálta képeknek
it Az OpenAI ezért külön eszközt hoz létre, hogy azonosítsa a DALL-E 3 által létrehozott képeket.
-
Mobilarena
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
-
inf3rno
nagyúr
Milyen könyvtárat ajánlotok most kliens oldalra? Ilyen klasszikus dolgok kellenek, hogy táblázatok, egy-egy rekord szerkesztése, kb. mint egy ügyviteli rendszerben, semmi extra, de azért ne a 90-es évek table kinézete. A szerverről JSON-LD-t küldenék, vagy max JSON-t valami REST-es megoldással. Ha lehet ne legyen nagyon elrugaszkodott, nem vagyok oda a túlzott absztrakcióért.
[ Szerkesztve ]
Buliban hasznos! =]
-
nevemfel
senior tag
válasz inf3rno #9151 üzenetére
Én a Datatablest használtam párszor. Van hozzá editor plugin, de ezzel még nem próbálkoztam, és az ráadásul fizetős, de talán ez kiváltható más megoldással.
Forget your troubles, c'mon get happy
-
inf3rno
nagyúr
Köszönöm mindkettőtöknek! Azt hiszem átnézem a licenszeket és árazást is mielőtt döntök. Sokszor csak akkor ingyenes valami, hogyha nem üzleti célhoz használom. Nem tudom a vue esetében mi a helyzet ilyen téren.
szerk:
Datatables is ingyenes MIT licensszel. Úgy tűnik a support, ami pénzbe kerül. [link] A Vue szintén MIT. [link][ Szerkesztve ]
Buliban hasznos! =]
-
nevemfel
senior tag
válasz inf3rno #9154 üzenetére
A datatables ingyenes, de az editor plugin nem tűnik annak. Persze lehetséges, hogy van mód az ingyenes használatra, ebben a részében nem mélyültem el.
Forget your troubles, c'mon get happy
-
Ukeve
tag
Sziasztok!
Egy kis segítséget szeretnék kérni.
Egy React alapú webalkalmazást fejlesztek, ahol adott ez a komponens:const MainLesson = () => {
const navigate = useNavigate();
const [ openID, setOpenID ] = useState();
const initialState = '0';
const [ childOpenID, setChildOpenID ] = useState(initialState);
useEffect(() => {
console.log('Beállítjuk a localstorage-nek az id-t');
localStorage.setItem('id', JSON.parse(childOpenID));
console.log('Beállítottuk a localstorage-nek az id-t');
});
return (
<div>
{LessonsData.map((lessonItem) =>
<div key={lessonItem.id} onClick={() => setOpenID(lessonItem.id)}>
{lessonItem.id !== openID
? <LessonCard taskItem={lessonItem} />
: lessonItem.id === openID && lessonItem.subsection > 0 ?
lessonItem.child.map((lessonChildItem) =>
<div key={lessonChildItem.id}
onClick={() => {
setChildOpenID(lessonChildItem.id);
}}
>
<LessonCard taskItem={lessonChildItem} />
{childOpenID !== '0' &&
navigate(`/lesson/${childOpenID}`)}
</div>)
: <LessonCard taskItem={lessonItem} />}
</div>)}
</div>
);
};
A komponens lényege röviden az, hogy ha egy adott LessonCard-ra rákattintok, akkor a localstorage-ben eltárolja annak az id-ját és ha az egy gyerekelem, akkor át is navigál a megfelelő oldalra.
Az App-ben pedig dinamikusan kezelem azt, hogy az id-nak megfelelő oldal nyíljon meg:function App() {
const authenticationContext = useContext(AuthenticationContext);
const getLessonID = () => {
console.log('Átadjuk az app-ben az id-t');
const id = JSON.parse(localStorage.getItem('id'));
console.log('id az app-ban:', id);
return id;
};
const lessonID = getLessonID();
console.log('lessonID:', lessonID);
return (
<Layout>
<Routes>
<Route path='/' element={<HomePage />} />
{!authenticationContext.isLoggedIn &&
<Route path='/authentication'
element={<AuthenticationPage />}
/>}
<Route path='/authors' element={<AuthorsPage />} />
<Route path='/contact' element={<ContactPage />} />
<Route path='/topics' element={<TopicsPage />} />
{authenticationContext.isLoggedIn &&
<Route path='/lessons' element={<LessonsPage />} />}
{authenticationContext.isLoggedIn &&
<Route path='/profile' element={<UserProfile />} />}
{authenticationContext.isLoggedIn &&
<Route path='/lesson/:id'
element={lessons.content.body.map(
block => block.id === lessonID &&
Components(block))}/>}
<Route path='*' element={<NotFound />} />
</Routes>
</Layout>
);
}
A probléma az, hogy ha rákattintok egy adott leckére, akkor szépen átnavigál a megfelelő oldalra és be is teszi a localstorage-be az id-t, viszont mivel az App nem renderelődik le újra, így a képernyőn mindig az előző lecke oldala nyílik meg. Ezt úgy kell érteni, hogy rákattintok először a 21-es id-jú leckére, majd visszamegyek és meg akarom nyitni a 22-es id-jú leckét, akkor az url jó lesz, tehát "localhost:3000/lesson/22" lesz, de a 21-es oldalát látom. Ha ráfrissítek az oldalra, akkor marad a jó url, viszont már a 22-es leckét fogom látni.
Az lenne a kérdésem, hogy szerintetek hogyan lehetne megoldani azt, hogy azelőtt kapja meg az App localstorage-ból az id-t, mielőtt még elkezdené lerendelni az adott komponens, így elérve, hogy jó oldal legyen megjelenítve?Előre is köszönöm a segítséget!
-
lanszelot
addikt
Hello,
Object-höz szeretnék object-et adni, hogy utána json file-ba kitoljam.
Tehát tömb nem jó.
Példa: linkek az alap object, amihez adnám a youtube, amin belül a link és a kép -eket adnám.
t0linkek = {// "youtube": {// "kep": "youtube.jpg",// "link": "ww.youtube.com"// },// Több objectet dobálna hozzá , nem kézzel írom bele, loop dobálja bele.
Hogyan tudom ezt megcsinálni?linkek = {"youtube": {"kep": "youtube.jpg","link": "ww.youtube.com"},"google": {kep:...stb}};
[ Szerkesztve ]
-
_ak_
addikt
Előre is elnézést az auto-correctes felig ékezetes, felig magyar, felig angol kommentert.
Mivel magamtol nem jöttem ra ezért osszelegoztam a megoldást, ti ezt értitek? Úgy érzem, hogy feleslegesen toltam túl a dolgot:
const onlySelectable = allOptions
?.filter((e: { etype: string }) => e === 'SELECTABLE')
.map(({ eorder, eid }) => ({ eorder, eid }));
const filterAndAddOrderNum = (
selectionHistory: { eid: string, selectedOption: string }[],
onlySelectable: { eorder: number; eid: string }[]
) => {
const map = new Map();
const filteredSelectionHistory = selectionHistory?.selections?.filter(({ eid: id1 }) =>
onlySelectable.some(({ eid: id2 }) => id1 === id2)
);
filteredSelectionHistory.forEach((item) => map.set(item.eid, item));
onlySelectable.forEach((item) =>
map.set(item.eid, { ...map.get(item.eid), ...item })
);
return Array.from(map.values());
};
Lényegében van egy forrás JSON ami mindig a friss adatokat tartalmazza, az eorder változhat es nekem az alapján kell sorrendben megjelentetni az adatokat, illetve van egy history JSON ahol eddig csak az id es a user opciója volt elmentve. A feladat, hogy miután megkaptam a forrást es a history-t szinkronizáljam azokat. Tehát a redux state-ben a history-bol kinyert eid-hoz csatoljam eorder-t, igy a frissen megjelenített adatok es a history-bol jövő adatok is szinkronban lennének, mert időközben a sorrend es a tartalom is változhat. Az esetleg (user által) ujra elküldött adatoknak is tukrozniuk kell a forrásban történt változást.Nem feltétlen 1 liner megoldást keresek sõt, de egy másod véleménynek örülnék, hogy lehet-e ezt egyszerűbben is.
Let's begin, de gozaimasu!
-
nevemfel
senior tag
válasz martonx #9173 üzenetére
Nem kell elnézést kérned, nem tettél semmi rosszat. Csupán arra akartam felhívni a figyelmet, hogy javascriptben ez a fícsör még relatíve új ((persze kinek mi számít újnak. ami tavalyelőtt még divatos volt (kovid), az ma már idejétmúlt (ukrán háború miatt)) zárójel sokszorosan bezárva, nem akarom elterelni a témát).
Typescriptben bizonyára régebb óta megtalálható (nem ismerem a typescriptet, csak megnéztem egy videót a témáról).
[ Szerkesztve ]
Forget your troubles, c'mon get happy
-
Sziasztok!
Összedobtam egy JSFiddle-t a problémáról.
A probléma a következő: Adott 2 gomb, ami az én laikus olvasatomban ugyan azt kellene, hogy csinálja. Mindkettő JSON kezelés.
Csakhogy, az első gomb egy input (valóságban textarea, de itt lényegtelen) mezőbe beillesztett JSON formátummal dolgozna, a másik pedig egy JS-ben definiált JSON formátummal. A kettő tulajdonképpen ugyan az.
Mindazonáltal csak a második működik, az elsőre minden esetben ugyan az a válasz: undefinied. Persze azt már nem mondaná meg a console, hogy mi a véres t*k*m nincs definiálva...Valaki lát különbséget? Előre is köszönöm a válaszokat!
Ui.: Számomra az első gomb működése lenne a fontos.
But who is watching the guardians?
-
martonx
veterán
-
Köszönöm a válaszokat!
But who is watching the guardians?
-
lanszelot
addikt
Hello,
Hogyan tudom gomb nyomásra megváltoztatni a "steps(1)" -t "linear" -ra?.box span::before {
animation: animate 2s steps(1) infinite;
} -
lanszelot
addikt
válasz martonx #9183 üzenetére
Épp azt szeretném szépen megcsinálni.
Mert nem ennyi a formázása, hanem több mint 15sor, és azt újra és újra bemásolni 1 sor változás miatt, eléggé sufni tuning.
JS dom -al valahogy csak el lehet érni, és 90 kódsort fel lehet cserélni 1-re.Amúgy annak nincs adva class , mint ahogy látszik is, tehát kellene adnom egy class-t, tehát még több kódsor.
[ Szerkesztve ]
-
Sziasztok!
Kidolgoztam egy konvertert JS alapokon.
A következőt csinálja:
- Egy TextArea mezőbe 1:1-be be kell másolni egy excel tartalmát.
- A program kategorizálja a sorokat tartalmak alapján.
- Összesen 4 fajta formátumban elrendezi őket.
- Minden opcióhoz társítva van egy egyszerű másolás script.
- A kimásolt tartalmak úgy vannak generálva, hogy egy excel táblázatba másolva a helyes formátumban jelenjenek meg.Ezt szeretném kicsit fejleszteni és lövésem sincsen, hogy egyáltalán lehetséges-e.
A végeredménnyel ugyanis az alábbi történik:Megnyitnak egy excel táblázatot és készítenek 4 tabot. Minden tabba a megfelelő formátumú végeredményt beillesztik.
A kérdés az lenne, lehetne-e ezt automatizálni? Hogy csak egy Download gomb legyen és a konvertált végeredményekből létrehozza az excel fájlt a 4 tabbal, a megfelelő helyre betéve a megfelelő contentet és azt letöltse?
Megoldható ez?
Előre is köszönöm a válaszokt![ Szerkesztve ]
But who is watching the guardians?
-
-
Sziasztok!
Ha van egy loop ciklusom, akkor amíg az le nem jár, nem látható a végeredmény. Példa.
A példában látható, hogy az X azonosítóval ellátott elem végeredménye: 1000. Csakhogy! Én szeretném látni az összes többi állapotot, nem csak a végeredményt. Tudom, hogy a példám rohadt gyorsan fut le hozzá, de a végcél, amire kellene, az nem ennyiből áll, konkrétan egy több mp-ig futó kód állapotát akarom kiiratni %-ban.
Kérdés az, hogy van-e erre megoldás? Előre is köszönöm a válaszokat!
Ui.: Érdekesség, ahogyan látható a példában is, Console-ban működik a folyamatos kijelzés.
[ Szerkesztve ]
But who is watching the guardians?
-
Taci
addikt
Sziasztok!
A Google Search Console-ban látom, hogy a Googlebot rendre kihagy random JS-fájlokat, amikor az oldalamat indexeli. (És .css és .jpg fájlokat is, de az nem érdekel most annyira.)
A probléma az, hogy az oldal tartalmi részét a JS fájlok töltik fel, így amikor kihagyja őket, nem, vagy nem teljesen tölt be az oldal, így indexelés közben csak egy üres vázat lát.
Keresem, mi lehet a jó megoldás rá.
- Pár helyen azt írják, ha a fájlnevek sorrendjében tölti be a fájlokat, aztán amint elérte a limitet, hagyja a többit. Ezért ott azt javasolják, hogy a fontos JS fájlok mondjuk számokkal kezdődjenek. Pl. 01-fontos.js, 02-kevesbe-fontos.js, 09-abszolut-nem-fontos.js.
Ennek viszont ellent mond, hogy legutóbb pl. a bootstrap.min.js fájlt hagyta ki, holott az szinte a legelső az ABC-sorrendben.
- Máshol azt ajánlják, hogy össze kell vonni a JS fájlokat. Most 25 db JS fájlt használ az oldal, ezt amúgy a SEO checkerek rendszeresen szóvá is teszik. Ebből 9 db az enyém (a többi a HTML template-hez volt, és már abból is kiszedtem mindet, aminek a hiánya nem okozott hibát), ezeket össze tudom vonni, ha muszáj. Összesen amúgy 800kB ez a 25 JS fájl, az enyém ebből 100kB.
Viszont máshol meg azt írják, ez (az összevonás) csak régen volt hatásos, most már néha lassíthatja is a betöltést. Mondjuk az a pár század mp pont nem érdekel, ha a másik oldalon meg az van, hogy a be nem töltött JS-ek miatt az oldal tartalmi része üresen marad az indexelésnél.Még a CSS fájlokat is összevonhatom, hogy minél kevesebb fájl legyen a végén. De nem tudom, hogy a Googlebot csak darabszám alapján hagy ki fájlokat, vagy a fájlméretet is nézi.
Tudnátok ebben a témában tanácsot adni?
PageSpeed, hátha mond valami hasznosat, amit én nem értekKöszönöm.
-
sztanozs
veterán
JOGI NYILATKOZAT: A bejegyzéseim és hozzászólásaim a személyes véleményemet tükrözik; ezek nem tekinthetők a munkáltatóm hivatalos állásfoglalásának...
-
martonx
veterán
Css és Js file-okat valóban érdemes összevonni (ezt hívják bundle-nek).
Viszont ettől függetlenül a SEO legnagyobb barátja a server side rendering. Minden más, ami nem server side renderelődik, kétesélyes hogy megjelenik a google bot számára.
800kbyte js, óriási. Ha a google bot valami css, js-t nem tud X másodperc (de ez inkább kisebb, mint 1) alatt betölteni, akkor inkább hagyja a fenébe, nincs ideje szarakodni a lassú weboldalakkal.
Nem véletlenül írtam le, hogy nem kellene mindeféle szart behúzkodni kliens oldalra, mint pl. axios, amik csak totál feleslegesen növelik a bundle size-ot, és lassítják le az oldalt, rontják a pagespeedet. Cserébe legalább semmit sem adnak[ Szerkesztve ]
Én kérek elnézést!
-
Taci
addikt
válasz martonx #9191 üzenetére
Köszönöm a tanácsot.
A 800kB-nyi JS-t sikerült 250kB-ra összehúznom, és a felesleges CSS-eket is kigyomláltam, (eddig észre sem vettem, hogy ilyen rengeteg felesleges volt benne...) így a kezdeti 1MB-ból lett 650kB. Ami még így is sok, de majd innen folytatom.Viszont most már egyértelműen szóba áll velem a Google - legalábbis a fájlok mennyisége már nem zavarja.
A server side renderingen sokáig agyaltam, hogyan lehet megoldani, de trükkös, mert dinamikus a tartalom (görgetés után tölt az újabb és újabb tartalom), és ezt így nem lehet szerver oldalon generálni.
Arra gondoltam, hogy segítsem a SEO-t, pár percenként belegenrálom az index.html megfelelő részébe az aktuálisan legfrissebb 4 elemet (4-esével tölt görgetésnél), így az szerver oldalon lesz, és a Google is egyből látja. Aztán betöltésnél törlöm azt a div-et, és jön helyére egyből a friss.
Ez a terv egyelőre - jobb több nap alatt sem jutott eszembe.Köszönöm a segítséget.
-
martonx
veterán
-
martonx
veterán
Ne lighthouse-ban (böngésző F12) nézd, hanem a pagespeed weboldalán a google-nek: PageSpeed Insights (web.dev)
És itt is igaziból mostanra egyedül a mobilos szám számít, a google már csak ezt veszi bele a rangsorolásba.Én kérek elnézést!
-
Taci
addikt
válasz martonx #9195 üzenetére
Hú, akkor máris oda a sikerélmény. Ez gyors volt.
Viszont ahogy nézem, lassú nettel (Lassú 4G emulálása) csinálja azokat a teszteket, és attól azért nem lehet csodát várni egy képeket (is) tartalmazó oldal esetében.
De végig megyek mindenen, hátha valamit tudok még faragni.
Köszönöm. -
Taci
addikt
Meg tudnátok mondani, kérlek, hogy JS-ben mi a helyes hivatkozási "forma" a szerveren lévő fájlokra?
Jelenleg így használom (példának most még csak az Axios-t tudom felhozni, de ettől még jó példa):
axios.get("../html/feed_item.html")
HTML-ben pedig így:
<script src="../js/script.js?v=1.0.0"></script>
Tehát nem a teljes elérési út van megadva, csak a jelenlegi mappára viszonyítva, és ahhoz képest itt pl. ugye egy mappával visszább :
../
Nem hiszem, hogy saját kútfőből csináltam volna így, és most randomra megnéztem pár weboldalt, és ott sem egységes. Ezeket láttam még:
- teljes elérési útvonal (https://pelda.hu/js/script.js)
- egy db /-jellel kezdve (/media/product/.....)
- két db /-jellel kezdve (//stat.pelda.hu/script.js)Melyik a "helyes" (vagyis inkább ajánlott) módszer?
Azzal amit jelenleg használok, most egy kis probléma adódott, ahogy új aloldalakat hoznék létre, mert mivel új almappákba kerültek, a szükséges fájlok már más útvonalon vannak az előzőhöz képest. Ezért szeretném kikérni a véleményeteket, melyik irányba változtassak.
Nem tudom, van-e előnye/hátránya bármelyiknek is, de ti hátha tudjátok.
Nekem a teljes elérési út lenne a leglogikusabb, mégis, találtam jó pár nevesebb weboldalt, ahol nem így van - és nem tudom az okát.Köszönöm.
-
martonx
veterán
Ha egy url /-el kezdődik, akkor az jelenti azt, hogy a root url-hez képest.
Azaz a helyes megoldás a "/js/script.j?v=1.0.0"
A teljes elérési útvonalas megoldás is jó még, de ennek csak akkor van értelme ha pl. CDN-t használsz.
A // kezdetű ugyanez, csak az megengedi mind a http, mind a https-t, egy időben divat volt, de http-t már senki nem használ, szóval értelmetlen.Én kérek elnézést!
Új hozzászólás Aktív témák
- Több stúdiót is bezár költségcsökkentésként a Microsoft Xbox részlege
- Samsung Galaxy S24 Ultra - ha működik, ne változtass!
- Luck Dragon: Asszociációs játék. :)
- Google Pixel 6/7/8 topik
- Helldivers 2 (PC, PS5)
- Amazon Fire TV stick/box
- Milyen okostelefont vegyek?
- Gmail
- Szolnok és környéke adok-veszek-beszélgetek
- exHWSW - Értünk mindenhez IS
- 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