Разрешается выполнять задание на React или Angular, если вы не знаете Vue, во всех других случаях использование Vue предпочтительно. Использование TypeScript или других компилируемых в JS языков нежелательно.
Репозиторий с решением тестового задания должен состоять только из содержимого папки exam/ c самим решением.
Создать одностраничное приложение (SPA) по макету:
Приложение должно получать данные из RSS-ленты REG.RU, иметь возможность поиска по новостям, постраничный вывод, а также возможность показать все новости сразу.
Заголовок каждой новости и краткий текст, ограниченный одним абзацем либо 50 символами первого абзаца с вырезанной разметкой, должны распологаться в отдельной плитке.
Размер плитки подбирается исполнителем, но должен быть одинаковым для всех.
Расстояние между плитками не имеет значения. Можно делать вообще без паддинга, важно лишь его соблюдение.
Каждая плитка должна быть ссылкой или содержать ссылку на соответствующую статью, которая должна открываться по клику. Помните о том, что вы делаете SPA
На одной странице должно быть расположено не более 12 плиток при постраничном выводе, либо все - в противном случае.
Вёрстка должна быть семантичной, кроссбраузерной, адаптивной
Список поддеживаемых браузеров
"browserslist": [
"> 1% in RU",
"ie >= 11"
]Заготовка приложения находится в папке exam
Плитки должны распологаться в 3 столбца.
Плитки должны распологаться в 2 столбца.
Плитки должны распологаться в один столбец шириной во всесь экран.
npm i
npm startВ качестве источника данных использовать RSS-ленту новостей REG.RU
Источник данных считать недоверенным (untrusted)
Для успешного выполнения задания необходимо использовать:
- webpack >= 2
- Vue >= 2
- Vue-Router
- БЭМ
Дополнительный плюс за использование:
Внимание! Запрещается использовать CSS-фреймворки, прочие UI-фреймворки с готовыми компонентами. Мы хотим оценить ваше знание CSS.
Все остальные библиотеки -- на усмотрение исполнителя.
Для вашего удобства мы уже настроили babel c предустановленным пресетом env
Для асинхронной загрузки компонентов подключен плагин syntax-dynamic-import, но это не входит в обязательную программу.
Для разработки и проверки залания используется webpack-dev-server
"host": "localhost",
"port": 9000Файл index.html формируется динамически с помощью html-webpack-plugin и html-webpack-template. В него уже включен минимальный набор блоков и правил:
<div id="app"></div>, в который встраивается приложение<meta content="ie=edge" http-equiv="x-ua-compatible"><meta content="width=device-width, initial-scale=1" name="viewport">
Для большей кастомизации можно использовать опции из html-webpack-template или создать собственный шаблон.
Правильность исполнения, лаконичность и красота кода превалирует над внешним видом страницы.
Ожидаемое суммарное время выполнения задания -- в пределах четырех часов. Если вы легко уложились, нашли задание слишком простым и хотите продемонстрировать что-то ещё -- предлагайте доработки с оценкой времени, которое потребуется на их реализацию. Также в этом случае мы готовы рассмотреть вопрос оплаты времени, затраченного на доработки.