Wenn Sie jemanden zu seinen CSS-Kenntnissen und -Fähigkeiten interviewen müssen, kann es schwierig sein, spontan Fragen zu finden. Ich dachte, ich würde ein paar Ideen zum Nachschlagen zusammentragen.
Übungen zum Selbermachen
Die tatsächliche Arbeit der Leute zu sehen, ist genauso wichtig wie das, was sie sagen. Den Leuten beim Durcharbeiten von Übungen live zuzusehen, ist möglicherweise sogar noch wichtiger. Dies sind einige Übungen, die nicht besonders schwierig sind und von jedem mit CSS-Erfahrung durchgeführt werden können. Es kann von unschätzbarem Wert sein, ihnen dabei zuzusehen/zuzuhören. Der Collab-Modus auf CodePen ist dafür perfekt (nur so am Rande).
Diesen Button erstellen
Ich habe diese Idee auf dem CodePen-Account von Mobify gesehen. Zeigen Sie den Leuten ein Bild eines Buttons und sagen Sie ihnen:
Erstellen Sie diesen Button nur mit CSS-Eigenschaften neu.
Dies wäre ein großartiger Test für die CSS3-Fähigkeiten des Kandidaten. Dieser Button steckt voller solcher Dinge. Dinge, auf die ich achten würde:
- Wie sind sie mit mehreren Rahmen umgegangen?
box-shadowist hier wahrscheinlich der beste Weg. - Haben sie
text-transform: uppercase;für den Text verwendet? Das wäre am besten. - Wie sind sie mit den Sternen umgegangen? Pseudo-Elemente wären dort ein guter Kandidat. Haben sie Unicode verwendet? Icon-Font?
- Haben sie den subtilen
text-shadowbemerkt? - Wie haben sie den Hintergrund im Hauptteil des Buttons aufgeteilt? Ein
linear-gradientohne Überblendung wäre dort eine gute Technik. Oderbox-shadow. - Haben sie beim verschachtelten border-radius aufgepasst?
Ich hoffe, ich habe Mobifys Einstellungsprozess nicht ruiniert! Aber ehrlich gesagt, ich denke, so etwas ist schwer vorzutäuschen. Entweder man kann es und kann darüber reden, oder man kann es nicht.
Sidebar reparieren
Die rechte Sidebar ist hier unter den Inhalt gerutscht. Zeigen Sie mir einige verschiedene Möglichkeiten, wie Sie das beheben könnten.
Obwohl die beiden Spalten 75 % und 25 % breit sind und in entgegengesetzte Richtungen gefloatet sind, ist die Sidebar gefallen. Der Grund dafür ist, dass die Spalten aufgrund des Paddings nicht wirklich 100 % ergeben – sie addieren sich zu mehr als 100 %. Es gibt eine Reihe von Möglichkeiten, dies zu beheben:
- Die Verwendung von
box-sizing: border-box;für die entsprechenden Elemente ist die effizienteste Lösung. - Die Verwendung von
calc()für die Breiten, um das 1rem Padding zu entfernen, ist eine weitere Möglichkeit. - Das Padding auf ein hinzugefügtes internes Wrapper-Element anstelle der Spalten zu legen, ist eine Lösung, die mit sehr tiefer Browserunterstützung funktioniert.
- Das Anpassen der Zahlen, um die Rechnung zu korrigieren, ist eine weitere Möglichkeit. Zum Beispiel die Breiten der Spalten um 4 % schmaler zu machen und stattdessen 2 % für das Padding zu verwenden.
Es gibt noch andere Möglichkeiten. Je mehr Lösungen sie sich einfallen lassen, desto kreativer und vielseitiger sind sie als Problemlöser.
Machen Sie dieses Design mit fester Breite fluid.
Hier ist ein Design. Es hat eine feste Breite von 800px. Versuchen Sie Ihr Bestes, um es für jede Bildschirmgröße passender auf dem Bildschirm darzustellen.
Dies ist nur ein Bestandteil von responsivem Design (mit dem sie wahrscheinlich zumindest vertraut sein sollten), aber es ist ein wichtiger. Es kann beweisen, dass sie räumlich denken und begründete Entscheidungen über das Layout treffen können. Ich würde auf Folgendes achten:
- Ändern der Pixelbreiten in Prozentsätze (wie sind sie mit der Mathematik umgegangen?)
- Haben sie etwas Besonderes für große Bildschirme oder nur für kleine getan?
- Haben sie versucht, eine Lösung für responsive Bilder zu verwenden?
- Behält das neue Design die dem Original innewohnende Hierarchie der Wichtigkeit bei?
- Haben sie mit Fragen auf Sie zurückgekommen? (Hier gibt es viele Fragen zu stellen, einschließlich der Frage, welche anderen Ressourcen verfügbar sein könnten.)
- Haben sie es getestet? (Um sicherzustellen, dass es tatsächlich funktioniert, und um Dinge wie fehlende Meta-Tags zu finden.)
Ersetzen Sie dieses Logo-Markup durch ein Bild.
<a href="/" class="logo">Company</a>Barrierefreier und semantischer Bildersatz ist seit vielen Jahren ein CSS-Thema und der „beste Weg“ hat sich im Laufe der Jahre gewandelt. Sie zu bitten, Ihnen zu zeigen, wie es auf verschiedene Arten gemacht werden könnte, wäre eine Möglichkeit, Einblick zu gewinnen, wie lange sie wirklich schon mit CSS arbeiten. Es ist nicht nur direkt wichtig zu wissen, wie man es macht, sondern zu wissen, wie man es auf mehrere Arten macht, demonstriert die Tiefe ihres internen Werkzeugkastens.
Suchen Sie mit Google, wie Sie herausfinden würden, was der Standardwert für backface-visibility ist.
In der Lage zu sein, etwas schnell und effizient zu googeln, ist ein wichtiger Bestandteil der Arbeit eines jeden Entwicklers. Sind sie geschickt darin? Haben sie die richtige Antwort gefunden? Haben sie auf der Ergebnisseite eine bestimmte vertrauenswürdige Quelle aufgesucht?
Formulieren Sie die Frage vielleicht ohne „Google“ und sehen Sie, welche Suchmaschine sie verwenden. Hier gibt es keine besondere Voreingenommenheit, aber wenn es nicht Google ist, sind sie dann so effizient, wie Sie es von der anderen Suchmaschine erwarten würden?
Fragen zum Stellen
Darcy Clarke hat vor ein paar Jahren den Stein ins Rollen gebracht. Ich werde einige davon aktualisieren und einige eigene hinzufügen und etwas ausführen.
Was ist das „Box Model“ in CSS? Welche CSS-Eigenschaften sind Teil davon?
Das CSS Box Model ist fundamental für das Verständnis von Layout und Größenbestimmung und dergleichen. Es besteht aus:
- Breite und Höhe (oder in deren Abwesenheit, Standardwerte und der Inhalt darin)
- Füllung
- Border
Margin ist verwandt, aber technisch gesehen kein Teil davon. Ich würde zusätzliche Punkte für das Wissen/Erwähnen vergeben, aber keine Punkte abziehen, wenn es enthalten ist.
Was sind Sass, Less und Stylus? Warum werden sie verwendet? Wie verhält sich etwas wie Compass zu Sass?
Sie sind CSS-Präprozessoren. Sie sind eine Abstraktionsschicht über CSS. Sie sind eine spezielle Syntax/Sprache, die zu CSS kompiliert wird. Sie erleichtern die Verwaltung von CSS mit Dingen wie Variablen und Mixins zur Handhabung von Herstellerpräfixen (neben anderen Dingen). Sie erleichtern die Einhaltung von Best Practices, wie das Verketten und Komprimieren von CSS.
Bonuspunkte für das Wissen, wie sie sich unterscheiden und/oder für Erfahrung im Umgang mit ihnen. Mehr Bonuspunkte für das Wissen, was Dinge wie Compass, Bourbon, LESSHat, Nib usw. sind und wie sie zusammenhängen.
Nennen Sie einige Online-Ressourcen, die Sie bei CSS-Problemen heranziehen.
Gut darin zu sein, Probleme, die Sie haben, zu googeln, ist eine wertvolle berufliche Fähigkeit. Es ist keine Schande. Es ist eine Schande, sich im Kreis zu drehen, weil „man das wissen sollte“. Wenn Sie keine Zeit für die Google-Übung oben haben, kann das bloße Fragen nach Ressourcen aufschlussreich sein.
Google ist eine ziemlich gute Antwort (da es wahr ist und wir es alle wissen). Aber in der Lage zu sein, einige spezifische Websites zu nennen, ist ein guter Indikator dafür, dass sie es oft getan haben und mit den Orten vertraut sind, auf denen sie landen, und ihre Favoriten kennen. Dinge wie MDN (Mozilla Developer Network) sind eine gute Antwort.
Beschreiben Sie, was eine „Reset“-CSS-Datei bewirkt und wie nützlich sie ist. Sind Sie mit normalize.css vertraut? Verstehen Sie, wie sie sich unterscheiden?
Resets sind in CSS so weit verbreitet, dass jeder, der ein Frontend-Entwickler ist, sie mit Sicherheit verwendet hat. Tun sie dies blindlings oder wissen sie warum? Der Grund ist im Wesentlichen, dass verschiedene Browser unterschiedliche Standard-Styles für Elemente haben, und wenn Sie sich überhaupt nicht damit befassen, riskieren Sie, dass Designer in verschiedenen Browsern unnötig unterschiedlich aussehen und möglicherweise dramatischere Probleme auftreten.
Normalize könnte man als eine CSS-Reset-Alternative bezeichnen. Anstatt alle Stile zu löschen, liefert es eine Reihe vernünftiger Standardwerte. Es setzt keine Dinge zurück, die bereits browserübergreifend konsistent und vernünftig sind (z. B. fettgedruckte Überschriften). In dieser Hinsicht leistet es weniger als ein Reset. Es leistet auch etwas mehr als ein Reset, da es Macken behebt, die Sie vielleicht nie in Betracht ziehen würden, wie Inkonsistenzen bei HTML5-Audio-Elementen oder Zeilenhöhen-Inkonsistenzen bei der Verwendung von sub- und sup-Elementen.
Was sind die verschiedenen Techniken zum Clearen von Floats?
Floats sind immer noch unglaublich verbreitet. Zum Zeitpunkt der Veröffentlichung wahrscheinlich immer noch die browserübergreifend konsistenteste Methode zum Erstellen von Layouts und Grids. Jeder, der damit gearbeitet hat, ist sich des Float-Kollaps bewusst. Das heißt, gefloatete Elemente erhöhen die Höhe eines übergeordneten Elements nicht. Wenn beispielsweise ein übergeordnetes Element nur gefloatete Elemente enthielte, würde es auf Nullhöhe kollabieren. Sie können damit wie folgt umgehen:
- Verwenden Sie einen Clearfix (Bonuspunkte für Micro Clearfix).
- Floaten Sie auch das übergeordnete Element.
- Verwenden Sie eine andere Overflow-Eigenschaft als „visible“ für das übergeordnete Element (Bonuspunkte für das Auflisten von Nachteilen wie dem Abschneiden von Schatten).
Bonuspunkte für „einen neuen Block-Formatierungskontext erstellen“. Möglicherweise Minuspunkte für etwas wie <br style="clear: both;">
Als Bonusfrage könnten Sie sie bitten, die Verwendung von inline-block und floats zum Erstellen eines Grids zu vergleichen. Gute Antwort: In beiden Fällen gibt es Probleme. Bei inline-block müssen Sie sich mit dem Leerzeichenproblem befassen. Bei floats müssen Sie sich mit dem Clearen befassen.
Was sind Sprites und warum sollte man sie verwenden? Wie erstellt man sie? Welche möglichen Alternativen zu Sprites gibt es?
Sprites sind im Wesentlichen mehrere Bilder, die zu einem kombiniert werden. Leistung ist der Grund, warum sie verwendet werden. Im Allgemeinen ist das Langsamste, was eine Website tun kann, eine Ressource anzufordern. Je weniger Anfragen eine Website stellen muss, desto schneller ist sie. Schnell = gut. Das Kombinieren vieler Anfragen zu einer = gut.
Die Frage, wie sie Sprites erstellen, würde nur bestätigen, dass sie tatsächlich sehr damit vertraut sind. Das manuelle Erstellen von Sprites ist sicherlich eine Möglichkeit, aber es ist nicht sehr effizient. Es gibt Helfer-Tools wie SpriteCow und SpriteMe, Spriting mit Compass oder Grunticon. Es ist immer interessant, einen echten Workflow-Ansatz zu hören.
Sprites sind Rasterbilder. Wenn man nach Alternativen fragt, könnten gute Antworten damit zusammenhängen, dass Sprites oft für Icons verwendet werden und Icons oft nicht gerastert werden müssen. SVG Stacks, Icon Fonts, Unicode…
Welche Bedenken hinsichtlich der Barrierefreiheit ergeben sich bei CSS?
Verborgener Inhalt ist hier ein großes Thema. Es ist nur akzeptabel, display: none; zu verwenden, wenn Sie sowohl versuchen, Dinge visuell als auch den Inhalt selbst auszublenden.
CSS steuert Farben, daher ist die Barrierefreiheit von Farben relevant. Fokusstile sind ebenfalls wichtig und werden direkt von CSS gesteuert.
Es gibt noch viel mehr Dinge zur Barrierefreiheit, die mit HTML und JavaScript zusammenhängen, daher ist es großartig, diese Dinge zu erwähnen, aber ich finde es interessant, die Frage nur auf CSS zu richten, um fokussiertes Denken zu erzwingen.
Was ist der Unterschied zwischen inline, inline-block und block?
Bonuspunkte für das Ansprechen spezifischer Details wie der Tatsache, dass man Inline-Elemente nicht transformieren kann.
Welche Tools verwenden Sie für Cross-Browser-Tests?
Sie sollten eine Art Strategie haben. Vielleicht ein webbasiertes Tool wie BrowserStack. Vielleicht ein VM-basiertes Tool wie Virtual Box. Vielleicht verschiedene tatsächliche Computer.
Ein Teil der Aufgabe beim Frontend-Design besteht darin, sicherzustellen, dass die Dinge überall funktionieren, wo sie können (basierend auf der festgelegten Unterstützung). Man muss es nicht lieben, aber man darf es nicht hassen. „Das hier, das ist der Job. Welche Art von Arbeit haben Sie erwartet?“
Welche sind Ihre bevorzugten Workflow-Tools für Webdesign?
Welchen Code-Editor mögen sie? Woher holen sie Inspiration? Welche Erfahrung haben sie mit Versionskontrolle? Wie sah die Qualitätssicherung an den Orten aus, an denen sie gearbeitet haben? Support? Mit welchen verschiedenen Bereitstellungsmethoden haben sie gearbeitet? Kennen sie Photoshop oder eine andere Alternative zu visueller Designsoftware? Sind sie mit dem Terminal vertraut?
Das sind nur einige Beispiele, es ist interessant, etwas über jede Software zu hören, die sie verwenden, um die Arbeit zu erledigen. Ein Gefühl dafür zu bekommen, welche Tools sie verwenden (und besser noch, welche Tools sie mögen), ist interessant. Bonuspunkte: ein Gefühl der Begeisterung für einige der Tools.
Angenommen, Sie haben ein Rendering-Problem auf einer Ihrer Websites in Internet Explorer 8 gefunden, das Sie unterstützen möchten. Wie würden Sie vorgehen, um es zu beheben?
Dies wäre eine alternative Frage zur allgemeinen Frage nach Cross-Browser-Tests. Spezifischer. Vielleicht wäre eine schwierigere alternative Frage, IE 8 durch etwas wie „Ein Google Nexus mit Android 2.3“ zu ersetzen. Würden sie einen Simulator finden? Würden sie ein Designlabor aufsuchen? Würden sie das Unternehmen um eine Freigabe für Geräte zum Testen bitten, mit einer Art intelligentem Plan? Würden sie einen Freund mit einem finden?
Worum geht es bei responsivem Design?
Es geht darum, Websites überall dort funktionsfähig zu machen, wo das Web ist. Verschiedene Geräte mit unterschiedlichen Größen und unterschiedlichen Funktionen. Responsive Design bedeutet, eine Codebasis zu verwenden und sie für alle funktionsfähig zu machen. Ein Teil davon sind Medienabfragen und unterschiedliche Visualisierungen. Ein Teil davon sind unterschiedliche Ressourcen (z. B. unterschiedliches JavaScript zur Verarbeitung von Touch vs. Klick oder unterschiedliche Bilder zur Anpassung an den Bildschirm).
Haben Sie schon einmal mit einem Grid-Layout gearbeitet? Was denken Sie darüber?
Warum brauchten sie ein Grid? Wie haben sie das Grid aufgebaut? War es selbstgemacht oder haben sie ein Grid-Tool verwendet? Hat ihnen das Grid-Tool gefallen? Welche Art von Klassennamen haben sie verwendet? Haben sie Mobile-First oder Desktop-First gearbeitet? War es eine Hilfe oder ein Hindernis? Greifen sie bei jedem Projekt automatisch zum Grid?
Welche Vorteile bietet SVG?
SVG ist ein Vektor-basiertes Bildformat. Es ist ein effizientes Format dafür (kleine Dateigrößen). Man kann sie skalieren und sie behalten ihre Schärfe bei jeder Größe bei (Bonuspunkte für das Erwähnen, dass Raster bei winzigen Größen die Oberhand haben könnten). Man kann Teile davon mit CSS und JavaScript sowie mit SVG-spezifischen Filtern bearbeiten, die Dinge wie Unschärfe erzeugen können.
Haben Sie schon einmal ein Print-Stylesheet für eine Website erstellt?
Ein Indikator dafür, dass sie sich schon einmal „die Extrameile“ für Websites gemacht haben. Welchen Ansatz haben sie verfolgt? Wie haben sie es getestet?
Angenommen, Sie hätten die Aufgabe, ein Design zu codieren, das nicht standardmäßige Webfonts verwendet. Wie würden Sie vorgehen?
Eine nicht-leitende Möglichkeit, sie dazu zu bringen, über @font-face und dessen Funktionsweise zu sprechen. Es ist großartig, darüber zu sprechen, wie es als Kern-CSS-Technologie funktioniert, und auch über Dienste, die die Schriftarten bereitstellen und es einfacher machen können, z. B. Google Fonts, Typekit, Font Deck, Cloud Typography usw.
Bonuspunkte für obskures Wissen wie die Geschichte der @font-face-Syntax oder Firefox’ Problem mit Cross-Origin-Schriftarten.
Erklären Sie mir, was in diesem CSS-Selektor vor sich geht
[role=navigation] > ul a:not([href^=mailto]) {
}Dies wählt Anker-Links aus, die keine E-Mail-Links sind, die Nachfahren einer ungeordneten Liste sind, die das direkte Kind eines Elements mit dem Role-Attribut „navigation“ ist.
In der Lage zu sein, einen Selektor zu verbalisieren, ist der Beweis dafür, dass Sie ihn verstehen, und ein Beweis dafür, dass sie komplexe technische Themen kommunizieren können.
Ihre Ideen
Welche Fragen wurden Ihnen bei Vorstellungsgesprächen für einen CSS-bezogenen Job gestellt? Oder die Sie Ihren Kandidaten stellen? Oder die Sie im Allgemeinen für gute Fragen halten?
Haben Sie das gesehen... https://github.com/darcyclarke/Front-end-Developer-Interview-Questions
Ich habe oben im Abschnitt Fragen zum Stellen darauf verwiesen. Einige dieser Fragen basieren darauf.
„Whiteboard“-Übungen zum Codieren auf Abruf sind so nutzlos und eine Zeitverschwendung, dass es mich jedes Mal wütend macht, wenn jemand vorschlägt, sie zu verwenden. Sie haben einen Fremden, der mit ein paar anderen Fremden in einem Raum sitzt und ein Stück Papier oder einen Whiteboard-Marker in die Hand gedrückt bekommt und aufgefordert wird, etwas zu erstellen? Von jemandem zu erwarten, dass er in einer Umgebung, die dem Erstellen von gutem Code so diametral entgegengesetzt ist wie möglich, etwas schreibt, das kein Müll ist, ist eine Beleidigung für den Interviewten und eine weitaus weniger effektive Nutzung Ihrer Stunde (oder so) als sich seine frühere Arbeit anzusehen und darüber zu diskutieren.
Meine 2 Cent.
Ich stimme dem so ziemlich zu. Obwohl ich nicht denke, dass es ausgeschlossen ist, sie zu bitten, überhaupt etwas zu codieren. Vielleicht so: Sie haben 20 Minuten Zeit, um daran zu arbeiten. Arbeiten Sie daran (vielleicht sogar zu Hause allein) und dann reden wir darüber, wenn Sie fertig sind. Und das Thema ist auch wichtig. Einen Sortieralgorithmus aus den 60ern auf ein Whiteboard zu bringen, ist lächerlich. Jemanden zu bitten, einen Button zu CSSen, ist megapraktisch und beweist, dass er den Job entweder machen kann oder nicht.
Ich denke, ich werde Scotts Kommentar bekräftigen, weil er nicht oft genug gesagt werden kann!
Mögliche Kandidaten beim Codieren testen == gut. Diese Tests sollten jedoch durch „Hausaufgaben“, einen Arbeitstest, der vor oder nach einem Vorstellungsgespräch eingesendet werden soll, und nicht beim Vorstellungsgespräch selbst durchgeführt werden.
Wie Sie sagen, Chris, zu sehen, wie sie Dinge durcharbeiten und das ist eine gute Sache. Ich habe meinen Job zum Beispiel wegen geordnetem und qualitativ gutem Code bekommen, wo andere an der Aufgabe nicht interessiert waren, weil sie zu entmutigend war.
Ja, wenn ich jemanden bitten würde, tatsächlich etwas Komplexes zu erstellen. Ich mag das Button-Beispiel hier, weil jeder, der fließend ist, es grob skizzieren können sollte. Die Eigenschaften müssen nicht perfekt sein – ich würde zum Beispiel keine Abzüge für das Vertauschen der Reihenfolge der Box-Shadows machen – aber sie sollten in der Lage sein, die Struktur zu skizzieren und zu erklären, welche Eigenschaften welchen Effekt erzeugen.
Ich würde der Reichweite Ihrer Positionen stark widersprechen. Jemanden zu bitten, etwas syntaktisch Korrektes zu schreiben, ist beleidigend und Zeitverschwendung. Jemanden zu bitten, eine grundlegende Beschreibung einer Vorgehensweise zur Behebung eines Problems zu erstellen und seine Argumentation zu erklären, ist es nicht, insbesondere wenn Sie nach jemandem suchen, der erfahren genug ist, um vielseitig zu sein und andere anzuleiten.
Wenn Sie erwarten, dass sie etwas anderes als eine einfache Lösung produzieren, insbesondere bei einem Debugging-Problem, dann ist dies ein schlechter Weg, dies zu tun. Von ihnen zu erwarten, sich zu erinnern, wo etwas zwei zusammengesetzte Wörter vs. zwei mit Bindestrichen versehene Wörter ist, ist unzumutbar. Es kann gut sein, dass Sie jemanden für eine Position einstellen, bei der Sie einfach rohes Fleisch in einen Schacht werfen und sie Designs hochwerfen; wenn das der Fall ist, oder Sie nach jemandem suchen, der ausreichend Junior ist, ist das in Ordnung. Aber das Interview, bei dem Sie erwarten, dass jemand Ihnen zeigt, wie er zu einer Lösung kommt und wie er Dinge anderen erklären würde, wurde nicht durch Google und Just-in-Time-Syntaxprüfung veraltet. Wenn überhaupt, hat es an Bedeutung gewonnen für bestimmte Stufen und benötigte Kompetenzen.
Ich stimme Scott hier zu. Gebeten zu werden, diese Art von Übungen in einem Interview zu machen, wäre für mich ein großes Warnsignal, der Firma beizutreten. Es vermittelt mir den Eindruck, dass die Dinge in einer Umgebung viel zu angespannt sind. Wenn jemand darauf besteht, diese Art von Tests durchzuführen, wäre es besser, sie als Hausaufgaben zu vergeben, die erledigt und überprüft werden. Besser noch wäre es, sich Beispiele der Arbeit anzusehen und den Stil der Arbeit zu sehen, den die Person im Allgemeinen zeigt.
Allerdings sind einige der allgemeineren Fragen wie „Welche Tools verwenden Sie für x“ oder „Was denken Sie über Grid-Layouts“ Dinge, die eine interessante Diskussion auslösen und zeigen würden, dass der Interviewer auch mit einigen technischen Details vertraut ist. Ich würde diese in einem Interview begrüßen.
Ich stimme Scott größtenteils zu.
Allerdings denke ich, dass es fair ist, wenn sich jemand für eine Senior-Position bewirbt, seinen Laptop mitzubringen und ein wenig zu codieren. Das sollte kein Warnsignal sein, sondern eine Chance, seine Fähigkeiten unter Beweis zu stellen.
Ich würde Kandidaten immer weit im Voraus darüber informieren, dass dies Teil des Prozesses ist, und es in der zweiten Interviewphase tun, vielleicht indem man einige Zeit damit verbringt, gemeinsam an einem echten Problem zu arbeiten.
Es ist mir nicht wirklich wichtig, ob Sie die Syntax auswendig kennen, aber ich möchte „live“ Beweise für fundierte Kenntnisse (die der Position angemessen sind), Codeorganisation und einen kreativen Ansatz zur Problemlösung sehen.
Dies sollte der Teil des Interviewprozesses sein, der uns allen am meisten Spaß macht.
Meine 2 Cent aus der Sicht des Personalvermittlers.
Könnte Scott nicht mehr zustimmen. Diese Art von Fragen demonstrieren meistens den Mangel an Wissen des Interviewers (übrigens Chris, ich beziehe mich nicht auf Sie).
Wenn es nicht so wäre, könnte er/sie die jüngsten Arbeiten des Bewerbers analysieren, bevor er sich mit ihm trifft, und ihm dann allgemeinere Fragen zum Arbeitsstil usw. stellen.
Ich selbst habe kein sehr gutes Gedächtnis. Wenn mich also jemand nach verschiedenen Möglichkeiten fragt, Bilder zu ersetzen, kann ich ihm im Moment vielleicht nicht antworten. Aber ich habe genug Erfahrung, um jedes Mal den bestmöglichen Weg zu finden, und ich denke, das ist wichtig.
Aber trotzdem ist dieser Artikel sehr informativ ;)
Entschuldigung, Chris, ich wollte das Gespräch nicht mit meinem kleinen Rant übernehmen, und hoffentlich hat die daraus resultierende Diskussion nicht von dem abgelenkt, was wirklich ein ausgezeichneter Artikel und eine Reihe von Fragen ist. Der Abschnitt „Fragen zum Stellen“ deckt eine sehr gute, breite Palette von Fähigkeiten und Kenntnissen ab, die einem Interviewer ein starkes Gefühl für die Fähigkeiten eines Kandidaten vermitteln würden.
@Simon, ich benutze keinen Laptop für meine Arbeit und habe ehrlich gesagt nicht vor, mir in nächster Zeit einen zuzulegen (ich habe meine eigenen Rigs jahrelang gebaut). Daher ist „einen Laptop mitbringen“ vielleicht auch nicht der beste Ansatz.
Der Arbeitgeber sollte den Laptop/Desktop-PC oder alle „Test“-Tools bereitstellen, unabhängig davon.
Nun, 15-20 Minuten lang zusammenarbeiten, um ein aktuelles reales Problem im Unternehmen zu lösen… stimme zu.
Ich stimme voll und ganz zu. Ich war in mehreren Vorstellungsgesprächen, in denen ich für einen Job, bei dem ich eindeutig nur CSS und grundlegendes HTML schreiben würde, aufgefordert wurde, einen Regex zu finden, der US-Telefonnummern oder E-Mails von bestimmten Websites einkapselte. Sicher, das würde Sinn machen, wenn ich tonnenweise JS schreibe, aber als jemand in einer hauptsächlich designorientierten Position ist es einfach unsinnig, danach zu fragen. Selbst nach „Pseudocode“ für ein Layout zu fragen, ist furchtbar. Soll es responsive sein? Wo auf der Browser-Kompatibilitätsskala streben wir an?
Wie Chris sagt, ist eine statische Herausforderung, selbst mit einem flexibleren Zeitrahmen, viel vernünftiger und zumindest geringfügig produktiv.
Ehrlich gesagt, denke ich, dass die meisten Fragen leicht von jedem gestellt werden können, der nur kurz mit CSS gearbeitet hat.
Wenn dies eine echte Person mit diesem Kommentar wäre, wäre ich bereit, darüber zu diskutieren. Aber da es anonym ist, fühlt es sich trollig an, also wird es vergraben.
Nicht direkt technologiebezogen, meine Lieblingsfrage, wenn ich jemanden interviewe, ist, wie sie sich selbst als Frontend-Entwickler auf einer Skala von 1 bis 10 einschätzen. Es ist normalerweise die letzte Frage, die ich stelle, und es ist interessant zu sehen, ob sie mit meiner Einschätzung übereinstimmt, die auf Testfragen basiert.
Diese Frage ist gut, wenn Sie mit „Warum haben Sie diese Zahl gewählt?“ nachhaken. Das gibt Ihnen eine großartige Gelegenheit, genau zu sehen, wie vertraut sie mit einer Sprache sind, weil sie über die Dinge sprechen können, die sie wissen, und was sie ihrer Meinung nach noch nicht wissen. Die meisten guten Kandidaten schätzen sich auf 7 oder 8 ein.
Ja, das tue ich immer. Es ist nicht wirklich eine Frage, die man richtig beantworten kann (die meisten Leute geben sich tatsächlich 7 oder 8) – aber man kann sie falsch beantworten, oder mich zumindest zum Nachdenken bringen.
Wenn jemand sagt, er sei eine 10, weiß man, dass etwas nicht stimmt. Und ja, ich hatte Leute, die sagten, sie wären es. ;)
Als CSS-Anfänger fühlte ich mich ziemlich gut dabei, einige der Antworten auf diese Fragen zu kennen! Dies gab mir auch einige gute Lernthemen, die ich mir ansehen konnte. Danke dafür, Chris.
Ich halte mich für SEHR gebildet in CSS/JS/PHP (AngularJS, Laravel) und ich denke, das sind ausgezeichnete Fragen, wenn man nach jemandem sucht, der CSS beherrscht.
Das einzige, was ich wahrscheinlich hinzufügen würde, ist eine Art Designfrage, um Leute auszusortieren, die wie in den 90er Jahren entwerfen.
Was sind Ihrer Meinung nach einige Beispiele für gutes, brauchbares und ansprechendes Design?
Ich stimme @Scott zu, dass Whiteboarding wirklich eine seltsame Art ist, die Fähigkeiten von jemandem zu testen, da es so weit von der Art und Weise entfernt ist, wie man normalerweise arbeiten würde. Ich zum Beispiel bin in vielen Aspekten des Webdesigns ziemlich erfahren, muss aber trotzdem ständig Dinge im Web nachschlagen. Im wirklichen Leben spielt das keine Rolle, solange ich die Arbeit erledige, und das tue ich. In einer Whiteboard-Situation würde ich wahrscheinlich oft scheitern. Ich bin jedoch nicht gegen spontane Fähigkeitstests, aber lassen Sie es in einem realen Szenario sein.
Hier ist es genau dasselbe.
Wie Sie bin ich ziemlich erfahren, aber ich beziehe mich immer öfter auf meine Fragen/Antworten in Stackoverflow, meine Code-Snippets in Gist, und jetzt beziehe ich mich immer öfter auf meine eigenen Demos in CodePen.
Wenn ich während des Whiteboardings meine oben genannten Ressourcen verwenden „dürfte“, hätte ich kein Problem damit.
schluck*
Ich gehe zu Vorstellungsgesprächen und hoffe, dass sie mich nicht bitten, dies zu tun.
Aber warte. Ich werde das jetzt tun. Und dann super schlau aussehen. ;)
Danke, Chris Coyier.
Wenn ich in der Position wäre, jemanden zu interviewen, würde ich auch die folgenden Zeilen hinzufügen. Es würde einfach Spaß machen, darüber zu plaudern :)
p[style="text-align: center"] { text-align: left !important }Ich würde sagen, da Sie auf einen Absatz verweisen, der Inline-Styling zu haben scheint, und da Inline-Stile alles überschreiben sollen, dass dies den Text immer noch zentriert ausrichtet.
Ich schätze, die Frage ist, überschreibt important Inline-Stile? Oder sind Inline-Stile das Wahre lol
Nein Billy, der Text wäre hier linksbündig. !important geht dem inline-style text-align center voraus, und da die style-Eigenschaft nicht als css interpretiert wird, würde sie den Selektor nicht ungültig machen.
Wichtig bricht also alle CSS-Regeln? das heißt, es kann alles überschreiben?
Ich denke, deshalb ist es keine gute Praxis.
Die Prämisse hier ist, dass „… Sie in der Lage sind, jemanden zu seinen CSS-Kenntnissen und -Fähigkeiten zu interviewen …“, also verdammt ja, ich stimme zu, dass diese Fragen angemessen und gut durchdacht sind. Prost!
Hallo Chris,
Danke dafür. Sie haben etwas brutal angefangen, lol, die Frage nach dem Erstellen des Buttons ist nicht schlecht, wenn man so etwas wie schummeln darf. Ich weiß zum Beispiel genau, wie man diesen Button sorgfältig nachbildet und welche CSS-Eigenschaften man verwendet, aber sich an die Syntax für Dinge zu erinnern, die ich nicht täglich verwende, wie Box-Shadow oder Text-Shadow (obwohl es in der Form „Eigenschaft: x y blur“ vorliegt). Wäre kein Problem mit einem Code-Editor wie Sublime, der bei Hinweisen hilft.
Leider schadet das Vertrauen auf Texteditoren auf lange Sicht meiner Meinung nach, aber mit dem Drang nach „schneller Entwicklung“ verlassen wir uns auf Tools, die Dinge für uns erledigen. Es ist ein Kompromiss, man konzentriert sich nicht auf kleine Details wie diese, weil man weiß, dass man Tools hat, die helfen, um den Workflow zu beschleunigen.
Jedenfalls sind die meisten dieser Fragen gute Fragen. Bezüglich der Button-Frage wäre ein guter Kompromiss, wenn eine Person beschreibt, wie sie diesen Button erstellen würde. Mir hat die Frage nach den Selektoren, die etwas wie [role=’xyz’] > a:not etc. beschreiben müssen, sehr gut gefallen
Hey Chris!
Ich bin von Mobify Design Team Hiring Person hier – danke, dass Sie unseren Pen vorgestellt haben! Wir haben ein paar andere private Pens, die wir auch verwenden, um den Komfort und die Fähigkeiten der Leute herauszufinden.
Für die Leute, die sich zum Wert von CSS-Tests äußern, verwenden wir sie für einen ganz bestimmten Zweck – obwohl wir auch ein paar andere Dinge dabei herausfinden.
Wir führen sie während Interviews durch und sitzen gerne mit der Person im Raum, während sie versucht, sie zu lösen. Das Hauptziel, wonach wir suchen, ist die Fähigkeit zur Problemlösung, also stellen wir normalerweise Fragen, während sie überlegen, was sie versuchen und warum sie glauben, dass es funktionieren wird. Dieses Button-Beispiel ist fantastisch, um sowohl das Komfortlevel mit einigen fortgeschritteneren CSS3-Dingen als auch die Fähigkeit, ein vorgegebenes Design genau abzugleichen, zu testen. Wir lassen die Leute völlig googeln oder uns nach Eigenschaften fragen, weil sie sowieso so arbeiten würden.
Und wenn Leute denken, dass sie diesen Test oder alles andere, was wir ihnen vorlegen würden, meistern würden, stellen wir ständig Entwickler und Designer bei http://www.mobify.com/jobs ein.
Auch wenn Sie sich bewerben, würde ich wahrscheinlich nicht erwarten, genau diesen Test zu bekommen... Nur so am Rande.
Und mein Link hat nicht richtig funktioniert.
http://www.mobify.com/jobs
Klingt gut für mich. Ein einfacher Spickzettel mit css3-Eigenschaften würde ausreichen und nicht, als ob er die ganze Zeit benötigt würde, aber es wäre cool, ihn einfach dabei zu haben. Die Interaktion ist definitiv wichtig, und auch die Fähigkeit, den Denkprozess zu erweitern, um die Warums usw. zu erklären
Ich mag die Frage zum Clearen von Floats. Normalerweise zeichne ich zwei zu 50 % breite gefloatete Boxen mit einem Wrapper darum, der keine Höhe hat. Ich frage, was passieren würde, wenn man dem Wrapper einen Rahmen hinzufügt, und warum. Anstatt also zu fragen: „Wie clearen Sie einen Float?“, möchte ich sehen, ob der Entwickler überhaupt weiß, wann er/sie die Floats überhaupt einschließen muss.
Ich frage auch gerne nach dem Unterschied zwischen der Verwendung von translate und position:absolute. Ich erwähne Animation in der Frage nicht unbedingt, wenn sich der Entwickler für eine mittlere / fortgeschrittene Position bewirbt. Ich habe dort einige interessante Antworten gesehen.
Zuletzt stelle ich gerne etwas abstraktere Fragen, die keine richtige oder falsche Antwort haben, um den Denkprozess eines Kandidaten zu sehen. So etwas wie: „Warum sind Gullydeckel rund?“. Die Antwort selbst spielt keine Rolle, da der Kandidat (wahrscheinlich) keine Gullydeckel installieren wird, aber es liefert oft überraschende Ergebnisse, die sowohl den Denkprozess als auch die Bereitschaft zeigen, über ein Problem nachzudenken. Es ist auch eine Art lustige Ablenkung von den oft Angst auslösenden technischen Fragen.
Kyle Peatt, habt ihr Remote-Positionen?
Hallo Billy,
Wir haben derzeit keine Remote-Positionen; wir sind jedoch offen für Umzüge! Vancouver ist ein fantastischer Ort zum Leben und Arbeiten.
Kyle
Ha, danke Kyle, aber ich bin schon ein paar Mal umgezogen. Ich bin jetzt wieder zu Hause in NY oder zumindest im Nordosten.
Ich bin verlobt, kann nicht mehr einfach so umziehen
Danke Chris, dass du mich demütig hältst.
Bei allem Respekt, das Erste, was ich in einem Interview sagen würde, als ich das Beispiel sah:
Erklären Sie mir, was in diesem CSS-Selektor vor sich geht: [role=navigation] > ul a:not([href^=mailto])
…war: „Alter! Wow, du steckst in großen Schwierigkeiten, Kumpel.“
Immer wenn man so einen Monster-Selektor schreibt, steckt man in RIESIGEN S#@!+ fest! >_<
Selektoren zu erklären ist technisch, jeder kann bestimmte Strukturen für das Interview lernen und auswendig lernen.
Der analytische Prozess und das Verständnis der Art von Botschaft, die dieser schlechte Selektor aussendet, ist meiner Meinung nach am wertvollsten. Zumindest, denke ich, hilft es, eine Meinung zu bilden, die dem Interviewer einen Einblick in das Wissen und vor allem die Erfahrung des Kandidaten geben könnte.
Würde CSS-Tricks selbst als wertvolle Ressource bei dieser Art von Interviews gelten?
Wenn Sie schlau sind, spielen Sie in einem Interview keine Schulprüfung. Es ist schwer genug, talentierte Leute zu finden, und Sie wollen sie nicht verlieren. Und wie bereits erwähnt – niemand sucht nach einem Lehrbuch über CSS zum Einstellen, sondern nach jemandem mit starken Analysefähigkeiten und Kreativität, um Probleme effizient zu lösen.
Nebenbei bemerkt: Die Erwähnung „wenn sie es wissen, können sie darüber reden“ ist falsch. Es ist so falsch wie es nur geht. Es gibt enorm begabte Leute, die außergewöhnlich gute Arbeit leisten – aber wenn man sie bittet, es zu erklären, scheitern sie furchtbar. Wir alle kennen Situationen im Leben, in denen wir gebeten werden, etwas zu erklären, es aber nicht können: „Nun, äh, es ist schwer zu erklären.“
Sebastian, ich stimme dir voll und ganz zu. Manche Leute können nicht gut reden oder ihre Ideen erklären, aber das bedeutet nicht, dass sie nicht talentiert sind.
Ich finde mich oft in dieser Position wieder. Ideen und Problemlösungen fließen frei in meinem Kopf, aber ich finde nicht die richtigen Worte, um sie meinen Kollegen zu erklären.
Sebastian, ich stimme dir voll und ganz zu. Manche Leute können nicht gut reden oder ihre Ideen erklären, aber das bedeutet nicht, dass sie nicht talentiert sind.
Ich finde mich oft in dieser Position wieder. Ideen und Problemlösungen fließen frei in meinem Kopf, aber ich finde nicht die richtigen Worte, um sie meinen Kollegen zu erklären.
Ich denke, es ist nichts falsch an diesem Format von Fragen, solange Sie eine Ersatzfrage haben, falls sie nicht wissen, wie sie genau dieses Problem angehen sollen. Ich meine, kommen Sie, Sie könnten einen extrem talentierten Frontend-Entwickler wie mich (ich mache nur Witze, nur ein prahlerischer Witz) verpassen, nur wegen eines einfachen Edge-Cases, den sie nicht spontan lösen konnten. Ich bin mir sicher, dass die meisten von uns dieses eine Problem haben, das sehr grundlegend ist, eines, das wir lösen können sollten, aber wir brauchen oft etwas Googeln, um es zu erledigen. Was, wenn es sich um eine solche Frage für einen Entwickler handelt?
Es macht Sinn, Fragen vom Typ Forschung zu stellen. Fragen Sie sie nach ihrem Workflow, wie sie ein bestimmtes Problem lösen würden (eines, das sie ausgewählt haben und das sie für herausfordernd hielten). Sie könnten sie sogar fragen, was sie daran für herausfordernd hielten. Aber nehmen Sie es nicht wörtlich, wir als Frontend-Entwickler sind Problemlöser (sei es Googeln, Nachschlagen in einem Buch oder ganz altmodisches Erinnern/Auswendiglernen von CSS-Syntaxen).
Kurz gesagt, es gibt keine festen Regeln. Ich würde lieber einen besseren Forscher einstellen als jemanden, der sehr gut in dem ist, was er tut, aber nicht aus seiner Komfortzone herauskommt, um neuere Dinge zu tun, da dies die Natur unseres Feldes ist (Dinge ändern sich schnell und ständig) und ich mag es so.
Vielen Dank fürs Lesen (Ja, ich weiß, es ist etwas lang, aber ich dachte, ich müsste meine Gefühle kundtun, :-)).
Sie können ihnen eine Website zeigen (einige Ihrer abgeschlossenen Projekte) und sie fragen, wie einige Elemente codiert und gestylt werden können. Sie können mit einigen einfachen Dingen beginnen und den Schwierigkeitsgrad erhöhen. Auf diese Weise können Sie feststellen, wie weit jeder von ihnen gehen kann und wo seine Grenzen liegen.
BTW, ausgezeichneter Beitrag. Ich hatte einige dieser Fragen bei meinem Vorstellungsgespräch.
Weitere Programmier-Tutorials finden Sie hier
So liest man Bildtext mit PHP
Chris rockt !!!!
Danke, das ist ausgezeichnet für Junior-Front-End-Entwickler
Ich habe aufgehört, technische Fragen zum Frontend (CSS) bei Vorstellungsgesprächen zu stellen. Ich interessiere mich mehr dafür, wie sie neue Techniken aufnehmen und wie sie den Job sehen (d. h. werden sie ein paar Jahre bleiben und sich weiterentwickeln). Technisches Wissen ist etwas, das die richtigen Leute sehr schnell aufnehmen, wenn sie gut angeleitet werden. Dieses Wissen zu pflegen und sich ständig selbst herauszufordern, ist das, wonach wir bei guten Frontendern suchen.
Hallo Niels,
Hätte es nicht besser formulieren können. Auf dem Laufenden zu bleiben und mit der Branche Schritt halten zu können (wenn nötig) ist wertvoller als stagnierende Fähigkeiten.
Mann, ich dachte früher, ich wäre ziemlich schlecht in CSS, aber nachdem ich das hier gelesen habe, habe ich das Gefühl, dass ich mich bei jeder Frage / Aufgabe zumindest gut geschlagen hätte. Vorher dachte ich nicht, dass ich auch nur annähernd auf dem Niveau wäre, um CSS professionell zu verwenden.
Ich würde definitiv eine Frage zur Positionierung und zur position-Eigenschaft aufnehmen. So etwas wie „Wie zentrieren Sie ein absolut positioniertes Element?“ würde sehr aufschlussreich sein.
Ich habe das gegoogelt, Problem in etwa 30 Sekunden gelöst, weiter zum nächsten :) http://www.sitepoint.com/css-center-position-absolute-div/
Ausgezeichneter Artikel. Ich schätze die Interviewfragen.
Hallo Leute,
Ich habe versucht, den Button nur mit einem a-Element nachzubilden, ohne Spans oder ähnliches. Hier ist meine Lösung
http://jsfiddle.net/UPJfd/
Aber ich habe keine Ahnung, wie ich die Sterne einfügen soll. Hat jemand eine Idee?
Hey, das ist eine gute Nachbildung! Die Sterne sind der einfachste Teil. Verwenden Sie einfach Pseudo-Elemente wie diese
@Kevin
Wenn Sie zwei gleiche Regeln haben, würde ich sie mit demselben Selektor kombinieren
@dazzle89 Eine weitere Lösung für die Sterne könnte sein, das eigentliche HTML-Sonderzeichen in den Button einzufügen. Ja, es fügt etwas mehr Markup hinzu, aber es wird großartige Unterstützung haben, da Sie nicht :before / :after verwenden.
dein Fiddle, erweitert
@Alex danke für den Hinweis, ist mir definitiv entfallen.
Ich liebe es. Heißes Drama um einen Button, niemand sieht das Gesamtbild.
— S
Whiteboarding? Sicher, her damit... lass uns tanzen.
Lieber reden? Kein Problem, ich bin zweisprachig, lass uns beide lernen.
Lass uns endlich erwachsen werden.
+1 :D
Ich habe den Checkout-Button in 30 Minuten erstellt... werde ich trotzdem eingestellt? http://codepen.io/gillytech/pen/duHFG
Kevin, toller Pen. Ich habe mir das angesehen, weil ich wusste, dass es Teile geben würde, bei denen ich Schwierigkeiten mit dem Button haben würde. Ich denke, es gibt nur eine Sache, die ihn noch ähnlicher machen würde. Ich finde, dass
a {letter-spacing: -1px;}das Kerning der Buchstaben korrekt zu setzen scheint. Sie sind im Beispiel etwas enger beieinander als in deinem Pen. Was denkst du?Hallo Kevin,
Gute Arbeit am Button! Er ist ziemlich nah dran, obwohl ich ein paar kleinere Unterschiede sehe, die du noch ausbessern könntest. Aber tolle Arbeit.
Ich kann dich nicht sofort einstellen, aber bewirb dich gerne auf unserer Jobseite.
Danke euch. Ich habe ein paar Änderungen vorgenommen und bin mir ziemlich sicher, dass dieses hier das exakte Abbild ist.
Ich habe den Buchstabenabstand, wie von Kyle S. vorgeschlagen, verkürzt und einen Schatten um den Button hinzugefügt, den ich übersehen hatte. Außerdem habe ich den Hauptgradienten geändert, um dem Original genauer zu entsprechen.
Danke für das Angebot Kyle P., aber ich feile nur an meinen Fähigkeiten für meinen derzeitigen Job :)
Hey Kevin!
Sieht gut aus. Ich glaube, es fehlt noch eine Sache. Schau dir den Glanz auf dem Button an den linken und rechten Rändern etwas genauer an.
Danke, dass du mit unserem Button gespielt hast. Es könnte Spaß machen, ein paar unserer anderen Tests zu öffnen.
Vielen Dank für diesen Beitrag. Ich bringe mir seit einem Jahr Webdesign/Entwicklung bei und versuche, in diesem Berufsfeld Fuß zu fassen. Ich habe das Gefühl, dass das Üben einiger dieser Dinge mir endlich eine Anstellung verschaffen könnte.
hire.kyleshevlin.com
Ich fand den Artikel toll. Wie immer Gold wert. Danke fürs Posten!
Ich bin neugierig auf die CSS-Button-Aufgabe.
Wurde das gezeigte Bild in einem Bildbearbeitungsprogramm (wie Photoshop) erstellt, oder wurde es bereits durch CSS generiert? (Hinterlistig, hinterlistig!) Wenn es bereits NUR aus CSS generiert wurde, wie wurden die kleinen Kurven erstellt, die am 50%-Punkt des linearen Gradienten auf der rechten und linken Seite des Buttons auftreten?
Gibt es außerdem eine Möglichkeit, die äußeren box-shadows auf Hover reagieren zu lassen, wie es der Hauptteil des Buttons normalerweise tut (ohne auf zusätzliches Markup oder JS zurückzugreifen)?
In meinem Pen, den ich „The Interview’n Button“ nenne,
Ich würde auch gerne wissen, warum die Sternglyphen etwas größer werden, wenn ein kleiner nudging margin auf a:hover gesetzt wird.
Frage mich nur.
Hallo Joseph,
Was du siehst, wurde im Browser generiert! Ja, einschließlich dieser kleinen Kurven, die du erwähnt hast. Ich werde nicht zu viele Hinweise geben, aber du kannst es mit einer der Eigenschaften machen, die du bereits verwendet hast.
Was die Reaktion der box shadows auf Hover angeht, könntest du dieselbe Technik verwenden, die oben erforderlich ist, um so etwas zum Laufen zu bringen.
Danke, dass du mit unserem Button gespielt hast!
Kyle,
Ja. Ich habe in diesem Moment einfach nicht tief genug darüber nachgedacht. Diese Kurven zu jeder Seite sind eigentlich einfach. Außerdem kann man dann die linearen Gradienten entfernen, um es schlanker zu machen, was eine zusätzliche Annehmlichkeit ist. Hier ist der „The Lighter, Tighter Interview’n Button“
Ich hätte vielleicht einen extrem großen radialen Gradienten eingebaut, um die gesamte Linie leicht zu krümmen (weil ich denke, dass das besser aussieht), aber das Ziel war es, das Beispiel nachzuahmen.....
Es wäre schön (ein Wink mit dem Zaunpfahl), wenn Chris oder andere mehr solche Dinge zum Nachahmen posten könnten und dann einige interessante Antworten zeigen würden.
Ich meine, ich habe oft eine interessante Navigationsleiste oder Benutzeroberfläche gesehen und dann mein Bestes getan, um sie nachzuahmen, als intellektuelle Übung. Manchmal kann das eine Herausforderung sein, aber fast immer macht es Spaß.
Danke übrigens für deine freundliche Antwort.
Abgesehen von Tests sind meine Standard-CSS-Fragen:
können Sie CSS-Spezifität erklären?
bitte erklären Sie, wie CSS-Selektoren von Browser-Engines abgeglichen werden?
Auch
Nennen Sie einige der Nachrichten-Websites/Blogs/Ressourcen, die Sie regelmäßig besuchen, um über Webtechnologien auf dem Laufenden zu bleiben.
Oder
Nennen Sie einige der Personen, denen Sie online folgen (Twitter/Blog-Posts/RSS/...), die wichtig für die kontinuierliche Verbesserung Ihrer Entwicklungsfähigkeiten und/oder des Webs sind.
Bonusfrage
Was sind Ihre Lieblings-GitHub-Repos?
:)
Ich stimme dieser Frage überhaupt nicht zu.
Versteht mich nicht falsch, ich bin ein großer Fan von Github (wer nicht wirklich), aber ehrlich gesagt sehe ich nicht die Relevanz darin, wie viele „coole“ Repos eine Person kennt oder verfolgt oder so. Zur Hölle, jemand muss nur sagen: „Ja, jQuery, HTML5 Boilerplate und Emmet“. Na und, ist die Person jetzt plötzlich für den Job geeignet?
Wenn die Person Github benutzt oder es zumindest versucht hat, ist das ein Weg mit mehr Wert.
Jelmer – Sind diese Fragen nicht direkt aus Darcy Clarkes Front-End-Interviewtechniken?
Ich arbeite mit einigen großartigen Entwicklern zusammen, die weder Twitter noch Github verwenden, und das hindert sie nicht daran, hervorragend in ihrem Job zu sein.
Es ist wichtiger herauszufinden, ob die Person gut zu Ihrem Team/Unternehmen passt, als wem sie auf Github oder Twitter folgt.
Dieser Artikel hat mich dazu gebracht, einige Lücken in meinem eigenen Wissen zu erkennen! Huch. Danke für die Zusammenfassung.
Die Benutzerbasis meines Unternehmens neigt dazu, ältere Browser zu verwenden, daher müssten wir mehr auf Fallbacks eingehen.
Toller Artikel (und einige interessante Kommentare) Chris. Es ist eine einfache Tatsache, dass viele meiner Studenten im Rahmen ihres Bewerbungsverfahrens für Front-End-Rollen einen Test absolvieren müssen. Eine Firma in Manchester verlangte von Bewerbern, 'eine Hose in CSS zu zeichnen'. Tests scheinen gängige Praxis zu sein. Ich würde sagen, der Artikel bietet viel Stoff zum Nachdenken auf beiden Seiten des Tisches. Danke.
Hey Chris, ich bin dein großer Fan und dieser Artikel hat mir wirklich gefallen. Der Inhalt scheint etwas umfangreich, um in einem Interview angewendet zu werden, ABER er hat mir die Augen geöffnet für die Wichtigkeit, den Inhalt zu aktualisieren.
Außerdem würde ich sagen, dass er auf aktuelle Mitarbeiter angewendet werden könnte, die diese Techniken kennen sollten, was nicht immer der Fall ist, und so das Tracking für weitere Schulungen erleichtert wird.
Danke.
Haftungsausschluss: Ich habe nicht jeden Kommentar gelesen.
Alles, was ich über die, die ich gelesen habe, sagen kann, ist: Was ist das Problem?
Ich mache einen Test auf einem Whiteboard, einem Blatt Papier oder am Computer, warum? Weil ich weiß, was ich tue. Es ist überhaupt nicht beleidigend, wahrscheinlich nicht beleidigender, als eine Haltung gegenüber Testmethoden zu einem Interview mitzubringen, bei dem man möchte, dass diese Leute einen dafür bezahlen, dass man einen Job für sie erledigt.
Wenn du dich über einen Test beschweren möchtest, den du bekommst, dann mach ihn zuerst blitzschnell und sag den Leuten dann, wie man es besser machen könnte, konstruktiv.
Außerdem, wenn ich jemanden interviewen muss und er keinen Showcase mitbringt, entweder auf seinem Laptop oder eine URL zu seiner Website, die frühere Arbeiten zeigt, dann ist die Wahrscheinlichkeit zu 99,999 % groß, dass er den Job nicht bekommt, so schwer ist das nicht.
Du solltest meinen Kommentar hier lesen :)
Spoiler
110% stimme dir zu.
Ich würde es vorziehen, wenn jemand meine früheren Arbeiten ansieht, aber ich wäre bereit, mich interviewen zu lassen, um Fragen zu beantworten oder etwas zu programmieren.
Eine Sache, die ich jedoch nicht mag, ist, wenn Unternehmen dich bitten, Dinge zu tun, die du wahrscheinlich nicht im Job machen wirst. Wenn sie zum Beispiel keine Buttons haben, die so aussehen, auf keiner ihrer Websites/Arbeiten, warum dann? lol Teste mich basierend auf dem, was du von mir brauchst. Ein anderes Beispiel ist, mich nach Animationen zu fragen, wenn du sie nicht verwendest.
Mein Kollege hat den ganzen Artikel nicht gelesen und dachte, es sei ein Wettbewerb. Ich bin ziemlich nah dran, denke ich. CODEPEN. Ich denke, das ist eine großartige Möglichkeit, Leute zu überprüfen und zu sehen, wie sie denken. Ich habe gerade einige potenzielle Mitarbeiter durch Tests geschickt und fand es extrem aufschlussreich. Ich meine, wenn du keinen Button kopieren kannst, dann bist du vielleicht nicht so gut darin, CSS zu schreiben. Vielleicht wärst du besser in Content-Strategie oder anderen Aspekten des Jobs. Du musst CSS wirklich lieben, wenn du es den ganzen Tag schreiben willst. Ich würde denken, dass Leute, die CSS lieben, sich über die Herausforderung freuen würden.
[role=navigation] > ul a:not([href^=mailto])
Obwohl gutes Interviewmaterial und Test der CSS-Syntax ... eine gute Anschlussfrage wäre, ob sie jemals versuchen würden, so etwas zu verwenden.
d.h. https://css-tricks.de/efficiently-rendering-css/
Es hängt davon ab. Ja, die Verwendung von langem CSS wie diesem ist wahrscheinlich nicht effizient, aber es ist wahrscheinlich besser für die Wartung.
Man könnte jedem Link für Mail-to eine Klasse geben, was in diesem Fall vielleicht nicht viel ist, aber was, wenn man bestimmte Links eine andere Farbe haben möchte als alle normalen Farben? zum Beispiel externe Links vs. interne Links?
Du kannst jedem einzelnen Link eine Klasse hinzufügen, aber das erhöht das Markup. Ich habe das Gefühl, dass beide ihre Vor- und Nachteile haben, wie bei den meisten Dingen. Ein weiteres Beispiel ist, dass du jedes Mal, wenn du einen neuen Link hinzufügst, der zu diesem Szenario passt, daran denken musst, die Klasse hinzuzufügen, anstatt sie innerhalb des ul hinzuzufügen, wo sie automatisch aufgenommen wird.
Also, warum es für ein bestimmtes Unternehmen, das sich mehr um Leistung kümmert als ein anderes, nicht gut sein mag, sollte alles situationsabhängig sein.
Soweit es diese Dinge betrifft, chris, hast du nicht viel über das Fortgeschrittene gefragt oder wie sehr wir uns auf CSS-Animationen vorbereiten müssen und was ist mit CSS Transform. Und noch wichtiger, das neue Layoutsystem wie Flexbox, sollten wir uns als Interviewpartner Sorgen um diese Dinge machen?