
HTML *
Стандартный язык разметки web-страниц
Как стать фронтенд-разработчиком? Пошаговый гид в мир фронтенда

Приветствую всех! Меня зовут Пучнина Анастасия, я ведущий разработчик в компании ДомКлик, занимаюсь фронтендом Витрины объявлений. Сегодня я хотела бы поделиться с вами своим мнением на тему того, что важно знать фронтенд-разработчику. Эта статья будет полезна тем, кто только начинает свой путь в разработке, или имеет опыт программирования в другой области и решил перейти на сторону фронтенда.
Содержание:
- Кто такой фронтендер и чем он занимается?
- С чего начать и что читать? Чек-лист обучения
- Какие трудности могут быть? Ошибки в начале пути
- Подготовка к собеседованию на Junior-разработчика
Дайджест свежих материалов из мира фронтенда за последнюю неделю №439 (26 — 31 октября 2020)

Решение проблемы обеспечения доступности модального окна для людей с ограниченными возможностями
В этой статье я бы хотел рассказать как реализовать доступное модальное окно, без использования атрибута «aria-modal».
Как я IF на Twine писал

Началось все пять месяцев назад, когда мне предложили сделать IF-игру.
Задавать Height и Width для изображений снова важно

Сторонники веб-оптимизаций часто советуют добавлять к изображениям атрибуты с размерами, что позволяет при отрисовке страницы оставлять нужное количество пространства ещё до загрузки самого изображения. Это позволяет избежать смещения раскладки страницы по мере загрузки изображений - что с недавних пор начал измерять Chrome в новой метрике Cumulative Layout Shift (CLS).
Секрет, не так хорошо известный разработчикам, не являющимся заядлыми сторонниками веб-производительности, заключается в том, что до недавнего времени, как мы увидим в статье, во многих случаях это фактически не имело особого смысла. Однако, недавние изменения в мире CSS и их быстрое внедрение в браузерах снова делает добавление атрибутов width и height к тегу <img> полезным.
Помогаем пользователям менять пароли с помощью well-known URL
Привет!
Делимся переводом небольшой, но полезной статьи о том, как упростить процесс обновления данных для аутентификации.
Установите редирект со страницы /.well-known/change-password на страницу смены пароля для вашего сайта. Благодаря этому, менеджеры паролей смогут направлять пользователей прямо на данную страницу.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №438 (19 — 25 октября 2020)

Элементарный автоматический слайдер на основе библиотеки RevolveR: 10 строчек кода

Дайджест свежих материалов из мира фронтенда за последнюю неделю №437 (12 — 18 октября 2020)

Динамическое меню c поддержкой touch move и mouse move на RevolveR
В этой статье я расскажу как просто и непринужденно можно создавать линейные динамические меню поддерживающие не только события мыши, но и поинтеры для мобильных версий.
И так: Simple Dynamic Menu by RevolveR Labs.

10 современных раскладок в одну строку CSS-кода
В данной статье рассматривается несколько эффективных строк CSS-кода, которые выполняют серьезную работу и помогают создавать надёжную современную разметку.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №436 (5 — 11 октября 2020)

Ближайшие события
Создание favicon для сайта 2020
Что такое favicon и для чего он нужен?
Favicon – это значок (иконка), который отображается во вкладке браузера, закладках, а также в сниппетах результатов поиска.

Favicon играет важную роль в веб-приложениях. Он может улучшить внешний вид сайта в выдаче, повышает узнаваемость вашего сайта, помогает пользователю быстро найти необходимую страницу в закладках и вкладках.
Кроме того, пользователь может добавить страницу вашего сайта на главный экран телефона или сохранить как веб-приложение. В таком случае с помощью favicon можно быстро найти сайт среди большого количества других приложений.
Какой формат использовать для favicon?
Раньше в качестве основного формата использовали ICO. Особенность данного формата – мульти-размерность. Данный файл может хранить в себе несколько размеров иконки. На смену ICO пришел формат PNG. ICO все еще поддерживаемый, но большинство современных браузеров выбирают PNG формат иконки, который легче. Некоторые браузеры не могут выбрать правильный значок в файле ICO, что приводит к неправильному использования значка с низким разрешением.
О каких платформах пойдет речь в этой статье?
- Десктопные браузеры
- Chrome на Android
- Иконка закладки в iOS (PWA)
- macOS
- Windows
Дайджест свежих материалов из мира фронтенда за последнюю неделю №435 (28 сентября — 4 октября 2020)

Вы не знаете как должны работать модальные окна
Уверен, многие хоть раз создавали всплывающее модальное окно. Но задумывались ли вы об определении этого компонента? Как он должен работать?
В этом материале я постарался собрать максимально полный свод правил, рекомендаций и примеров реализации по которым модальные окна должны работать.
Я покажу, как просто создавать сложные, удобные, производительные и доступные модальные окна независимо от браузера, платформы, устройства или способа взаимодействия пользователя.
Этот список сформирован на основе спецификаций WAI-ARIA, HTML Living Standard и моего личного опыта. И хотя я буду говорить про веб, большинство правил и рекомендаций применимы для модальных окон где угодно.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №434 (21 — 27 сентября 2020)

Дайджест свежих материалов из мира фронтенда за последнюю неделю №433 (14 — 20 сентября 2020)

Делаем модальные окна для сайта. Заботимся об удобстве и доступности
Я занимаюсь вёрсткой и программированием сайтов. Почти в каждом макете, который я верстал, были модальные окна. Обычно это формы заказа звонка в лендингах, уведомления о завершении каких-то процессов, или сообщения об ошибках.
Вёрстка таких окон сначала кажется простой задачей. Модальные окна можно сделать даже без помощи JS только лишь с помощью CSS, но на практике они оказываются неудобными, и из-за маленьких недочетов модальные окна раздражают посетителей сайта.
В итоге было задумано сделать собственное простое решение.

HTML и CSS ошибки, которые я встречаю как человек без ограничений по здоровью
Сейчас много шума по поводу доступности интерфейсов. Здорово, что люди обращают на это внимание и начинают разрабатывать интерфейсы, которыми могут пользоваться люди с какими-то ограничениями.
Но мы забываем про людей, у которых нет ограничений по здоровью. У них также есть право пользоваться интерфейсами так, как им удобно. Поэтому я хочу рассказать про несколько случаев, когда я встречаю недоступные интерфейсы, как человек без ограничений по здоровью.
Вклад авторов
alexzfort 6864.0melnik909 1568.0ilusha_sergeevich 1448.2kichik 754.8TheShock 613.0ru_vds 581.0Paul_King 421.0krovatti 397.0Bright_Translate 377.6
