Telegram Web
Выведет ли TypeScript компилятор ошибку?
Anonymous Quiz
53%
Да
47%
Нет
This media is not supported in your browser
VIEW IN TELEGRAM
Слайдер

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

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

В этом рецепте расскажем, как создать доступный слайдер, в котором подумаем про дизайн и учтём семантику.

👉 @frontendInterview
Плюшки к зарплате: где место бонусов в ИТ и почему это боль HR

Отрасль ИТ, кажется, лидирует по объему дополнительных плюшек, которые предлагают работодатели, нанимая очередного сениора. ДМС зачастую со стоматологией, программы обновления рабочих мест, компенсации занятий спортом, конференции и корпоративное обучение — все предоставляется за счет работодателя.

Красота, правда? Или ловушка, в которую рынок загнал себя сам?

Талантливые разработчики не прибегают в компанию сами только лишь ради ДМС‑а, а отвечая на опросы, указывают, что место плюшек где‑то в конце их списка приоритетов. Но компании настолько задрали планку ожиданий у кандидатов, что теперь так просто даже неиспользуемые HR‑программы не отменишь.

В этой статье — немного о том, почему плюшки это больно и непонятно. А еще о том, какой путь для себя нашли мы.

👉 @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
Rot13

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
Мы перестали обращаться друг к другу по имени.

И это не единственная проблема рабочих коммуникаций в мессенджерах. Общаясь с коллегами и клиентами в чатах, мы часто не замечаем, как начинаем спамить не по теме или пишем после 9 вечера. Это особенно важно для команд, работающих на удаленке. В карточках Ася Маркевич, HRD Далее, рассказыает об этих ошибках и о том, как их исправить. 

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

#реклама
О рекламодателе
2025/07/07 22:26:14
Back to Top
HTML Embed Code: