Pikaweb

Хэллоу Ворлд, как говорится. Я учел комментарии своей прошлой публикации, хочу сказать, что мне приятно получать уже на начальном этапе фидбек от людей. В этом видео я сделал не сложный элемент блика при наведении на кнопку. Открыт к любой критике, пишите. Хорошего дня ✌️

Поиграться можно по ссылке: https://jsfiddle.net/wc2oeapv/

Вообще, проведя почти неделю в 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. Так же на работе делаю подобие квиза (вообще подобное делаю впервые), пока все очень сыро, как закончу - обязательно опишу этот опыт.