1. Опишите одну вещь, которую вы узнали сегодня на уроке.

Я узнал о том, что такое Javascript и DOM (объектная модель документа). Наряду с HTML и CSS, JavaScript является одной из трех основных технологий Всемирной паутины. JavaScript обеспечивает интерактивные веб-страницы и, таким образом, является неотъемлемой частью веб-приложений. Объектная модель документа (DOM) — это программный интерфейс для документов HTML и XML. Он представляет страницу, чтобы программы могли изменять структуру, стиль и содержимое документа. DOM представляет документ в виде узлов и объектов.

2. Опишите разницу между cookie, sessionStorage и localStorage.

Это чрезвычайно широкий вопрос, и многие плюсы и минусы будут зависеть от ситуации.

Во всех случаях эти механизмы хранения будут специфичны для отдельного браузера на отдельном компьютере/устройстве. Любые требования к постоянному хранению данных между сеансами должны включать сторону вашего сервера приложений — скорее всего, с использованием базы данных, но, возможно, XML или текстового/CSV-файла.

localStorage, sessionStorage и файлы cookie — все это клиентские решения для хранения данных. Данные сеанса хранятся на сервере, где они остаются под вашим непосредственным контролем.

localStorage и sessionStorage

localStorage и sessionStorage — относительно новые API (это означает, что не все устаревшие браузеры будут их поддерживать) и практически идентичны (как по API, так и по возможностям) за единственным исключением — постоянство. sessionStorage (как следует из названия) доступен только на время сеанса браузера (и удаляется при закрытии вкладки или окна) — однако он сохраняется после перезагрузки страницы (источник Руководство по хранению DOM — Mozilla Developer Network) .

Очевидно, что если данные, которые вы храните, должны быть доступны на постоянной основе, тогда localStorage предпочтительнее, чем sessionStorage — хотя вы должны отметить, что оба могут быть очищены пользователем, поэтому вам не следует полагаться на постоянное существование данных в любом случае.

localStorage и sessionStorage идеально подходят для сохранения неконфиденциальных данных, необходимых в клиентских скриптах, между страницами (например: предпочтения, очки в играх). Данные, хранящиеся в localStorage и sessionStorage, могут быть легко прочитаны или изменены из клиента/браузера, поэтому не следует полагаться на них для хранения конфиденциальных или связанных с безопасностью данных в приложениях.

Файлы cookie

Это также верно для файлов cookie, они могут быть тривиально изменены пользователем, и данные также могут быть прочитаны из них в виде обычного текста — поэтому, если вы хотите сохранить конфиденциальные данные, сеанс — действительно ваш единственный вариант. Если вы не используете SSL, информация из файлов cookie также может быть перехвачена при передаче, особенно при открытом Wi-Fi.

С положительной стороны, файлы cookie могут иметь определенную степень защиты от угроз безопасности, таких как межсайтовый скриптинг (XSS)/внедрение скрипта, путем установки флага только HTTP, что означает, что современные (поддерживающие) браузеры предотвратят доступ к файлам cookie и значениям из JavaScript ( это также предотвратит доступ к ним вашего собственного законного JavaScript). Это особенно важно для файлов cookie аутентификации, которые используются для хранения токена, содержащего сведения о вошедшем в систему пользователе. Если у вас есть копия этого файла cookie, то во всех смыслах и целях вы становитесь этим пользователем. что касается веб-приложения, и иметь такой же доступ к данным и функциям, что и пользователь.

Поскольку файлы cookie используются для проверки подлинности и сохранения пользовательских данных, все файлы cookie, действительные для страницы, отправляются из браузера на сервер для каждого запроса к одному и тому же домену — это включает исходный запрос страницы, любые последующие запросы Ajax, все изображения, таблицы стилей, скрипты и шрифты. По этой причине файлы cookie не следует использовать для хранения больших объемов информации. Браузер также может устанавливать ограничения на размер информации, которая может храниться в файлах cookie. Обычно файлы cookie используются для хранения идентифицирующих токенов для аутентификации, сеанса и отслеживания рекламы. Токены, как правило, сами по себе не являются удобочитаемой информацией, а являются зашифрованными идентификаторами, связанными с вашим приложением или базой данных.

localStorage, sessionStorage и файлы cookie

Что касается возможностей, файлы cookie, sessionStorage и localStorage позволяют хранить только строки — возможно неявное преобразование примитивных значений при настройке (их нужно будет преобразовать обратно, чтобы использовать их в качестве типа после чтения), но не объекты или массивы. (их можно сериализовать в формате JSON для хранения с помощью API). Хранилище сеансов, как правило, позволяет хранить любые примитивы или объекты, поддерживаемые вашим языком/платформой на стороне сервера.

На стороне клиента и на стороне сервера

Поскольку HTTP является протоколом без сохранения состояния — веб-приложения не имеют возможности идентифицировать пользователя по предыдущим посещениям при возвращении на веб-сайт — данные сеанса обычно основаны на токене cookie для идентификации пользователя для повторных посещений (хотя редко параметры URL могут использоваться для та же цель). Данные обычно имеют скользящий срок действия (обновляется каждый раз, когда пользователь посещает), и в зависимости от вашего сервера/фреймворка данные будут либо храниться в процессе (это означает, что данные будут потеряны в случае сбоя или перезапуска веб-сервера), либо извне в сервер состояния или база данных. Это также необходимо при использовании веб-фермы (более одного сервера для данного веб-сайта).

Поскольку данные сеанса полностью контролируются вашим приложением (на стороне сервера), это лучшее место для чего-либо конфиденциального или безопасного в природе.

Очевидным недостатком данных на стороне сервера является масштабируемость — ресурсы сервера требуются для каждого пользователя на время сеанса, и что любые данные, необходимые стороне клиента, должны отправляться с каждым запросом. Поскольку сервер не может узнать, переходит ли пользователь на другой сайт или закрывает свой браузер, данные сеанса должны истечь через определенное время, чтобы избежать использования всех ресурсов сервера заброшенными сеансами. Поэтому при использовании данных сеанса следует помнить о возможности истечения срока действия данных и их потери, особенно на страницах с длинными формами. Он также будет потерян, если пользователь удалит свои файлы cookie или переключит браузер/устройство.

Некоторые веб-фреймворки/разработчики используют скрытые входные данные HTML для сохранения данных с одной страницы формы на другую, чтобы избежать истечения срока действия сеанса.

localStorage, sessionStorage и файлы cookie подчиняются правилам «одного и того же происхождения», что означает, что браузеры должны запрещать доступ к данным, кроме домена, который устанавливает информацию для начала.

Ссылка: https://stackoverflow.com/questions/19867599/what-is-the-difference-between-localstorage-sessionsstore-session-and-cookies

3. На что следует обратить внимание при проектировании или разработке многоязычных сайтов?

Используйте атрибут lang в своем HTML.

- Направление пользователей на их родной язык — Позвольте пользователю легко и без проблем изменить свою страну/язык.

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

- Ограничение длины слов/предложений — некоторый контент может быть длиннее, если он написан на другом языке. Будьте осторожны с макетом или проблемами переполнения в дизайне. Лучше избегать дизайна, где количество текста может создать или разрушить дизайн. Количество символов влияет на такие вещи, как заголовки, метки и кнопки. Они менее проблематичны со свободным текстом, таким как основной текст или комментарии.

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

- Форматирование дат и валют — Календарные даты иногда представлены по-разному. Например. «31 мая 2012 г.» в США и «31 мая 2012 г.» в некоторых частях Европы.

- Не объединяйте переведенные строки — Не делайте ничего похожего на "The date today is " + date. Это сломается в языках с другим порядком слов. Вместо этого используйте строку шаблона с подстановкой параметров для каждого языка. Например, посмотрите на следующие два предложения на английском и китайском языках соответственно: I will travel on {% date %} и {% date %} 我会出发. Обратите внимание, что положение переменной отличается из-за правил грамматики языка.

- Языковое направление чтения — в английском мы читаем слева направо, сверху вниз, в традиционном японском текст читается сверху вниз, справа налево.

Ссылка: https://github.com/yangshun/front-end-interview-handbook/blob/master/questions/html-questions.md#what-kind-of-things-must-you-be-wary-of -при-проектировании-или-разработке-для-многоязычных-сайтов

4. Как вы обслуживаете страницу с контентом на нескольких языках?

Чтобы обслуживать страницу с контентом на нескольких языках, нужно выполнить четыре шага:

1. У вас должны быть переведенные/локализованные страницы на сервере для каждого языка, который вы собираетесь поддерживать.
2. Ваш сервер должен распознавать языковой запрос браузера.
3. Вы должны тщательно называть файлы для локализованных страниц, чтобы у сервера был систематический способ их обнаружения.
4. Вам нужен метод для обслуживания общей страницы, когда у вас нет запрошенного языка.

Ссылка: http://www.pro-tekconsulting.com/blog/how-do-you-serve-a-page-with-content-in-multiple-languages/