Frontend — минимум для верстальщика и Front-end а


Содержание

Frontender Magazine

На днях я подготовила README для одного проекта, который, надеюсь, будет интересен и поучителен для других разработчиков. Так вот, когда я его писала, я поняла, что несколько лет назад испугалась бы до смерти, если бы наткнулась на нечто подобное, со всякими упоминаниями о Node и его пакетном менеджере, системах Homebrew и Git, всевозможных тестах, тестовых и финальных сборках.

Когда-то основная часть рабочего процесса фронтенд-разработчика состояла в редактировании файлов, их локальном тестировании (в меру возможностей) и пересылке на сервер через FTP. Мы измеряли свою крутость умением подчинить своей воле IE6 или добиться пиксельного соответствия в различных браузерах. Многим членам нашего сообщества — и мне тоже — не хватало опыта традиционного программирования. HTML, CSS и JavaScript — обычно в виде jQuery — осваивались самостоятельно.

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

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

Вот некоторые вещи, с которыми хотелось бы, чтобы все были знакомы и некоторые источники, которые можно использовать, чтобы подтянуть свои навыки. (Спасибо Полу Айришу (Paul Irish), Майку Тейлору (Mike Taylor), Ангусу Кролу (Angus Croll) и Владу Филипову (Vlad Filippov) за их вклад.)

JavaScript

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

Это значит, что вы прочитали «JavaScript: Сильные стороны», желательно больше одного раза. Что вы понимаете принцип работы структур данных вроде объектов и массивов; функции, в том числе как и почему их нужно вызывать и применять; умеете работать с наследованием через прототипы; и можете справиться с асинхронностью.

Если ваши навыки работы с простым JavaScript оставляют желать лучшего, вот некоторые ресурсы, которые вас выручат:

  • «Красноречивый JavaScript»: Замечательная книга (также доступна печатная версия), посвящённая основам JavaScript
  • Тестовая оценка владения JS: подборка тестов с ошибками на различные темы по JavaScript; сможете ли вы переписать код тестов так, чтобы он заработал?
  • 10 вещей, которым я научился из исходного кода jQuery — старенькая, но мощная вещь от Пола Айриша, демонстрирующая чему можно научиться, читая чужой код.

Система управления версиями файлов Git (и профиль на GitHub)

Если вас нет на GitHub, в общем и целом вы не можете участвовать в жизни крупного сообщества с открытым исходным кодом, которое выросло вокруг технологий фронтенд разработки. Клонирование репозитория с целью испробовать его возможности должно стать для вас привычным делом и вы должны понимать как использовать ветки в совместных проектах.

Хотите повысить свои навыки работы с Git?

Модульный принцип организации, управление зависимостями и тестовые сборки

Те дни, когда управление зависимостями сводилось к добавлению дополнительного скрипта или тега стилей на страницу, давно прошли. Даже если у вас не было возможности внедрить замечательные инструменты вроде RequireJS в процесс разработки на работе, вам стоит найти время изучить их в своем личном проекте или проекте вроде Backbone Boilerplate, так как преимущества, которые они в себе несут, трудно переоценить. RequireJS, в частности, делает возможной разработку с использованием небольших модульных файлов JS и CSS, а затем конкатенирует и минифицирует их с помощью своего инструмента оптимизации для дальнейшего использования.

Скептически настроены относительно разработки на основе модулей? Это не причина ничего не делать. По крайней мере, вам должны быть знакомы инструменты вроде UglifyJS или Closure Compiler, которые грамотно сжимают ваш код, а затем конкатенируют эти сжатые файлы перед выдачей результата.

Если вы пишете на чистом CSS — то есть не используете препроцессор вроде Sass или Stylus – RequireJS также поможет организовать ваши CSS файлы по модульному принципу. Используйте операторы @import в основном файле, чтобы загрузить зависимости для разработки и затем запустите средство оптимизации RequireJS для основного файла чтобы создать готовый для использования файл.

Инструменты разработчика, встроенные в браузер

За последние несколько лет инструменты для разработчиков, встроенные в браузеры, ощутимо усовершенствовались и теперь они могут существенно улучшить ваш опыт разработки, если вы научитесь ими правильно пользоваться. (Подсказка: если вы все еще отлаживаете код, используя alert , вы зря убиваете время.)

Вам наверняка стоит выбрать один браузер, чьи инструменты разработчика вы будете использовать на постоянной основе — на данный момент я склоняюсь к инструментам разработчика в Google Chrome — но не отказывайтесь полностью от инструментов в других браузерах, так как в них время от времени на основе откликов разработчиков добавляются новые полезные возможности. В Dragonfly от Opera, в частности, были добавлены некоторые возможности, выделяющие её инструменты разработчика на фоне других, например: (экспериментальный) CSS- профилировщик, настраиваемые горячие клавиши, удалённая отладка без необходимости USB-подключения, а также возможность сохранять и использовать пользовательские цветовые палитры.

Если вы не очень хорошо разбираетесь в браузерных инструментах разработчика, презентация «Чиним код jQuery» послужит отличным (и не слишком сфокусированным на jQuery) обзором отладки, который включает в себя описание процесса пошаговой отладки — того, что изменит вашу жизнь, если вы с этой презентацией ещё не знакомы.

Командная строка

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

  • ssh для подключения к другой машине или серверу
  • scp для копирования файлов на другую машину или сервер
  • ack или grep для поиска файлов в проекте по строке или шаблону
  • find для обнаружения файлов, чьи названия совпадают с данным шаблоном
  • git для выполнения хотя бы базовых действий вроде add , commit , status и pull
  • brew для использования Homebrew для установки пакетов
  • npm для установки пакетов Node
  • gem для установки пакетов Ruby

Если какими-то командами вы пользуетесь особенно часто, отредактируйте свой .bashrc , .profile или .zshrc (или что у вас там) и создайте для них альтернативные имена чтобы не набирать команды руками каждый раз. Также можно добавить альтернативные имена в файл

/.gitconfig . Файлы с точками от Джанни Чиаппетта (Gianni Chiappetta) могут послужить отличным источником вдохновения.

Примечание: Если вы пользуетесь Windows, я не знаю, как вам помочь, разве что могу посоветовать Cygwin. Возможно, я не права, но принимать участие в жизни сообщества фронтенд-разработчиков с открытым кодом на машине с Windows существенно сложнее. Если посмотреть на вещи оптимистически, ноутбуки MacBook Air не очень дорогие, мощные и на удивление портативные, кроме того существуют Ubuntu или Unix.

Шаблонизация на стороне клиента

Не так давно для серверов было обычным делом отвечать на запрос XHR фрагментом HTML-кода, однако за последние 12-18 месяцев сообщество фронтенд разработчиков прозрело и начало требовать данных от сервера в чистом виде. Преобразование таких данных в HTML, который затем можно добавить в дерево документа, может оказаться трудоёмким и неудобным процессом, если иметь дело непосредственно с кодом. Вот когда в дело вступают библиотеки шаблонизации на стороне клиента: они позволяют использовать шаблоны, которые после добавления данных превращаются в строку HTML. Вам нужна помощь в подборе инструмента для шаблонизации? Схема для выбора шаблона от Герен Минс (Garann Means) поможет вам найти подходящий.

CSS-препроцессоры

На днях Пол Айриш отметил, что мы стали свидетелями того, что фронтенд- разработчики пишут код, сильно отличающийся от того, который в результате оказывается в готовой сборке и ярким примером тому является код, написанный с помощью CSS-препроцессоров. Всё еще есть крикливая компания, которая считает, что только чистый CSS имеет право на жизнь, но они начинают менять мнение. Эти инструменты дают нам возможности, которые, по мнению некоторых, уже должны были быть добавлены в CSS — переменные, математические выражения, логику, миксины, а также они могут помочь справиться с префиксами свойств.

Тестирование

Одна из радостей написания модульного, свободно сопряжённого кода состоит в том, что такой код намного легче тестировать, а с инструментами вроде Grunt, подготовка проекта со встроенными тестами вообще стала проще простого. В Grunt интегрирован QUnit, однако существует много фреймворков для тестирования, из которых вы можете выбрать те, что вам по душе — моими любимыми на данный момент являются Jasmine и Mocha — в зависимости от стиля, который вы предпочитаете, и остальных составляющих вашей подборки.

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

  • Короткий скринкаст, записанный мной о тестировании jQuery-кода с помощью Jasmine.
  • Пример модульного тестирования на плагине jQuery BBQ.

Автоматизация процессов (rake/make/grunt/и т.д.)

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

Уже довольно давно нам в этом помогают инструменты вроде make , кроме него существуют также rake , grunt и другие. Если вы хотите автоматизировать выполнение заданий связанных с файловыми системами, исключительно полезно будет изучить язык, отличный от JavaScript, так как асинхронная природа Node может стать неподъемным грузом, если вы умеете только управлять файлами. Существует также множество других инструментов автоматизации, созданных под конкретные задачи: инструменты для развёртывания, генерирования сборки, проверки качества кода, и др.

Качество кода

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

Хорошее руководство

К сожалению, руководства по фронтенд-разработке не существует, однако ресурс MDN вполне подходит на эту роль. Хорошие фронтенд разработчики знают, что в каждый поисковый запрос нужно добавлять префикс mdn — например, mdn массивы javascript — чтобы избежать коммерческой чумы, которой является ресурс w3schools.

Конец

Как всегда, просто почитав обо всех этих инструментах, вы не научитесь ими пользоваться на уровне эксперта или хотя бы любителя, единственный верный способ научиться что-то делать — начать пробовать это делать. Удачи вам.

Статья переведена благодаря спонсорской поддержке компании «Одноклассники».

Верстальщик vs Разработчик Front-end

Автор: Павел Волынцев · Published 29.08.2015 · Updated 12.01.2020

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

Выделю специальность «верстальщик». Варианты термина на английском: layout designer, web coder.
Верстальщик преобразует графический макет (Photoshop или иной) в набор HTML + CSS + картинки. Иногда к свёрстанному макету может подключить типовые библиотеки JavaScript, например, slider для картинок, light-box для видео-клипов, всплывающие подсказки (tooltip) или диалоговые окна (dialog popup).
Знания и навыки:

  • работа с графическими программами, чтобы понять, как собран макет и экспортировать из макета отдельные графические элементы
  • знание HTML/HTML5, CSS/CSS3
  • понятие про форматы PNG/JPG/SVG, веб-шрифты, спрайты и другие технологии работы с изображениями
  • пригодятся знания по HTML-фреймворкам, например, 960 Grid System, Twitter Bootstrap или Semantic UI
  • также полезными буду знания по препроцессорам CSS (SASS, LESS, SCSS, Stylus) и препроцессорам HTML для ускоренной («рапидной») вёрстки (Haml, Slim/Plim, Jade)
  • навыки кроссбраузерной вёрстки, чтобы в разных браузерах выглядело и работало одинаково
  • навыки отзывчивой вёрстки, чтобы можно было использовать на устройствах с разными возможностями и разрешениями
  • знание типовых решений JavaScript, чтобы реализовать простейшие вещи, заложенные в макете (см. Какие задачи нужно уметь выполнять на JS начинающему? с пометкой важно)

Фронтенд-разработчик делает так, чтобы макеты, полученные от верстальщика, были наполнены реальными данными. Если приложение построено как client-side (то есть вся основная логика загружается в виде огромного javascript в браузер, а данные запрашиваются с сервера по AJAX; это называется «жирный клиент» / Rich Internet Application), то фронтенд-разработчику потребуется следующее:

  • знание HTML/HTML5, CSS/CSS3
  • понятие про форматы PNG/JPG/SVG, веб-шрифты, спрайты и другие технологии работы с изображениями
  • знания по AJAX, WebSocket, Comet и другим технологиям асинхронной передачи данных; что такое CORS; навыки создания тестовых «затычек» на стороне сервера, чтобы можно было разрабатывать асинхронный обмен данными, пока бакенд не готов
  • пригодятся знания по HTML-фреймворкам, например, 960 Grid System, Twitter Bootstrap или Semantic UI
  • полезными буду знания по препроцессорам CSS (SASS, LESS, SCSS, Stylus) и препроцессорам HTML (Haml, Slim/Plim, Jade)
  • глубокое знание Javascript, включая использование готовых фреймворков, библиотек и написание расширений для них, что подразумевает объектно-ориентированное и событийное программирование (см. Какие задачи нужно уметь выполнять на JS начинающему?)

Если фронтенд строится на стороне сервера, то дополнительно потребуется знать используемый серверный язык программирования (например, Python, Ruby или PHP) и используемый фреймворк (Django, Ruby-on-Rails, Yii). На практике бывало такое, что фронтендер просил в нужной части проекта сделать var_dump от структуры данных, которую надо показать и перечислить серверные методы, которые надо вызвать по нажатию предполагаемых кнопок.
Зачастую фронтенд-разработчик может и сам закодировать эти серверные методы, если не требуется углубляться в серверную логику (отношения в данных, конкретная бизнес-логика, хранение данных, кэширование, очереди, крон-задачи). Я лично таких очень ценю.

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

Выбираем профессию frontend- и backend-разработчика: принципы и отличия

Статья о том, что такое frontend- и backend-разработка, чем отличаются и как взаимодействуют между собой. Разбираемся и выбираем себе направление.

Традиционно эти две сферы разработки разделяют на сцену и закулисье. Во frontend вы работаете на глаза пользователя, в backend же — на его опыт и ощущения. В Skillbox мы учим и frontend, и backend. Остается только выбрать направление своей будущей профессии. А теперь подробнее.

Что такое
frontend-разработка?

Frontend — это разработка пользовательского интерфейса и функций, которые работают на клиентской стороне веб-сайта или приложения. Это всё, что видит пользователь, открывая веб-страницу, и с чем он взаимодействует.

Пишет про дизайн и маркетинг в Skillbox. С 2011 по 2020 год писала про бизнес в деловые СМИ, соучредитель агентства копирайтинга «Абзац».

Frontend-разработчик сотрудничает с дизайнерами, программистами
и UX-аналитиками, чтобы создавать удобный и востребованный продукт.

Чтобы наглядно понять frontend-разработку, откройте страницу любого сайта — перед собой вы увидите интерфейс. Щёлкнув правой кнопкой мыши, откроете код страницы в браузере.

Это и есть пример работы frontend-разработчика, он скачивается в браузер пользователя, и его можно увидеть своими глазами. Код страницы описывает цвета, вёрстку, шрифты, расположение графических элементов и так далее.

Компоненты frontend-разработки

  • HTML (HyperText Markup Language) — язык разметки документов для создания структуры страницы: заголовки, абзацы, списки и так далее.
  • CSS (Cascading Style Sheets) — язык для описания и стилизации внешнего вида документа. Благодаря CSS-коду браузер понимает, как именно отображать элементы. CSS задаёт цвета и параметры шрифтов, определяет, как будут располагаться разные блоки сайта, и так далее. Ещё он позволяет выводить один и тот же документ в разных стилях, например, для печати (обычной или шрифтом Брайля), вывода передачи на экран или чтения голосом.
  • JavaScript — это язык, который создавался, чтобы оживить веб-страницы. Его задача — реагировать на действия пользователя, обрабатывать клики мышкой, перемещения курсора, нажатия клавиш. Ещё он посылает запросы на сервер и загружает данные без перезагрузки страницы, позволяет вводить сообщения и многое другое.

Что такое
backend-разработка?

Backend-разработка — это набор аппаратно-программных средств, при помощи которых реализована логика работы сайта. Попросту говоря, это то, что скрыто от глаз пользователя и происходит вне его браузера и компьютера.

Например, когда вы вводите запрос на странице поисковика и жмёте клавишу Enter, frontend заканчивается и начинается backend. Ваш запрос отправляется на сервер Google или «Яндекса», где расположены алгоритмы поиска. Именно там случается всё «волшебство». Как только на мониторе появилась информация, которую вы искали, — вновь происходит возвращение в зону frontend.

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

Backend — это процесс объединения сервера с пользователем.

Компоненты backend-разработки

Backend-разработчик применяет те инструменты, что доступны на его сервере. Он вправе выбрать любой из универсальных языков программирования, например, Ruby, PHP, Python, Java. Всё зависит от конкретного проекта и задачи заказчика.

Также для backend-разработки используются системы управления базами данных:

В зависимости от продукта обязанности backend-разработчика сильно меняются. Такой специалист может создавать и интегрировать базы данных, обеспечивать безопасность или настраивать технологии резервного копирования и восстановления.

Как взаимодействуют frontend и backend?

Взаимодействие frontend и backend происходит по кругу:

  • frontend отправляет пользовательскую информацию в backend;
  • информация обрабатывается;
  • и возвращается обратно, приняв понятную форму.

Этими работами занимаются разные специалисты, но каждому из них желательно понимать принципы, по которым работают коллеги. Даже дизайнеру интерфейсов важно хотя бы в общих чертах знать, что представляет собой backend проекта, которым он занимается. Это поможет адекватно оценить, какие технические возможности есть у сайта или приложения.

Существует несколько вариантов взаимодействия frontend и backend:

  • HTTP-запрос напрямую отправляется на сервер, сервер ищет информацию, встраивает ее в шаблон и возвращает в виде HTML-страницы.
  • Вариант с использованием инструментария AJAX (Asynchronous JavaScript and XML). В этом случае запрос отправляет JavaScript, загруженный в браузер, а ответ приходит в формате XML или JSON.
  • Одностраничные приложения, которые загружают данные без обновления страницы. Это делается также при помощи AJAX или фреймворков Angular и Ember.
  • Ember или библиотека React помогают использовать приложение и на сервере, и в клиенте. Frontend и backend взаимодействуют через AJAX и HTML-код, который обрабатывается на сервере.
Цукерберг рекомендует:  Sass - Каким компилятор sass вы пользуетесь

Обязанности frontend- и backend-разработчиков, как правило, разделены, но бывают моменты, когда программист решает проблемы как на стороне сервера, так и в клиентской части. Оба вида разработки подразумевают и технические, и творческие компоненты. Нередко на рынке встречаются специалисты, которые уверенно чувствуют себя как во frontend, так и в backend и могут совмещать их.

Заключение

Начать свой путь в обеих отраслях можно с 12-месячного курса Skillbox «Профессия веб-разработчик». Он подходит для новичков и программистов с небольшим опытом. За год вы на практике изучите основные языки программирования и создадите портфолио, которое поможет найти перспективную и хорошо оплачиваемую работу.

Frontend-разработчик: подробный разбор профессии

Разберемся кто такой Frontend-разработчик и чем он занимается. Определим круг его обязанностей и ключевых навыков. Узнаем как стать Frontend-разработчиком и какие онлайн-курсы помогут трудоустроиться. Посмотрим вакансии и зарплаты специалистов разного уровня (Junior, Middle и Senior). И немного поговорим про фриланс, наработку портфолио и что делать фронтенду без опыта.

Навигация по статье (переходите сразу к интересующему пункту):

Приступим к разбору.

Frontend-разработчик: кто это, что делает и чем занимается

Frontend-разработчик – это программист, разрабатывающий внешнюю часть сайта – пользовательский интерфейс. Он отвечает за корректное отображение и работу ресурса во всех браузерах и на всех устройствах. Благодаря ему страницы оживают и обретают интерактивность: переходы, анимация, выпадающие меню, выезжающие окна и другие приколюхи.

Отличие Фронтенд-разработчика от верстальщика и веб-разработчика

Frontend vs Backend

Вокруг профессии Frontend-разработчика много путаницы. Этому способствуют работодатели, которые хотят все и сразу, да подешевле. Так в вакансиях на позицию «верстальщика» встречаются требования присущее «Фронтенд-разработчику». А в требованиях к последнему указывают навыки backend-разработки, что делает из него fullstack- или web-developer’а.

Интересная ситуация складывается с названиями вакансий: frontend-разработчик, javascript-разработчик, react-разработчик, angular-разработчик, web-разработчик – все эти названия прямо или косвенно относятся к фронтенду.

Давайте разложим по полочкам: верстальщик

  • HTML + CSS – нужны максимальные знания. Это основные инструменты. Особое внимание уделяйте Flexbox и Grid CSS;
  • jQuery и AJAX – нужны для создания динамических элементов на странице (слайдеры и параллаксы, калькуляторы) и для отправки формы заявок;
  • Препроцессоры CSS (SASS, LESS, Stylus и т.д.) – позволяют писать CSS быстрее;
  • Photoshop – нужен для разбора макета на составляющие;
  • BEM, OOCSS, SMACSS – международные методологии построения структуры CSS;
  • SVG и Canvas – работа с изображениями;
  • Media Queries – для кроссбраузерной и кроссплатформенной верстки;
  • Любой шаблонизатор – для динамической подстановки данных;
  • WordPress, MODx, Joomla!, Drupal, OpenCart, Битрикс и др. – популярные системы управления контентом (CMS);

Для начала работы верстальщиком потребуется только адаптивная и кроссбраузерная верстка. Остальное придет с опытом. Уровень верстальщика определяется работой со сложными свойствами CSS и его уровне в JavaScript. В плане JavaScript верстальщику хватает изучения двух библиотек – jQuery и AJAX.

После изучения верстки погружаемся в JavaScript, а именно:

  • стандарты языка – ECMAScript 5, 6 и новый 7;
  • сборщики JavaScript: Gulp, Grunt, WebPack;
  • популярныефреймворкиибиблиотеки: React + Redux, Angular, Vue, Svelte, Backbone, ExtJS, RxJS, Ember, GWT, Knockout, Dojo, Polymer;
  • понимание работы браузера: построение DOM, рендеринг JavaScript;
  • прогрессивные Web-приложения: Storage, Web Sockets, Service Workers, изучение различных APIs использующихся в PWA;
  • тестирование приложений: Jest, Enzyme, Cypress, Mocha, Chai, Ava, Karma и др.

JavaScript открывает огромные перспективы (читай в «Направления развития»).

Как стать Frontend-разработчиком?

Вы можете найти десятки ресурсов, которые предлагают базовые знания бесплатно. Есть сотни статей о том, как стать программистом самостоятельно. Есть даже карты, где указан весь путь. Но самообучение крайне сложный и трудоемкий процесс, потому что надо знать:

  1. Как учиться.
  2. Чему учиться.
  3. Где остановиться.

Часто наблюдаем ситуацию, когда человек уже давно мог устроиться на работу или зарабатывать на фрилансе, но он учиться дальше и выгорает. Он не видит результатов и бросает идею стать разработчиком, считая что это не его.

Также при самообучении вы можете писать неправильный, плохой код. Все будет работать нормально, потому что программирование такое, есть множество путей решения одной задачи. Но в вашем коде сможете разобраться только вы, а работодателю это не надо.

Я считаю лучшим вариантом – обучение в онлайн-школах. Так вы не тратите время на проезд и занимаетесь дома в комфортной обстановке. Иногда вообще время занятий выбираете самостоятельно. А опытные эксперты проконтролируют процесс обучения, укажут на ошибки и покажут лучшие практики решения той или иной задачи.

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

Где учиться Frontend-разработке: онлайн-курсы по обучению

1. Профессия «Frontend-разработчик» от Skillbox

Длительность: 6 месяцев

Формат: вебинары + воркшопы + домашнее задание + работа с наставником + живые встречи

Содержание: в программе 4 курса – посмотреть.

Курсы в подарок: «Английский для IT-специалистов».

Преподаватели: директор центра SymbioWay и Senior Frontend-developer в Setka.io.

Ключевые навыки: адаптивная и кроссбраузерная верстка, работа с современными фронтенд фреймворками и сборщиками проектов, протоколами шифрования, Web API и Photoshop, знание современных методологий структурирования проекта.

Инструменты: HTML5 + CSS, JavaScript, jQuery, Grunt, Gulp, WebPack, Bootstrap, React, Angular, Vue.

Цена:

  • полная – 103 000 рублей;
  • со скидкой – 82 400 рублей;
  • рассрочка без первого взноса – 3 433 рублей.

Бонусы: первым 20-ти скидка 20%

Итоги: диплом + портфолио из 2 проектов + гарантированное трудоустройство.

Ссылка на курс: Перейти к обучению >>>

2. Курс «Frontend-разработчик» от SkillFactory

Длительность: 6 месяцев.

Формат: онлайн + домашнее задание с проверкой.

Содержание: 4 модуля (HTML + CSS, Кросс-браузерная и адаптивная верстка, JavaScript, инфраструктура веб-приложений) + проектная работа.


Преподаватели: Frontend-разработчики из Рамблера, MoreCargo, Radario, The Makers, а также дизайнеры и продакт-менеджеры.

Ключевые навыки: адаптивная и кроссбраузерная верстка; правильное использование переменных, числе, строк и выражений; применение итераторов и генераторов; создание прототипов и конструкторов объекта, интерактивных страниц и SPA; работа с файлами и медиаресурсами.

Инструменты: HTML5 + CSS3, HTTP/HTTPS, JavaScript, JSX, XHR и AJAX, React, VirtualDOM, FlexBox, GitHub.

Цена:

  • полная – 69 000 рублей;
  • со скидкой – 47 900 рублей;
  • оплата частями – 3 353 или 5 800 рублей в месяц.

Бонусы: месяц премиум-подписки в приложении ED Words от EnglishDom.

Итоги: сертификат + 4 проекта в портфолио.

Ссылка на курс: перейти к обучению >>>

3. Профессия «Frontend-разработчик» от Нетологии

Длительность: 10 месяцев.

Формат: вебинары + домашнее задание с проверкой.

Содержание: 7 модулей + дипломная работа.

Программа: посмотреть.

Преподаватели: основатель AIMS, frontend-разработчики из WebCoalition, Webzilla, «Ростелеком ИнфоТех», AlterEGO, OneTwoTrip, MyTaxi и VideoGorillas, а также успешные фрилансеры с сотнями кейсов.

Ключевые навыки: адаптивная и кроссбраузерная верстка; правильное использование переменных, числе, строк и выражений; применение итераторов и генераторов; создание прототипов и конструкторов объекта, интерактивных страниц и SPA; работа с файлами и медиаресурсами.

Инструменты: HTML5 + CSS3, HTTP/HTTPS, JavaScript, JSX, XHR и AJAX, React, VirtualDOM, FlexBox, GitHub.

Цена:

  • полная – 59 900 рублей;
  • оплата частями – 4 992 рублей в месяц.

Бонусы: беспроцентный кредит от Сбербанка, Тинькофф или Яндекс.Кассы, возврат налогового вычета 13%.

Итоги: диплом + 3 проекта в портфолио + помощь и сопровождение до трудоустройства.

Ссылка на курс: перейти к обучению >>>

4. Профессия «Frontend-разработчик» от GeekBrains

Длительность: 7 месяцев.

Формат: вебинары + домашнее задание.

Содержание: 9 практических курсов и 2 месяца стажировки.

Программа: посмотреть.

В подарок: «Английский для IT-специалистов» + 3 месяца обучения английскому + доступ к GeekClub.

Преподаватели: Senior Fullstack-developer из «МакроИндекс», основатель креативного агентства «Амико», Senior Software engineer в EPAM, Frontend-developer в @Mail.ru Group, преподаватель из СпбПУ и другие.

Ключевые навыки: адаптивная и кроссбраузерная верстка, применение современных CSS и JavaScript фреймворков и сборщиков проектов, создание интерактивных страниц и SPA, работа с интерпретатором, медиафайлами, управление структурой DOM.

Инструменты: HTML5, CSS3, Bootstrap, jQuery, JavaScript, AJAX, Less, Grunt, Gulp, WebPack, ReactJS, Flux, Redux, GIT,

Цена:

  • полная – 7 141 рублей в месяц;

Бонусы: банковская рассрочка + налоговый вычет в 13%.

Итоги: сертификат + свидетельство + портфолио + гарантированные стажировки в «Сбербанк», Level Travel, Некки, Билайн и других партнеров.

Ссылка на курс: перейти к обучению >>>

5. Профессия «Фронтенд-разработчик» от htmlacademy

Длительность: 6,5 месяцев.

Формат: вебинары + домашнее задание

Содержание: 3 модуля + стажировка в аутсорсинговой компании «Лига А».

Программа: посмотреть.

Ключевые навыки: адаптивная и кроссбраузерная верстка по готовому макету, написание простых скриптов на JavaScript, создание интерактивных страниц, работа с протоколами шифрования данных.

Инструменты: HTML5 + CSS3, jQuery, JavaScript, HTTP/HTTPS, VirtualDOM, Web API.

Цена:

  • полная – 83 300 рублей;
  • рассрочка – 8 330 рублей в месяц – 10 частей;
  • оплата от компании – 85 300 рублей.

Бонусы: внутренняя рассрочка + налоговый вычет в 13%.

Итоги: 4 электронных сертификата.

Ссылка на курс: перейти к обучению >>>

6. Курс «React: библиотека №1 в современной фронтенд-разработке» от Нетологии

Длительность: 2,5 месяца.

Формат: вебинары + домашнее задание с проверкой.

Содержание: 3 модуля + дипломная работа.

Программа: посмотреть.

Преподаватели: старший разработчик в OneTwoTrip, Tech Lead в Breadhead, CTO в Setka.io.

Ключевые навыки: работа с компонентами React, создание интерактивных веб-страниц и SPA, управление состоянием

Инструменты: React, Redux, JSX, React Router, VirtualDOM, SPA, Component Lifecycle.

Цена:

  • полная – 20 900 рублей;
  • со скидкой (до 21 ноября) – 15 900 рублей;
  • оплата частями – 1 742 рублей в месяц.

Бонусы: беспроцентный кредит от Сбербанка, Тинькофф или Яндекс.Кассы, возврат налогового вычета 13%.

Итоги: диплом + портфолио + помощь и сопровождение до трудоустройства.

Ссылка на курс: перейти к обучению >>>

Карьерный рост: разница между Junior, Middle и Senior

Теперь самое интересное – карьера и зарплата Frontend-разработчика. В IT есть условное разделение на младших, средних и старших специалистов (Junior, Middle и Senior). От уровня зависит заработная плата. Но в одной компании Junior может получать больше, чем в другой Middle. Это разделение субъективное, плавающее и зависит от места работы.

Реальный уровень определяется разнообразием задач и практики в программировании. При написании однообразного кода на протяжении длительного времени, можно так и остаться Junior. Даже если пройдет несколько лет. Но это вина не только специалиста, но и компании.

Попробуем провести условные параллели.

Junior Frontend-developer

Требования на Junior Frontend-разработчика

» data-medium-file=»https://i2.wp.com/checkroi.ru/blog/wp-content/uploads/2020/10/Требования-на-Junior-Frontend-разработчика.png?fit=300%2C203&ssl=1″ data-large-file=»https://i2.wp.com/checkroi.ru/blog/wp-content/uploads/2020/10/Требования-на-Junior-Frontend-разработчика.png?fit=614%2C415&ssl=1″ />Опыт: 0,5 — 1,5 года.

Задачи: стандартные с незначительным риском и малым сроком выполнения.

Навыки: владение предметной области неполное, часть задач требует дополнительного времени для освоения.

Контроль: нуждается в помощи и постоянном code review (обзор кода).

Зарплата: 30 000 — 100 000 рублей в Москве, и 20 000 — 70 000 рублей в регионах.

Middle Frontend-developer

Требования на Middle Frontend-разработчика

» data-medium-file=»https://i1.wp.com/checkroi.ru/blog/wp-content/uploads/2020/10/M />Опыт: 1 — 3 года.

Задачи: справляется с нестандартными, а стандартные выполняет быстрее и чище, чем Junior. Может выполнять длительные задания, рассчитанные на 1-2 недели выполнения.

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

Контроль: на простые задачи можно не проводить code review

Зарплата: 50 000 — 200 000 рублей в Москве, и 40 000 — 150 000 рублей в регионах.

Senior Frontend-developer

Требования на Senior Frontend-разработчика

» data-medium-file=»https://i2.wp.com/checkroi.ru/blog/wp-content/uploads/2020/10/Требования-на-Senior-Frontend-разработчика.png?fit=300%2C284&ssl=1″ data-large-file=»https://i2.wp.com/checkroi.ru/blog/wp-content/uploads/2020/10/Требования-на-Senior-Frontend-разработчика.png?fit=571%2C540&ssl=1″ />Опыт: 3 — 7 лет.

Задачи: любой сложности

Навыки: хорошо знает предметную область, сам проводит code review, мыслит проектом на уровне архитектуры и понимает долгосрочные последствия технических решений, нередко совмещается с управляющими должностями.

Контроль: нуждается в помощи и постоянном code review.

Зарплата: 120 000 — 350 000 рублей в Москве, и 90 000 — 250 000 рублей в регионах.

Где работают Frontend-разработчики?

Специалисты по фронтенду работают в веб-студиях, компаниях с IT решениями, стартапах, аутсорсинговых агентствах и на фрилансе. Последнее время много вакансий с переездом (remote) и удаленных.

Посмотрим какие именитые компании ищут Frontend-разработчиков.

Вакансии Frontend-разработчика

4373 вакансий фронтенд-разработчика в России на 08.10.2020

На момент написания статьи есть открытые вакансии в самый крупный портал по поиску работы – HH.ru. Предлагают зарплату от 150 000 рублей. Там же, кстати, вы можете посмотреть что требуют от специалистов и на какую зарплату можно претендовать.

JavaScript-разработчик требуются в Сбербанк. Но им требуется специалист высокого уровня, за которого готовы предложить от 230 000 рублей в месяц. Работа в банковской сфере предполагает разработку интерфейсов личных кабинетов в интернет-банкинге.

Frontend-разработчика ищет один из крупнейших мобильных операторов – Билайн. Разрабатывают систему для регистрации новых абонентов, которой будут пользоваться продавцы и руководители отделов продаж по всей России.

Много вакансий в IT компании, разрабатывающие промышленный и бизнес софт. Вы вряд ли знакомы с их названиями, но они предлагают зарплату от 150 000 рублей. Давайте познакомимся с некоторыми: IBA Group, SoftSwiss, ScienceSoft.

«Что ты нам для опытных вакансии подсовываешь…» – скажите вы. Это чтобы вы понимали где и над чем вы можете работать. А вообще старт карьеры обычно начинается с веб-студий, аутсорсинговых агентств или фриланса на позицию верстальщика. Также можно поискать стажировки, некоторые даже могут оплачиваться.

Фриланс

Фриланс на Upwork: 9008 заданий по JavaScript

Самый простой способ начать работать по профессии без опыта – фриланс. Это неплохой вариант для сбора портфолио и понимания того, как работать с клиентом. В компаниях за вас это будут делать другие люди, но понимать как обстоит процесс вы должны.

Очень просто найти простые задания по верстке, чуть сложнее найти по фронтенду. Но на биржах фриланса заданий тысячи. Другой вопрос: ваш заработок зависит только от навыков продажи себя и самоорганизации рабочего процесса. Я знаю верстальщика, который зарабатывал около 300 000 в месяц на биржах фриланса, но он верстал по несколько одностраничников в день.

Самые популярные биржи:

Совет: делаем легкое портфолио на GitHub, регистрируемся на всех биржах, делаем для себя программу по мониторингу всех бирж на появление новых заданий, отвечаем на каждое и за полгода неплохо набираемся опыта на задачах разного уровня сложности. Возможно вы и не захотите уходить с фриланса;)

Направления развития

На сегодняшний момент JavaScript применяется не только во фронтенде, но и в других областях программирования. Куда в конечном итоге вы можете придти? Читайте далее.

Fullstack- или web-разработчик

С самого начала статьи прослеживается возможность развития в Fullstack-разработчика. Для этого к своим знаниям по фронтенду нужно добавить бэкенд. Бэкенд можно писать на том же JavaScript, который вы должны будете хорошо знать. Останется освоить только серверную библиотеку NodeJS и его фреймворк Express. Для расширения знаний в области программирования можно выучить другой язык. Вот популярные для бэка: PHP, Python, Java и Ruby.

Мобильная разработка

» data-medium-file=»https://i0.wp.com/checkroi.ru/blog/wp-content/uploads/2020/10/Мобильный-разработчик.png?fit=300%2C198&ssl=1″ data-large-file=»https://i0.wp.com/checkroi.ru/blog/wp-content/uploads/2020/10/Мобильный-разработчик.png?fit=800%2C529&ssl=1″ />Самый интересный путь дальнейшего развития – мобильная разработка. JavaScript-разработчик с легкостью напишет мобильное приложение при помощи React Native. React Native – кроссплатформенный. На нем пишутся приложения и под Android, и под iOS. Для больших и высоконагруженных приложений лучше использовать нативные языки (Kotlin и Swift), но для маленьких и быстрых прототипов кроссплатформенные решения подходят отлично.

Lead-программист

» data-medium-file=»https://i0.wp.com/checkroi.ru/blog/wp-content/uploads/2020/10/Lead-программист.png?fit=300%2C227&ssl=1″ data-large-file=»https://i0.wp.com/checkroi.ru/blog/wp-content/uploads/2020/10/Lead-программист.png?fit=529%2C400&ssl=1″ />Можно двигаться на руководящие должности. Например, Lead-программист – отвечает за все процессы в команде, выбор технологий и контроль выполнения задач. Обычно это следующая ступень после Senior.

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

DevOps

Есть вариант развития в DevOps-специалиста. Он отвечает за взаимодействие специалистов по разработке и специалистов информационно-технологического обслуживания. Интегрирует рабочие процессы друг друга для обеспечения качества продукта. Главные цели DevOps – сокращение времени выхода продукта на рынок и снижение частоты отказов в работе, а также обеспечение быстрого исправления после отказов (сбои, баги и т.д.).

Если я что-то непонятно изложил, вы нашли неточность или несоответствие моих слов действительности, у вас есть что добавить или спросить, то не стесняйтесь оставлять комментарии. Сделаем вместе онлайн-образование лучше!

Моя история: как я стала писать код front-end, советы новичкам

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

Все очень просто, мой парень программист, только-только выпустившийся из университета. Я также в этом году закончила бакалавр. Перед нами встал вопрос что же мы хотим делать дальше. И мы пришли к общему выводу, что время до 27-30 лет мы хотим посвятить себе, что значит дружно жить, вкусно кушать и самое главное много-много путешествовать. Дальше мы поставили себе вопрос о том, как это можно сделать. Первое, нужны деньги. Я не скажу, что нужно много денег, но минимум 4000 евро в месяц на двоих. Мне кажется, этих денег вполне достаточно на двоих. Следующее, много путешествовать, то есть иметь возможность, жить в другой стране месяцами, а то и годами. Следовательно, офисная работа нам не подходит. Работать удаленно? Да, круто, но не придел мечтаний, потому что иногда приходится выполнять работу, которая совсем тебе не по душе. Мы идеалисты, мы хотим заниматься тем, что нам нравится. В итоге, мы решили создать свою компанию и заниматься разработкой собственных проектов.

Но стоп, я ж ни черта не шарю в программировании!

C такой мыслью, я начала искать ресурсы, которые научили бы меня основам разработки. Начала я по стандарту c html и css. Изначально, я знала, что буду заниматься front-end разработкой. html и css показался мне очень-очень прост. Я не говорю, что за неделю я стала мастером html, и даже сейчас спустя пол года я оооочень многого не знаю, и часто ищу помощь в интернете, но сам ПРИНЦИП работы не сложный. Мне хватило одного видео на YouTube, где парень делал сайт с Bootstrap.

После просмотра, я начала активно создавать собственные html странички. В основном это были сайты кафе, ресторанов и пиццерий. Мне нравилось и самое главное у меня как, мне казалось, неплохо получалось.

Тем временем, мой парень занимался разработкой приложения Gaspal, которое позволяет сравнивать цены на заправках. Оно доступно только во Франции и в Испании (мы живем во Франции). Я сделала дизайн для приложение и первый лендинг, который вышел в свет. Я была очень счастлива и даже на секундочку подумала, что я программист. Ха-ха-ха.

Дальше, новый проект — одновременная публикация постов в разных социальных сетях на разных языках. Я начала изучать Ruby on Rails. Базу я выучила с codeacademy.

А дальше началась практика. Честно скажу, было тяжело, многое не понимала, искала помощь в Интернете. Очень важно в IT индустрии владеть английским. К счастью, я умею говорить на английском, а в интернете есть ответы на ВСЕ вопросы, ну по-крайней мере вопросы для начинающих. И все наши старания воплотились в нашем проекте crosspost.

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

Следующий проект, наш главный проект на сегодняшний момент, это upload.express.

Помните вирусный ролик на YouTube: «А каким файлообменником ты пользуешься? Конечно же, Скайпом» ? Так вот, upload.express это альтернатива скайпу. Я, конечно, шучу, у нас кроме скайпа хватает конкурентов, особенно на французском рынке, но если есть конкуренция, значит продукт нужен и полезен.

Я полностью занималась front-end разработкой этого сайта. Оцените, неплохо ведь, да? Сайт сделан с помощью JavaScript, а именно библиотеки React.js.

Настоятельно рекомендую канал The Net Ninja всем начинающим front-end разработчикам, очень много полезных обучалок. Именно с ним я учила Реакт.

upload.express это проект, в который я искренне верю и считаю его крутым. Сам файлообменник бесплатный, но есть версия Pro, которая позволяет персонализировать свой файлообменник, следить за аналитикой и продвигать свой собственный бренд.

Конечно, за чуть больше чем пол года я не смогла полностью освоить front-end разработку, но я смогла создать достойные проекты, которыми горжусь. Если смогла я, то сможете и вы!

Идеальный план изучения front-end разработки, по-моему мнению:

2. Ruby on Rails;

3. JavaScript (React.js);

А как считаете Вы? Мне очень интересно знать и ваше мнение, потому что я еще тоже новичок этом деле.

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Как показывает опыт успешных и добившихся товарищей, чтобы «вкусно кушать и самое главное много-много путешествовать и т.п.» до 27-30 лет надо не куи пинать, а много-много вкалывать и учиться. Для этого как раз самый продуктивный возраст.Сначала ты работаешь на репутацию, потом она на тебя. Как-то так.

Абсолютно с Вами согласна! Вот и я учусь, работаю и развиваюсь, чтобы иметь все,что я хочу в будущем.

Хахаха.
В 30 лет, когда ещё и желание есть и силы — вместо работы много-много путешествовать?
В 40 лет, когда ещё и силы есть и опыт — вместо работы много-много путешествовать?
В 50 лет, когда и опыт есть и ресурсы — вместо работы много-много путешествовать?

Цукерберг рекомендует:  Команда - скажите как сделать рандом чисел ну то есть команду

А в чем крутость проекта upload.express? Вы даже не представляете, сколько сожрет AWS за постоянное хранение данных пользователей бесплатно.

Да, без монетизации долго не протянуть этот проект. Это скорее для хостеров забава, что бы оборудование не простаивало.

Технически может у вас и норм, благо там функционала-то, но. где условия использования сервиса? Где хоть какая-то справка об ограничениях? Сколько можно загрузить, сколько будет хранится? Есть ли предпросмотр картинок? Почему я не узнаю ничего из этого, даже после загрузки файла?


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

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

Почему мне пришлось искать малюсенькую ссылку «тарифы» вверху страницы? И она хотя бы не продублирована в футере?

Что такое «Обмен файлами» и почему это есть в бесплатном тарице, но нет в обоих платных?
Что такое «Загрузка одним файлом»? Загрузка чего? Судя по всему, вы имели ввиду возможность _скачать_ несколько файлов архивом. Но везде вы пишете только про загрузку, а скачивание — это другое.
«4 Гб за загрузку» — это что такое? Максимальный размер загружаемого файла? А сколько за одну загрузку на остальных тарифах? И сколько лимит дискового пространства базового тарифа? Домен входит в стоимость платных тарифов и на кого он оформляется? Или возможно только прикрепление уже имеющегося домена?

В общем, что-то для хипстеров, которые вообще ни о чем думать не должны, только будут ли даже они за это «нечто» платить.

Руководство для прохождения интервью по фронтенду

Что это такое?

В отличие от типичного собеседования с разработчиками ПО, на собеседованиях фронтенд-разработчиков меньше внимания уделяется алгоритмам. Большая часть вопросов касается специфичных знаний и компетенций в таких областях, как HTML, CSS, JavaScript.

Несмотря на то, что существуют ресурсы, призванные помочь в подготовке к собеседованию, они сильно отличаются по полноте материалов от тех же ресурсов для разработчиков ПО. Среди того, что существует на сегодняшний день, наиболее полезным может быть сборник вопросов Front-end Developer Interview Questions. К сожалению, на многие вопросы я не смог найти в сети полные и удовлетворяющие ответы. Поэтому в документе ниже я постарался самостоятельно ответить на них. Будучи открытым репозиторием, этот проект может жить и развиваться благодаря сообществу, поскольку интернет эволюционирует.

Нужна более общая подготовка?

Вас может заинтересовать Tech Interview Handbook, в котором содержится информация для прохождения общих технических интервью, в частности описаны алгоритмы, даны ответы на вопросы по софт-скиллс. Также есть Interview Cheatsheet!

Вопросы по HTML

Ответы на вопросы из списка Front-end Job Interview Questions — HTML Questions. Комментарии с предложениями по улучшению и дополнению приветствуются!

Что делает DOCTYPE?

— это сокращение от « document type» (тип документа). Он объявляется в HTML для того, чтобы различать стандартный режим или режим совместимости ( quirks mode). Его наличие говорит браузеру работать со страницей в стандартном режиме.

Мораль истории — просто добавляй в начало страницы.

Ссылки

Как поддерживать страницу на нескольких языках?

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

Когда к серверу делается HTTP-запрос, то браузер пользователя обычно отсылает информацию о предпочитаемом языке в заголовке Accept-Language . Сервер может использовать эту информацию, чтобы вернуть версию документа на подходящем языке, если такая возможность есть. В возвращенном HTML-документе обязательно должен быть указан атрибут lang у тега , к примеру .

На бэкенде HTML-разметка будет содержать плейсхолдер i18n , а контент для конкретного языка будет хранится в YML- или JSON-формате. Сервер динамически формирует HTML-страницу с контентом на конкретном языке, чаще всего при помощи бэкенд-фреймворка.

Ссылки

На что обратить внимание при разработке мультиязычных сайтов?

  • Используй атрибут lang в HTML.
  • Перенаправляй пользователей на версию сайта на их языке. Позволяйте быстро и без проблем изменить страну и язык.
  • Текст на картинках плохо поддается адаптации. Многие до сих пор помещают текст на картинки чтобы получить хорошо выглядящий несистемный шрифт на любом компьютере. Однако чтобы перевести текст картинкой, нужно иметь подготовленную картинку с каждой строкой текста для каждого языка. При большом количестве текста это быстро выйдет из под контроля.
  • Ограничение длины слов и предложений. Некоторый контент может быть длиннее при написании на другом языке. Будьте внимательны к макету и проверяйте поведение блоков при переполнении. Количество символов важно в таких элементах, как заголовки, лейблы и кнопки. Но не так важно в основном тексте или в блоке комментария.
  • Помните о восприятии цветов. В разных языках и культурах цвета имеют разное значение. Дизайн должен учитывать эти особенности.
  • Форматируете даты и валюты. Календарные даты иногда пишутся по-разному. Например, «Май 31, 2012» в Америке или «31 мая 2012» в большинстве стран Европы.
  • Не склеивайте переведенные строки. Не пишите что-то вроде «Сегодняшняя дата » + date . Эта фраза будет выглядеть коряво на языках с другим порядком слов. Вместо этого используйте параметры шаблона.
  • Разные направления чтения. В русском мы читаем слева направо, сверху вниз. В традиционном японском языке текст читается сверху вниз, справа налево.

Ссылки

Для чего отлично подойдут data-атрибуты?

До того, как JavaScript-фреймворки стали популярны, фронтенд-разработчики использовали data -атрибуты чтобы хранить дополнительные данные прямо в DOM без хаков вроде нестандартных атрибутов или дополнительных свойств в DOM. Атрибуты этого семейства предназначены для хранения частных данных пользователя, для которых не существует более подходящих атрибутов или элементов, на странице или в приложении.

На сегодняшний день использование data -атрибутов не поощряется. Одной из причин является то, что пользователь может модифицировать данные в атрибуте, используя инспектор кода в браузере. Данные лучше хранить в самом JavaScript и обновлять DOM при помощи связывания данных через библиотеку или фреймворк.

Ссылки

Представьте HTML5 как открытую веб-платформу. Из каких блоков состоит HTML5?

  1. Семантика. Позволяет более точно описать из чего состоит контент.
  2. Связанность. Позволяет общаться с сервером новыми и инновационными способами.
  3. Офлайн и хранилище. Позволяют страницам хранить данные локально на клиентской стороне и более эффективно работать в офлайне.
  4. Мультимедиа. Ставит создание видео и аудио на первое место в вебе.
  5. 2D- и 3D-графика и эффекты. Позволяет расширить возможности презентации.
  6. Производительность и интеграция. Обеспечивает большую скорость оптимизации и лучшее использование аппаратных средств.
  7. Доступ к устройствам. Позволяет взаимодействовать с различными устройствами ввода и вывода.
  8. Стилизация. Позволяет создавать более сложные темы оформления.

Ссылки

Все вышеупомянутые технологии являются механизмами хранения типа ключ-значение на клиентской стороне. Они могут хранить данные только как строки.

Как стать frontend-разработчиком и всё таки делать сайты

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

Поэтому предлагаю схему, которую составила для себя, авось кому нибудь начинающему она тоже поможет разобраться.

Специалистам и критике — рада. Если обратите моё внимание на недоработки, буду благодарна за подсказки и советы.

Начну с того, что, на мой взгляд, создание сайтов — это весьма сложный процесс, требующий совместной работы целой команды профессионалов, таких как дизайнеры, верстальщики, программисты, и хорошему верстальщику следует быть в курсе (хотя бы поверхностно) каждой ступеньки создания сайта. Поэтому я изобразила схему поэтапно, в виде процесса создания сайта. Какими то пунктами верстальщик и фронтендщик должны владеть виртуозно, какими то — просто иметь представление, как это работает и с чем это едят.

1. Создание идеи сайта, определение с видом и структурой сайта, знание видов сайта (статичный/динамичный, адаптивный/отзывчивый дизайн), определение с контентом (текст, графика, фото) — этот пункт сугубо ознакомительный, с этого можно начать понимание основной информации о сайтах.

2. Сервер, хостинг, домен — также понимать, как это работает, какой хостинг выбрать, и тд.

3. Проектирование сайта

3.1. Навигация сайта, карта сайта — создание основной структуры, отрисовка основных блоков (можно здесь посмотреть, как работают препроцессоры, либо как отрисовывать вручную).

3.2. Юзабилити (изучить хотя бы основные принципы эргономичного расположения элементов сайта)

4. Дизайн — этот этап реализуют дизайнеры, но верстальщику знание Photoshopa необходимо и для верстки макета в дальнейшем, и для общего развития, конечно.

4.1. Отрисовка макета в Photoshop

4.1.1. Основные инструменты рисования, техника, горячие клавиши.

4.1.3. Шрифты, цвета

4.2. Фреймворки (использование дополнительных бибилиотек может сэкономить время при разработке проекта — дизайне, верстке)

4.2.4. Material Design

5. Разработка — начинаем оживлять дизайн

5.1. Редакторы кода (Notepad++, Sublime Text, DreamViewer)

5.2. Структура и хранение файлов (создание директорий, помещение файлов в определенные папки, именование файлов)

6. Вёрстка/нарезка макета сайта — трансформация дизайна в HTML / CSS. Вот и добрались до основной части нашей работы.

6.1. HTML — изучаем досконально, не ленимся практиковаться, делать хотя бы легкие странички, экспериментировать.

6.2. CSS — то же самое, только можно изучить еще и применение препроцессорных языков SASS и LESS.

6.3. JavaScript — мне однажды дали совет, что для фронтендщика достаточно знать JQuery, и понимать JavaScript. Так или иначе, покорпеть над ними обоими придется.

6.4. JQuery — им нужно владеть больше чем хорошо.

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

6.6. Git — сюда же поместила и систему управления версиями. Пригодится работающим в команде.

7. Интеграция макета в CMS — если, конечно, вы работаете через CMS. Но мне кажется, всё же мы должны знать хотя бы основные моменты популярных CMS — установка, модули, функционал:

8. Наполнение сайта контентов, работа с админкой, тестировка сайта, запуск — завершающие основные моменты, с ними тоже связана немалая часть нашей работы.

9. Ну и напоследок, средства автоматизации, такие как Emmet, Jade, владение командной строкой, Gulp и Grunt, но это уже после первых 8 пунктов, и еще сюда можно добавить СЕО-оптимизацию, но это всё же не наша зона работы.

Чувствую, что критика будет, готова её принять, ещё раз напоминаю о своём дилетантизме в этом деле.

Frontend — минимум для верстальщика и Front-end а

\u041e \u043d\u0430\u0441
\u041f\u0440\u0438\u0432\u0435\u0442. \u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u0432\u0441\u044e \u0432\u0430\u043a\u0430\u043d\u0441\u0438\u044e \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043d\u0430\u0448\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u043f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c, \u043a\u0430\u043a \u043e\u0442\u043a\u043b\u0438\u043a\u043d\u0443\u0442\u044c\u0441\u044f. \u0412 \u043f\u0435\u0440\u0432\u043e\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0438 \u043f\u0440\u043e\u0441\u0438\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u0440\u0430\u0442\u043a\u0438\u0439 \u0442\u0435\u043a\u0441\u0442 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0432\u044b \u0432\u0438\u0434\u0438\u0442\u0435 \u0441\u0432\u043e\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u0443 \u043d\u0430\u0441.

\u0414\u043e\u043b\u0436\u043d\u043e\u0441\u0442\u043d\u044b\u0435 \u043e\u0431\u044f\u0437\u0430\u043d\u043d\u043e\u0441\u0442\u0438
\u041f\u0440\u0438\u0433\u043b\u0430\u0448\u0430\u0435\u043c \u0443\u0432\u0435\u0440\u0435\u043d\u043d\u043e\u0433\u043e \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u0430-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430, \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u0430 \u043f\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442-\u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432 (\u043d\u0435 \u0437\u0430\u043a\u0430\u0437\u043d\u0430\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438 \u043d\u0435 enterprise). \u0422\u0440\u0435\u0431\u0443\u044e\u0442\u0441\u044f \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0435 \u0437\u043d\u0430\u043d\u0438\u044f backend-\u0441\u0442\u0435\u043a\u0430 (php / Yii / MySQL) \u0438 \u0443\u043c\u0435\u043d\u0438\u0435 \u0441\u0432\u0435\u0440\u0441\u0442\u0430\u0442\u044c \u0438 \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u0430\u0434\u0435\u043a\u0432\u0430\u0442\u043d\u043e\u0433\u043e \u043c\u0430\u043a\u0435\u0442\u0430.
\u0422\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043e\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u043e \u0432\u043b\u0438\u0442\u044c\u0441\u044f \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0430\u0448\u0438\u0445 \u0442\u0435\u043a\u0443\u0449\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u043a \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u043d\u043e\u0432\u044b\u0445; \u0432\u043f\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0432 \u0441\u0435\u0431\u044f \u043a\u043e\u043c\u043f\u0435\u0442\u0435\u043d\u0446\u0438\u0438 \u043a\u043e\u043b\u043b\u0435\u0433-\u0434\u0435\u0432\u0435\u043b\u043e\u043f\u0435\u0440\u043e\u0432 \u0438 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u043e\u0432, \u0438 \u0432\u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0438 \u0437\u0430\u0431\u0440\u0430\u0442\u044c \u0441\u0435\u0431\u0435 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u044b.

\u041d\u0430\u0448\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u2014 \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0440\u0435\u0439\u0442\u0438\u043d\u0433\u043e\u0432, \u0430\u043d\u043a\u0435\u0442\u0430 \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u0430 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438, \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u044b \u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b \u043c\u043e\u0434\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u0432, \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u044b \u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438, \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0439 digital-\u0440\u044b\u043d\u043a\u0430, \u043a\u0440\u0443\u043f\u043d\u0435\u0439\u0448\u0435\u0435 \u0432 \u0420\u043e\u0441\u0441\u0438\u0438 \u043a\u0430\u0434\u0440\u043e\u0432\u043e\u0435 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435, \u0441\u0430\u043c\u044b\u0435 \u0430\u0432\u0442\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0435 \u0440\u0435\u0439\u0442\u0438\u043d\u0433\u0438 \u0438 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0439, \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432, \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 \u0438 \u043f\u0435\u0440\u0441\u043e\u043d, \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u043d\u044b\u0435 \u0443\u0447\u0435\u0431\u043d\u044b\u0435 \u043a\u0443\u0440\u0441\u044b \u0441 \u043b\u0438\u0434\u0435\u0440\u0430\u043c\u0438 \u0440\u044b\u043d\u043a\u0430, Tagline Awards \u2014 \u0432\u044b\u0441\u0448\u0430\u044f \u0440\u043e\u0441\u0441\u0438\u0439\u0441\u043a\u0430\u044f \u043d\u0430\u0433\u0440\u0430\u0434\u0430 \u0437\u0430 digital-\u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u044f, Digital-\u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u044c, \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0438 \u042d\u043d\u0446\u0438\u043a\u043b\u043e\u043f\u0435\u0434\u0438\u044f, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u0433\u043e\u0442\u043e\u0432\u044f\u0449\u0438\u0445\u0441\u044f \u043a \u0437\u0430\u043f\u0443\u0441\u043a\u0443.

\u0427\u0435\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c\u0441\u044f:
\u2014 \u041f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442-\u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432
\u2014 \u0420\u0430\u0431\u043e\u0442\u0430 \u0441 \u043f\u043e\u0434\u0440\u044f\u0434\u0447\u0438\u043a\u0430\u043c\u0438: \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0433\u0430\u0439\u0434\u043e\u0432, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0422\u0417, \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c, \u043f\u0440\u0438\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u044b, \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u043a\u043e\u0434\u0430 \u0432 \u0438\u043d\u0444\u0440\u0430\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438, \u0434\u0435\u043f\u043b\u043e\u0439, \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435
\u2014 \u0412\u0435\u0434\u0435\u043d\u0438\u0435 \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043f\u043e \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u043c \u0438 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f\u043c
\u2014 \u0412\u0435\u0440\u0441\u0442\u043a\u0430 \u043d\u043e\u0432\u044b\u0445 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432 \u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432
\u2014 \u0420\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433 \u0443\u0436\u0435 \u0441\u0432\u0435\u0440\u0441\u0442\u0430\u043d\u043d\u044b\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0438 \u0430\u0434\u043c\u0438\u043d\u0438\u0441\u0442\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432
\u2014 \u041f\u043e\u0438\u0441\u043a \u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 frontend-\u0440\u0435\u0448\u0435\u043d\u0438\u0439
\u2014 \u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432
\u2014 \u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0441\u0442\u0435\u043a\u0430 \u0438 \u043f\u043e\u043b\u0438\u0442\u0438\u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438.
\u0412 \u043f\u0435\u0440\u0441\u043f\u0435\u043a\u0442\u0438\u0432\u0435 \u2014 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0445 frontend-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u0430\u0434\u043c\u0438\u043d\u0438\u0441\u0442\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 \u0441 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439.

\u041c\u044b \u2014 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0437\u0430 9 \u043b\u0435\u0442 \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043b\u0430 \u0440\u043e\u0441\u0441\u0438\u0439\u0441\u043a\u0438\u0439 \u0440\u044b\u043d\u043e\u043a \u0437\u0430\u043a\u0430\u0437\u043d\u043e\u0439 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 digital-\u043c\u0430\u0440\u043a\u0435\u0442\u0438\u043d\u0433\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0432\u043e\u0438\u0445 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u043d\u044b\u0445 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432.

\u0427\u0435\u043c \u043c\u044b \u043b\u0443\u0447\u0448\u0435 \u0441\u0442\u0430\u0440\u0442\u0430\u043f\u0430?
1. \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0432\u0430\u0448\u0435\u0433\u043e \u0442\u0440\u0443\u0434\u0430 \u0431\u0443\u0434\u0443\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u043e \u0443\u0436\u0435 \u0447\u0435\u0440\u0435\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u0434\u0435\u043b\u044c \u0440\u0430\u0431\u043e\u0442\u044b.
2. \u041c\u044b \u0442\u043e\u0447\u043d\u043e \u043d\u0435 \u0437\u0430\u043a\u0440\u043e\u0435\u043c\u0441\u044f \u0437\u0430\u0432\u0442\u0440\u0430, \u0447\u0435\u0440\u0435\u0437 \u043c\u0435\u0441\u044f\u0446 \u0438 \u0447\u0435\u0440\u0435\u0437 \u0433\u043e\u0434 \u0438\u0437-\u0437\u0430 \u043a\u0440\u0438\u0437\u0438\u0441\u0430 \u0438\u043b\u0438 \u043d\u0435\u0445\u0432\u0430\u0442\u043a\u0438 \u0438\u043d\u0432\u0435\u0441\u0442\u0438\u0446\u0438\u0439 (\u043c\u044b \u0438\u0445 \u043d\u0435 \u0431\u0440\u0430\u043b\u0438 \u0438 \u043f\u043e\u043a\u0430 \u043d\u0435 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f), \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0438\u0434\u0435\u0442\u044c \u043c\u043d\u043e\u0433\u043e\u043b\u0435\u0442\u043d\u044e\u044e \u0438\u0441\u0442\u043e\u0440\u0438\u044e \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0438 \u0443\u0447\u0438\u0442\u044c\u0441\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u043c\u043d\u043e\u0433\u043e \u043b\u0435\u0442 \u0432\u043f\u0435\u0440\u0435\u0434.
4. \u0412\u044b \u0437\u043d\u0430\u0435\u0442\u0435, \u0447\u0435\u0433\u043e \u043e\u0442 \u0432\u0430\u0448\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0436\u0434\u0443\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0438 \u0432\u0441\u0435 \u0433\u0438\u043f\u043e\u0442\u0435\u0437\u044b \u0430\u043f\u0440\u043e\u0431\u0438\u0440\u0443\u0435\u0442\u0435 \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0439 \u0430\u0443\u0434\u0438\u0442\u043e\u0440\u0438\u0438.
5. \u0411\u043e\u043b\u044c\u0448\u043e\u0439 \u0441\u043f\u0435\u043a\u0442\u0440 \u0437\u0430\u0434\u0430\u0447 \u0438 \u0440\u0430\u0437\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0443\u0447\u0430\u0441\u0442\u0438\u0435, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0442\u0435, \u0447\u0442\u043e \u043f\u0440\u0438\u043d\u043e\u0441\u044f\u0442 \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u0440\u043e\u0444\u0438\u0442\u0430/\u0443\u0434\u043e\u0432\u043e\u043b\u044c\u0441\u0442\u0432\u0438\u044f.
6. \u041c\u044b \u0432\u0435\u0434\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u044b, \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u043e\u0432 \u0440\u044b\u043d\u043a\u0430 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 digital-\u043c\u0430\u0440\u043a\u0435\u0442\u0438\u043d\u0433\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043a\u0440\u0443\u043f\u043d\u0435\u0439\u0448\u0438\u0445 \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u043e\u0432 \u044d\u0442\u0438\u0445 \u0443\u0441\u043b\u0443\u0433 \u2014 \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u0434\u043e\u043b\u0433\u0438\u0435, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0438 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442 \u0431\u044b\u0441\u0442\u0440\u043e\u0435 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435 \u0441\u043a\u0438\u043b\u043b\u043e\u0432 \u043f\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0435 \u043a\u043e\u0434\u0430 \u0438 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044e \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b.

\u0427\u0435\u043c \u043c\u044b \u043b\u0443\u0447\u0448\u0435 \u043a\u0440\u0443\u043f\u043d\u043e\u0433\u043e \u043f\u0440\u0435\u0434\u043f\u0440\u0438\u044f\u0442\u0438\u044f?
1. \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0432\u0430\u0448\u0435\u0433\u043e \u0442\u0440\u0443\u0434\u0430 \u0431\u0443\u0434\u0443\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u043e \u0443\u0436\u0435 \u0447\u0435\u0440\u0435\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u0434\u0435\u043b\u044c \u0440\u0430\u0431\u043e\u0442\u044b.
2. \u0412\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u043e \u0432\u0438\u0434\u0435\u0442\u044c \u0440\u0435\u0430\u043a\u0446\u0438\u044e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043d\u0430\u0448\u0438\u0445 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432 \u043d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0441\u0432\u043e\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u044b, \u0447\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043c\u043e\u0442\u0438\u0432\u0438\u0440\u0443\u0435\u0442 \u043a \u0431\u044b\u0441\u0442\u0440\u043e\u043c\u0443 \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u043c\u0443 \u0440\u043e\u0441\u0442\u0443, \u0430 \u043d\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c 2 \u0433\u043e\u0434\u0430 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0443\u044e \u043f\u0440\u043e\u0446\u0435\u0434\u0443\u0440\u0443 \u0432 \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0435, \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0432\u044b \u0434\u0430\u0436\u0435 \u043d\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442\u0435.
3. \u0423 \u0432\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0443\u0447\u0440\u0435\u0434\u0438\u0442\u0435\u043b\u044f\u043c \u0438 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u043c \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430\u043c \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438, \u0447\u0435\u0439 \u043e\u043f\u044b\u0442 \u0432\u044b \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u0435\u044f\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0438 \u0437\u0430 \u0435\u0435 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438, \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u043d\u0435\u043e\u0431\u044a\u044f\u0442\u043d\u043e\u0433\u043e \u0438 \u043d\u0435\u0440\u0430\u0437\u0433\u043e\u0432\u043e\u0440\u0447\u0438\u0432\u043e\u0433\u043e \u00ab\u041e\u043a\u0435\u0430\u043d\u0430\u00bb \u0438\u0437 \u0421\u043e\u043b\u044f\u0440\u0438\u0441\u0430 \u0432 \u043a\u043e\u0440\u043f\u043e\u0440\u0430\u0446\u0438\u044f\u0445.

\u041f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u043c\u044b\u0435 \u0443\u0441\u043b\u043e\u0432\u0438\u044f
\u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e:
\u2014 8-\u0447\u0430\u0441\u043e\u0432\u043e\u0439 \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u0434\u0435\u043d\u044c, \u043d\u0430\u0447\u0430\u043b\u043e \u0440\u0430\u0431\u043e\u0442\u044b \u0441 8\u201311 \u0447\u0430\u0441\u043e\u0432, \u0438\u043b\u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0433\u0438\u0431\u043a\u0438\u0439 \u0433\u0440\u0430\u0444\u0438\u043a \u0440\u0430\u0431\u043e\u0442\u044b
\u2014 \u041e\u0431\u0443\u0447\u0435\u043d\u0438\u0435 \u0438 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u0438 \u0437\u0430 \u0435\u0435 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438
\u2014 \u0412\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u044b \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043d\u0435\u0431\u0435\u0437\u0440\u0430\u0437\u043b\u0438\u0447\u043d\u043e \u0432\u0430\u0448\u0435 \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u043a \u0436\u0438\u0437\u043d\u0438, \u0440\u0430\u0431\u043e\u0442\u0435 \u0438 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u0438
\u2014 \u0411\u043e\u043b\u044c\u0448\u043e\u0439 \u0441\u043f\u0435\u043a\u0442\u0440 \u0437\u0430\u0434\u0430\u0447 \u0438 \u0440\u0430\u0437\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0443\u0447\u0430\u0441\u0442\u0438\u0435, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0442\u0435, \u0447\u0442\u043e \u043f\u0440\u0438\u043d\u043e\u0441\u044f\u0442 \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u0440\u043e\u0444\u0438\u0442\u0430 / \u0443\u0434\u043e\u0432\u043e\u043b\u044c\u0441\u0442\u0432\u0438\u044f

\u041d\u0435\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e:
\u2014 \u041e\u0431\u0443\u0447\u0435\u043d\u0438\u0435 \u0438 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u0438 \u0437\u0430 \u0435\u0435 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438: \u0443\u0447\u0430\u0441\u0442\u0438\u0435 \u0432 \u0444\u043e\u0440\u0443\u043c\u0430\u0445, \u0432\u044b\u0441\u0442\u0430\u0432\u043a\u0430\u0445, \u043a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u044f\u0445 \u0438 \u043f\u0440\u043e\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u0435 \u043a\u0443\u0440\u0441\u043e\u0432 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0438\u043b\u0438 \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u0437\u0430 \u0441\u0447\u0435\u0442 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0438\u0440\u043e\u0432\u043e\u043a \u0432 \u0434\u043e\u0441\u0442\u043e\u0439\u043d\u044b\u0435 \u0433\u043e\u0440\u043e\u0434\u0430. \u041e\u0431\u0443\u0447\u0435\u043d\u0438\u0435 \u0438 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u0438 \u0437\u0430 \u0435\u0435 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438, \u043e\u043f\u043b\u0430\u0442\u0430 \u0443\u0447\u0435\u0431\u043d\u044b\u0445 \u043a\u0443\u0440\u0441\u043e\u0432, \u0443\u0447\u0430\u0441\u0442\u0438\u044f \u0432 \u043a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u044f\u0445, \u043a\u043e\u043c\u0430\u043d\u0434\u0438\u0440\u043e\u0432\u043e\u043a \u0438 \u0442. \u0434.
\u2014 \u041f\u043e\u043a\u0443\u043f\u043a\u0430 \u0440\u0430\u0437\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u044b\u0445 \u0433\u0430\u0434\u0436\u0435\u0442\u043e\u0432 \u0438 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0438\u043d\u0432\u0435\u043d\u0442\u0430\u0440\u044f \u0437\u0430 \u0441\u0447\u0435\u0442 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438

\u0422\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f:
\u2014 \u0412\u044b \u0437\u0430\u043d\u0438\u043c\u0430\u043b\u0438\u0441\u044c 2\u20137 \u043b\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442-\u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 (\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0435 \u0442\u0440\u0443\u0434\u043e\u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e \u043d\u0430 \u043f\u0440\u0435\u0436\u043d\u0438\u0445 \u043c\u0435\u0441\u0442\u0430\u0445 \u043d\u0430\u0441 \u043d\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442, \u043d\u043e \u043e\u0447\u0435\u043d\u044c \u0432\u0430\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u0434\u043e \u0438 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0443 \u043d\u0430\u0441 \u0432\u044b \u043e\u0442\u043d\u043e\u0441\u0438\u043b\u0438\u0441\u044c \u043f\u0440\u0435\u0434\u0435\u043b\u044c\u043d\u043e \u0446\u0438\u0432\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u043e \u043a \u043f\u043e\u0440\u044f\u0434\u043a\u0443 \u0432 \u0434\u0435\u043b\u0430\u0445 \u0438 \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u044f\u0445), \u0434\u043e \u044d\u0442\u043e\u0433\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043b\u0435\u0442 \u0432\u044b \u0443\u0447\u0438\u043b\u0438\u0441\u044c \u0432\u0435\u0431-\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f\u043c \u0438 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0432 \u0432\u0443\u0437\u0435 \u0438\u043b\u0438 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e, \u043d\u043e \u043e\u0447\u0435\u043d\u044c \u0443\u043f\u043e\u0440\u043d\u043e \u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u043e
\u2014 \u0412\u044b \u0433\u043e\u0442\u043e\u0432\u044b \u043e\u0442\u0434\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0435 100% \u0441\u0432\u043e\u0435\u0433\u043e \u0440\u0430\u0431\u043e\u0447\u0435\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u044d\u043d\u0435\u0440\u0433\u0438\u0438 \u0438 \u0438\u0437\u043e\u0431\u0440\u0435\u0442\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438
\u2014 \u0412\u044b \u0443\u043c\u0435\u0435\u0442\u0435 \u043a\u043e\u043d\u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043e\u0434\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435, \u043d\u043e \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438
\u2014 \u0421 \u0432\u0430\u043c\u0438 \u043f\u0440\u0438\u044f\u0442\u043d\u043e \u0438\u043c\u0435\u0442\u044c \u0434\u0435\u043b\u043e, \u0432\u044b \u0433\u043e\u0442\u043e\u0432\u044b \u0442\u0440\u0430\u0442\u0438\u0442\u044c \u0441\u0432\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0438 \u0441\u0438\u043b\u044b \u043d\u0430 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0435 \u0438 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e \u0431\u0443\u0434\u0443\u0442 \u0436\u0438\u0442\u044c \u0435\u0449\u0435 \u043c\u043d\u043e\u0433\u043e \u043b\u0435\u0442, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435, \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0432\u0430\u043c
\u2014 \u041e\u0433\u0440\u043e\u043c\u043d\u043e\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043a \u0434\u0435\u0442\u0430\u043b\u044f\u043c
\u2014 \u0421\u0442\u0440\u0435\u043c\u043b\u0435\u043d\u0438\u0435 \u043a \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0443 \u043f\u0440\u0438 \u0443\u043c\u0435\u043d\u0438\u0438 \u0443\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0441\u0440\u043e\u043a\u0438
\u2014 \u0413\u043e\u0442\u043e\u0432\u043d\u043e\u0441\u0442\u044c \u043d\u0435\u0441\u0442\u0438 \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u0437\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u044b\u0439 \u043f\u0440\u043e\u0434\u0443\u043a\u0442; \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0438\u0435 \u043d\u0435 \u043c\u0435\u043d\u0435\u0435
3\u20137 \u043b\u0435\u0442 \u0441 \u043d\u0438\u043c \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u044b \u0438 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u044b, \u0432 \u0435\u0433\u043e \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0438 \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0443\u0447\u0430\u0441\u0442\u0438\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u044b \u0438 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u044b, \u0430 \u0430\u0443\u0434\u0438\u0442\u043e\u0440\u0438\u044f \u0434\u043e\u043b\u0436\u043d\u0430 \u0435\u0436\u0435\u0434\u043d\u0435\u0432\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0443\u0434\u043e\u0432\u043e\u043b\u044c\u0441\u0442\u0432\u0438\u0435 \u043e\u0442 \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f
\u2014 \u0410\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u0430\u044f \u0431\u0435\u0441\u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043d\u043e\u0441\u0442\u044c, \u0441\u043f\u043e\u043a\u043e\u0439\u0441\u0442\u0432\u0438\u0435, \u0440\u0430\u0441\u0441\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u0443\u043c\u0435\u043d\u0438\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u0440\u043e\u043c\u0438\u0441\u0441\u044b
\u2014 \u041f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043a\u043e\u0434 \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u0433\u0434\u0430 \u043e\u043d \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0422\u0417, \u0432\u043d\u0435\u0434\u0440\u0435\u043d, \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d \u0432\u043e \u0432\u0441\u0435\u0445 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u044f\u0445, \u0441\u0434\u0430\u043d \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u0443 \u0438 \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a \u0441\u0447\u0438\u0442\u0430\u0435\u0442, \u0447\u0442\u043e \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0437\u0430\u0434\u0430\u0447\u0443 \u0440\u0435\u0448\u0430\u0435\u0442
\u2014 \u0413\u043e\u0442\u043e\u0432\u043d\u043e\u0441\u0442\u044c \u0431\u044b\u0441\u0442\u0440\u043e \u0440\u0430\u0441\u0441\u0442\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u043e \u0441\u0442\u0435\u0440\u0435\u043e\u0442\u0438\u043f\u0430\u043c\u0438
\u2014 \u0416\u0435\u043b\u0430\u043d\u0438\u0435 \u0438 \u0443\u043c\u0435\u043d\u0438\u0435 \u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0432\u0441\u0435\u0433\u0434\u0430 \u0438 \u0432\u0435\u0437\u0434\u0435
\u2014 \u0421\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0435 \u0443\u0441\u0438\u0434\u0447\u0438\u0432\u043e\u0441\u0442\u0438 \u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438
\u2014 \u0423\u043c\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u0432 \u0447\u0443\u0436\u043e\u043c \u043a\u043e\u0434\u0435; \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0441 \u0432\u0430\u0448\u0438\u043c \u043a\u043e\u0434\u043e\u043c \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043a\u043e\u043b\u043b\u0435\u0433\u0438
\u2014 \u0423\u043c\u0435\u043d\u0438\u0435 \u0431\u044b\u0441\u0442\u0440\u043e \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u043a\u043e\u043b\u043b\u0435\u0433\u0430\u043c \u043b\u0438\u0447\u043d\u043e \u0438\u043b\u0438 \u043d\u0430 \u0444\u043e\u0440\u0443\u043c\u0430\u0445, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0438\u0441\u043a\u0430\u0442\u044c, \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0432\u043d\u0435\u0434\u0440\u044f\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u0438 \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u0430 \u043d\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u043f\u043b\u043e\u0445\u0438\u0435 \u0438 \u043d\u0435\u043d\u0430\u0434\u0435\u0436\u043d\u044b\u0435
\u2014 \u041e\u0442\u043b\u0438\u0447\u043d\u043e\u0435 \u0437\u043d\u0430\u043d\u0438\u0435 php, MySQL, HTML5 + CSS3 \u0438 CSS-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 Bootstrap
\u2014 \u0423\u0432\u0435\u0440\u0435\u043d\u043d\u043e\u0435 \u0432\u043b\u0430\u0434\u0435\u043d\u0438\u0435 \u0447\u0438\u0441\u0442\u044b\u043c JS \u0438 \u0444\u0440\u0435\u0439\u0432\u043e\u0440\u043a\u0430\u043c\u0438 (jQuery)
\u2014 \u0425\u043e\u0440\u043e\u0448\u0435\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u044b AJAX, XML \u0438 JSON.
\u2014 \u0423\u043c\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u0432 \u0447\u0443\u0436\u043e\u043c \u043a\u043e\u0434\u0435
\u2014 \u0423\u043c\u0435\u043d\u0438\u0435 \u0431\u044b\u0441\u0442\u0440\u043e \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u043a\u043e\u043b\u043b\u0435\u0433\u0430\u043c \u043b\u0438\u0447\u043d\u043e \u0438\u043b\u0438 \u043d\u0430 \u0444\u043e\u0440\u0443\u043c\u0430\u0445, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0438\u0441\u043a\u0430\u0442\u044c, \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0432\u043d\u0435\u0434\u0440\u044f\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u0438 \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u0430 \u043d\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435

\u0411\u0443\u0434\u0435\u0442 \u043f\u043b\u044e\u0441\u043e\u043c:
\u2014 \u0412\u043b\u0430\u0434\u0435\u043d\u0438\u0435 \u0438 \u043d\u0430\u0432\u044b\u043a\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 Git, Bitbucket, GitHub Flow, PhpStorm, Asana \u0438 \u0434\u0440\u0443\u0433\u0438\u043c \u0438\u043d\u0432\u0435\u043d\u0442\u0430\u0440\u0435\u043c \u0434\u043b\u044f \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0440\u0430\u0431\u043e\u0442\u044b
\u2014 \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0432 \u0440\u0430\u0431\u043e\u0442\u0435 CSS-\u043f\u0440\u0435\u0434\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u043e\u0432 (SASS, LESS)
\u2014 \u041c\u0435\u0442\u043e\u0434\u043e\u043b\u043e\u0433\u0438\u044f \u0411\u042d\u041c, \u043a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u0432
\u2014 \u0417\u043d\u0430\u043d\u0438\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0445 \u0442\u0435\u043d\u0434\u0435\u043d\u0446\u0438\u0439 \u0432 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u0445 \u0438 \u043c\u0435\u0442\u043e\u0434\u043e\u043b\u043e\u0433\u0438\u044f\u0445 \u0432\u0435\u0440\u0441\u0442\u043a\u0438
\u2014 \u041e\u0442\u043b\u0438\u0447\u043d\u0430\u044f \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439, \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432, \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a \u0438 \u0438\u043a\u043e\u043d\u043e\u043a \u0432 \u0430\u0440\u0441\u0435\u043d\u0430\u043b\u0435
\u2014 \u041a\u0440\u043e\u0441\u0441\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0442\u043a\u0430 (\u0432\u0441\u0435 \u044d\u043a\u0440\u0430\u043d\u044b, \u0432\u0441\u0435 \u041e\u0421, \u0432\u0441\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0434\u0435\u0432\u0430\u0439\u0441\u044b)
\u2014 \u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0430\u044f, \u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u0430\u044f \u0438 \u0440\u0435\u0437\u0438\u043d\u043e\u0432\u0430\u044f \u0432\u0435\u0440\u0441\u0442\u043a\u0430
\u2014 \u0423\u043c\u0435\u043d\u0438\u0435 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0435\u0440\u0441\u0442\u043a\u0443 \u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u0435\u0440\u0432\u0438\u0441\u0430\u043c\u0438 \u043f\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f
\u2014 \u041e\u043f\u044b\u0442 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0441 Facebook, Twitter \u0438 Google Maps
\u2014 Adobe Illustrator \u0438 InDesign
\u2014 \u0423\u0432\u0435\u0440\u0435\u043d\u043d\u043e\u0435 \u0432\u043b\u0430\u0434\u0435\u043d\u0438\u0435 Adobe Photoshop \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u0437\u0430\u0434\u0430\u0447 \u043f\u043e \u0432\u0435\u0440\u0441\u0442\u043a\u0435
\u2014 \u0427\u0442\u0435\u043d\u0438\u0435, \u043a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c, \u0441\u0442\u0430 \u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u0438\u043d\u0447\u0435\u0439 \u0438 \u00ab\u041a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0430\u00bb \u0410\u0440\u0442\u0435\u043c\u0438\u044f \u041b\u0435\u0431\u0435\u0434\u0435\u0432\u0430, \u00ab\u041c\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u043e-\u043c\u0435\u0441\u044f\u0446\u0430\u00bb \u0438 \u00ab\u041f\u0441\u0438\u0445\u0431\u043e\u043b\u044c\u043d\u0438\u0446\u044b \u0432 \u0440\u0443\u043a\u0430\u0445 \u043f\u0430\u0446\u0438\u0435\u043d\u0442\u043e\u0432\u00bb
\u2014 \u0418\u043d\u0442\u0435\u0440\u0435\u0441 \u043a \u0432\u0435\u0431-\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f\u043c \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c \u0442\u0435\u043d\u0434\u0435\u043d\u0446\u0438\u044f\u043c \u0432 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u0445 \u0438 \u043c\u0435\u0442\u043e\u0434\u043e\u043b\u043e\u0433\u0438\u044f\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u0432\u043b\u0430\u0434\u0435\u043d\u0438\u0435 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0438\u0437 \u043d\u0438\u0445
\u2014 \u0423\u043c\u0435\u043d\u0438\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u0440\u043e\u0434\u0443\u043a\u0442-\u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430: \u0441\u0431\u043e\u0440 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439, \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043e\u0432, \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0442\u0440\u0443\u0434\u043e\u0437\u0430\u0442\u0440\u0430\u0442\u0430\u043c\u0438 \u0438 \u0441\u0440\u043e\u043a\u0430\u043c\u0438, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 (\u0434\u0430 \u043c\u044b, \u0441\u0447\u0438\u0442\u0430\u0435\u043c \u044d\u0442\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u043c, \u043a\u0430\u043a \u0438 \u0432\u0441\u0435, \u043a\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u0443\u0434\u043e\u0431\u043d\u044b\u0435 \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0438\u0441\u044b)
\u2014 \u0423\u043c\u0435\u043d\u0438\u0435 \u0447\u0438\u0442\u0430\u0442\u044c \u0438 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u043f\u043e-\u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u0438 \u0438 \u0433\u0440\u0430\u043c\u043e\u0442\u043d\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u043f\u043e-\u0440\u0443\u0441\u0441\u043a\u0438

\u0416\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u044b \u2014 JavaScript/Ajax/Json/jQuery, Bootstrap/Booster, \u043c\u0435\u0442\u043e\u0434\u043e\u043b\u043e\u0433\u0438\u0438 \u0411\u042d\u041c \u0438 \u043e\u043f\u044b\u0442 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 RESTful-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c\u0438.
\u041f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442\u0441\u044f \u043e\u043f\u044b\u0442 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 MVC-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u043c\u0438 \u2014 Yii \u0438\u043b\u0438 \u043f\u043e\u0445\u043e\u0436\u0438\u043c\u0438 (ASP.NET, CakePHP, CodeIgniter \u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 CMS (1\u0421-\u0411\u0438\u0442\u0440\u0438\u043a\u0441, UMI, Drupal, Joomla!).

\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u044f
\u041c\u044b \u0433\u043e\u0442\u043e\u0432\u044b \u043f\u043e\u0431\u0435\u0441\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u0441 \u0432\u0430\u043c\u0438 \u0438 \u0431\u0435\u0437 \u0440\u0435\u0437\u044e\u043c\u0435, \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441 \u0435\u0433\u043e \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u043e\u0439.
\u041d\u0430\u043b\u0438\u0447\u0438\u0435 \u043f\u043e\u0440\u0442\u0444\u043e\u043b\u0438\u043e \u043f\u0440\u0438 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u0438\u0438 \u0432\u0430\u0448\u0435\u0439 \u043a\u0430\u043d\u0434\u0438\u0434\u0430\u0442\u0443\u0440\u044b \u043d\u0430\u0441 \u0441\u0438\u043b\u044c\u043d\u043e \u043f\u043e\u0440\u0430\u0434\u0443\u0435\u0442.
\u041c\u044b \u0433\u043e\u0442\u043e\u0432\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043a\u0430\u043a \u0441 \u043e\u043f\u044b\u0442\u043d\u044b\u043c\u0438, \u0442\u0430\u043a \u0438 \u0441 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u043c\u0438, \u043d\u043e \u043f\u0435\u0440\u0441\u043f\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u044b\u043c\u0438 \u043a \u0431\u044b\u0441\u0442\u0440\u043e\u043c\u0443 \u0440\u043e\u0441\u0442\u0443, \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u0430\u043c\u0438. \u041f\u0435\u0440\u0432\u044b\u043c \u0433\u043e\u0442\u043e\u0432\u044b \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u043e\u0442\u0434\u0430\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0444\u0435\u0434\u0435\u0440\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u0435\u0431-\u043f\u0440\u043e\u0435\u043a\u0442\u044b, \u0432\u0442\u043e\u0440\u044b\u043c \u2014 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u0442\u0430\u0436\u0438\u0440\u043e\u0432\u043a\u0438 \u0438 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f \u0441 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u044b\u043c \u0432\u043b\u0438\u0432\u0430\u043d\u0438\u0435\u043c \u0432 \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441.

\u041e\u0444\u0438\u0441 \u2014 \u041c\u044f\u0441\u043d\u0438\u0446\u043a\u0430\u044f \u0443\u043b\u0438\u0446\u0430, \u043c. \u0427\u0438\u0441\u0442\u044b\u0435 \u043f\u0440\u0443\u0434\u044b. 8-\u0447\u0430\u0441\u043e\u0432\u043e\u0439 \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u0434\u0435\u043d\u044c, \u043d\u0430\u0447\u0430\u043b\u043e \u0440\u0430\u0431\u043e\u0442\u044b \u0441 8\u201311 \u0447\u0430\u0441\u043e\u0432 (\u043f\u043e \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u0438\u044e \u0441 \u0432\u0430\u043c\u0438).

«, «keySkills»: null, «driverLicenseTypes»: null, «mapDisabled»: false, «cianPlacemarks»: <"enabled": true, "originalRequest : null>>

, а все картинки имели атрибут alt=»image001.jpg». Они, безусловно, получат втык и под чутким надзором будут исправлять это.

Вывод

Кратко перечислим по порядку изложенные выше навыки хорошего фронтэнд-разработчика:

  • Валидная pixel-perfect вёрстка
  • Проектирование интерфейсов
  • Работа с серверными технологиями
  • JavaScript во всех ипостасях
  • Оптимизация веб-приложений

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

Хочу стать frontend разработчиком: базовые знания и план обучения

Итак, друзья, вы решили встать на путь программирования? Жму руку, это решение изменит вашу жизнь. Это всегда интересная и востребованная работа на стыке интеллекта и творчества, работа о том, как принести пользу людям, сделать мир чуточку лучше. Возможности реализации в ней бесконечны.

В программировании много разных областей: веб-разработка, мобильная, десктопные приложения, разработка ОС, драйверов для железа. Веб-разработка — одна из самых интересных и востребованных областей. К её плюсам можно отнести то, что ваш продукт лежит в Интернете, и чтобы его увидеть, достаточно набрать адрес в браузере любого устройства, не нужно ничего качать и устанавливать. К тому же, с помощью современных инструментов, зная веб, можно разрабатывать сразу и мобильные, и десктопные приложения. Веб состоит из frontend (то, что видит клиент в браузере) и backend (серверная часть, занимается хранением, обработкой и выдачей данных). Я предлагаю начать знакомство с вебом именно с фронтенда.

Цукерберг рекомендует:  Javascript - Как картинку и текст вытащить с дом и поместить в поп-ап

Да, кстати, меня зовут Роман Латкин, я почти 10 лет варюсь в веб-разработке. Когда я начинал, всё было одновременно просто и сложно. Просто, потому что для построения приложения много знать было не нужно: вот HTML, немного CSS, чуть-чуть JavaScript — и готово. Сложно, потому что разработка велась через боль. Сейчас множество этой боли вылечено с помощью громадной экосистемы инструментов, но она очень пугает новичков, они не знают, как подступиться к фронтенду, с какой стороны подойти. Мне повезло, я наблюдал развитие фронтенда почти с начала, и у меня в голове всё неплохо уложилось. И я хочу в помощь начинающим разработчикам передать это понимание. Надеюсь, после прочтения этой статьи, вы будете чётко знать, каким путём идти, куда копать и по какому плану развиваться.

Три составляющих фронтенда

Весь фронтенд состоит из трёх составляющих: HTML (содержание и разметка), JavaScript (логика) и CSS (внешний вид, позиционирование). HTML описывает содержание страницы и выглядит примерно так: . CSS описывает стили и выглядит вот так: table < background: #ccc; >. JavaScript — язык программирования, описывает логику приложения, а также обращается к элементам HTML, изменяя структуру и содержание страницы (пример кода: var count = 5; count = count + 5; console.log(count) // 10 ).

Helastel, удалённо, от 150 000 ₽

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

Любой процесс познания можно представить в виде буквы «Т», где горизонтальная линия — широкое понимание, вертикальная — глубокое. У идеального специалиста буква Т большая и красивая, равномерная. Если она вытянута в одну сторону, она некрасива, уродлива; такой специалист мало полезен в боевых делах. Он может либо глубоко разбираться в чём-то одном, но чуть шаг в сторону, и он непригоден; либо поверхностно разбираться во всём, но при этом ничего не уметь. В первую очередь необходимо максимально развить широкую составляющую, чем мы сейчас и займёмся — постараемся максимально широко охватить все аспекты фронтенда, не углубляясь. А потом вы займётесь углублением, которое останется вам на самостоятельную работу.

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

Первые сайты

Вначале люди писали на чистом HTML, рисовали внешний вид на чистом CSS, делали логику на чистом JavaScript. Типичное старомодное приложение — это когда серверная логика генерирует HTML (отвечая на запрос посетителя, сервер берёт данные из базы данных и вставляет их в HTML) и отдаёт его вместе со статическими файлами стилей и клиентской логики на JavaScript, которой в то время (около 10 лет назад) было немного. При совершении перехода на другую страницу весь этот процесс повторялся. То есть раньше как такового разделения на фронтенд и бэкенд не было, было одно цельное приложение, которое одновременно и работало с базой данных, и генерировало HTML.

jQuery

Писать на чистом JavaScript надоедало и появился хороший инструмент — jQuery, который с помощью удобного синтаксиса позволял обращаться к элементам страницы и выполнять с ними какие-то действия. Появлялись различные плагины, готовые решения, стало проще и интереснее.

Но приложения развивались, объём клиентской логики рос, и постепенно всё это превращалось в большую лапшу. Чтобы её распутать, нужна была какая-то форма, архитектура.

Умные Парни попробовали перенести на фронтенд архитектурный шаблон с серверной части — MVC (модель-представление-контроллер). Этот шаблон диктует правило, что есть модель, которая описывает данные. Например, модель пользователя, модель фильма, модель отзыва. Есть контроллер, который обрабатывает запросы, например «показать по такому-то адресу страницу со списком фильмов». И есть представление, которое отвечает за отображение данных в HTML, в которое контроллер передаёт готовые данные, полученные из базы данных/API.

Здесь началась история single page application, SPA — приложений, которые загружаются один раз, а затем при переходе по страницам обращаются к серверу за данными по API. Этот подход называется AJAX. Вместо того, чтобы генерировать HTML на стороне сервера, сервер отдаёт клиентскую логику приложения один раз. Переходя на другую страницу, например с главной страницы на страницу поиска отелей, приложение запрашивает с сервера данные в чистом виде (к примеру, информацию об отелях), без тегов HTML (как правило в формате JSON), и самостоятельно генерирует представление.

Шаблон MVC на фронтенде был хорош, прекрасно работал, но было излишне сложно. Angular, Backbone — представители этой вехи истории. Они, к слову, живут и сейчас, но я в них глубоко не разбирался.

Процессоры и сборщики

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

В вебе важна скорость, поэтому нельзя просто так отдавать посетителю большие файлы, они будут идти по сети слишком долго. Поэтому все ресурсы сжимаются с помощью разных минификаторов. JavaScript чаще всего с помощью uglify (он удаляет пробелы, делает названия переменных короче и ещё много чего интересного). В CSS удаляются пробелы и могут ещё объединяться некоторые свойства. И всё это собирается в один или несколько файлов вместо 10-20, один файл скачать гораздо быстрее, и на сервер нагрузка меньше.

Что касается CSS, появлялись так называемые препроцессоры. Они расширяют синтаксис CSS, добавляют туда кучу разных возможностей — вложенные блоки, переменные, циклы. Даже просто отсутствие точек с запятой очень помогает и ускоряет написание кода?.

Препроцессор — это такая программа, которая запускается и компилирует этот сахарный синтаксис в чистый CSS. Использование препроцессоров позволяет избежать повторного использования кода, выстраивает архитектуру, и по сути превращает язык описания стилей в язык программирования. Изучите какой-либо инструмент, и вы поймете. Я для себя сейчас выбрал Stylus; есть ещё несколько, например — LESS, SASS.

Чуть позже придумали постпроцессоры. Они, в отличие от препроцессоров, обрабатывают уже готовый CSS, модифицируя его: например, добавляя дополнительные свойства к уже существующим, или изменяя названия классов, делая их уникальными, чтобы ничего не сломалось. Их чаще всего используют для поддержки кроссбраузерности, о которой мы ещё поговорим ниже. PostCSS — вот этот самый постпроцессор, он ещё обладает большой библиотекой плагинов, упрощающих жизнь.

JavaScript

Насчёт JavaScript: исторически так сложилось, что этот язык изначально был слишком простой и сейчас постоянно развивается, обрастая новыми инструментами. Основная его версия, которая работает во всех современных браузерах, называется ES5. В 2015-м году появился усовершенствованный стандарт JavaScript ES2015, или ES6, который даёт много новых инструментов упрощённого описания логики. Только он не работает в старых браузерах, поэтому используют препроцессор Babel для компиляции его в ES5. То есть код пишется с помощью современного синтаксиса ES6, а для работы в браузере сразу компилируется в ES5.

Есть ещё разные способы писать нормальный код, которые сводятся к тому же: код пишется на своём «особом» языке (как в случае с ES6), а потом транслируется в JavaScript. Вот некоторые из этих «особых» языков программирования:

  • TypeScript — он добавляет к JavaScript множество инструментов из серьёзного программирования — классы, интерфейсы, модули и др., а также упорядочивает типы переменных. Он больше для того, чтобы писать массивную логику, пользуясь приёмами строгой типизации, и подходит скорее для отдельных крупных логических модулей;
  • CoffeeScript — делает код намного более удобным, понятным, человечным;
  • и ещё много разных — Dart, Elm, я их глубоко не изучал.

Для упрощения написания HTML, чтобы не ломать пальцы о теги, стали использовать препроцессоры HTML. Они позволяют, например, вместо громоздкой конструкции Ссылка с кучей угловых скобочек писать просто a(href=»#») Ссылка , а потом компилировать это всё в HTML. Очень рекомендую сразу же освоить Pug, сокращающий объем написанного практически вдвое.

Чтобы удобно вставлять динамические данные в HTML, отделяя данные от разметки, придумали шаблонизаторы. Например, в разметке пишется

Менеджеры пакетов

Чтобы не изобретать велосипеды, разработчики давно научились делиться между собой готовыми участками кода, модулями. Во фронтенде для этого активно используется менеджер зависимостей npm. На npmjs.com можно найти огромное количество модулей, плагинов, библиотек на все случаи жизни. Прежде чем писать что-то своё, поищите там.

Позже появился усовершенствованный менеджер зависимостей Yarn, он делает всё быстрее и стабильнее, не буду сейчас углубляться, почему.

Менеджеры задач

Для того, чтобы централизованно управлять всем этим зоопарком, появлялись менеджеры задач. Они позволяют в одном месте описать все процессы и этапы сборки приложения. Это Grunt, Gulp, Webpack. Последний — наиболее подходящий для сборки веб-приложения. Он может взять на себя много забот, легко и просто компилировать все ресурсы, будь то скрипты, стили, разметка, картинки — в любом формате (Stylus, Less, Sass, ES6, TypeScript, jpg, png) из любых исходников — в единые бандлы, сборки файлов js, CSS, HTML, которые будут работать в браузере.

Компонентная архитектура

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

Что такое компонент? Это самостоятельный и независимый участок разметки со своей логикой и стилями. У компонента есть свое текущее состояние. Открыто ли меню, активна ли вкладка, и т.п. Состояние всего приложения можно представить как дерево состояний различных компонентов.

Разметка HTML зависит от текущего состояния, изменилось состояние — изменилась разметка. Это реализуется с помощью технологии Virtual Dom — когда DOM (дерево HTML-элементов страницы) рассчитывается сначала виртуально и в конце расчёта отображается в реальном DOM, в разметке. За счёт этой идеи достигли более высокой производительности приложений, ведь одна из самых тяжёлых частей работы браузера — операции с DOM (работа с деревом объектов HTML).

Здесь важно ввести ещё одно понятие — реактивные приложения. Это, упрощённо говоря, когда вместо прямого изменения DOM/Virtual Dom при изменении данных, вводится объект состояния, модель данных, и на её изменения подписывается обработчик, который уже меняет DOM. То есть чтобы что-то поменять в представлении, HTML (например, таблица со списком пользователей), нам достаточно изменить свойство модели (добавить в массив нового пользователя), всё остальное произойдет само (пользователь появится в html-таблице). Вы, наверное, замечали, что некоторые сайты медленно работают, а другие молниеносны. Скорее всего, первый на jQuery и работает с реальным DOM, второй — на одном из реактивных инструментов, с которыми мы познакомимся далее.

React

Итак, эти концепции (Virtual Dom, компоненты, реактивность) улеглись в новом инструменте создания клиентских приложений от Facebook — React. На текущий момент он является одним из лидеров индустрии, наиболее часто используемым во фронтенде. Он обладает развитой экосистемой — можно найти огромное количество готовых компонентов и дополнений.

Управление состоянием

Но между компонентами нужно было наладить связь, им нужно общаться между собой. Нажали на кнопку — изменился цвет. Можно строить эту взаимосвязь напрямую, но это быстро может превратиться в кашу. Тут придумали шаблон централизованного управления состоянием, когда есть одно место, где хранится состояние всего приложения в текущий момент времени. Это, сильно упрощая, такой JavaScript-объект со свойствами. Это состояние изменяется с помощью вызова действий и мутаций, но не будем сейчас так углубляться. Паттерн называется Flux. Самая популярная имплементация управления состоянием для React — Redux.

React, хоть он и обрёл большую популярность и развитую экосистему, на практике оказался слишком голый, сложный, многословный. Для того, чтобы сделать простую форму, нужно много-много лишнего кода написать и кучу дополнений поставить. Для того, чтобы создать простое приложение, нужно ещё много чего установить, и вариантов для простых вещей очень много, легко можно потеряться — экосистема хоть и огромная, но в ней сложно ориентироваться; внешне одинаковые приложения могут быть совсем по-разному устроены внутри. А концепция JSX — переплетение кода и разметки, выглядит не столь удачно, сложно потом понимать, что же такое хотел сказать автор кода, сложно менять разметку.

Vue.js

Тут появился Vue.js — гибкий, эффективный и простой в освоении веб-фреймворк, который несёт в себе всё те же концепции, но они в нём выглядят гораздо удачнее. Он объединил в себе всё лучшее из Angular и React, более чётко ответил на вопрос «что есть что». Из коробки Vue содержит уже большое количество инструментов и возможностей, которые в несколько строк позволяют писать объёмную логику. Разработка значительно упростилась.

Vue принёс ещё несколько интересных концепций, как, например, однофайловые компоненты — файлы, которые содержат в себе сразу логику, разметку и стили, и они там не переплетаются, как в случае с React и JSX. Vue из коробки позволяет использовать любые препроцессоры, которые очень органично вписываются в однофайловые компоненты. И имеет множество готовых встроенных решений, даже свою имплементацию Flux. Vue обладает отличной документацией на русском языке, которая научит вас лучшей практике во фронтенде, от сборки приложения до автотестов.

Изоморфные приложения, SSR

В разговоре об одностраничных приложениях мы упустили одну важную деталь: когда поисковый робот обращается к одностраничному приложению, он ничего не видит — только пустую страницу с тегами body без контента. В старомодных приложениях сервер обратился бы к базе данных, сгенерировал представление и отдал бы готовый HTML с текстом страницы. В случае с одностраничным приложением сервер отдаёт пустую страницу, которая лишь после инициализации подтягивает данные и показывает представление, чего конечно же поисковый робот не сделает. Таким образом, использовать одностраничные приложения для сайтов, ориентированных на контент, SEO, недопустимо.

Это недопущение обходилось множеством хаков и костылей, пока не появилась концепция SSR — Server-Side Rendering. Умные Парни научили весь JavaScript, который работал в браузере, выполняться на сервере с помощью NodeJS (технология создания серверных приложений с помощью браузерного языка JavaScript). Это, конечно, ввело свои ограничения, но жить стало легче. Теперь можно было написать логику один раз на одном языке, и она сразу же работала и на сервере (при первом обращении посетителя/робота генерировался HTML с контентом страницы) и в браузере (последующие переходы посетителя). Это и называется изоморфное, универсальное приложение.

Схема простая: при первом заходе посетитель отправляет запрос на сервер NodeJS, который обращается к API-серверу, берёт данные в виде JSON и отрисовывает их в HTML, возвращая посетителю. Дальше уже приложение живёт в браузере, при последующих переходах по страницам оно напрямую обращается к API-серверу за данными и уже непосредственно в браузере отрисовывает представление.

В React имплементация этой схемы делается разными и сложными путями. В качестве готовых решений есть для этого, например, фреймворк Next.js. В документации Vue есть целый раздел, посвященный SSR. Там указан фреймворк Nuxt — Vue + SSR. С его помощью можно довольно легко писать такие универсальные приложения.

CSS-фреймворки, адаптивность

Теперь мы сменим тему на попроще и поговорим о вёрстке.

Исторически, чтобы создать сетку страницы, её каркас, в первые времена верстальщики использовали таблицы. Потом начали использовать блоки, или контейнеры, появилась контейнерная вёрстка. Положение блоков устанавливалось с помощью свойства позиционирования float: right/left .

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

Адаптивность — это способность страницы выглядеть одинаково хорошо на всех устройствах, будь то ноутбук, планшет или мобильный телефон. Адаптивность достигается с помощью медиа-запросов — блоков условий в CSS, при каких разрешениях экрана какие CSS-свойства должны работать. Её можно также добиться с помощью умелого применения flexbox-контейнеров.

Все веб-приложения в основном типичны, состоят из строк, колонок, таблиц, кнопок и других UI-элементов. Чтобы не писать их каждый раз, в помощь сайтостроителям создавались CSS-фреймворки, где вся разметка уже продумана — достаточно применить нужный класс. Они содержат в себе множество готовых UI-элементов. Самый популярный — конечно же Bootstrap, сейчас уже 4-я версия. Есть ещё Bulma, тоже довольно хороший. И ещё множество менее популярных. Обычно в CSS-фреймворках адаптивность идёт из коробки, важно лишь правильно пользоваться предлагаемыми инструментами. CSS-фреймворки станут отличной основой практически в любом вашем веб-приложении и хорошим началом освоения навыков правильной вёрстки. Их стоит использовать, когда нужны типичные элементы пользовательского интерфейса, адаптивность, а это 99% кейсов в вебе.

Кроссбраузерность

Это слово означает способность сайта отображаться одинаково в разных браузерах. Как правило, CSS-фреймворки берут эту заботу на себя, но я вкратце расскажу, как это достигается. Для начала нужно обнулить все свойства стандартных элементов (разные браузеры отображают стандартные элементы — списки, таблицы и др. по-разному). В CSS-фреймворках для этого часто можно увидеть специальный файлик — reset.css. Следующее — исторически так сложилось, что браузеры развивались по-разному, и теперь некоторые CSS-свойства нужно прописывать специально для каждого браузера, используя префиксы — -webkit , -moz . Эту работу можно делать автоматически с помощью вышеупомянутого PostCSS и его autoprefixer.

Методологии

Чтобы вёрстка не превратилась в суп, ничего внезапно не ехало, всё было чётко и красиво — существуют специальные подходы, сборники правил о том, как называть тот или иной класс. Они очень вписываются в компонентную архитектуру, надо сказать, с них она и началась. Правило то же — всё есть компонент, или по-другому «блок». У блока есть свои элементы, мини-блоки, из которых и состоит блок. Изменяют отображение блока модификаторы, применяя к нему то или иное свойство. Изучите БЭМ от Яндекса или SUIT CSS, прежде чем начинать заниматься верстанием.

В путь!

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

  1. Изучите основы вёрстки — HTML, CSS. Хватит только основ — остальное наработается в процессе решения задач. Сразу для работы поставьте себе редактор VS Code. Отдельное внимание уделите навыкам работы с Flexbox и CSS grid.
  2. Изучите Bootstrap или bulma.io. Попробуйте создать каркас простого сайта с их помощью; изучите их исходники, они дадут вам хорошее понимание правильной архитектуры проекта. Примерно уже здесь, а лучше как можно раньше, пробуйте собирать какие-нибудь проектики, решать какие-нибудь задачки, нарабатывайте практику.
  3. Изучите JavaScript. Да, тут тоже хватит только основ. Пробегитесь по синтаксису ES6, чтобы примерно его понимать. Попробуйте разобрать, как реализованы те или иные UI-компоненты в вышеупомянутых CSS-фреймворках.
  4. Изучите основы Git. Это система контроля версий, и она уже на данном этапе хорошо вам послужит, позволит фиксировать поэтапно изменения в коде и хранить их.
  5. Изучите BEM/SuitCSS, что больше понравится.
  6. Поймите синтаксис Stylus и Pug.
  7. Начните изучать документацию к Vue.js. Она предельно понятна и на русском языке. В процессе изучения вы узнаете множество смежных вещей — компонентная архитектура, сборка с помощью webpack, работа с API, SSR, flux, автотестирование.
  8. Пробегитесь по библиотеке lodash — она вам очень поможет при написании кода на JavaScript, для более лаконичного кода без велосипедов.
  9. Изучите автотестирование фронтенда. Это важный пункт, если вы сразу его освоите, облегчите себе дальнейшую жизнь. Не откладывайте его на потом. Рекомендую такие инструменты, как Jest и TestCafe. В Vue.js есть хороший инструментарий для автотестов из коробки.
  10. Создайте собственное приложение, используя полученные знания. Придумайте идею или возьмите ту, что у вас давно сидит в голове; не просто так вы ведь решили стать программистом! В дополнение изучите транслируемые в JavaScript языки — TypeScript, CoffeeScript.

Готово! Дальше только практика, вернее, она должна была начаться с первого пункта, а сейчас достигнуть своего апогея. Теперь вы мастер фронтенда! Хотя кто знает, может, к тому времени опять выйдет в свет какой-нибудь инструмент, который всё перевернёт во фронтенде, и придётся полностью менять свои понимания?

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

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих