Web-технологии

Что Я в итоге решил делать? Мне нравится сайт банка Тинькофф. Он очень большой, там много разных элементов, готовой логики и дизайна. Поэтому Я решил повторить его функционал и верстку, используя эти 3 технологии.

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

Например, мне не совсем понятно, как в MUI управлять общими стилями для всех элементов Button. Потому что там текст внутри кнопки, hover и прочие эффекты зависят от цвета самой кнопки. Я могу переопределить стили одной кнопки, а хотелось бы настроить это для всех.

И таких вещей много. Но Я уверен, что разберусь.

Вообще, проведя почти неделю в MUI могу сказать, что фреймворк не такой уж и сложный, хотя сначала он мне показался дико запутанным. Куда сложнее с TS в React. Пока что большая часть выполненной работы - обычная верстка без сложной логики.

Теперь о проделанной работе

У Тинькофф мобильная и десктопная версия меняются при перезагрузке страницы. В своем проекте Я решил сделать иначе, у меня будет полностью адаптивный сайт. Это добавляет трудностей при верстке. Так же Я не буду гнаться за pixel-perfect и возможно что-то буду делать по своему (отступы, некоторые цвета, где-то контент). В общем, мой проект - мои правила :D

Начал верстку Я с мобильной версии. Пока что Я сделал header, вывел 3 строки меню и первый блок с рекламой, в котором есть изображение, заголовок, небольшое описание и кнопка. Контент в блоке меняется при перезагрузке.

На сайте Тинькофф header на декстопе в 2 строки, при уменьшении разрешения часть его прячется и вызывается через доп. кнопку меню ( в виде трех точек).

У меня весь header в виде мобильной версии в 3 строки и бургер не прячется. Это все Я буду доделывать уже на следующей неделе.

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

Есть вопросы, на которые Я не знаю ответа. Например, как правильно сделать структуру проекта с компонентами? Стоит ли выносить каждый компонент в отдельный файл или мелкие можно размещать в том же самом файле? С MUI стоит ли выносить куда-то стили для отдельных компонентов или держать их в том же файле? Дробить все по папкам или держать файлы с данными/компонентами/стилями/описаниями типов в одной папке, как сейчас у меня? И т.д.

Надеюсь в процессе Я разберусь с этими вопросами.

Дальнейшие планы на следующую неделю.

Практика. Нет курсов для изучения и Я их не ищу.

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

Буду верстать, углублять свои знания по React, Typescript + Javascript в целом. Особенно интересует как правильно сделать структуру проекта, попробую на следующей неделе поискать информацию. Если кто-то подскажет полезные ресурсы - буду благодарен.

Для тех, кому интересен код - вот мой репозиторий.

Чтобы было удобно показывать Вам результат Я выложил все на хостинг firebase.

Ссылка тут

История

Первые страницы в Интернете были созданы ещё в 1991 году.

Но 24 года назад, лишь в 1996 году Брюстером Кейлом была организована некоммерческая организация Internet Arсhive, собирающая копии веб-сайтов, с 2001 года предоставившая публичный доступ к своей Waybackmachine (накопилось свыше 50 петабайт данных и число перевалило за полтриллиона страниц).

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

Распадаются страны (например, домен .yu — Югославия), упраздняются организации, прекращают работу сайты, следовательно сведения бесследно исчезают.

Информация — это история и культура.

Доп.почитать: Почему у нас осталось так мало раннего Интернета (Хабрахабр)

https://ru.wikipedia.org/wiki/Архив_Интернета

Например, сайт прекратившей работу компании, создавшей один из первых интернет-браузеров:

https://web.archive.org/web/20070917180729/http://www.netscape.com/

«Существует два типа людей: 1) которые ещё не делают резервное копирование и 2) которое уже делают.»

Лучшие практики того,

как можно вручную сохранить ценную информацию [почти] навечно (на примере Пикабу).

Чтобы сохранить АДРЕС_СТРАНИЦЫ, нужно прописать:

https://web.archive.org/save/АДРЕС_СТРАНИЦЫ

Чтобы найти АДРЕС_СТРАНИЦЫ потом:

https://web.archive.org/web/*/АДРЕС_СТРАНИЦЫ

Подробнее:

1) Web-страницы публично открытых сайтов (когда waybackmachine срабатывает).

Стандартно. «Скармливать» ему лучше чистую ссылку (например, https://pikabu.ru/story/_7676787, без заголовка в URL). Чтобы потом проще было найти в архиве, если статья исчезнет.

2) Текстовая информация.

Сохранить текст, большой текст можно в pastebin.com (должно хранить вечно, но кто знает).

А потом дополнительно для спокойствия сохраняем в Waybackmachine.

Обе ссылки можно дать, например, в комментарии.

3.1) Файлы по ссылкам.

Стандартно. Упомянутый Архив Интернета сохраняет файлы, если дать на них прямую ссылку.

В комментариях можно дать ссылку на резервную копию файла.

3.2) Файлы по ссылкам, когда waybackmachine не сработал, ИЛИ же закрытые файлы.

Во-первых, применимо, когда сохранение не проходит из-за настроек сервера.

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

Тогда файл стоит «перезалить», сохранить и дать на него ссылку.

Последовательность действий моя:

- загружаем файл через https://leopard.hosting.pecon.us/ (даёт прямые ссылки; утверждает, что хранит файл вечно; до 100 мегабайтов);

- дополнительно сохраняем полученную ссылку в Waybackmachine;

- в комментариях к странице даём обе ссылки;

- опционно: сохраняем в waybackmachine ещё и статью с комментариями (где будут эти ссылки).

Критерии хостинга: без регистрации, получается прямая ссылка (которая сохранится в Waybackmachine), а бонусом идёт вечное хранение (как утверждается). Но если и не вечное, то зеркало будет в Архиве Интернета.

Если у вас есть подпадающие под эти критерии хостинги — кидайте в комментарии.

4.1) Web-страницы публично открытых сайтов, когда waybackmachine не сработал, ИЛИ же закрытые страницы.

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

Во-вторых, применимо, когда есть информация, которая доступна после авторизации, а давать логин-пароль не рационально.

С первым примером всё ясно.

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

В своё время для этого использовался созданный в 2009 году сайт peeep.us, который бонусом был ещё и удобным сокращателем ссылок. Но он увы канул в Лету... Ничто не вечно.

Доступный аналог (к сожалению, в отличие от исчезнувшего сервиса ссылки не сокращает и хранит информацию у себя не вечно, хотя с первостепенной задачей справляется):

https://akkela.net/copyhtml/

Как работать:

- зайти на сайт, скопировать букмарклет себе в браузер (или быть готовым запустить скрипт, например, через консоль);

- зайти на нужную страницу;

- запустить букмарклет, чтобы осуществить копирование страницы. Учтите, она пропадёт в скором времени!

- дополнительно сохранить её с помощью в waybackmachine навечно;

- опционно: сохраняем в waybackmachine ещё и статью с комментариями (где будут эти ссылки).

4.2) Страницы закрытых сайтов (исправленные).

Как и в peeep.us, разумеется, если вам дали страницу, полностью доверять содержимому на ней нельзя: перед загрузкой страницы её можно отредактировать и отправить на сервер отредактированную (подменённую) версию.

Как подменить:

После изменения HTML страницы данный код позволяет отправить страницу, как её видит пользователь:

(function() {
var send = function(url, content, type) {
if (type == null)
type = 'text/html;charset=utf-8';
else
type = type.match(/^[^;]+/)+';charset=utf-8';
var form = document.createElement('form');
form.setAttribute('method', 'post');
form.setAttribute('action', 'http://akkela.net/create.php');
form.setAttribute('enctype', 'multipart/form-data');
form.setAttribute('accept-charset', 'utf-8');
var input = document.createElement('input');
input.setAttribute('type', 'hidden');
input.setAttribute('name', 'r_content');
input.setAttribute('value', content);
form.appendChild(input);
input = input.cloneNode(false);
input.setAttribute('name', 'r_url');
input.setAttribute('value', window.location.protocol + "//" + window.location.hostname);
form.appendChild(input);
input = input.cloneNode(false);
input.setAttribute('name', 'r_type');
input.setAttribute('value', type);
form.appendChild(input);
document.body.appendChild(form);
form.submit();
document.body.removeChild(form);
};
var showLoad = function() {
if (document.getElementById('peeeppeeeppeeep') != null)
return;
var div = document.createElement('div'), img = document.createElement('img');
img.setAttribute('src', 'http://www.peeep.us/assets/load.gif');
div.appendChild(img);
div.setAttribute('style', 'position: fixed; left: 50%; top: 0; margin-left: -24px; padding: 8px; background: rgba(255,255,255,0.9);');
div.id = 'peeeppeeeppeeep';
document.body.appendChild(div);
};
try {
showLoad();
var url = location.href;
var r = new XMLHttpRequest();
r.open('GET', url, true);
//r.overrideMimeType('application/octet-stream');
r.onreadystatechange = function() {
try {
if (r.readyState == 4) {
if ((r.status >= 200 && r.status < 300) || (r.status >= 400 && r.status < 500)) {
//send(url, r.responseText, r.getResponseHeader('Content-type'));
send(url, document.documentElement.outerHTML, r.getResponseHeader('Content-type'));
} else {
throw r.statusText;
}
}
}
catch(e) { alert('Error: '+e+'\nPlease, try again'); }
};
r.send(null);
}
catch(e) { alert('Error: '+e+'\nPlease, try again'); }
})();

Пример результата:

- Хабрахабр: лучшие месяца + доп.абзац (скоро удалится).

- Зеркало, которое не удалится.

Типичные примеры спасения файлов, когда ссылка в посте больше не работает, и иное:

1. Пикабу: Векторные дома в изометри, раздаю бесплатно:) (с сайта, указанного в посте, не грузится, но Архив Интернета скопировал).

2. Голосовое управление офисной оргтехникой (по ссылке в посте не грузится, но файл залит на хостинг, а потом сохранён в Архив Интернета).

3. Сайт peeep.us больше не работает, пропал и их javascript, но код сохранён в 2017 году.

4. Аналогичный файл javascript сайта-аналога, не был сохранён. А был сохранён позавчера мной, и я был первым. Если что с сайтом случится, файл останется.

Так же попробовал реализовать функционал с категориями как в личном кабинете банка Тинькофф. Реализовывал не логику, а больше визуальную часть. Я сделал по своему только часть, в которой ты проваливаешься в категорию и у тебя отображаются операции. У меня они сохранялись в state, а у Тинькофф формируется get-запрос. Повторить подобное в будущем планирую, так как много сложных и интересных элементов: сортировка (дата, суммы, категории), графики, история операций.

Что из сложного было в matherial-ui? Писать стили в JS. А так же понять, какие стили писать в css. Например, анимацию Я писал в CSS, а большую часть стилей задавал внутри JS с помощью хука. Так и не смог понять, как мне анимацию добавить в фреймворк.

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

Что понравилось? Готовые стили, готовые анимации. Подключается быстро, понятная документация. Быстро понял, как сделать сетку, добавить календарь, меню, настроить тему, кнопки, иконки.

Так же на этой неделе меня выбили из колеи 2 вещи: удаление зуба и день рождения друга, который проходил в  Королёве.

На ближайшую неделю планирую досмотреть курс по TS, потом начинать внедрять TS для React и продолжу учить React. Так же на работе делаю подобие квиза (вообще подобное делаю впервые), пока все очень сыро, как закончу - обязательно опишу этот опыт.

Основой всего будет класс Timer. В конструктор он принимает HTMLElement (т.е. заранее найденный блок по классу), а так же там есть переменная total - это кол-во оставшегося времени.
У класса есть методы: init,  calculateTime, getTimeRemaining, createString, render, destroy.

Метод init запускается в конструкторе. Он ничего не возвращает, в нем осуществляются проверки на наличие переданного элемента и наличие нужного data-атрибута. Если проверки не пройдены, то функция завершает работу. Если проверки пройдены, тогда срабатывает счетчик, который будет раз в секунду запускать функцию calculateTime. Тут же идет проверка на кол-во оставшегося времени, если его не осталось, счетчик останавливается, а таймер исчезает со страницы

Метод calculateTime принимает полученное значение deadline из дата-атрибута и передает его в функцию getTimeRemaining. В этом методе мы парсим нашу дату и вычитаем из дедлайна текущий момент времени. Получаем n-кол-во секунд до нашей даты. Далее мы делим это число в разных пропорциях, чтобы найти день/часы/минуты/секунды. Так же обновляем нашу переменную total. На выходе имеем объект, с которым дальше будет удобнее работать

Этот объект мы передаем в функцию createString. Несмотря на то, что у нас тут формируется HTML код, функция возвращает его в виде строки. Так же тут Я с помощью тернарного оператора задаю правильные концовки для слов секунд(а/ы)/минут(а/ы)  и так далее.

Результат выполнения этой функции мы передаем в метод render, который вставляет полученную строку в наш HTML. Ну а как только время истекает, срабатывает метод destroy.

А вот конечный результат

Вот в целом и все, такой микрокейс получился. Я понимаю, что код написан не идеально, не везде прописано, что возвращает функция или методам Я не прописал public|private, но тут все ограничивается одним классом, никакой сложной логики.

Возможно кому-то это будет интересно или даже пригодиться. Код получился небольшим: с полифиллом на IE 11 + комментариями  на 140 строк.
Код легко редактировать под себя,  ссылка на репозиторий тут.

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

А что вы думаете?

3) Если Вы все же решили сменить профессию и уйти в IT (это не обязательно веб), то Я бы не спешил увольняться с работы. Как и в любой профессии тут много рутины, много непонятных и сложных моментов, иногда достаточно тупых (насколько позволяет воображение заказчика), которые ПРИДЕТСЯ делать/решать. И может получиться ситуация, когда вы все бросили, а потом поняли, что вам это не нравится.

4) С чего начинать? Для начала определиться что вы хотите делать. После этого искать материалы в интернете. Не уверен что на первоначальном этапе подойдут книги (мне совсем не зашли), есть специализированные сайты, такие как https://learn.javascript.ru/ или https://metanit.com/. Их на самом деле много для разных языков, они бесплатны. И да да, придется читать, причем чем глубже будете погружаться в язык или в целом в среду, тем больше придется читать скучных документаций, сайтов, да еще и на английском (нет Я его хорошо не знаю, google переводчик неплохо справляется). Так же можно поискать бесплатные курсы в интернете или платные, которые можно купить (если деньги позволяют) или которые давно лежат в свободном доступе (но Я бы не выбирал слишком старые). Сам Я первый курс купил за 1000 рублей, это был курс по React на Udemy. Купил Я его спустя почти 8 месяцев после старта, до покупки информации хватало с лихвой. И ОБЯЗАТЕЛЬНО!!!! закреплять все практикой. @d1kssS,  дал достаточно хороший комментарий на эту тему в предыдущем посте.

Предположим вы решились, начали изучать информацию, практиковаться. Что должно быть в портфолио? Работы, которые покажут вашему будущему работодателю, что вы умеете решать задачи. Идете в веб, хотите верстать сайты? Покажите валидный HTML-код, умение пользоваться библиотеками, кроссбраузерную верстку, анимации. Хотите программировать? Напишите несколько программ/приложений, которые покажут, как вы решали те или иные задачи. Что будут спрашивать? Базу. Понимание основ. Ваши работы. Могут давать задачки. Зависит от должности, на которую вы идете. Работодатель хочет видеть, что вы способны решать поставленные задачи, что вы умеете находить решения.

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

И еще раз: учиться придется много и регулярно. Это область не для ленивых.

Если после всего вышеперечисленного Вы все-таки взялись за дело, изучили базу, создали несколько проектов, возможно даже выполнили какие-то мелкие заказы для друзей или с фриланс биржи, то смело рассылайте резюме. Не нужно бояться отказов, нужно пробовать. Нужно получать обратную связь, тестовые задания и т.д. Отказы – это нормально. Денег с вас за это не берут, вас это никак не обесценивает. Есть у меня знакомый, который учит сам дома уже несколько лет, но резюме до сих пор не отправил и это печально (Саня, если ты это читаешь, то пора действовать!! :))

Когда Я начал изучать верстку и Javascript, то понял, что мне это нравится. Этот выбор был уже осознанный. Вот какие плюсы лично для меня:
1) Это интересно. Задачу можно решить по разному, работа во многом творческая.
2) Люблю изучать что-то новое. Всегда верил, что решает не образование, а самообразование.
3) Очень перспективное направление. И гибкое. Карантин никак не повлиял на мой заработок, Я до сих пор из дома работаю.
4) Уход из продаж и не нужно будет общаться с клиентами. Пункт стоит последним, но не на последнем месте по важности)) От продаж Я просто устал и понял, что это не мое.

На этом пока все, спасибо всем, кто прочитал до конца!