Top 3 Chrome Extensions für Bubble.io Profis (Deutsch)

In diesem Video zeige ich dir die Top 3 Chrome Extensions, die wir bei NoCodeGermany bei der Entwicklung von No-Code Webapps mit Bubble verwenden.

🏆  ColorZilla

Damit kannst Du Farben auf jeder Webseite erkennen

🔗https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=de

🔗 https://www.colorzilla.com/chrome/

🏆  Font Finder

Wie der Name schon sagt, kann man mit dieser Chrome Extension Schriftarten analysieren.

🔗 https://chrome.google.com/webstore/detail/font-finder/bhiichidigehdgphoambhjbekalahgha

🔗 https://add0n.com/font-finder.html

🏆 🥇  VisBug 🥇

Ein echtes Meisterwerk, um Abstände, Größen, etc zu analysieren und die Chrome Extension bietet sogar die Möglichkeit die Webseite auch zu editieren (Texte ändern, Farben).

🔗https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc

🔗 https://github.com/GoogleChromeLabs/ProjectVisBug

Video Transkript

Hallo, mein Name ist Chris Strobl und ich zeige euch heute die Chrome Extensions, die ich benutze beim Bubble.io programmieren. Selbstverständlich kann man auch die Google Chrome Entwickler Tools nutzen oder Safari. Ich persönlich denke aber, dass gerade Chrome Extensions unheimlich hilfreich sind, wenn man mit Bubble arbeitet.

Das erste Plugin heißt ColorZilla und das ist ein Plugin, um euch wirklich von der Website von allen Elementen, d. h. ob das Logos sind, ob das Grautöne sind, die richtige Farbe zu zeigen. Das finde ich vor allem spannend, wenn man sich orientieren möchte, wie die unterschiedlichen Grautöne einer Website sind.

Oder wie die Kontraste sind, ist das unheimlich wertvoll. Ihr klickt auf ColorZilla Pick Color from page und ihr seht nun, dass wenn wir über die Seite drüber gehen, erkennt er alle Farben. Das heißt, selbst wenn ich hier in dieses Bild rein gehe, erkennt er die Farbe und wir wählen jetzt einmal so ein Blau aus. Ihr kopiert das. Color copied und dann, wenn ihr das einfügt, habt ihr das in der Zwischenablage und so könnt ihr das jederzeit verwenden. Das nächste Plugin heißt Font Finder. Das ist ein exzellentes Plugin, um die unterschiedlichen Schriftarten auf einer Seite zu erkennen. Und wenn wir wiederum im Bubble gehen, seht ihr: wir gehen auf Font Finder. Und wenn wir jetzt durch die Webseite durch scrollen, seht ihr das er immer wieder Vorauswahl macht. Wenn ich doppelklicke, geht ein Popup auf und der Inspektor zeigt mir nicht nur die Farbe, sondern vor allem auch, welche Schriftart das ist, welche Höhe, welche Linienhöhe oder aber auch wie die Gewichtung des Fonts ist, wie 400. Das wiederum hilft euch, ein gutes Gefühl zu bekommen, wenn ihr Webseiten analysiert, wie andere exzellente Designer ihre Bubble Seiten und auch andere Webseiten aufbauen. Das dritte und letzte Plugin ist VisBug. Ein wirkliches Meisterwerk. Ich empfehle jeden die Keynote anzuschauen vom Chrome Dev Summit. Es gibt ein wunderbares Youtube-Video dazu und dieses Tool ist wirklich sehr mächtig.

Das heißt, wenn wir wieder auf die Features Seite gehen und aktivieren VisBug, dann habt ihr hier rechts nun - diese Toolbar könnte jederzeit verschieben - habt ihr nun unterschiedliche Felder, z.B. könnt ihr, wenn ihr auf das Lineal klickt, alle Abstände euch anzeigen lassen, wie z.B. ein 5 Pixel zwischen dieser Überschrift und der großen Überschrift und zwischen der und der H2 ist ein 30 Pixel. Und hier sind 58 Pixel. Ihr könnt aber auch wenn ihr auf Info geht, euch die Details zu einem Element anschauen, wie z.B. hier die Größe dieses Bildes.

Und wenn ihr auf den Text geht, seht ihr er zeigt euch auch die Font Size. Dies ist vor allem spannend bei komplexeren Elementen wie z.B. hier habt ihr nun diese Buttons und ihr seht, wie diese miteinander agieren. Eines der tollen Features von VisBug ist, dass ihr auch tatsächlich die Texte auf der Website ändern könnt. Und hier in der Konsole quasi editiert wird. Das ist vor allem toll, wenn ihr mit VisBug selber arbeitet of euren eigenen Webseiten und schauen wollt, wie lange die Texte Elemente sind, um euch ein Gefühl zu geben. Hier kann man auch andere Sachen machen, wie z.B. die Farbe ändern. Ihr müsst euch definitiv, wenn ihr VisBug im Detail euch anschauen wollt, einfach alle Features anschauen. Diese Google Chrome Developer Keynote ist fabelhaft.

Der Vorteil von VisBug ist tatsächlich es ist ein bisschen einfacher, damit zu arbeiten als mit den Google Chrome Developer Tools. D.h. Wenn ihr es wieder deaktiviert und ihr geht in die Developer Tools, dann ist das manchmal ein bisschen schwierig. Einerseits ja, wir haben das dann plötzlich responsive, d.h. wir brauchen eigentlich einen zweiten Bildschirm und zweitens ist es relativ kompliziert, denn genau das Layout und die Details dieser  Elements zu finden. Deswegen kann es manchmal etwas unübersichtlich werden, wie genau so eine Website aufgebaut wird. Und daher finde ich diese Chrome Extensions unheimlich wertvoll. Wenn euch dieses Video gefallen hat, klickt auf den Like-Button und subscribe den Channel.

Das hilft uns, dass wir mehr Reichweite bekommen. Dadurch lohnt es sich dann auch weiterhin noch mehr Content kostenlos anzubieten. Selbstverständlich wenn ihr Fragen zu den Chrome Extensions habt oder viel bessere Chrome Extensions noch gefunden habt, schreibt gerne in die Kommentare oder schreibt mir direkt auf Twitter. Ich wünsche euch weiterhin viel Erfolg und auf bald.