Tailwind und VanillaJS – Toast Hawaii bzw. Notification

Stellt euch vor ihr wollt für ein Shop eine Notification oder auch bekannt als Toast ausgeben. Zum Beispiel Produkt in Warenkorb gelegt. Oder „ups, leider ist das Produkt in ihrer Größe nicht mehr vorhaben. Es gibt hier echt viele und gute Bibliotheken. Aber ich will selber eine Toaster Klasse bauen, weil mir der Overhead gerade nicht passt. Ansonsten immer gerne. Weil man muss ja nicht das Rad jedes Mal von vorne erfinden.

Die Vorüberlegung

– die ToastHawaii Klasse kann bei der Initiierung ein Config Objekt mitgegeben werden. In meinem Beispiel ist nur die Verweildauer des Toast in der Config enthalten. Man kann es hier noch genügend anreichern. Position des Posts, Style Klassen und und und.

– mit der Toast Methode makeToast( {title: <string>, msg: <string>,style:<string>}) kann ein Toast angetriggert werden
– Wenn mehrere Toast hintereinander abgefeuert werden hänge den neusten Toast unten ran
– Im Quelltext befindet sich nur Componenten Container der mit der id toast-hawaii angesprochen wird

Der Aufbau der Klasse

– constructor(paras = {}),
– getIcon()
– makeToast()
– die Klasse beinhaltet das HTML und kann somit für andere Toastdesign problemlos angepasst werden
– makeToast kann default Config Parameter die bei der Instanziierung des Objekts mitgegeben wurden überschreiben (zum Beispiel Anzeigedauer / duration)
– makeToast besitzt Pflichtfelder die als Parameter vom Type Objekt mitgegeben werden ( {title:‘‘, msg: ‘‘, style=‘‘} )

Die Umsetzung

– HTML
– VanillaJS
– TailwindCSS

Es würde mich riesig freuen, wenn ihr auf GitHub das Projekt Folkt und mit weiterentwickelt. Um somit ein solides und einfaches sowie flexibles Notifikation System in Tailwind und purem Javascript anzubieten.

Zum GitHub: https://github.com/MikeLowrey/toast-hawaii

Demo Toast Hawaii

TailwindCSS und VanillaJS – Step Progress Bar

Ich persönlich finde bei Bestellvorgängen oder Behördenformularen es extrem hilfreich eine sogenannte Prozessverfolgung auf dem Bildschirm zu haben. Damit weiß man stets Bescheid, wo man gerade ist und wie lange das noch in etwa dauern kann.

Ich dachte mir, es ist Samstagabend und die Kinder sind im Bett und die bessere Hälfte macht noch Steuern, dann baue ich mir doch mal eine „Step Progress Bar“ selber. Allein nur mit den Zutaten TailwindCSS und VanillaJS. Viel besser als Katzenvideos auf Youtube oder Netflix.

Meine Vorüberlegung:

– ich setze flexibel mit der Klasseninitialisierung die einzelnen Schritte mit ihren Namen

– die „Step Progress Bar“ Klasse hat eine Funktion mit der ich zwischen den einzelnen Schritten springen kann. Somit kann man sie in anderen Projekten mit einer Callback Funktion aufrufen

– die „Step Progress Bar“ Klasse rendert nach jeder Aktualisierung die View automatisch

Als erstes brauchen wir TailwindCSS. Das besorge ich mir der Einfachheit über CDN. Dann benötige ich ein HTML Gerüst in dem ich die Steps / Schritte anzeigt.

<section><!-- Q: https://tailwindcomponents.com/component/steps-bar -->
    <!-- component -->
    <div class="container mx-auto py-6" >
      <div class="flex" id="ProgressStepper">
      </div>
    </div>
 </section>

Dann gehen wir zum JS Teil über. Ich baue eine Klasse ProgressStepper.

<script>
  // Progress Stepper Class
   class ProgressStepper {
        constructor(paras) {
            this.step_names = paras.step_names;            
            this.reached_step = 1;
            this.paras = paras;
            this.build_progress_bar();
        }

        setPointerToStep(step) {
            if (step > this.step_names.length) {
                console.log("step>length")
                return ;
            }
            this.reached_step = step;
            this.build_progress_bar();
        }

        build_progress_bar() {

            let _html_start_part = function(data, index, reached = 0) {
                return `<!-- progress item -->
                <div class="w-1/4">
                  <div class="relative mb-2">
                    <div class="w-10 h-10 mx-auto bg-green-500 rounded-full text-lg text-white flex items-center">
                      <span class="text-center text-white w-full">
                        ${index} 
                      </span>
                    </div>
                  </div>

                  <div class="text-xs text-center 2xl:text-base">${data}</div>
                </div>
                <!-- /progress item -->`};

            let _html_start_part1 = function(data, index, reached = 0, procentBar = 0, compleated_icon = '') {
                return `<!-- progress item middle -->
                <div class="w-1/4">
                  <div class="relative mb-2">
                    <div class="absolute flex align-center items-center align-middle content-center" style="width: calc(100% - 2.5rem - 1rem); top: 50%; transform: translate(-50%, -50%)">
                      <div class="w-full bg-gray-200 rounded items-center align-middle align-center flex-1">
                        <div class="w-0 bg-green-300 py-1 rounded" style="width: ${procentBar}%;"></div><!-- middle part 100 full & 50 half progressstatus-->
                      </div>
                    </div>

                    <div class="w-10 h-10 mx-auto ${reached == 0 ? 'bg-white border-2 border-gray-200': 'bg-green-500' } rounded-full text-lg text-white flex items-center">
                      <span class="text-center ${reached == 0 ? 'text-gray-600': 'text-white' } w-full">                        
                        ${index}
                      </span>
                    </div>
                  </div>

                  <div class="text-xs text-center 2xl:text-base">${data}</div>
                </div>`;}
            
            var output = '';
            for (let i=0; i<this.step_names.length;i++)
            {                
                if (i==0) 
                {                    
                    output += _html_start_part(this.step_names[i], i+1);
                    continue;
                }
                let reached = this.reached_step >= (i+1) ? 1:0;
                let procentBar, compleated_icon;
                if (this.reached_step >= (i+1)) {
                    procentBar = 100;
                    compleated_icon = this.paras.compleated_icon;
                } else if (this.reached_step > (i+1)) {
                    procentBar = 0;
                } else if(this.reached_step == (i)) {
                    procentBar = 50;
                }
                output += _html_start_part1(this.step_names[i], i+1, reached, procentBar, compleated_icon);
            }

            document.getElementById('ProgressStepper').innerHTML = output;
            return ('build')
        }
   }
</script>

Nun benötige ich noch die einzelnen Schritte. Ziel war es ja ein Shop Checkout zu bauen. Dann nehme ich mal Adressem Zahlungsart, Bestätigen und Completed bzw. Fertig.

<script>
   let paras = {
    step_names: ['Adresse', 'Zahlungsart', 'Bestätigen', 'Fertig'],  
    }

    let p = new ProgressStepper(paras);
</script>

Nun kann man mit der Methode setPointerToStep() auf den Step springen wo man gerade hin möchte. Scotty step me up …

p. setPointerToStep(2);
p. setPointerToStep(0);
p. setPointerToStep(99);
Demo Step Progress Bar

Man kann jetzt hier ordentlich noch was machen:
– Setze einen grünen Hacken sobald der Prozess über den Schritt hinaus ist
– Gebe mit dem Namen auch die Links mit um Sprungmarken zu haben
und noch vieles Mehr …

Tailwind CSS – Ein kurzer Einstieg

Seit Jahren nutze ich Bootstrap. Ich dachte nicht mal im Traum dran, dass es etwas Besseres im Punkto Websitedesign geben wird. Es ist einfach, praktisch und man kann relative schnell ansprechende bzw. aufgeräumtes Designs umsetzen. Allerdings hatte Bootstrap für mich immer einen bitteren Beigeschmack. Ein Gedanke den ich nie zulassen wollte. Und zwar: Bootstrap sieht in 99 Prozent der Fälle aus wie Bootstrap. Es ist auch immer ein größerer Anbach eigene Desigelemente zu implementieren. Bootstrap Formulare sind zwar praktisch aber in den seltensten Fällen schön. Die Navbar wirkt auch immer irgendwie wie bürokratisch / beamtenmäßig. Und am meisten störte mich das man bis Bootstrap 4 Jquery implementieren musste. Ein Javascript Framework was ich immer seltener nutzen mag. Alles im Allen: Bootstrap Webseiten sehen auch immer irgendwie aus wie Backendentwickler (Jeans, Jack Wolfskin Jacke, allways functional Clothes) – langweilig.

In einem aktuellen Projekt musste ich mich mit Tailwind CSS beschäftigen. Zuerst dachte ich alter Wein in neuen Schläuchen und hatte auch nicht wirklich Bock auf ein Weiteres Möchtegern fancy Entwicklungstool. Wie bereits Eingehens geschrieben: „Bootstrap for ever!“

Gamechanger – Der Utility First Ansatz von TailwindCSS

Aber dann kam TailwindCSS. Und ziemlich schnell merkte ich, dass Tailwind das Zeug hat zum Gamechanger. Das Konzept ist ist eigentlich nichts weltbewegendes aber niemand hat es zuvor in diesem Umfang und konsequent durchgesetzt. Das Konzept heißt: Utility First. Statt vordefinierte Klassen und Komponenten nutzt man Toolsets und definiert sein Design selbst. Man arbeitet nur noch mit Klassen im HTML und schreibt kein CSS mehr. Um das Verstehen zu lernen gehen wir umgehend in den praktischen Teil über. In meinem Beispiel möchte ich mit Euch eine einfache Shopdetailseite bauen.

Shop Produkt Übersicht mit TailwindCSS und Alpine.js

Link zur Demo BikeShop Test Seite

Und hier der Link zum Tutorial um dieses Ziel zu erriechen. (coming soon)

SeoTheater Autoren