25 nejdůležitějších otázek a odpovědí k rozhovoru pro vývojáře webu

Weboví vývojáři jsou i nadále žádáni, protože internet neustále roste. Chcete-li však získat práci, musíte nejprve upravit pohovor se zaměstnavatelem.

I když větší týmy mají tendenci najímat buď front-endové nebo back-endové vývojáře, menší týmy a startupy často hledají full-stack vývojáře. Je tedy užitečné vědět co nejvíce.

Níže je uveden seznam 25 nejdůležitějších otázek, které byste měli znát na pohovoru pro webové vývojáře, a jejich odpovědi, které vám pomohou se připravit.

1. Jaké jsou role HTML, JavaScriptu a CSS při vývoji webu?

HTML je zkratka pro HyperText Markup Language a je standardním jazykem pro vývoj dokumentů k publikování na webu. JavaScript a CSS jsou doplňky.

JavaScript byl původně navržen jako programovací jazyk na straně klienta, spouští se v prohlížeči, aby na webové stránce vytvořil více funkcí. CSS je zkratka pro Cascading Style Sheets a používá se k prezentaci prvků na obrazovce.

2. Co je responzivní web design

Responzivní web design je přístup k vývoji webu, jehož cílem je vytvořit pro uživatele co nejlepší zážitek přizpůsobením vzhledu webu na základě zařízení nebo prostředí daného uživatele.

Cílem je, aby webová stránka vypadala dobře na všech zařízeních, a to znamená dynamické změny, které buď zmenšují nebo zvětšují velikosti polí a zarovnání na základě velikosti obrazovky nebo orientace zařízení.

3. Jaké jsou výhody používání rámce?

Použití frameworku při vývoji webové aplikace má mnoho výhod. Ty hlavní jsou následující:

1. Jednodušší proces vývoje s osvědčenými postupy.
2. Rychlejší vývoj se startovacími projekty šetří čas.
3. Použití osvědčeného kódu.
4. Často poskytuje lepší zabezpečení.
5. Šetří náklady, zejména u větších projektů.

4. Co je zpětné volání JavaScriptu?

Zpětné volání JavaScriptu je funkce, která by měla být provedena po jiné funkci. Jméno a argumenty funkce zpětného volání lze předat jako argumenty první funkci a první funkce může také předat argumenty interně funkci zpětného volání, které jsou výsledkem jejích výpočtů.

Funkce zpětného volání se nejlépe používají s asynchronními funkcemi, které musí čekat, než ostatní funkce nejprve dokončí provádění.

5. Vysvětlete místní vs globální rozsah v JavaScriptu

Definované proměnné jsou zapsány slovy a ty mají smysl pouze ve správném kontextu. Lokální a globální rozsah odkazuje na tento kontext definovaných proměnných. Globální proměnná musí být definována mimo funkci, zatímco lokální proměnné jsou definovány uvnitř funkce.

Globální proměnná má tedy globální rozsah, což znamená, že k ní lze přistupovat odkudkoli v programu. Lokální proměnná má však lokální rozsah, což znamená, že k ní lze přistupovat pouze zevnitř funkce.

6. Vysvětlete Z-Index v CSS

Z-index je vlastnost prvku, která se používá k definování pořadí zásobníku prvku. Pořadí zásobníku označuje schopnost prvku být buď za nebo před jinými prvky, stejně jako hromádka karet.

Prvky s vyšším pořadím se objeví před prvky s nižším pořadím. V tomto kontextu, přiřadit prvku pořadí zásobníku 2 nebo 100 zaručuje, že se na stránce zobrazí nad všemi ostatními. Podobně stránka bez zadaného pořadí zásobníků naskládá spodní prvky ze zdroje výše než horní.

7. Co je Marquee v HTML?

Marque je kontejnerová značka v HTML, která se používá k zobrazení rolujícího textu. Umožňuje vám ovládat směr rolování a také rychlost. Marquee je však v HTML5 zastaralý a místo toho vám doporučujeme používat CSS.

Příklad posouvání s rámečkem:

Text posouvání textu

8. Uveďte hlavní způsoby, jak zkrátit dobu načítání stránky

Existuje mnoho kroků, které může vývojář podniknout, aby zlepšil dobu načítání stránky, hlavní z nich jsou:

• Optimalizujte obrázky a zmenšete jejich velikost
• Zbavte se nepotřebných widgetů
• Omezte vyhledávání na naprosté minimum
• Hostujte web na slušném hostiteli
• Použijte stránky Accelerated Mobile Pages nebo statické weby
• Líné načítání obrázků
• Minimalizujte svůj kód

9. Jaké jsou rozdíly mezi Canvas a SVG?

SVG je zkratka pro Scalable Vector Graphics a tag je kontejnerový prvek pro vytváření grafiky, jako je kruh, rámeček, elipsa a tak dále. SVG můžete upravit pomocí CSS nebo JavaScriptu a škálovatelnost znamená, že funguje dobře pro výstupy s vysokým rozlišením.

The kontejner je na druhé straně založen na rastru a není škálovatelný. Používá se také pro tvorbu grafiky, ale lze ji upravit pouze pomocí JavaScriptu. Je však efektivnější při manipulaci s větším počtem předmětů.

10. Jak to funguje? Null Liší se od Nedefinováno?

Null je reprezentace bez hodnoty. Obecně se používá jako držitel umístění k inicializaci definované proměnné, které nebyla přiřazena skutečná hodnota. Nedefinováno na druhé straně odkazuje na definovanou proměnnou, která nebyla inicializována.

V JavaScriptu:

var proměnnáA;

var proměnnáB = null;

alert(variableA); //ukazuje nedefinováno

výstraha(proměnnáB); //ukazuje null

11. Jak se liší ID od třídy?

ID a třída jsou dvě metody identifikace a manipulace s prvky v dokumentu HTML. Hlavní rozdíl mezi těmito dvěma je však v tom, že ID musí být jedinečné. Jinými slovy, dva prvky nemohou sdílet stejné ID, ale dva nebo více prvků může sdílet stejnou třídu.

ID se používá ke zpracování konkrétních prvků, zatímco třída se používá ke zpracování skupiny prvků, které sdílejí jednu nebo více společných vlastností.

12. Jak vylepšíte bezpečnostní funkce webových stránek?

Mezi několik kroků, které můžete podniknout ke zlepšení zabezpečení webu, patří:

1. Vynucování zásad silných hesel. To znamená zkontrolovat, zda vybrané heslo má více než 8 znaků a obsahuje číslice, speciální znaky a velká a malá písmena.
2. Použití captcha nebo jakéhokoli opatření proti botům.
3. Použití dvoufaktorových nebo vícefaktorových autentizačních metod, jako jsou OTP (jednorázová hesla) a hardwarové klíče, kde je to nutné.
4. Použití hostitele s ochranou DDoS a funkcemi automatického zálohování.

13. Jak se localStorage liší od sessionStorage?

Systémy localStorage a sessionStorage umožňují vývojářům ukládat data ve webovém prohlížeči. LocalStoarage je však perzistentní, zatímco sessionStorage nikoli. Jinými slovy, data uložená v localStorage budou k dispozici v prohlížeči během několika relací, zatímco data uložená v sessionStorage budou odstraněna, jakmile se zavře karta prohlížeče.

14. Seznam vylepšení HTTP2.0 oproti HTTP 1.1

Protokol HTTP/2 byl publikován v roce 2015 a nabízí významná vylepšení, jako například:

1. Lepší zabezpečení pomocí binárního kódu nad textem.
2. Lepší výkon.
3. Nižší latence.
4. Lepší zpracování chyb.
5. Nižší režie.

15. Jaký je rozdíl mezi Git Pull a Git Merge?

Příkaz git pull vám umožňuje stáhnout obsah ze vzdáleného úložiště a poté staženým obsahem aktualizuje vaše místní úložiště.

Na druhé straně příkaz git merge umožňuje kombinovat dvě samostatně vyvinuté větve stejného projektu. Příkaz merge musí být proveden z větve, do které se chcete sloučit, a to je obvykle hlavní větev.

16. Jak se GET liší od POST a PUT?

Metodu HTML GET používá prohlížeč k vyžádání informací ze serveru, zatímco metody POST a PUT se používají k odesílání informací z prohlížeče na server.

Ale zatímco požadavek POST může jednoduše přidat data do zdroje serveru, požadavek PUT se používá k nahrazení zdroje zcela pomocí datové zátěže požadavku.

17. Seznam nejoblíbenějších formátů pro výměnu dat

Zde jsou dosud nejoblíbenější formáty výměny dat:

1. XML
2. Yaml
3. CSV
4. JSON
5. HTTP
6. SQL

18. Vyjmenujte 3 typy vyskakovacích oken

Vyskakovací okna v JavaScriptu se používají k zobrazení zpráv uživateli, k vyžádání vstupu a někdy k provedení obojího. Zde jsou 3 typy vyskakovacích oken JavaScriptu:

1. Pole upozornění – Zobrazí se vaše zpráva plus tlačítko „OK“.
2. Potvrdit políčko – Toto dialogové okno obsahuje tlačítka 'OK' a 'Cancel', která mohou ovlivnit kód.
3. Výzva – Toto pole obsahuje textové pole pro shromažďování informací od uživatele.

19. Pojmenujte různé způsoby zahrnutí kódu CSS

Existují 3 způsoby, jak zahrnout CSS do dokumentu HTML. Jsou to:

1. Externí CSS – Zahrnete dokument .css pomocí uvnitř dokumentu značky.
2. Vložené CSS – Kód CSS vložíte dovnitř tagy kdekoli v dokumentu.
3. Vložený CSS – V HTML tagech používáte pár style=”CSS-property: value”, např. PSquare!

20. Jak to funguje? okno.načtení Liší se od document.onload?

Window.onload se používá ke spuštění kódu JavaScript, jakmile prohlížeč načte strom DOM stránky a další základy, včetně obrázků, kódu CSS a skriptů.

Zatímco document.onload se spouští okamžitě poté, co je DOM připraven, může to znamenat ještě před načtením obrázků a externích knihoven.

21. Jak skryjete prvek pomocí CSS?

Element HTML můžete skrýt pomocí 3 metod CSS, jsou to:

1. Displej: žádný; – Prvek není vykreslen ani zobrazen.
2. Viditelnost: skrytá; – Prvek je vykreslen, ale není zobrazen.
3. Pozice: Absolutní; – Prvek je vykreslen a zobrazen, ale umístěn mimo oblast zobrazení.

22. Jaké je nejlepší využití Ajaxu?

Ajax je metoda načítání dat ze serveru na pozadí pomocí JavaScriptu. Má mnoho využití, jako je ověřování dat, chatovací aplikace, komentáře, filtrování dat, vizuální úpravy, ankety a tak dále.

23. Seznam některých nových funkcí CSS3

CSS3 obsahuje oproti CSS2 mnoho moderních a užitečných funkcí, jako například:

1. Zaoblené rohy pro krabice a obrázky.
2. Animace objektů.
3. Proměnné a funkce pro deklarace.
4. Grid & Flexbox pro citlivý design.
5. Přechody pro barvy pozadí.
6. Ovládání krytí pomocí rgba.
7. Stínový efekt pro rámečky a texty.
8. Přechody pro Hover a Focus on elements.

24. Které nové typy vstupů byly zavedeny v HTML5?

Typ vstupu je hodnota, kterou zadáte vstupnímu prvku v dokumentu HTML.

Příkladem je:

or

Mezi nové typy vstupu HTML5 patří:

1. Datum
2. Barva
3. Email
4. Hledat
5. Tel
6. Měsíc
7. Rozsah čísel
8. Měsíc
9. URL
10. Datum a čas - místní

25. Popište mediální prvky HTML5

HTML5 obsahuje více značek prvků pro práci s typy médií a zdroji. Jsou to:

• – pro videa MP4, WebM a Ogg.
• – definovat více zdrojů v různých formátech.
• – pro zvuk MP3, Ogg a WAV.
• – kontejner obsahující externí zdroje od obrázků po videa a webové stránky.
• – pro určení stop titulků pro videa.

Závěr

Když jsme se dostali na konec našeho seznamu 25 nejdůležitějších otázek, které musíte znát při rozhovorech s webovými vývojáři, můžete vidět, že k tomu, abyste byli vývojářem v plném rozsahu, je potřeba poměrně velká kombinace technologií.

I když se jedná o průvodce, který se dotýká různých aspektů práce, není v žádném případě vyčerpávající. Je tedy na vás, abyste identifikovali oblasti, ve kterých nemáte jasno, a pak se učili.