Html5 css3 — Ищу друзей по специальности front-end.


Содержание

Изучить HTML5, CSS3, JS, JQ, Bootstrap для работы Front-end специалистом

Давно задумывался над сменой рабочего профиля. Сейчас припекло. Раньше работал на примитивном html, но потом как-то ушел с этой стези. Прошло лет 6, перепробовал разные сферы, везде были хорошие результаты, но с моим внутренним «Я» что-то не стыкуется. Вот и решил что надо все-таки заниматься тем, что нравится. Начинаю сейчас работать как бизнес-аналитик. Но хочется создавать прекрасное и в будущем открыть свой бизнес, тк в рамках текущих проектов приходится создавать архитектуру, интуитивно получается нелохо работать с UI\UX, а верстальщиков не хвататет тольковых. Вот и начал прохождение базовых курсов на Htmlacademy. Далее книги, продвинутые курсы + курсы на других ресурсах. Хочется досканально изучить азы, а потом уже приступить к практике. Сроки вроде бы и сжатые, но в целом время позволяет.

По мере выполнения этапов буду дополнять их новыми задачами.

Надеюсь услышать рекомендации, приемлю любую помощь и информацию по теме.

Критерий завершения

Уверенная верстка PSD макетов, адаптивная верстка, моб. приложение на html5 framework

Личные ресурсы

Минимум 3ч в сутки либо 21ч в неделю отводить на практические занятия.

Экологичность цели

Хочу сменить профиль — стать Front-end разработчиком. Реализовать собственные идеи.

Вопросы для собеседования кандидату на должность Front-end разработчика

Это перевод популярного репозитория от html5bp — Front-end Job Interview Questions (en), который существует с 2009 года. Список вопросов составлялся и дополнятся известными во front-end людьми, поэтому на этот список можно положиться. Перевод делал не я (вернее я хотел, но он оказался уже переведен).

Замечание: Этот репозиторий содержит подборку вопросов, которые могут быть использованы на собеседованиях на должность front-end разработчика. Здесь предлагаются лишь идеи, не нужно задавать все вопросы сразу (иначе в один час точно не уложитесь).

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

Содержание

Общие вопросы: [↑]

  • Вы пользуетесь Твиттером?
    • Если да, то кто присутствует в вашей ленте?
  • Кого из мировых front-end разработчиков вы знаете?
    • А российских front-end’щиков?
  • У Вас есть аккаунт на GitHub?
    • Если да, то за какими интересными проектами вы следите?
  • Какие блоги Вы читаете?
  • Какие системы управления версиями вам приходилось использовать?
  • Расскажите о своей среде разработки (ОС, редактор, браузер(ы), прочие инструменты)
  • Опишите последовательность Ваших действий, когда вы создаете новую Web-страницу
  • Можете ли пояснить разницу между progressive enhancement и graceful degradation?
    • Бонус, если также расскажете про feature detection (определение возможностей браузера)
  • Объясните, что означает «Семантическая разметка»
  • Какой Ваш основной браузер для разработки и какими инструментами Вы в нем пользуетесь?
  • Как можно оптимизировать загрузку внешних ресурсов на странице?
    • Комбинация из потенциальных решений:
      • Конкатенация
      • Минификация
      • Использование CDN
      • Кэширования
      • и т.д.
  • Каково преимущество в подгрузке внешних ресурсов с нескольких доменов?
    • Сколько ресурсов браузер может одновременно качать с одного домена?
  • Назовите три способа уменьшения времени загрузки страницы (воспринимаемого или реального)
  • Если Вы присоединились к проекту, где для форматирования используются табы, а Вы привыкли использовать пробелы, как Вы поступите?
    • Предложите использовать EditorConfig (editorconfig.org)
    • Останетесь верным своим привычкам
    • Выполните команду :retab!
  • Используете ли приёмы для ускорения написания кода (сниппеты, Emmet)?
  • Знакомы ли с шаблонизаторами (Smarty, HAML etc.)
  • Реализуйте примитивное слайд-шоу
    • Бонус, если Вы это сделаете без использования JS
  • Какие инструменты Вы используете для тестирования производительности кода?
    • JSPerf (jsperf.com)
    • Dromaeo (dromaeo.com)
    • и т.д.
  • Если бы у Вас была возможность освоить новую технологию в этом году, что бы это было?
  • Объясните важность стандартов и комитетов по стандартам
  • Что такое FOUC (Flash Of Unstyled Content)? Как его избежать?

Вопросы по HTML: [↑]

  • Для чего нужен doctype и сколько разновидностей Вы можете назвать?
  • В чем разница между standards mode и quirks mode?
  • Какие ограничения накладывают стандарты XHTML?
    • Могут ли возникнуть проблемы при подаче страниц с типом application/xhtml+xml ?
  • Как следует оформлять страницу, в которой контент может быть на разных языках?
    • Что нужно иметь в виду при разработке многоязычных сайтов?
  • Можно ли использовать синтаксис XHTML в HTML5?
  • Как использовать XML в HTML5?
  • Чем полезны data- атрибуты?
  • Если рассматривать HTML5 как открытую web-платформу, на чем она строится, из каких компонентов состоит?
  • Объясните разницу между cookies, sessionStorage и localStorage.
  • Знакомы ли с подводными камнями вёрстки почтовых шаблонов?
  • Какая разница между GET и POST ?

Вопросы по JavaScript: [↑]

  • Какими js-библиотеками Вы пользовались?
  • Вы когда-нибудь заглядывали в исходный код библиотек/фреймворков, которыми пользовались?
  • Чем JavaScript отличается от Java?
  • Что-такое хэш-таблица?
  • Что такое неопределенные (undefined) и необъявленные (undeclared) переменные?
  • Что такое замыкание и как/для чего его используют?
    • Как вы предпочитаете их использовать?
  • Где обычно используются анонимные функции?
  • Объясните «JavaScript module pattern» и где он (паттерн) применяется
    • Бонус, если упомянута чистота глобального пространства имен
    • Что, если Ваш модуль не заключен в пространство имен?
  • Как Вы организуете свой код? (module pattern, наследование)
  • В чем разница между host-объектами и нативными объектами?
  • В чем разница между последними двумя строчками:
  • В чем разница между .call и .apply ?
  • Что делает и для чего нужна функция Function.prototype.bind ?
  • Когда Вы оптимизируете свой код?
  • Объясните, как работает наследование в JavaScript?
  • Где до сих пор используется document.write() ?
    • В большинстве генерируемых баннеров, хотя так делать не рекомендуется
  • В чем разница между feature detection (определение возможностей браузера), feature inference (предположение возможностей) и анализом строки user-agent?
  • Расскажите об AJAX как можно более подробно
  • Объясните, как работает JSONP (и почему это не настоящий AJAX)
  • Вы когда-нибудь использовали шаблонизацию на JavaScript?
    • Если да, какие библиотеки использовали? (Mustache.js, Handlebars etc.)
  • Объясните, что такое «hoisting»
  • Объясните event bubbling
  • В чем разница между «атрибутом» (attribute) и «свойством» (property)?
  • Почему не следует расширять нативные JavaScript объекты?
  • Почему следует расширять нативные JavaScript объекты?
  • В чем разница между событиями document load и document ready ?
  • В чем разница между == и === ?
  • Как получить параметры из URL’а текущего окна?
  • Объясните same-origin policy в контексте JavaScript
  • Объясните event delegation
  • Какие Вы знаете паттерны организации наследования в JavaScript?
  • Сделайте так, чтобы этот код работал:
  • Опишите принцип мемоизации (избежание повторных вычислений) в JavaScript
  • Почему тернарный оператор так называется?
  • Что такое арность функции?
  • Что делает строчка «use strict»; ? Какие достоинства и недостатки от её использования?

Примеры кода на JavaScript [↑]

Вопрос: Какое значение возвращает данное предложение?
Ответ: 3

Вопрос: Какое значение возвращает данное предложение?
Ответ: «goh angasal a m’i»

Вопрос: Чему равно window.foo?
Ответ: «bar»,
только если выражение window.foo было ложным, иначе переменная сохранит своё изначальное значение

Вопрос: Что покажут эти два alert?
Ответ: «Hello World» и ReferenceError: bar is not defined

Вопрос: Чему равно foo.length?
Ответ: 2

Вопрос: Чему равно foo.length?
Ответ: undefined

Вопросы по jQuery: [↑]

  • Объясните «chaining».
  • Объясните «deferreds».
  • Какие Вы знаете приемы оптимизации кода, использующего jQuery?
  • Что делает .end() ?
  • Как добавить пространство имён к обработчику событий? Для чего это нужно?
  • Назовите 4 разных вида аргументов, которые принимает функция jQuery()?
    • Селектор (строка), HTML (строка), Callback (функция), HTMLElement, объект, массив, массив элементов, объект jQuery etc.
  • Что такое очередь эффектов (fx queue)?
  • В чем разница между .get() , [] , и .eq() ?
  • В чем разница между .bind() , .live() , и .delegate() ?
  • В чем разница между $ и $.fn ? Что вообще такое $.fn ?
  • Оптимизируйте данный селектор:

Вопросы по CSS: [↑]

  • Что такое «reset» CSS и для чего он нужен?
  • Объясните, что такое плавающие элементы (floats) и как они работают?
  • Какие вы знаете методы запрета обтекания (clearing) и какие где применяются?
  • Что такое CSS спрайты? Как они реализуются на странице или сайте?
  • Какие Ваши любимые методы подмены текста картинкой (image replacement) и когда Вы их используете?
  • CSS property hacks, conditionally included .css files…
  • Как Вы обеспечиваете отображение страниц в старых/ограниченных браузерах?
    • Какие приёмы/процессы Вы при этом используете?
  • Какими способами можно визуально скрыть элемент (оставив его доступным для экранного диктора, screen reader)?
  • Вы когда-нибудь использовали сеточную верстку (grid system, grid design)? Если да, какая Ваша любимая?
  • Приходилось ли вам использовать или реализовывать media queries или верстку под мобильные устройства?
  • Приходилось ли вам стилизовать SVG?
  • Как оптимизировать страницы для печати?
  • Какие есть подводные камни в оптимизации производительности CSS?
  • Вы используете CSS препроцессоры? (Sass, Compass, Bourbon, Stylus, LESS)
    • Если да, расскажите, что вам в них нравится и не нравится?
  • Как Вы сверстаете макет, который использует нестандартные шрифты?
    • Webfonts (сервисы вроде Google Webfonts, Typekit, Fontsquirrel etc.)
  • Объясните, как браузер определяет, на какие элементы накладывать CSS стили?

  • Приходилось ли сталкиваться с Retina-дисплеями?
  • Слышали ли о системе БЭМ (Блок-Элемент-Модификатор)?
    • Если да, то в чем её суть? Расскажите о системе нотификации селекторов.

«Светская беседа»: [↑]

  • Самое крутое, что Вы когда либо делали и чем гордитесь?
  • Вы знаете секретный жест HTML5-банды?
  • Что Вы больше всего любите в Ваших инструментах разработки?
  • У Вас есть какие-нибудь личные проекты?
  • Возьмите листок бумаги и напишите в столбик буквы A B C D E. Теперь отсортируйте столбик в алфавитном порядке по убыванию, не написав ни строчки кода.
    • Засеките, через сколько времени кандидат перевернет листок
  • Пират или ниндзя?
    • Бонус за комбинацию. Аргументированную. +2 за зомби-пират-ниндзя-обезьяну
  • Чем бы Вы занимались, если бы не Web-разработкой?
  • Какая Ваша любимая «фишка» Internet Explorer?
  • Закончите предложение: Brendan Eich и Doug Crockford являются ____ языка JavaScript.
  • jQuery: хорошая библиотека или великая библиотека? Тема для дискуссии…

Первоначальные авторы [↑]

  • @bentruyman (bentruyman.com)
  • @cowboy (benalman.com)
  • @roger_raymond (twitter.com/iansym)
  • @ajpiano (ajpiano.com)
  • @paul_irish (paulirish.com)
  • @SlexAxton (alexsexton.com)
  • @boazsender (boazsender.com)
  • @miketaylr (miketaylr.com)
  • @vladikoff (vladfilippov.com)
  • @gf3 (gf3.ca)
  • @jon_neal (twitter.com/jon_neal)
  • @wookiehangover (wookiehangover.com)
  • @darcy_clarke (darcyclarke.me)

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

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

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

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

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

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

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

20 ноября в 18:30, Москва, беcплатно

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

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

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

Первые сайты

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

jQuery

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

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

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

Цукерберг рекомендует:  Javascript - Как объединить 2 плагина

Здесь началась история 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.

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

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

Цукерберг рекомендует:  Монетизация мобильного приложения с помощью рекламы

Frontend-разработчик / Верстальщик 15000

Требования

5—6 курс, выпускники
Полная занятость

Срок проведения

01 дек 2020 — 29 фев 2020

Какие задачи выполнять?

— Верстка интернет проектов (для платформы 1С-Битрикс); — Интеграция шаблонов в CMS; — Участвовать в развитии интересных внутренних проектов компании.

Условия стажировки

Рабочая стажировка в течение 3 месяцев с возможностью дальнейшего трудоустройства в штат. — Плавающее начало рабочего дня (с 9.00 до 12.00), суббота, воскресение — выходные; — Работу в современном офисе и БЦ в 3 минутах ходьбы от м. Чкаловская; — Отсутствие жесткой субординации и дресс-кода внутри компании; — Работу в дружной компании профессионалов; — Интересные проекты; — Широкие возможности для самореализации, профессионального и карьерного роста; — Комфортное рабочее место и работу на современном оборудовании; — Обучение за счет компании, участие в выставках, семинарах, вебинарах; — Чай/кофе, печеньки в офисе; — Корпоративные праздники и поездки.

Какие навыки требуются?

Требования (основные): — Знание HTML и CSS (в том числе сетки и CSS-фреймворки, HTML5/CSS3); — Умение работать с CSS-препроцессорами; Знание JavaScript, AJAX и JjQuery; — Умение верстать сайты валидно и кроссбраузерно (IE включительно); — Базовое знание Photoshop (как правило, на уровне резки макетов). Требования (дополнительные): — Опыт верстки для проектов под управлением CMS 1С-Битрикс; — Знание популярных фреймворков и библиотек: (jQuery, Angular.JS); — Понимание принципов построения бекэнда и разбираться в серверных технологиях (PHP (5.4 и старше)); — Знание инструментов дебаггинга; — Знание инструментов контроля версий; — Использование SVG; — Знание NodeJS. В чем должен разбираться: — кросс-браузерная и кросс-платформенная разработка; — прогрессивное улучшение и изящная деградация; — мобильная разработка; — адаптивная и отзывчивая верстка; — веб-шрифты; — принципы SEO-оптимизации.

Следите за приглашениями работодателей в разделе Отклики

От нуля до героя фронтенда (Часть 1)

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

Этот гайд поможет вам сориентироваться в изучении фронтенд-разработки. В нем собраны учебные ресурсы, уже доказавшие свою эффективность, и подробные объяснения.

Руководство разбито на две части для более простого усвоения материала. Часть 1 посвящена разработке интерфейсов на HTML и CSS. Часть 2 будет о Javascript, фреймворках и паттернах дизайна.

Основы HTML и CSS

В разработке фронтенда все начинается с HTML (рус. — здесь и далее примечание переводчика с указанием языка статьи по ссылке) и CSS (рус.). HTML и CSS контролируют то, что вы видите на странице. HTML диктует содержимое в то время как CSS регулирует стили и раскладку.

Для начала прочитайте пособия по HTML (рус.) и CSS (рус.) от Mozilla Developer Network (MDN). MDN предоставляет пошаговые объяснения важных концепций HTML и CSS. К тому же каждая глава длинной всего в один экран и проиллюстрирована интерактивными демо на CodePen и JSFiddle.

После прочтения этих материалов загляните на курс Создай сайт (англ.) от CodeAcademy. Потребуется всего несколько часов для прохождения этого курса. Он даст хорошую основу для построения сайтов на HTML и CSS. Если вы хотите больше, то Построение веб-форм (англ.) — еще одно руководство от CodeAcademy, которое научит вас создавать и стилизовать веб-формы.

Чтобы попрактиковаться в CSS попробуйте CSS Diner (англ.). Это забавная игра с задачками по CSS. Другой важный аспект HTML и CSS — раскладка. LearnLayout (рус.) интерактивный учебник, показывающий как создавать раскладки на HTML и CSS.

Так же изучите как пользоваться Google Fonts (англ.) при помощи статьи Основы Google Font API (англ.) от CSSTricks или Руководство по Google Font API (рус.). Типографика — это фундаментальная основа интерфейса. Когда у вас появится время, я крайне рекомендую вам прочитать эту бесплатную онлайн-книгу Professional Web (англ.) от Donny Truong. Она научит вас всему, что вы должны знать о типографике во фронтенд-разработке.

Изучая все эти ресурсы, не беспокойтесь особо о том, чтобы все запомнить. В первую очередь сосредоточьтесь на понимании того, как HTML и CSS взаимосвязаны.

Практика основ HTML и CSS

Теперь, когда вы имеете представление об основах HTML и CSS, давайте повеселимся. В этом разделе есть два эксперимента для вашей практики создания сайтов и интерфейсов. Я использую термин “эксперимент” поскольку в ходе эксперимента вы осознаете на сколько сильно ваш успех зависит от ваших неудач.

Эксперимент 1

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

Используя CodePen, вы убиваете двух зайцев сразу. С одной стороны вы практикуете HTML и CSS. C другой стороны вы создаете основу для портфолио с иллюстрациями вашего прогресса. Мы так же будем использовать Dribbble, который полон вдохновляющего дизайна.

Идите на Dribbble и найдите дизайн, код для которого вы сможете написать за пару часов. Я выбрал несколько примеров, с которых вы можете начать: 1, 2, 3, 4 и 5. Я выбирал дизайны, ориентированные в первую очередь на мобильную разработку, потому что они менее сложны, чем их аналоги для обычных экранов. Тем не менее вы вольны выбрать вариант для десктопов.

Когда вы определились с дизайном, идите и попробуйте сверстать его на CodePen. Если вы застряли, помните что StackOverflow (англ.) ваш друг. Другой полезной практикой будет пойти на такие сайты, как Medium, AirBnB и Dropbox и при помощи инструментов разработчика (англ.) посмотреть как реализована разметка и стили. Так же взгляните на некоторые примеры на CodePen. Я прикрепляю несколько хороших ссылок:

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

Если у вас нет за плечами опыта в дизайне, вероятнее всего, ваш дизайнерский глазомер не настроен. Фронтенд-разработчик с хорошим дизайнерским чутьем будет в состоянии отличить хороший дизайн и сверстать его идеально. Я написал статью несколько недель назад о том, как развить свое дизайнерское чутье (рус.).

Эксперимент 2

Надеюсь, первый эксперимент дал вам определенную уверенность в написании HTML и CSS. Для эксперимента 2 мы заглянем на ряд сайтов, затем напишем код нескольких компонентов.

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

  • Dropbox for Business: Попробуйте повторить их секцию с баннерами (так называемые hero image (англ.))
  • AirBnB: Попробуйте повторить их футер
  • PayPal: Попробуйте повторить их навигацию
  • Invision: Попробуйте повторить секцию регистрации (signup) в нижней части страницы
  • Stripe: Попробуйте повторить секцию оплаты

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

Вы можете использовать CodePen для своих экспериментов или выполните их на своем компьютере. Если вы планируете работать локально, то так же можете скачать этот пример проекта в качестве шаблона или создать файлы с нуля. Я советую вам использовать редакторы Atom или Sublime.

К тому же помните, что вы всегда можете посмотреть HTML или CSS любого сайта. Просто кликните правой кнопкой мыши на странице или на определенном элементе, выберите “Просмотреть код” и появится панель с HTML кодом в левой части и CSS кодом в правой. После окончания верстки или в момент, когда вы в тупике проинспектируйте свой код и посмотрите, как взаимодействуют ваши HTML и CSS.

Лучшие практики HTML и CSS

То, что вы узнали выше — основы HTML и CSS. Следующим шагом будет изучение лучших практик. Лучшие практики представляют из себя набор правил, которые улучшат качество вашего кода.

Семантичная разметка

Одним из лучших правил для HTML и CSS это написание семантичной разметки. Хорошая веб-семантика означает использование подходящих HTML тегов и “говорящих” названий классов в CSS, которые будут передавать структурный смысл.

Например, тег h1 говорит нам, что вложенный текст является важным заголовком. Другим примером является тег footer, который говорит нам что элемент должен располагаться внизу страницы. Для дальнейшего изучения прочтите Основы семантической верстки на HTML5 (рус.) и Для чего нужна семантика в именах классов (англ.) от CSSTricks.

Соглашение об именах в CSS

Следующая важная хорошая практика в CSS собственно соглашение об именах. Хорошее именование, как семантичная разметка, передает смысл и помогает сделать наш код предсказуемым, удобным для чтения и поддержки. Вы можете почитать о разных соглашениях в статье OOCSS, ACSS, BEM, SMACSS: что это? Что мне использовать? (англ.) или Правильный CSS: OOCSS, SMACSS, BEM и SASS (рус.).

В общем я предлагаю вам начать с простых соглашений об именах, которые будут вам интуитивно понятны. Со временем придет понимание, с каким лично вам удобнее всего работать. Чтобы посмотреть, как большие компании типа Medium используют в своей работе BEM можете почитать CSS у Medium чертовски хорош (англ.). В этой статье вы так же узнаете, что составление эффективного набора CSS правил это процесс итеративный.

Сброс CSS

Браузеры имеют небольшие различия при отрисовке стилей, начиная от отступов и до высоты строк. По этой причине всегда сбрасывайте CSS. MeyerWeb — самый популярный способ. Если вы хотите копнуть глубже, то можете почитать Создайте свой собственный файл Reset.css (англ.).


Кроссбраузерная поддержка

Кроссбраузерная поддержка означает что ваш код поддерживает большую часть современных брузеров. Некоторые свойства CSS^ например transition, требуют префиксов (англ.) для их верной работы в разных браузерах. Можете почитать о префиксах в статьях CSS Vendor Prefixes (англ.) или Вендорные префиксы (рус.). Главное что вы должны запомнить — тестируйте свои сайты во всех браузерах, включая Chrome, Firefox и Safari.

Препроцессоры и постпроцессоры CSS

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

Препроцессоры представляют из себя расширения для языка CSS, которые добавляют наворотов типа переменных, миксинов и наследования. Два самых главных препроцессора Sass и Less. На 2020 год Sass более распространен. Bootstrap, популярный CSS фреймворк, переключился с Less на Sass. К тому же когда большинство людей заводят речь о Sass, то они на самом деле говорят о SCSS (рус.).

Постпроцессоры CSS вносят изменения в код после того, как он был написан или после компиляции препроцессора. Например, некоторые постпроцессоры, тот же PostCSS, имеют плагины для автоматического добавления префиксов.

Когда вы впервые открываете для себя препроцессоры и постпроцессоры, появляется соблазн использовать их везде. Тем не менее начните с простого и добавляйте переменные, миксины только там, где это действительно необходимо. Статья, о которой я упоминал ранее, CSS у Medium чертовски хорош (англ.), так же рассказывает о том, какие возможны излишки при работе с препроцессорами.

Система сеток и отзывчивость

Сетки в CSS это структура, позволяющая вам “укладывать” элементы горизонтально и вертикально.

Такие фреймворки, как Bootstrap, Skeleton и Foundation предусматривают стили, управляющие строками и колонками в раскладке. В то время как фреймворки, безусловно, полезны, стоит понимать саму суть работы сеток. Прекрасные обзоры на эту тему: Понимание CSS сеток (англ.) и Don’t Overthink Grids (англ.).

Одна из главных возможностей, которую дают сетки, это обеспечение отзывчивости вашего сайта. Отзывчивость ( responsiveness) означает, что сайт изменяет свои размеры в зависимости от ширины окна браузера. Долгое время отзывчивость достигалась при помощи медиавыражений в CSS (рус.): правил, срабатывающих только при определенных размерах экрана.

Вы можете почитать больше на тему медиавыражений в статье Введение в медиавыражения (англ.). Так же, поскольку мы вступили в эру mobile-first (рус.), загляните в Введение в медиавыражения Mobile-First (англ.).

Отработка лучших практик HTML и CSS

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

Эксперимент 3

В рамках эксперимента 3 выберите один из прошлых экспериментов и проведите рефакторинг своего кода с использованием советов, которые вы узнали выше. Рефакторинг означает редактирование вашего кода так, чтобы он стал проще, в том числе в плане читаемости.

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

Ниже несколько вопросов, на которые вы должны себе ответить в процессе рефакторинга.

  • Не двусмысленны ли названия классов? Через полгода я все еще смогу понять, что означает название класса?
  • Семантичен ли мой HTML и CSS? Можно ли с первого взгляда определить структуру и взаимоотношения элементов?
  • Использую ли я одни и те же цвета в коде? Не будет ли логичнее вынести их в переменные Sass (англ.)?
  • Работает ли мой код в Safari так же хорошо, как в Chrome?
  • Нельзя ли заменить часть кода на систему сеток, например Skeleton?
  • Не слишком ли часто я использую !important? Как я могу это исправить?

Эксперимент 4

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

В качестве последнего эксперимента создайте собственный сайт-портфолио. Для фронтенд-разработчика портфолио—самый важный актив. Сайт-портфолио предназначен для демонстрации ваших работ. Что еще более важно, это постоянно обновляющийся отчет вашего прогресса в разработке. Поэтому создавайте портфолио даже если у вас 1–2 работы.

Если первый вариант вашего портфолио не идеален — это нормально! Портфолио пройдет через множество итераций (рус.). В первую очередь важно использовать при разработке все ваши навыки.

Будьте в курсе

До тех пор, пока HTML и CSS не выйдут из употребления, важно оставаться в курсе всех событий в области фронтенда.

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

Учитесь на примерах

Лучшим способом обучения является работа с примерами, практика. Вот несколько руководств по стилям (стайлгайдов (рус.)) и соглашений, которые помогут вам стать более эффективным разработчиком.

Стайлгайды

Стайлгайды в вебе это наборы CSS компонентов и паттернов, которые могут быть использованы на разных сайтах. Ключевой вещью для обучения является понимание того, как повторно использовать компоненты на основе HTML и CSS и не нарушать принцип “Не повторяйся” (рус.).

Соглашения о коде

Соглашения о коде призваны сделать ваш код читабельным и легким в поддержке. Некоторые из этих ссылок, например CSS Guidelines (англ.), являются набором советов по улучшению написания HTML и CSS в то время, как другие ссылки, например Github internal CSS toolkit and guidelines (англ.) являются примерами эффективного кода.

Сворачиваемся

Надеюсь, к концу этой статьи вы познакомились с HTML и CSS и обзавелись парой проектов. Лучшими способами изучения фронтенда являются постоянные эксперименты и работа над проектами. Помните — каждый разработчик с чего-то начинал. И лучше начать сегодня, чем завтра.

Эта статья первая из двух запланированных. Во второй части мы поговорим об интерактиве с помощью JavaScript и библиотеках/фреймворках. Кроме того если вы хотите чтобы я подробно на чем-то остановился или у вас появились вопросы, то не стесняйтесь писать мне в Twitter.

P.S. Поделитесь этой статьей с друзьями, если она вам понравилась. Это много значит для меня.

Нашли ошибку? Воспользуйтесь функцией Private notes: выделяете текст с ошибкой, нажимаете на символ замка в появившемся дудле и оставляете свой комментарий. Спасибо!

Html5 css3 — Ищу друзей по специальности front-end.

Вопросы кандидату на должность фронтенд-разработчика

Замечание: Этот репозиторий содержит подборку вопросов, которые могут быть использованы на собеседованиях на должность фронтенд-разработчика. Здесь предлагаются лишь идеи, не нужно задавать все вопросы сразу (иначе в один час точно не уложитесь).

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

В настоящее время этот проект поддерживают:

С тех пор он был активным благодаря этим замечательным людям.

  • Что вы изучили вчера/на этой неделе?
  • Что вас привлекает в программировании?
  • С какой технической сложностью вы недавно столкнулись и как с ней справились?
  • Какие методы для повышения производительности вы использовали при создании или обслуживании сайта?
  • Можете ли вы описать некоторые методы SEO, которые вы использовали в последнее время?
  • Можете ли вы объяснить общие принципы относительно фронтенд-безопасности или недавние проблемы, которые вы решили?
  • Какие действия вы лично предприняли в недавних проектах для повышения удобства использования вашего кода?
  • Расскажите о предпочитаемой среде разработки.
  • С какими системами контроля версий вы знакомы?
  • Можете ли вы описать порядок действий при создании новой веб-страницы?
  • Если у вас есть 5 разных файлов со стилями, какой лучший способ интегрировать их в сайт?
  • Можете ли вы описать разницу между прогрессивным улучшением и изящной деградацией?
  • Как можно оптимизировать загрузку внешних ресурсов на странице?
  • Сколько ресурсов браузер может одновременно загружать с одного домена?
    • Какие есть исключения?
  • Назовите три способа уменьшения времени загрузки страницы (воспринимаемого или реального).
  • Если вы присоединились к проекту, где для форматирования используются табы, а вы привыкли использовать пробелы, как вы поступите?
  • Опишите, как бы вы реализовали примитивное слайд-шоу.
  • Если бы у вас была возможность освоить новую технологию в этом году, что бы это было?
  • Объясните важность стандартов и комитетов по стандартам.
  • Что такое FOUC (Flash Of Unstyled Content)? Как его избежать?
  • Объясните, что такое ARIA и скринридеры, а также как сделать сайт доступным.
  • Какие преимущества и недостатки у CSS и JavaScript анимаций?
  • Что означает CORS и какую проблему решает?
  • Для чего нужен doctype ?
  • Как следует оформлять страницу, содержимое которой может быть на разных языках?
  • На что необходимо обратить внимание при разработке мультиязычных сайтов?
  • Для чего нужны атрибуты, начинающиеся с data- ?
  • Представьте HTML5 как открытую веб-платформу. Из каких блоков состоит HTML5?
  • Объясните разницу между cookie , sessionStorage и localStorage .
  • Объясните разницу между
Цукерберг рекомендует:  Безопасность и взлом БД для начинающих

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Как быстро найти работу front-end разработчиком?

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

Но менять для каждой — нет. Это уже неуважение к себе. Выслали на сотню контор — с двух (образно) придёт ответ. Это уже результат. А дальше рыть, копать, выполнять тестовые, набиваться на интервью (и при этом не просто сидеть на них и мекать на сложные вопросы, а выносить оттуда уроки и делать выводы).

Короче, по честному, после курсов по фронт-енду надо запилить отдельные курсы как по этому фронт-енду на работу попасть. Ибо там и случая 95%, и везения, и работы в поте лица не меньше.

У меня несколько студентов буквально через пару недель после выпуска попадали на работу. Почему? Звёзды так сошлись. Кому-то я подкинул вакансию, кто-то чуть не споткнулся и на работу упал, кто-то забомбил чуть-не все ИТ-конторы города резюме.

Фриланс проекты › Требуется html — верстальщик (frontend developer) Требуется html — верстальщик (frontend developer)

Требуется на постоянную удаленную основу html- верстальщик

— знание HTML‚ CSS (HTML5 и CSS3);
— блочная, адаптивная, кроссбраузерная верстка ;
— нарезка psd для верстки (Photoshop) ;
— базовые знания Javascript;

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

Отвечайте, пожалуйста, четко. Не нужно «готов выполнить ваш заказ»,»хочу сотрудничать», писать только свои контакты. Кратко и по смыслу — первое, второе, третье..и цена, указывайте обязательно цены. И в конце напишите что то о себе, выделите себя среди остальных — почему именно вас я должен выбрать.

Список тестовых заданий от подписчиков #1

В vk получил следующее предложение:

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

Не вопрос! В конце каждого ТЗ краткий комментарий от редакции.

Если вам есть о чем рассказать — пишите в vk/telegram. Так же у мы проводим разборы тестовых заданий.

Задания с собеседования Web-программист/верстальщик

Задачи:

  • верстка сайта по макетам;
  • поддержка существующих сайтов;
  • интеграция сайтов на платформы UMI, WordPress.

опыт работы верстальщиком, web-разработчиком от 1 года;

  • HTML5, CSS3, Адаптивная кроссбраузерная верстка;
  • JavaScript, jQuery, AJAX;
  • желательно знание PHP и XSLT (возможно обучение);
  • базовые знания Photoshop для работы с готовыми макетами;
  • общие знания предмета: клиент-сервер, понимание ООП.
  • Общение перед заданием:

    Сначала общение с HR общие вопросы о прошлом месте работы, что разрабатывали, с чем работали и причина ухода

    Потом общение с лидом вопросы про общие вопросы про верстку (про способы центрования, позиционирование). Вопросы про CMS(с какими и как работал), немного Javascript

    Задание

    • Сверстать макет
    • В шапке сайта изображение заполняет весь блок и располагается по центру.
    • Контент страницы может быть от 1 до 1000 строк.
    • Количество пунктов и подпунктов правого меню может варьироваться в диапазоне от 1 до 10.
    • Эффект для разворачивания подменю выбирается самостоятельно.
    • Боковое меню является фиксированным при прокрутке до тех пор, пока блок соцсетей не оказывается на расстоянии 50 пикселей от футера. При этом следует учитывать различные размеры меню, контента и экрана.

    От редакции «Без воды»:

    Адекватное задание для требуемой позиции. Стандартная задача, разумные временные затраты

    Тестовое задание из вакансии junior front-end developer

    Требования к разработчику

    • HTML5/CSS/LESS/SASS/SCSS
    • Работа со сборщиками GULP/WEBPACK
    • Базовые навыки Javascript/ES5/ES6

    Общение перед заданием:

    Примерно минут 5 пообщались в скайпе о том что делал и какие у меня примерно знания после чего добавили в гит и трелло с задачами
    На выходе нужно было небольшое CRUD приложение на react, делать только фронт, бэк уже был.

    Задачи

    Создать компонент для отображения таблицы с данными (Таблица с фейковыми данными из JSON’a, данные любого вида)

    • Получить данные с backend’a и вывести полученные данные в табличку, описание запросов было предоставлено.
    • Кнопка добавления новой записи
    • Запись посылаем на бэкэнд
    • Кнопка удаления записи напротив каждой строки таблицы, по клику запись удаляется запросом на бэкэнде, по успеху — на фронтэнде удаляется
    • Кнопка редактирования напротив каждой строки таблицы
      • По клику на нее, в таблице все инпуты становятся редактируемыми и на месте кнопки редактировать, появляется кнопка сохранить
      • По нажатию на сохранить, отправляется запрос на бэкэнд, по успеху — инпуты опять становятся ридонли и кнопка меняется на «редактировать».

    Задания с собеседования HTML-верстальщик

    Задачи:

    • Адаптивная блочная верстка страниц pixel perfect (мобильные устройства, десктоп)
    • Табличная вёрстка писем
  • HTML5 (tags)
  • CSS3 (flexbox, grid layout, media queries, pixel ratio, etc …)
  • Markdown
  • Stylus
  • SVG fonts
  • Gulp
  • Git
  • NPM (Yarn)
  • опыт вёрстки под мобильные устройства.
  • Общение перед заданием:

    Вопросы про то с какими сборщиками работал, как происходит отрисовка сайта(введение имени, запрос, отрисовка документа),какие навыки JS имеются. Как происходила работа совместно с дизайнером.

    На выбор давалось одно из трех заданий

    Задание 1

    Вариант №1:

    Нужно выводить текстовые сообщения в html блок (общий вид приведён в приложенном файле «messages.jpg»).

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

    Блок 2 — отображает полный список сообщений, удалённые сообщения помечены знаком «х», новые сообщения добавляются в конец списка.

    Блок 3 и 4 для отправки сообщений и включения в очередь для показа.

    Вариант №2 (для усложнения):

    На одном из серверных языков с подгрузкой данных с сервера. Данные будут добавляться в блок 2 и также отображаться по очереди в п1.

    Не функциональные требования:

    • Разрешено использовать js фреймворки
    • Желательно, чтобы html был максимально чист (минимум вёрстки, скриптов в html)
    • Кроссбраузерная вёрстка, в т.ч. для мобильных устройств.

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

    Задание 2

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

    Для отображения график можно использовать сторонний компонент, например
    http://www.highcharts.com/demo/ или любой другой.

    Вёрстка должна быть адаптированной с поддержкой мобильных устройств (на одном из изображений есть пример). Должна быть возможность скрывать некоторые строки из таблицы (например удалением через настройки).

    Нужно в html+js (можно использовать фреймворки) сверстать. Данные для таблицы и графика нужно хранить в json-файле. Бэкенд вообще не нужен.

    Задание 3

    Нужно сверстать расписание работы сотрудников. На графике отображено плановое время работы сотрудника (закрашенные прямоугольники) и фактическое (закрашено штриховкой). На вход приходит 2 набора данных в json формате, которые содержат 2 набора строк. На выходе ожидаем: html страницу + js + css + json-файл с данными. БД & бэкэнд не требуются. В json-файле должны быть данные с приложенной картинки.

    Вариант №1. Облегченная задача (минимум):

    • Отобразить план работы всех сотрудников;
    • В диапазоне дат ограничиваем принудительно максимальную длительность – 4 дня;
    • У одного сотрудника может быть несколько смен в выбранном фильтре дат в одном ресторане (как у Гоку Петра), нужно отобразить оба отрезка в одной строке, как на приложенной картинке;
    • При щелчке на смене сотрудника отображать плановую длительность этой смены.

    Вариант №2. Задача нормальной сложности:

    • Дополнительно к минимуму: отображать факт, прогулы, опоздания, ранние уходы;
    • Максимальная длительность в фильтре не ограничена.

    Важно:

    Перед выполнением оцените время на выполнение задания, выберите вариант (1 или 2) и дату выполнения задания.

    Задание 1/2 неплохо. Задание 3 уже сложновато.

    Задания с собеседования на Frontend разработчика

    Веб-приложение для проведения тестирования (es5)

    Требования:

    • Хорошее знание Javascript, css, html
    • Знание любого UI framework (React/Redux, Vue, Angular and etc.). Мы работаем с React/Redux
    • Желательно знание webpack, TypeScript, SASS (SCSS)

    Общение перед заданием:
    Общие вопросы про верстку, алгоритмы и базовые понятия js/react , в чем фишка реакт, взаимодействие между родителем/потомком. Несколько вопросов про es5/es6 зачем были созданы, какие преимущества дают

    Написать веб-приложение для проведения тестирования.

    • Вид начального экрана — название теста, кнопка запуска.
    • Вид экрана вопроса — текст вопроса, варианты ответов, кнопка «Продолжить».
    • Вид экрана результата — текст «Ваши баллы:», и кнопка «Пройти еще раз»

    Back-end: создать базу данных с помощью Entity Framework подходом Code First, в которой
    будут храниться вопросы тестирования. Заполнить БД данными из скрипта (приложен к заданию).

    Сервис должен реализовывать интерфейс ITestService из диаграммы классов.

      Метод TestInit случайным образом выбирает N вопросов из БД и сохраняет в сессии. Возвращает количество вопросов N.

    Метод GetNext возвращает данные вопроса из списка(п.1) по индексу(берется из тела запроса)

    Front-end: в соответствии с диаграммой классов на js реализовать объектную модель приложения.

    Для разработки логики руководствоваться UML диаграммой.

    testController — основной класс для управления процессом тестирования.

    question — общий класс(родитель) для объекта вопроса.

    radioQuestion — класс потомок question для вопросов с одним правильным вариантом ответа.

    checkboxQuestion — класс потомок question для вопросов с несколькими правильными вариантами ответов.

    • Поле Text — текст вопроса в формате Base64.
    • Поле Options — варианты ответов в формате Base64 с разделителем «#;» пример(base64#;base64).
    • Поле Answers — правильные ответы, в формате как в поле Options.
    • Поле TimeOut — необязательное, время для ответа на вопрос в секундах.

    Доп.Задание(необязательное): реализовать таймер для вопросов, у которых в поле Timeout !== null

    Веб-приложение для проведения тестирования (es6)

    Тоже самое, что и выше, но с дополнениями:

    Для выполнения задания необходимо настроить webpack (версии 2, 3 или 4) для работы с кодом ES6+ используя babel-polyfill и babel-loader c пресетами env и stage-3.

    Пояснения по заданию:

    В задании идет основной упор на синтаксис ES6+ и новые возможности языка, а именно:
    1. Новый синтаксис классов
    2. Промисы (Promises)
    3. Генераторы и итераторы (включая их асинхронные варианты)
    4. Коллекции Map и WeakMap

    Перед выполнением задания рекомендую ознакомиться с книгой «ECMASrcipt для разработчиков» (автор Николас Закас).

    Для реализации методов загрузки данных (прим. ajaxToService) использовать API Fetch, организовать перехват ошибок.

    Наследование использовать с новым синтаксисом, обязательно использование ключевого слова super.

    Приватные переменные реализовать с использованием WeakMap (посмотреть в книге как это делается)

    Пояснения по классам:

    TestController — класс синглтон. Содержит асинхронную функцию init, которая запускает тест через асинхронный итератор, который получает из функции questionGenerator.

    Функция questionGenerator представляет собой асинхронный генератор.
    Метод questionFactory создает экземпляр дочернего класса для Question и возвращает его.

    Подробнее по асинхронным итераторам:
    https://github.com/tc39/proposal-async-iteration

    Задание определенно «Борщ». Большое, сложное, зачем такое давать на тестовое? Да еще и для такой позиции.

    Ищу наставника Front-end разработка

    Всем привет! Меня зовут Руслан,мне 16 лет, у меня есть цель стать профессиональным Front-End разработчиком. Сейчас я самостоятельно изучаю материал, и уже имею начальный уровень знаний и умений. Но мне не хватает опытного наставника который смог бы мне объяснить все тонкости работы.

    Я решил стать программистом, потому что сам живу в Узбекистане и ужасно хочу переехать в Россию(раньше жил там), и хочу стать в глазах матери, человеком,который добился чего-то в жизни.

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

    Мои навыки:
    Уверенные знания: HTML5 и ср. знания CSS3;
    Умею работать на Photoshop;
    Ср. знания: Java(знаю,что это не по теме);
    Уверенные знания:Русского и Английского;
    Быстро обучаемость.(готов работать круглые сутки)
    (P.S:Напишите мне на этот аккаунт

    12.10.2020, 18:30

    Front-end разработка
    Всем привет,хочу стать front-end разработчиком и у меня появился вопрос(наверное очень глупый,не.

    Front end — кто это такой ?
    Я знаю немного Back end — Основы php, mysql . Пробывал работать с фреймворками CI, Yii2. Но понял.

    Необходимые знания для Front-end разработчика
    Всем привет! Подскажите, что должен знать и уметь front-end разработчик, кроме HTML, CSS.

    Препроцессоры SASS и LESS. Автоматизация Front-end разработки
    Препроцессоры SASS и LESS. Автоматизация Front-end разработки (курс от команды ) Ищу, где скачать.

    Правильный путь front-end разработчика и как им стать
    Писать мне особо нечего тут просто прошу описать свой путь становления front-end разработчика.

    12.10.2020, 20:37 2 13.10.2020, 13:14 [ТС] 3

    Зависимо сколько, также готов выполнять,какую либо не сложную работу,которая была поручена вам..

    Добавлено через 17 минут
    Fedor92, Откликнитесь на эту статью_____»Зачем программисту становиться ментором»

    Этап передачи знания — необходимая ступень в развитии каждого человека, и айтишника — в частности. Как только вы начинаете отдавать, открываются новые грани и горизонты, и вы видите дальше и глубже. На этом построена эволюция.
    Что получает человек-наставник
    Главная ценность — возможность учиться у своего же ученика, открытие новых горизонтов, свежий взгляд на проблемы. Это «перезагрузка» и переосмысление знаний, их структурирование. Вы получаете неудобные вопросы и узнаёте о белых пятнах в своих познаниях. Когда ученик спрашивает вас: «А дальше?», вы вдруг понимаете, каких компетенций вам не хватает. Вы взаимообучаетесь.
    Тут есть и другие плюшки:

    Главная ценность — возможность учиться у своего же ученика, открытие новых горизонтов, свежий взгляд на проблемы. Это «перезагрузка» и переосмысление знаний, их структурирование. Вы получаете неудобные вопросы и узнаёте о белых пятнах в своих познаниях. Когда ученик спрашивает вас: «А дальше?», вы вдруг понимаете, каких компетенций вам не хватает. Вы взаимообучаетесь.
    Тут есть и другие плюшки:
    — Орда евангелистов твоего продукта, твоего проекта и компании + продвижение в массы твоего личного бренда как личности и эксперта;
    — Мощное развитие эмоционального интеллекта и эмпатии;
    — Возможность найти коллегу в свою команду и просто хорошего человека

    Подавать пример
    Передача знаний — это круги на воде, создающие волны. А волны меняют ландшафт. Это вызов и пинок к развитию не только вас, но и всей отрасли, в которой ты работаешь.
    К чёрту корыстность, жлобство, «моё потраченное время» и «по какому рейту мне его возместят?» Именно это тормозит развитие индустрии и общества. Сейчас — непростые времена. Нам необходимо создать ту критическую массу людей, которые готовы влиять. Отдавайте и делитесь, меняйте IT, страну и мир. Leading by exapmle.»

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