F.a.q для новичков в web-программировании / как начинать / front-end

sptmbr · 19.02.2018

Думаю вот эта картинка будет в тему:

https://github.com/kamranahmedse/developer-roadmap

hatesociety · 15.08.2018

вот это уже неплохо

Dinni · 15.08.2018

полезно,пасибо

Izaro · 18.02.2019

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

JendaRioN · 29.03.2019

спс за гайд

Grigori Cortess · 29.03.2019

Бтв , Автор добавь сылку на Toster и StackOverFlow

Meme Machine · 29.03.2019

Grigori Cortess сказал: ↑

Бтв , Автор добавь сылку на Toster и StackOverFlow
Нажмите, чтобы раскрыть...

Бтв, пока будешь гуглить попадёшь на данные сервисы

jeeskin · 10.06.2019

информативно, за ответы на вопросы спасибо, ну и за саму темку

Flanterz · 17.06.2019

Meme Machine сказал: ↑
Наверно опять вставлю пять копеек. Потому что хоть форум сейчас только для скамеров, но надеюсь тут обитает определенный слой население кому это интересно.

Автор очень слабо или вообще не упоминает (прощу прощения, если я не заметил) про код стайл и доступность интерфейсов.
Код стайл очень важен. Особенно для новичка, который еще не понимает "как надо". Если не уделить этому в начале, дальше переучивать себя очень трудно будет (скажу по своему опыту).

Почему важен?

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

Портфолио обычно смотрят все же перед тем, как пригласить вас на собеседование.

Решили тестовое? Все верно, но у вас *цензура*код? Будьте готовы, что вас скорее всего не примут.

Есть функция отвечающая за сбор лисенеров модуля формы. bindEvents. Вроде все норм, но когда ты на продакшене собираешь весь код и вдруг видишь ошибку:
"Ошибка Name в bindEvents". И не ясно что именно и какие лисенеры биндит эта функция. Все? Определенные, какие?
Назови ты bindFormEvents или subscribeToFormEvents и станет чуть проще.

Как же избежать этого?

Документировать код, решение части проблемы. Как документировать? - // (ваш кэп) или JSDoc. Что такое JSDoc вы можете почитать в интернете подробно. Кратко - генератор документации. Примеры моего использования вы можете всегда попросить у меня в телеге или тут, в личных сообщениях.

Антипатерн.
Спагетти - код описан в википедии неплохо, но вас никто не ограничивает только этим ресурсом.

Называть функции правильно, чтобы содержал глагол. function1 - фигня. printNames - топ.
Пример

Массивы во множественном числе.
Константы большими буквами + UPPER_SNAKE_CASE
Код:
const MAX_HEIGHT = 400;
const EARTH_RADIUS = 6370;
Задавайте константы в начале вашего кода.
Обработчики событий для виджетов добавляются только в момент появления виджета на странице и удаляются в момент их исчезновения.

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

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

Вики
Название переменных, параметров, свойств начинается со строчной буквы и записываются в нотации CamelCase.
Никакого спаггети - кода. Убирайте повторяющиеся переменные по возможности, все влияет на скорость загрузки страницы. Используйте IIFE для модулей.
Код:
use strict';

(function () {
  window.load = function (url, onLoad) {
    var xhr = new XMLHttpRequest();
    xhr.addEventListener('load', onLoad);

    xhr.responseType = 'json';
    xhr.open('GET', url);
    xhr.send();
  };
})();
Для вставки пользовательских строк (имён, фамилий и т.д.) textContent
Никакого innerHTML
Защита от XSS-атак, а также изменения исходных данных, запутывание пользователя и прочее
Функция должна выполнять 1 - 2 задачи, не более.
Названия функций желателно деражть единообразно. Функциональное выражение или Функциональное объявление
Код:
// Неправильно:

var doSomethingElse = function () {
  // function body
};

function doSomething() {
  // function body
}
// Правильно:

var doSomething = function () {
  // function body
};

var doSomethingElse = function () {
  // function body
};
или

function doSomething() {
  // function body
}

function doSomethingElse() {
  // function body
}
Никаких var knopka = document.querySelector('.knopka-odin'); Понятные названия, без транслита. Учите английский.

Используйте ESLint. Пожалуйста. Он решит очень много проблем.
Делать сайт доступным вроде и просто, а вроде и не все могут.
Я не буду сильно разглагольствовать в этой теме, Вадим Макеев очень хорошо все описывает.
Пожалуйста, если вам интересна эта тема, то посмотрите материалы. Они не скучные и будут полезны вам.

Жми сюда!
Людоедский интерфейс
Почему я не могу пользоваться твоим сайтом?
Фокус помогает

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

Минификация не зло.
При сборке Gulp или самому через сайт
Выбор за вами.

Сборка Gulp
Онлайн

Сборка Gulp
Онлайн

Сборка Gulp
Онлайн

Сборка Gulp
Sprite

Данный формат плохо поддерживается. Он новый, весит мало, запомните это.
Сборка Gulp

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

Scronder · 03.10.2019

+rep автору темы,новичкам полезно будет однозначно.

Devertoo · 06.10.2019

Грамотный план , просто написано . БРАВО!!!

mmvxviii · 29.10.2023

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