tgoop.com »
United States »
Frontend Interview - собеседования по Javascript / Html / Css » Telegram Web
This media is not supported in your browser
VIEW IN TELEGRAM
Слайдер
Слайдер или слайд-шоу — распространённый дизайнерский паттерн на сайтах, особенно на лендингах. Слайдер состоит из нескольких слайдов, обычно с изображениями или с видео-контентом. Между слайдами можно переключаться, также бывают варианты с автоматической прокруткой и кнопками для управления анимацией.
Слайдер — неоднозначный элемент. С одной стороны, он экономит место на странице, вмещает больше контента за счёт прокрутки, а ещё привлекает внимание. С другой — его сложно сделать удобным и доступным для всех пользователей.
В этом рецепте расскажем, как создать доступный слайдер, в котором подумаем про дизайн и учтём семантику.
👉 @frontendInterview
Слайдер или слайд-шоу — распространённый дизайнерский паттерн на сайтах, особенно на лендингах. Слайдер состоит из нескольких слайдов, обычно с изображениями или с видео-контентом. Между слайдами можно переключаться, также бывают варианты с автоматической прокруткой и кнопками для управления анимацией.
Слайдер — неоднозначный элемент. С одной стороны, он экономит место на странице, вмещает больше контента за счёт прокрутки, а ещё привлекает внимание. С другой — его сложно сделать удобным и доступным для всех пользователей.
В этом рецепте расскажем, как создать доступный слайдер, в котором подумаем про дизайн и учтём семантику.
👉 @frontendInterview
Плюшки к зарплате: где место бонусов в ИТ и почему это боль HR
Отрасль ИТ, кажется, лидирует по объему дополнительных плюшек, которые предлагают работодатели, нанимая очередного сениора. ДМС зачастую со стоматологией, программы обновления рабочих мест, компенсации занятий спортом, конференции и корпоративное обучение — все предоставляется за счет работодателя.
Красота, правда? Или ловушка, в которую рынок загнал себя сам?
Талантливые разработчики не прибегают в компанию сами только лишь ради ДМС‑а, а отвечая на опросы, указывают, что место плюшек где‑то в конце их списка приоритетов. Но компании настолько задрали планку ожиданий у кандидатов, что теперь так просто даже неиспользуемые HR‑программы не отменишь.
В этой статье — немного о том, почему плюшки это больно и непонятно. А еще о том, какой путь для себя нашли мы.
👉 @frontendInterview
Отрасль ИТ, кажется, лидирует по объему дополнительных плюшек, которые предлагают работодатели, нанимая очередного сениора. ДМС зачастую со стоматологией, программы обновления рабочих мест, компенсации занятий спортом, конференции и корпоративное обучение — все предоставляется за счет работодателя.
Красота, правда? Или ловушка, в которую рынок загнал себя сам?
Талантливые разработчики не прибегают в компанию сами только лишь ради ДМС‑а, а отвечая на опросы, указывают, что место плюшек где‑то в конце их списка приоритетов. Но компании настолько задрали планку ожиданий у кандидатов, что теперь так просто даже неиспользуемые HR‑программы не отменишь.
В этой статье — немного о том, почему плюшки это больно и непонятно. А еще о том, какой путь для себя нашли мы.
👉 @frontendInterview
Какое из следующих преимуществ НЕ является ключевым преимуществом использования чанков в Webpack?
Anonymous Quiz
6%
Ускорение загрузки приложения
26%
Уменьшение количества запросов к серверу
51%
Поддержка TypeScript
9%
Более эффективное использование кэша браузера
8%
Параллельная загрузка файлов
Для чего нужны альтернативные описания к картинкам и как они влияют на доступность и поисковую оптимизацию?
alt — один из атрибутов тега <img> в HTML. Он передаёт текстовую информацию о картинке, когда она не отображается на сайте. Например, у пользователя нестабильное интернет-соединение или выключено отображение картинок в браузере.
По сути alt — это альтернативное текстовое описание содержания изображения. Отсюда и название атрибута – сокращение от «alternative».
Нет ничего плохого в пустом alt, если у изображения нет смыслового значения. Пропустить alt можно в нескольких случаях:
- аватарка — имя пользователя и так у нас уже есть;
- превью к статье — уже есть заголовок, и этого будет достаточно;
- иконки в кнопке — есть видимое или скрытое название кнопки.
В атрибут alt добавляют текстовый эквивалент того, что происходит на картинке. Ответьте на вопрос, что происходит на картинке или какое у неё назначение. Хорошо, если передадите и эмоции.
Отталкивайтесь от остального содержимого страницы, но не повторяйте один текст. Допускаются ключевые слова из <h1> или title страницы, когда они поддерживают описание картинки и смотрятся органично. Следите за количеством ключевых слов и случайно не превратите описание в цепочку из них.
Следите за правилами языка описания (пунктуацией, орфографией и другими) и не начинайте описание картинки со слов «картинка», «графика» или «изображение».
Длина текста описания не меньше 3–4 слов и не больше 250 символов с пробелами. Оптимальный вариант – 5-6 слов. Максимальная рекомендуемая длина — 125 символов. Один из самых популярных скринридеров JAWS не любит длинные строки. Он может зачитать их как три картинки, хотя это было всего лишь одна длинная строка.
👉 @frontendInterview
alt — один из атрибутов тега <img> в HTML. Он передаёт текстовую информацию о картинке, когда она не отображается на сайте. Например, у пользователя нестабильное интернет-соединение или выключено отображение картинок в браузере.
По сути alt — это альтернативное текстовое описание содержания изображения. Отсюда и название атрибута – сокращение от «alternative».
<img
src="dog.png"
alt="Шоколадный лабрадор в соломенной шляпе наслаждается
солнечной погодой на пляже. Рядом лежит кокос с трубочкой
и миска с собачьим кормом."
>
<a>
<img src="link-icon.svg" alt="Инструкция по заполнению профиля">
</a>
Нет ничего плохого в пустом alt, если у изображения нет смыслового значения. Пропустить alt можно в нескольких случаях:
- аватарка — имя пользователя и так у нас уже есть;
- превью к статье — уже есть заголовок, и этого будет достаточно;
- иконки в кнопке — есть видимое или скрытое название кнопки.
В атрибут alt добавляют текстовый эквивалент того, что происходит на картинке. Ответьте на вопрос, что происходит на картинке или какое у неё назначение. Хорошо, если передадите и эмоции.
Отталкивайтесь от остального содержимого страницы, но не повторяйте один текст. Допускаются ключевые слова из <h1> или title страницы, когда они поддерживают описание картинки и смотрятся органично. Следите за количеством ключевых слов и случайно не превратите описание в цепочку из них.
Следите за правилами языка описания (пунктуацией, орфографией и другими) и не начинайте описание картинки со слов «картинка», «графика» или «изображение».
Длина текста описания не меньше 3–4 слов и не больше 250 символов с пробелами. Оптимальный вариант – 5-6 слов. Максимальная рекомендуемая длина — 125 символов. Один из самых популярных скринридеров JAWS не любит длинные строки. Он может зачитать их как три картинки, хотя это было всего лишь одна длинная строка.
👉 @frontendInterview
Программирование без дураков
Хотите научиться программировать "less wrong"? Тогда эта книга - для вас. Ведь программирование - это во многом коммуникация. Стиль программирования, именование, комментирование, работа с чужим кодом - зачастую соглашения складываются именно там, где строгая регламентация на уровне языка программирования отсутствует.
👉 @frontendInterview
Хотите научиться программировать "less wrong"? Тогда эта книга - для вас. Ведь программирование - это во многом коммуникация. Стиль программирования, именование, комментирование, работа с чужим кодом - зачастую соглашения складываются именно там, где строгая регламентация на уровне языка программирования отсутствует.
👉 @frontendInterview
Rot13
ROT13 — это простой шифр замены букв, который заменяет букву буквой, находящейся через 13 букв после нее в алфавите. ROT13 — пример шифра Цезаря.
Создайте функцию, которая принимает строку и возвращает строку, зашифрованную с помощью Rot13. Если в строку включены цифры или специальные символы, их следует вернуть в исходном виде. Смещать следует только буквы латинского/английского алфавита, как в оригинальной «реализации» Rot13
Пример:
👉 @frontendInterview
ROT13 — это простой шифр замены букв, который заменяет букву буквой, находящейся через 13 букв после нее в алфавите. ROT13 — пример шифра Цезаря.
Создайте функцию, которая принимает строку и возвращает строку, зашифрованную с помощью Rot13. Если в строку включены цифры или специальные символы, их следует вернуть в исходном виде. Смещать следует только буквы латинского/английского алфавита, как в оригинальной «реализации» Rot13
Пример:
"test" // "grfg"
👉 @frontendInterview
Для чего нужен cors ?
CORS (Cross-Origin Resource Sharing) — это механизм безопасности, который позволяет ограничивать или разрешать доступ веб-ресурсов из одного домена к ресурсам на другом домене. Он был введен для решения проблем, связанных с политикой одного источника (Same-Origin Policy), которая предотвращает взаимодействие между ресурсами из разных источников, чтобы защитить данные от межсайтовых атак.
Основные задачи
1. CORS помогает предотвратить атаки, такие как XSS (Cross-Site Scripting) и CSRF (Cross-Site Request Forgery), ограничивая доступ к ресурсам на сервере только с доверенных доменов.
2. CORS позволяет легитимным веб-приложениям запрашивать ресурсы с других доменов. Это важно для современных веб-приложений, которые часто взаимодействуют с API и ресурсами, размещенными на разных серверах.
Как он работает
Добавляет новые HTTP-заголовки, которые позволяют серверу сообщать браузеру, разрешено ли выполнение кросс-доменных запросов.
HTTP-заголовки, используемые для CORS
Access-Control-Allow-Origin: Определяет, какие домены могут обращаться к ресурсам сервера.
Access-Control-Allow-Methods: Определяет, какие HTTP-методы (например, GET, POST, PUT, DELETE) разрешены для кросс-доменных запросов.
Access-Control-Allow-Headers: Определяет, какие заголовки могут быть использованы в кросс-доменных запросах.
Access-Control-Allow-Credentials: Указывает, разрешено ли отправлять куки и авторизационные данные вместе с запросом.
Access-Control-Max-Age: Указывает, как долго результаты проверки могут кэшироваться.
Процесс CORS-запроса
Простой запрос (Simple Request) - Запросы с методами GET, HEAD или POST и с ограниченным набором безопасных заголовков считаются простыми и обрабатываются напрямую.
Предварительный запрос (Preflight Request) - Для методов, отличных от GET, HEAD и POST (или если используются нестандартные заголовки), браузер сначала отправляет "предварительный" запрос с методом OPTIONS. Этот запрос проверяет, разрешен ли кросс-доменный доступ.
Если сервер разрешает запрос, он отвечает с соответствующими заголовками CORS. Только после этого браузер отправляет основной запрос.
👉 @frontendInterview
CORS (Cross-Origin Resource Sharing) — это механизм безопасности, который позволяет ограничивать или разрешать доступ веб-ресурсов из одного домена к ресурсам на другом домене. Он был введен для решения проблем, связанных с политикой одного источника (Same-Origin Policy), которая предотвращает взаимодействие между ресурсами из разных источников, чтобы защитить данные от межсайтовых атак.
Основные задачи
1. CORS помогает предотвратить атаки, такие как XSS (Cross-Site Scripting) и CSRF (Cross-Site Request Forgery), ограничивая доступ к ресурсам на сервере только с доверенных доменов.
2. CORS позволяет легитимным веб-приложениям запрашивать ресурсы с других доменов. Это важно для современных веб-приложений, которые часто взаимодействуют с API и ресурсами, размещенными на разных серверах.
Как он работает
Добавляет новые HTTP-заголовки, которые позволяют серверу сообщать браузеру, разрешено ли выполнение кросс-доменных запросов.
HTTP-заголовки, используемые для CORS
Access-Control-Allow-Origin: Определяет, какие домены могут обращаться к ресурсам сервера.
Access-Control-Allow-Methods: Определяет, какие HTTP-методы (например, GET, POST, PUT, DELETE) разрешены для кросс-доменных запросов.
Access-Control-Allow-Headers: Определяет, какие заголовки могут быть использованы в кросс-доменных запросах.
Access-Control-Allow-Credentials: Указывает, разрешено ли отправлять куки и авторизационные данные вместе с запросом.
Access-Control-Max-Age: Указывает, как долго результаты проверки могут кэшироваться.
Процесс CORS-запроса
Простой запрос (Simple Request) - Запросы с методами GET, HEAD или POST и с ограниченным набором безопасных заголовков считаются простыми и обрабатываются напрямую.
Предварительный запрос (Preflight Request) - Для методов, отличных от GET, HEAD и POST (или если используются нестандартные заголовки), браузер сначала отправляет "предварительный" запрос с методом OPTIONS. Этот запрос проверяет, разрешен ли кросс-доменный доступ.
Если сервер разрешает запрос, он отвечает с соответствующими заголовками CORS. Только после этого браузер отправляет основной запрос.
👉 @frontendInterview
Чем является глобальная функция 'setTimeout'?
Anonymous Quiz
63%
Часть Browser API
30%
Часть JavaScript
7%
Часть EcmaScript
1%
Сторонняя утилита
Мы перестали обращаться друг к другу по имени.
И это не единственная проблема рабочих коммуникаций в мессенджерах. Общаясь с коллегами и клиентами в чатах, мы часто не замечаем, как начинаем спамить не по теме или пишем после 9 вечера. Это особенно важно для команд, работающих на удаленке. В карточках Ася Маркевич, HRD Далее, рассказыает об этих ошибках и о том, как их исправить.
В канале Далее каждую неделю выходят полезные посты для эйчаров, айтишников, дизайнеров и менеджеров проектов в IT, а еще подборки крутых вакансий. Подписывайся, чтоб не пропустить!
#реклама
О рекламодателе
И это не единственная проблема рабочих коммуникаций в мессенджерах. Общаясь с коллегами и клиентами в чатах, мы часто не замечаем, как начинаем спамить не по теме или пишем после 9 вечера. Это особенно важно для команд, работающих на удаленке. В карточках Ася Маркевич, HRD Далее, рассказыает об этих ошибках и о том, как их исправить.
В канале Далее каждую неделю выходят полезные посты для эйчаров, айтишников, дизайнеров и менеджеров проектов в IT, а еще подборки крутых вакансий. Подписывайся, чтоб не пропустить!
#реклама
О рекламодателе