Reduzierung von externen Quellen: toastr

Software
1

Ich hab auf dem Weg durch Bootstrap festgestellt, dass es in v5 auch ein Toaster System gibt, das auch sehr fesch aussieht. Also auf jeden Fall im Design von Bootstrap.

Drum hab ich das mal umgesetzt und den toastr rausgeworfen (hier im Branch replace_toastr zu testen). Hab auch gleich einen PR gemacht.

Netto macht das ein Plus von 20 Zeilen, dafür spart es 12kB an JS und CSS und nutzt einen Deut mehr von den Funktionen von Bootstrap – das wir ja eh schon da haben :wink:

So sieht das dann aus im Darkmode…

image
image855×798 22.5 KB

… bzw im Whitemode auf kleinem Bildschirm.

image
image450×698 23.6 KB

PS: Die Tests laufen auf dem PR nicht durch, allerdings bezweifle ich, dass das mit meinem Code zu tun hat :thinking:

4 „Gefällt mir“
2

Gefällt mir!

Die Tests laufen auf dem PR nicht durch, allerdings bezweifle ich, dass das mit meinem Code zu tun hat :thinking:

Wir haben aktuell ein Problem mit fehlendem IRAM-Speicher: Aktueller Stand ESP32-Arduino 2 - #218 von tueddy

1 „Gefällt mir“
3

Ich finde es auch gut, wenn eine Abhängigkeit wegfallen kann.

Ich würde versuchen, die Fenster etwas transparent zu machen, in deinen Screenshots finde ich sie zu sehr dominant.

Sollte gut möglich sein, siehe Bootstrap 5 Toasts Translucent - GeeksforGeeks

4

Schau ich mir an, da steht auch in der doku was dazu

1 „Gefällt mir“
5

Side-Topic:
ich habe gerade gesehen, dass Bootstrap nun auch selber Icons zur Verfügung stellt: https://icons.getbootstrap.com/

Ich habe für alle unsere Icons ausser dem restart- und zurück-Icon (gepsiegeltes Fast forward fill · Bootstrap Icons) ein passendes Pendant gefunden, z.B.

Es würde uns nochmals ca. 50 KB einsparen und wir hätten eine Abhängigkeit (Font-Awesome) weniger.

Was denkt Ihr dazu?

Insbesondere für RFID hätten wir ein passenderes Icon: Broadcast · Bootstrap Icons

6

Finde ich gut! :+1:

7

Für das fehlende Restart habe ich sogar nun eins gefunden: Bootstrap Reboot · Bootstrap Icons
Und auch das Zurück-Icon: Rewind fill · Bootstrap Icons

Einfach, damit das klar ist: diese 50 KB sind momentan extern nachgeladen. Wirklich helfen würde es uns nur in dem Fall, wo wir diese externen Dateien auf dem Gerät ablegen möchten.

8

Es würde dafür extra Einbindung von CSS und JS von bootstrap-icons benötigen. Das is also nicht in bootstrap dabei ab Werk.

Ist also eine Abwägung, wie groß die sind und wieviel Aufwand zum einbinden. Wenn sie JS dabei haben scheint das schon mehr zu machen als font-awesome?

9

Es braucht kein JS, nur CSS und WOFF2:
grafik

Alternativ könnte man das SVG für jedes verwendete Icon rauskopieren (Bootstrap schlägt das offiziell als Lösung vor):

.bi::before {
  display: inline-block;
  content: "";
  vertical-align: -.125em;
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z' clip-rule='evenodd'/></svg>");
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}

Wir haben so ca. 20 Icons verschiedene Icons, und bräuchten je 300-500 Bytes, also total nur 6-10 KB, welche auf dem Internen Speicher landen.
Dafür ist der Aufwand grösser, wenn man ein neues Icon einpflegen möchte.

10

Oh, da hab ich mich dann verlesen, aber in Summe scheint das mehr zu sein als die 50kB von font-awesome?

Ich find den Aufwand mit den SVG nicht gut, das macht es sehr unübersichtlich und updaten müsste man manuell … Auch wenn es natürlich nice and sleek wäre!

PS: das wär BTW ein anschauliches Beispiel, wo webpack genau diese Optimierung out of the box machen wurde, dass es nur die SVGs mit liefert, die gebraucht werden :wink:

11

Achtung, hier werden Äpfel mit Birnen verglichen!

Für den Fall, wie es jetzt ist, also mit nachladen via Internet, würde sich von der internen Belegung nichts ändern (einfach eine andere URL für die exteren CSS-Datei, welche jeweils selber die woff2/ttf nachladen).

Erst, wenn wir darüber nachdenken, alles ins interne Flash zu verschieben, profitieren wir vom verkleinerten Speicherbedarf:
Font Awesome: ca. 570 KB
Bootstrap Icons: ca. 110 KB

In beiden Fällen könnten wir wie gesagt die Icons extrahieren, wobei das bei den Bootstrap Icons deutlich einfacher geht. → ca. 6-10 KB.

Ja schon, aber aus meiner Sicht ein Muss ist, dass wir wie jetzt nur unser HTML/JS/CSS vom Gerät ausliefern und das Generische über das Internet nachladen können. Den das ganze UI laden vom Gerät ist viel langsamer (und ich sehe regelmässig crashes wenn der Webserver überlastet wird…)

12

Warum hier schon wieder vom 100. ins 1000. zerklamüsert wird kann ich nicht nachvollziehen. Bin auch selber Schuld, hab mitgemacht.

Vorerst gehts nur um das ausbauen von einer dependency, die keine neuen reinbringt.

Aber generell:
Ich bin es gewohnt, dass ich eine möglichst kleine/überschaubare Einheit abschließe, das ausgerollt wird (oder halt gemerged in dem Fall) und dann kommt das nächste dran.
Wenn hier 20 andere Dinge mit reingenommen werden, wirds immer schwieriger zu testen und am Ende kommen wieder monströse Commits die gesquashed werden müssen weil sie sonst nicht mehr gehen. Ergebnis: Änderungen auf jeder Zeile, die bei der Verwendung von GitLens oder git blame ein Nachvollziehen quasi unmöglich machen!
Ich versuch nämlich mir beim Angreifen von fremden Code zuerst anzusehen, woher kommt eine Zeile, was ist die commit message dazu. Wenn das bei quasi jeder Zeile in management.html dann lautet „mega-commit #x; Änderungen 1-5000“, dann muss ich erst im Forum nachfragen, woher die jeweilige Zeile kommt und warum sie dort hin geschrieben wurde. Außer ich verbring eine Tag damit die history zu durchforsten. #Einsteigerfreundlich #codesanity

So, genug geraunzt: Ich würd mir etwas mehr Weile und Sorgfalt statt Eile und Überfrachten wünschen, das hudeln macht fehleranfällig :wink:

Und auf der anderen Seite bin ich natürlich auch voll beeindruckt von der Zeit und Energie die du für das Projekt aufwenden kannst, Respekt! Ich wünschte, ich könnte mich mehr dazu setzen :smile:

1 „Gefällt mir“
13

Sry, ich hatte mir noch überlegt, wegen den Icons einen separaten Thread zu machen, hatte mich dann dagegen entschieden. Hätte auch nicht gedacht, dass das zu so vielen Diskussionen führt.

Ja, das wünsche ich mir jeweils auch, in der Realität wirds nur meist anders.

Es soll halt auch Spass machen, und das macht das Ausprobieren und Umsetzen definitiv mehr als Diskutieren und argumentieren.

Die Änderungen vom Web UI sind riesig geworden, viel mehr als ich wollte. Aber so ein Umbau lässt sich nur schwierig zerstückeln. Und wenn man kleinere PRs macht, muss man idealerweise vor den nächsten Änderungen jeweils auf den Merge warten, um Konflikte zu verhindern. Und dann macht es halt meist nicht mehr sehr viel Spass.
Saubere Commits mache ich bei der Arbeit schon genug, in meiner Freizeit will ich es etwas flexibler haben. Da bezahlt mich ja schliesslich auch niemand dafür.
Zudem sind die Anforderungen am Code aus meiner Sicht recht unterschiedlich: In der Firmware sollte es zwingend sauber und übersichtlich sein. Bugs sind da fatal und bringen leicht das ganze System zum Absturz. Im UI hingegen ist das viel weniger kritisch. Da kriege ich auch eine Fehlermeldung und Fehler können abgefangen werden.

14

In der Freizeit bezahlt mich auch niemand dafür mich mit grauslichem code rumschlagen zu müssen :stuck_out_tongue:

Und wie es auch immer wieder gesagt wird: bevor man rumprobiert und Arbeit rein steckt ist kurz abklopfen, ob das Sinn macht halt durchaus angebracht. Sonst frustriert es wenn es am Ende abgelehnt wird :person_shrugging:
Macht auch keinen Spaß.

15

Das finde ich jetzt aber echt nicht fair von dir!

Du hast schliesslich im Darkmode-PR auch diverse Änderungswünsche eingebracht. Wie hätte ich die den einbringen sollen ohne diverse Commits?
Die Migration von Bootstrap hat nun mal diverse Änderungen notwendig gemacht. Und ich kann ja auch nichts dafür, wenn der Code zudem noch ein Refactoring benötigt, damit es sauberer wird!

Man sollte auch nicht jahrelang jammern, dass niemand da ist, wer weiss, wie man es machen kann, und wenn dann jemand kommt und es macht, so picky sein. Opensource lebt davon, dass man Mitstreiter findet, dazu müssen halt auch beide Seiten etwas offen und flexibel sein. Nur vom Diskutieren kommt man nirgends hin, man muss manchmal auch einfach mal etwas ausprobieren.

16

Dann empfehle ich nochmal nachzulesen, was beim Darkmode meine Beiträge waren :wink:
Spoiler: Ein Vorschlag, wie die UI besser gemacht werden könnte (in einem neuen Thema/PR, weils schon recht groß wird) und ein Aufruf zum Abschließen (weils schon recht unübersichtlich wird). Der Rest waren technische Fragen für etwaige (und zukünftige) Überlegungen den Speicherplatz zu reduzieren, die sich als off topic erwiesen haben.

Und bitte mal einen kurzer Blick rein werfen, seit wann ich dabei bin.
Spoiler: „Jahrelang“ ist dezent übertrieben :wink:

Ich hab leider nur Zeitkonfetti zur Verfügung, das heißt alle paar Stunden/Tage ein paar Minuten/Stunden, die ich mich ins Forum klemmen kann. Dafür, den PC anzuschmeißen und VS Code zu laden ist viel seltener Zeit. Leider, ich würd gern viel mehr Zeit programmieren, weils ja Spaß macht. Der Darkmode zum Beispiel, den hätte ich fast angegangen worden, wenns nicht so ein großes Ding wäre. Das war ja schon gut, dass das passiert ist!
Ich bin halt picky mit Codehygiene. Weils (für alle, aber speziell für Leute mit weniger Zeit, aka Eltern, welcome to the bubble) leichter ist einzusteigen (ob neu oder in einem kurzen Zeitfenster), wenn die gut ist :blush: :+1:

Keine Sorge, das UI war vorher schon Kraut und Rüben – no judgment, das wächst und gedeiht und Konfetti erlaubt nunmal große Refactorings eher nicht so. Ich wurde dann auch für die bloße Idee, das Refactoring auszusparen und mit einem leeren Blatt zu starten (was viel einfacher in konfettigerechte Happen runtergebrochen werden könnte), ziemlich angeschossen, drum hab ich sie erst mal fallen gelassen :person_shrugging:

So: Back to Spaß!

17

I see, Du bist 3 Tage länger als ich dabei. Aber Du führst dich auf, als wenn Du schon viel länger dabei wärst und genau weisst, wie alles laufen soll…
→ Kann ich nicht ernst nehmen, sry.

Ich kenne deine Situation nicht, aber mit 4 kleinen Kindern habe ich den Ärmel vermutlich mehr im „Geschäft“… :slight_smile:

Und trotzdem habe ich offenbar ein mehrfaches an Zeit in den Code gesteckt, nota bene ja auch, weil es mir mehrheitlich Spass macht. Deshalb möchte ich mir von dir auch nicht vorschrieben lassen, wie fancy ein Commit/PR sein muss. Ich meine, wir sind uns einig, dass es für Neulinge so einfach sein soll wie möglich, dass bedeutet für mich aber auch, dass es nicht auf dem gleichen Nivea sein soll, wie ich das Geschäftlich biete. Denn damit schreckt man Anfänger gleich ab.

1 „Gefällt mir“
18

@trainbird Schaffst Du es noch doppelte Meldungen zu unterdrücken?

grafik
grafik1064×772 68.6 KB

Toaster-Meldungen können wichtig sein aber auch schnell nerven. Wir hatten Mehrfachmeldungen zuvor mit

"preventDuplicates": true,
"preventOpenDuplicates": true

unterdrückt.

19

Danke für deinen Einsatz hier, mit 71 Jahren und 53 Jahren Berufsleben bin ich dir dankbare für deine klaren Worte.

20

Müsste gehen :+1: