Главная->Новости->20 рабочих советов от Junior Front-end developer

20 рабочих советов от Junior Front-end developer

13 Нояб в 11:12
Просмотров: 123



HTML

Сие изобретение было запущено в 1993 и до сих пор является основным и самым важным языком создания сайтов. Сначала был SGML – дедушка HTML — потом он модифицировался в XHTML, а сегодня ты используешь самую (пока) логически завершенную версию – HTML5.

Её код очень своеобразен и интересен, а быстро изучить его сможет любой. Почти каждый HTML-документ содержит теги head, body и footer – что может быть проще? Эти теги заключены в угловые скобки (< >).

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

Необходимые советы по HTML

Любой новичок совершает ошибки, и это вполне нормально. Чтобы количество ошибок становилось меньше, нужна практика и опыт. Всего не упомнить и сразу не изучить.

Всегда закрывайте теги

Каждый открытый тег должен обязательно быть закрыт! Нельзя оставлять теги в таком виде, если тебе не нужны последствия. Допустим, есть div, к которому прицеплен hover-эффект. Если оставить его открытым, то этот эффект унаследуется всеми элементами, пока не дойдет до тега
.

Особенно это важно при работе в команде: коллеги будут «очень рады» потерять «немножко» времени на поиск злосчастных закрывающихся скобок.

Void-элементы

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

К void относятся следующие теги: are, base, br, col, embed, hr, img, input, link, meta, param, source, track, wbr.

Используй div-ную верстку

Div – это сердце структуры современного HTML. С помощью данного элемента можно навести порядок в верстке, создать удобную структуру документа и получить красивый внешний вид.

Карточка состоит из четырех элементов: картинки, заголовка, подзаголовка и кнопки. Если мы хотим стать хорошим front-end developer-ом, мы просто обязаны отделить все элементы и иметь удобный и читаемый код.

Избегай Inline-Style

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

Скрипты всегда в конце

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

Пиши имена тегов с маленькой буквы

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

CSS

Это язык таблиц стилей, созданный в 1996 году. Он используется для установки свойств стиля веб-документов, таких как XHTML, HTML, HTML5, XML, SVG и RSS.

Селекторы

Селекторы помогают определить, к какому объекту применять свойства стиля. Селекторы в CSS бывают нескольких видов: селектор типов, селектор классов, селектор идентификаторов, универсальный селектор и селектор атрибутов.

Селектор типа: он будет применим к каждому элементу, совпадающему с именем селектора.

Селектор класса: начинается с точки, за которой следует имя класса элемента .class_name. Такой селектор весьма полезен, когда нужно повторно использовать стиль для другого элемента.

Селектор id: в отличие от селектора класса, селектор id уникальный (в документе не может быть двух элементов с одинаковым идентификатором). Такой селектор является наиболее распространенным при работе с JavaScript.

Универсальный селектор: данному селектору будет соответствовать каждый тег в HTML-документе. Зачастую этот знаменитый «*» используют для создания правила по умолчанию.

Селектор атрибута: специальный тип селектора для поиска по атрибутам.

Необходимые советы по CSS

Как и в программировании, в CSS создание неправильного или некорректного имени класса и корявой структуры приводит к головной боли в дальнейшем. Дадим несколько советов в помощь.

Объектно-ориентированные CSS

Цель — сделать динамический CSS более управляемым, применив принципы объектно-ориентированного дизайна из ЯП Java и Ruby. OOCSS делают CSS более понятными, повторно-используемыми, масштабируемыми и простыми в управлении.

Блок, элемент, модификатор (BEM)

Особая разметка страницы. BEM состоит из трех частей. Блок – внешний родительский элемент компонента. Элемент – “внутренности” компонента. Модификатор используется в случае нескольких BEM на одном узле.

Не углубляйся

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

Создавай файл импорта CSS

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

Используй Flex-Box

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

JavaScript

JavaScript – это объектно-ориентированный, основанный на прототипах, императивный и динамический язык программирования с диалектной базой на ECMAScript. Родился он в далеком 1995 году и обычно использовался на стороне клиента, но сегодня JavaScript позволяет создавать сервер и управлять им.

Необходимые советы по JS

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

Поток управления

Это порядок, в котором выполняются инструкции сценария. Действия выполняются по порядку от первой строки в файле до последней, пока не встречаются структуры (условия и циклы), изменяющие порядок следования.

if else. Данное условие является булевым. Имеется в виду, что, когда условие истинно, выполняется какой-то код, находящийся внутри оператора if, т.е. код не будет реализован, пока не вернется true.

switch. Эта конструкция похожа на if-else, но с огромной разницей: у нее есть блоки case (аналог if), break (аналог конца условия) и default (аналог else).

for. Цикл for будет выполняться, исходя из условий в скобках. Есть несколько вариантов, таких, как for in, for of, for await of.

Манипуляции с DOM. JavaScript позволяет придать интерактивность твоему сайту. Для этого существует масса фреймворков, таких, как JQuery, но знать основы необходимо, чтобы понимать, как все устроено внутри.

Асинхронность. Это работа через async/await с событиями (промисами), появляющимися независимо от основного потока выполнения программы.

Test-Driven-Development (TDD). Данный процесс разработки ПО основан на повторении очень коротких циклов (конкретных тестовых случаев) разработки, после которых следует модернизация кода и окончание тестов.

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

Резюме



Front-end developer должен постоянно самосовершенствоваться. Продолжайте обучение, улучшайте качество своего кода, доводите до совершенства навыки дизайна и не останавливайтесь перед трудностями – они закаляют!



Оставить комментарий

Ваше имя::


Комментарий::




Ничего не найдено