Najlepsze pytania i odpowiedzi na rozmowę dla programisty front-end

Model pudełkowy CSS to prostokątny paradygmat układu dla elementów HTML. Składa się z następujących elementów:

Content - Zawartość pola, na którą składają się wszystkie obrazy i tekst

Padding - przezroczysty obszar otaczający zawartość (odstęp między obramowaniem a zawartością)

Border - obramowanie otaczające dopełnienie (jeśli jest) i zawartość

Margin - to przezroczysty obszar wokół obramowania (odstęp między obramowaniem a sąsiednimi elementami)

Oto najważniejsze zalety usług sieciowych REST:

• Krzywa uczenia się jest bardzo łagodna, bo REST działa w oparciu o protokoły HTTP
• Obsługuje kilka technologii przesyłania danych, takich jak tekst, XML, JSON, obraz itd.
• Nie ma z góry określonego kontraktu między serwerem a klientem, więc implementacja jest luźno powiązana
• REST to bardzo lekki protokół
• Metody REST łatwo przetestować w przeglądarce

Cross-Site Scripting (XSS) to atak, w którym napastnik wykorzystuje aplikację webową, żeby wysłać złośliwy kod do innego użytkownika końcowego. Kod ten ma zwykle postać skryptu działającego po stronie przeglądarki.

Strona zwracana przez serwer na żądanie jest niezmieniona. Atak XSS wykorzystuje słabości strony polegające na tym, że zmienna przesłana w żądaniu pojawia się w odpowiedzi w surowej postaci. Strona wyświetli tylko to, co zostało wysłane wraz z tym żądaniem.

Tryb strict to funkcja ECMAScript 5, która pozwala uruchomić program lub funkcję w „ścisłym” kontekście działania. Ten ścisły kontekst blokuje niektóre operacje i zgłasza więcej wyjątków.

Oto przykład takiego trybu strict:

// Non-strict code ...

(Function () {

  "Use strict";

  // Define your library strictly ...

}) ();

// Non-strict code ...

Przeglądarki często stosują regułę CSS do dokumentów, żeby wpłynąć na ich treść. Taka reguła CSS składa się z kilku rzeczy:

• Selektor wybierający z listy elementów te, do których chcesz zastosować zaktualizowane wartości właściwości.
• Zestaw właściwości z ustawionymi wartościami, które zmieniają sposób wyświetlania treści HTML

Warto też dodać, że zestaw reguł CSS zawartych w arkuszu stylów decyduje o tym, jak strona ma wyglądać.

KISS, backronim od „keep it simple, stupid”, to zasada projektowa wymyślona przez marynarkę wojenną USA w 1960 roku. Zasada KISS mówi, że niemal wszystkie systemy działają najlepiej wtedy, gdy pozostają proste, a nie skomplikowane. Dlatego projekt powinien być zawsze prosty i unikać zbędnej złożoności.

• Div jest elementem blokowym
• Span jest elementem liniowym

Umieszczenie elementu blokowego wewnątrz elementu liniowego jest niedozwolone. Div może zawierać znacznik p, a znacznik p może zawierać span, ale span nie może zawierać znacznika div ani p.

Ta otwartoźródłowa biblioteka JavaScriptu jest używana przede wszystkim do tworzenia front-endu aplikacji jednostronicowych oraz do zarządzania warstwą widoku w aplikacjach mobilnych i webowych.

W paradygmacie programowania obiektowego polimorfizm to zdolność akcji lub metody do wykonywania różnych działań w zależności od obiektu, na którym operuje. Do przejawów polimorfizmu należą przeciążanie, nadpisywanie i dynamiczne wiązanie metod.

jQuery to dobry wybór do prostych zadań. Ma kilka zalet w porównaniu z innymi frameworkami.

• łatwy w rozbudowie
• Łatwy w użyciu i nauce
• Wygodny do manipulowania DOM-em i poruszania się po nim.
• Wsparcie dla wielu przeglądarek (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)
• Możliwości AJAX-a
• Sposoby zmieniania i stosowania CSS oraz tworzenia animacji
• Mnóstwo wtyczek na każdą potrzebę

S - Zasada pojedynczej odpowiedzialności. Klasa powinna mieć tylko jedno zadanie

O - Zasada otwarte-zamknięte. Obiekty muszą być otwarte na rozszerzanie, ale zamknięte na modyfikację.

L - Zasada podstawienia Liskov. Niech q (x) będzie własnością dowodliwą dla obiektów x typu T. Wtedy q (y) powinno być dowodliwe dla obiektów y typu S, gdzie S jest podtypem T.

I - Zasada segregacji interfejsów. Nie można zmuszać klientów do implementowania interfejsu, którego nie używają.

D - Zasada odwrócenia zależności. Byty muszą zależeć od abstrakcji, a nie od konkretnych implementacji.

ClickJacking to złośliwa technika, która nakłania użytkowników do kliknięcia w element będący w rzeczywistości czymś innym niż to, co widzą. ClickJacking służy do nielegalnego zdobywania danych osobowych lub przejęcia kontroli nad czyimś urządzeniem.

Równoważenie obciążenia to metoda rozdzielania mocy obliczeniowej na wiele maszyn lub klastrów. Front-endowy load balancer to serwer, który przyjmuje żądania klienta pod wirtualnym adresem IP; dba o to, żeby żadna maszyna nie była przeciążona ani niedociążona. Load balancer wybiera najodpowiedniejszą usługę reverse proxy na podstawie zadanego algorytmu szeregowania i przekazuje żądania do potrzebnego serwera reverse proxy.

Koercja to konwersja w JavaScripcie między dwoma różnymi typami wbudowanymi. Są dwie formy koercji: jawna i niejawna.

Oto przykład koercji jawnej:

var a = "42";

var b = Number (a)

a; // "42"

b; // 42 - the number!

Oto przykład koercji niejawnej:

var a = "42";

var b = a * 1; // "42" implicitly coerced to 42 here

a; // "42"

b; // 42 - the number!

Mixin to blok kodu, w którym można pogrupować deklaracje CSS. Takie deklaracje można potem wielokrotnie wykorzystywać w serwisie.

Tak definiuje się mixin:

@mixin grid ($ flex: true / * default argument * /) {

@if $ flex {

        @include flex;

} @Else {

        display: block;

}

}

A tak używa się mixinu:

/ * Scss * /

.row {

    @include grid (true);

}

/ * Css * /

.row {

    display: -webkit-flex;

    display: flex;

}

Resetowanie - ma usunąć wszystkie domyślne style przeglądarki na elementach. Marginesy, dopełnienia i czcionki są sprowadzane do tych samych wartości.

Normalizowanie - zachowuje style, które są przydatne, zamiast wyrzucać wszystko. Może też naprawiać błędy wynikające z typowych zależności przeglądarek.

Lepiej użyć resetowania, jeśli pracujesz nad bardzo nietypowym projektem strony i musisz stworzyć dużo własnych stylów.

PUT umieszcza plik lub zasób pod konkretnym URI, dokładnie pod tym URI. Jeśli pod tym URI jest już plik, PUT go zastąpi.

POST wysyła dane pod określony URI i czeka, aż plik lub zasób pod tym URI przetworzy żądanie. Na tym etapie serwer decyduje, co zrobić z danymi w kontekście tego zasobu.

System siatki to framework, który pozwala programistom układać treść zarówno w pionie, jak i w poziomie. Systemy te mają dwa główne elementy — wiersze i kolumny.

• Przykłady systemów siatki to:
• Simple grid
• Pure
• Flexbox Grid
• Bootstrap
• Foundation

jQuery to jedyne narzędzie, które rozwiązuje pojedynczy, konkretny problem — manipulację DOM-em — podczas gdy AngularJS to kompletny framework webowy z różnymi narzędziami do różnych problemów: routingu, wiązania modeli, manipulacji DOM-em itd. JqLite (podzbiór jQuery) jest częścią AngularJS i to nim rozwiązuje się tam kwestię manipulacji DOM-em.

Webpack to otwartoźródłowy bundler modułów JavaScriptu. Jego głównym zadaniem jest umieszczenie wszystkich zasobów — JavaScriptu, obrazów, czcionek i CSS — w grafie zależności. Webpack daje kontrolę nad tym, jak traktowane są napotkane zasoby.

Wzorzec Prototyp tworzy nowe obiekty. Jego osobliwość polega na tym, że zamiast tworzyć obiekty niezainicjalizowane, zwraca obiekty zainicjalizowane wartościami skopiowanymi z prototypu — obiektu wzorcowego.

Jednym z przykładów jest inicjalizacja obiektów biznesowych wartościami odpowiadającymi wartościom domyślnym w bazie danych. Języki klasowe rzadko używają wzorca Prototyp, ale JavaScript — jako język prototypowy — wykorzystuje go przy tworzeniu nowych obiektów i ich prototypów.

Domknięcie to funkcja zdefiniowana wewnątrz innej funkcji, która ma też dostęp do zmiennej. Ta zmienna jest zadeklarowana i zdefiniowana w zakresie funkcji nadrzędnej.

Domknięcie ma dostęp do zmiennej w trzech zakresach:

• Zmienna zadeklarowana w jego zakresie
• Zmienna zadeklarowana w zakresie funkcji nadrzędnej
• Zmienna zadeklarowana w globalnej przestrzeni nazw

Przykład takiego domknięcia:

var globalVar = "abc";  // Parent self invoking function

(Function outerFunction (outerArg) {// begin of scope outerFunction  // Variable declared in outerFunction function scope

var outerFuncVar = 'x';   // Closure self-invoking function

(Function innerFunction (innerArg) {// begin of scope innerFunction  // variable declared in innerFunction function scope

var innerFuncVar = "y";

console.log (

"OuterArg =" + outerArg + "\ n" + "OuterFuncVar =" + outerFuncVar + "\ n" + "InnerArg =" + innerArg + "\ n" + "InnerFuncVar =" + innerFuncVar + "\ n" + "GlobalVar =" + globalVar)  // end of scope innerFunction

}) (five); // Pass 5 as parameter  // end of scope outerFunction

}) (7); // Pass 7 as parameter

Content Security Policy (CSP) to nagłówek HTTP, który pozwala kontrolować i monitorować, skąd mogą być ładowane zasoby na stronę. Użycie tego nagłówka to jeden z najlepszych sposobów zapobiegania podatnościom typu cross-site scripting (XSS). Ponieważ wdrożenie CSP na wszystkich istniejących stronach bywa trudne, CSP jest obowiązkowe dla wszystkich nowych serwisów, a na istniejących stronach wysokiego ryzyka zdecydowanie zaleca się jego wdrożenie.

Największą korzyścią z CSP jest wyłączenie niebezpiecznego JavaScriptu inline. JavaScript inline oznacza, że dane wprowadzone błędnie przez użytkowników mogą wygenerować kod, który przeglądarka zinterpretuje jako JavaScript. Wyłączając JavaScript inline za pomocą CSP, skutecznie eliminujesz niemal wszystkie ataki XSS na swoją stronę.

To skrót od Immediately-Invoked Function Expression. Ten wzorzec jest często stosowany, żeby nie zaśmiecać globalnej przestrzeni nazw, ponieważ wszystkie zmienne używane wewnątrz IIFE nie są widoczne poza jego zakresem.

Przykład z użyciem IIFE:

(Function IIFE () {

console.log ("Hello!");

}) ();

// "Hello!"

Błędy HTTP możesz obsłużyć, dołączając do żądania „catch”. Na przykład:

import {Injectable} from '@ angular / core';

import {Observable} from 'rxjs / Observable';

import {HttpClient} from '@ angular / common / http';

import 'rxjs / add / observable / throw';

@Injectable ()

export class Client {

constructor (

public http: HttpClient

) {}

public fetch () {

return this.http.post ('https://thisurliswrong123123.com ", {})

.catch ((err) => {

// Do messaging and error handling here

return Observable.throw (err)

});

}

}

Ten plik służy do podania opcji TypeScriptu używanych w projekcie Angulara.

{

"CompilerOptions" {

"Target": "es5",

"Module": "commonjs",

"ModuleResolution": "node",

"SourceMap": true,

"EmitDecoratorMetadata": true,

"ExperimentalDecorators": true,

"Lib": ["es2015", "dom"],

"NoImplicitAny": true,

"SuppressImplicitAnyIndexErrors": true

}

}

Każdy program składa się z komponentów. Każdy komponent to logiczna granica funkcjonalności aplikacji. Poniżej podajemy, z czego składa się komponent:

Class - To coś jak klasa w C czy Javie, składająca się z właściwości i metod

Metadata - Służy do dekorowania klasy i rozszerzania jej funkcjonalności

Template - Służy do zdefiniowania widoku HTML wyświetlanego w aplikacji

function functionName (name) {

this.name = name;

}

// Creating an object

var functionName = new functionName ("WTEN")

console.log (functionName.name) // WTEN

Jednym z głównych celów takich standardów jest zapewnienie zgodności międzyplatformowej i mniejszych rozmiarów plików. Standardy te mają oddzielić „treść” od „formatowania” dzięki zastosowaniu CSS. Ułatwia to utrzymanie i rozwój.

Trzy znaki równości oznaczają „równość bez koercji typów”. Przy potrójnym znaku równości wartości muszą być równe także co do typu.

== oznacza równe

=== oznacza dokładnie równe (wartość i typ)

0 == false // true

0 === false // false, because they are of a different type

1 == "1" // true, auto type coercion

1 === "1" // false, because they are of a different type