Какие языки должен знать frontend разработчик

Какие языки программирования нужны веб-разработчику в 2021 году

Рассказываем, почему кроме HTML и CSS разработчикам нужны языки программирования и какие из них актуальны в 2021 году.

Статичный сайт можно написать легко: берём язык разметки HTML и каскадные таблицы стилей CSS. Но если вам нужен проект со сложной логикой и интерактивом — например, интернет-магазин или веб-приложение с базами данных, API и авторизацией, — понадобятся языки программирования.

Веб-приложения состоят из двух больших частей:

Фронтенд (англ. frontend) — то, что пользователь видит на экране и с чем может взаимодействовать: страницы сайта, меню, кнопки, поля ввода и другие части интерфейса. Чаще всего для фронтенда используют HTML, CSS, язык JavaScript и связанные с ним фреймворки — React.js, Angular и Vue.js.

Бэкенд (англ. backend​) — база данных, API , интеграции и вся логика сайта. Для бэкенда часто выбирают PHP, Java, Python, Go, C# и Ruby, также бэкенд пишут на Node.js, Meteor и других JavaScript-фреймворках.

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

Читайте также:

Языки для фронтенд-разработчиков

Основной стек фронтенд-разработчика — HTML, CSS и JavaScript. HTML (HyperText Markup Language) — это основа разметки веб-страниц. С его помощью создают абзацы, заголовки и гиперссылки, добавляют изображения и другие объекты.
HTML-код объясняет браузеру, что отобразить на странице. У каждого элемента есть свой тег, заключённый в скобки.

Вот пример HTML-кода:

HTML — только каркас, в нём нет инструкций о расположении, цветах и поведении элементов

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

Добавим в предыдущий пример CSS-разметку:

CSS-разметка отвечает за то, как страница выглядит в браузере

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

Пример ниже — скрипт, который меняет цвет текста, если пользователь щёлкнет курсором по абзацу.

Вот как он работает на практике:

Языки HTML, CSS и JavaScript — основной стек для фронтенд-разработчика. Но и бэкендерам тоже нужно в них разбираться, чтобы понимать, как устроен сайт.

Русскоязычные фронтендеры общаются в группе «Типичный верстальщик» и в чате для джуниоров и мидлов.

Читайте также:

Популярные языки для бэкенда

Языки для бэкенда выбирают в зависимости от масштаба проекта и его задач. Например, банк, скорее всего, выберет Java, а стартап из сферы машинного обучения — Python. Дальше вы узнаете почему.

Мы расскажем про шесть популярных серверных языков из списка TIOBE.

PHP — ветеран веб-программирования

PHP создали в 1995 году как язык для веб-разработки. На нём написано почти 79% сайтов. PHP поддерживает MySQL, MS SQL, Oracle Database, PostgreSQL, MongoDB и другие базы данных. IDE для PHP можно установить на Windows, macOS и Linux.

На PHP написан движок Wikipedia и значительная часть Facebook*, на фреймворке Symfony создан бэкенд BlaBlaCar.

Для начала работы с PHP создаётся страница с расширением .php или .html (в зависимости от конфигурации сервера). Исходный код этой страницы содержит теги разметки HTML и непосредственно PHP-команды. Они заключаются между операторами <?PHP и ?>. Вот как выглядит подобный код:

Пример кода на PHP. Источник: Skillbox Media

Открыв эту страницу, пользователь увидит надпись «Здравствуйте, Петя!». Если вы уже знакомы с программированием, то могли заметить, что $username — это переменная, а команда echo используется для вывода данных на экран.

У языка много бесплатных библиотек и фреймворков (Laravel, Yii, CodeIgniter), есть большое сообщество — например, PHP Community и LaraChat. По PHP много обучающих материалов для новичков, поэтому освоить язык и начать кодить несложно.

Читайте также:

Java — язык для корпораций

Этот язык часто используют крупные компании из сферы BigData и финансов. Java востребован у банков, страховых фирм и розничных сетей. Например, свои системы на нём разрабатывают Deutsche Bank, Citigroup и Goldman Sachs Bank. На Java написана серверная часть сайтов Amazon, eBay, PayPal, Adobe и Oracle.

Вот так выглядит код на Java, который открывает большой текстовый файл и превращает каждую строку в набор из 50 записей, разделённых запятыми:

Пример кода на Java. Источник: raygun.com

В Java код комплексный, со множеством слов и знаков: на английском такой синтаксис называют словом verbose, то есть «говорливый», многословный код. Он может быть сложноват для новичков, хотя многие разработчики чувствуют себя комфортнее со строгим синтаксисом.

На Java пишут мобильные приложения для Android и игры для ПК, пример — знаменитая Minecraft.

У этого языка много библиотек и фреймворков (например, Spring, PrimeFaces и Dropwizard). Для работы с вебом есть сервер приложений Apache Tomcat, который предоставляет среду для выполнения Java-кода.

C 2019 года коммерческое использование Java SE стало платным. Но деньги берут только за сборки Oracle JDK. Сборки OpenJDK остаются бесплатными.

Java-разработчики общаются в русскоязычных чатах Java & Co, learn.java и pro.jvm.

Читайте также:

Python — язык для машинного обучения

Python создал голландский программист Гвидо ван Россум, за основу он взял наработки из ABC. В результате получился язык с читаемым кодом и широкими возможностями.

У него простой и понятный синтаксис, и новички часто выбирают его в качестве своего первого языка программирования. Пример ниже выполняет ту же задачу, что и код из раздела про Java — разбивает крупный текстовый файл на элементы:

Пример кода на Python. Источник: raygun.com

У синтаксиса в Python простая, ясная структура, он хорошо читается, и его можно даже назвать интуитивным.

Python используют в веб-разработке, в машинном обучении, анализе больших данных и научных исследованиях, на нём пишут компьютерные игры, приложения для Windows, Linux, macOS, Android и других операционных систем. У языка много фреймворков, известнее всех — Django.

На Python и Django написана серверная часть Instagram* и основной код YouTube и Reddit. В своих научных вычислениях язык используют NASA и Fermilab.

У Python есть русскоязычные чаты с парой десятков тысяч участников: Python beginners, rupython, pro.python и Python.

Читайте также:

Go — язык «сусликов»

Go (Golang) — язык, который разработали в Google. Он подходит для бэкенда веб-приложений и других проектов — например, на нём написаны Docker, InfluxDB и Kubernetes.

В Go программа может выполнять несколько строк одновременно — это называется «горутиной». Чтобы превратить функцию в горутину, нужно добавить перед ней go.

Пример кода на Go. Источник: Skillbox Media

В языке Go авторы попытались объединить лёгкость разработки на Python и скорость исполнения программ на C и C++.

Go — кроссплатформенный язык, на нём пишут программы под Windows, macOS, Linux и другие ОС. Это опенсорсный проект, поэтому исходный код и компилятор доступны бесплатно. У языка есть фреймворки, самые популярные из них — Gin, Beego и Echo.

Из-за лаконичного синтаксиса Go проще освоить, поэтому его рекомендуют студентам и школьникам. Go-разработчики называют себя гоферами (от англ. gopher — суслик), поэтому суслик — талисман языка.

Go — надёжный и быстрый, и поэтому он становится всё популярнее. Сервисы на этом языке уже пишут Dropbox, Yahoo! и eBay.

Пообщаться с Go-разработчиками и получить помощь можно в русскоязычных чатах Go-go! и GOLANG, англоязычном Go Forum, в группе golang-nuts и в сообществе Gophers в Slack.

Читайте также:

C# — язык от Microsoft

Microsoft создала C# как язык для разработки под Windows. У него много общего с Java и С. На С# пишут сайты, игры, мобильные и веб-приложения. Например, на нём написан движок Unity. Язык используют Google, Siemens, Deutsche Bank и другие компании.

Пример кода на C#, который рассчитывает факториал числа:

Пример кода на C#. Источник: Skillbox Media

В C# используется императивная (англ. imperative — приказ, повелительное наклонение) парадигма. В ней программист пишет инструкции для компьютера, то есть отдаёт ему приказы. Чтобы делать это было удобнее, используются объекты — это называется объектно-ориентированным программированием.

• синтаксис, похожий на C, С++ и Java;
• много библиотек, шаблонов и бесплатных уроков;
• среда Xamarin для разработки нативных приложений для Android и iOS.

Пообщаться с другими C#-разработчиками можно в русскоязычном чате DotNetRuChat, в «Библиотеке шарписта» и чате по С#.

Читайте также:

Ruby — язык для человека, а не для компьютера

Автор Ruby, японский программист Юкихиро Мацумото, стремился создать язык для человека, а не для компьютера. Он сделал так, чтобы даже новичкам было просто писать и читать код на Ruby. Язык полностью основан на объектно-ориентированном программировании.

Ruby лаконичный и гибкий. Например, если вместо оператора + вы хотите пользоваться словом plus, можно добавить новый метод в класс Numeric:

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

Ruby стал популярным благодаря фреймворку Ruby on Rails, на котором пишут фронтенд и бэкенд для веб-приложений. На Ruby написан бэкенд Twitter, GitHub и других ресурсов.

Вывод: какие языки должен знать
веб-разработчик

Чтобы верстать UI, фронтенд-разработчики обязательно изучают HTML, CSS и JavaScript. Бэкенд-специалисту нужно добавить к этому один или несколько других языков программирования — например, PHP, Java, Python, Go, C# или Ruby.

Читайте также:

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

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

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

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

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

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

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

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

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

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

Первые сайты

Вначале люди писали на чистом 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. Вот некоторые из этих «особых» языков программирования:

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

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

Чтобы удобно вставлять динамические данные в HTML, отделяя данные от разметки, придумали шаблонизаторы. Например, в разметке пишется <h1><< title >></h1> , запускается шаблонизатор со значением переменной title , и это значение подставляется вместо фигурных скобочек. Теги отдельно, контент отдельно. Можно удобно вставлять динамический контент с помощью циклов и условий — например, передавать массивы объектов и выводить их в таблице.

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

Чтобы не изобретать велосипеды, разработчики давно научились делиться между собой готовыми участками кода, модулями. Во фронтенде для этого активно используется менеджер зависимостей 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 разработчик в 2023 году

FrontEnd – одна из самых легких профессий разработчика в IT. Она выгодно отличается тем, что сочетает в себе программирование и творчество, поскольку девелопер работает над оживлением дизайнерского макета и созданием соответствующей пользовательской логики. Также преимуществом фронтенда является то, что увидеть результат работы можно почти сразу – в любом браузере.

Относительная легкость фронтенда рождает большую популярность среди желающих попасть в IT, а учитывая последствия открытой агрессии по отношению к Украине – особенно большую популярность, ведь это возможность работать удаленно (на IT-компанию или на фрилансе) и получать хорошую зарплату. Соответственно, конкуренция среди Trainee/Junior FrontEnd разработчиков весьма высока, поэтому работодатели вынуждены закручивать гайки и повышать требования к кандидатам, чтобы отобрать лучших.

Так какими технологиями необходимо владеть, чтобы стать Intern/Junior FrontEnd разработчиком в 2023 году? Проанализировав вакансии на украинском рынке айти, мы составили список актуальных инструментов, которые обычно требуют работодатели от кандидатов. Их перечень – ниже в статье.

Основные технологии

HTML5 & CSS3

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

• кроссбраузерной адаптивной версткой, чтобы уметь создавать сайты под мобильные устройства, планшеты и широкоформатные экраны и для различных браузеров;
• семантической версткой для повышения качества разметки и улучшения поисковой индексации сайта;
• валидной версткой, которая предполагает полное соответствие кода разработчика всем стандартам W3C — организации, которая создает и внедряет технологические стандарты для World Wide Web.

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

Это общие требования по верстке. Теперь же рассмотрим более детально требования конкретно по языку стилей. Здесь вы должны знать основные свойства CSS3: фоны, градиенты, тени, анимации, трансформации, переходы, а также технологии Flex и Grid, о которых мы еще поговорим.

Хорошее владение HTML и CSS уже позволяет заниматься версткой сайтов и зарабатывать деньги. Именно с этих двух базовых технологий начинается путь к профессии FrontEnd разработчика.

Качественно изучить HTML и CSS вы сможете при помощи следующих наших курсов:

Flex и Grid CSS

Технологии верстки надежных адаптивных веб-страниц, которые позволяют легче создавать динамические сайты и удобнее структурировать их содержимое. Лучше всего Flex-верстку в действии показывает интерактивный сайт flexboxfroggy.com, а Grid-верстку — cssgridgarden.com.

На нашем ресурсе также есть курсы, которые хорошо объясняют темы Flex и Grid верстки: “Верстка сайта на CSS Grid”, “Верстка сайта на FlexBox CSS”.

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

CSS препроцессор — это программа, которая имеет свой собственный синтаксис, но может сгенерировать из него CSS код. Самыми популярными считаются SASS, Stylus, LESS и PostCSS, однако, наибольшее комьюнити имеет именно SASS. Препроцессоры предназначены для:

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

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

Git & GitHub

Git — наиболее популярная система контроля версий, которая позволяет вести историю разработки проекта с возможностью доступа к каждой сохраненной версии.

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

Тема связана со специальностями:

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

Git & GitHub — очень важные инструменты для любого IT-разработчика, изучением которых следует заняться как можно раньше.

Мы рекомендуем изучать Git на ITVDN при помощи курса “Основы работы с Git”.

Знания о веб-технологиях и сети интернет

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

• как работает интернет;
• протоколы HTTP/HTTPS, веб-сокеты;
• как работают браузеры;
• что такое DNS и как он работает;
• что такое доменное имя;
• что такое хостинг.

Также будет неплохо, если вы попробуете настроить сайт на каком-нибудь бесплатном хостинге, привяжете домен к этому хостингу.

JavaScript

Язык программирования, который используется как при разработке клиентской стороны веб-приложения, так и серверной. При помощи JavaScript (сокращенно — JS) можно писать даже настольные и мобильные приложения, используя определенные программные платформы и библиотеки. Этот язык позволяет:

• динамически изменять разметку;
• осуществлять интерактивное взаимодействие с пользователем;
• анимировать изображения;
• совершать валидацию форм;
• управлять мультимедиа и т. д.

Другими словами, JavaScript “оживляет” страницу и добавляет ей функциональности. Хорошее владение данным языком программирования является обязательным для каждого FrontEnd разработчика.

JavaScript использует официальный стандарт ECMAScript (сокращенно — ES), который подразумевает определенное формальное описание синтаксиса, базовых объектов и алгоритмов. На данный момент существует множество различных версий ES. Работодатели чаще всего требуют знание ES6+.

Однако, вначале необходимо изучить чистый JavaScript (vanilla JavaScript) и лишь потом вникать в новые стандарты. Как ни крути, а классику надо знать. Благодаря хорошему владению JS можно быстро разобраться в любой версии ES и затем освоить любой фреймворк или библиотеку.

ITVDN предоставляет возможность изучить JavaScript с нуля до продвинутого уровня при помощи курсов:

JavaScript Core (DOM, AJAX, JSON)

DOM (Document Object Model) — объектное представление исходного HTML-документа. Ключевым является понятие DOM-дерева, которое описывает структуру страницы. С помощью объектной модели JavaScript получает полную власть над HTML-документом: возможность редактировать, удалять и добавлять элементы и атрибуты HTML, менять CSS код и т. д.

AJAX (Asynchronous JavaScript And XML) — это синтез технологий JavaScript и XML, который фактически представляет собой комбинацию:

• встроенного в браузер XMLHttpRequest-объекта (чтоб запрашивать данные с веб-сервера);
• JavaScript и HTML DOM (чтобы отображать или использовать данные).

AJAX позволяет веб-страницам совершать асинхронное обновление, обмениваясь данными с веб-сервером. Благодаря этой технологии страница не нуждается в перезагрузке — обновляется лишь конкретная ее часть (вспомните ленту новостей в социальных сетях).

JSON (JavaScript Object Notation) — это общий формат обмена данными. Позволяет совершать обмен информацией между программными продуктами, написанными на разных языках. Таким образом, клиент, использующий JavaScript, может легко передавать данные на сервер, который реализован с помощью Ruby/Java/PHP.

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

REST API

API – Application Programming Interface – это набор правил, при соблюдении которых программы могут взаимодействовать между собой. Разработчик создает API на сервере и позволяет клиентам обращаться к нему.

Красноречивым примером будет API от Google Maps, позволяющий веб-разработчику указать на гугл карте расположение определенного здания (точку выдачи интернет-заказов, офис компании и т. д.) на своем сайте. Таким образом, программист лишает себя необходимости самому разрабатывать собственную карту и пользуется уже готовым решением от Google, используя набор правил от API.

REST – Representational State Transfer – это архитектурный подход, регламентирующий, как именно API должны выглядеть. Этому набору правил должен следовать девелопер при создании собственного приложения. Простыми словами, REST – это обычный запрос вида «клиент-сервер» с использованием HTTP-протокола.

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

Алгоритмы и структуры данных

Понимание алгоритмов и структур данных — обязательные знания для любого программиста.

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

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

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

Как стать Front-End программистом. ⁠ ⁠

Итак, в этом посте, я собираюся рассказать, что нужно знать, чтобы стать web-программистом.

Начнём вот с чего, WEB программирование делится на 2 специальности, на самом деле на 3, но третьяспециальность — это совмещение 2-ух предыдущих.

Первое направление — вёрстка или, по-другому, Front-End программирование.

Вёрстка — это создание шаблона сайта, его внешнего вида, всё, что вы видите на сайте — это Front-End — в переводе, внешний интерфейс.

Front-End программирование легко в обучении и востребованное на бирже труда.

Вы, наверное, слышали о таких аббревиатурах, как HTML и CSS. Так вот, если вы выбираете профессию Front-End разработчика, то это то, что вы должны знать. HTML — это язык гипертекстовой разметки, то есть это карказ, строение сайта. Если проводить аналогию со стройкой, то Html — это кирпичи, цемент, все строительные материалы. CSS — Cascading Style Sheets — каскадные таблицы стилей, произносится, как си-эс-эс — это весь дизайн, вся красота сайта. Возвращаясь к аналогии про стройку, то Css здесь это декор дома, например, цвет, но Css выступает не только для украшения, таблицы стилей призваны работать с объединёнными в блоки, с помощью html, кусками информации: стилизовывать, редактировать и размещать их на странице.

Но html и Css — это не единственные инструменты для создания сайта. JavaScript, углубляться не будем, является языком программирования (html и css ими не являются), он призван, в основном, чтобы придать интерактивности сайту, сделать страничку живой.

Итак, подведём итоги.

Чтобы стать Front-End разработчиком нужно знать: html, css и язык программирования javascript.

По времени освоения, в этот параметр я заключаю время, потребовавшееся на учёбу и практику, лидирует html, его можно освоить за 1 день, долгой практики уделять не нужно, да и он прост в изучении новичку.

Css, тут дела обстоят дольше — примерно за 1 неделю его можно освоить. Дело в том, что здесь подключается комбинирование этих двух инструментов — css и html. Вы будете делать много практики, в основном, создавать сайты. И этот процесс — понимания через практику, закрепления навыка может продлиться и до 2-ух недель.

JavaScript, если уделять изучению 3 — 4 часа в день с обильной практикой, то за 1,5 до 3 месяцев можно познать этот язык.

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

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

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

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

Если вы хотите узнать, как стать Back-End или Full stack разработчиком?

Хотите зарабатывать на веб программирование, но ещё не изучили его?

Тогда телеграм канал Web-coding ( https://t.me/becomingofwebdeveloper ) — это то, что вам нужно.

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

Это та информация, которая сделает вас лучше.

@moderator тут реклама телеграм-канала

Какая-то хуйня, написанная джуном для совсем уж долбоёбов.
«JavaScript, если уделять изучению 3 — 4 часа в день с обильной практикой, то за 1,5 до 3 месяцев можно познать этот язык.» — Познать? да? вперёд, разобраться в десятках востребованных JS-фреймворков и получить в них практический опыт за месяц фуллтайма.

Познать язык — да. Но познание языка не делает вас автоматически специалистом Front-End

Точно также можно уделять изучению деталей автомобиля и за 1,5-3 месяца выучить из каких деталей он состоит. Однако это не значит что вы стали автомеханик и можете чинить авто

p.s.не говоря уж о том что голый Front-End разработчк мало кому нужен. В любом случае нужно понимать как работает Back-End

вы ничего не знаете о фронтенде, не вводите людей в заблуждение

Читать ещё на Пикабу

Кодер показал уровень владения CSS и запилил на нем картину⁠ ⁠

Как браузер рендерит веб-страницу⁠ ⁠

Для фронтенд-разработчиков очень важно знать, как происходит отрисовка веб-страницы на всех этапах: от отправки запроса на сервер до отображения картинки, которую мы видим в браузере.

Чтобы быстро разобраться в основах можно почитать следующие 3 статьи:

Затем, чтобы погрузиться в детали — можно прочитать статью:

Статья достаточно большая, поэтому лучше её читать постепенно и не один раз. Я читал раза 3 с перерывами и выписал для себя основные моменты:

Браузер отправляет запрос на сервер и получает в ответ текстовый HTML файл с заголовком Content-Type: text/html; charset=UTF-8

Браузер парсит полученный файл и создаёт DOM (Document Object Model)

Браузер считывает CSS из всех ресурсов и строит CSSOM (CSS Object Model)

CSSOM не содержит не визуальные элементы: script, meta, title, …

Для построения CSSOM используются: стандартные стили браузера, авторские стили (которые и пишут разработчики), стандартные стили описанные в W3C CSS и правила каскадного наследования CSS

DOM Tree + CSSOM Tree = Render Tree

Содержит лишь видимые на экране элементы

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

Процесс отрисовки страницы

Элементы на странице могут перекрывать друг друга (z-index). Поэтому браузер располагает элементы на различных слоях.

Каждый слой может рендериться в отдельном потоке.

Происходит объединение упомянутых выше слоёв

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

Все перечисленные выше операции представляют собой Critical Rendering Path (CRP) — последовательность операций, которые необходимо произвести браузеру для отображения страницы пользователю

Парсинг и сторонние ресурсы

Браузер парсит HTML по мере скачивания (не ждёт скачивания всего документа)

Парсинг HTML происходит в основном потоке исполнения JavaScript

Parser Blocking Scripts

Это скрипты, которые приостанавливают парсинг HTML

Если парсер натыкается на тэг script — парсинг приостанавливается и происходит выполнение скрипта

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

Браузер приостанавливает парсинг, так как мы можем изменять DOM с помощью JavaScript. Иначе мы бы столкнулись с race condition между JavaScript и парсером, ведь JavaScript может модифицировать DOM дерево

Можно использовать async атрибут тэга script, чтобы не блокировать парсер при скачивании js-файла, файл будет выполенен, как только загрузится.

Также можно использовать тэг defer, который работает также как async, но выполнение скрипта произойдёт только когда завершится парсинг

Render Blocking CSS

Построение CSSOM происходит в главном потоке

Построение CSSOM не происходит по мере скачивания (в отличии от построения DOM). CSSOM обновится, когда сторонний файл со стилями будет загружен целиком. Пока стили не загружены, Render Tree не будет обновлено. Поэтому CSS — render blocking ресурс.

В то же время, построение DOM дерева продолжается.

Если парсер натыкается на тэг script, то он будет скачан, но не будет выполнен до тех пор, пока не завершится загрузка файла со стилями. Это важно, так как мы можем манипулировать CSS свойствами через JavaScript. Такой CSS называется script-blocking.

Так как построение Render Tree приостановлено, следовательно и Critical Render Path застопорился, и контент не обновляется.

Чтобы не блокировать рендеринг, необходимо загружать стили как можно раньше, желательно в секции head

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

Ответ на пост «CSS и авторские права»⁠ ⁠

Кому интересно — вот код на jQuery, который вставляет мягкие переносы в русские слова и позволяет тексту, выключенному по ширине, быть более плотным и визуально приятным, особенно при малой ширине блока. Легко перепиливается на чистый JS:

Как бэкендер работает с CSS⁠ ⁠

Беспощадный фронтенд⁠ ⁠

Когда бэкендер берётся за фронт⁠ ⁠

Как быстро написать слайдер на JS?⁠ ⁠

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

Как же создать вот такой слайдер?

Слайдер будет состоять из кусков кода HTML, CSS, JS, писать будем в Codepen.io но это только для удобства, можете перенести к себе на сайт, веб-приложение или в удобное для вас место.

1. Пишем структуру

4. Заполняем объект

Пишем структуру

Наша структура будет состоять из объекта с классом «slider», внутри которого будет две кнопки для переключения, одна с индификатором «left», другая с «right». По середине будет большая фотография с индификатором «slider_image».

Пишем стили

Обнуляем лишние стили и пишем свои для наших элементов, контейнеров, кнопочек и фотографий.

Пишем скрипт

Для начала создадим объект, внутри которого будет хранить фотографии для слайдера, а именно ссылки на них для вписывания в будущем их в атрибут «src» на главной фотографии с индификатором «slider_image». После ищем все нужные элементы на странице через вставку «document.querySelector» и «document.getElementById». Создаем функции такие как «update()» которые будут отвечать за обновление главной фотографии, дальше будем писать ещё две функции для переключения главной фотографии. При старте страницы нужно вызвать функцию обновления, для подстраивания картинки при старте.

Заполняем объект

Внутри объекта «slider_cfg», пишем номер картинки от 1 до бесконечности, он сам подстроит и сам определит количество, главное соблюдать индификатор, но можно написать и без индификатора по номеру и просто перебирать их. Ещё легче было бы написать в массиве. После указания номера картинки, после «:» пишем ссылку на картинку в скобочках « ‘ ‘ », не забудьте поставить «висячую запятую», то есть как на скриншоте, после каждой записи ставить запятую в конце, даже если запись окончена.

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

Будни веб-разработчика⁠ ⁠

Я: *сдвигаю <div > на один пиксель*

Когда доверил фронтендеру делать мемы⁠ ⁠

Когда бэкендеру приходится работать с CSS⁠ ⁠

У каждого свои страхи⁠ ⁠

Opera блокирует AdBlock и любые средства редактирования вёрстки на сервисах Яндекса! Опера продалась? Сговор?⁠ ⁠

UPD. К посту есть вопросы #comment_226189438

Сегодня зашел на Яндекс.Кью, решил отключить через AdBlock вопросы, которые отображаются сбоку, ибо надоедают. Открываю AdBlock. И что же я вижу? Кнопки «заблокировать элемент» нету! Окей, не беда подумал я. Ведь у меня ещё есть StyleBot. Который позволяет редактировать верстку на любом сайте и что же я вижу? Опера блокирует открытие данного расширения именно на сайтах яндекса! Кинопоиск, Кью, Дзен и тд. Не ожидал такой подставы от любимого браузера((

.neighborhood ⁠ ⁠

Бесплатно помогаю пикабушникам учить программирование, часть 24: «Мы составили план обучения фронтенду»⁠ ⁠

Пикабушника @pt1zza, которая любезно согласилась помогать мне в обучении программированию, составила план обучения по фронтенду. Посмотреть его можно здесь: https://telegra.ph/Roadmap-nachinayushchego-frontend-razrabotchika-11-28

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

Боль бэка))⁠ ⁠

Эффект неонового свечения текста HTML CSS⁠ ⁠

Всем привет, новое видео от меня!

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

Важно! Это не уроки! Если ты неделю в вебе, то скорей всего ничего не поймешь! У меня нет цели кого-то учить, так как я считаю, что уроков и курсов и так полно на просторах интернета. Я делаю разнообразные задачки для себя в не скучном формате, чтобы всегда была практика и решил поделиться с другими, чтобы была возможность получить готовый код, адаптировать готовое решение под себя или попробовать реализовать тоже самое для практики (практика главное в разработке!). Критика и советы по поводу того, что убрать, что добавить, приветствуются. Также буду рад разбору кода и комментариям по нему.

General frontend FAQ. Part 3⁠ ⁠

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

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

Первое и единственное решение, которое нужно принять: на какой фреймворк садиться. На текущий момент (2020) на выбор 2 с половиной стула:

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

— JS центричность. Копаясь в Реакте вы невольно углубляетесь в понимание JS (на данный момент это уже не так актуально)

— Относительно высокий, но «плоский» порог входа: придется изучить все, что так или иначе пригодится после (включая вебпак)

— Куча обучающих материалов

— Каждый пук надо прикручивать самостоятельно. Да, даже цсс, не говоря уж про роутер, стейтменеджмент и прочее

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

— Фейсбук делает Реакт под себя, так что не удивляйтесь, если через 6 месяцев все придется переписывать

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

— Полноценный набор инструментов — в отличие от Реакта не придется прикручивать гайками отваливающиеся цсс модули

— Предельная простота и интуитивность

— Прельстиво и приятно шлепать формы (а мы же здесь формошлепы, как никак)

— Эван почему-то считает своим долгом копипастить у Фейсбука все. Даже то, что ненужно

— Сильно меньше работы

Второй с половиной стул — Angular

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

— Искаропки есть все. Т.е. вообще все. А то, чего нет, прикручивается через CLI

— Собственно, шедевральное CLI (начинася с 6 версии cdk)

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

— Oche высокий порог входа, придется выучить вообще все, при чем не всегда понятно, в каком порядке.

— На этом, собственно, все.

Это были стулья, а теперь табуретки:

AngularJS — (не путать с Angular, который новый), он же ангулар первый — устарел морально, физически. Вакансии по-прежнему есть, в основном — поддержка дымящегося легаси. Учить просто так смысла нет. Да и вообще нет.

Backbone — good night, sweet prince. Можно поколупать, чтобы прикинуться олдфагом. Но не нужно, вас все равно раскусят.

Inferno — good night, sweet prince. Кговавый Фэйсбук купил разработчика, теперь он сидит в подвале без паспорта и пилит Реакт (тру стори);

Preact — если видите в описании очередного фреймворка фразу ‘this is fast lightwieght fork of React’ — сразу закрывайте вкладку.

Aurelia — заявлено, что это самый мощный, гибкий и современный (прямая цитата) JS фреймворк в мире, которым никто не пользуется. Ну вы поняли.

Mithril — позиционируется как супер-пупер альтернатива этим вашим реактам, ангуларам и вью. Но никем не используется. Такие дела.

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

Ember — говорят, все, что придумали, уже давно было в Эмбере. Может так и есть, но эмбер даже на переписанном движке уж очень тормозной. Изредка мелькает в вакансиях (ищут спеца с опытом от 3 лет чисто на эмбере, что как бы намекает)

ExtJS — энтерпрайз монстр, который продается за 9к долларов и вертится где-то на задворках древних корпоративных ЦРМ и нигде больше не встречается.

Вышеперечисленные штуки указаны сугубо в ознакомительных целях. Их намного больше, это самые наиболее часто встречающиеся, ну типа вы там прочтете что-нибудь интересное и на собесе такие — о, так это ж как в aurelia! — вас сильно зауважают (нет).

Т.к. все что я делаю на работе так или иначе крутится вокруг реакта, то направление по изучению фреймворка дается именно на примере реакта, но вполне подойдет и для вью, и для ангулара. Лучшие ресурсы для начала обучения — официальная документация. Что у Реакта, что у Ангулара, что у Вью она очень подробная и человеческая.

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

— Курсы. Как правило, одного достаточно, смысла смотреть n курсов по одному и тому же предмету нет — все повторяется.

— Видосики, записи конференций

— Статьи, бест практис, опенсорс проекты

— React Router — хороший годный гайд-туториал-документация по реакт-роутеру.

— Redux + react — официальный гайд по редаксу в связке с реактом.

— React Redux — обновленный туториал по редаксу, не переживаем что от 2018 года, во первых он неоднократно обновлялся, во вторых во вторых)

— React + Node.js + Bash — перевод туториала по реакту, ноду и башу. Атеншен, материал по ссылке — свехгоднота, перейдя по ней, вы уже не вернетесь таким как раньше.

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

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

Если вы собирайтесь разбивать JS-код на несколько файлов и нормально использовать import/export, то вас настигнет вопрос сборки приложения. Сейчас для этого принято использовать Webpack — очень гибкий и мощный, но сложный в настройке инструмент, который интерпретирует все файлы как JS-модули.

Тут следует сказать, что для учебных и личных проектов в 90% случаев будет хватать Create React App или другого бойлерплейта. В таком случае webpack и babel уже зарание настроены во внутренностях и его можно не трогать. На промышленных проектах возможностей бойлерплейта обычно не хватает, поэтому рано или поздно вы столкнетесь с настройкой этих тулзов. Но еще раз – ньюфага никто не посадит править сложный конфиг на большом проекте, поэтому без фанатизма. Однако на собеседованиях обязательно спросят и могут даже тестовое попросить сделать без CRA, тут уже зависит от уровня вакансии и наглости интервьюеров.

Что делать дальше

Если вы уже состояфшийся фронт и вам кажется, что развиваться больше некуда — вынужден вас разочаровать.

— TypeScript — пожалуй, самый популярный и полезный яп, расширяющий возможности ванильного JS. Очень рекомендуем попробовать (в 2020 must have). Будем откровенны — если вы читаете этот раздел, то TS вы уже ДОЛЖНЫ знать, так что давайте, бегом-бегом читать документацию, благо она у ТС шикарная.

— ClojureScript — кложура, которая транспайлится в ЖС.

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

— ReasonML — окамль с человеческим лицом от фейсбука. Ну или типа того, who cares?

— Dart — авантюра гугла по созданию полноценной альтернативы JS со своим интерпретатором и андефайнедами. Есть такая штука, да, наверное, даже клевая (а может и нет). Больше сказать о нем нечего, в вакансиях почти не встречается.

— CoffeeScript — морально и физически устарел, все хорошее, что в нем было, перекочевало в ES6+. Иногда встречается в дремучих проектах, написанных на рубя с шаблонами. Учить не нужно, да и нечего там учить.

В 2020 TypeScript стал стандартом, большинство новых проектов стартуют на нем. Все остальное (кроме кофе) можно потрогать на досуге, но в основном для саморазвития – работы на этом очень мало. Кофе не нужно, пейте чай. Шутка. Нет, правда, кофескрипт не нужен.

Выбрав стул с реактом, можно смотреть в сторону таких вещей:

— Next.js – фреймворк поверх реакта с упором на SSR. Активно поддерживается, большое коммюнити, много примеров.

— Gatsby — что-то похожее на next, но попроще. Сделан упор на создание блогов/лендингов. Есть много плагинов, расширяющих базовые возможности. Хорошо работает со многими cms.

— Styled Components — css-in-js с компонентным подходом. Как альтернатива – Emotion. Можно почитать про JSS (используется в material-ui)

— Apollo GraphQL – инструмент для работы с graphql на жсе, есть клиентская библиотека под реакт.

— Тестирование – большая тема, но тут ясно одно: на основные части любого приложения, которое активно разрабатывают, должны быть написаны тесты – иначе смэрть. Как делаются и что почитать: дока реакта, jest, React Testing Library. Вообще этому можно посвящать отдельный faq со своими холиварами и они есть (faq -и), но это уж совсем глубокая тема, тут писать не буду.

Независимо от стула:

Progressive Web Apps – это про использование набора технологий, позволяющих делать веб-приложение максимально похожим на нативное. Например, такое приложение может слать пуш-нотификации и работать офлайн. Что почитать: хабр, гугл. Неплохой курс на udemy.

Не забываем про линтинг ESLint который избавит от совсем уж тупых ошибок/опечаток и приучит к написанию красивого кода.

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

Фух, все! FAQ на этом закончен, расходимся господа!) Далее будут статьи про UX и UI дизайн, работа сетей (интернета) и браузера в частности, семантика и работа поисковых роботов (атеншен, в самое пекло семантического ядра не полезем, так пройдемся по касательной), всякие полезности и мелочи, которые фронтендеру знать нужно но необязательно на первых парах.

Закончить хотелось бы эпично и вдохновляюще, думаю подойдет видео, которое когда то было intro на канале Soraxa — эх, клевые были времена!

Веб-разработчики достигнут Нирваны⁠ ⁠

Наглядно про веб-технологии⁠ ⁠

Перевод, думаю, не нужен 🙂

С нуля до Frontend-разработчика. Начало⁠ ⁠

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

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

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

Сейчас хотел бы посоветовать небольшой план для людей, которые только начинают свой путь в веб-разработку:

1) Думаю, самый народный способ изучить основы HTML и CSS это воспользоваться бесплатными курсами от HTML Academy.
Затем эти знания можно закрепить пройдя бесплатные задания на FreeCodeCamp. (Basic)

2) Советую скачать бесплатно курс, который писал здесь (п. 2)

!Либо можете найти ссылку на скачивание zip-файла в комментариях в этом посте!
Посмотрев первый модуль, вы уже отточите свои базовые знания + будет настроено пространство.

3) После этого сразу советую изучить препроцессор CSS (хотя его и ставят в середину обучения, считаю его надо учить сразу после основ). Про них можно узнать в модуле 2 — 025 из того курса, либо из любого другого видео на YouTube.

4) Изучаем основы Git/Github. Из курса Модуль 3 — 041, либо на YouTube. В начале необходимо уметь только пушать проекты в репозиторий. имхо)

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

Сложно описать сколько времени у вас займет на обучение данного материала, но в среднем можно предположить 2/3 недели.

После этого можно уже с головой углубляться в верстку.

Мой план обучения на ближайшее время:
1) Практикуем верстку с помощью Bootstrap Grid (ее многие недолюбливают, но я хотел бы закрепить эти знания);
2) Продвинутая верстка с Flexbox без интерактива;
3) Стараемся настолько набить руку, чтобы могли сверстать почти любой проект без интерактива;
4) Основы JS;
5) Поверхностное изучения JQuery и добавления интерактива на сайты.
6) Продвинутый JS;
7) React.js
8) Создаем портфолио;
8) Стараемся устроиться на работу джуном.

План на следующую неделю:
1) Доделать проект из курса (модуль 2);
2) Найти и сверстать самостоятельно пару лендингов с помощью сетки + делать их «резиновыми».

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

Все получилось сумбурно, я еще дилетант в этом деле, так что рад любой критике и пожеланиям 🙂