29 pytań i odpowiedzi w wywiadzie z programistami Front End (2021)

najważniejsze pytania na rozmowie o pracę

Dlaczego miałbyś znać wszystkie najczęstsze pytania i odpowiedzi podczas rozmowy kwalifikacyjnej z programistami front-end?

W dzisiejszym świecie technologii, programista front-end powinien być zaawansowany technologicznie i biegły w przekładaniu potrzeb klienta na kreatywne i interaktywne aplikacje internetowe. Zdobycie tych umiejętności wymaga szkolenia front-end development. Obecnie wiele czołowych firm szuka zatrudnienia na stanowiskach front-end developerów, aby ci programiści mogli pomóc im w tworzeniu eleganckich, intuicyjnych, responsywnych i interaktywnych interfejsów użytkownika, które działają dobrze na różnych urządzeniach. Problem polega jednak na tym, że większość kandydatów jest zdezorientowana lub nie jest pewna, jakie pytania do rozmowy kwalifikacyjnej muszą przygotować do rozmowy rozwojowej, która ostatecznie pomoże im zostać zatrudnionym.

Odkrywanie różnych pytań praktycznych jest dość proste, ale trudno jest wybrać te właściwe spośród tych opcji.

Znajomość właściwych pytań jest kluczowa dla każdego, kto chce odbyć rozmowę o pracę z programistą front-end.

Niezależnie od tego, czy jesteś początkującym, czy doświadczonym kandydatem, zapoznaj się z poniższą listą najważniejszych pytań i odpowiedzi podczas rozmowy kwalifikacyjnej z programistami front-end. Ten artykuł pomoże ci poznać oba pytania i być przygotowanym, aby odnieść sukces podczas rozmowy kwalifikacyjnej.

Contents [show] [Pokazać]

Pytania i odpowiedzi podczas rozmowy kwalifikacyjnej z programistą front-end

Zobaczmy, na jakie ważne pytania dotyczące front-end developera należy się przygotować.

1. Jakie umiejętności techniczne i dodatkowe są potrzebne do bycia front-end developerem?

Dobry programista front-end musi mieć praktyczną wiedzę na temat:

  • HTML
  • CSS
  • jQuery
  • Javascript

Poza wyżej wymienionymi umiejętnościami technicznymi, front-end developer powinien posiadać wymienione poniżej umiejętności „dobre do posiadania”:

  • Doświadczenie w jednym z najpopularniejszych systemów zarządzania treścią (CMS), takich jak WordPress, Drupal i Joomla, a nawet nowszych, takich jak Ghost
  • Znajomość testowania w różnych przeglądarkach
  • Znajomość testów na różnych urządzeniach
  • Znajomość OOPS i PHP.
  • Podstawowa znajomość SEO i narzędzi, takich jak Adobe Photoshop, CSS3 i HTML5 oraz różnych technologii Javascript, takich jak skrypt natywny, Angular, które służą do prezentowania użytkownikom końcowym informacji internetowych.

2. Wyjaśnij, w jaki sposób zapewniłbyś, że Twój projekt strony internetowej jest przyjazny dla użytkownika i jakie kroki podjąłbyś, aby to osiągnąć?

Programista front-end musi często komunikować się i współpracować z projektantami UX (User Experience), aby wyobrazić sobie i konceptualizować stronę internetową, która projektuje wrażenia zorientowane na użytkownika, testując witrynę z użytkownikami, aby zapewnić optymalny projekt i zapewnić, że strona internetowa lub witryna jest zoptymalizowany do przeglądania w telefonie komórkowym.

3. Opisz Scenariusz Kawy?

CoffeeScript to mały język programowania, który kompiluje się w JavaScript. Jest to próba wykorzystania najlepszych części JavaScript w prosty sposób. Pomaga także programistom lepiej pisać kod JavaScript, prezentując użytkownikowi bardziej spójną składnię i omijając niezwykłą naturę języka JavaScript.

4. Wyjaśnij, czym jest właściwość clear w CSS?

Pandemia clear właściwość określa, po których stronach elementu elementy pływające nie mogą się unosić. Jest używany, gdy nie chcesz, aby element zawijał się wokół innego elementu, takiego jak pływak.

5. Opisz, kiedy używałbyś właściwości pływaka CSS?

Float jest używany, gdy chcesz, aby element Twojej strony internetowej został przesunięty w prawo lub w lewo i aby inne elementy były wyświetlane wokół niego.

6. Co to jest funkcja zwrotna?

Funkcja wywołania zwrotnego to funkcja przekazywana do innej funkcji jako argument, który jest następnie wywoływany wewnątrz funkcji zewnętrznej w celu wykonania jakiejś procedury lub akcji.

7. W jaki sposób ustrukturyzujesz swój kod źródłowy, aby był łatwy w użyciu przez współpracowników?

Programista front-end musi stosować wspólne standardy i wyjaśniać sposób wykorzystania organizacji kodu i komentarzy. Muszą wyjaśnić, w jaki sposób wykorzystują notatki w procesie programowania, aby wyjaśnić podjęte kroki, zapewniając w ten sposób skuteczność zrozumienia wśród współpracowników.

8. Wyjaśnij, jaka jest różnica między dziedziczeniem klasowym a prototypowym w JavaScript?

Dziedziczenie w JavaScript różni się od większości innych języków programowania. System obiektowy w JavaScript jest oparty na prototypach, a nie na klasach. Obiekty w JavaScript to po prostu kolekcja par nazw (kluczy) i wartości. Jeśli chodzi o dziedziczenie, JavaScript ma tylko jedną konstrukcję: obiekty. Każdy obiekt posiada prywatną własność, która zawiera odnośnik do innego obiektu, zwanego jego prototypem.

9. Czy możesz wyjaśnić różnicę między widocznością:ukrytym; i wyświetlacz:brak?

Dzięki opcji Visibility:Hidden obiekt nie jest widoczny, ale zajmuje swoją pierwotną przestrzeń. Z wyświetlaczem:Brak; przedmiot jest ukryty i nie zajmuje miejsca.

10. Wyjaśnij, jaka jest różnica między obiektem hosta a obiektem natywnym w JavaScript?

Obiekty hosta, które są obiektami dostarczanymi przez określone środowisko. Obiekty natywne to standardowe wbudowane obiekty zdefiniowane przez JavaScript. 

11. Jaka jest różnica między XHTML a HTML?

HTML i XHTML to języki znaczników, w których napisane są strony i witryny internetowe. Główną różnicą między nimi jest to, że składnia HTML jest oparta na SGML, podczas gdy składnia XHTML jest oparta na XML.

12. Wyjaśnij, czym zmienne różnią się w CoffeeScript od JavaScript?

W JavaScript przed użyciem zmiennej musimy ją zadeklarować i zainicjalizować (przypisać wartość). W przeciwieństwie do JavaScript, tworząc zmienną w CoffeeScript, nie ma potrzeby deklarowania jej za pomocą słowa kluczowego var. Po prostu tworzymy zmienną, przypisując wartość do literału, jak pokazano poniżej.

13. Czy możesz nam powiedzieć, jakie są zalety CoffeeScript nad JavaScriptem?

  • Łatwo zrozumiałe − CoffeeScript to skrócona forma JavaScript, jego składnia jest dość prosta w porównaniu do JavaScript. Za pomocą CoffeeScript możemy pisać czyste, jasne i łatwo zrozumiałe kody.

  • Pisać less do more − W przypadku dużego kodu w JavaScript potrzebujemy stosunkowo bardzo less liczba linii CoffeeScript.

  • Niezawodny — CoffeeScript to bezpieczny i niezawodny język programowania do pisania dynamicznych programów.

  • Czytelny i łatwy w utrzymaniu — CoffeeScript zapewnia aliasy dla większości operatorów, dzięki czemu kod jest czytelny. Programy napisane w CoffeeScript są również łatwe w utrzymaniu.

  • Dziedziczenie oparte na klasach — JavaScript nie posiada klas. Zamiast nich zapewnia potężne, ale mylące prototypy. W przeciwieństwie do JavaScript, możemy tworzyć klasy i dziedziczyć je w CoffeeScript. Oprócz tego zapewnia również właściwości instancyjne i statyczne, a także mixiny. Używa natywnego prototypu JavaScript do tworzenia klas.

  • Brak słowa kluczowego var − Nie ma potrzeby używania słowa kluczowego var do tworzenia zmiennej w CoffeeScript, dzięki czemu możemy uniknąć przypadkowego lub niepożądanego spowolnienia zakresu.

  • Unika problematycznych symboli − Nie ma potrzeby używania problematycznych średników i nawiasów w CoffeeScript. Zamiast nawiasów klamrowych możemy użyć spacji do rozróżnienia kodów blokowych, takich jak funkcje, pętle itp.

  • Rozbudowana obsługa bibliotek − W CoffeeScript możemy korzystać z bibliotek JavaScript i odwrotnie. Dzięki temu podczas pracy z CoffeeScript mamy dostęp do bogatego zestawu bibliotek. 

14. Wyjaśnij, jaka jest różnica między żądaniem GET i POST?

Zarówno metoda GET, jak i POST służą do przesyłania danych od klienta do serwera w protokole HTTP. Główną różnicą między metodą POST i GET jest to, że GET przenosi parametry żądania dołączone w ciągu URL, podczas gdy POST przenosi parametr żądania w treści wiadomości, co czyni go bezpieczniejszym sposobem przesyłania danych od klienta do serwera w HTTP.

15. Czy możesz nam powiedzieć, kiedy wykorzystasz właściwość CSS clear?

Własność CSS clear jest używana, gdy chcesz, aby element po lewej lub prawej stronie elementu pływającego nie zawijał się wokół niego.

16. Opisz, jaka jest różnica między wartością Null a Undefined?

n JavaScript, undefined oznacza, że ​​zmienna została zadeklarowana, ale nie przypisano jej jeszcze wartości. null to wartość przypisania. Może być przypisany do zmiennej jako reprezentacja bez wartości.

17. Wyjaśnij znaczenie DOCTYPE HTML?

DOCTYPE to instrukcja dla przeglądarki internetowej dotycząca wersji języka znaczników, w którym napisana jest strona. Deklaracja DOCTYPE musi być pierwszą rzeczą w dokumencie HTML, przed etykietka. Deklaracja Doctype wskazuje na definicję typu dokumentu (DTD). Doctype udostępnia reguły języka znaczników, dzięki czemu przeglądarka może poprawnie zinterpretować zawartość.

18. Wyjaśnij różnicę między plikami cookie, pamięcią sesji i pamięcią lokalną?

Pliki cookie umożliwiają aplikacjom przechowywanie danych w przeglądarce klienta. Właściwość przechowywania sesji umożliwia aplikacjom przechowywanie danych do momentu zamknięcia okna przeglądarki. Właściwość magazynu lokalnego umożliwia aplikacjom przechowywanie danych bez daty wygaśnięcia.

19. Opisz czym jest obiekt Thread-Local w Python Flask?

Obiekt lokalny wątku to obiekt przechowywany w dedykowanej strukturze, dołączony do bieżącego identyfikatora wątku. Flask wykorzystuje wewnętrznie lokalne obiekty wątków, dzięki czemu użytkownik nie musi przekazywać obiektów z funkcji do funkcji w ramach żądania, aby zachować bezpieczeństwo wątków. Lokalna pamięć wątku działa w bieżącym wątku. To podejście jest pomocne, ale wymaga prawidłowego kontekstu żądania do wstrzykiwania zależności lub podczas próby ponownego użycia kodu, który wykorzystuje wartość powiązaną z żądaniem.

20. Wyjaśnij składnię i jak używać funkcji jako klasy?

function functionName(name){
this.name = name;
}
// Creating an object
var variable_name = new functionName(“Collective”);
console.log(variable_name.name); //Collective

21. Co to jest leniwe ładowanie?

Powolne ładowanie (zwane również ładowaniem na żądanie) to technika optymalizacji treści online, niezależnie od tego, czy jest to strona internetowa, czy aplikacja internetowa. Zamiast ładować całą stronę internetową lub obrazy i renderować je użytkownikowi za jednym razem, jak w przypadku ładowania zbiorczego, koncepcja leniwego ładowania pomaga w załadowaniu tylko wymaganej sekcji i opóźnia pozostałą, aż będzie potrzebna przez użytkownika (na przykład gdy użytkownik przewinie do wymaganego obrazu).

22. Wyjaśnij różnicę między klasami a identyfikatorami?

Klasy i selektory identyfikatorów, oba są wykorzystywane jako zaczepy dla stylów CSS. Identyfikatory są powszechnie używane do stylizowania elementów, które pojawiają się tylko raz na stronie, takich jak jedno wystąpienie menu nawigacyjnego. Klasy służą do stylizowania różnych elementów w ten sam sposób, takich jak obecność linków, przycisków, formularzy, tekstu itp. 

23. Co to jest delegowanie wydarzeń?

Delegowanie zdarzeń to proces używania propagacji zdarzeń do obsługi zdarzeń na wyższym poziomie w DOM, a nie w elemencie, z którego pochodzi zdarzenie. Pozwala uniknąć dodawania detektorów zdarzeń do poszczególnych węzłów; zamiast tego możesz dodać pojedynczy detektor zdarzeń do elementu nadrzędnego. 

24. Jak możesz zwiększyć wydajność strony?

  • Wyczyść dokument HTML
  • Zmniejsz zewnętrzne żądania HTTP i zewnętrzne skrypty
  • Użyj skompresowanego i mniejszego obrazu
  • Odłóż JavaScript na dół strony
  • Używaj najnowszych wersji kodu, takich jak PHP
  • Zminimalizuj CSS, JavaScript, HTML
  • Użyj CDN i buforowania
  • Zawartość GZip lub Brotli Compress
  • Cache przeglądarki dźwigni 

25. Co to jest Ajax?

AJAX (asynchroniczny JavaScript i XML) umożliwia aplikacjom asynchroniczne przesyłanie danych do/z serwera bez odświeżania strony. Oznacza to, że prawdopodobnie zaktualizuje części strony internetowej bez ponownego ładowania całej strony. Na przykład przychodzą nowe wiadomości z Gmaila i są oznaczane jako nowe, nawet jeśli nie odświeżyłeś strony internetowej. 

26. Jaka jest różnica między rozmiarami blokowymi, wbudowanymi, wbudowanymi i pudełkowymi?

  • Wbudowany jest domyślnie. Na przykład: Elementem śródliniowym jest .
  • Blok pokazuje jako element blokowy, taki jak lub .
  • Inline-block pokazuje element jako wbudowany kontener blokowy.
  • Określanie rozmiaru pudełka wyświetla właściwości określania rozmiaru przeglądarki.

27. Co to jest propagacja zdarzeń?

Propagacja zdarzenia to rodzaj propagacji zdarzenia, w którym zdarzenie najpierw wyzwala się na najgłębszym elemencie docelowym. Powoduje to, że wszystkie zdarzenia w węzłach podrzędnych są automatycznie przekazywane do ich węzłów nadrzędnych. Zaletą tej metody jest wydajność, ponieważ kod wymaga tylko jednorazowego przejścia przez drzewo DOM.

28. Wyjaśnij, co to jest zamknięcie? 

zamknięcie jest kombinacją funkcji powiązanej (zamkniętej) z odniesieniami do otaczającego ją stanu ( środowisko leksykalne). Zamknięcie daje dostęp do zakresu funkcji zewnętrznej z funkcji wewnętrznej. W JavaScript domknięcia są tworzone za każdym razem, gdy tworzona jest funkcja, w momencie tworzenia funkcji.

 

29. Wyjaśnij, jak radzisz sobie z niezgodnością stylów w poszczególnych przeglądarkach?

Istnieje wiele sposobów na obejście tego. Najprostszym sposobem postępowania byłoby użycie instrukcji warunkowej w tagu head w kodzie HTML. W ten sposób możesz rozpoznać przeglądarkę i załadować zewnętrzny arkusz stylów.

Wnioski

Oto niektóre z najważniejszych pytań i odpowiedzi podczas rozmowy kwalifikacyjnej z deweloperami front-end. Oni pomogą Ci w przygotowaniu się do rozmowy kwalifikacyjnej w zakresie front-end developmentu. Jeśli przegapiliśmy inne ważne pytania programistów front-end, daj nam znać w komentarzach poniżej.

O autorze
David Attard
Autor: David AttardStrona internetowa: https://www.linkedin.com/in/dattard/
David pracuje w branży online / cyfrowej lub w jej pobliżu od 18 lat. Ma ogromne doświadczenie w branży oprogramowania i projektowania stron internetowych przy użyciu WordPress, Joomla i otaczających je nisz. Jako konsultant ds. Cyfrowych koncentruje się na pomaganiu firmom w uzyskaniu przewagi konkurencyjnej za pomocą połączenia ich strony internetowej i dostępnych obecnie platform cyfrowych.

Jeszcze jedna rzecz... Czy wiesz, że osoby, które udostępniają przydatne rzeczy, takie jak ten post, również wyglądają NIESAMOWITE? ;-)
Proszę zostaw użyteczny skomentuj swoje przemyślenia, a następnie udostępnij to na swoich grupach na Facebooku, które uznają to za przydatne i wspólnie zbierzmy korzyści. Dziękuję za udostępnienie i bycie miłym!

Ujawnienie: Ta strona może zawierać linki do zewnętrznych witryn produktów, które kochamy i gorąco polecamy. Jeśli kupisz sugerowane przez nas produkty, możemy otrzymać opłatę za polecenie. Takie opłaty nie wpływają na nasze rekomendacje i nie przyjmujemy płatności za pozytywne recenzje.

Autorzy promowani w:  Inc Czasopismo Logo .   Logo Sitepoint   Logo CSS Tricks    logo webdesignerdepot   Logo WPMU DEV   i wiele więcej ...