[ENG/DEU] Sunday: Spaghetti Code & Claude, Rum & FLEXNet

$1
(No, this image wasn't created under the influence of rum, but influenced by my passion to exciting design. Do you like it? Be honest!)

banner-800x200_commentrewarder-5_01.png

Actually, I “just wanted to quickly” integrate Lazy Load or Lozad - a JavaScript library that ensures that images/content are only loaded when they are actually needed (i.e. when they arrive in the “viewport” - or are about to). This is basically quite simple:

Eigentlich wollte ich "nur schnell" Lazy Load bzw. Lozad integrieren - eine JavaScript-Bibliothek, welche dafür sorgt, dass Bilder/Inhalte erst geladen werden, wenn sie auch wirklich benötigt werden (also im "Viewport" ankommen - oder kurz davor sind). Das ist im Grunde auch recht einfach:

[09:06] Either integrate the library via a browser source or store it on the server, adapt the code for the image elements and that's it. I'm more of a fan of having the resources on my own server - I've already had cases where third-party sources were temporarily unloadable, causing my own website to fall apart.

[09:15] Of course, I always test as soon as I've taken a step... FLEXNet currently offers 5 generators for images. 3 for title images, one for banners, another for small stuff. So at some point I added LazyLoad to the generators for the cover images and one generator no longer worked. After I or Claude were too stupid to figure out the difference, why the other image generators work as usual, but my image generator for the cover images from @CryptoCompany doesn't, I thought: oh come on, you wanted to combine all 3 cover image generators anyway and expand them...

[09:06] Bibliothek entweder per Browserquelle integrieren oder auf dem Server hinterlegen, den Code für die Bildelemente anpassen und that's it. Ich bin eher Fan davon, die Ressourcen auf dem eigenen Server zu haben - durchaus hatte ich es schon, das Drittquellen vorübergehend nicht ladbar waren und somit die eigene Website auseinanderfällt.

[09:15] Natürlich teste ich immer, sobald ich einen Schritt getan habe... FLEXNet bietet aktuell 5 Generatoren für Bilder. 3 Für Titelbilder, einen für Banner, einen weiteren für so Kleinkram. Also habe ich irgendwann die Generatoren für die Titelbilder mit LazyLoad ausgestattet und ein Generator hat nicht länger funktioniert. Nachdem ich oder Claude zu dumm waren, den Unterschied herauszufinden, warum die anderen Bildgeneratoren funktionieren wie gewohnt, aber mein Bildgenerator für die Titelbilder von @CryptoCompany nicht, dachte ich mir: ach komm, du wolltest eh alle 3 Titelbildgeneratoren zusammenlegen und erweitern...

Why do I currently have 3 generators for cover images in FLEXNet?

Because each generator is customized to the needs of different accounts. Generator 1 creates images as we know them from @CryptoCompany; a second one was created because @CCNewsFlash will become active again at some point and a third one is for PowerPaul.

Warum habe ich aktuell 3 Generatoren für Titelbilder in FLEXNet?

Weil jeder Generator an die Bedürfnisse verschiedener Accounts angepasst ist. Generator 1 erstellt Bilder wie wir sie von @CryptoCompany kennen; ein Zweiter ist mal entstanden, da irgendwann @CCNewsFlash wieder aktiv werden wird und ein Dritter ist eben für PowerPaul.

Why a universal image generator for FLEXNet?

Attractive cover images are important on the blockchain - they serve as a “click-me-factor”.

[13:32] ... Break on the terrace, 2 rum and a round of sleep ...

[19:17] I'm going about it the wrong way... I will first organize the spaghetti from generator 1 and then gradually incorporate the features from the other image generators into the main generator.

[20:53] Layzload is still not working. I suspect it's because the images are integrated in a bootstrap accordion. Take them out of there... Because in the other image generators they are in tabs instead of in an accordion.

[21:10] Yes, and that was exactly the “problem”. If the PHP code is in a tab instead of an accordion panel, then everything is fine. That fits quite well, since I only integrated the accordion solution in this one generator anyway and wanted to switch to tabs anyway, since tabs are more space-saving. All right; at least that's solved.

Warum ein universeller Bildgenerator für FLEXNet?

Attraktive Titelbilder sind wichtig auf der Blockchain - dienen sie doch als "Klick-mich-Faktor".

[13:32] ... Pause auf der Terrasse, 2 Rum und einer Runde Schlaf ...

[19:17] Ich gehe das falsch an... Ich werde erstmal die Spaghetti aus Generator 1 ordnen und dann nach und nach die Features aus den anderen Bildgeneratoren in den Haupt-Generator einarbeiten.

[20:53] Layzload funktioniert aber immer noch nicht. Ich vermute, es liegt daran, weil die Bilder in einem Bootstrap Accordion integriert sind. Sie dort mal rausnehmen... Weil in den anderen Bildgeneratoren sind sie in Tabs, statt in einem Accordion.

[21:10] Ja, Und genau das war das "Problem". Sofern der PHP-Code in einem Tab ist, statt in einem Accordion-Panel, dann ist alles gut. Das passt ganz gut, da ich die Accordion-Lösung eh nur in diesem einen Generator integriert habe und dies eh zu den Tabs wechseln wollte, da die Tabs platzsparender sind. Na gut; immerhin ist das gelöst.


A small note: I don't really want to go too much into technical aspects and technical terms in my dev reports - because then the article becomes unreadable for the majority of users. If you want more technical details, please ask in the comments.

Kleine Anmerkung: Eigentlich will ich in meinen Dev-Reports nicht zu sehr mit den technischen Aspekten und Fachbegriffen rumhauen - weil dann wird der Artikel für die Masse der User unleserlich. Wenn ihr mehr technische Details wollt, dann fragt bitte in den Kommentaren nach.


Greetings from Paraguay!

Follow for the lazy loading stuff!
No... Better follow @CryptoCompany & @BroBang, my game & blockchain project! You don't will regret it!

Your vote keeps development & fridges rollin'.


Rock 'n' Roll & Hive a great day!
Make the best out of it!


How to Be a Better Hivian?!

How to Be a Better Hivian?!


You like to stay informed or support PowerPaul or his project @CryptoCompany?
Here are our articles from the last 7 days:
(and on all of them the #commentrewarder is activated!)

@powerpaul | [ENG/DEU] #FunkyFrameFriday (yes... this week on Saturday...) | Musical Photo Contest Round #8 | Vot...
@powerpaul | [ENG/DEU] Saturday Savers Club: -92 HP in Week 27 2025 | 1,769 HP Needed for 2025 | 996,769 HP Neede...
@cryptocompany | [ENG/DEU] Remember: Friday's Favor = It's Discount Day Again! Up to 40% on CryptoCompany VoteView!



0
0
0.000
8 comments
avatar

This is a really smart setup! Splitting the generators based on use case titles, banners, and smaller elements is such a practical approach. Adding lazy loading for the cover images was a great optimization too, it definitely helps with performance, especially when dealing with multiple visuals.

0
0
0.000
avatar
(Edited)

I agree 200% with you. And I have a lot of graphic elements in these generators... How much time or data I wasted by always waiting... What a luck I have to improve all now, because I like to open FLEXNet to you... I have a tester from Cba in FLEXNet right now and he will be so happy to have this reduction of needed data. Because yes, FLEXNet shouuld be as fast as possible too...

And when I see most "artwork" on Hive I know Hivians can profit from this tool. People will like/love it...

Bro, Hive a great start into the new week!

0
0
0.000
avatar

Don't ask me, because I'm like an underwater cat in programming 😂

!BBH
!LOLZ

0
0
0.000
avatar

(No, this image wasn't created under the influence of rum, but influenced by my passion to exciting design. Do you like it? Be honest!)

It has a unique design that can be improved, but it is very effective for its purpose. So it is excellent.

0
0
0.000