Testowanie umiejętności HTML / CSS/Javascript podczas zatrudniania [zamknięty]

Zatrudniając front-end developera, jakie umiejętności i praktyki należy sprawdzić? Jaki jest dobry wskaźnik do oceny ich umiejętności w HTML, CSS i Javascript?

Oczywiście, semantyczny HTML bez tabel i czysty układ CSS są prawdopodobnie kluczowymi umiejętnościami. Ale co z konkretnymi technikami? Czy powinien on / ona być w stanie bez wysiłku makiety wielokolumnowy układ? CSS sprites? Kolumny o jednakowej wysokości (czy fałszywej)? Czy wybór znacznika HTML ma znaczenie (tj. zbyt duże opieranie się na <div>)? Powinien potrafią wyjaśnić (słownie) jak działają pływaki?

A co z umiejętnościami javascript? Jak ważne jest doświadczenie framework (jQuery, Prototype, etc). dzisiaj?

Oczywiście szczegóły stanowiska i stron, na których będą pracować, są najlepszym wskaźnikiem, jakie umiejętności są potrzebne. Ale zastanawiam się, jakie konkretne umiejętności ludzie mogą uznać za łamaczy transakcji (lub twórców) przy tworzeniu testów dla kandydatów.

Author: John Saunders, 2008-10-13
Source

13 answers

Kiedy przeprowadzam wywiady z ludźmi na stanowisko programisty po stronie klienta staram się dowiedzieć: 

1) Understanding DOM (what is that, how is it related to HTML etc)
2) Understanding XML/namespaces
3) Understanding JavaScript (object-oriented? what otherwise)
4) Knowing approaches to componentization (XBL, HTC) - plus
5) Understanding OO principles
6) JavaScript closures
7) Memory leaks in browsers

Jedyny prosty przypadek testowy, który daję od razu: 

<script type="text/javascript">
var a = 1;
</script>
Sugeruję, aby rozmówca wyjaśnił to w kategoriach technicznych.

I sprawdzam też ogólną świadomość aktualnego stanu technologii internetowych, między innymi proponuję zaprojektować przeglądarkę internetową, w której proponuje się wybrać technologie, które wprowadzi do swojego nowiutkiego stworzenia, zasugerować takie, które może zabraknąć na obecnej platformie po stronie klienta.

 19
Author: Sergey Ilinsky,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-10-13 19:43:09

Mogę zaproponować Ci test online, który obejmuje HTML, CSS i JavaScript razem.

Http://tests4geeks.com/test/html-css-javascript

Zawiera 60 pytań (20 na każdy temat). Raport otrzymasz e-mailem, gdy kandydat skończy test.

 7
Author: Vadim,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-10 07:29:59

Sergey i swilliams obaj Dali świetne odpowiedzi, w szczególności, wzmianka swilliams o prośbie o portfolio jest kluczowa. Z portfolio można również przetestować dla przedmiotów takich jak,

  • czy html i css sprawdzają poprawność?
  • czy prezentacja jest spójna w różnych przeglądarkach?
  • czy kandydat ma błędy JavaScript? jeśli tak, czy dana osoba pozwala im przedostać się do warstwy prezentacji, czy przynajmniej łapie je blokiem try/catch?
  • w kategoriach JS, jak zaawansowana jest osoba? Czy mogą zrobić walidację formularza? Czy mogą zrobić regex? Czy polegają na MM_Preloader? (Fuj!)

Portfolio może również dać poczucie, jak pasjonuje kogoś tworzenie stron internetowych. Co więcej, jeśli zrobili stronę dla kogoś innego, to sama okazja do rozmowy o wielu rzeczach z kandydatem,

  • Jak rozwijali interfejs użytkownika?
  • Jaki rodzaj planowania wszedł na stronę?
  • Jak U ¿ytkownik oczekiwania odkryte/spełnione?
  • Jakie wyzwania podczas budowy weszły w grę?

Poza tymi przedmiotami, innym podejściem, które warto rozważyć, jest test deweloperski, który można wysłać potencjalnemu najemcy. Nic zbyt trudnego, które zajęłoby więcej niż dzień, ale wystarczy teaser mózgu, aby zobaczyć, czy mogą pracować przez problem CSS lub JS.

 5
Author: Anjisan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-10-13 18:12:18

Poproś o portfolio, a następnie przejrzyj je ze swoim zespołem. To troszczy się o pozerów i ludzi, którzy " nie radzą sobie dobrze z wywiadami."

Poza tym, przedstawiłbym im coś stosunkowo prostego do sfałszowania i laptopa i powiedział:'

Może zapytaj ich, co lubią najbardziej w projektowaniu stron internetowych, a czego nienawidzą najbardziej. Zapytaj ich o ich opinie na temat tego, co jest na horyzoncie (HTML 5, IE 8, Chrome itp.), aby zobaczyć, czy są na bieżąco z tym, co nadchodzi Wynocha.

Zapytaj ich, czy mają ulubiony framework JavaScript i dlaczego. Może niech coś zakodują w JS a la słynny problem z Buzzem.

 4
Author: swilliams,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-10-13 17:30:56

W mojej firmie nie pracujemy z testami, a portfolio jest ważniejsze, zwłaszcza dlatego, że mamy tendencję do patrzenia na osobistą motywację i pasję kandydata do tworzenia front-end.

Ale gdybym miał dać kandydatowi test przed zatrudnieniem, zrobiłbym to w ten sposób:

Przekaż Wydruk strony internetowej z Photoshopem przedstawiającej wyraźne drzewo semantyczne pod spodem. Zapytaj osobę, w jaki sposób doszłoby do wyniku w html. Zapytaj go lub ją. myśleć na głos. To, co przechodzi przez głowę, widząc stronę, wiedząc, że trzeba ją rozwinąć.

Potem sprowadza się do podejścia, jakie przyjmuje kandydat.

Wybór najlepszego dostępnego znacznika dla każdej konkretnej sekcji html jest jednym (ważnym) aspektem, ale można go opanować z doświadczonymi ludźmi, aby poprowadzić nowego pracownika. Możliwość prawidłowego rozbicia projektu na jego elementy semantyczne, identyfikowanie sekcji i oddzielanie treści pierwotnej i wtórnej od nawigacja nie jest matematyką ani nauką ścisłą i dlatego jest trudna do sprawdzenia. Ale rozmowa o podejściu do łamania strony może oddzielić doświadczonych ludzi od początkujących.

Ale jak powiedziałem w pierwszej linijce, Zwykle pytamy o to, jakiego rodzaju pracę związaną z Internetem osoba wykonała w swoim wolnym czasie, takim jak blog, gra lub demo. Jeśli coś zrobił, osoba zwykle była naprawdę dobra w rozwoju front-end lub była chętna do nauki i adaptacji.

 4
Author: Martin Kool,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-10-14 06:10:28

Zwykliśmy albo ustalać mały brief dla nich, aby pracowali w określonym czasie, lub w niektórych przypadkach zlecać im pracę i sprawdzać, jak poszło.

Nigdy nie bałem się, że ktoś usiądzie przy laptopie w pokoju przesłuchań i wykombinuje rozwiązanie, ponieważ takie środowisko nie jest (można mieć nadzieję) bardzo podobne do normalnych warunków pracy.

Dokładny charakter briefu zależy w dużej mierze od zestawu umiejętności, którego szukasz. W niektórych sklepach twórcy front-endu będą musieli zająć się wypełnianiem luk w projektowaniu i / lub wypełnianiem obowiązków" policji marki "podczas wdrażania projektu"vibe".
W takich przypadkach pozostawienie niektórych dziur w briefie dotyczących niektórych drobniejszych punktów typografii i innych drobnych szczegółów może dać wskazówki dotyczące ich umiejętności w tych aspektach.
Pozwól im wybrać framework javascript, czy wybrali ten najlepszy do pracy, czy ten, który znali. (subiektywnie pytanie, tak. Ale ściąganie dojo ze względu na datepicker i niektóre animacje menu może być przesadą)

Szukałbym kogoś, kto potrafi zaimplementować układy oparte na css, ale w rzeczywistości może pracować na układach opartych na tabelach, jeśli zajdzie taka potrzeba przy starszych projektach. Niektóre z najdrobniejszych detali z hacky table layouts nie zawsze były łatwe.

Najważniejszą rzeczą w tego typu zadaniach jest dbałość o szczegóły, czy dodali zestaw reguł stylu do drukowania, używane odpowiednie rozmiary i formaty obrazu, produkowane czysty i poprawny kod, czy poszli po złoto, ponieważ naprawdę chcą tę pracę, i są gotowi rozciągnąć się trochę, aby ją dostać.

Ponieważ dajesz im trochę więcej czasu, można oczekiwać, że próbują zaimponować, a nie obciążony stresem scenariusz stawiania ich przy dziwnym biurku i mówienia im, aby poszli na to. Tak więc, będąc realistą i nie oczekując obsesyjnie doskonałej pracy każdego dnia na każdym zadaniu, w tym sytuacja Szukam złota, a przynajmniej dowodu, że złoto było celem.

Dorzuć zakrzywioną kulę czegoś, czego wcześniej nie zrobili... zobaczymy, jak szybko to odbiorą. Doświadczenie jest dobre, ale umiejętność szybkiego uczenia się jest prawdopodobnie ważniejsza w obszarze, który zmienia się tak szybko.

 2
Author: seanb,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-10-14 02:55:02

Zrozumienie, jak różne są przeglądarki, jest również kluczowe. Zwłaszcza IE. Jeśli mają tylko kiedykolwiek kodowane dla IE strzeż się! Vica Versa też, jeśli nigdy nie testowali swoich rzeczy w IE6 / 7 nie mają pojęcia jak strasznie to zawodzi.

Jeśli potrafią wymienić 3 rzeczy, które się nie sprawdzą, lub potrzebują obejścia w IE, to prawdopodobnie są na dobrej drodze. Jeśli nie mogą, nie mają jeszcze wystarczająco dużo doświadczenia w przeglądarce.

 1
Author: scunliffe,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-10-13 22:03:58

Pytam ludzi, jakich narzędzi używają, jak kodują, tzn. czy używają DreamWeaver, BBEdit, emacs czy cokolwiek innego. Zakładając, że nie udzielają tylko jednej odpowiedzi, Zwykle masz jakiś pomysł, jakie są ich priorytety, jak kodują itp.

W takim razie pytam, jak sprawdzają swój kod, co zawsze jest interesujące.

Pomijając ich testowanie, każąc im usiąść i rozwalić stronę, prosiłbym ich o konkretne przykłady pracy, jaką wykonali, jak rozwiązali problem.

Na przykład, mówisz "powiedz nam o pracy, w której byłeś na ściśle określonym terminie" lub mówisz "powiedz nam o naprawdę frustrującym problemie i jak go pokonałeś" lub " w pracy, którą wykonałeś ostatnio, z czego jesteś najbardziej dumny?"

W ten sposób można uzyskać wiele wgląd w rodzaj rzeczy, które zrobili, ich umiejętności rozwiązywania problemów i doświadczenia, sposób radzenia sobie ze stresem i frustracją, i oczywiście, czy ich obejścia/środki cięcia narożników są mądre lub głupie.

 1
Author: AmbroseChapel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-10-14 02:18:12

Dzięki za wszystkie odpowiedzi na razie. To zdecydowanie dobra rada. Nie jestem jednak gotowy, by oznaczyć jedną jako akceptowaną. To, czego naprawdę Szukałem, to konkretne zadania, które programiści front-endu muszą być w stanie wyprodukować w środowisku testowym. Innymi słowy, czym jest FizzBuzz dla CSS?

Zgadzam się, że solidne portfolio i umiejętność inteligentnego mówienia o temacie prawdopodobnie zminimalizują znaczenie testu. Z drugiej strony, myślę, że wszyscy znamy kandydatów, którzy są bardzo dobrzy w mówieniu dużych, ale jeśli chodzi o faktycznie demonstrowanie praktycznej wiedzy, nie są w stanie.

@JonathanHolland-raczej się nie zgadzam. HTML / CSS jest z pewnością łatwo się nauczyć, ale wiedza uzyskana z kilku szybkich samouczków jest niczym w porównaniu z kimś, kto spędził lata robi layout. Istnieje wiele technik i praktyk, które dobry programista CSS może wnieść do tabeli.

@roenving-być może byłem zbędny. Przez "Pure-css" miałem na myśli table-less. Ja też oznacza table-less w tym sensie, że nie używa tabel jako metodologii układu. Jednak nie jest to pytanie do dyskusji o układzie div-vs-table. Spróbuj tutaj . Chociaż wierzę, że większość pracodawców w dzisiejszych czasach będzie pytać, czy dev może zrobić układ bez użycia tabel(jako metodologia).

 0
Author: Bryan M.,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 10:30:33

Nie mam żadnego doświadczenia z zatrudnianiem, ale uczestniczyłem w wielu wywiadach z programistami internetowymi i mogę opowiedzieć o moich doświadczeniach.

Ze wszystkich moich wywiadów jedna metoda naprawdę sprawdziła się jako najlepszy sposób na odkrycie prawdziwego talentu. Przyznam, że nie jestem ekspertem i pewnie dlatego nie dostałam tej pracy, ale to był fantastyczny sposób na pozbycie się tych, którzy byli zdolni i tych, którzy byli świetni.

Zadano nam kilka pytań o DOM, orientację obiektu, Zamknięcia, Przestrzenie nazw XML i ogólne projektowanie stron internetowych, następnie zostaliśmy zabrani do cichego biura z ładnym widokiem na pobliską rzekę i poproszeni o napisanie kilku przykładów, aby pokazać nasze możliwości. Zostaliśmy sami, ale powiedziano nam, że kod źródłowy i nasza historia przeglądarki będą wyświetlane po, jeśli będziemy musieli użyć przeglądarki. Poproszono nas o utworzenie firmowego intranetu przy użyciu:

  • prosty układ trzech kolumn
  • dobrze wyglądająca tabela przy użyciu CSS
  • użyteczny, ale ładny pasek nawigacyjny.
  • dynamiczne ładowanie za pomocą XML i JavaScript

Biorąc pod uwagę niewielką ilość czasu, aby to zrobić, możesz zobaczyć ludzi, którzy naprawdę potrafią to zrobić. Chociaż być może ich przykład zawsze może być lepszy lub bardziej odpowiedni do różnych aplikacji, to po prostu pokazuje, że najlepszym sposobem na pokazanie umiejętności programisty jest zachęcenie ich do zrobienia czegoś! jeśli ty znasz swoje rzeczy, a oni znają swoje rzeczy, ich kod będzie dobry.

 0
Author: Mike B,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-11-20 15:38:35

"

Oczywiście, semantyczny HTML bez tabel i czysty układ CSS są prawdopodobnie kluczowymi umiejętnościami.

"

Nie rozumiem tego zdania ...

Czy naprawdę masz na myśli, że lepiej zrobić to, co jest prostym zadaniem, używając tabel w skomplikowany sposób, aby uniknąć używania tabel ?-)

Table-o-fobia jest tak samo trudną chorobą, jak tworzenie dużych stron internetowych bez pomocy serwera...

Oczywiście tabela-Piekieł ostatniej dekady nie jest ciekawe, ale wiele zadań jest naprawdę głupie, aby wykonać bez użycia tabel ...

Użyj elementu html, który easyist wykonuje zadanie, bez względu na to, której nazwy używa !-)

-- i nie rozumiem, co to jest "czysty układ css"; nigdy nie wymyśliłem, jak stworzyć stronę html bez elementów html, aby utrzymać układ w arkuszu stylów ...

 -1
Author: roenving,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-10-13 21:55:45

Wiem, że to nie jest świetna odpowiedź, ale jedną z pierwszych rzeczy, które robię, jest ujawnienie formatowania ich wznowić słowo. Jeśli skorzystali z wcięć i stylów, które oferuje Word i nie jest to tab, tab, tab, spacja, spacja, spacja, spacja, to idą na górę stosu.

 -2
Author: Steve Perks,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-10-13 19:43:57

Nie przywiązywałbym zbyt dużej wagi do tego, ponieważ odpowiedni HTML / CSS jest tak prosty, że każdy może się go nauczyć w tydzień.

To powiedziawszy, możesz chcieć przejrzeć ich portfolio, aby pomóc ci podjąć decyzję o ich obecnym poziomie umiejętności.

 -8
Author: FlySwat,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-10-13 17:30:00