Jak mogę ocenić wiedzę kandydata na temat HTML / CSS podczas rozmowy kwalifikacyjnej? [Zamknięte]

Próbuję ustalić kilka dobrych pytań na rozmowę kwalifikacyjną, aby ocenić zdolność ludzi do pracy w HTML / CSS, jednak temat ten jest bardzo szeroki i nie jestem pewien, jakie pytania mogę zadać, aby poprawnie ocenić czyjś HTML / Znajomość CSS.

Jakie pytania mogę zadać, aby ocenić umiejętności HTML / CSS kandydata podczas rozmowy kwalifikacyjnej?

Idealnie chciałbym zadać kilka pytań, a następnie dać im scenariusz z prawdziwego życia do walki.

HTML i CSS są trudne do przeprowadzenia wywiadu z kilku powodów:

1. Są zbyt podstawowe, w porównaniu na przykład z językiem programowania,

2. Zależy to bardzo od kontekstu pracy. Przykłady:

   • Jeśli utworzysz ogromnie szybkie i zoptymalizowane witryny w skali Google, osoby, z którymi przeprowadzasz rozmowę, nie mogą ignorować ikonek CSS.

   • Jeśli tworzysz prawidłowe strony XHTML W3C, powinieneś upewnić się, że kandydaci znają różnicę między XHTML 1.0 i XHTML 1.1, lub jakie są obowiązkowe atrybuty <img/>itp.

   • Jeśli tworzysz okropne witryny pełne hacków, powinieneś zapytać osoby, z którymi przeprowadzasz wywiad, o to, jak zrobią takie hakowanie, jak obsługują różne CSS dla różnych przeglądarek itp.

   • itp.

3. Jeśli jest to czysto HTML i CSS, osoba będzie musiała pracować z projektantami z jednej strony, a programistami z drugiej. Muszą znać HTML i CSS, ale o wiele bardziej cenna jest ich umiejętność interakcji z tymi ludźmi oraz zrozumienia zarówno potrzeb projektantów, wymagań programistów, jak i ograniczeń HTML i CSS.

   Na przykład muszą wiedzieć, jak ustrukturyzować swój kod HTML w taki sposób, aby programista JavaScript mógł później łatwo dodać interaktywność.

Możesz zacząć od kilku podstawowych pytań:

Jaka jest twoja ulubiona przeglądarka?

Jeśli dana osoba odpowie „Internet Explorer”, natychmiast przerwij wywiad: nie potrzebujesz kogoś takiego.

Nie, żartuję. Odpowiedź jest nieistotna. Zamiast tego możesz zadać następujące pytania:

Opowiedz mi o narzędziach do debugowania używanych w ulubionej przeglądarce.

Używając Chrome, codziennie pracuję z Narzędziami programisty. Te narzędzia pozwalają mi:

• Wyświetl żądania złożone ze strony,

• Przeanalizuj czas potrzebny do załadowania strony i powiązanych zasobów, szczególnie czas wyszukiwania DNS, czasy oczekiwania i odbierania,

• Sprawdź nagłówki wysłanych elementów, a także wskaźnik pamięci podręcznej,

• Wyświetl DOM i zbadaj, w jaki sposób stosowane są selektory CSS,

Używam również YSlow, który służy mi jako lista kontrolna do optymalizacji strony internetowej, która wymaga wysokiej skalowalności. YSlow jest również dobrym narzędziem, jeśli chodzi o ustalenie, czy serwer jest poprawnie skonfigurowany (wysyłanie poprawnych nagłówków itp.).

W Firefoksie używam Firebug, narzędzia bardzo podobnego do Narzędzi dla programistów z Chrome. Narzędzia programistyczne są również dostępne w nowych wersjach programu Internet Explorer, a także pozwalają mi przejść do widoków zgodności IE7 na IE10. Ta ostatnia funkcja jest bardzo pomocna, ponieważ bez niej byłbym zmuszony zainstalować kilka maszyn wirtualnych tylko w celu testowania starszych wersji lub częściej korzystać z płatnych usług, takich jak Litmus .

Proszę wyjaśnij mi, o co chodzi w <dl/>tagu? Jakie było zamierzone zastosowanie tego tagu? Jak jest stosowany w praktyce? Co sądzisz o tym rozszerzonym użyciu?

Tutaj chcesz, aby osoba była w stanie wyjaśnić, że <dl/>dotyczy słowników, kojarzy jeden klucz <dt/>z jedną lub kilkoma wartościami <dd/>. Chociaż podstawowe zastosowanie tego znacznika było wyłącznie związane z semantyką, w praktyce zostało ono szeroko wykorzystane do zastąpienia tabel, czego dobrym przykładem jest PHPBB3. Jest to dobra rzecz, gdy tabele spowalniają renderowanie strony, ale należy jej używać ostrożnie: nie tylko tabele są nadal odpowiednie w wielu przypadkach, aby lepiej opisywać dane, ale mogą też istnieć inne środki, takie jak zwykłe listy, aby opisać zawartość bez użycia <dl/>.

Jaka jest różnica między układami stałym a płynnym? Jakie są zalety i wady każdego z nich?

Stały układ ma wstępnie zdefiniowane szerokości elementów. Elementy płynnego układu zależą od szerokości strony.

Stały układ ułatwia projektowanie strony, zwłaszcza gdy jest dużo grafiki o pełnej szerokości. Nawet bez grafiki jest to jeszcze łatwiejsze, ponieważ zależy Ci tylko na precyzyjnym etui. Na przykład Programmers.SE jest witryną o stałym układzie, kolumna wyświetlająca pytania i odpowiedzi ma zawsze ten sam rozmiar. Jeśli płynny układ zostałby zastosowany w tej kolumnie, spowodowałoby to problem: na małych ekranach tekst byłby nieczytelny, ponieważ linie byłyby zbyt krótkie, podczas gdy na dużych ekranach linie byłyby bardzo duże, więc tekst też byłby nieczytelny.

Problem ze stałym układem polega na tym, że działa on dobrze dla kilku najczęściej używanych rozdzielczości, ale zawodzi mniej więcej dla wszystkich innych. Staje się to szczególnie ważne od czasu przyjęcia bardzo dużych, szerokich monitorów oraz rosnącego wykorzystania Internetu na małych urządzeniach mobilnych.

Pomaga w tym płynny układ, ale projekt takiej witryny jest trudniejszy. W niektórych scenariuszach dotyczących źle zarządzanych projektów może to prowadzić do włamań HTML i CSS, dużych stron, niskiej konserwacji i, podczas opracowywania, do wyższych kosztów i przekroczenia terminów.

Jak na stronie o płynnym układzie można uniknąć sytuacji, w której kolumna tekstu staje się zbyt duża, aby pozostać czytelną?

Możesz ograniczyć szerokość strefy tekstu, używając max-widthwłaściwości.

Co sądzisz o tym fragmencie kodu <p color="Red" align="Center">Text here</p>:?

Fragment kodu ma tę wadę, że łączy logikę prezentacji w HTML. Logikę prezentacji należy umieścić w CSS z kilku powodów:

• Pomaga oddzielić obawy i czysty kod, co oznacza tańszą konserwację w późniejszym czasie,
• Dzięki temu style mogą być wielokrotnie używane na różnych stronach, co (poza kwestiami związanymi z utrzymaniem) pomaga zapewnić stosowanie tych samych stylów w całej witrynie,
• Pomaga zmniejszyć przepustowość, ponieważ pliki CSS będą buforowane.

Po kilku takich podstawowych pytaniach możesz zadać bardziej skomplikowane pytania:

Jak uniknąć powielania kolorów lub czcionek w CSS, gdy te kolory lub czcionki są stosowane do wielu elementów, których nie można ustawić za pomocą jednego selektora? Czy są wady?

Robisz to za pomocą preprocesorów CSS, takich jak Sass lub LESS. Pozwalają definiować kolory, czcionki i inne części stylu wewnątrz zmiennych, które można później wykorzystać w swoich stylach.

Wadami preprocesorów CSS są:

• Czasami wymagają zmiany przepływu pracy programistycznej i wdrożeniowej, aby mieć aktualny kod CSS w przeglądarce,

• Są znani tylko przez kilku programistów, co utrudnia nowej osobie dołączenie do projektu lub utrzymanie go później,

• Nie ma zarówno dobrych, jak i szybkich IDE dla Sass i LESS, a integracja z najpopularniejszymi IDE jest raczej rozczarowująca.

Podaj przykład hrefwartości obrazu znajdującego się w CDN, biorąc pod uwagę, że obraz ten jest wyświetlany na stronie internetowej, do której można uzyskać dostęp zarówno przez HTTP, jak i HTTPS.

Ponieważ HTTPS wymaga, aby każdy wywoływany zasób również znajdował się w HTTPS (w przeciwnym razie użytkownik wyświetli ostrzeżenie dotyczące bezpieczeństwa), nie można określić łącza jako http://cdn.example.com/image.png. Aby poprawnie połączyć się z obrazem, //cdn.example.com/image.pngnależy użyć; przeglądarka zostanie następnie dodana http:lub w https:zależności od kontekstu.

Biorąc pod uwagę, że nie można zoptymalizować rozmiaru stron i liczby żądań w witrynie, nie można zmienić treści ani dodać AJAX, jak sprawić wrażenie, że użytkownik jest szybszy? Z czym wiąże się to z perspektywy HTML?

Jeśli używany jest protokół HTTP 1.1, strona może być podzielona na części . Oznacza to, że pierwsze części pojawią się szybciej, sprawiając wrażenie, że strona internetowa jest szybsza niż w rzeczywistości. Kodowanie przesyłania fragmentarycznego jest niemożliwe w HTTP 1.0, co oznacza, że ​​w tym przypadku nie ma nic do zrobienia.

Aby móc wyświetlać fragmenty treści, z perspektywy HTML należy zmienić kolejność elementów, umieszczając te najbardziej krytyczne na górze pliku (co nie znaczy, że musiałyby pojawić się na górze strony). Na przykład w witrynie e-commerce, gdy użytkownik chce zobaczyć szczegóły produktu, pierwsza porcja może zawierać <head/>szczegóły produktu i. Następna porcja może zawierać podstawowe elementy, takie jak logo witryny, menu główne, prawa autorskie itp. Wreszcie ostatnia porcja może zawierać sekcję „Ludzie, którzy to kupili, również kupili”, komentarze i oceny produktu, „Udostępnij na Facebooku” itp.

Na koniec możesz poprosić kandydata o opracowanie scenariusza z prawdziwego świata. Może to być cokolwiek, na przykład najłatwiejszy z poniższych, w złożonych scenariuszach, w których dana osoba ma do czynienia ze sprite'ami CSS lub innymi zaawansowanymi technikami optymalizacji, z niespójnościami przeglądarki itp.

Czy możesz utworzyć stronę XHTML z dwiema strefami: lewą z listą i prawą z tekstem. Dwie strefy są oddzielone pionową linią, która rozciąga się od samej góry do samego dołu strony. Lista i tekst różnią się rozmiarem, nie można przewidzieć, która z nich będzie miała największą wysokość. Nie możesz użyć <table/>s.

W rzeczywistości jest to dość proste, ale pokazuje, czy osoba ma odruch, aby myśleć o wysokościach. Niedoświadczony kandydat utworzy float:leftstrefę i border-left:solid 1px #ccc;strefę, ale zapomnij o dodaniu granicy do lewej strefy i przedłużeniu jej, aby dwie granice znalazły się w tym samym miejscu.

Oto kilka pytań, które chciałbym zadać na temat CSS:

1. Model pudełkowy CSS. Marginesy, wypełnienie itp. Model IE vs. model W3C. Jak można przełączać się między nimi? Jakie są ich zalety i wady?
2. Pozycjonowanie CSS. Co to znaczy, że element jest „w przepływie” i „poza przepływem”
3. inline-blocki inne wyświetlane wartości. Różnica między display: none;i visibility: hidden; (jest to dobre i łatwe pytanie dla osób początkujących w CSS)
4. inline-blockvs floatdla układów.
5. Selektory
6. Reset CSS. Dlaczego są potrzebne i co osiągają?
7. Zapytania o media i responsywne projektowanie.
8. Jak organizować style i jak utrzymywać małą liczbę selektorów. Wstępne procesory LESS, Sass i inne CSS. Obiektowy CSS.

I kilka pytań na temat HTML:

1. Tryby Doctype i przeglądarki.
2. Dlaczego niektóre tagi są bardziej preferowane niż inne ( na przykład emvs i)?
3. Jakie są podstawowe zasady, którymi należy się kierować, aby HTML i CSS były łatwe w zarządzaniu?

Zasadniczo kładę większy nacisk na CSS, ponieważ jest to obszar, który wielu ludziom trudno zrozumieć i efektywnie wykorzystać. Spotykam wielu kandydatów, którzy umieszczają „CSS” w swoich życiorysach, ale nie są w stanie odpowiedzieć na żadne pytania na ten temat. Większość ludzi mówi wprost: „Nie, nie, wiem , że CSS jest wystarczająco dobry, aby sobie z tym poradzić, ale nie wystarczająco dobry, aby o tym mówić”.

Czasami dobrze jest po prostu dać proste zadanie i wykonać wywiad. Powiedz, zaprojektuj prostą stronę z układem i stylem bloków, która obsługuje wiele rozmiarów ekranu i odpowiednio się dostosowuje. Powinno to zająć około godziny lub dwóch, a kandydat powinien wyjaśnić, co robi i dlaczego.

Powodzenia w przeprowadzaniu wywiadów!

Jeśli przeprowadzasz wywiad na żywo, najlepszym sposobem jest poproszenie programisty o napisanie kodu HTML / CSS.

Przykład (bardzo powszechny w prawdziwym rozwoju). Poproś programistę o napisanie kodu HTML / CSS strony za pomocą:

1. Szerokość płynu.
2. Nagłówek o wysokości 100px;
3. Przycisk logowania w prawym rogu nagłówka
4. Panele po lewej i po prawej stronie o szerokości 100 pikseli i wysokości 200 pikseli;
5. Środkowy panel dla tekstu artykułu.
6. Stopka, która zawsze będzie na dole. Nawet jeśli artykuł ma 1 wiersz.

UPD: Oczywiście, poproś programistę o napisanie kodu przy użyciu tylko div (bez tabel).

Powinno to wyglądać następująco:

Ale przed rozmową na żywo sugeruję przetestowanie kandydatów online. Ponieważ łatwiej jest przetestować kandydatów online i zaprosić na rozmowę tylko wykwalifikowanych programistów, niż spędzać czas na każdym kandydacie.

Siedziałem w kilku wywiadach z projektantami stron internetowych, a my zrobiliśmy wydrukowanie bardzo prostego wyglądu bloga na papierze, a następnie poprosiłem kandydata o zapisanie kodu HTML i / lub CSS na stronie przez około 10 minut, aby dać podstawowa koncepcja tego, jak by to napisali. Daje nam to informację, czy ktoś RZECZOWO znał CSS, czy nie. Po prostu szukaliśmy podstawowych rzeczy, takich jak zmiennoprzecinkowe kontra tabele, czy cokolwiek innego, i wyjaśniliśmy, że to wcale nie musi być idealne.

Mnóstwo ludzi twierdziło, że ma wieloletnie doświadczenie z CSS, ale kiedy były layout: floating; direction: up;zmuszone to napisać, pisały dzikimi domysłami, takimi jak „ ” lub innymi podobnymi „jibberish”. Więcej niż 1 „CSS Ninja” nawet nie uzyskał właściwej składni, a la „ div(margin=5)”. To było dla mnie bardzo otwarte, aby zobaczyć, ile osób po prostu kłamie w wywiadach. I pozornie łatwiej jest kłamać o CSS niż o prostym kodowaniu. Nie możesz nic wiedzieć o CSS, ale zrób trochę google i możesz szybko rzucić odpowiednią terminologię. Tak naprawdę nie można tego skutecznie zrobić na przykład z koncepcjami wyższego poziomu, takimi jak OOP.

Jest test online, w którym musisz wymienić tagi HTML lub właściwości CSS w ciągu 5 minut.

Chociaż nie jest to test w pełni odporny, może to dać ci znać, jeśli kandydat zna język HTML / CSS.

Jeśli chodzi o pytanie, możesz wykonać test z przykładowym kodem i poprosić go o wykrycie błędów składniowych / strukturalnych.

Jeśli chodzi o rzeczywisty scenariusz, wszystko zależy od tego, nad czym kandydat będzie pracował w Twojej firmie. Jeśli chcesz tylko programistę front-end, możesz poprosić o projekt strony internetowej na dowolny temat.

Jednym z rodzajów testów mających zastosowanie do języków programowania i języków znaczników jest przegląd kodu. Utwórz małą próbkę (20 lub 30 wierszy) z mieszanką błędów składniowych, błędów logicznych, przypadków narożnych, prawdopodobnie złego stylu ... Następnie poproś kandydata o zidentyfikowanie wszystkiego, co uzna je za podejrzane.

Ważne jest prawidłowe stosowanie tego rodzaju testu: jak w przypadku każdego pytania podczas rozmowy kwalifikacyjnej ważne jest, jak kandydat podchodzi do zadania, a nie tylko wyniki.

Nie zamierzam publikować mojego testu, ale kilka wskazówek, jak zastosować to do CSS:

• Błędy składniowe: brakuje niektórych średników. Jako bonus możesz pominąć niektóre opcjonalne (sporny styl) i sprawdzić, czy kandydat komentuje.
• Błędy logiczne: wstaw właściwość z prefiksem po właściwości nieprefiksowanej. To również sprawdza znajomość CSS3 i może sprowokować dyskusję na temat sposobu opracowania standardu.
• Narożniki: np. Margines z 3 wartościami - zdziwiłbyś się, ile osób nie jest świadomych, że jest to możliwe. Jeśli kandydat nie komentuje, możesz zapytać, jak to jest interpretowane, aby sprawdzić, czy zignorował to raczej z wiedzy niż z ignorancji.
• Kolejny przypadek narożny: wykonaj swoje ulubione dwa lub trzy błędy IE7. To odróżni tych, którzy mają blizny po bitwie (którzy powinni dostrzec przynajmniej jedną z nich) od niedoświadczonych lub tylko do zestawu Webkit.
• Styl: nadmierna swoistość brakuje emi px, itd. Ktoś, kto studiował składnię za wywiad prawdopodobnie nie złapie wielu z nich.

Z własnego doświadczenia, współpracując z innymi programistami, myślę, że pytania na temat HTML i CSS nie oddzieli ludzi, którzy wiedzą, o czym mówią, od tych, którzy wiedzą, co faktycznie robią.

Polecam próbny test / prototyp oparty na realistycznym doświadczeniu potrzeb Twojej firmy.