Практический JavaScript (Продвинутый уровень)

Урок 26, хосспади, Иван, ты идиот? Ты делаешь advanced level курс в котором объясняешь, что такое try catch блок? Ты серёьзно? Тем более, в предыдущих проектах мы использовали эту конструкцию.

try catch блок используется не для таких "примитивных" надобностей. Самое основное, конструкция используется для правильной обработки ошибки. Когда вызов функции может бросить любую ошибку, а не вернуть null.

Что касается querySelector - функция возвращает null, если ничего не найдено. В этом случае, достаточно поставить обычный guard, то есть, if (!hanson) return;

Спасибо за подробности курса и ваше видение:) выберу другой курс.

hazartilirot зачем это все писать тут? хочешь выписать ему иди на Udemy

Делал паузу, вернулся к этому уроку, есть ещё замечания

1) Автор, использует try catch блок, такое ощущение, как будто, если один блок (слайд) у нас установлен в display: block, а всем остальные в display: none, то HTML будет отсутствовать на странице. блок с классом .hanson будет в любом случае, потому что css параметры не влияют на это. Следовательно, неконтроллируемого состояния у нас не может быть. Максимум, это к свойству объекта будет присвоен null.
2) Как я писал ранее, если мы обращаемся к переменной, то мы можем установить guard
3) Непонятно, что Иван имел ввиду под ООП-ным проектом. Чем дальше, тем проект меньше напоминает ООП. Мало создать объект. Мы должны больше придерживаться абстракций, а тут, происходит хард кодинг...

Урок 25, пока настраивал проект, обнаружил, что кроме приватных переменных объекта, нельзя использовать arrow function в class - зашибись.

Делаем npm install, потом сразу апдейтим npm update

Инсталлируем: npm install --save-dev @babel/plugin-proposal-class-properties

Далее, открыавем gulpfile.js, находим поле options: { (в двух местах, build-js и build-prod-js) и добавляем в него после present: [...],

plugins: [
"@babel/plugin-proposal-class-properties"
]


должно получиться типа:

options: {
presets: [['@babel/preset-env', {
debug: true,
corejs: 3,
useBuiltIns: "usage"
}]],
plugins: [
"@babel/plugin-proposal-class-properties"
]
}

Непонятно, какое ООП без инкапсулирования?

Хрен знает, что там Ванька задумал, пока как-то так
https://github.com/hazartilirot/slider_spa/blob/main/src/js/modules/slider.js

Урок 23, слегка пробежимся по коду.

1) По всплывающей кнопке для проброса на верх. animated, fadein лишнее - так как у нас по умолчанию плавно исчезает/появляется кнопка. Кроме опасити, нужно установить визэбилити на хидэн. Иначе кнопки видно не будет, а поинтер на курсоре останется.

window.addEventListener('scroll', () => {
const scrollTop = document.documentElement.scrollTop | 0;
toTheTopBtn.style.opacity =
scrollTop >= mainSectionHeight + headerHeight ? '1' : '0';
toTheTopBtn.style.visibility =
scrollTop >= mainSectionHeight + headerHeight ? 'visible' : 'hidden';
})

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

while (anchorElement.offsetParent) {
anchorElementParent += anchorElement.offsetTop;
anchorElement = anchorElement.offsetParent
}

3) Везде используется выражение let scrollTop = Math.round( document.body.scrollTop || document.documentElement.scrollTop)

при этом, в конце, без проверок, используется
document.documentElement.scrollTop += speed;
document.body.scrollTop += speed;

4) history.replaceState(history.state, document.title, location.href.replace(/\/#[a-z]+$/g, '')) - зачем используется эта функция, если мы прэвэнтим дефолтное поведение? Линк будет без энкера.

5) Нефиговый if на пять условий, который для меня, на 28:30 минуте, пока абсолютно непонятный. У нас динамически меняется document.documentElement.scrollTop, и также, нам, по-идее, известная конечная точка, которую мы получаем в while лупе. Иначе, что там делает второй параметр в smoothScroll? Отсюда вытекает следующий вопрос, а зачем нам prevScrollTop вообще?

6) Зачем такой объёмный код в котором чёрт-знает-что происходит? Пару строчек делают абсолютно тоже самое.

const toTheTopBtn = document.querySelector('.pageup');

toTheTopBtn.addEventListener('click', (e) => {
e.preventDefault();
window.scrollTo({top: 0, left: 0, behavior: 'smooth'})
})

Ванька фрик))) Нужно досмотреть. Может там какая-то гениальная комбинация?)

Тайминг 41:27, Ваня быдло-кодер, набирает... набирает... набирает, какой-то текст. Какой смысл в том, что ты набираешь код? Ты думаешь, кто-то от этого станет умнее? Твоя миссия должна быть НАУЧИТЬ ЛЮДЕЙ ДУМАТЬ, а не тупо набирать текст или читать твой сраный код. Мне проще начинать смотреть видео с конца, потому что я вижу результат (что должно получится) и начинаю гуглить саму реализацию, имплементируя функцию самостоятельно.

Поставь задачи.
Объясни с какими проблемами человек может столкнуться
Как решить эту проблему (на словах, не на коде)
Какие особенности.
Научи разбивать таски на мелкие задачи
Протестируй тщательно работоспособность


Какой-то прогресс, время, какие-то непонятные вычисления, скорость - которая от большего значения становиться только медленее, позиционирование раздела без учёта padding-top. У меня складывается такое впечатление, что Ваня, в процессе своего обучения, старается научить ещё и нас. Жду недождусь когда закончу этот курс....

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

В общем, кто хочет нормальное решение, прошу
https://github.com/hazartilirot/portraits_canvas/blob/main/src/js/modals/navigateToSection.js

Да, в стилях .pageup z-index должен быть 19 лвл (такой же как и у подарка), иначе, при появлении модального окна, оvershadow не перекроет кнопку.

"Макс Хэйт" - это у меня к этому курсу. Высота произносится как "Хайт"

Нейминг меня не перестаёт удивлять.)
класс often-questions - вообще-то, нужно обозначать как FAQ (Frequently Asked Questions). Это правильно, и сразу понятно.

Классический Аккордион - это следующая выбранная категория, закрывает текущее выпадающую информацию (подменю), и открывает новую. Не закрывается категория тогда, когда есть подкатегория с последующим выпаданием при условии, если на неё нажали. В первом случае, с имплементацией CSS правильно работает. Вторая, имплементация на JS - полная туфта.

20 урок, всё банально, прям скучно. Взять группу блоков, повесить на каждого EventListener(а), гонять несколько циклов... Как видим - всё работает, а по существу - примитивно.

Ванька, всё чешет про какие-то алгоритмы. Где они?

Моя версия будет потяжелее для понимания, но интереснее)

https://github.com/hazartilirot/portraits_canvas/blob/main/src/js/modals/makeAnyCanvasFrame.js

О, хосспади, 19-тый урок. Это что-то!!!
Два раза травёрсим, туева хуча querySelector(ов), addEvenListener(ов).

Нет, конечно, всё работает. Но это, по моему мнению, говно код, который не может писать человек с пятью годами опыта. Скажите мне, что это шутка? Такое можно показать на первых уроках по JS DOM, и то, в контексте, практика обработчиков событий с аннотацией - так, никогда не делайте. :)

Вот, не стал делать как Ванька, и получилось красиво)
https://github.com/hazartilirot/portraits_canvas/blob/main/src/js/modals/portfolioMenu.js

Ваня, ты тут? Я кину тебе на гитхаб на твой проект
https://github.com/hazartilirot/portraits_canvas

forms.js - файл работающий с формами.

inputChecker.js - файл работающий с проверками input полей. В нём две функции, код читается легко, в отличие от твоего кода с масками, где кучка вложенных условий.

regex.js - хранит регулярные выражения по всем input полям. Можно легко адаптировать.

Чтобы запретить пользователю вставлять текст (который противоречит условиям), достаточно добавить аттрибут onpaste="return false" в input.


По 16 уроку, опять ненужные переборы. Всё делается проще. Мы за один проход перезначаем целую строку с разными классами. Мало того, если я не ошибаюсь, перед удалением самой кнопки, мы должны удалить EventListener, который остаётся сидеть в памяти. То есть, мы должны или использовать removeEventListener или же, мы можем воспользоваться опциями и передать третий аргумент {once: true} - который удалит событие автоматически как только у нас пользователь кликнит один раз на кнопку.

button.addEventListener('click', () => {
cards.forEach(card =>
card.className = 'col-sm-3 col-sm-offset-0 col-xs-10 col-xs-offset-1 animated fadeInUp');
button.remove();
}, {once: true})

а что касается реализации через .json файл, лаконичнее использовать axios. Вместо, innerHTML, использовать insertAdjacentHTML, он универсальнее.
Нам не нужен дополнительный селектор, достаточно кнопки. В db.json файле, убрать лишний {"styles": }, достаточно [] и всё что внутри.

button.addEventListener('click', async () => {
const { data } = await axios('assets/styles.json');
data.forEach(({ src, title, link }) =>
button.previousElementSibling.insertAdjacentHTML('beforeend', `



${ title }
Подробнее


`))
button.remove()
}, {once: true})

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

15-ый урок. Маска - это полная ерунда. В ней нет никакого смысла. Правильнее контролировать каждую цифру особенно те, которые касаются кода оператора. Я показывал регулярные выражения ранее, целый массив валидации.

08:00 минута. Ванька даже не соображает о чём говорит. Это не диапазон. Диапазон
[a-zA-Z] указывается дашом. В квадратных же скобках указывается любое из перечисленных условий (совпадений). То есть, [_d] - может быть или underscore или же любая цифра, причём 100 в данном случае будет рассматриваться не вместе, а по-отдельности. Один ноль ноль.

Тут, есть курс хороший, называется MASTERING REGULAR EXPRESSIONS IN JAVASCRIPT. Вань, посмотри, хоть минимально начнёшь разбираться.)

Урок 14, время 30:00

А если пользователь загрузит файл, у которого имя будет содержать несколько точек в названии файла? :) Использовать точки в имени - это распространенная практика. Такие вещи нужно делать через регулярные выражения и проверять/сплитить файл через расширение файлов.

Ну, и там на 15:00 минуте, ситаксис просто убил

let api;

item.closest('.popup-design') ? api = path.designer : path.question

Уж если писать такую хрень тернарным оператором, тогда правильнее

let api = item.closest('.popup-design') ? path.designer : path.question;

Ох, Ванька.... ты убиваешь меня.... откуда ты взялся на мою голову....

Урок 11, время 3:56 - я в бешенстве! Ваня! Какого лешего ты копируешь файл из другого проекта? Это что за методика такая? Учитель, блин.

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

Ванька лузер. За пять лет не научился программировать. Поэтому решил заработать на продаже курса. За бабки пихает народу негодный контент. Ломать пальцы нужно таким менторам и вырывать язык, чтобы не размножали криворуких. Такой запрограммирует людей писать говно код, потом не отучишь. Поэтому, пока твои мозги не захламлены этим джанком, предлагаю тебе пропустить этот курс.)

Зачем нервничаешь, насяльника?

а какой курс порекомендуете ?

Девятый урок - Ваня, Ваня.... валенок, ты, блин, Ваня. Ты чему людей учишь? И нахрена такие курсы делать? контейнеру для изображений ты определяешь .popup . В твоём случае, пока ты закомментировал showModalByTimer - то есть, всплывающее окно через указанное время, которое предлагает ввести имя и телефон, то всё будет работать тип-топ. Как ты думаешь, что произойдёт, если разкомментировать эту функцию? :)

Вот же ботинок) Пять лет опыта - я, блин, в ужасе от таких учителей. Всё стараюсь, не комментировать произношение английский слов, типа, Хайден, Майнут.... это же вообще позорище какое-то. Advanced level(у) он решил научить людей.

Восьмой урок не хочется комментировать) Реально, очень непродумано всё сделано.

Если есть состояние в котором мы храним данные, то подсчёт стоимости должен начинаться с учётом выбора остекление (на верхнем слайдере, который по дефолту деревянный) и, тёплый/холодный сохраняться в нашем состоянии, собственно тот, на который мы нажимает "посчитать". Получается, что ты перешёл в алюминиевое остекление, нажал на тёплый просчитать - а потом заново нужно выбирать) БРЕЕЕЕЕЕЕЕД! )

Таймер сделан неплохо, есть несколько нюансов
1) Почему нельзя изначально экспортировать так:

export default () => {
блок кода
}
и зампортировать в main.js
import timer from "./modules/timer";

2) Что такое первый параметр id, который передаётся в main.js в функцию timer? Зачем он нужен я так и не смог разобраться))))))

Седьмой урок, 6:45, опять вопрос. Зачем траверсить через все элементы windowForm? Почему мы не применяем Bubbling? Мы выделяем верхний элемент.

const typeOfWindow = document.querySelector('.balcon_icons');
сажаем на него один event listener и далее, собираем dataset.id -шки каждого элемента.

typeOfWindow.addEventListener('click', ({target}) => {
state.form = target.closest('.balcon_icons_img').dataset.id
})

то есть, в , добавляем для каждого


data-id="0", data-id="1", data-id="2" и т.д.

Один слушает, closest объединяет вложенные теги и bubbling поднимает id на самый верх.

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

А-а-а-а-а-а-а-, мама.... вот, это уровень! Продолжаю смотреть курс, уже шестой урок, в наушниках, где-то на 14:12-14:14 - раздаётся громкий пууууууууук! :D

О, боги.... такой курс, я смотрю впервые.))))))) Ну, Ваня, ну, даёшь)))))))

Курва, этот Ваня - валенок, блин. У меня опыта меньше года (учёбы), и то, мне кажется, я понимаю больше, чем он. Учит какому-то быдло-кодингу. Если уже делается форма под телефон, то мне кажется, нужно создать определённый паттерн по которому проверять каждое нажатие клавиши. То есть, нам подходят следующие регулярные выражения, типа:
+380671111111 или
+38067111-11-11 или
38067111-11-11 или
067111-11-11 или
(067) 111-11-11 и т.д.

всё остальное вызывает ошибку. Ошибка или исчезает сама через 3 секунды или, при следующем нажатии (например, если пользователь нажал быстро три раза 111, такая строка нам не подходит, т.к. она должна начинаться с +, 3, 0), проверит на присутствие ошибки, если она уже присутствует, то предыдущая будет удалена, а новая, встанет вместо неё с новым таймером.

const phones = document.querySelectorAll('input[name=user_phone]');

phones.forEach(i => {
i.addEventListener('input', () => {

const regexArray = [
/^\+$/,
/^\+?3$/,
/^(\+?38)?$/,
/^(\+?38)?\($/,
/^(\+?38)?0$/,
/^(\+?38)?\(?0$/,
/^(\+?38)?\(?0[9675]$/,
/^(\+?38)?\(?0[9675][2356790]$/,
/^(\+?38)?\(?0[9675][2356790]\)?$/,
/^(\+?38)?\(?0[9675][2356790]\)?[\-\s]?$/,
/^(\+?38)?\(?0[9675][2356790]\)?[\-\s]?\d$/,
/^(\+?38)?\(?0[9675][2356790]\)?[\-\s]?\d{2}$/,
/^(\+?38)?\(?0[9675][2356790]\)?[\-\s]?\d{3}$/,
/^(\+?38)?\(?0[9675][2356790]\)?[\-\s]?\d{3}[\-\s]?$/,
/^(\+?38)?\(?0[9675][2356790]\)?[\-\s]?\d{3}[\-\s]?\d$/,
/^(\+?38)?\(?0[9675][2356790]\)?[\-\s]?\d{3}[\-\s]?\d{2}$/,
/^(\+?38)?\(?0[9675][2356790]\)?[\-\s]?\d{3}[\-\s]?\d{2}[\-\s]?$/,
/^(\+?38)?\(?0[9675][2356790]\)?[\-\s]?\d{3}[\-\s]?\d{2}[\-\s]?\d$/,
/^(\+?38)?\(?0[9675][2356790]\)?[\-\s]?\d{3}[\-\s]?\d{2}[\-\s]?\d{2}$/,
];

let statusMessage;

if (!regexArray.some(regex => regex.test(i.value))) {
i.value = i.value.substring(0, i.value.length - 1);

const form = i.parentNode;
statusMessage = document.createElement('div');
statusMessage.classList.add('status');
form.appendChild(statusMessage);

if (statusMessage.previousSibling.className === 'status')
statusMessage.previousSibling.remove();

statusMessage.textContent = 'Use a correct number order for mobile phones'

setTimeout(() => statusMessage.remove(), 3000);
}
})
})

что касается модального окна с таймером 60 секунд - тоже быдло код (или правильнее сказать, быдло имплементация). Зачем нам просто показывать окно? Нам нужно следить или происходит какая-то активность. То есть, например, пользователь скроллит, набирает текст (имя или телефон) или же, двигает курсором мыши. Зачем нам выводить модалку через 60 секунд при любом случае? Это неудобно. Поэтому, мы следим, и если существует хоть какая-то активность, мы ресетим таймер снова на 60 секунд и выводим его исключительно только, если активность пользователя на сайте отсутствует как таковая.


const showModalByTimer = (selector, time) => {

let id;

const resetTimer = () => {

clearTimeout(id);

id = setTimeout(() => {
document.querySelector(selector).style.display = 'block';
document.body.style.overflow = 'hidden';
}, time);
};

window.addEventListener('load', resetTimer, true);

const events = [
'mousedown',
'mousemove',
'keypress',
'scroll',
'touchstart',
];
events.forEach(e => document.addEventListener(e, resetTimer, true));
};

showModalByTimer('.popup', 60000);

Простите, смотрю 4 урок, 18-ая минута - чепуха, ей Богу. Код абсолютно не оптимизирован. Человек использует гиганское условие. Советую, обратить внимание на Jonas Schmedtmann(а), где рассматривается вариант использования setdata и closest.

Кстати курс Йонаса - бомба. И не только, что касаеться Скрипта. По эдванс CSS - тоже очень неплохо.

нормально