​Подход «Pixel Perfect»

Pixel Perfect — это подход в вёрстке, когда итоговый результат максимально точно, пиксель в пиксель, совпадает с дизайнерским макетом. Для этого макет сайта сохраняется как обычная картинка, после чего эта картинка накладывается поверх свёрстанного сайта при помощи специальных инструментов, например, браузерных расширений.

Есть несколько способов, как можно найти визуальные отличия.

1. Сравнение скриншота и макета. Можно сделать скриншот сайта и загрузить в графический редактор, после чего сравнить скриншот и исходный макет в режиме наложения. Это удобно для дизайнеров. Но весьма неудобно для разработчика, потому что после каждого минимального изменения придётся делать новый скриншот и заменять им старый.

2. Добавление картинки макета на страницу. Можно сохранить макет картинкой, добавить её в документ с помощью тега <img> и разместить в центре страницы. После чего можно изменить прозрачность картинки с помощью opacity, и отличия сразу будут видны.

3. Браузерные расширения. У предыдущего способа есть важный недостаток — нужно на каждую страницу сначала добавить картинку, затем написать для неё стили, а в конце не забыть её удалить. Браузерные расширения, такие как PerfectPixel, берут эту рутину на себя.

👉 @frontendInterview

👉 @frontendInterview

JavaScript. Дополнительные уроки для начинающих (2022)

В книге 20 иллюстрированных уроков, более 20 практических упражнений на тему программирования веб-сценариев и 18 заданий для самостоятельной работы. Простым языком, кратко, наглядно рассказано о новых программных инструмен­тах, появившихся в последние годы в языке JavaScript.

👉 @frontendInterview

Определите дату по номеру дня

Напишите функцию, которая принимает номер дня и булевый аргумент isLeap, который определяет, високосный ли год.
Функция должна вернуть дату в строковом формате

Примеры:

 getDay(41, false)   =>  "February, 10" 
 getDay(60, false)   =>  "March, 1"

👉 @frontendInterview

Протокол HTTP

HTTP был разработан как протокол обмена данными между веб-сервером и веб-браузером.

Есть три главных объекта, которые обмениваются сообщениями:

- Клиент (user agent) — программа, которая отправляет запросы, получает и обрабатывает ответы от имени пользователя на устройстве пользователя, например, браузер.
- Сервер (веб-сервер) — программа, которая работает на сервере, принимает и обрабатывает запросы от клиента, а затем отправляет ответы клиенту. Этой программой является веб-сервер.
- Прокси (прокси-сервер) — программа, которая работает на сервере, пропускает через себя запросы и ответы и выступает в роли посредника между клиентом и сервером.

👉 @frontendInterview

👉 @frontendInterview

clip

С помощью свойства clip можно обрезать элемент, оставив видимой только его часть.

Возьмём изображение симпатичного домика и при помощи свойства clip обрежем часть картинки:
img {
clip: rect(auto 220px 150px auto);
}

👉 @frontendInterview

👉 @frontendInterview

Как устроен Dockerfile

Dockerfile — это текстовый файл, в котором описан рецепт создания образа Docker.

Docker умеет создать идентичные условия работы приложения, независимо от операционных систем и установленных служб на компьютере разработчика и на сервере. Для этого используется концепция контейнера. Прототипом контейнера является образ, в Dockerfile описывают процесс его создания в виде набора инструкций.

Инструкции записываются построчно. На первом месте указывается команда для Docker, которую нужно выполнить, а затем — список аргументов этой команды:

# Comment
INSTRUCTION arguments

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

Mark Myers «A Smarter Way to Learn JavaScript»

На русском языке книга не издавалась, но за рубежом считается одной из лучших. Рассказ начинается с описания элементарных вещей и постепенно переходит к рассмотрению различных приемов программирования, поэтому ей пользуются и новички, и профессионалы.

👉 @frontendInterview

Arrays Similar

Создайте функцию, которая принимает два массива и определяют одинаковые ли они. Одинаковые - значит что у них одинаковые элементы и одинаковое количество элементов.

Примеры:
const arr1 = [1, 2, 2, 3, 4],
arr2 = [2, 1, 2, 4, 3],
arr3 = [1, 2, 3, 4],
arr4 = [1, 2, 3, "4"]

arraysSimilar(arr1, arr2);
// Should equal true

arraysSimilar(arr2, arr3);
// Should equal false

arraysSimilar(arr3, arr4);
// Should equal false

👉 @frontendInterview

Как работают веб-приложения?

Веб-приложения, которыми мы пользуемся каждый день, хоть и сильно отличаются под капотом, на высоком уровне по большей части похожи.

Любое веб-приложение, если оно работает в браузере, работает на 3 основных технологиях: HTML, CSS и JS. Ещё есть WASM, но о нём в этой статье мы говорить не будем.
Все приложения, которыми вы пользуетесь в браузере: GoogleDocs, Notion, Яндекс.Карты, Spotify, YouTube — сделаны с помощью этих технологий.
Но любое сложное приложение — это не только картинка в браузере, это ещё и данные, которые пользователи используют или создают. Эти данные нужно уметь хранить, обрабатывать и выводить.
Хранением и обработкой данных обычно занимается сервер или бэкенд.
Бэкенд — область веб-технологий, работающих на сервере, а также внутренняя часть серверной системы, занимается обработкой данных.
А архитектура, в которой участвуют сервер (бэкенд) и клиент (браузер, фронтенд) называется клиент-серверной.

👉 @frontendInterview

👉 @frontendInterview