Pytania rekrutacyjne dla Front-end developerów

Atrybuty data- to niestandardowe atrybuty html, które pozwalają na przechowywanie dodatkowych informacji, które później wykorzystać można na przykład do wyszukiwania, filtrowania lub grupowania danych (najczęściej przy użyciu javascript). Przykładowo, jeśli mamy listę restauracji z różnych miast, to w atrybutach data- możemy zapisać dane o tym, w jakim mieście mieści się dana restauracja, jaki jest to rodzaj restauracji (wegetariańska, sushi czy inna) lub czy posiada menu dla dzieci.

<li id="wege-restaurant" data-city="Katowice" data-menu="wegetarian" data-kids="yes">Wege Restaurant</li>

Powinno się ich używać tylko wtedy, kiedy dla danych, które chcemy zapisać, nie istnieje standardowy atrybut html.

Atrybuty data można odczytać w Javascript w następujący sposób:

const restaurant = document.querySelector("#wege-restaurant");
console.log(restaurant.dataset.city); // "Katowice"
console.log(restaurant.dataset.menu); // "wegetarian"
console.log(restaurant.dataset.kids); // "yes"

Słowo kluczowe this odnosi się do kontekstu, w którym wywoływana jest funkcja. Może przyjmować różne wartości:

• W globalnym zakresie (lub w funkcji wywołanej w globalnym zakresie) this odnosi się do obiektu window (w przeglądarce) lub global (w Node.js).
• W metodzie obiektu this odnosi się do obiektu, który tę metodę wywołał.
• W funkcji strzałkowej this nie jest wiązane dynamicznie – dziedziczy wartość z otaczającego zakresu.
• W klasach i konstruktorach this odnosi się do nowo utworzonego obiektu.

const obj = {
  name: "Alice",
  sayHi: function() {
    console.log(this.name);
  }
};
obj.sayHi(); // "Alice"

W języku HTML wyróżniamy dwa podstawowe typy elementów określających atrybuty tekstu:

• Znaczniki formatujące, czyli takie, które mają za zadanie zmienić wygląd tekstu. Są to np. <b> (pogrubienie), <i> (pochylenie), <u> (podkreślenie), <s> (przekreślenie), <small> (czcionka pomniejszona).
• Znaczniki semantyczne, których zadaniem jest wskazanie robotom przeglądarki, że dana treść ma szczególne znaczenie. Znaczniki semantyczne mogą zmieniać wygląd tekstu, ale nie muszą tego robić (zależne jest od przeglądarki).

Semantyczny HTML to taki, który jasno określa przeznaczenie elementów. Przykłady tagów semantycznych to: <strong>, <em>, <code>, <a>, <cite>, <pre>, <del>, <address>, <acronym>, <br>, <article>,<aside>,<details>, <footer>, <header>, <main>, <mark>, <nav>, <section>, ale jest ich znacznie więcej.

Za pomocą atrybutów srcset i sizes:

Sposób 1:

<div class="container2"> 
    <img srcset="green-parrot-500px.jpg 500w, green-parrot-350px.jpg 350w, green-parrot-200px.jpg 200w" 
         sizes= "(max-width: 400px) 200px, (max-width: 600px) 350px, 500px" 
         src="green-parrot-500px.jpg" 
         alt="green-parrot-picture" /> 
</div> 

Sposób 2:

<picture> 
    <source media="(max-width: 400px)" srcset="green-parrot-200px.jpg"> 
    <source media="(max-width: 600px)" srcset="green-parrot-350px.jpg"> 
    <img src="green-parrot-500px.jpg" style="width:auto" alt="green parrot picture"> 
</picture>