HTML und CSS sind aus mehreren Gründen schwer zu interviewen:
Sie sind zu einfach im Vergleich zu einer Programmiersprache,
Sie hängen sehr stark vom Kontext des Jobs ab. Beispiele:
Wenn Sie Google-skalierte, extrem schnelle und optimierte Websites erstellen, können die Personen, die Sie für den Job interviewen, nicht ignorieren, was CSS-Sprites sind.
Wenn Sie XHTML W3C-gültige Websites erstellen, sollten Sie sicherstellen, dass die Kandidaten den Unterschied zwischen XHTML 1.0 und XHTML 1.1 kennen oder wissen, wofür die Attribute obligatorisch <img/>sind usw.
Wenn Sie schreckliche Websites voller Hacks erstellen, sollten Sie die befragten Personen fragen, wie sie den einen oder anderen Hack ausführen, wie sie unterschiedliche CSS für unterschiedliche Browser bereitstellen usw.
usw.
Wenn es sich um einen reinen HTML- und CSS-Job handelt, muss die Person einerseits mit Designern und andererseits mit Entwicklern zusammenarbeiten. Sie müssen HTML und CSS kennen, aber was viel wertvoller ist, ist ihre Fähigkeit, mit diesen Menschen zu interagieren und sowohl die Bedürfnisse der Designer als auch die Anforderungen der Entwickler und die Einschränkungen von HTML und CSS zu verstehen.
Beispielsweise müssen sie wissen, wie sie ihr HTML so strukturieren, dass ein JavaScript-Entwickler später problemlos Interaktivität hinzufügen kann.
Möglicherweise möchten Sie mit einigen grundlegenden Fragen beginnen:
Was ist dein Lieblingsbrowser?
Wenn die Person mit "Internet Explorer" antwortet, beenden Sie das Interview sofort: Sie brauchen so jemanden nicht.
Nein ich mache nur Witze. Die Antwort ist irrelevant. Stattdessen können Sie Folgendes fragen:
Erzählen Sie mir von den Debug-Tools, die Sie in Ihrem bevorzugten Browser verwenden.
Ich arbeite hauptsächlich mit Chrome und täglich mit den Entwicklertools. Mit diesen Tools kann ich:
Anzeigen der Anfragen von einer Seite,
Untersuchen Sie die Zeit, die zum Laden einer Seite erforderlich ist, und die zugehörigen Ressourcen, insbesondere die DNS-Suche sowie die Warte- und Empfangszeiten.
Untersuchen Sie die Header der gesendeten Elemente sowie den Cache-Indikator.
Zeigen Sie das DOM an und untersuchen Sie, wie CSS-Selektoren angewendet werden.
Ich benutze auch YSlow, das mir als Checkliste für die Optimierung einer Website dient, die eine hohe Skalierbarkeit erfordert. YSlow ist auch ein gutes Tool, um festzustellen, ob der Server richtig konfiguriert ist (Senden der richtigen Header usw.).
In Firefox verwende ich Firebug, ein Tool, das den Developer Tools von Chrome sehr ähnlich ist. Entwicklertools sind auch in neuen Versionen von Internet Explorer verfügbar und ermöglichen mir den Wechsel zu IE7 zu IE10-Kompatibilitätsansichten. Diese letzte Funktion ist sehr hilfreich, da ich ohne sie gezwungen wäre, mehrere virtuelle Maschinen nur für Legacy-Tests zu installieren oder die kostenpflichtigen Dienste wie Litmus viel häufiger zu nutzen .
Bitte erklären Sie mir, worum es sich bei dem <dl/>Tag handelt. Was war der Verwendungszweck für dieses Tag? Wie wird es in der Praxis angewendet? Was halten Sie von dieser erweiterten Nutzung?
Hier soll die Person erklären können, dass <dl/>es sich um Wörterbücher handelt, indem sie einen Schlüssel <dt/>mit einem oder mehreren Werten verknüpft <dd/>. Während die primäre Verwendung dieses Tags ausschließlich mit der Semantik zusammenhängt, wurde es in der Praxis häufig zum Ersetzen von Tabellen verwendet. Ein gutes Beispiel hierfür ist PHPBB3. Dies ist eine gute Sache, wenn Tabellen das Rendern der Seite verlangsamen, aber es muss mit Vorsicht verwendet werden: Nicht nur Tabellen sind in vielen Fällen noch angemessen, um die Daten besser zu beschreiben, sondern es kann auch andere Mittel geben, wie z. B. gewöhnliche Listen, um den Inhalt zu beschreiben, ohne zu verwenden <dl/>.
Was ist der Unterschied zwischen festen und fließenden Layouts? Was sind die Vor- und Nachteile von jedem?
Das feste Layout hat vordefinierte Breiten der Elemente. Die Elemente eines flüssigen Layouts hängen von der Breite der Seite ab.
Das feste Layout erleichtert das Entwerfen der Seite, insbesondere wenn viele Grafiken in voller Breite vorhanden sind. Auch ohne Grafik ist es noch einfacher, weil Sie nur auf einen genauen Fall achten. Beispiel: Programmers.SE ist eine Website mit festem Layout. Die Spalte, in der die Fragen und Antworten angezeigt werden, ist immer gleich groß. Wenn ein flüssiges Layout für diese Spalte verwendet würde, würde dies ein Problem verursachen: Auf kleinen Bildschirmen wäre der Text nicht lesbar, da die Zeilen zu kurz wären, während auf großen Bildschirmen die Zeilen extrem groß wären, also der Text wäre auch unlesbar.
Das Problem mit dem festen Layout ist, dass es für einige der am häufigsten verwendeten Auflösungen gut funktioniert, aber für alles andere mehr oder weniger ausfällt. Dies ist besonders wichtig, da sehr große, breite Monitore zum Einsatz kommen und das Internet zunehmend auf kleinen, mobilen Geräten genutzt wird.
Das flüssige Layout hilft dabei, aber das Design ist für eine solche Website schwieriger. In einigen Szenarien mit schlecht verwalteten Projekten kann dies zu HTML- und CSS-Hacks, großen Seiten, geringer Wartbarkeit und während der Entwicklung zu höheren Kosten und Terminüberschreitungen führen.
Wie können Sie auf einer Seite mit fließendem Layout vermeiden, dass eine Textspalte zu groß wird, um lesbar zu bleiben?
Sie können die Breite eines Textbereichs mithilfe der max-widthEigenschaft einschränken .
Was denkst du über diesen Code <p color="Red" align="Center">Text here</p>:?
Der Code hat einen Fehler beim Mischen der Präsentationslogik in HTML. Präsentationslogik muss aus verschiedenen Gründen in CSS eingefügt werden:
- Es hilft bei der Trennung von Bedenken und sauberem Code, was später eine billigere Wartung bedeutet.
- Dadurch können die Stile von Seite zu Seite wiederverwendet werden. Dies stellt sicher, dass auf der gesamten Website dieselben Stile verwendet werden.
- Es hilft, die Bandbreite zu reduzieren, da CSS-Dateien zwischengespeichert werden.
Nach ein paar grundsätzlichen Fragen könnten Sie noch einige knifflige Fragen stellen:
Wie vermeidet man das Duplizieren von Farben oder Schriftarten in CSS, wenn diese Farben oder Schriftarten auf mehrere Elemente angewendet werden, die nicht von einem einzelnen Selektor ausgewählt werden können? Gibt es Nachteile?
Dazu verwenden Sie CSS-Präprozessoren wie Sass oder LESS. Sie ermöglichen das Definieren von Farben, Schriftarten und anderen Teilen des Stils in Variablen, die Sie später in Ihren Stilen verwenden können.
Die Nachteile von CSS-Präprozessoren sind:
Manchmal müssen sie den Entwicklungs- und Bereitstellungsworkflow ändern, um den aktuellen CSS-Code im Browser zu haben.
Sie sind nur wenigen Entwicklern bekannt, weshalb es für eine neue Person schwieriger ist, dem Projekt später beizutreten oder es zu warten.
Es gibt keine guten und schnellen IDEs für Sass oder LESS, und die Integration in die beliebtesten IDEs ist eher enttäuschend.
Geben Sie mir ein Beispiel für einen hrefWert eines Bildes, das sich auf CDN befindet, vorausgesetzt, dieses Bild wird auf einer Website angezeigt, auf die sowohl über HTTP als auch über HTTPS zugegriffen werden kann.
Da HTTPS benötigt, dass sich jede aufgerufene Ressource auch auf HTTPS befindet (andernfalls wird dem Benutzer in vielen Fällen eine Sicherheitswarnung angezeigt), ist es nicht möglich, den Link als anzugeben http://cdn.example.com/image.png. Um eine ordnungsgemäße Verknüpfung zum Bild herzustellen, //cdn.example.com/image.pngmuss verwendet werden. Der Browser wird dann voranstellen http:oder https:je nach Kontext.
Wie können Sie dem Benutzer den Eindruck vermitteln, dass die Website schneller ist, da die Größe der Seiten und die Anzahl der Anfragen auf einer Website nicht optimiert und der Inhalt nicht geändert oder AJAX hinzugefügt werden kann? Worum geht es aus HTML-Sicht?
Wenn HTTP 1.1 verwendet wird, kann die Seite wird gestückelt . Dies bedeutet, dass die ersten Teile schneller erscheinen und den Eindruck erwecken, dass die Website schneller ist als in der Realität. Chunked Transfer Encoding ist in HTTP 1.0 nicht möglich, was bedeutet, dass in diesem Fall nichts zu tun ist.
Um den aufgeteilten Inhalt bereitstellen zu können, müssen die Elemente aus HTML-Sicht neu angeordnet werden, wobei die kritischsten Elemente am Anfang der Datei stehen müssen (was nicht bedeutet, dass sie am oberen Rand der Seite angezeigt werden müssen). Wenn der Benutzer beispielsweise auf einer E-Commerce-Website die Details des Produkts anzeigen möchte, kann der erste Block die <head/>und die Produktdetails enthalten . Der nächste Abschnitt kann die Hauptelemente wie das Logo der Website, das Hauptmenü, das Urheberrecht usw. enthalten. Schließlich kann der letzte Abschnitt den Abschnitt "Kunden, die diesen Artikel gekauft haben, auch gekauft haben", die Kommentare und Bewertungen des Produkts enthalten. die "Share on Facebook" usw.
Schließlich können Sie den Kandidaten bitten, an einem realen Szenario zu arbeiten. Es kann sich um alles handeln, wie das einfachste unten, um die komplexen Szenarien, in denen die Person mit CSS-Sprites oder anderen fortschrittlichen Optimierungstechniken, mit Inkonsistenzen im Browser usw. umgehen muss.
Können Sie eine XHTML-Seite mit zwei Zonen erstellen: der linken mit einer Liste und der rechten mit Text? Zwei Zonen sind durch eine vertikale Linie voneinander getrennt, die sich von ganz oben bis ganz unten auf der Seite erstreckt. Liste und Text variieren in der Größe, Sie können nicht vorhersagen, welche die größte Höhe haben wird. Sie können <table/>s nicht verwenden .
Eigentlich ist es ziemlich einfach, zeigt aber, ob die Person den Reflex hat, über Höhen nachzudenken. Ein unerfahrener Kandidat erstellt die float:leftZone und die border-left:solid 1px #ccc;Zone. Vergessen Sie jedoch, den Rand zur linken Zone hinzuzufügen und ihn so zu erweitern, dass sich zwei Ränder an derselben Stelle befinden.
