Что делать новичку​

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

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

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

2. Система контроля версий
Важная часть, которую необходимо изучать сразу же после того, как вы сверстаете свои первые значимые странички. Пункт зачтён, когда на каждый проект вы умеете создавать репозиторий, владеете git add, commit, push, pull, checkout, fetch
Лучшая базовая статья по гиту

3. JavaScript
Ура, программирование. Нужно уметь решать алгоритмические задачи easy уровня с leetcode.com, понимать что такое DOM, события, event loop, замыкание. Тут важно сделать акцент на взаимодействии с HTML — добавление и удаление элементов на страницу, изменение их состояния, базовые умения работать с сетью по HTTP. Чем больше вы проведете времени на этом этапе, тем лучше. Рынку не нужны “React-программисты”. Знать базу очень важно. Аналогия очень простая: без хорошего понимания что такое sin и cos, вас никто не заставит решать квадратные тригонометрические уравнения. Не надо лезть во всякие реакты, прежде чем вы не знаете базы
Лучшее видео по JavaScript

4. TypeScript
На хорошую JS базу отлично ляжет TypeScript. Переходить к фреймворкам/библиотекам без TypeScript’a я вообще не вижу смысла.
Лучший базовый плейлист по TypeScript

5. Выбор фреймворка
Абсолютно всё равно что вы возьмёте для первоначального знакомства. Я глубоко убежден, что, например, из Vue в React и обратно, реально перекатиться за два полных рабочих дня. Да, вы не будете знать абсолютно всех мелочей, но сможете писать адекватный код. Лично я, если бы начинал, выбрал бы Vue или React. Без объяснения причин, мне просто прикольно поизучать их. Ангуляр никогда не вызывал интереса. Экзотику типа Svelte для первого знакомства мы не берём точно. В выбранный инструмент углубляться можно сколько угодно долго. Работу я бы начал искать после написания 3-5 серьёзных пет-проектов
Лучшие видео по React и Vue на канале Ulbi TV

6. NodeJS
Кто бы что ни говорил, я уверен, что NodeJS фронтендер знать обязан хотя бы на базовом уровне. Необходимо понимать что такое express, как обрабатываются заголовки, куки, полезная нагрузка запроса и тд.
Лучшие видео по NodeJS на канале Ulbi TV

Дальнейший путь вы можете обсудить со своим ментором, но я уверен, что 9/10 человек смогут и без ментора понять куда двигаться дальше на таком уровне. Если будут ещё вопросы, не стесняйтесь спросить в комментах.

Также абсолютно всем без исключения советую именно это видео. Ничего лучше вы не найдёте.

Спасибо за прочтение, это важно для меня ❤️

@prog_way_blog — чат — #web #blog #useful

Шпаргалка по Utility-типам в TypeScript

В этом посте разберу только самые часто используемые, посмотреть все utility-типы можно в официальной документации.

type Person = {
 name: string;
 surname: string;
 age: number
}

Partial<T>
Делает все ключи необязательными

type PartialPerson = Partial<Person>

// то же самое, что 
type PartialPerson = {
 name?: string;
 surname?: string;
 age?: number
}

Required<T>
Обратное действие Partial — делает все ключи обязательными

Required<Partial<Person>> === Person

Readonly<Type>
Запрещает изменять поля объекта

const person: Readonly<Person> = {
 name: "Denis",
 surname: "Putnov",
 age: 22
}

// ошибка, так как 
// person нельзя изменять,
// только считывать (readonly)
person.name = 'Денис'

Record<Keys, Values>
Создаёт тип из ключей и значений, указанных отдельно

// ключи могут быть только строкой
// значения - только числом
type WordCounter = Record<string, number>

type Status = 'success' | 'error'
type StatusCounter = Record<Status, number>

// то же самое, что и Record ранее
type StatusCounter = {
 success: number
 error: number
}

Pick<Type, Keys>
Выбирает только нужные ключи из типа и возвращает новый тип

// из типа Person выбираем только свойства
// name и surname
type PersonName = Pick<Person, 'name' | 'surname'>

// то же самое
type PersonName = {
 name: string
 surname: string
}

Omit<Type, Keys>
Удаляет ненужные свойства из типа и возвращает новый тип

// Из типа Person исключаем свойство 'age'
type PersonName = Omit<Person, 'age'>;

// то же самое
type PersonName = {
 name: string
 surname: string
}

Parameters<Function>
Возвращает тип параметров функции

type Foo = (a: number, b: number) => string
type Params = Parameters<Foo>

Params // [a: number, b: number]

ReturnType<Function>
Возвращает тип возвращаемого параметра из функции

type Foo = (a: number, b: number) => string
type Return = ReturnType<Foo>

Return // string

Спасибо за прочтение, это важно для меня ❤️

@prog_way_blog — чат — #theory #typescript #useful

Семантическое версионирование

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

<major>.<minor>.<patch>-<preRelease>

1. Мажорные версии (major): Увеличиваются, когда вносятся несовместимые изменения API.
2. Минорные версии (minor): Увеличиваются, когда добавляются новые функции, сохраняя обратную совместимость.
3. Патч-версии (patch): Увеличиваются, когда выпускаются исправления ошибок, сохраняя обратную и прямую совместимость.
4. Предрелизные версии (preRelease): Можно добавлять к номеру версии суффиксы, чтобы обозначить предварительные версии (например, alpha, beta, rc).

Примеры:

1.0.0
1.2.3
2.0.0
1.5.0-alpha.1
1.5.0-rc.2
4.2.1-snapshot.4
5.18.2-test.1

Кстати, обычно суффиксы встречаются такие:
1. dev — версия, которая может содержать изменения, находящиеся в процессе разработки, и не является полностью стабильной
2. alpha — первая версия программного продукта, которая обычно имеет ограниченный набор функций и может содержать много ошибок
3. beta — версия, которая следует за альфа-версией и обычно уже более стабильна. В бета-версию могут быть добавлены новые функции, но она все еще может содержать некоторые ошибки
4. release-candidate (rc) — версия, которая считается готовой к выпуску, но перед официальным релизом требует дополнительного тестирования и обратной связи от пользователей
5. preview — версия, которая предварительно показывает новые функции или изменения, которые будут включены в будущую версию
6. test — версия, которая используется для тестирования новых функций или исправлений перед их включением в основную ветку разработки

Спасибо за прочтение, это важно для меня ❤️

@prog_way_blog — чат — #theory #useful

Что такое Fullscreen API

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

Яркий пример использования Fullscreen API — это видеоплееры. Когда вы нажимаете кнопку для просмотра видео на весь экран, используется именно этот API. Но его возможности далеко не ограничиваются видео: он может быть применен к любым элементам страницы, будь то изображения, модалки и любые другие блоки страницы.

Пример использования следующий:

// получаем элемент, который хотим открыть на весь экран
const element = document.getElementById('target');

// открыть элемент на весь экран
element.requestFullscreen()

// получить элемент, который открыть в полноэкранном режиме
document.fullscreenElement

// выйти из полноэкранного режима
document.exitFullsreen()

Также методы requestFullscreen и exitFullscreen являются промисами, что позволяет проще работать с ними и обрабатывать ошибки их вызова.

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

document.addEventListener('fullscreenchange', () => {
 // как-то обрабатываем изменение состояния
 
 // можно завязаться на
 // document.fullscreenElement
})

Спасибо за прочтение, это важно для меня ❤️

@prog_way_blog — чат — #theory #code #javascript #web #useful

Псевдоселекторы в CSS

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

Псевдоселекторы бывают двух видов:
1. Псевдоклассы — применяются к элементам на основе их состояния или взаимодействия с пользователем
2. Псевдоэлементы — позволяют стилизовать определённые части элементов

Примеры псевдоклассов:

1. :hover — применяется, когда пользователь наводит указатель мыши на элемент

a:hover {
    color: red;
}

В этом примере цвет текста ссылки изменится на красный при наведении курсора

2. :nth-child(n) — выбирает элементы на основе их позиции среди братьев и сестёр

li:nth-child(2) {
    background-color: yellow;
}

Здесь каждый второй элемент списка li будет иметь жёлтый фон

3. :focus — применяется к элементу, когда он получает фокус (например, при клике или переходе по табуляции)

input:focus {
    border-color: blue;
}

В этом примере цвет рамки текстового поля станет синим, когда элемент получит фокус

Конечно же, это не все псевдоклассы, которые существуют в CSS. В этом посте рассмотрим только часть для примера

Примеры псевдоэлементов:

1. ::before — вставляет содержимое перед элементом

p::before {
    content: "Note: ";
    font-weight: bold;
}

Этот стиль добавит текст "Note: " перед каждым параграфом p

2. ::after — вставляет содержимое после элемента.

p::after {
    content: " ->";
    color: grey;
}

В этом примере текст "->" будет добавлен после каждого параграфа

Ну и также не стоит забывать о том, что все псевдоселекторы можно сочетать, если правила стилизации у нас более сложные:

li:nth-child(odd):hover {
    background-color: lightblue;
}

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

Спасибо за прочтение, это важно для меня ❤️

@prog_way_blog — чат — #theory #web #useful

Что такое семантика?

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

Семантических тегов множество, однако, самые используемые из них:

<header> - заголовок секции или документа
<nav> - навигационное меню
<article> - независимая часть контента, например, статья, пост...
<section> - определяет раздел конкретного документа, статьи, поста...
<aside> - содержит контент, связанный с основным содержанием страницы, но не являющийся его частью
<footer> - представляет нижний колонтитул секции или документа

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

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

Давайте сразу на примере:

<header> - по сути, тот же <div>, но просто парсится иначе

<button> - тоже семантический тег 

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

На самом деле, семантический тег — это всё, что не <div>. Только этот тег не имеет особого назначения и нужен лишь для группировки других тегов. Остальные же теги несут в себе какой-то дополнительный семантический смысл.

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

Да и в целом не забывайте про реакции. Они реально мотивируют меня что-то писать.

Спасибо за прочтение, это важно для меня ❤️

@prog_way_blog — чат — #theory #web #useful

Что такое Git Flow?

Git Flow — это модель ветвления для Git, основная идея которой заключается в использовании отдельной ветки для каждого этапа разработки. Обычно выделяются следующие ветки:

1. Основная ветка — чаще всего это master
Эта ветка содержит стабильную версию продукта, которая готова к выпуску. В ней всегда должен быть работающий и протестированный код. Каждый коммит в master обычно соответствует одной версии продукта

2. Ветка разработки — чаще всего это develop
В этой ветке происходит активная разработка. Все новые фичи и изменения сначала попадают сюда. После тестирования и проверки они будут слиты в master

Также есть вспомогательные ветки, которые маркируются своим префиксом — чаше всего это feature/*, release/*, bugfix/*, hotfix/*:

1. Ветки для разработки новых функций — feature/*
Они создаются от develop и после завершения работы сливаются обратно в develop. Нужны такие ветки для организации разработки отдельной фичи.

2. Ветка для фикса багов — bugfix/* и hotfix/*
Почти то же самое, что и feature/*, только эти ветки нужны для фикса багов. hotfix/* — для фикса багов в мастере или релизе. bugfix/* — для фикса багов в ветке develop

3. Ветка для подготовки версии продукта — release/*
Создаются от develop, когда разработка новых функций завершена и нужно подготовить релиз. После завершения сливаются в master и develop

Чаще всего процесс разработки выглядит таким образом: берём задачку → делаем отдельную ветку → вносим изменения → сливаемся через код ревью в нужную ветку

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

Спасибо за прочтение, это важно для меня ❤️

@prog_way_blog — чат — #theory #useful

Какими способами можно скрыть элемент со страницы?

Для многих каверзный вопрос. В этом посте коротко рассмотрим какие есть варианты

1. Использовать display: none

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

2. Использовать visibility: hidden

Этот вариант, в отличии от display: none, не выводит элемент из потока документа. Элемент скрывается для глаз пользователя, но всё ещё продолжает обрабатываться и занимает место в вёрстке

3. Использовать opacity: 0

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

4. Позиционировать элемент далеко и надолго

.element {
 position: absolute;
 left: -999999px;
} 

Абсолютно точно не советую использовать этот вариант, хотя работать будет

Есть ещё всякая экзотика типа <div hidden>, но это именно экзотика. Способы выше — основные, их точно хватит на практике.

Спасибо за прочтение, это важно для меня ❤️

@prog_way_blog — чат — #theory #web #useful

Как открыть ссылку в новом окне или вкладке

Чтобы ссылка открывалась в новом окне или вкладке, достаточно добавить к тегу <a> атрибут target="_blank":

<a 
 href="https://t.me/prog_way_blog" 
 target="_blank"
 rel="noopener noreferrer"
>
 Ну чё-то какой-то канал в телеге
</a>

Атрибут target="_blank" сообщает браузеру, что ссылку нужно открыть в новой вкладке. И также стоит обратить внимание на атрибут rel. Он предотвращает передачу информации о странице, с которой была открыта ссылка, а также защищает от потенциальных уязвимостей

Накидайте побольше китов 🐳 на пост и, если это будет актуально, сделаю отдельный пост с разбором noopener noreferrer и зачем оно надо

Если же вы сомневаетесь, ставить их или нет — ставьте всегда

Спасибо за прочтение, это важно для меня ❤️

@prog_way_blog — чат — #theory #web #useful