Меня зовут Александр, и я алкоголик, у меня около 12 лет опыта
работы в разных IT компаниях, и я решил написать этот
текст в помощь начинающим.
Надеюсь, будет полезно.
Когда-то я пришёл в IT потому, что было интересно и это то, что в какой-то момент начало получаться. Правда, я тогда хотел стать админом. Многие сейчас идут за большими деньгами, но в начале карьеры никто не станет платить много новичку.
Не верь тем, кто говорит "выучи Реакт и сразу прыгнешь на 250к в месяц".
Что нужно понимать с самого начала:
- Никто не будет платить много сразу. Нужно набить руку и начать хоть с какой-то зарплаты
- Впереди у тебя длинный путь, полный побед и поражений (завидую)
- Логика, критическое мышление, и абстрактное мышление - три важных фактора, без которых в IT будет очень сложно
На мой взгляд, программисту очень важны качества, помогающие в Problem Solving, т.к. по сути программист этим и занимается - решает задачи и проблемы.
Без абстрактного мышления не получится представить проблему, запихнуть в голову, покрутить её там, и выдать решение. Так же, абстрактное мышление помогает посмотреть на задачу под другим углом.
Без критического мышления не получится задать важные вопросы, поставить под сомнение какое-то решение (своё или не очень), и предположить что всё может быть совсем не так, как утверждают уважаемые коллеги.
Да, я говорю как бабушка, которая называет кого-то наркоманом, и бухтит что без математики программистом не стать. Но это моё мнение, мой путь, и с помощью этих (и других, о которых поговорим позже) инструментов я решаю задачи.
С другой стороны, если выбрать какое-нибудь тестирование и сильно повезёт со стартом карьеры, можно сразу влететь на зарплату около 100к. Но если ты настолько везучий, лучше пойти в казино и не тратить время на IT.
Итак, если тебе всё ещё интересно, давай продолжим.
Какое программирование выбрать - мобильное / фронтенд / бекенд / игры... Это решать тебе. Я лишь выскажу своё мнение по поводу этих дорожек.
В чистый бек можно пойти, если есть опыт вебмастера. Но тогда что ты тут делаешь? :) В начале карьеры бек лучше не выбирать по некоторым причинам:
- Нужно понимание баз данных
- Нужно понимание принципов функционирования сетей
- Ты не "видишь" результат своей работы
- Это просто сложнее
- Менеджер, обычно, понимает тебя хуже, чем фронтендеров (сложнее доносить мысли)
Есть и плюсы:
- У тебя нет зоопарка устройств и браузеров, на которых твой код должен исправно работать
- Обычно, бек определяет как будет работать новый функционал на беке
- Менеджер, обычно, понимает тебя хуже, чем фронтендеров (можно сразу ходить с важным видом)
В мобильную разработку можно идти, и это не сильно сложнее фронтенда. Есть своя специфика, и если в ней разобраться, мобильная разработка выглядит даже проще фронтенда.
Из минусов:
- Нужно заморочиться на чисто-мобильном языке:
Kotlinдля андроида илиSwiftдля iOS (хотя слышал про бекенд на свифте, но это для извращенцев. Впрочем, есть похожее мнение про Node.js) - Нужно пройти огонь, воду, и медные трубы, прежде чем начнёт хоть что-то получаться
Тут я не силён, но думаю что в начале карьеры идти по этой дорожке не стоит. Игровых студий у нас мало. Если у тебя есть желание - изучай этот путь в качестве Pet-project, это будет логичнее, на мой взгляд. А если идти в серьёзную разработку, ты вряд ли сможешь что-нибудь сделать без этих штук:
- Понимание шейдеров
- 3D моделирование
- Хорошее знание инструментов (движок, IDE, блендер)
- Знание алгоритмов и алгебры (поиск пути, оптимизация графики)
Оставил вкусное напоследок. Фронтенд - то, куда можно идти в начале. Более того, фронтендерам даже платят больше (правда не понимаю какого хрена).
Есть минусы:
- Большой зоопарк браузеров (но это решается
PostCSSиBabel) - Большая конкуренция на рынке
Есть и плюсы:
- Результат твоей работы визуален
- Задачи понятнее, чем на других дорожках (сверстать кнопку)
Про фронтенд и пойдёт разговор.
Есть ещё "фуллстек", что означает что человек умеет и во фронтенд и в бекенд, но это вариант не для начинающих.
Фронтендеру нужно знать 3 базовых языка:
HTMLCSSJavaScript(не путайте сJava, это совсем другая история)
Что вообще такое HTML? Переводится это как Hyper-Text Markup Language.
Язык гипертекстовой разметки.
Это язык, из которого браузер выстраивает компоненты на странице.
Кнопки, менюшки, текст - это всё HTML.
Выглядит это примерно вот так:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>RootFox</title>
<link rel="stylesheet" href="rtf6x/index.css">
</head>
<body>
<main class="content">
<h1>Hello World!</h1>
</main>
</body>
</html>Как изучить HTML:
- Почитать MDN про HTML
- Написать что-то на
HTML - Завалидировать это что-то с помощью Валидатора W3C
- Всё выкинуть
- Написать снова
- Повторить этот список 420 раз
Что такое CSS? Cascade Style Sheets - каскадные таблицы стилей.
Это тоже язык, с помощью которого можно определить стили для
элементов в HTML.
Например, у нас есть элемент H1 в примере выше, и нужно сделать
чтобы текст в этом элементе был синего цвета.
Делается это так:
h1 {
color: #0000ff;
}Или так (но это менее правильно):
h1 {
color: blue;
}CSS подключается в HTML в таком виде:
<head>
<link rel="stylesheet" href="https://rootfox.cc/rtf6x/index.css">
<link rel="stylesheet" href="rtf6x/index.css">
<link rel="stylesheet" href="/rtf6x/index.css">
</head>Тут мы видим 3 подключения одного и того же файла:
- Первый файл подключается по полному URL (браузер это понимает когда есть двойной слеш (https://))
- Второй подключается относительно URL в строке браузера (от последнего
знака "/"). Например, открыта
страница
https://rootfox.cc/funny/mad-news/: в этом случае, путь до второго файла будет такой:https://rootfox.cc/funny/mad-news/rtf6x/index.css - Третий подключается относительно главного корня (/) вебсайта,
вне зависимости на какой по вложенности странице мы
находимся, на главной или на
/funny/mad-news/, всё, что после корневого слеша будет отброшено:https://rootfox.cc/rtf6x/index.css
Как изучить CSS:
- Почитать MDN про CSS
- Написать что-то на
CSS - Проверить свою вёрстку в другом браузере
- Увидеть что что-то работает не так, как вы ожидали
- Прочитать про используемые стили на CanIUse
- Всё выкинуть
- Написать снова
- Повторить этот список 15 раз
- ...
- Прочитать наконец про
PostCSS - Ничего не понять
- Повторить этот список 4 раза
- ...
- Понять наконец как использовать
PostCSS - Порадоваться что всё работает в другом браузере, чтоб он сука сдох
В CSS очень важно понимать теорию в части приоритета селекторов. Почитать про это можно тут:
Ещё в CSS есть Media Queries.
Они используются, чтобы изменить верстку под конкретный экран или девайс.
Например, нам нужно чтобы при ширине экрана меньше 800 пикселей
(в верстке в основном используются пиксели, но есть и другие варианты:
em, rem, %, vw, vh...),
цвет текста был не синим, а красным:
@media (max-width: 800px) {
h1 {
color: #ff0000;
}
}А ещё есть SCSS, SASS, LESS и Stylus! Если хорошо знать CSS, с этими
ребятами не будет особых проблем.
В основном, они добавляют вложенность элементов и встроенные функции.
Ну и переменные там, например.
Выглядит это так (SCSS):
$background: #2d2d2d;
@mixin clearfix() {
&:after {
content: "";
display: table;
clear: both;
}
}
@mixin border_radius($radius: 5px) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
@mixin boxed() {
padding: 5px 10px;
border: 1px solid darken($link_color, 5);
background: $box_background;
text-align: center;
}
.wrapper {
background: $background;
padding: 0;
margin: 0 auto;
.header {
@include clearfix();
padding: 0 0 20px;
.header-logo {
@include boxed();
float: left;
}
.header-contacts {
@include boxed();
@include border_radius(10px);
float: right;
}
}
}Когда-то, я написал несколько страничек для сравнения (чтобы самому понять в чём разница):
Что ещё стоит изучить в контексте CSS:
- Приоритеты селекторов в
CSS - Блоки - инлайны
- Псевдо-элементы и псевдо-классы
БЭМ- Препроцессоры
CSS(упомянутые вышеLESS/SASS)
JS - базовый язык фронтендера. Если вы хорошо знаете HTML+CSS, это ещё не даёт вам право носить гордое звание фронтендера. Для этого нужен именно JS.
JS - язык скриптов, выполняемых в браузере (либо в среде node.js, где есть свои подводные камни, но движок V8 везде одинаковый).
Файлы скриптов, как и CSS, подключаются в HTML:
<script type="text/javascript" src="test.js"></script>Сам же файл выглядит примерно вот так:
var something = 'test';
console.log('something', something);
alert('This is not appropriate!');- Можно вешать события на элементы в DOM (HTML)
- Можно менять или добавлять элементы
- Можно менять классы и прочие аттрибуты элементов
- Можно вызывать специальные функции
- Можно задавать переменные и хранить в них важную (и не очень) информацию
- Можно делать запросы к внешним источникам (API)
- window
- Типы данных
- Методы определения переменных
- Методы и аттрибуты типов переменных
- Многопоточность (выполнение нескольких операций параллельно)
Window - это глобальный объект на странице в браузере (в среде Node.js его нет, вместо него используется global). Фактически, любая переменная, объявленная в глобальном контексте, попадает в window. То есть, к такой переменной можно обратиться как напрямую, так и через window.
Например:
var something = 'something';
console.log('something', something); // "something"
console.log('window.something', window.something); // "something"Есть ещё глобальные объекты document, screen, navigator...
Как-нибудь посмотрите что они из себя представляют, или почитайте на
w3c
Из navigator можно достать язык пользователя, например:
const lang = navigator.language || navigator.userLanguage || 'en';document используется для получения HTML элемента, добавления нового,
а также создания события:
document.addEventListener('DOMContentLoaded', function (event) {
document.querySelector('a').addEventListener('click', function (e) {
alert('CLICK!');
document.querySelector('p').innerText = 'CLICK!';
return false;
});
const p = document.createElement("p");
p.innerHTML = "Lorem ipsum";
p.className = "someClass";
p.setAttribute("id", "someId");
document.body.appendChild(p);
});Про типы можно почитать тут
Важно что примитивы передаются в функцию в виде значения, а "сложные" передаются в виде ссылки. Например:
const someObject = { a: 1, b: 2 };
const someString = 'test';
const someFunc = (obj, str) => {
obj.a = 2;
str = 'hello?';
}
someFunc(someObject, someString);
console.log(someObject); // { a: 2, b: 2 }
console.log(someString); // 'test'Итак, что произошло?
- Объект, переданный в функцию someFunc по ссылке, был изменён. Как так, ведь он же константа! Нет, константой является только сама ссылка на объект, но внутренности можно менять.
- Строка, переданная в виде значения была изменена только внутри самой функции и не изменилась снаружи.
Есть 3 метода:
var something = 'something';const something = 'something';let something = 'something';
Для понимания проблемы стоит почитать про замыкания
var - устаревший метод, впрочем, вполне рабочий, и в определённых условиях,
им можно пользоваться. Его особенность в том, что определение с его помощью,
всплывает выше замыкания (если замыкание в том же контексте). Например:
for (var i = 0; i < 1; i++) {
var myVar = 'bloop';
}
console.log(myVar); // "bloop"Из функции var не всплывает, т.к. у функции свой локальный контекст.
let и const не всплывают выше своего блока кода (замыкания). Также, у них
есть разница между собой: const является константой (её нельзя менять).
for (var i = 0; i < 1; i++) {
const myVar = 'bloop';
}
console.log(myVar); // Error: myVar is undefinedСледует всегда писать const, если вы не собираетесь менять эту переменную.
Так правильно и так принято (таков закон джунглей). Также, если объявляется
не-примитивный тип данных, следует сразу объявить его как константу, т.к.
будет меняться только его внутрянка (если не собираетесь менять саму ссылку,
конечно).
const myVar = 'bloop'; // Норм
let myVar2 = 'bloop'; // Переменная не меняется, нужно const
let myVar3 = { a: 1 }; // Ссылка не меняется, нужно const
const myVar4 = { a: 1 }; // Ссылка меняется, нужно let
const myVar5 = { a: 1 }; // Норм
myVar5.b = 2; // myVar5 = { a: 1, b: 2 }
myVar4 = { b: 1 }; // TypeError: invalid assignment to constЧасто новички не понимают что можно делать с переменными. Важно изучать эти инструменты и стараться ими пользоваться.
Например, у массивов есть такие штуки:
- length - количество элементов в массиве
- map() - с помощью этой штуки можно сделать из одного массива немного другой
- forEach() - почти то же что и map, но просто проходит по массиву (и это быстрее, т.к. не создаётся новый массив)
- reduce() - это крутая, но сложная для новичка штука, позволяет посчитать количество лап в массиве домашних животных, и не только! Ещё в зоопарке...
- filter() - позволяет создать новый массив из элементов, которые тебе подходят по условиям
- find() - находит и возвращает первый подходящий элемент массива
- reverse() - разворачивает массив наоборот
- indexOf() - помогает определить есть ли в массиве нужный элемент
- slice() - создаёт новый массив из элементов от X до Y
- splice() - удаляет из массива элементы от X до Y и возвращает их
- pop() - удаляет элемент из конца массива и возвращает его
- shift() - удаляет элемент из начала массива и возвращает его
- push() - добавить элемент в конец массива
- unshift() - добавить элемент в начало массива
- остальное тут
У строк есть несколько интересностей:
- Со строками можно частично работать как с массивом
- length - как у массива
- toUpperCase() - команда "стоять" (собака => СОБАКА)
- toLowerCase() - обратное успокоение животного (СОБАКА => собака)
- replace() - замена части строки на что-то другое
- split() - разделение строки на массив нескольких строк (обратно - Array.join())
- indexOf() - помогает определить есть ли в строке нужные символы
- substring() - получение части строки от символа Х до символа Y
- trim() - убрать пробелы в начале и конце строки
- остальное тут
У объектов есть парочка важных функций:
- keys() - возвращает массив ключей (свойств) объекта
- values() - возвращает массив значений объекта (тот же объект без ключей)
- остальное тут
Важно понимать что JS - однопоточный язык (с костылями для многопоточности).
В Node.js многопоточность достигается запуском нескольких процессов (если интересно, почитай про кластерный режим)
При этом, некоторые процессы происходят параллельно, потому что обрабатываются по-разному, разными подсистемами движка.
Советую познакомиться с документацией про EventLoop (но не увлекайся, это следующий уровень):
Джентельменский набор разработчика:
- Аккаунт Google (часто нужен для доступа к чему-либо)
- IDE (среда разработки, редактор кода)
Node.js(фронтенд или бекенд - не важно) (нужен дляNPM)Git- Браузеры для тестирования. На этом этапе можно не заморачиваться,
но всё чаще появляются сайты, не работающие в моём
FireFox, что сильно удручает.
- Альтернатива - BrowserStack. Позволяет смотреть сайт (в том числе, локальный, при установленном плагине) в облачной виртуальной машине
Чем ещё пользуются компании:
- Задачи обычно ставят в
JiraилиTrello(есть ещё куча вариантов). Советую попробоватьTrelloдля себя, он бесплатен - Общение голосом обычно происходит в
Google Hangouts,Zoom,Slack, илиDiscord. - Общение текстом обычно происходит в
SlackилиDiscord(мне нравится Discord, но он не для больших и серьёзных дядек) - Документацию обычно держат в
ConfluenceилиNotion. Бывает, держат документацию вGoogle Docs/Google Drive, но это не самый удобный способ - Код держат в
GitHub/GitLab/BitBucket. Часто, это self-hosted решения, то есть компании держат сервер условногоGitLabу себя
Я пользуюсь продуктами JetBrains. Нравится WebStorm и отказываться
не хочу, привык.
Но он платный, а в начале пути тебе ещё не платят чтобы ты был готов
заплатить за полезный инструмент.
Поэтому, советую Visual Studio Code (VSCode).
Он достаточно хорош, особенно если поставить нужные плагины. Сейчас он
является стандартом для новичков. Многие сеньоры тоже им пользуются.
Ты можешь выбрать что тебе удобнее, но важно понимать что неподходящий инструмент приведёт к непредсказуемому результату.
NPM - Node Package Manager. Менеджер пакетов. Пакет с пакетами. Примерно как Bower (устарел). Суть в том, что в каждом приложении на Node.js (фронтенд - в том числе), есть файл package.json, в котором описаны пакеты NPM.
Чтобы каждый разработчик не мучался с поиском какие же пакеты нужны для
работы приложения, они все описаны в этом файле. Он просто запускает
npm install в папке проекта, и всё что нужно устанавливается в папку
node_modules.
Также, package.json - второй файл после readme.md, на который смотрит
разработчик, когда открывает новый для себя проект. Там есть скрипты
запуска, а также список пакетов (на который никто толком не смотрит).
Где скачать NPM / Node.js: nodejs.org
Качать нужно LTS (Long Term Support). Версия Current содержит новые фишки и новые баги. Для разработки всё равно используется LTS.
Когда какая версия выходит в релиз (становится LTS), можно посмотреть тут
Эта команда создаёт package.json в текущей папке (интерактивно - он задаст вопросы, попросит номер паспорта, выдаст кредит...):
npm initЭта команда устанавливает пакеты, записанные в package.json:
npm installЭта команда доустанавливает пакет "moment":
npm install momentЭта команда доустанавливает пакет "moment" и записывает его в блок dependencies в package.json:
npm install moment --saveЭта команда доустанавливает пакет "moment" и записывает его в блок devDependencies в package.json:
npm install moment --save-devЭта команда запускает скрипт start из package.json (если он есть):
npm startТо же самое, что и предыдущее (шорткат есть только для start, остальные скрипты нужно запускать через run):
npm run startЕсли вы пишете NPM модуль, который будет подключаться в другие проекты, в dependencies должны остаться только пакеты, необходимые для нормального функционирования вашего модуля. Все пакеты для разработки этого модуля (тестеры, линтеры, и прочее), должны пойти в devDependencies.
Вообще стоит сразу разделять devDeps и обычные deps. Но на начальном этапе не стоит заморачиваться, у вас и так много головной боли. Просто запомните что тут есть это пояснение и вернитесь когда боль утихнет.
Git - это система контроля версий. GitHub, GitLab, BitBucket - это частные случаи серверов Git. Грубо говоря, Git - это хранилище файлов, которое ещё сохраняет все изменения (и записывает кто это сделал). Гит хранит всю подноготную твоего проекта пока ты не удалишь историю.
Где скачать гит: git-scm.com
В гите можно хранить как приватные (закрытые) репозитории, так и открытые, которые может посмотреть любой желающий (как этот репозиторий, где ты сейчас читаешь readme.md).
Есть 3 типа вёрстки, которые я застал:
- Табличная (устарела, но ещё используется для вёрстки Email)
- Блочная (она же "дивная", ещё используется, но устарела)
- FlexBox (вёрстка на флексах)
Табличная верстка - это то, как верстали в 90-х и 2000-х. Это ещё рабочий вариант, но он сильно устарел и учить его не нужно. Правда и учить там нечего. Суть в том, что вся страница представляется в виде таблиц.
Можно поделить страницу на 4 части:
- Хидер
- Левое меню
- Контент
- Футер
В таблицах, нам нужно сделать хидер и футер строками таблицы (row с colspan=2), а меню и контент сделать отдельными колонками:
<table>
<tr>
<td colspan="2">
Хидер
</td>
</tr>
<tr>
<td>
Левое меню
</td>
<td>
Контент
</td>
</tr>
<tr>
<td colspan="2">
Футер
</td>
</tr>
</table>Либо же вложить в среднюю строку ещё одну таблицу:
<table>
<tr>
<td>
Хидер
</td>
</tr>
<tr>
<td>
<table>
<td>
Левое меню
</td>
<td>
Контент
</td>
</table>
</td>
</tr>
<tr>
<td>
Футер
</td>
</tr>
</table>Старайся больше писать. Делай всё!
Советую начать любой Pet-проект. Пусть он будет честно украден из чьего-то репозитория. Скачай, установи пакеты, запусти, поменяй... Старайся работать с кодом, придумывай что можно изменить и меняй. Не бойся ошибаться, ОШИБАЙСЯ СПЕЦИАЛЬНО! Рви и терзай!
В начале пути, тщательно проверяй то, что ты делаешь, старайся делать правильно и набивать руку на правильных методах. Это поможет в дальнейшем.
Также, изучай новые подходы и методологии, выбирай, обсуждай, старайся понять. ВАЖНО пройти в первый год как можно более крутой путь и охватить как можно больше всего. Да, голова будет квадратной, но немцы говорят: Quadratisch, Praktisch, Gut.
Дальше:
- Постоянно работай над своим резюме
- Постоянно работай над своими инструментами
- Постоянно работай над своими навыками
- Выкладывай свои Pet-проекты на GitHub, это часть твоего резюме
- Привыкай к работе с инструментами компаний: Git, Slack, Trello (или другие, на твой выбор)
Есть несколько моментов, которые ещё могут помочь:
Если гугл не помогает при запросе на русском, попробуй на английском. Английский очень важен для программиста, т.к. почти вся документация написана на нём.
Также, не стоит спрашивать гугл совета или писать лишние фразы вроде "гугл, лапочка, подскажи мне, пожалуйста, как пропатчить KDE под FreeBSD?"
Поисковику нужно подсунуть ключевые слова, и он сам выдаст по ним наиболее релевантный ответ: "KDE FreeBSD патч" - это всё, что на самом деле важно из изначального запроса
Есть такое понятие "StackOverflow разработчик" - программист, который решает задачи с помощью StackOverflow.
Но сейчас не об этом. Важно что на этом сайте собрано очень много вопросов-ответов на тему программирования. Советую этим активно пользоваться.
Наша малышка стала совсем взрослой... и спасла Китай. (с) Мушу
На этом этапе, можно выходить на рынок и стараться пролезть в вакансию Junior-фронтендера. Будет очень много отказов, будь к этому готов и не переживай. Одни отказали - другие тоже откажут. Сто-пятидесятые возьмут.
Будущее - туманно. Зависит оно от команды, в которую залезешь. Там тебя научат плохому, даже не сомневайся.
"Ему советовали поймать другого лисёнка, но он ответил: Слишком много уйдёт терпения, нет, не для того, чтобы поймать, для того чтобы полюбить его"
Терпения тебе, юный падаван. И да пребудет с тобой сила.
-
Promises
-
REST
-
Стандарты EcmaScript
-
Debug
-
EventLoop
-
GarbageCollector
-
GraphQL
-
WebSockets
-
TypeScript
-
TSLint
-
Grunt / Gulp / WebPack / Rollup
-
Node.js
-
SSR
-
Next.js (React) / Nuxt.js (Vue)
-
Читать Хабр / Подкасты
-
Конференции
-
Тестирование фронтенда
-
Методы CI/CD (как протестировать и запускать твой код)
-
Скорость разработки, Помодоро
Советую почитать и изучить принципы и методологии.
DRY - Don't Repeat Yourself.
Заключается в том, чтобы выносить повторяющийся код в некий общий контейнер. Модуль или функция-хелпер или вообще класс - тебе решать.
KISS - Keep It Stupid Simple.
Заключается в том, чтобы не нагородить херни там, где это не нужно. Оставь это простым. Можно сказать, что это такая Бритва Оккама из мира программирования.
SOLID.
Некоторые спрашивают про SOLID на собеседованиях. Почти уверен, что они не пишут ООП на фронтенде, но раз спрашивают, значит им это важно...
Никогда не запускай npm audit fix --force!
Старайся всегда ставить под сомнение входные переменные. Проверяй что приходит в функцию (и приходит ли вообще).
Если нужно установить на сайт какой-то нестандартный шрифт, белка поможет. Хотя сначала стоит искать шрифты на Google Fonts: