HTML i CSS są trudne do przeprowadzenia wywiadu z kilku powodów:
Są zbyt podstawowe, w porównaniu na przykład z językiem programowania,
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.
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.
