Yahoo! User Interface Blog (YUIBlog)

Die "MakeNode" Widget-Erweiterung

In meinem vorherigen Artikel, ein Rezept für ein YUI 3 Anwendung , zeigte ich einen Weg zu benutzen Y.substitute als eine sehr grundlegende Vorlage Prozessor. Die Idee nahm das Leben von dort mit Anregungen von den Leuten in der # yui IRC-Channel, und ich machte es ein Widget-Erweiterung, die auf meiner Seite ist, genannt MakeNode . MakeNode ist nicht eine generische Vorlage Prozessor und es ist nicht so gemeint ist. Auf der anderen Seite ist es eng mit dem YUI integrierten Widget Foundation Class, inklusive className-und Event-Helfer und Internationalisierung. In diesem Artikel werde ich die Spinner Beispiel, und ändern Sie den Richtlinien von meinem früheren Artikel zu folgen und MakeNode verwenden. Die modifizierte Spinner-Komponente ( JS , CSS , Sprites ) sowie ein Beispiel aus meiner Website zur Verfügung. Links zu weiteren Ressourcen finden Sie am Ende dieses Artikels zu finden.

Erweitern Sie Ihre Komponente

Sobald MakeNode geladen wird, müssen Sie das Modul in Ihrem gehören YUI().use() -Anweisung mit dem Namen 'makenode' . Dann erweitern Sie Ihr Widget listen Sie sie in das dritte Argument zu Y.Base.create() , wie folgt aus:

  Y. Spinner = Y.Base.create (
      'Spinner',
      Y. Widget,
      [Y. MakeNode]
      {
         / / Instanz Mitglieder ...
      }
      {
          / / Static Mitglieder
      }
 ); 

Sie können MakeNode entlang einer beliebigen Anzahl von geeigneten Erweiterungen für Widget, wie WidgetParent, WidgetChild, WidgetStdMode hinzufügen, fügt etc. MakeNode zwei geschützte Methoden, _makeNode und _locateNodes, und es wird von mehreren statischen Eigenschaften zu lesen, wenn gefunden.

Alle Mitglieder dieser Erweiterung sind entweder geschützt oder privat, da sie dazu bestimmt sind, von der Komponenten-Entwickler und nicht durch den Implementierer Verwendung dieser Komponenten, die nicht mit ihnen belästigt werden sollte verwendet werden.

Definieren der Vorlage

Das erste, was Sie normalerweise tun müssen, ist die Vorlage für Ihre Komponente zu definieren. Für die Spinner, werden unsere Vorlage werden:

  _TEMPLATE: [
     "<input Type="text" title="{s input}" class="{c input}">"
     "<button Type="button" title="{s up}" class="{c up}"> </ button> ',
     "<button Type="button" title="{s down}" class="{c down}"> </ button> '
 ]. Join ('\ n'), 

Die Standardvorlage wird in der Regel genannt werden _TEMPLATE und erklärte, auf der anderen statischen Eigenschaften der Klasse, wie ATTRS . MakeNode wird diese Vorlage benutzen, wenn nichts anderes ausdrücklich vorgesehen ist. Die Vorlage ist von einfachem HTML sowie eine Reihe von Platzhaltern in geschweiften Klammern, die jeweils ein einzelnes Zeichen (die Verarbeitung code) gemacht, gefolgt von einem oder mehreren Argumenten eingeschlossen wurden. Die Platzhalter und was sie produzieren, sind:

• {@ attributeName} Konfiguration Attributwert

• {p propertyName} Instanzeigenschaft Wert

• {m methodName arg1 arg2 ….} Rückgabewert der Methode gegeben. Die Verarbeitung Code wird durch den Namen der Methode und eine beliebige Anzahl von Argumenten durch Leerzeichen getrennt werden. Strings müssen in doppelte Anführungszeichen eingeschlossen werden. Zahlen, boolesche Werte und null wird von Saite zu ihren richtigen Datentypen konvertiert werden

• {c classNameKey} CSS className aus den generierten _CLASS_NAMES statische Eigenschaft

• {s key} -String aus dem strings -Attribut, mit key , als die sub-Attribut.

• {? other placeholder } Erzeugt die Zeichenfolge checked , wenn das Ergebnis der Verarbeitung der Rest der Platzhalter ist wahr.

• {} jeder andere Wert wird wie behandelt werden Y.substitute tut.

Zum Beispiel, {@ value} wird zu übersetzen this.get('value') , während {p value} übersetzt this['value'] .

Die {m} Platzhalter ist ein wenig komplexer. Das erste Argument nach dem m Verarbeitung Code ist der Name der Methode und der Rest der Argumente, die alle durch Leerzeichen getrennt, die an die angegebene Methode übergeben werden. Diese Argumente können Zahlen sein, null , true , false oder Zeichenketten in doppelte Anführungszeichen eingeschlossen. MakeNode wird analysiert sie und wandeln sie in ihren richtigen Typen, also {m myMethod 123.45 true “this is a string”} wird in Berufung Ergebnis this.myMethod(123.45, true, “this is a string”) , so dass die ersten beiden Argumente werden, um deren korrekte Datentypen konvertiert und die Zeichenfolge Leerzeichen enthalten. Um eine doppelte Anführungszeichen, verwenden Sie \\" , den doppelten Backslash erforderlich ist, weil JavaScript ein einziges interpretieren wird und verwirft, bevor es zu MakeNode bekommt. Nur doppelte Anführungszeichen sind erlaubt, MakeNode nicht verwenden eval() so der Parser ist begrenzt aber sicher. Anything but Zahlen, null , Boolesche und doppelte Anführungszeichen werden ignoriert.

Die {?} Platzhalter ist praktisch, um mit Checkboxen und Radio-Buttons verwenden. Es gibt die Zeichenkette “checked” in Abhängigkeit von der Wahrheitswert der Verarbeitungsanweisung Code, der folgt. So <input type=”checkbox” {? m getLength}/> <input type=”checkbox” {? m getLength}/> wird eine deutliche Checkbox zu produzieren, wenn die getLength Methode liefert alles andere als Null. {?} akzeptiert einen der sonstigen Platzhalter, obwohl es nur sinnvoll mit den ersten drei.

Für die {c} Platzhalter, müssen wir eine _CLASS_NAMES -Eigenschaft definiert.

Weitere Platzhalter können MakeNode, indem Sie sie in die hinzugefügt werden _templateHandlers Hash.

Die _CLASS_NAMES Eigentum

Zusammen mit dem ATTRS und _TEMPLATE statische Attribute, können wir definieren eine _CLASS_NAMES Eigenschaft, die ein Array von Strings Punkte. Jeder dieser Strings wird verwendet, um ein className erzeugen. So _CLASS_NAMES: ['input'] wird die className produzieren “yui3-spinner-input” . Die Klassennamen werden in einer Instanz-Eigenschaft gespeichert this._classNames . Die {c input} Platzhalter in der Vorlage oben wird ersetzt durch “yui3-spinner-input” .

Sie können die _CLASS_NAMES -Eigenschaft auf eine beliebige Anzahl von Klassennamen zu generieren, ob man sie in der Vorlage verwenden oder nicht. Sie können noch erreichen diese zusätzlichen Klassennamen aus this._classNames . Der className wird mit Hilfe des yui3 Präfix durch den Wert des folgenden NAME statische Eigenschaft aktiviert Kleinbuchstaben, und dann den String in bestimmten _CLASS_NAMES (diese letzte wird nicht eingeschaltet Kleinbuchstaben), die alle getrennt durch Bindestriche. Die _classNames Hash enthält auch die Klassennamen für die boundingBox und die contentBox , die erste unter der "." Taste und die zweite unter dem “content” -Taste. Widget ordnet den boundingBox die Klassennamen von den Werten der abgeleiteten NAME Eigenschaft der einzelnen Klassen in der Erbschaft-Kette, beginnend mit yui3-widget . MakeNode Läden in this._classNames nur die oberste className für die boundingBox .

Wenn eine Komponente mehrere Ebenen vom Widget, wie SuperSpecialSpinner Erben von SuperSpinner , die sich aus erbt Spinner , die sich aus erbt Widget, und wenn einer oder alle von ihnen haben _CLASS_NAMES Eigenschaften definiert, MakeNode wird Klassennamen für alle von ihnen produzieren und speichern sie in this._classNames . Sie brauchen nicht auf jeder Ebene die Namen bereits in den vorherigen Stufen deklariert sind. In der Tat ist es besser, dass Sie nicht seit dem Klassennamen auf jeder Ebene produziert wird der Wert der Nutzung NAME Eigenschaft dieser Ebene. So in SuperSpecialSpinner , {c input} wird noch in Folge “yui3-spinner-input” und nicht “yui3-superspecialspinner-input” und so wird es um Ihre CSS-Datei weiterhin gültig.

Die {s} Platzhalter

Widget hat eine strings -Konfiguration Attribut definiert, wenn es nicht mit einem beliebigen Wert initialisiert. Dieses Attribut soll Strings, die sichtbar (oder mittels Screenreader, um zu lesen) den Benutzer zu halten. Es ist wichtig, dass Sie nie gehört sichtbaren Strings direkt in die Vorlage. Dies ist keine Voraussetzung für MakeNode - es hat nie eine gute Idee gewesen war. Alle Zeichenketten, die durch angesehen oder gelesen werden, um den Benutzer sind, sollten immer in der platziert werden strings -Attribut. Die strings Attribut enthält einen Hash, wo jeder einzelne Text durch seinen Schlüssel befindet. Die Spinner-Komponente hat die folgenden Zeichenfolgen, die Sie in der Vorlage verwendet oben sehen kann.

  Streicher: {
     Wert: {
         Eingabe: ". Drücken Sie die Pfeiltasten nach oben / unten-Tasten für kleinere Schritten page up / down für die wichtigsten Schritten",
         up: "Increment"
         unten: "Decrement"
     }
 } 

Der beste Teil der dabei ist, dass Ihre Komponente in andere Sprachen lokalisiert sehr leicht von Entwicklern mit der Komponente. Beim Erstellen einer Instanz der Spinner, könnten Sie tun:

  var mySpinner = new Spinner ({Strings: Y.Intl.get ("Spinner')}); 

Einstellung der Konfiguration Attribut strings auf diese Weise ersetzt das Standard- strings -Werte mit denen aus der Sprache-Ressource-Datei mit der Sprache bereits definiert. Die {s} Platzhalter greift die Saiten in die gespeicherten strings Attribut, entweder die Standardeinstellungen oder die übersetzten Lieben, wenn gesetzt. Die {s xxxx} Platzhalter ist in der Tat nichts anderes als eine Verknüpfung mit der {@ strings.xxxx} Platzhalter. Allerdings kann die erste nur auf Saiten auf der obersten Ebene, während zum Beispiel {@ strings.xxxx.yyyy.zzzz} Ihnen erlauben würde, einen String tiefer zugreifen.

Mit _makeNode in renderUI

Wir verwenden die Vorlage auf das Markup für unsere Komponente zu erstellen. Dazu rufen wir MakeNode ist _makeNode Methode, wie folgt aus:

  renderUI: function () {
     . this.get ('Contentbox') append (this._makeNode ());
 } 

Dies wird in der Füllung contentBox unserer Widget mit dem Markup aus der Verarbeitung der Vorlage. Die _makeNode Methode gibt eine Instanz von Y.Node , die angehängt werden kann oder eingeschoben werden oder einfach nur statt für eine spätere Verwendung. Es gibt nicht einen String, erzeugt es eine Node -Instanz.

Die _makeNode Methode hat zwei optionale Argumente: ein Verweis auf eine Vorlage und ein Objekt in Platzhalter zu füllen, wie Y.substitute tut. In unserem einfachen Spinner Beispiel gibt es eine einzige Vorlage für die ganze Widget, sondern auch andere Widgets können Bits und Stücke aus mehreren Vorlagen zu verlangen. In diesem Fall würden Sie in der Regel rufen _makeNode ohne Argumente für den Hauptteil und nennen es noch einmal mit verschiedenen Vorlagen in den zusätzlichen Teilen zu füllen. Das Beispiel enthält diese renderUI Methode:

  renderUI: function () {
     var fieldset = this._makeNode ();
     this.each (function (item) {
         fieldset.appendChild (this._makeNode (MultipleTemplates.RADIO_TEMPLATE, item));
     }, This);
     . this.get ('Contentbox') append (fieldset);
 } 

Der erste Aufruf von _makeNode gibt einen Node -Instanz in der Variable gespeichert fieldset . Die Probe-Komponente ist auch mit erweiterten Y.ArrayList so die RADIO_TEMPLATE mit Werten aus der Elemente im Array-Liste gespeichert und die daraus resultierenden Knoten angehängt, die getroffen gefüllt werden fieldset , bevor es schließlich auf die beigefügten contentBox . Die spezielle Platzhalter wie {@} oder {p} wird noch Attribute oder Eigenschaften in der Hauptsache zu verweisen. Die verschachtelte Elemente werden verarbeitet, wie sein Y.substitute würde.

Die _locateNodes Methode

MakeNode ferner ein _locateNodes Methode, die versuchen, alle Elemente mit dem Klassennamen in deklariert wird lokalisieren _CLASS_NAMES . So suchen Sie bestimmte Elemente, die Sie beliebig viele className Schlüssel übergeben können, sonst _locateNodes versucht sie alle. Für jedes Element eines jeden className gefunden, _locateNodes erzeugt eine private Instanz Eigenschaft mit dem Unterstrich, gefolgt von der Name des Schlüssels und die folgen “Node” -Suffix. So wird in unserer Spinner Beispiel _locateNodes generiert die Eigenschaften _inputNode , _upNode und _downNode . Wenn mehrere Elemente den gleichen className haben, _locateNodes zurückkehren wird ein Verweis auf die erste von ihnen. Wenn ein Element nicht gefunden wird, wird keine Variable angelegt werden.

In der Spinner-Komponente verwenden wir _locateNodes nach dem Erstellen des Markups:

  renderUI: function () {
     . this.get (CBX) append (this._makeNode ());
     this._locateNodes ();
 } 

Die _EVENTS statische Eigenschaft

Eine weitere Eigenschaft kann entlang der Linien definiert werden _TEMPLATE und _CLASS_NAMES und das ist _EVENTS . _EVENTS wird ein Hash-up der Klasse Name Tasten, die jeweils mit einem Hash von Event-Typen und Methoden, um mit ihnen umzugehen enthalten. Es ist besser mit einem Beispiel erklären:

  _EVENTS: {
     '.': {
         Schlüssel: {
             fn: "_onDirectionKey"
             args: ((Y.UA.opera) "down":? "drücken:") + "38, 40, 33, 34"
         }
         mousedown: "_onMouseDown"
     }
     '..': {
         mouseup: "_onDocMouseUp"
     }
     Eingabe: {
         Änderung: "_onInputChange"
     }
 } 

_EVENTS ist ein Objekt (ein Hash) mit einer beliebigen Anzahl von Eigenschaften. Die Namen der Eigenschaften, das heißt, die Schlüssel des Hash, identifizieren die Elemente, deren Veranstaltungen werden wir zu hören. Es sind die gleichen Kennungen in verwendet _CLASS_NAMES . Es gibt zwei zusätzliche Sondertasten "." und ".." . Während die className Schlüssel-Elemente innerhalb der verschachtelten beziehen contentBox , die "." bezieht Schlüssel zum boundingBox selbst während ".." verweist auf das Dokument mit diesem Widget. Betrachten Sie sie als Doing a chdir Befehl, wenn an der sich boundingBox Ebene. Die _EVENTS Gegenständen verarbeitet wird, nachdem die renderUI , bindUI und syncUI Methoden genannt worden, so das Widget wird voraussichtlich bereits im Hauptteil des Dokuments eingefügt werden, da sonst die ".." wird scheitern.

Jeder der Einträge in _EVENTS ist ein weiteres Ziel, dass die Art der Veranstaltung verwendet als Schlüssel und den Namen einer Instanz-Methode, damit umzugehen. _EVENTS , da eine statische Variable, hat keinen Zugang zu this , damit es nicht kann tatsächliche Funktion verweist, nur der Name des Ereignis-Listener-Methode. Einige Event-Typen benötigen zusätzliche Argumente, wie die key -Ereignis. In diesem Fall anstelle der Bereitstellung der Name der Event-Handler können Sie ein Objekt mit Eigenschaften zur Verfügung fn und args auf den Namen der Funktion und der zusätzlichen Argumente, halten, wenn erforderlich.

MakeNode verwenden Node.delegate auf die Ereignisse der verschachtelten Elemente zu hören, während es benutzen will Y.on , um auf Ereignisse aus dem hören boundingBox und das Dokument Körper. (Anmerkung: Hören auf die key Veranstaltung auf alle verschachtelten Element funktioniert nur mit Version 3.4.0pr1 und höher, da Delegation der key .. Veranstaltung nicht zur Verfügung stand, bevor alle anderen Funktionen arbeiten mit früheren Versionen auch)

Die _EVENTS Erklärungen sind kumulativ, wenn die Komponenten voneinander erben. Jede Klasse in die Erbschaft-Kette wird eine eigene _EVENTS Erklärung getrennt verarbeitet.

Die _ATTRS_2_UI statische Eigenschaft

Events in beide Richtungen gehen, aus dem UI auf die Komponente und von der Komponente bis zur UI. Die ersten sind von der Handhabung _EVENTS Eigentum. Dann gibt es die Veranstaltungen, die von Attribut-Wert Änderungen, die in der Benutzeroberfläche widerspiegeln müssen gefeuert. Als ich im vorigen Artikel, wenn es irgendwelche Nebenwirkungen aus Ändern einer Konfiguration Attribut erwähnt, sollten sie nach Veränderung Ereignis-Listener verarbeitet werden, nicht durch die optional setter -Methode des Attributs, die nur mit der Normalisierung der Wert gesetzt umgehen sollen. Die UI sollte spiegeln den Stand der Konfiguration Attribute, zuerst in syncUI , wenn initialisiert und dann auf jedes Attribut change-Ereignis. Für letztere müssen wir ein Ereignis-Listener, die wir tun, in anhängen bindUI . Widget bietet bereits einen Mechanismus, um so einfach, die ich in den Kommentaren zum vorherigen Artikel beschrieben zu machen.

Widget verwendet die Instanz Eigentum _UI_ATTRS , dass ein Objekt mit zwei weiteren Eigenschaften, enthält SYNC und BIND . Jede dieser ist ein Array mit den Namen der Konfiguration Attribute zunächst synchronisiert werden und dann hörte, um die UI spiegelt die aktuellen Werte zu halten. Widget rechnet jeder dieser Einträge auf ein Verfahren mit ihm verbunden sind, nach dem Attributnamen vorangestellt benannt haben _uiSet mit dem ersten Zeichen des Attributs name in Großbuchstaben umgewandelt, um den Namen der Methode in der richtigen Kamel Fall haben. So, wenn "value" in einem der aufgelisteten war _UI_ATTRS Arrays (in beiden SYNC oder BIND ), würde Widget erwarten, eine zu finden _uiSetValue Methode. Diese Methode werden zwei Argumente zu erhalten, der value festgelegt, und src der Änderung. Dies ist der Code für unser Spinner _uiSetValue Methode:

  _uiSetValue: function (value, src) {
     if (src === UI) {
         return;
     }
     this._inputNode.set (VALUE, this.get (FORMATTER) (Wert));
 } 

Alle Groß-Kennungen Sie sehen in diesem Teil des Codes entsprechen Stringkonstanten deklariert anderswo, damit die YUI Kompressor seine Arbeit besser machen. Die Methode, im Grunde setzt der value HTML-Attribut in der <input> Feld, um den neuen Wert zu setzen, nachdem sie formatiert. Der Verweis auf das Textfeld war, bereitgestellt durch _locateNodes . Das src Argument ist zunächst überprüft, ob der String-Wert gesetzt 'ui' . Wenn dies so ist, werden keine Maßnahmen ergriffen werden. Dies ist um Endlosschleifen zu vermeiden. Gibt der Benutzer etwas in das Eingabefeld ein, würde dessen Wert in die go value Konfiguration Attribut, das dann ein Feuer würde valueChange Ereignis, das würde sich _uiSetValue genannt, die, wenn nicht aktiviert, dann gehen Sie und ändern Sie den Wert des Eingangs-Box, die würde den gesamten Prozess erneut auslösen. So in _uiSetValue , wenn wir wissen, der Wechsel von der UI kommt, wissen wir nichts, und so brechen die Schleife. Dies erfordert jedoch einen anderen Teil des Codes anderswo. In der Zuhörer für das DOM-Ereignis, wenn wir die Konfiguration Attribut, verwenden wir die dritte optionale Argument gesetzt, wie folgt aus:

  _afterValueChange: function (ev) {
     this.set (VALUE, ev.newVal, {src: UI});
 } 

Es liegt an uns, um sicherzustellen, dass Änderungen aus dem UI gekennzeichnet sind damit und dann prüfen, ob dieselbe Flagge, um Schleifen zu vermeiden.

Mit all das gesagt hatte, habe ich noch nicht die statische Eigenschaft erwähnt _ATTRS_2_UI in der Überschrift dieses Abschnitts erwähnt. Da die Kommentare in meinem vorhergehenden Artikel zeigt (durch die Fehler ich in ihnen gemacht), um sicherzustellen, dass alle Attribute, die die UI richtig aufgeführt sind, ist etwas unordentlich. Sie sollten nie zu initialisieren _UI_ATTRS von Grund auf neu seit Widget bereits listet eine ganze Reihe von Attributen und die verloren gehen würden. Sie haben zu neuen Attributnamen über die existierenden, was etwas ist schwer zu erinnern, wie man es richtig zu verketten. Um es einfach zu, wird MakeNode aus der statischen Eigenschaft gelesen _ATTRS_2_UI und tun Verkettung für Sie. Es werden alle solche Listen von jeder Klasse verketten in die Erbschaft-Kette so auf jeder Ebene jede Klasse kann eigene Attribute zu behandeln. In Spinner, haben wir:

  _ATTRS_2_UI: {
     BIND: VALUE,
     SYNC: VALUE
 } 

MakeNode akzeptieren sowohl eine Reihe von Namen oder ein einzelnes Attribut name, wie in diesem Fall.

Die Frage stellt sich natürlich, warum zwei Listen, eine für die Bindung der anderen für die Synchronisierung? Oft werden die SYNC -Array hat weniger Einträge als der BIND -Liste und das ist, weil die Vorlage für die Komponente vielleicht schon am selben Standardwert als die Konfiguration Attribut, und es gibt keine Notwendigkeit, eine erste Synchronisierung zu tun. Also, wenn der Standardwert für den value Konfiguration Attribut wird eine leere Zeichenkette und die <input> Element in der Vorlage hat keine value -Attribut, dann gibt es keine Notwendigkeit, sie bei der Initialisierung zu synchronisieren.

MakeNode wird nach doppelten Einträgen in einer dieser Arrays zu überprüfen. Falls angezeigt, bedeutet dies, dass eine Klasse unserer Komponente aus bereits behandelt dieses Attribut und jede neue Erklärung erbt würde höchstwahrscheinlich überschreiten die _uiSetXxxx Handler für sie. Übrigens MakeNode prüft auch, ob doppelte Einträge in _CLASS_NAMES , die auch zu Konflikten in einigen können, aber nicht alle Umstände. MakeNode wird eine Meldung in das Protokoll für solche Fehler zu schreiben.

Abschluss

MakeNode bietet eine sehr einfache Vorlage Prozessor, mit einfachen Funktionen, die stark mit dem Widget Foundation Class integriert ist. Es bietet auch Hilfsmethoden Klassennamen zu schaffen, in der Vorlage verwendet werden, und verwenden Sie diesen Namen, um die Knoten erstellt haben. Es bietet auch die Mittel, um in das Geschehen sowohl durch die UI und das Bauteil selbst erzeugt Haken und assoziieren mit jeweils einer Methode. Es macht alle diese Dinge, und achten dabei auf die Erbschaft-Kette geradeaus bis zum Widget und jede Art von Klassen können Sie definieren, zu respektieren.

Sie gilt nicht für absolut alle Möglichkeiten bieten, deckt aber eine gute Auswahl von ihnen. Dennoch ist es nicht auszuschließen Sie das Hinzufügen zusätzlicher Funktionalität. Vielleicht haben nur selten zu einer Zuschreibung bindUI oder syncUI Methode, wenn Sie den Kleber durch MakeNode zu verwenden, aber Sie können dies tun, da MakeNode nicht nutzt sie.

Als Bonus für diejenigen, die die Geduld, um so weit gelesen hatte, habe ich auch Anthony Pipkins Button des Galerie-Komponenten gesetzt geändert:

• button.js
• button.css
• Button-group.js
• Button-group.css
• background.png
• Hintergrund-active.png
• icon-sprite.gif
• Beispiel

Die API-Dokumentation finden Sie hier .

Finden Gespräche: bloglines | technorati

Share and erweitern: Lesezeichen mit del.icio.us | digg it! | reddit!