Fragen bei einem Vorstellungsgespräch eines Frontend Entwicklers und meine Antworten

Rathes Sachchithananthan — 25.Jan.2015
in Web

Ich hab hier echt was Cooles gefunden. Eine Seite mit Fragen, die man einem Frontend Entwickler bei einem Vorstellungsgespräch stellen könnte. Ich bin ja im Prinzip auch ein Frontend Dev – ich machte halt noch mehr – und da dachte ich mir schaue ich mir die Fragen doch an und schreibe mal dazu was ich antworten würde.

Es sind zu viele Fragen für einen Artikel deswegen habe ich von der ersten ein paar genommen. Auf dieser Github Seite könnt ihr euch alle Fragen mal ansehen, sind alle voll interessant!

Hier sind meine Antworten. Antworten sind so ausführlich wie ich auch reden würde. Bei einigen Fragen würde ich halt nicht mehr antworten, weil es nicht mehr zu sagen gibt.

1. Welche Versionsverwaltung hast du bisher verwendet (Git, SVN, etc.)?

Ich benutze Git, hauptsächlich in Zusammenhang mit Github.

2. Wie sieht deine bevorzugte Entwicklungsumgebung aus? (Betriebssystem, Editor, Browser, Werkzeuge, etc.)

Ich arbeite auf einem PC immer mit der aktuellsten von Version von Windows. Als IDE benutze ich als PHP-Entwickler phpstorm (derzeit 7.1 und 8). Bei kleineren Projekten verwende ich den Sublime Text Editor in der 3er Version. Ansonsten werden von immer wieder projektspezifische kleinere Tools eingesetzt. Dabei versuche ich immer Anwendungen und Tools zu finden, die ich nicht installieren muss, sondern direkt als Webanwendung benutzen kann.

3. Beschreibe bitte deinen Arbeitsablauf, wenn du eine Website entwickelst.

Eine Webseite fängt mit der Konzeption an. Ich bringe in Erfahrung, was der Sinn der Webseite sein soll, ob sie überhaupt notwendig ist und was das Thema ist. Dann befasse ich mich mit dem Thema der Webseite. In dieser Zeit skizziere ich die Ideen, die mir während der Einarbeitungsphase kommen, oldschoolmäßig auf Papier. Falls keine Ideen aus mit heraussprudeln schiebe ich hier eine Inspirationsphase ein, in der ich nach ähnlichen Webseiten suche und analysiere.

Zu diesem Zeitpunkt hab ich also eine Idee wie die Webseite aussehen soll und welche Inhalte reinkommen sollten/könnten. Nun verifizier ich meine Informationen, sodass ich einen groben Überblick über Menüstruktur und Inhalte habe. Nun werden die Skizzen angepasst und in Adobe Photoshop (ich benutze noch die CS6er Version) umgesetzt. Ich fange hier schon an drei verschiedene Fenstergrößen in Betracht zu ziehen und erstelle so von jeder Seite drei Versionen. Beispielsweise „index-mobile.psd“, „index-tablet.psd“ und „index-desktop.psd“.

Ich erstelle hier aber nicht jede einzelne Unterseite samt Inhalt, sondern nur die wichtigsten Seiten, die sich vom Aufbau her unterscheiden. Danach fange ich an dies in HTML und CSS umzusetzen. Je nach Komplexität des Projektes benutze ich SCSS als Präprozessor für CSS, aber nicht immer. Dabei fange ich immer mit der mobilen Version an und arbeite mich dann weiter vor (mobile-first Ansatz). Meist sehen einige Elemente am Ende nicht so aus wie in der psd-Dateien, da ich während der Umsetzungsphase immer wieder die Seite optimiere.

Falls dann notwendig suche ich dann ein passendes CMS raus und setze das dann in diesem um. (Ich habe keinen Favoriten an CMS, verwende nur kein TYPO3, das lässt sich mit meiner Idee des kostenfreien Supports nicht realiseren)

4. Kannst du den Unterschied zwischen Progressive Enhancement und Graceful Degradation beschreiben?

Grob gesagt ist Graceful Degradation einfach „Ich baue für die modernsten Browser und entwickle danach einige Bugfixes für einige weitere gängigen Browser – der Rest hat Pech gehabt, sollen die doch updaten“. Progressive Enhancement ist genau anders rum: „Ich baue ’ne Webseite, die bei jedem funktioniert – und dann baue ich nach und nach Sachen ein, die nur in den modernen Browsern tun“

5. Beschreibe bitte, was »Semantisches HTML« bedeutet.

Man benutzt die Tags in der Form, wie diese in der eigentlichen Form bedeuten. Beispiel <h1>Überschrift</h1> Tag benutzen statt <span class=“font-size:2em;“>Überschrift</span>

6. In welchem Browser entwickelst du vornehmlich und welche Entwicklerwerkzeuge verwendest du dabei?

Ich entwickle in der Regel im neusten Internet Explorer (derzeit Version 11). Erstens einfach, weil ich ein verdammter Microsoft Fan-Boy bin, aber auch weil ich damit eigentlich sicherstelle, dass meine Webseite auch automatisch in allen anderen aktuellen Browsern funktioniert. Manchmal muss ich noch für Safari und Opera Bugs fixen, aber nichts aufwendiges. Andersrum wären die Fixes für den IE viel aufwändiger.

7. Wie würdest du die Ressourcen einer Website im Hinblick auf Performance optimieren?

So wenig Requests wie möglich erzeugen (CSS-Sprites benutzen, Dateien zusammenfassen), aber auch Kompression, Caching und Minifizierung benutzen. Eigentlich alles soweit wie möglich umsetzen, was das Pagespeed-Tool von Google empfiehlt.

8. Warum ist es sinnvoll, Ressourcen über mehr als eine Domain abzufragen?

Browser haben in der Regel einen Limit an aktiven Verbindungen pro Domain, diese Limitierung kann man mit eine statischen Domain (Subdomain) umgehen.

9. Benenne drei Umstände, die das Laden einer Seite verlangsamen können (hinsichtlich der Wahrnehmung oder der tatsächlichen Ladezeit).

Zu viele HTTP Anfragen, zu große Bilddateien, nicht optimiertes JavaScript … Wie zum Beispiel das Abarbeiten von zu vielen Daten, die man vorher hätte filtern können.

10. Wie verhältst du dich, wenn du in ein neues Projekt kommst, in dem Tabs verwendet werden und du aber Leerzeichen verwendest?

Jedes Projekt einen eigenen Styleguide, der vorgibt wie man beim Entwickeln zu arbeiten hat. Als Entwickler sollte man flexibel genug sein sich auf diese einzustellen. Das ist für eine für Teamarbeit unabdingbar.

11. Wenn du eine Technologie in diesem Jahr meistern könntest, welche wäre das?

Die Frage habe ich, so glaube ich nicht verstanden, aber, wenn gemeint ist, welche Technologie ich dieses Jahr gerne perfekt beherrschen würde, dann lautet meine Antwort: AngularJS

Ich beherrsche zwar diese Technologie, aber noch nicht ausgereift. Ist zwar keine richtige Technologie, aber trotzdem lernenswert.

Fragen, die ich nicht auf Anhieb beantworten konnte. Habe aber nach geschaut und dazu gelernt.

Welche Werkzeuge nutzt du zum Testen der Performance deines Codes?

Codequalität habe ich ehrlich gesagt bisher noch nicht aktiv getestet.

Was ist FOUC? Wie vermeidest du FOUC?

Gerade nachgelesen was das ist: „flash of unstyled content“. Tritt auch auf dieser Seite hier auf, da ich sämtliche CSS File nachträglich lade. Dadurch sieht man ganz am Anfang eine ungestylte Version des Blogs. Kann man, denke ich, vermeiden, indem man wie es bei Google Pagespeed vorgeschlagen wird, seinen CSS Code analysiert und das CCS des „Above the fold“-Bereichs in den Head mit <style></style> reinschreibt. Werde ich die Tage auch bei diesem Blog machen, aber dafür muss das Theme einfach vollständiger werden.

Was haltet ihr von meinen Antworten? Würdet ihr da was anderes antworten oder ist sogar irgendwas falsch an einer meiner Bemerkungen? Schreibt mir einfach in der Kommentaren!

Rathes Sachchithananthan

Rathes Sachchithananthan

Hi, ich bin Rathes. Gründer dieses Blogs. Darüber hinaus habe ich Aheenam gegründet, eine Agentur für digitale Lösungen. Dort konzipiere und entwickle ich die digitale Weiterentwicklung meiner Kunden. Ich brenne für das Thema „Tamilen und Tamil Eelam“ und bin ein Microsoft-Fanboy. Du findest mich auch auf diversen sozialen Netzwerken

Web und die Welt — Gott kann auch mal drin vorkommen

Ein Blog über das Web und die Welt. Wir schreiben über viele interessante Themen wie z.B. das Web, Tamil Eelam oder über Fotografie. Vielleicht ist auch was für dich dabei?