Schreibe weniger Code, verdammt

Ursprünglicher Autor: Heydon Pickering
  • Übersetzung

Ich bin nicht der talentierteste Programmierer der Welt. Die Wahrheit ist. Also versuche ich so wenig Code wie möglich zu schreiben. Je weniger Code ich schreibe, desto weniger Code kann ich brechen, warten und klären.


Und ich bin faul - Schatz und sogar ein Löffel (ich habe beschlossen, die Analogie mit Essen in dem Artikel zu verwenden).


Es stellt sich jedoch heraus, dass der einzige garantierte Weg zur Verbesserung der Webleistung darin besteht, weniger Code zu schreiben. Minimieren? Okay Drücken? Na ja. Zwischenspeichern? Das hört sich gut an. Im Allgemeinen den Code verweigern oder den Code eines anderen anfangs verwenden? Und jetzt - im Bullauge! Was sich am Eingang befindet - es sollte auf die eine oder andere Weise austreten, unabhängig davon, ob Ihr Sammler es mit seinen Magensäften auflösen und verdauen konnte (ich werde möglicherweise Lebensmittelanalogien ablehnen).


Und das ist noch nicht alles. Zusätzlich zu sichtbaren Leistungsverbesserungen, bei denen Sie dieselbe Menge an Code benötigen, diese aber zuerst kauen müssen (nicht widerstehen können), können Sie auch speichern. Für meinen Provider ist es egal, ob ich ein paar kleine oder einen großen Brief verschicke: Alles funktioniert.


In dem Wunsch zu reduzieren gefällt mir das am besten: Am Ende gibt es nur das, was wirklich benötigt wird, nur das, was der Benutzer wirklich braucht. Ein riesiges Foto von einem Typen, der einen Latte trinkt? Wirf es weg. Schaltflächen von sozialen Netzwerken, die eine Menge Code für Linkshänder aufsaugen und das Seitendesign unterbrechen? Tritt ihnen in den Arsch. Ist das Mist in JavaScript, der den Rechtsklick abfängt und ein benutzerdefiniertes modales Fenster anzeigt? In die Kälte legen!


Es geht nicht nur darum, Teile zu verbinden, die die Schnittstelle beschädigen. Die Art und Weise, wie Sie Ihren eigenen Code schreiben, spielt auch eine große Rolle bei der Reduzierung des Codes. Hier sind einige Tipps und Ideen. Ich habe früher darüber geschrieben, aber im Kontext von Bequemlichkeit und reaktionsschnellem Design. Es ist einfach so, dass ein flexibles, benutzerfreundliches Web weniger Kontrolle von unserer Seite erfordert und schwerer zu brechen ist.


WAI-ARIA


Erstens WAI-ARIA! = Webzugriff. Dies ist nur ein Tool zur Verbesserung der Kompatibilität mit einigen unterstützenden Technologien wie Narrator. Daher besteht die erste Regel von ARIA darin, es nicht zu verwenden, es sei denn, dies ist erforderlich.


Lol nein:


Subheading

Ja:


Subheading


Der Vorteil der Verwendung nativer Elemente besteht darin, dass Sie Ihr eigenes Verhalten häufig nicht codieren müssen. Die nächste Implementierung des Kontrollkästchens ist nicht nur zu ausführlich, sondern hängt auch von JavaScript ab, das Statusänderungen steuert und den Standard für die Arbeit mit Attributen und die GET-Methode überschreibt. Der Code ist größer und weniger zuverlässig. Schönheit!


My checkbox label

Stile? Keine Sorge, alles ist unter Kontrolle. Wenn Sie wirklich benutzerdefinierte Stile benötigen, natürlich.



Mesh


Haben Sie jemals gerne eine Website mit mehr als zwei Spalten verwendet oder gelesen? Zu viele Informationen, die Aufmerksamkeit erfordern. "Ich frage mich, welches dieser navigationsähnlichen Teile tatsächlich die Navigation ist, die ich brauche?" Dies ist eine rhetorische Frage: Ich weiß nicht, was ich als nächstes tun soll, und verlasse die Website.


Natürlich möchten Sie manchmal etwas neben etwas anderes stellen. Zum Beispiel Suchergebnisse oder etwas anderes. Aber warum hier eine Menge Bibliotheken für Grids mitbringen? Flexbox kann dies buchstäblich mit zwei Definitionsblöcken tun.


.grid {
  display: flex;
  flex-flow: row wrap;
}
.grid > * {
  flex-basis: 10em;
  flex-grow: 1;
}

Jetzt wird sich alles auf ungefähr 10em Breite erstrecken. Die Anzahl der Spalten hängt davon ab, wie viele Zellen mit einer Größe von etwa 10 em in das Ansichtsfenster passen. Fertig. Mach weiter. Übrigens, lassen Sie uns diese Sache diskutieren:


width: 57.98363527356473782736464546373337373737%;

Wissen Sie, dass diese Zahl auf einem mystischen Verhältnis basiert? Welche Proportionen sollten ein Gefühl von Ruhe und Ehrfurcht hervorrufen? Nein, ich wusste es nicht und es ist mir egal. Machen Sie einfach den "Porn" -Button groß genug, um sichtbar zu sein.


Einrückung


Wir wissen, wie es geht. Alle Elemente mit universellen Selektoren einrücken. Und bei Bedarf neu definieren. Viele werden nicht benötigt.


body * + * {
  margin-top: 1.5rem;
}

Nein, ein Universalwähler beeinträchtigt die Leistung nicht. Das ist Häresie.


Anzeigen


Sie benötigen keinen ganzen Winkel oder Meteor, um eine einfache Seite in "Ansichten" aufzuteilen. Ansichten sind einfach Teile der Seite, die in Momenten sichtbar sind, in denen andere nicht sichtbar sind. Dies kann mit CSS erfolgen:


.view {
  display: none;
}
.view:target {
  display: block;
}

"Aber auf einseitigen Anwendungen wird beim Laden der Ansicht Code ausgeführt!", Sagen Sie. Ich verstehe. Hierfür gibt es ein Onhashchange-Ereignis. Es werden keine Bibliotheken benötigt, und Ihre Links sind normal und können zu Lesezeichen hinzugefügt werden. Das ist cool. Bei Interesse können Sie mehr darüber lesen .


Schriftgröße


Thin Schriftgröße Einstellung kann Ihre Blöcke stark aufblähen Medien . Sie müssen dies also in die Hände von CSS legen. Eine Codezeile.


font-size: calc(1em + 1vw);

Äh ... das ist alles. Es gibt sogar eine Mindestgröße, sodass auf Mobilgeräten keine unlesbaren Kleinbuchstaben angezeigt werden.


10k auseinander


Wie gesagt, ich bin nicht der beste Encoder der Welt. Ich kenne nur ein paar Tricks. Aber mit ein wenig Wissen kann man viel machen. Dies ist die Essenz des 10k Apart-Wettbewerbs - um herauszufinden, was mit 10kb oder weniger erreicht werden kann. Es gibt tolle Preise. Als Richter kann ich es kaum erwarten, all die coolen Anwendungen, Ideen und Implementierungen zu studieren, die ich mir selbst einfallen lassen möchte. Was denkst du dir aus?


Jetzt auch beliebt: