Javascript + Web

Ничего из ничего не возникает.(с) Липот Сонди

Цель — Senior Frontend Developer.

Язык: JavaScript / TypeScript.

Возраст: 29 лет.

Работа (настоящее время): Junior Frontend Developer в компании "Корус Консалтинг СНГ".

Локация: г. Санкт-Петербург.

Привет! Уже заметил? Да, в Корусе меня уже не найти. Опять мне не сидится на месте и не работается? Выходит, что так. После предыдущего поста, где я высказал недовольство тем, что мне не подняли зарплату после обучения, мне её таки повысили. Немного, но подняли! ( Да, блог читают коллеги из Коруса).  Так, почему я всё равно ушел из дочки Сбербанка?

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

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

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

Поглядим, может устроюсь на удаленку в компанию, но есть мысли уйти во фриланс, сейчас изучаю площадки и особенности работы в этой плоскости и что там вообще востребовано. Есть среди моих подписчиков люди, занимающиеся фрилансом? Может советов дадите? Про особенности веб-разработки расскажите? Я сейчас не про разработку сайтов на wordpress и тильда, а про задачи связанные с моим стеком(React, Redux, TS) или около-моим(Vue, React Native).

Господа и дамы фрилансеры, можете что-то посоветовать? Буду благодарен.

Так как у меня высвободилось время, то в свободное время я начал изучать(или уже изучил):

1. Луис Атенсио - Функциональное программирование(толковая книжка);

2. Филипп Робертс: Что за чертовщина такая event loop? (пересматривал и закреплял, лучший доклад по этой теме);

3. Генераторы в JS;

4. Итераторы в JS;

5. Наконец-то я прочитал всю доку по React.js. Конечно возвращаться еще буду, но зато знаю где и что можно быстро найти;

Есть еще у меня мысли кое-какие, но то больше некие философские концепции и имеют больше отношение в целом к жизни, а не к конкретно программированию(но применять можно и в программировании).

Интересно было бы об этом читать?(могу сделать отдельную "рубрику" и иногда пилить посты на иные темы).

Контакты: Instagram, Github.

Рассмотрим два варианта создания аккордеона на примере списка вопросов и ответов. Сделаем это через:

— JavaScript;

— Тег Details;

JavaScript

Создадим простую разметку:

<button class="question">What is question?</button>
 <div class="answer">
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem dicta blanditiis eum dolorum sit voluptatum impedit eius similique quasi obcaecati! Mollitia reprehenderit magni ex. Eaque modi corrupti placeat labore possimus.
</div>

.answer {
 height: 0;
 overflow: hidden;
}

.is-active + .answer {
 height: auto;
}

Как все будет работать:

— В кнопке с классом question храним сам вопрос;

— В div с классом answer храним ответ, задаем ему нулевую высоту;

— При нажатии на кнопку присваиваем ей класс is-active;

— Раскрываем answer через соседний селектор.

Зададим добавление класса is-active через JavaScript:

// Находим кнопку с вопросом
const question = document.querySelector('.question');

// Добавляем слушатель на клик
question.addEventListener('click', ({ target }) => {
 // Меняем состояние кнопки
 target.classList.toggle('is-active');
});

Все, пара строк кода и аккордеон готов?

С одной стороны да, но данный вариант имеет один недостаток — ответ появляется «резко», без плавного раскрытия.

Связано это с тем, что height: auto; нельзя анимировать через transition, необходимо знать точное значение.

Что с этим делать — обсудим в следующей статье, а пока можете ознакомиться с полной версией кода в codepen.

Тег Details

Этот способ еще проще предыдущего:

<details>
 <summary>How to create accordion without JavaScript?</summary>
 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis id recusandae tempore nam placeat ratione accusantium maiores nobis velit, incidunt, hic, omnis dolorem possimus. Hic porro tenetur fugiat blanditiis iste.
</details>

Все, копипасть и в продакшен?

Есть ньюансы.

Во-первых, details имеет тот же недостаток, что и первый вариант — нельзя анимировать активное состояние аккордеона.

Во-вторых, отсутствует поддержка IE.

Во всех остальных случаях можно смело использовать, а если вам нравится как я копирую документацию, то можете еще раз сходить в codepen :)

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