Задумывались ли вы когда-нибудь о том, как жилось веб-разработчикам 20+ лет назад, когда всемирная паутина была явлением совершенно новым, а чтобы войти в неё, приходилось некоторое время слушать специфические звуковые сигналы, JavaScript и CSS воспринимались скорее как диковинка, а не как привычные средства разработки веб-сайтов, а самым популярным браузером был Internet Explorer? Что ж, вероятнее всего, нет... Но, если у вас найдется несколько свободных минут и вы захотите разобраться в очередной бесполезной штуке — эта статья вас не разочарует!

Немного предыстории

В начале 2022 года я поддался приступу ностальгии и решил поиграть в одну из любимых игр детства (The Prince and The Coward — польская point and click игра, а, я как раз родом из Польши). У меня был диск с оригинальной игрой, но не было машины, на которой можно было бы её запустить. Мне показалось, что интереснее было бы поиграть на настоящем олдскульном Windows PC, поэтому я отправился шерстить аукционы и барахолки, чтобы купить подходящее железо (а заодно и программное обеспечение в виде Windows 98) и собрать себе старый-новый компьютер... Впрочем, как я его собирал и с какими проблемами столкнулся — это уже другая история.

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

1999

Мне 10 лет, и у меня за плечами уже как минимум 3 года общения с операционными системами Microsoft Windows. Мой путь в веб-разработку начался в начале 2000-х, и для своих первых «проектов» я использовал Macromedia Dreamweaver, табличную верстку и сниппеты JS, скопированные из Интернета — чтобы получить какой-нибудь модный эффект вроде анимации падающего снега. И никакого CSS!

В 1999 году интернет сам по себе был для меня загадкой. Возможно, я слышал о нём и знал, что это такое, но впервые я столкнулся с ним уже в XXI веке.

Что же происходило тогда в мире? Европейский союз ввел новую валюту — евро. Билл Клинтон до сих пор был президентом США. Всемирная метеорологическая организация объявила, что 90-е годы были самым жарким (если говорить о средней температуре) десятилетием за всю историю наблюдений. На канале Nickelodeon дебютировал Губка Боб Квадратные Штаны. Эминем выпустил альбом The Slim Shady LP. Состоялись мировые премьеры таких фильмов, как «Матрица» и «Звёздные войны: Эпизод 1 — Скрытая угроза» (тогда мне очень понравился этот фильм, а недавно я пересмотрел его и, черт возьми, он до сих пор хорош!).

Все только и говорили о «баге миллениума», ведь 2000 год должен был повлечь за собой глобальный компьютерный апокалипсис из-за проблем с форматированием даты. Так что, если вы не успели сделать свой персональный сайт раньше, 1999  — это ваш последний шанс.

Проект

Что же мы будем делать? Простой персональный сайт с тремя вкладками — home (поздороваемся с посетителями), about (краткая биография) и contact (немного контактной информации). Макет не должен быть чересчур сложным — хедер (с заголовком и навигацией по вкладкам) вверху, футер внизу и область содержимого вкладок между ними.

Хотелось бы использовать как можно больше CSS, а переключение между вкладками реализовать при помощи JavaScript. Никаких подстраниц не будет — только один индексный HTML-файл, один JS-файл, один CSS-файл и несколько (две штуки) изображений. Вот структура моего проекта:

project-root/
├── assets/
│   ├── scripts.js
│   ├── styles.css
|   ├── bg.gif (used as background of the page)
|   └── mk.jpg (my face for about section)
|
└── index.html

Страница должна нормально работать и красиво выглядеть во всех (в смысле, в обоих) основных браузерах, доступных на тот момент, — MS Internet Explorer 5 и Netscape Navigator 4.51.

Инструментарий

Я мог бы пойти классическим путем и взять MS Notepad для написания кода для своего сайта. Но давай поступим чуть более профессионально и обзаведёмся настоящим кодовым редактором. Сначала я подумал о Notepad++, но раз уж он вышел в 2003 году, то в моем воображаемом 1999-ом его не существует. На ум мне пришел польский редактор под названием Pajączek (Spidey), существовавший с 1996 года, но, по-моему, он выпускался только на польском языке и был не бесплатным. Спустя несколько минут поиска в Google и Wikipedia я нашёл редактор Arachnophilia — выпущен в 1996 году, бесплатный, на английском языке, а в названии есть намек на пауков. Сгодится.

Pajączek 2000 v4.8.1 by Cream Software
Pajączek 2000 v4.8.1 by Cream Software

Моя Windows 98 шла с предустановленным Internet Explorer (v5.0), но мне нужно было раздобыть где-то другие приложения — Netscape Navigator и Arachnophilia. Естественно, оба должны были иметь версию, представленную 23 года назад. Искать старое программное обеспечение нелегко, но я сразу же отправился на сайт oldversion.com. К сожалению, на тот момент сайт перестал работать, я даже подумал, что он исчез навсегда. Однако сейчас, когда я пишу эти строки, он, похоже, снова онлайн.

Как бы то ни было, мне пришлось искать ПО в другом месте. Это отняло у меня немало времени, потому что по фразе типа «netscape 4.5 download», набранной в google, ничего хорошего в наши дни не найдешь. Пришлось как следует поковыряться. В конце концов, на archive.org нашлась страница, давшая то, что мне было нужно, — образ диска apcmag.cd от мая 1999 года, который включал в себя оба приложения: Netscape Navigator v4.51 и Arachnophilia v3.9.

Список программ на apcmag.cd, май 1999
Список программ на apcmag.cd, май 1999

Мой изначальный амбициозный план предполагал использование локального сервера и запуск сайта на localhost (я даже нашел старую статью об установке Apache и PHP на Windows 98). Однако для проекта такого масштаба это казалось слегка чересчур, так что в итоге я отказался от этой идеи. Возможно, когда-нибудь я примусь за более продвинутые ретро-веб-штуки, требующие наличия бэкэнд-логики, но пока что давайте сосредоточимся только на фронтенде.

Arachnophilia

Коротко обсудим выбранный мною редактор кода. Может быть, тогда он и казался кому-то неплохим, но теперь он выглядит весьма убого. Но тем не менее он превосходит по возможностям обычный MS Notepad — в нём есть базовая подсветка синтаксиса HTML и функция предварительного просмотра (нажимаешь на кнопку, и Arachnophilia сохраняет текущий HTML-код во временный файл и открывает его в IE для предварительного просмотра; в инструкции сказано, что после каждого сохранения страница перезагружается, но, к сожалению, у меня эта функция не сработала).

Программа не поддерживает JS- и CSS-файлы, но их можно создать в виде txt-файлов с расширением .js или .css. А затем просто писать туда код.

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

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

В первую очередь логика

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

Сначала я остановился на Internet Explorer. В нём нет ни инструментов разработчика, ни консоли JS — если что-то выдает ошибку, IE показывает значок предупреждения в нижней панели, дабл-кликом по нему мы получаем более подробную информацию — сообщение об ошибке и место, где она произошла.

Не то, к чему я привык, но все же вполне пригодно. Когда у меня возникала какая-то проблема, я обычно находил решение в гугле (результаты поиска вели меня к старым темам на заброшенных форумах) или использовал сайт caniuse.com, чтобы выяснить, какие методы мне доступны (там приведены данные о IE v6 и выше, но по моему опыту, если что-то было отмечено «зеленым» для 6-8, то оно работало и на IE v5).

Вот несколько особенностей, о которых я узнал во время PoC-разработки JavaScript для Internet Explorer 5:

  • getElementsByClassName не поддерживается, но getElementsByNameworks при этом отлично работает (поэтому я использовал его для выбора всех навигационных ссылок)...

  • ...но не с DIV'ами (поэтому я не мог использовать его для выбора содержимого вкладок),

  • addEventListener не существует, но в IE есть собственный метод для этого — attachEvent — он принимает как минимум два аргумента — eventName (но с on в начале, как пример: onclick вместо click) и callback (который не получает объект события в качестве аргумента),

  • anchorElement.getAttribute('href') возвращает весь URL, а не только значение, добавленное в атрибут href (поэтому если атрибуту присвоено значение #foobar, то локально получится что-то вроде C:\...#foobar).

 Это мой HTML для проверки правильности реализации вкладок:

<A href="#tab0" tab="tab0" name="link">Link 1</a>
<A href="#tab1" tab="tab1" name="link">Link 2</a>
<A href="#tab2" tab="tab2" name="link">Link 3</a>
<DIV id="tab0">Content 1</div>
<DIV id="tab1" style="display: none;">Content 2</div>
<DIV id="tab2" style="display: none;">Content 3</div>

Я сохранил атрибуты href, чтобы сделать код более семантичным, но мне понадобился пользовательский атрибут tab, чтобы проще получать идентификатор вкладки с помощью JS.

А вот мой JavaScript-код для управления переключением между вкладками:

var tabLinks = document.getElementsByName('link');
var currentOpenTabElement = document.getElementById('tab0');

for (var i = 0; i < tabLinks.length; i++) {
tabLinks[i].attachEvent('onclick', createOnClickHandler(i))
}

function createOnClickHandler(tabLinkIndex) {
var tabLink = tabLinks[tabLinkIndex];
var tabId = tabLink.getAttribute('tab');

return function() {
openTab(tabId);
}
}

function openTab(tabId) {
var tab = document.getElementById(tabId);
currentOpenTabElement.style.display = 'none';
tab.style.display = ''
currentOpenTabElement = tab;
}

И должен признать — я удивлен. Код выглядит довольно неплохо и делает то, что я хотел (переключается между вкладками). Это 1999 год, это Internet Explorer, и все работает. Я действительно удивлён.

Netscape Navigator — первый удар

Если мой код работает в Internet Explorer, то что может пойти не так в браузере Netscape? — спросил я себя. В 90-е годы это вообще был самый популярный браузер, и несмотря на то, что в итоге он проиграл IE, я был уверен, что мне не о чем беспокоиться. Поэтому я открыл свою страницу в Netscape Navigator и...

...управление вкладками не работает.

Сначала я подумал, что attachEvent — это фишка IE, поэтому в Netscape он работать не будет. Но как убедиться в этом? Где Netscape выводит сообщения об JS-ошибках? Есть ли какая-нибудь JS-консоль? Нет. Есть ли какая-то информация в нижней панели, как в IE? Нет. Есть ли хоть какой-то признак того, что при выполнении JS-кода что-то пошло не так? Ну... код не работает, и это своего рода обратная связь, но это все, что мне доступно.

Так как же отладить JavaScript в Netscape Navigator 4.51? Что ж, придется самостоятельно реализовать обработку ошибок — добавить обработчик window.onerror, который будет вызывать метод alert с сообщением об ошибке (это не я придумал, нашёл вот здесь).

Окей, getElementsByName тогда еще не существовало в мире Netscape. А как насчет getElementsByClassName? Нет. Может быть, хотя бы getElementById? Нет. Неужели в Netscape Navigator вообще ничего нет?  

На сайте caniuse.com нет никакой информации о поддержке тех или иных фич, поэтому приходится ограничиваться теми крупицами, что еще остались в Интернете. И, по счастью, нашелся один полезный материал, Client-Side JavaScript reference (версия 1.3) компании Netscape Communications Corporation, изданный в 1999 году. Это дало мне некоторое представление о том, что умеет браузер и, о боже, версия JavaScript от Netscape оказалась будто с другой планеты. Здесь есть такие коллекции, как document.ids или document.classes, но сделать с ними можно не так уж много — как правило, только задать некоторые базовые стили, но только один раз, когда браузер загружает страницу.

Моя идея заключалась в том, чтобы использовать атрибут onClick (так как это кроссбраузерное решение) для прикрепления обработчиков кликов, отвечающих за установку свойства display style для элементов вкладки. Но ничего не выходило! Пришлось снова обратиться к дядюшке Google и попытать счастья. Я нашел несколько старых статей, но большинство из них оказались бесполезны. Наконец, мне попалась вот эта статья, и именно она спасла ситуацию. Оказывается, в Netscape есть собственный HTML-тег layer, который предназначен для позиционирования на странице и анимации элементов с помощью скриптов.

Единственная проблема с тегом <layer> состоит в том, что он ведет себя как элемент с абсолютным позиционированием (относительно родительского слоя или окна). К счастью, существует также инлайн-тег <ilayer>. Это уже более практичный вариант, но все равно остается одна небольшая проблема — атрибут visibility для layer работает как свойство CSS visibility, то есть скрыть элемент можно, но он все равно будет занимать место на экране. В результате первая вкладка будет отображаться там, где нужно, а остальные — гораздо ниже, и на практике это будет выглядеть скверно. Чтобы это исправить, нужно задать свойству top отрицательное значение. Ф-фух...

Итак, как же выглядит кроссбраузерная версия моего сайта? Во-первых, в <head> документа пришлось добавить небольшой скрипт, чтобы определить, является ли браузер Netscape:

<SCRIPT>
  var probablyNetscape = !!document.layers && !!document.classes && !!document.ids;
</SCRIPT>

Почему я не использовал свойство navigator для проверки браузера? Скажем так, это не совсем надежный метод. Проверка наличия в документе элементов типа layer, являющихся Netscape-специфичными, гарантирует верное срабатывание. 

Как бы то ни было — информацию о браузере я буду использовать и в файле scripts.js, и непосредственно в HTML. Кстати, о HTML, вот он:

<A href="#tab0" onClick="tabLinkClickHandler('tab0')">Link 1</A>
<A href="#tab1" onClick="tabLinkClickHandler('tab1')">Link 2</A>
<A href="#tab2" onClick="tabLinkClickHandler('tab2')">Link 3</A>
<DIV>
 <ILAYER name="tab0" style="display: block;">
   <DIV id="tab0">Content 1</DIV>
 </ILAYER>
 <ILAYER name="tab1" visibility="hide" style="display: block;">
   <DIV id="tab1">Content 2</DIV>
 </ILAYER>
 <SCRIPT>if (!probablyNetscape) {document.getElementById('tab1').style.display = 'none';}</SCRIPT>
 <ILAYER name="tab2" visibility="hide" style="display: block;">
   <DIV id="tab2">Content 3</DIV>
 </ILAYER>
 <SCRIPT>if (!probablyNetscape) {document.getElementById('tab2').style.display = 'none';}</SCRIPT>
</DIV>

Как видите, я использовал инлайн-скрипт, чтобы добавить вкладкам, которые должны быть изначально скрыты, если браузер не Netscape, стиль display: none. Поступил я так потому, что возможность изменять свойство display с помощью JS в Netscape Navigator работает не так, как хотелось бы.

Свойства <ILAYER>, такие как visibility и top, будут понятны только Netscape. Другие браузеры будут их игнорировать (ну, IE 5 их игнорирует, так что я надеюсь, что и другие будущие браузеры будут делать то же самое). 

Ссылки для навигации по вкладкам имеют атрибуты onClick с назначенными обработчиками кликов, которые определены в моем файле scripts.js:

var activeTab = 'tab0';

if (probablyNetscape) {
 window.onerror = function(message, file, line) {
  alert('JavaScript error!\nFile: ' + file + '\nLine: ' + line + '\nMessage: ' + message);
 }
  
 // Set position for layers in Netscape Navigator
 document.layers.tab1.top = -38;
 document.layers.tab2.top = -76;
}

function tabLinkClickHandler(tab) {
 if (tab === activeTab) return;

 if (probablyNetscape) {
   document.layers[activeTab].visibility = 'hide'
   document.layers[tab].visibility = 'show'
 } else {
   document.getElementById(activeTab).style.display = 'none';
   document.getElementById(tab).style.display = 'block';
 }

 activeTab = tab;
}

Я знаю — если кто-то нажмет на ссылку до загрузки файла скрипта, это вызовет ошибку, поэтому на этом этапе можно было бы поместить весь код скрипта в index.html, но... Я решил пока что оставить всё как есть.

Теперь у меня есть рабочий кроссбраузерный proof of concept. Этот опыт оказался — благодаря Netscape Navigator — слегка разочаровывающим. Но теперь пришло время расслабиться — займемся версткой и css! 

Вы только посмотрите...

Я усвоил урок — не имеет смысла разрабатывать сайт специально для IE5, а потом пытаться адаптировать его для Netscape Navigator, так как в итоге получится совершенно другой код. С самого начала нужно искать решения, которые будут работать в обоих браузерах. 

Пришло время рассказать вам шокирующую историю о безумствах, связанных со стилизацией HTML-страниц в 1999 году.

Центрирование элементов с margin left и right, установленным на auto, не работает. Есть два возможных решения — тег <center> или <div> с атрибутом align="center". Этим элементом следует обернуть контейнер с содержимым страницы (с шириной, установленной на 480px). В обоих случаях IE центрирует и содержимое потомков, поэтому для контейнера страницы стоит установить атрибут align="left", и это исправит проблему. Однако Netscape сдвигает весь контейнер обратно влево, поэтому, чтобы вернуть его в правильное положение, нам нужен третий контейнер с атрибутом align, установленным на left. Вот код, чтобы вам было проще понять, о чем речь:

<DIV align="center">
 <!-- this one has width set to 480px in styles.css -->
   <DIV class="page-container">
     <DIV align="left">...</DIV>
   </DIV>
</DIV>

CSS flexbox существовал далеко не всегда. Если вы занимаетесь веб-разработкой более ~10 лет, то, скорее всего, помните, что для создания грид-макета многие разработчики применяли свойство float (даже в Bootstrap так было).  

Так вот, я использовал float для выравнивания элементов управления вкладками (ссылок). Я хотел было применить тут теги списков — ul и li, но, похоже, Netscape не любит сочетание float и list... Более того, использование float непосредственно на теге a удаляет все его стили (речь идет именно о Netscape, на IE все в порядке). В итоге у меня получился список на основе DIV'ов.

Цвет фона DIV, заданный с помощью CSS, — это слишком круто для Netscape Navigator v4.51. Если свойство CSS border не установлено в none, то только текст внутри DIV будет иметь желаемый цвет фона (как будто вы его выделили).

IE vs Netscape Navigator
IE vs Netscape Navigator
IE vs Netscape Navigator
IE vs Netscape Navigator

Настройка background-image принесла мне еще одну головную боль. IE требует, чтобы путь к изображению (bg.gif) был относительным к файлу styles.css (так что url('bg.gif') — это нормально), но Netscape ожидает, что он будет относительным к файлу index.html (url('assets/bg.gif')). Самое простое решение в данном случае — задать фон непосредственно в атрибуте body style (с указанием пути относительно index.html, разумеется).

Когда я работал над навигацией, мне захотелось изменить стили ссылок при открытии связанной с ними вкладки. Из-за ограничений Netscape мне пришлось поиграть с тегом (i)layer, и я докатился до того, что мой HTML стал вызывать критическую ошибку Netscape. 

...
<DIV class="tab-control">
  <ILAYER name="start-link" class="tab-control-layer">
    <DIV class="tab-control-inner">
      <A href="#start" id="start-link">Start</A>
    </DIV>
  </ILAYER>
</DIV>
...

Следующая проблема — отступы (margins). Уточню: margins в Netscape Navigator v4.51. Можно везде задать margin: 0, но Netscape и тут отличился! Он же знает, как лучше! Отступы должны быть везде. Конечно, есть решение — использовать отрицательные значения. Однако это повлияет на работу в других браузерах, а другие браузеры понимают, что ZERO — это ZERO. ЗНАЧИТ, НИКАКИХ ОТСТУПОВ НЕ ДОЛЖНО БЫТЬ. ЧТО С ТОБОЙ НЕ ТАК, NETSCAPE?

На этом этапе я понял, что никогда не сделаю Netscape-версию своего сайта такой хорошей, как мне хочется. К тому же придется использовать для нее специальные стили. Как их дифференцировать? Первой моей мыслью было добавить дополнительный класс к body с помощью JavaScript (если страница открыта не в Netscape), но оказалось, что Netscape Navigator 4 настолько сломан, что просто игнорирует половину стилей.  

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

Конечно, Internet Explorer 5 тоже не идеален, у него есть некоторые странности, но Netscape Navigator 4 — это просто чистое безумие.

Кстати, об IE — я хотел реализовать простую анимацию фразы (Welcome to 1999!) под заголовком страницы, которая бы непрерывно скользила слева направо. Для этого я использовал setInterval, и оказалось, что передача анонимной функции в качестве коллбэка приводит к падению IE спустя несколько секунд.

// IE5 KILLER
setInterval(function() {...}, 100);

Если сначала определить функцию, а затем передать ее в setInterval, то все становится на свои места.

// THAT'S FINE!
function animateCatchphrase() {...}

setInterval(animateCatchphrase, 100);

Я готов поспорить, что у IE есть какая-то проблема с управлением памятью в случае использования анонимных функций. У Netscape Navigator с этим проблем нет. Хорошая работа Netscape, 10 баллов Гриффиндору.

В заключение...

Если бы я захотел рассказать обо всех проблемах, с которыми я столкнулся при работе над проектом, то пришлось бы писать целую книгу. В любом случае, спустя несколько часов работы моя страница была готова и функционировала как в Internet Explorer 5, так и в Netscape Navigator 4.51. 

Общий размер всех файлов, необходимых для работы страницы, составляет ~42 КБ (html, css, js и два изображения — все без сжатия). Я не смог найти достоверной информации о средней скорости интернет-соединения в 1999 году, поэтому рассчитаем время загрузки для телефонного модема, который в конце 90-х мог развивать скорость 56 кбит/с — с таким устройством (работающим на полной скорости) на получение всех данных уйдет 6 секунд. В 1999 году это было, наверное, приемлемо. 

Я не буду вставлять сюда весь код (это долго и скучно), ссылка на репозиторий Github будет приведена ниже. А теперь взглянем на несколько скриншотов моей страницы, которые я сделал на Windows 98.

Internet Explorer 5

Start
Start
About
About
Contact
Contact

Должен сказать, что я очень горжусь тем, как всё получилось для Internet Explorer. Страница выглядит и работает так, как я хотел.

Netscape Navigator 4.51

Start
Start
About
About
Contact
Contact

Как видно, версия для Netscape Navigator имеет ряд недостатков... Секция с контентом и вкладки кажутся сломанными, и, несмотря на то, что я потратил кучу времени, пытаясь сделать их вид как можно более близким к тому, что получилось в IE, мне это в итоге не удалось... Возможно, если бы я построил все на LAYERах... Нет, это уже слишком!

Назад в будущее

Вернемся в 2023 год и откроем мою страницу в каком-нибудь современном браузере, например в Google Chrome.

Она выглядит... скромно, но в остальном все смотрится и работает хорошо. Есть одна небольшая проблема с размером блока контента (он слишком широкий, это легко определить, если посмотреть на правый-нижний угол серого блока). Обёртка страницы имеет ширину 480px, а блок контента внутри обёртки страницы также имеет ширину 480px, но при этом имеет 10px padding с каждой стороны. В далеком 1999 году это работало нормально (хотя я подозреваю, что это баг как в IE, так и в Netscape). Теперь же блок контента имеет общую ширину 500px (сумма ширины и padding с обеих сторон), что является более ожидаемым поведением. Это можно исправить с помощью следующих трех строк CSS-кода:

* {
 box-sizing: border-box;
}

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

Если вам захочется самостоятельно протестировать эту страницу, она опубликована по адресу 1999.mihau.co, а код можно найти в репозитории Github.

Пара слов напоследок

Этот маленький незамысловатый сайт занял у меня гораздо больше времени, чем я предполагал вначале, и вовсе не потому, что я плохо оцениваю задачи. Возможности Internet Explorer 5, по сравнению с современными браузерами, конечно, гораздо, гораздо более скромны, но  в процессе работы я ощущал контакт со знакомым мне виром веб-разработки. Netscape Navigator 4.51 оказался совершенно другой вселенной. В нём мои возможности по работе с DOM и обработке событий были очень ограничены, а CSS казался полностью сломанным (все описанные баги можно найти здесь).

Но... Во-первых, это был 1999 год. Я считаю, что даже в начале 2000-х табличные макеты и атрибуты для стилизации все еще были более популярны, чем CSS. Да и сам контент был важнее внешнего вида. JavaScript? Он был относительно молод и ему не хватало стандартизации. Netscape внедрил его, Microsoft реализовала собственную версию, с другим API и большими возможностями. К тому же Flash тогда был более популярен.

Во-вторых — 4.51 не являлся полноценным релизом, в отличие от Internet Explorer 5. Я твердо уверен, что Netscape многое улучшили и исправили в Navigator v5 (выпущенном в 2000 году). Впрочем, сам я это не проверял.

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

Спасибо, что уделили мне время. На этом всё.

Комментарии (82)


  1. shiru8bit
    12.07.2023 17:03
    +101

    Задумывались ли вы когда-нибудь о том, как жилось веб-разработчикам 20+ лет назад, когда всемирная паутина была явлением совершенно новым [..] Что ж, вероятнее всего, нет...

    У Хабра довольно взрослая аудитория, и значительная её часть не задумывалась - она это сама и делала 20+ лет назад.


    1. ez2
      12.07.2023 17:03
      +5

      Сайтов с функционалом на js тогда не было, или почти не было. С рекламой - особенно всплывающей, были. Тогда ИЕ был единственным браузером на 99% компьютеров, и на нём можно было с помощью утилит добавить в панель кнопки отключения картинок и js. Без js всё почти всегда работало. Кроме рекламы.
      10 лет спустя был популярен Noscript на Firefox.
      CSS шаблоны в 1999-м уже были, и сайт, использующий CSS, выглядел вполне современно, примерно как Хабр сейчас.
      Не винтаж, новодел.


      1. unwrecker
        12.07.2023 17:03
        -1

        Ха, уже в 97 году я админил сайтик с Ajax. Да, это было возможно, но только для полей типа text.


        1. PuerteMuerte
          12.07.2023 17:03
          +1

          XMLHttpRequest появился в IE5, до этого можно было, конечно, что-то в поля подгружать, да и даже целые куски страницы менять через ифрейм, но это было бы не "асинхронно"


        1. vasyakolobok77
          12.07.2023 17:03
          +1

          Что-то вы приукрашиваете и привираете. Первый транспорт ActiveX XmlHttp появился в IE5 который поставлялся с Win2k в 2001. До этого времени была разметка фреймами, но доступ к содержимому фреймов через js появился тоже где-то в IE5.


          1. unwrecker
            12.07.2023 17:03

            С чего мне приукрашивать или тем более привирать? Если готовы что-то ставить на кон, то могу попытаться найти код. Насколько помню, подгружался файл с js, который запускался, и менял содержимое полей типа text. То есть каждый раз на стороне сервера перлом отдавался новый js. Никакого activx. Работало в Netscape, насчёт ie - не помню.


    1. andrey_novikov
      12.07.2023 17:03
      +8

      Я свой первый коммерческий сайт сделал в 1997 году. JS тогда вообще не использовали. А вот юникода тогда ещё не было, поэтому было хорошим тоном делать сайт с несколькими кодировками.


      1. bolk
        12.07.2023 17:03

        Я тоже делал в 1997-м, JS я тогда просто не умел, зато на той сайте был звук — записанный мой голос «Glad to meet you in our page» в каком-то диком кодаке )


    1. magiavr
      12.07.2023 17:03
      +1

      Я начал только в 1997 году, но там был чистый HTML, когда получил доступ к 486 с win95. И только в 2000 году начал юзать js и vbscript. Но многие начали раньше меня.


  1. nikhotmsk
    12.07.2023 17:03
    +2

    Наш человек. За картинки отдельное спасибо.

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


    1. AuroraBorealis
      12.07.2023 17:03
      +5

      Ждал ссылку на гипертекстовый векторный фидонет


      1. Areso
        12.07.2023 17:03
        +3

        @Mithgolкак там прогресс? Общество уже созрело.


      1. mrMazai
        12.07.2023 17:03
        +1

        =)
        https://groups.google.com/g/relcom.penpals/search?q=after%3A1996-02-29 before%3A1996-04-30
        Не поверите, сегодня утром зашел в архив relcom.penpals и relcom.fido.flirt, почитал 95-96й год.
        Не совсем FIDO, NNTP вроде, шлюзовалось с FIDO,
        а еще были BBS, я много тусил на BBS Innuendo… Эх...
        /nostalgy


        1. AuroraBorealis
          12.07.2023 17:03

          /me погладил хард с архивом SU.BOOKS в .ha, который унесу с собой в судный день.

          Осталось найти еинк читалку со встроенной солнечной батареей


  1. aik
    12.07.2023 17:03
    +17

    Я до сих пор так странички пишу. Правда js не использую.
    Верстка таблицами и всё такое. Ну или беру wordpress.


    1. Tolomuco
      12.07.2023 17:03

      Ну таблицами то зачем? Или вы и css не используете?


      1. aik
        12.07.2023 17:03
        +6

        И css не использую.


  1. Dmitry_Dor
    12.07.2023 17:03
    +43

    Задумывались ли вы когда-нибудь о том, как жилось веб-разработчикам 20+ лет назад
    Не только задумывались, но и жили.
    Кстати, сейчас посмотрел — мой первый «фрилансерский» сайт до сих пор жив (как раз 1999-й год):₽$ Уже и фирмы такой нет, и автомобиль «Ока» давно не производится, а сайт всё работает…
    ₽₽$ Сайт делался в блокноте вот этими ручками ????
    /nostalgie


    1. Ds02006
      12.07.2023 17:03
      +5

      Страничка настолько винтажна, что на ней телефонный код Москвы указан как "095", а не "495" :)


      1. Vsevo10d
        12.07.2023 17:03
        +2

        Хотел написать то же самое. Увидел, чуть не заплакал. И еще увидев про ДЕСЯТКИ автомобилей в любой комплектации. После первого Крыма десятки автомобилей - это недостижимая величина для салонов подержанных авто.


    1. mrMazai
      12.07.2023 17:03
      +4

      Если Хабр поднажмет, то выведем сейчас ее в топ мейла в разделе Рейтинг > Авто/мото > Купля-продажа ;)


      1. Dmitry_Dor
        12.07.2023 17:03
        +9

        выведем сейчас ее в топ мейла
        Моей второй задачей после создания сайта было вывести его в топ поисковиков — для этого и куча счётчиков на странице (наличие которых поднимало рейтинг сайта), и встроенная конференция (поднимала посещаемость, и как следствие рейтинг, и вообще круть крутейшая по тем временам), и правильный подбор ключевых слов для нужного результата поиска (поэтому некоторые фразы выглядят не совсем грамотно с точки зрения русского языка, но зато лучше искались).
        Так что если бы в те времена вам захотелось ”недорого купить автомобиль Ока в Москве”, или приобрести ”автомобиль Ока по отпускной цене завода”, или просто ”купить дешевый автомобиль”, то большинство поисковиков выдали бы этот сайт в верхних строках результатов на первой странице поиска.
        ₽$ Кстати, и сейчас если вам захочется найти автомобиль Ока по отпускной цене завода или купить автомобиль Ока дешевле отпускной цены завода изготовителя то Google выдает http://avtoritetavto.narod.ru почти в самом верху
        ₽₽$ А вот купить там уже не получится, да и завода-изготовителя уже нет, но тут я бессилен :'(.
        /nostalgie


        1. Yuriy_krd
          12.07.2023 17:03

          завода-изготовителя уже нет

          Почему нет ?) Оку выпускали три завода: АвтоВАЗ, КамАЗ, и СеАЗ. Два первых вполне себе здравствуют. Просто выпускают другие машины. Вот СеАЗ, да, не только закрылся, как структура, но и сам завод, физически, разрушен.


          1. Dmitry_Dor
            12.07.2023 17:03
            +1

            Оку выпускали три завода: АвтоВАЗ, КамАЗ, и СеАЗ. Два первых вполне себе здравствуют.
            Неточно выразился, согласен, i'm sorry…
            В данном случае речь о СеАЗ — АВТОритетАВТО был его дилером, ЕМИНП одним из основных (по крайней мере в Москве), поэтому и мог продавать автомобили дешевле отпускной РОЗНИЧНОЙ цены завода (да, там можно было купить напрямую).
            ВАЗ-овская или КамАЗ-овская ОКА тоже иногда продавались, но конечно без такой скидки.


            1. AlexNixon
              12.07.2023 17:03
              +2

              Со странички "тюнинг" я вообще обалдел, особенно с автоматического сцепления.


              1. Dmitry_Dor
                12.07.2023 17:03
                +4

                Со странички «тюнинг» я вообще обалдел, особенно с автоматического сцепления.
                Автоматическое сцепление делали в Серпухове, но не на самом СеАЗ, а где-то «около него» (то ли какой-то кооператив, то ли просто умельцы, уже не помню).
                Управление от ручки переключения КП — кладешь на нее руку, контакты замыкаются, соленоид выжимает сцепление, а когда руку снимаешь соленоид сцепление отпускает.
                При трогании дополнительное управление по оборотам двигателя (получается что-то типа «центробежного сцепления»).

                А вот поворотное сиденье делали в Москве (детали заказывали на заводе, а собирали сами).
                Это была моя разработка, на уровне изобретения — здесь это последнее внизу справа
                image

                /nostalgie

                ₽$ Да и вообще это было мое последнее изобретение, «Впрочем это уже совсем другая история» :'(


                1. AlexNixon
                  12.07.2023 17:03
                  +2

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


                  1. Dmitry_Dor
                    12.07.2023 17:03

                    Ваши предыдущие статьи читались на одном дыхании
                    Спасибо!
                    Вы, оказывается, еще и сайты делали...
                    Очень кушать хотелось :'(
                    Когда едешь на работу с мыслью — заплатить ли сегодня за проезд и остаться без обеда, или проехать зайцем и пообедать в столовой, то не только сайты будешь делать :'(

                    ₽$ Кстати, я не только сайты делал — для фирмы, торгующей итальянской кухонной мебелью АМО (”Амо-амо-амо · моя вторая мама”©) на основе AutoCAD и AutoLISP сделал программу 3D моделирования и визуализации кухонной мебели.
                    Тогда это была круть крутейшая — приходишь в мебельный салон, а там тебе девочка на компьютере «нарисует», как будет выглядеть твоя будущая кухня, а потом напечатает на принтере ее цветную фотографию 3D картинку.
                    /nostalgie
                    ₽₽$ И ту, и другую подработку мне предложили друзья, с которыми я до этого работал на АЗЛК, и которые ушли с него раньше, не дожидаясь его окончательного краха, а я тянул до последнего, надеясь, что это когда-то должно кончиться, и мне все-таки удастся реализовать и внедрить в производство свою CVT (в обнимку с которой я остался на аватарке image)
                    Но увы, Илон Маск из меня не получился :'(


    1. Faxfox
      12.07.2023 17:03
      +2

      Помню в то время появилась технология макромедиа флеш, вот это была круть крутетская!


    1. TrubSofia66
      12.07.2023 17:03
      +1

      В шоке с того, что тогда уже существовали сайты ахаха, я 2001)


      1. uranik
        12.07.2023 17:03
        +5

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


    1. Cubus
      12.07.2023 17:03

      Кайф-то какой!


    1. Shaginov
      12.07.2023 17:03
      +2

      Какой шикарный идущий маг в контактах!!!


  1. Politura
    12.07.2023 17:03
    +16

    В 1999 году все это самое было бы сделано без жабоскрипта вообще, просто отдельные html-ки. И весило бы меньше, и загружалось бы быстрее, тк грузилась бы только нужная страница, а не все сразу.

    То есть былобы 3 странички: index.html, about.html и contact.html. Ну еще и файл со стилями и картинкой.


    1. PereslavlFoto
      12.07.2023 17:03
      +6

      Хорошо бы и сейчас делать сайты аналогичным же способом.


      1. Areso
        12.07.2023 17:03
        +1

        https://english.areso.pro/ - тут почти такое =)


    1. artemisia_borealis
      12.07.2023 17:03
      +4

      Ну, вот, сайт одной современной OC до сих пор так же примерно сделан. Чистые HTML'ки, CSS есть, но JS нет совсем.


      И, кстати всё современное и навороченное совершенно не смотрится под текстовыми браузерами Lynx и Links. A упомянутый сайт работает.


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


  1. andrewilife
    12.07.2023 17:03
    -4

    Го делать сайт как будто на дворе каменный век


  1. PuerteMuerte
    12.07.2023 17:03
    +6

    Ммм, а я в 2000-м делал свой первый сайт на Delphi. WebBroker, PageProducer'ы, ISAPI-расширение для IIS, Interbase как хранилище - вот это всё. Правда, потом уже после приёмки выяснилось, что заказчик собирается его хостить на линуксе... но надо ж было в ТЗ тогда не писать, что "требется работа под Windows" :) Деньги все равно заплатили.


  1. Refridgerator
    12.07.2023 17:03
    +1

    Вот и выросло поколение (с). Ждём следующего откровения — что веб-сайт можно хостить непосредственно у себя в .exe-шнике без всяких апачей и прочего.


    1. Wesha
      12.07.2023 17:03
      +6

      Вот и выросло поколение

      А я... А я... А я телефон-автомат видел юзал!


      1. eugeneyp
        12.07.2023 17:03

        2 коп для звонков по городу, 15 коп для звонков по межгороду. Причем существовало в виде атавизма в пансионате Сочи, когда 15-копеечные монеты СССР, продавали по N рублей РФ, чтобы их кидали в автомат.

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


      1. Serge78rus
        12.07.2023 17:03
        +3

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


        1. PereslavlFoto
          12.07.2023 17:03

          Сейчас можно совершать анонимные звонки с бесплатных деревенских телефонов.


        1. Wesha
          12.07.2023 17:03

          Но ведь нужно было предъявить две копейки!


    1. PuerteMuerte
      12.07.2023 17:03
      +1

      Ждём следующего откровения — что веб-сайт можно хостить непосредственно у себя в .exe-шнике

      Вряд ли это будет откровением для нового поколения, сейчас самохостинг из встроенного сервера, это вполне себе мейнстрим для девелоперских сред. Это наоборот, мы для себя такое открывали, начиная когда-то с IIS и прочих Апачей.


    1. ScorpAL
      12.07.2023 17:03
      +1

      Так chm файлы же. Microsoft Compiled HTML Help.


  1. mrMazai
    12.07.2023 17:03

    Первый сайт у второго провайдера =)
    Last update: 22.01.98
    И да, программы для верски были не нужны https://web.archive.org/web/19990225082022/http://www.aha.ru/~hare/


  1. Wesha
    12.07.2023 17:03

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

    ATM0 — и вот уже ничего не нужно слушать...


    1. mrMazai
      12.07.2023 17:03
      +6

      Это не кошерно. По звуку можно было определить на какой скорости снюхались мопеды =)


  1. artemisia_borealis
    12.07.2023 17:03

    Посмотрим под Рысью.


    Главная страница

    image


    Эбаут

    image


    Всё читается, наглядно.
    Но есть неконсистентность. Претензия будет тоже из 99 года :):


    • на главной странице всё хорошо с навигацией, но она по сути не нужна, т.к. реально там, итак, отображается содержимое всех трёх страниц;
    • а на второй содержание соответствует замыслу, но уже хромает навигация (по самому сайту), фактически можно только кнопкой назад ходить

    Тэг ilayer кажется сильно нестандартным даже для тех времён.


  1. bolk
    12.07.2023 17:03
    +5

    Кстати, об IE — я хотел реализовать простую анимацию фразы (Welcome to 1999!) под заголовком страницы, которая бы непрерывно скользила слева направо.

    Тег MARQUEE.

    Для разграничения кода IE/NC можно использовать conditional comments.


    1. Mapaxa864
      12.07.2023 17:03

      Я нашел лишь упоминание, что оно работало в IE6. Работало ли оно до него — возможно и нет.


      1. bolk
        12.07.2023 17:03
        +1

  1. gruzoveek
    12.07.2023 17:03

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


  1. poulch
    12.07.2023 17:03

    хм… Aditor pro как редактор. И еще была программулька imagecrasher емнип. моя страничка в таком стиле все еще болтается на сервере chat.ru/~poulch. 1998 год. правда куда-то большая часть картинок пропала. Но в браузерах открывается, верстка на месте и навигация работает :)


  1. LinaRSH
    12.07.2023 17:03
    +4

    Какой javascript? На личных сайтах его не использовали. А вкладки реализовывались с помощью ссылок с target="iframe_name". Без js, без лишних килобайтов скрытого dom дерева


    1. iliazeus
      12.07.2023 17:03

      На личных сайтах его не использовали.

      Мне казалось, на личный сайтах как раз в начале-середине 2000х были популярны свистелки и перделки. Яркие фоны, гифки, все такое. И JS для них тоже применялся. Не говорите, что не помните на сайтах "падающие снежинки", которые безбожно тормозили :)

      Я, правда, скорее года с 2005 сайты застал. В 1999, может, и не использовали.


      1. aik
        12.07.2023 17:03
        +2

        Свою первую страничку в студенческие времена я именно со свистелками всякими делал.
        Через пару лет решил, что повзрослел и страничка превратилась в вечный Under Construction. И даже сохранилась на вебархиве.


        Заголовок спойлера

        image


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


      1. diogen4212
        12.07.2023 17:03

        снежинки просто не прогружались и выглядели как пустые картинки(


    1. bolk
      12.07.2023 17:03

      Использовали, чего бы нет. Называлось это DHTML. Вот Junix, 1999-й: https://github.com/bolknote/junix


  1. ghost3ds
    12.07.2023 17:03
    +3

    Спасибо за статью,я аж прослезился;) Хочу обратно в 1999 год ????


    1. artemisia_borealis
      12.07.2023 17:03
      +3

      Это возможно. И даже не обратно. У вас много возможностей :):



  1. astenix
    12.07.2023 17:03
    +3

    Ээээ, делать сайт «как тогда» легко, но «тогда» все эти ваши CSS только начинались, и считались «перспективной технологией, которая, к сожалению, пока что работает вообще не везде и не так, как надо», а пихать js в навигацию по сайту вообще считалось или злобным троллингом, или бесконечной глупостью…


  1. Dolios
    12.07.2023 17:03
    +4

    Задумывались ли вы когда-нибудь о том, как жилось веб-разработчикам 20+ лет назад

    В смысле, задумывались? Я как раз тогда и начал веб-разработкой заниматься :)


  1. lovermann
    12.07.2023 17:03
    +3

    Абсолютно так же руками писал HTML-код своего первого сайта руками. Даже без CSS :) И сейчас бы написал закрытыми глазами, потому что до сих пор помню синтаксис. Более того, я даже табличку рисовал так, что делал строки и столбики толщиной в 1 пиксель. А джаваскрипт мне там не нужен был (только сторонние счетчики типа HotLog были, но это я тупо вставлял, как есть).


  1. Barnaby
    12.07.2023 17:03
    +4

    В 1999 уже был MS FrontPage 2000


    1. Wesha
      12.07.2023 17:03

      ЧОткие посоны ваяют HTML исключительно в "Блокноте"!


  1. Borovkov
    12.07.2023 17:03

    Прикольная статья)


  1. gatoazul
    12.07.2023 17:03
    +1

    Небольшой хоррор для тех, кто помнит то время.


  1. cxell
    12.07.2023 17:03
    +4

    Это выглядит именно как сайт путешественника во времени, который пытается воссоздать технологии будущего инструментами из прошлого.

    В 1999 году всё было проще. Голый HTML в блокноте (потому что любой визуальный редактор генерирует абсолютно кривой код), никаких скриптов (потому что у многих не IE5, а IE4, IE3 или какой-нибудь Netscape. А то и вовсе lynx или links). Картинки грузятся долго, поэтому почти у всех они отключены (я сам до 2006 года с отключенными по умолчанию картинками сайты читал). Вся вёрстка - фреймами (но их уже ругают) или таблицей. Рисуешь страничку, заливаешь её по FTP на сайт, смотришь на счётчик просмотров и радуешься каждому клику.


  1. ALexhha
    12.07.2023 17:03
    +1

    Да что вы понимаете в дизайне - https://www.lingscars.com/

    P.S

    при этом сайт входит (по крайней мере лет 5 назад входил) в alexa top 100


    1. exTvr
      12.07.2023 17:03

      Какая красота :))


    1. Wesha
      12.07.2023 17:03

      https://www.lingscars.com/

      Хватай китайского шпыёна!!!


  1. diakin
    12.07.2023 17:03
    +1

    На IE6 (или 7) делал такую штуку с Alpha [Opacity
    Тогда казалось прикольным )



  1. Wolf4D
    12.07.2023 17:03

    Помню-помню, Frontpage, дизайн на div-ах, даже без всякого CSS и JS. Один мой сайт, сделанный по той технологии, до сих пор жив-здоров и используется: http://pediatria-mid.ru/
    Как говорится, "русское народное зодчество, без единого гвоздя возведено". Единственное, для чего тут задействован JS - это фокусы с динамическим масштабированием шрифта (на больших экранах он растёт) и с красивым появлением. С мобильным браузингом, правда, есть трудности - но простите, кто себя хорошо чувствует спустя три поколения технологий? :)


  1. neenik
    12.07.2023 17:03

    Делал веб-фронтенд для управления ботом Телеграма антибана. Показалось хорошей шуткой сделать интерфейс на голом html (под капотом - новейшие фронтенд решения, с учётом, что они еженедельно устаревают)


  1. DmitryKoterov
    12.07.2023 17:03
    +1

    Еще из более-менее тех времен вспоминаются:

    1. Распорки (img с прозрачным gif 1x1, растянутый до нужной ширины).

    2. Netscape Navigator крэшился, если в строках на JS была буква «я» (у нее был код 255), но не всегда, а только иногда.

    3. Питон-фреймворк с названием %опа.

    4. Возникший Prototype.js был глотком свежего воздуха, а потом появился jQuery, который РЕАЛЬНО оказался таким глотком.

    5. Редактор HomeSite с невероятно детско-лего-кубизным гладким жирным шрифтом и подсветкой синтаксиса, после которого так не смотрелись все остальные редакторы.


    1. Scott_Leopold
      12.07.2023 17:03

      Ага, точно! Отлично помню, в какой восторг меня привело знакомство с jQuery.


  1. Scott_Leopold
    12.07.2023 17:03

    О, флэшбэк из времён, когда программирование было искусством, а не ремеслом.


  1. Dos4gwexe
    12.07.2023 17:03
    +1

    Вах, не так всё было! JS и CSS это уже 2000+

    https://web.archive.org/web/20021124040808/http://www.dizel-n.ru/ - вот например 2002 год. Здесь, кстати, уже в зрелом виде табличная вёрстка. Расцвет на излёте так сказать.


  1. fvv448
    12.07.2023 17:03
    +1

    Ностальгическая статья.
    Я в 1999 году при создании сайтов DIV вообще не использовал.
    Дизайнил только с помощью табличной верстки и изредка фреймов.

    Даже восстановил из пыльного архива свой первый сайт, который даже какую-то премию выиграл в свое время - http://cool.eburg.club/