Frontend + Web-программирование

HTML

Создаем форму:

<form action=”https://private-c4cefc-codepenvf.apiary-mock.com/sendform">
 <input name=”message” placeholder=”Message” required>
 <button>Send</button>
</form>

Я использую сервис apiary чтобы сформировать ответ от сервера в формате JSON:

{
 "success": "true",
 "message": "The form has been sent!"
}

JavaScript

Находим все, что нам нужно и добавляем слушатель:

let form;
let action;

function findElements() {
 form = document.querySelector('form');
 ({ action } = form);
}

function subscribe() {
 form.addEventListener('submit', onSubmit);
}

function init() {
 findElements();
 subscribe();
}

init();

При отправке формы:

function onSubmit(event) {
 event.preventDefault();
 const { currentTarget } = event;
 sendForm(currentTarget)
  .then(response => onSuccess(response, currentTarget))
  .catch(onError);
}

— Отключаем стандартное поведение через preventDefault;

— Отправляем форму;

— При успехе вызываем функцию onSuccess;

— Иначе onError.

Отправляем форму

В основе лежит fetch:

function collectData(currentForm) {
 const data = new FormData(currentForm);
 return data;
}

function setOptions(currentForm) {
 return {
  method: 'post',
  body: collectData(currentForm),
 };
}

function sendForm(currentForm) {
 return fetch(action, setOptions(currentForm));
}

Первый аргумент — url, по которому нужно обратиться;

Второй — объект, который с данными.

При успехе вызываем функцию onSuccess

function showMessage(data) {
 alert(data.message);
}

function onSuccess(response) {
 return response.json().then(showMessage);
}

Fetch возвращает Promise, поэтому сначала получаем json, потом вызываем функцию showMessage.

Дабы упростить пример — я вывожу сообщение в alert.

При ошибке вызываем функцию onError

function onError(data) {
 console.error(data);
}

В onError, вызванный через catch, уже попадет аргумент с информацией об ошибке.

Полный код

let form;
let action;

function findElements() {
 form = document.querySelector('form');
 ({ action } = form);
}

function showMessage(data) {
 alert(data.message);
}

function onSuccess(response) {
 return response.json().then(showMessage);
}

function onError(data) {
 console.error(data);
}

function collectData(currentForm) {
 const data = new FormData(currentForm);
 return data;
}

function setOptions(currentForm) {
 return {
  method: 'post',
  body: collectData(currentForm),
 };
}

function sendForm(currentForm) {
 return fetch(action, setOptions(currentForm));
}

function onSubmit(event) {
 event.preventDefault();
 const { currentTarget } = event;
 sendForm(currentTarget)
  .then(response => onSuccess(response, currentTarget))
  .catch(onError);
}

function subscribe() {
 form.addEventListener('submit', onSubmit);
}

function init() {
 findElements();
 subscribe();
}

init();

В удобочитаем виде — на codepen.

Посты на эти и другие темы публикую в канале: https://t.me/filimonovvadim

В предыдущем примере мы рассмотрели валидацию E-mail:

Каждый раз, когда пользователь изменял содержимое input — скрипт проверял его значение.

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

В этом нам поможет функция Debounce.

Задача:

Есть текстовое поле, куда пользователь должен вводить E-mail.

Спустя 1 секунду после окончания ввода должно появляться сообщение с содержимым input.

Добавляем input в HTML. Здесь все просто:

<input type="text" placeholder="Type something up">

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

Для этого добавляем слушатель:

function onInput(event) {
alert('Ваш текст: ' + event.target.value);
}
document.querySelector('input').addEventListener('input', onInput);

Теперь можно приступить к основной части. Заменяем вызов функции onInput на debouncedOnInput:

function onInput(event) {
alert('Ваш текст: ' + event.target.value);
}
var debouncedOnInput = debounce(onInput);
document.querySelector('input').addEventListener('input', debouncedOnInput);

Добавляем саму функцию:

function debounce(callback) {
var timeout;
return function(argument) {
clearTimeout(timeout);
timeout = setTimeout(callback, 1000, argument);
};
}
function onInput(event) {
alert('You typed: ' + event.target.value);
}
var debouncedOnInput = debounce(onInput);
document.querySelector('input').addEventListener('input', debouncedOnInput);

Разберем что в ней происходит.

Объявляем функцию debounce. В качестве аргумента callback в нее попадает другая функция. В нашем случае — это onInput:

function debounce(callback) {

Создаем счетчик. В нем будет хранится функция, запускающаяся через 1 секунду:

var timeout;

Возвращаем функцию вместе ее аргументом. В нашем случае — это onInput с event:

return function(argument) {

Сбрасываем запуск функции timeout. Это будет происходит если пользователь опять ввел что-нибудь в input:

clearTimeout(timeout);

Помещаем в функцию timeout функцию переданную в качестве аргумента в debounce:

timeout = setTimeout(callback, 1000, argument);

1000 — это количество миллисекунд, спустя которое переданная функция запустится.

argument — это аргумент переданной функции.

Если пользователь прекратил ввод — clearTimeout(timeout) не запустится, а это значит что через секунду сработает timeout и запустится наш onInput.

Тот как это все работает вы можете посмотреть в моем codepen.

Еще один пост на тему зарплат в IT по мотивам https://pikabu.ru/story/o_vyisokikh_zarplatakh_v_it_sfere_67...

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

Итак. Все началось давным-давно когда я еще учился в школе, и после того как я перешел в 10 класс у нас появился новый предмет - информатика. К слову сказать учился я так себе, по точным наукам у меня были тройки, да и в целом к учебе я относился "спустя рукава". Но новый предмет меня зацепил и я не прогуливал эти уроки. В конце 11 класса я одним из экзаменов выбрал конечно же информатику и легко сдал его в отличии от других предметов. А после школы вместо того что бы хотя бы попробовать поступить в ВУЗ я просто подал документы в ПТУ по специальности повар-кондитер.

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

И как раз в тот момент я работал помощником директора одной небольшой организации которая занималась в том числе разработкой сайтов, и мне было очень интересно что же там такое делают ребята. Именно тогда я решил сверстать свой первый сайт, и я сел и стал изучать html и css, как это все работает, затем очень быстро понял что мне еще нужно изучать js. Буквально через пару месяцев моей девушке поступает оффер с релокацией в Спб(она к слову сказать уже тогда работала кодером). Она переезжает, а у меня появляется дикая мотивация к тому что б учится и тоже искать работу в IT сфере. Тут начинается самое интересное: я погрузился в самообучение с головой, хватался за все подряд и через месяц был готов искать работу верстальщиком с парой сайтов в портфолио. Накидав простое резюме я стал откликаться на все вакансии по Спб где требовались верстальщики. В течении месяца я получил около 150 отказов по тем или иным причинам.

Спустя две недели у меня зазвонил телефон. Мне позвонили из компании с одним вопросом - "Молодой человек, собственно, а кек вы хотите быть? Вы у нас откликнулись на 3 разных вакансии: frontend-разработчик, fullstack-разработчик и верстальщик". Пообщавшись с человеком я объяснил что готов развиваться в любом направлении, что очень хочу учиться. Мне было поставлено условие - если сделаю тестовое задание, то меня возьмут junior frontend разработчиком с зарплатой в 30 тысяч. Я был невероятно рад такому шансу, поэтому засел за написание своего задания. Задание было следующее: сделать TODO-лист на angular.js с бекендом на node.js + mongodb. Я знаю что в интернете полно готовых решений, но мне как человеку который только что узнал чем отличается div от span задание казалось невыполнимым, но очень интересным. Я провел 3ое суток не вылезая из-за компьютера, пытаясь собрать хоть что-то более менее приличное. По завершению отправил на проверку и через сутки мне написали что я прошел, и когда я выйду на работу. Радости не было предела :)

А дальше переезд, новый город, новые люди, все новое. Спб хоть и не далеко находится относительно от моего родного города(кстати привет Череповец :)), но я испытывал культурный шок, долго привыкал к новому окружению.

Первые пол года а работал по 10-11 часов в сутки, поглощая информацию взахлеб, и к слову сказать что мне очень сильно повезло с тимлидом. Это был грамотный человек который занимался моим обучением, говорил что читать и показывал как писать, таскал меня по всем профильным конференциям, и давал очень много советов(Михаил Полубояринов, привет и спасибо тебе за все то время и знания что ты вложил в меня).

Через год я понял что пора двигаться дальше, да и зарплату мне уже хотелось побольше, поэтому я снова стал искать работу. И вот теперь, спустя три года, я работаю в крупной компании, с хорошей ЗП и прочими плюшками на должности старшего разработчика.

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

А теперь поговорим про зарплаты. Тут все не очень просто. В вебе, сейчас очень много всего происходит, появляются новые фреймворки, релизятся новые библиотеки и т.д. Поэтому невозможно хорошо знать все, приходится сосредотачиваться на конкретных вещах, и например часто могут иметь место такие ситуации когда человек получает хороший оффер просто потому что пишет на модном фреймворке который сейчас в тренде. В целом зарплатная вилка крепкого мидла сейчас 70 - 150 тысяч рублей. Все зависит от компании, стека технологий, знаний и умения продать свои знания.

Ну и по традиции - чукча не писатель, так что прошу прощения за ошибки, а так же вышеизложенное чисто мое субъективное мнение, мой личный опыт. Если у вас есть вопросы - задавайте! Постараюсь ответить :)

А и еще. Вот хорошая матрица компетенций по фронту, вдруг кому будет полезно: https://docs.google.com/spreadsheets/d/e/2PACX-1vRwSn4qxbYHS...

Добрый день, Meine Damen und Herren!

У меня возник вопрос: Нормально ли бояться службы в армии?

Я студент первого курса, учусь в Computer Science, работаю Junior Front-End Developer-ом. Но до меня только недавно дошло что всё чему я научился - не относится к университету, и всё чего я добился за этот год также никак не относится к университету. Университет наоборот, мешает моему развитию.

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

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

Я боюсь армии, я боюсь госорганов. Я готов довериться даже Дьяволу, только не им.

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

В прошлом году мой брат вернулся из армии, до этого он имел маленький учебный центр, в котором преподавал вместе с двумя адвайзерами. Я его уважал, чтил как кумира, ведь именно он помогал, наставлял меня, и учил, что ждать результата и при этом ничего не делать - истинное проявление идиотизма. А кем он стал после армии? Он перестал учить с таким рвением и креативностью, для него всё стало "чтобы было", а ведь его за это и любили. Он, до этого искавший новые материалы, способы преподавания с таким вожделением, растерял всю хватку за год.

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

Я не хочу тратить год своей жизни на это, хочу выучить ещё несколько языков из тюркской группы, продвинуться в должности, ходить на тренинги и презентации, посетить Кремниевую Долину 42, выучить Back-End.

Меня преодолевает буря эмоции, когда представляю как трачу 1440 минут своей жизни 365 раз подряд. Если вспомнить цитату Вааса из Far Cry 3: "Безумие — это точное повторение одного и того же действия. Раз за разом, в надежде на изменение. Это есть безумие." не это ли есть безумие?!

Можете ли Вы дать какие-либо наставление по этому поводу? Прошу Вас, Пикабу - это единственное к чему я могу обратиться за помощью.

Заранее благодарю!