In diesem Artikel finden Sie einige kleine Frontend-Notizen. Manchmal sind sie kurz, weil das Thema in ein paar Sätzen vollständig enthüllt wird, und manchmal, weil der Autor nicht über genügend Erfahrung und Wissen verfügt, um sie vollständiger zu enthüllen. Wenn es Ihnen gefällt, werde ich immer ausführlicher mit Links und Recherchen schreiben.
Die Idee, einen Artikel zu schreiben, entstand beim erneuten Lesen der Korrespondenz mit einem Freund, einem Teamleiter, einem Frontend (Lyokha, hallo!), Der sein Wissen, seine Ideen und Probleme immer großzügig mit mir teilt.
Alles, was geschrieben steht, ist die persönliche Meinung einer kleinen Gruppe von Menschen und gibt kaum vor, wahr zu sein. Lasst uns beginnen.
Versuchen Sie, Transition nicht zu verwenden: all
Viele Leute wissen das, aber ich bin kürzlich auf einen anderen Grund gestoßen, warum Sie äußerst vorsichtig sein sollten, wenn Sie den Wert all mit der Übergangseigenschaft verwenden.
Stellen wir uns vor, wir haben einen Container mit einer Übergangseigenschaft:
.content{
color: red;
transition: 1s;
}
Beim Hover ändert sich die Farbe:
.content:hover {
color: blue;
}
Wenn wir in diesem Behälter wickeln, zum Beispiel, svg, die fill Eigenschaft von der gleich sein current , dann auf schweben, wird das Bildlicht verändern. Aber was wäre, wenn wir eine solche Eigenschaft irgendwo für alle SVG angeben würden?
svg {
transition: 1s;
fill: currentColor;
}
Beim Schweben ändert sich die Füllung nicht um 1 Sekunde, sondern um 2 Sekunden, da zuerst der Übergang angewendet wird, um die Farbe zu ändern, und nach meinem Verständnis wird bei jeder Farbänderung des Äußeren eine Änderung des Inneren ausgelöst. aber wenn jemand eine genauere Erklärung hat, werde ich sie gerne lesen.
Lösung: Geben Sie den Übergang explizit an: Füllen Sie für SVG (wenn Sie Farbe angeben , ändert sich die Situation nicht, daher die obige Ausgabe).
svg {
transition: fill 1.5s;
fill: currentColor;
}
Blockproportionen beibehalten
Ich habe immer gedacht, dass jeder, jeder erfahrene Front-End-Entwickler, über den alten Hack Bescheid weiß, mit dem Sie die Proportionen des Blocks beibehalten können. Es stellte sich heraus, dass nicht alle.
Die Polsterungseigenschaft basiert, wenn sie als Prozentsatz angegeben wird, genau auf der Breite, sodass wir diesen Trick ausführen können:
.image-container {
height: 0;
position: relative;
/* */
padding-top: calc(100% * 9 / 16 );
}
Jetzt können wir ein Bild in diesen Container einfügen, dessen Höhe sich aus der Breite des Containers ergibt.
.img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
object-fit: cover;
}
Seitenverhältnis
Vor nicht allzu langer Zeit wurde die Eigenschaft Seitenverhältnis hinzugefügt, mit der Sie alles, was Sie von oben sehen, in einer Zeile erstellen können.
.image {
aspect-ratio: 16 / 9;
}
Die Hauptunterschiede und die Bequemlichkeit dieser Eigenschaft sind meiner Meinung nach:
- Wir brauchen keinen Container
- Wenn Breite ODER Höhe angegeben ist, wird der zweite Wert basierend auf dem Wert des Seitenverhältnisses berechnet
- Wenn width AND height angegeben ist, wird die Eigenschaft ignoriert
Die Unterstützung des Seitenverhältnisses ist immer noch weit von den geschätzten 95% entfernt. Verwenden Sie sie daher mit Vorsicht
Verschieben Sie die Paginierung nicht auf später
Es klingt natürlich seltsam, aber als eine Person, die mehrere Produkte von Grund auf neu erstellt hat, werde ich sagen, dass es immer die Versuchung gibt, bei der Paginierung von Listen, Optionen in Selektoren, Tabellen usw. zu "punkten". Ich habe selbst entschieden, dass ich dies niemals in den Hintergrund rücken würde, denn sobald Benutzer Daten generieren, werden die Seiten langsamer, die Suche nach den Ursachen der Bremsen ist natürlich nicht allzu schwierig, aber wann Wenn es um die Suche geht, erfordert die Situation eine sofortige Lösung. Dies sind Nerven, Scheißcode und Glaubwürdigkeitsverlust bei der Entwicklungsabteilung.
Steuern des Erscheinungsbilds von Komponenten über CSS-Variablen
Variablen in CSS werden bereits von vielen geliebt und respektiert, aber die Interviewerfahrung hat gezeigt, dass nur wenige Menschen sie verwenden und noch weniger Menschen über die wahre Macht der Vererbung Bescheid wissen. Das meiste davon blieb in dem Teil der Dokumentation, in dem es um Folgendes geht : root (und dies ist nur eine Pseudoklasse - ein Alias für die Wurzel des Baums, meistens für HTML).
Stellen Sie sich also vor, wir haben eine Schaltflächenkomponente mit Stilen mit Gültigkeitsbereich (im Beispiel verwende ich Vue.js), die die folgenden Stile aufweist:
.button {
color: var(--text-color, #000);
background-color: var(--bg-color, #444)
}
Und dann können wir einfach die .dark-Klasse in der übergeordneten Komponente definieren:
.dark {
--text-color: #fff;
--bg-color: #333
}
Und übergeben Sie diese Klasse an die Schaltflächenkomponente:
<my-button class="dark"/>
Und jetzt ist eine so einfache Stilsteuerung ohne Überschreiben von CSS-Stilen im übergeordneten Element mithilfe eines leistungsstarken Vererbungsmechanismus für Variablen verfügbar.
Lustige und quälende Käfer
Ich möchte diesen Artikel mit einer Geschichte über kleine, aber unangenehme Fehler an der Front zusammenfassen, die meine Kollegen und ich entdeckt haben.
Einfügen von Bildern in den Wysiwyg-Editor
In Texteditoren im Browser (wir verwenden Feder) ist es möglich, mit Strg + v ein Bild von einer anderen Site einzufügen. Wir haben nicht darüber nachgedacht, dass jeder den implementierten Mechanismus zum Einfügen von Bildern verwendet, aber Benutzer sind solche Benutzer. Eine Website, die besonders empfindlich auf das Ausleihen von Bildern reagiert, hat festgestellt, woher die Anfrage stammt, und wenn die Domain nicht seine ist, hat sie ein Werbebanner für ihr eigenes Produkt ausgegeben, was natürlich stimmt, aber es war eine Überraschung für uns. Wenn Sie also wysiwyg entwickeln / verwenden, achten Sie darauf, was und wo Sie einfügen müssen =)
Vue SSR + Cloudflare = <3
Das Problem, von dem der Genosse zuvor gesprochen hat, hat mir erzählt.
Nur wenn Sie zu einer Seite gehen, die von SSR und der anschließenden SPA-Navigation generiert und angegeben wurde, wurden alle Anforderungen an die API dupliziert. Lange konnten sie nicht verstehen, was los war. Nach sorgfältiger Recherche stellte sich heraus, dass die Fußzeile ein Standardfeld mit der E-Mail des Unternehmens enthält, Cloudflare die E-Mail jedoch verschleiert (zum Schutz vor Schabern). Wenn Vue auf dem Server einen Baum in js sammelt und dann einen anderen Baum auf dem Client erhält (mit nicht übereinstimmender E-Mail), brach die Vue-Rehydration ab und stürzte ab, wodurch eine neue Vue-Instanz erstellt wurde, die alte jedoch nicht beendet wurde. Infolgedessen wurden unter bestimmten Umständen 2 Vue-Instanzen gleichzeitig auf der Seite ausgeführt.
Das ist alles. Kommentare, Wünsche, scharfe Kritik - ich werde das alles gerne lesen und Schlussfolgerungen ziehen.