dmitri2205 / funbox

Квалификационные задания для разработчиков HTML/CSS/JS

Level 1: Q1: Расскажите, чем, на ваш взгляд, отличается хорошая верстка от плохой с точки зрения:

• пользователя
• менеджера проекта
• дизайнера
• верстальщика
• клиентского программиста
• серверного программиста

A1: 1.С точки зрения пользователя считаю качественной ту вёрстку,которая удовлетворяет стандартам UserXperience и Usability. Интерфейс должен быть по возможности максимально интуитивно понятен,всё должно быть в одном стиле,общая цветовая палитра и шрифты должны не быть слишком яркими,быть приятными глазу и легкочитаемыми.Так же основополагающим фактом можно выделить скорость загрузки страницы и стилей.Идеальное время открытия сайта/приложения должно составлять 1-2 секунды,для того,чтобы пользователи не покидали сайт из-за долгой загрузки контента. 2.Для менеджера проекта,предполагаю,хорошая вёрстка - это готовый продукт без ошибок и багов в продакшн сборке,в котором всё соответствует требованиям к данному проекту. 3.С точки зрения дизайнера считаю хорошей близкой к Pixel Perfect или же Pixel Perfect вёрстку,внимание к деталям в самой вёрстке и гибкость кода для возможности последующих изменений в проекте.Корректное отображение на разных устройствах и экранах. 4.С точки зрения верстальщика хорошей вёрсткой,по моему мнению,можно назвать красиво оформленный код и логически связанное с контентом именование классов секций/блоков/элементов,например по БЭМ-методологии,что упрощает понимание и восприятие кода,адаптивность и кросбраузерность. Комментарии в коде с пояснениями и в трудночитаемых(понимаемых) местах скриптов. 5.С точки зрения клиентского программиста,к хорошей вёрстке можно отнести те же требования что и для верстальщика,но так же добавить такие моменты как:комментарии в коде к особо тонким моментам(если требуется),семантически корректную разметку,а так же корректный и валидированный по W3C стандарту код разметки и стилей(WEB), возможно,дополнительную документацию по проекту в README(в зависимости от сложности проекта). 6.С точки зрения серверного программиста хорошей является вёрстка содержащая разделение логики работы и представления(например HTML отдельно\PHP отдельно),оформление кода и осмысленное использование CSS.

Q2:Опишите основные особенности верстки крупных многостраничных сайтов, дизайн которых может меняться в процессе реализации и поддержки. Расскажите о своем опыте верстки подобных сайтов: какие методологии, инструменты и технологии вы применяли на практике.

A2: Основным аспектом можно назвать саму архитектуру проекта,командное следование определёныым принципам разработки и единую систему сборки. Так же важным считаю использовать модульный или компонентный подход.Это повышает гибкость проекта в случае внесения изменений. Так же использование командой одного и того же препроцессора/конфигурации сборщика и т.д. Многостраничных проектов пока выполнять не доводилось.Для вёрстки использую Sublime Text3 + Emmet + BrowserSync + KOALA(+autoprefix) + SCSS\LESS + БЭМ + JS + github. Для SPA и PWA использую Vue/React + webpack(webpack autoprefix\sass(SCSS)) + babel + webpack-devserver + webpack-CLI + NPM + github.

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

A3: 1.Адаптивность/отзывчивость: Использование использование метатега vieport,использование медиазапросов или bootstrap,применение flexbox. 2.Использование вендорных префиксов для браузеров,или же автопрефиксов в сборщиках и компиляторах препроцессоров. 3.Проверка тегов и CSS свойств через ресурсы CanIUse или подобные.По возможности использовать только те,которые поддерживаются большинством браузеров. 4.Дополнительные скрипты для опрееления типа устройства и/или браузера. В больших проектах использую SublimeText 3 + BrowserSync + Emmet + KOALA + CSS/JS библиотеки + Git Kraken.

Проверял и тестировал через Chrome + Chrome Devtools + отладка по USB на своём мобильном устройстве через ADB(Android Debug Bridge) + FireFox + Opera.В ближайшее время планирую изучить JEST. Требовалась поддержка основных базовых устройств(Desktop/Tablet/Mobile/Mobile S).

Q4: Расскажите, какие инструменты помогают экономить время в процессе написания, проверки и отладки кода.

A4: Относительно простой вёрстки: 1.Emmet + emmet snippets. 2.SublimeText Browser sync(Аналог Gulp Watch или других). 3.KOALA compiller + KOALA debug 4.БЭМ. 5.Тестировка кода проходит вручную в основных браузерах(кроме Safari). Относительно SPA/PWA: 1.Babel/ESLint 2.Webpack(devserver,CLI) 3.React PropTypes(редкое использование), 4.LESS/SCSS. 5.Sublime Syntax+Syntax HighLight. 6.Vue/VueX devtools/React devtools. 7.Lighthouse. 8.Преимущественно Axios для запросов и API/REST API. Тесты провожу в 3х браузерах.

Q5: Вам нужно понять, почему страница отображается некорректно в Safari на iOS и в IE на Windows. Код писали не вы, доступа к исходникам у вас нет. Ваши действия? Сталкивались ли вы с подобными проблемами на практике?

A5: Просмотрю код через панель разработчика(F12 для Chrome),Сохраню файлы через Chrome DevTools.Так можно сохраить html и css/js файлы.Просто скопипастить код из просмотра кода страницы в файлы(Если сайт не на CMS.Имея доступ к CMS,её адрес можно найти через запросы в рзделе "Network" в DevTools Chrome). На данный момент мне не приходилось сталкиваться с такой ситуацией. Q6: Дизайнер отдал вам макет, в котором не показано, как должны выглядеть интерактивные элементы при наведении мыши. Ваши действия?

A6: Уточню у дизайнера,как должны выглядеть эти элементы и как они должны работать. Предложу дизайнеру своё решение. В противном случае,воспользуюсь примерами из других макетов или работ.Постараюсь примерно угадать с анимацией и эффектами сам.

Q7: Какие ресурсы вы используете для развития в профессиональной сфере? Приведите несколько конкретных примеров (сайты, блоги и так далее). Какое направление развития вам более близко: JS-программирование, HTML/CSSверстка или и то, и другое? Какие ещё области знаний, кроме тех, что непосредственно относятся к работе, вам интересны?

A7: Сайты:

• Habr
• developer.mozilla.org
• learn.javascript.ru
• htmlbook.ru
• ru.reactjs.org
• StackOwerflow
• документация к конкретному инструменту\библиотеке\фрэймворку

Каналы и паблики:

• TechRocks
• Типичный Верстальщик
• Love Frontend
• Senior Frontend
• For Web
• Code Blog(+ общий чат по JS)
• Web /> HTML CSS JavaScript
• Hexlet(+подкасты)
• Веб-стандарты подкаст
• Журнал "КОД"
• Яндекс для разработчиков

YouTube каналы:

• Владилен Минин
• LoftBlog
• WebDev

Оба направления считаю интересными,но больше нравится программировть на JS.Предпочитаю писать на React.js.Близка концепция данной библиотеки,подход к написанию(JSX) кода и возможности. Планирую изучить более низкоуровневые языки(C,Java,Pyton).Хотелось бы создавать полезные для людей приложения или программы,именно по этому я начал с web-разработки.

Q8: Расскажите нам о себе и предоставьте несколько ссылок на последние работы, выполненные вами.

A8:

В свободное время стараюсь изучать новые инструменты\библиотеки\фрэймворки для front-end разработки,играю на гитаре(когда-то была своя группа),люблю комедию и стендапы. Переодически паяю какую-нибудь электрику или ремонтирую электронику друзей и знакомых.Пытаюсь освоить Kali Linux и основы информационной безопасности как хобби или в свободное время припровождения.

Примеры моих работ и дополнительную информацию обо мне вы можете найти в моём портфолио: https://dmitri2205.github.io/Portfolio/