В начале нулевых веб выглядел так, как хотели разработчики браузера Internet Explorer. Разработчики остальных браузеров его догоняли и старались повторить функциональность и «стандарты» для обратной совместимости. Конкурентное преимущество IE начало постепенно спадать, когда другие браузеры начали добавлять в свои продукты новые возможности и стандартизировать их работу между собой. Для упрощения работы с браузерными возможностями появлялись open
Что должен знать и уметь frontend-разработчик:
- английский язык на уровне чтения;
- Git — система контроля версий и профиль на GitHub. Помогут разобраться: Pro Git Скотта Чакона и Бена Страуба, Git за 15 минут и GitHowTo;
- System CLI — bash, zsh, cmd, Power Shell, так как многие инструменты являются строго консольными. Помогут разобраться: Advanced
Bash-Scripting Guide (на русском) и «Основы BASH» на «Хабре»; - взаимодействие
клиент-сервер . Поможет разобраться: How the Internet Works for Developers. Pаrt 1: Overview & Frontend; - редакторы кода/IDE — Atom, Sublime Text 3, Vim, WebStorm, etc. Поможет разобраться: Comparison of text editors на «Википедии»;
- инструменты разработчика в Chrome, Firefox, Safari для отладки результатов в браузере. Помогут разобраться: Chrome DevTools OverviewWhat are browser developer tools?;
- базовое конфигурирование
веб-сервера , чтобы запустить свою статику: Apache2, Nginx; - базовые навыки использования средств контейнерной изоляции
develop-окружения : Vagrant, Docker; - HTML5 и семантическая разметка. Помогут разобраться: руководства и справочные материалы по HTML от Mozilla Development;
HTML-препроцессоры : Slim, Pug (Jade), Twig;- CSS3. Помогут разобраться: руководства и справочные материалы по HTML от Mozilla Development;
- подходы к написанию CSS — OOCSS, SMACSS, OPOR, БЭМ. Помогут разобраться: «Способы организации
CSS-кода » на «Хабре» и доклад Елизаветы Селивановой и Ирины Левиной; - Flexbox. Поможет разобраться: «Полное руководство по Flexbox» на Frontender Magazine;
CSS-препроцессоры : LESS, SCSS, Stylus;CSS-построцессор : PostCSS;- CSS Frameworks: Bootstrap 3, Foundation;
- Системы сеток и отзывчивость: Susy, Rupture, Lost Grid;
CSS-модули : Помогут разобраться:«CSS-модули» на «Хабре»,CSS-modules в блоге Глена Маддерна;- ES5, ES2015. Помогут разобраться: руководства и справочные материалы по JavaScript от Mozilla Development, гид по ES6 на Github;
- что такое this, глобальные контексты, контекст функции, контекст стрелочной функции, методы call, apply, bind. Поможет разобраться: Ryan Morr: Understanding Scope and Context in JavaScript;
- что такое колбэки и замыкания. Поможет разобраться: Ivaylo Gerchev Demystifying JavaScript Closures, Callbacks and IIFEs;
- что такое Ajax и как он работает,
кросс-доменные запросы. Помогут разобраться: What is AJAX? от Tutorials Point, руководства и справочные материалы по HTTP access control (CORS) от Mozilla Developer Group (пока только на английском); - You Might No Need jQuery — jQuery и как обойтись без него;
- полифиллы;
- реализация отложенных вызовов функций в момент асинхронных событий Q и объект для отложенных и асинхронных вычислений Promise. Помогут разобраться: справка по Q, справка по Promise от Mozilla Developer Group;
- качество и однообразие кода: EditorConfig, ESLint, Stylint;
- тестирование: Jasmine, Mocha, Karma, Protractor;
- понимать и различать React, Angular, Angular2, Vue, Express. Поможет разобраться: обсуждение на Quora;
- что есть DOM и как он работает. Поможет разобраться справка от Mozilla Developer Group;
- Shadow DOM;
- браузерные события. Поможет разобраться: справка от Mozilla;
- Cookie, SessionStorage, localStorage. Поможет разобраться: справка от Mozilla Developer Group;
кросс-браузерная вёрстка и поддержка браузерами разных новых стандартов. Помогут разобраться: The Principles OfCross-Browser CSS Coding на Smashing Magazine, caniuse.com, Modernizr, Autoprefixer;- стратегии разработки Progressive Enhancement, Graceful Degradation. Поможет разобраться: Progressive Enhancement: What It Is, And How To Use It? на Smashing Magazine;
- принципы адаптивной и респонсивной верстки. Поможет разобраться: Итан Маркотт. Отзывчивый
веб-дизайн ; - оптимизация контента и его доставки. Поможет разобраться: The Essential CDN Guide на Incapsula;
- менеджеры пакетов NPM и Bower. Поможет разобраться: обсуждение на Stack Overflow;
- модули и зависимости в JS — Require.js, AMD, Browserify, Webpack;
- инструменты для быстрого старта проекта: Yeoman, Tars CLI;
- автоматизация процессов: Webpack, Gulp, Grunt, Browsersync. Поможет разобраться: скринкаст Ильи Кантора «Что такое Gulp? Сравнение с Grunt и Webpack»;
Web-animations; Web-fonts , SVG;- графические редакторы Adobe Photoshop, Sketch;
- принципы UI/UX дизайна;
- уметь отвечать на эти вопросы.
С чего может начать frontend junior:
- любой редактор текста + браузер последних версий;
- курсы про непосредственно веб и около него:
- полезные статьи про индустрию в общем:
- Илья Климов. Frontend Dev: хороший, плохой, злой;
- «Необходимый минимум
фронтенд-разработчика » на Frontender Magazine;
- про БЭМ:
За чем следить и что изучать frontend-разработчику:
- Frontender. Info.
Краудсорс-перевод полезных западных материалов; Веб-стандарты . Крупноерусскоязычное VK-сообщество с чатом, новостями и конференциями;- Radio JS. Подкаст о
веб-разработке; - Frontlip. Ещё один подкаст о
веб-разработке; - CSS Tricks. Полезный ресурс со статьями и решениями по вёрстке и коду;
- Codyhouse. Набор сниппетов;
- @dan_abramov. Твиттер русскоязычного разработчика React в команде Facebook;
- @andrey_sitnik. Твиттер разработчика в Evil Martians и автора PostCSS. 18+;
- @addyosmani. Твиттер участника команды Google Chrome, создающего Developers Tools;
- @paul_irish. Твиттер ещё одного участника команды Google Chrome, создающего Developers Tools;
- github.com/talgautb/frontenders. Небольшой список
фронтенд-разработчиков , за которыми стоит следить; - 2ality. Блог о JS.
Список дополняется.