Горячее
Лучшее
Свежее
Подписки
Сообщества
Блоги
Эксперты
Войти
Забыли пароль?
или продолжите с
Создать аккаунт
Я хочу получать рассылки с лучшими постами за неделю
или
Восстановление пароля
Восстановление пароля
Получить код в Telegram
Войти с Яндекс ID Войти через VK ID
Создавая аккаунт, я соглашаюсь с правилами Пикабу и даю согласие на обработку персональных данных.
ПромокодыРаботаКурсыРекламаИгрыПополнение Steam
Пикабу Игры +1000 бесплатных онлайн игр
Поднимайтесь как можно выше по дереву, собирайте цветы и дарите их близким.
Вас ждут уникальные награды и 22 выгодных промокода!

Пикаджамп

Аркады, Казуальные, На ловкость

Играть

Топ прошлой недели

  • AlexKud AlexKud 38 постов
  • SergeyKorsun SergeyKorsun 12 постов
  • SupportHuaport SupportHuaport 5 постов
Посмотреть весь топ

Лучшие посты недели

Рассылка Пикабу: отправляем самые рейтинговые материалы за 7 дней 🔥

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

Спасибо, что подписались!
Пожалуйста, проверьте почту 😊

Помощь Кодекс Пикабу Команда Пикабу Моб. приложение
Правила соцсети О рекомендациях О компании
Промокоды Биг Гик Промокоды Lamoda Промокоды МВидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня

Javascript + Web

С этим тегом используют

Программирование IT HTML IT юмор Программист Frontend CSS Web-программирование Сайт Веб-разработка Дизайн Все
141 пост сначала свежее
3
frontru
frontru
4 года назад

[Гайд] Как сделать анимацию блика на кнопку используя html и css⁠⁠

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

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

Показать полностью
[моё] Frontend Javascript IT Web Программирование Веб-разработка Верстка HTML Web-программирование CSS Pikaweb Учеба Видео
6
3
frontru
frontru
4 года назад

[Гайд] Как сделать красивую анимированную загрузку используя HTML и CSS⁠⁠

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

[моё] Frontend Javascript IT Web Программирование Веб-разработка Верстка HTML Web-программирование CSS Pikaweb Учеба Видео
7
5
Timon0596
4 года назад
Web-технологии

Тестовое задание frontend⁠⁠

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

само тестовое:

Ориентировочное время выполнения 4-8 часов

Разработать SPA приложение по заданию ниже.

В качестве фреймворка предпочтительнее использовать vue.js. Но также рассматриваем кандидатов с выполненным заданием на react или angular.

В качестве сборщика предпочтительнее использовать Webpack.

--- ПРИЛОЖЕНИЕ и ЯДРО ---

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

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

Контент дочерних блоков должен подгружаться динамически с отложенной загрузкой (отдельным бандлом).

Далее необходимо разработать мини-ядро, которое будет грузиться вместе с родительским приложенияем и иметь api для загрузки дополнительных плагинов. Ядро должно быть доступно из кода каждой страницы родительского приложения.

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

Вторым плагином ядра будет плагин, реализующий SDK для взимодействия с биржей binance (только 2 метода: получить биржевой стакан по определенному символу по REST и подписаться на обновления стакана по WS). (См. раздел Diff. Depth Stream в документации: https://github.com/binance-exchange/binance-official-api-doc...).

--- GUI КОМПОНЕНТЫ ---

В приложении на первой странице расположить компонент, который при помощи плагина ядра "SDK" забирает состояние стакана по определенному символу с биржи binance (можно применить limit=500, чтобы не тянуть стакан на всю глубину), подключается на обновления данных по ws для этого символа (по умолчанию берется по BTCUSDT) и отрисовывает стакан в подобном формате

|----------|----------|----------||----------|----------|----------|

|--Amount--|--Price---|--Total---||--Amount--|--Price---|--Total---|

|----------|----------|----------||----------|----------|----------|

| ... | ... | ... || ... | ... | ... |

Где левые три колонки относятся к ордерам тиба Bid, правые к ордерам типа Ask.

Price и Amount (Quantity) получаются из binance. Total рассчитывается на клиенте как Price * Amount.

Для верстки желательно использовать правила именования по БЭМу.

Цвета и отступы можно использовать на свой вкус.

Верстка должа быть резиновая и адаптивная для мобилки и десктопа. Breakpoint можно выбрать самостоятельно.

В мобильной версии отображать только колонки с Price и Amount.

Таблица должна помещаться по вертикали на странице (без скрола на страница) и должна содержать свой скрол-бар.

Скролл в таблице должен появляться по ховеру на таблицу, сама таблица и ее контент должны оставаться на месте при этом.

Внешний вид скроллбара не принципиален. Таблица скроллится внутри, шапка остаётся на месте.

Полоса скролл бара начинается под шапкой. При скролле значения в таблице не должны наезжать на шапку.

Компонент должен уметь:

* читать сообщение об изменении читаемого символа из плагина "шина данных". При изменении символа компонент должен очищать свое содержимое по предыдущему символу и загрузить данные по новому.

* транслировать в шину данных в виде сообщений все примененные diff-изменения.

На второй странице расположить компонент, сожержащий в себе:

* DropDown перечнем символов. Их можно зашить статически BTCUSDT, BNBBTC и ETHBTC

* Cписочный элемент

DropDown при изменении выбранного элемента отправляет в шину данных событие об изменении активного символа.

Cписочный элемент читает шину данных и отображает информацию о каждом diff-изменении в новой строке.

Дополнительное задание (если успеваете):

* Релизовать SSR для приложения

Всё, что покажется в задании непонятным или неоднозначным к трактовке, делайте на свое усмотрение, соблюдая здоровый рационализм.

Главное - это общий полученный результат. Если возникнет непреодолимое по вашему мнению препятствие, пиши свой(и) вопрос(ы) нам. По завершении нам нужна ссылка выложенного тестового на GitHub Pages и ссылка на код.

Показать полностью
Frontend Тест Javascript Работа Web Web-программирование Junior Техническое задание Pikaweb Текст
32
50
STINGRAY.DEVELOP
STINGRAY.DEVELOP
4 года назад

Во все тяжкие: Веб-разработчик с нуля. 1,5 года. ПРОЕКТ ЗАКРЫТ⁠⁠

Во все тяжкие: Веб-разработчик с нуля. 1,5 года. ПРОЕКТ ЗАКРЫТ IT, Программирование, Карьера, Javascript, Веб-разработка, Frontend, Web, Длиннопост

Цель — Senior Frontend Developer.

Язык: JavaScript / TypeScript.

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

Работа (настоящее время): Middle Frontend Developer в компании "Open Solutions".

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


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

Прошло 1,5 года со дня как я принял решение стать Senior Frontend Developer.


Как вы помните из предыдущего поста, я устроился разработчиком уровня миддл в компанию Open Solutions. Да, я прыгнул чуть выше головы, но надеялся наверстать в процессе работы и поначалу это удавалось. Участвовал на не самом простом проекте и последние дни я перестал справляться с задачами должным образом, а если сказать еще точнее, то вообще с трудом решал задачи. На меня начал жаловаться заказчик, а потом и ПМ.


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


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


Ну уволил, уволили, мне было все равно, у меня была проблема серьезней - болезнь. Не буду долго тянуть с историей болезни. Через пару дней мне стало очень трудно дышать и меня увезла скорая в ковидную больницу в Лен. область. Диагноз: инфекционный бронхиолит. Всю неделю я провалялся там, тесты на ковид по итогу все отрицательные и меня выписали. Потихоньку восстановился, сейчас легкие пришли в норму.


Я охладел к программированию или как принято говорить перегорел. Поэтому, работая последние дни над проектом в Open Solutions у меня отчетливо начали возникать мысли о том, чтобы начать движение в плоскость QA или в плоскость ПМ. И параллельно всегда меня преследовали мысли о создании своего дела. Что уж тут скрывать, да и писал об этом ранее.


Но вернемся в день, когда мне сообщили пренеприятнейшую новость о том, что увольняют. Через 1 час после этого известия, мне пишет мой руководитель(учитель) из компании Корус, который нас обучал программированию и предлагает работу в его проекте. Вот жеж удивительный мир! Программирование не отпускает. Он набирает команду на новый проект и хотел бы меня видеть в ней. Позже я понял, что он из Коруса ушел в другую компанию руководителем отдела IT и набирает себе несколько человек в команду.


Думаю: Тут позиция джуна, прокачаться смогу, не будет давления жесткого и т.д. Да и по зарплате я не особо теряю в принципе. Поэтому я согласился. И после этого меня увезли в больницу.


Через неделю я вышел из больницы, оформился и вышел на работу. В принципе всё отлично, хоть любви к программированию у меня не прибавилось, но было терпимее и атмосфера в коллективе была адекватной. Но был жирный минус, из-за которого я отказался от сотрудничества: На дорогу до офиса у меня в день уходило 4 часа. Два в одну сторону, два обратно. Удаленка не рассматривалась, компания военная и т.д. В общем, никак вообще. А я, познавший все прелести удаленной работы за последний год, не простил бы себе траты 4 часа в день в пустую. Да и другие мои проекты горели, не успевал над ними работать, поэтому я отработал один день и отказался от сотрудничества. Мне понимающе пожали руку и мы разошлись.


Итак. Мы подошли к сегодняшнему дню. На данный момент я рассматриваю варианты удаленной работы в качестве ПМ'a, QA или верстальщика. Да, это походу тот редкий случай, когда переходят не из QA в программирование, а наоборот. Но скорее все-таки ПМ(если найду вариант, так как без опыта почти не рассматривают). Управление, организация и т.д. мне ближе и опыт есть в не IT-шной сфере и с учетом моих дальнейших планов, намного перспективнее в развитии.


Есть что рассказать о программировании, поделиться мыслями. Так как вангую советы: Найти себе проект по плечам и будет порядок, не прыгай выше головы. Нет, не хочу писать код, не хочу разбираться в хитросплетениях кода, не хочу ломать голову, нет желания копаться в десятках библиотек, фрэймворках и всей этой мишуре. Всё. Я, конечно, часто ловил себя на этих мыслях, но не хотел сдаваться, не хотел подвести самого себя. Но сейчас у меня есть куда двигаться и мое поражение я рассматриваю как ступень вверх, а не вниз. Да и навыки я полезные приобрел, много всего узнал и стал образованнее.


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


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


Следующий пост будет через полгода. И этот пост будет посвящен моему нового увлечению и моему первому бизнесу. Думаю к тому времени мне уже будет что показать. Поэтому можете отписываться, мне всё равно, но кто хочет - оставайтесь. Будет еще интереснее и возможно вдохновит кого-нибудь еще на что-то подобное.


Выводы сделаны, решение принято. Всем спасибо за поддержку и критику, спасибо тем, кто читал меня эти стремительно пролетевшие 1,5 года.


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


Желаю успеха тем, кто пришел в программирование и полюбил это дело, также желаю успеха тем, у кого еще все впереди.

Делайте выводы, учитесь на ошибках, будьте здоровы. До связи.

почта: owiii.dev@gmail.com

телега: @artem_owiii

инстаграм

Показать полностью
[моё] IT Программирование Карьера Javascript Веб-разработка Frontend Web Длиннопост
71
tamazyanarsen
4 года назад

Очередной канал программиста⁠⁠

Всем привет!

Ребят, а нужен ли канал, где программист будет рассказывать, как он за два года дорос от junior уровня до senior? И всё это на работах с удаленным форматом. Может, уже есть такие интересные каналы? Начинающим программистам интересно было бы почитать.

[моё] Javascript Web Программирование Разработчики Python Текст
19
26
STINGRAY.DEVELOP
STINGRAY.DEVELOP
4 года назад

Во все тяжкие: Веб-разработчик с нуля. 17 месяцев⁠⁠

Во все тяжкие: Веб-разработчик с нуля. 17 месяцев IT, Программирование, Карьера, Javascript, Веб-разработка, Frontend, Web, Длиннопост

Путь познается в тренировках(принцип из книги земли Миямото Мусаси).


Цель — Senior Frontend Developer.

Язык: JavaScript / TypeScript.

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

Работа (настоящее время): Middle Frontend Developer в компании "Open Solutions".

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


Привет! Как у тебя дела? Сколько всего достойного и полезного сделал за последний месяц?


Вот пролетело уже почти два месяца, как я разрабатываю интерфейсы в компании "Open Solutions". Что могу сказать? Могу сказать, что этот месяц был крайне трудным, я столкнулся и с плохим менеджментом на одном проекте и с крайне сложно замудренной архитектурой другого проекта, где столько запихали абстракций и оберток на обертке, что по началу вообще непонятно, что куда и откуда передается и зачем. Сейчас уже потихоньку начинаю втягиваться.


Что я изучил, либо начал изучать в последний месяц:


1. Курс по Node.JS(20% прошел);

2. Курс по devOps(20% прошел);

3. Книга Властон Феррейра Фило - "Теоретический минимум по Computer Science".(хех, да, да, да);

4. Начал осваивать создание ботов в телеге. Есть идея для себя бота сделать определенного;

5. Время от времени верстаю какие-нибудь формочки, карточки по гайдам с ютуба. Чтобы не забыть верстку и узнать что-то новое.


Да, как вы заметили, я ощутил острую нехватку знания систем по деплою, тестированию и интеграции. А то я пишу код, а что дальше с ним происходит - загадка. Как в черную дыру проваливается. Вот, решил подтянуть этот момент и освоить основы девопс.

Второй момент - это минимальные знания бэкенда. Необходимость возникла в ходе изучения SSR и Next.js.


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


Иногда возникают мысли уйти в менеджмент, да, да, прям серьезно. Стать ПМ'ом. Особенно, когда сталкиваешься с плохим менеджментом, в котором страдают разработчики. Не считаю себя мастером, но более 7 лет посвятил так или иначе работе с клиентами и тех. специалистами, такими как дизайнеры и д.р. поэтому сразу вижу пробелы. Да и навыки ПМ будут полезны в будущем, если я все таки дойду до стадии организации своей команды и буду работать на себя.

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


Всем результативного месяца!


П.С. Желающие начать тренировки по воинскому искусству в г. Санкт-Петербург - пишите. Эти навыки никогда не будут лишними в жизни.


Я на связи:

почта: owiii.dev@gmail.com
телега: @artem_owiii

инста

Показать полностью
[моё] IT Программирование Карьера Javascript Веб-разработка Frontend Web Длиннопост
41
5
deh4567
deh4567
4 года назад

5 первоклассных инструментов для разработчиков React⁠⁠

Библиотека React JavaScript , разработанная Facebook , декларативная компонентная технология для создания веб-интерфейсов, в последние годы завоевала популярность у разработчиков.

Предлагая разработчикам эффективность и гибкость , React - он же React.js - дебютировал для публики в мае 2013 года. С тех пор библиотека с открытым исходным кодом была отмечена более 135 000 раз на GitHub и разветвлена более 25 000 раз.

5 первоклассных инструментов для разработчиков React IT, Web, React, Web-программирование, Javascript, Длиннопост

1) Reactide - это специальная IDE для веб-разработки на React. Используя интегрированный сервер Node.js и настраиваемый симулятор браузера, пользователям Reactide не нужно возиться с настройкой серверов или инструментами сборки. Им также не нужно переключаться между браузером, IDE и сервером. Возможность перезагрузки в реальном времени позволяет разработчикам отслеживать изменения прямо в среде разработки. Другие возможности включают:

- Дерево визуальных компонентов для управления состоянием в приложении.

- Интегрированный терминал для запуска команд в bashUnix и cmdWindows.

- Нестандартная перезагрузка горячего модуля.


2) Redux - это контейнер с предсказуемым состоянием для приложений JavaScript. Он помогает разработчикам писать приложения, которые работают в различных средах, включая веб-клиент, веб-сервер и собственные приложения. Redux работает с React или любой другой библиотекой представлений. Redux имеет размер 2 КБ, включая зависимости, и использует экосистему надстроек. Особенности Redux включают:- Централизация состояния и логики приложения, обеспечивающая такие возможности, как выполнение / повтор и сохранение состояния.

- Отслеживание того, когда, почему, где и как изменилось состояние приложения.

- «Отладка путешествия во времени», которая может отправлять отчеты об ошибках на сервер.


3) Next.js , получивший название « среда React для предприятия», предлагает такие возможности, как рендеринг на стороне сервера, маршрутизация на основе файловой системы и экспорт статических сайтов. Платформа оптимизирована для меньших размеров сборки и более быстрой компиляции. Разработчики могут использовать сборщик модулей Webpack и компилятор Babel JavaScript. Выпущенный в июле 2019 года Next.js 9 предлагает следующие функции:- Динамическая маршрутизация приложений на основе файловой системы.

- Поддержка TypeScript с нулевой конфигурацией.

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


4) Evergreen - это среда разработки пользовательского интерфейса React для создания веб-приложений корпоративного уровня. Evergreen сочетает в себе набор составляемых компонентов React, построенных на основе примитивов React UI, и собственный язык дизайна пользовательского интерфейса. Структура основана на принципе, что будущие требования нельзя предсказать, а только подготовить. Большинство компонентов реализовано на блочном примитиве, который позволяет настраивать. Evergreen способствует развитию систем, предвосхищающих новые требования.


5) Craft.js - это среда React для создания расширяемых редакторов страниц с возможностью перетаскивания. Редакторы страниц предоставляют возможность предложить отличный пользовательский интерфейс, но, по словам разработчиков Craft.js, создание одного из них может быть «ужасным» опытом. Craft.js призван упростить этот процесс.Craft.js модулирует строительные блоки редактора страниц, добавляет систему перетаскивания и обрабатывает отрисовку, перемещение и обновление пользовательских компонентов. Разработчики проектируют редактор так же, как и любое другое интерфейсное приложение в React, и имеют точный контроль над поведением и внешним видом редактора страниц. Предоставляется API для поддержки и управления состоянием редактора.



P.s Если тебе IT тематика, и ты хочешь больше контента на тему IT то можешь подписаться на Telegram канал: t.me/AlphaCodeJS

Показать полностью 1
IT Web React Web-программирование Javascript Длиннопост
3
Партнёрский материал Реклама
specials
specials

Сколько нужно времени, чтобы уложить теплый пол?⁠⁠

Точно не скажем, но в нашем проекте с этим можно справиться буквально за минуту одной левой!

Попробовать

Ремонт Теплый пол Текст
407
ZolVas
4 года назад
Web-технологии

Как просматривать закрывшиеся сайты / удалённые файлы и предотвратить их бесследное исчезновение⁠⁠

КРАТКОЕ СОДЕРЖАНИЕ (кто не хочет читать):

- web-страницы в Интернете исчезают бесследно;

- чтобы исчезали не бесследно, web-страницы и файлы можно сохранять в Internet Archive по ссылке https://web.archive.org/save/АДРЕС_СТРАНИЦЫ;

- какие-то web-страницы не сохраняются, поэтому сначала сохраните в https://akkela.net/copyhtml/, а потом полученный URL по ссылке https://web.archive.org/save/АДРЕС_СТРАНИЦЫ;

- какие-то файлы не сохраняются, поэтому сначала сохраните в https://leopard.hosting.pecon.us/, а потом полученный URL по ссылке https://web.archive.org/save/АДРЕС_СТРАНИЦЫ;

- ещё большие тексты можно сохранять сначала в pastebin.com, а потом полученный URL по ссылке https://web.archive.org/save/АДРЕС_СТРАНИЦЫ;

- бонусом в статье рассказывается о способе сделать копию закрытых страниц и замену peeep.us;

- если не нравятся предложенные сайты, ищите альтернативы сами. :)


Подробнее (много текста):

История

Первые страницы в Интернете были созданы ещё в 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/

Как просматривать закрывшиеся сайты / удалённые файлы и предотвратить их бесследное исчезновение Резервное копирование, Javascript, Internet Archive, Wayback Machine, Web, Pikaweb, Длиннопост

«Существует два типа людей: 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 сайта-аналога, не был сохранён. А был сохранён позавчера мной, и я был первым. Если что с сайтом случится, файл останется.

Показать полностью 1
[моё] Резервное копирование Javascript Internet Archive Wayback Machine Web Pikaweb Длиннопост
23
Посты не найдены
О нас
О Пикабу Контакты Реклама Сообщить об ошибке Сообщить о нарушении законодательства Отзывы и предложения Новости Пикабу Мобильное приложение RSS
Информация
Помощь Кодекс Пикабу Команда Пикабу Конфиденциальность Правила соцсети О рекомендациях О компании
Наши проекты
Блоги Работа Промокоды Игры Курсы
Партнёры
Промокоды Биг Гик Промокоды Lamoda Промокоды Мвидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня
На информационном ресурсе Pikabu.ru применяются рекомендательные технологии