В августе этого года Microsoft прекращает поддержку Internet Explorer 11, тем самым заканчивает эпоху браузеров, которые несли в себе одну очень важную миссию…
И, в связи с этим, меня посетила мысль — «А не сделать ли мне современный сайт так, как делали их тогда?». Отличный повод вспомнить как начиналась моя дорога в разработку и поностальгировать за теми годами. Вечер свободный, каких-то сложностей с вёрсткой под Internet Explorer я уже не припомню. Так-то почти 15 лет прошло. Думаю, справлюсь за час сильно не напрягаясь…
С чего бы начать?
А начал я с того, что приготовил себе кофе и включил любимую музыку. Главное для работы разработчика сделано, теперь буду воссоздавать именно ту рабочую обстановку, с которой я начинал.
Выбирать тогда особо не приходилось — используй то что есть и скажи спасибо что имеется возможность «одолжить» программное обеспечение в локальной сети, прихватив пару вирусов в придачу. Хорошо что в интернете ещё есть места где можно скачать настолько старое ПО.
На виртуальную машину устанавливаю прекрасную в своём исполнении и по сей день — Windows XP. Именно в комплекте с ней поставлялся Internet Explorer 6. Для меня, как и многих других это была первая операционная система и первый браузер в жизни.
Внешний вид Windows XP с запущенным Internet Explorer 6
Очень приятно было увидеть снова этот интерфейс, хотя раньше он казался нарисованным более качественно. Этот тот случай — чем старее монитор, тем лучше система будет выглядеть. Оказалось в IE 6 не было вкладок, а переключение между окнами происходило через панель задач. Совсем об этом забыл. Хорошо что для работы мне нужна всего одна.
Также мне потребуются редакторы кода и графики. В моем случае это Microsoft FrontPage и Adobe Photoshop 8, а точнее его друг ImageReady. FrontPage в то время я нашёл случайно роясь в пакете поставки Microsoft Office. После текстового документа это был глоток свежего воздуха. Подсветка кода, предосмотр своей работы и широкая функциональность, которая делала разработку приятней и значительно проще. Ну а с Photoshop не игрался только ленивый. Сам он затачивался чисто для обработки фотографий, а вот для растровой графики в комплекте с ним предлагался ImageReady. В общем использовали и то и то.
Кроме рабочего браузера мне понадобится ещё один — Mozilla Firefox. Этого красавца я буду использовать для выявления нестыковок вёрстки с IE 6. В то время я делал верстку сначала под IE, а только потом подстраивал под другие браузеры, что было очень большой ошибкой.
Вроде всё готово и я ничего не забыл, а значит можно начинать.
Семь раз отмерь и ещё семь раз отмерь
Так как дизайн мне продумывать не нужно, сразу запасёмся референсами. Вот как выглядит страница Facebook:
Скриншот страницы профиля Facebook
В общем ничего сложного. Простая структура, скруглённые углы, тени, пару градиентов и векторные иконки, работы немного. DevTools хрома и вся интересующая информация у меня в… а нет, так раньше не делали… Или ройся в исходниках (с вёрсткой Facebook это сразу психологическая травма, надо было постараться такой простой макет сделать так плохо), или сделай скриншот и отмеряй в Photoshop. Чем я и занялся, попутно переводя всё в код.
Но! Стоит упомянуть об ограничениях. У меня нет хорошего автокомплита, автогенерации кода, расширенной подсветки синтаксиса, препроцессоров и сборщиков, девтулзов и подобных всяких мелочей.
А так же я ограничен спецификациями HTML 4 и CSS 2 и их представлением в IE 6. А это означает что никаких продвинутых селекторов и псевдоэлементов, градиентов и теней, трансформаций и анимаций, округлых углов и прозрачности, гридов и флексбоксов нет. SVG кстати тоже нет.
Одним словом — ничего нет. Лучше бы я посмотрел сериал, но раз сел нужно довести работу до конца.
Чтобы долго не томить, получилось?
Получилось и вот результат который можно увидеть в IE 6:
Так выглядит моя копия страницы профиля Facebook в Internet Explorer 6
Неплохо и практически «один в один» как я и хотел. Но не всё так радужно как может показаться на первый взгляд. Давайте разбираться как я это сделал и сколько реального времени потратил вместо запланированного.
Таблицы тоже гриды
Начнём с основ, а именно с макета. Не столь давно появившиеся инструменты в виде
flex и grid решают практически все возможные проблемы с созданием сложных структур представления любой информации, а как было до них? В общем так же, только значительно хуже в определённых моментах.Таблицы применяли для решения тех же задач, что и гриды сейчас. Используя их можно было легко создавать сложный дизайн и нужную разметку с хорошим позиционированием контента по горизонтали и вертикали. В то время центровка по вертикали была большой головной болью. Приходилось явно указывая отступы, чтобы визуально все элементы находились на одной линии, а таблицы позволяли это сделать одной строчкой кода.
Есть в них и недостатки. Дело в том, что таблица не может чётко сохранять свои размеры. Даже если явно указать ширину или высоту таблицы, она всегда будет подстраиваться под размер контента. Вроде не большая проблема, пока не сталкиваешься с неявным поведением. При использовании блочного контента с фиксированным размером, могут появляться отступы, которых быть не должно. Что, в свою очередь, косвенно влияет и на другие ячейки. Решалось это использованием свойства
table-layout: fixed; с явным указанием размера таблицы.При горизонтальном выравнивании между элементами, всегда оставался отступ шириной в один пробел, чего не было при использовании
float. Да и для простых задач таблицы было использовать неудобно из-за массивности кода и дополнительных затрат на стилизацию.Поэтому для структурных частей использовали таблицы, а для всего остального предпочитали
float. Мы прямо говорили браузеру «вырви эти куски и сделай с ними что-нибудь, чтобы они стали рядом друг с другом». И он так и делал. Что было очень удобно, но порождало проблему обтекания другими элементами. Решалось применением различного рода механик по сбросу «п��авающего» состояния.Посмотрим на то, как реализован макет моей копии. Для начала идёт основная разметка страницы:
Разметка основных контейнеров. Синим цветом выделены таблицы
Верхняя таблица — панель навигации. Здесь крайние ячейки имеют фиксированную ширину, а центральная растягивается. Такой же принцип использован и на оригинальном сайте. Так панель занимает всю ширину просматриваемой области и имеет акцент на ссылки разделов. Нижняя таблица использована для контента страницы и разделена на две ячейки для простоты стилизации.
Далее идут внутренние контейнеры для центровки контента:
Разметка контейнеров для центровки контента. Синим цветом выделены таблицы
Эти две таблицы имеют фиксированную ширину и использованы специально из-за простоты выравнивания по горизонтали с помощью
align="center". Верхняя отделяет оформление профиля от навигации по его разделам, а нижняя разделяет боковую часть от основного контента.Далее идут внутренние компоненты:
Разметка внутренних контейнеров разделяющих информацию. Синим цветом выделены таблицы, красным цветом выделены блоки с float-элементами, жёлтым цветом выделены обычные блоки
Они визуально разграничивают какую либо информацию, что упрощает её восприятие. Можно заметить что с блоками в контентной части что-то не так. Взглянем поближе:
Виджет боковой части страницы. Синим цветом выделены таблицы
Это таблица с ячейками. Как мы помним возможности использовать скругленные углы и тени у нас нет. Точнее тени в IE 6 были и выглядели они как то так:
.selector {
filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color=#000000);
}
Из-за слабого функционала самого фильтра, тени получались грубыми и часто имели различного рода баги, что сводило возможность их применения к нулю. Возможно был похожий фильтр и для
border-radius, но он ситуацию не спасает. Единственный выход — отрисовать всё в Photoshop и использовать как фоновые изображения. Для примера рассмотрим выпадающее меню:
Вид выпадающего меню на сайте. Синим цветом выделена таблица, жёлтым цветом выделен фон
Это табличная сетка 3 на 3. Углы зафиксированы по размеру фона в ширину и высоту. Грани зафиксированы только по одной стороне, а вторая имеет возможность растягиваться. Центр просто закрашен фоновым цветом. Вот и всё, довольно таки просто сделать любой вычурный дизайн, который будет подстраиваться под содержимое центральной ячейки. В итоге мы имеем и тени и скругленные углы и всё красиво как и в дизайне оригинала.
Идём дальше, внутренние блоки:
Разметка элементов предоставления информации. Синим цветом выделены таблицы, красным цветом выделены блоки с float-элементами
Тут всё просто. Это удобное представление необходимой для восприятия и взаимодействия информации. Взглянем на эту часть подробнее:
Разметка с разными методиками формирования макета и оформления информации. Синим цветом выделены таблицы, красным цветом выделены блоки с float-элементами, жёлтым цветом выделены блоки с абсолютным позиционированием
Здесь можно заметить, что я использую таблицы очень часто. В целом, любой элемент можно сверстать как чисто на
float, так и абсолютным позиционированием. Почему так? Каждый разработчик сам решает как ему использовать тот или иной инструмент и что ему более удобно или предпочтительно. Но стоит помнить что инструмент не всегда работает так как задумано и здесь такая же ситуация.Я намеренно уходил от использования
float. Всё связано с некоторыми багами в IE 6:
Часть панели навигации сайта с явным указанием размеров внешнего отступа в разных браузерах
Это два блочных элемента выровненных по левому краю с помощью
float. Поле поиска имеет левый margin в 13 пикселей. Как можно заметить в IE 6 это значение задвоено. Этот баг решался добавлением display: inline; к элементу, визуально ничего не менялось и внешний отступ принимал правильное значение. Но на этом не все, есть ещё и внутренний отступ:
Часть панели навигации сайта с явным указанием размеров внутреннего отступа в разных браузерах
И там и там, визуально, ровная вёрстка, но IE 6 где-то съедает 1 пиксель. Эта проблема с одним пикселем проявляла себя часто и в самых неожиданных местах. Почему так происходило я не знаю, просто так она не решалась и приходилось подставлять значения на глаз.
Как видим таблицы нам заменяли
grid, а float — flexbox. Удивительно что удобная альтернатива с похожим функционалом появилась не так-то и давно. Даже в современном мире таблицы можно увидеть в вёрстке макетов для электронных писем, с такими же принципами построения как я описал.Тысяча и одна картинка
С изображениями были свои проблемы, как и с их количеством. Раньше в основе лежал скевоморфизм со сложной конструкцией света и тени. Сверстать такое на чистом CSS было просто невозможно. Придумал красивый дизайн — рисуй, режь и верстай и никак иначе.
В основном мы использовали 3 формата, которые все и так знают:
- JPEG — легко сжимается, хорошая цветопередача, не имеет прозрачность;
- PNG— плохо сжимается, имеет хорошее качество, отличная цветопередача, имеет прозрачность;
- GIF — хорошо сжимается, плохая цветопередача, имеет прозрачность, можно анимировать.
Но были и те кто использовал BMP, что неоправданно затратно. Все стремились к заветным «не более 250 кб на страницу» и изображения в мегабайт были непозволительной роскошью для интернета того времени.
Вроде бы есть из ��его выбрать, но всё портили ограничения этих форматов.
GIF не умел сглаживать прозрачность. Любое изображение с прозрачностью имело рваные края в местах перехода. Что для тех лет смотрелось приемлемо, хотя и не очень красиво. В ImageReady была опция — сохранить как для Веб. Что давало возможность добиться сглаживания краёв за счёт использования фонового цвета на определённых пикселях. Всё же размер и практичность ценились больше чем внешний вид.
А вот с PNG были проблемы вселенского масштаба. IE 6 не умел отображать прозрачность для этого формата. Да, весь альфа-канал заменялся обычным серым цветом. Решений у этой проблемы я знал две — используй GIF или используй IE-фильтры. Выглядело это так:
.selector {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/bg.png", sizingMethod="crop");
width: 800px;
width: 600px;
}
Размеры должны быть строго заданы, иначе никакой магии не будет. Такой метод кроме того что работал медленно и не всегда хорошо, был не очень удобен. А ещё
background-repeat не поддерживался с фильтром, что делало его применение бесполезными во многих случаях.Хотя дизайн Facebook и более плоский, есть много мест где пришлось использовать изображения для воссоздания оригинала:
Карта использованных изображений. Синим цветом указаны фоновые изображения, красным цветом указаны обычные изображения
Каждое поле, кнопка или иконка, каждая тень, скругление аватарок или подсветка фона ссылок — это всё изображения.
Отсутствие качественной прозрачности накладывало ещё и дополнительную работу. Если кнопка использовалась в нескольких местах где должен быть разный фон, нужно было рисовать столько же вариантов этой кнопки. И так для каждого подобного элемента дизайна.
При наведении курсора мыши мы подменяли одно изображение на другое, отображая эффект наведения. И часто браузер не успевал загрузить и обработать новое изображение. Из-за чего на какой-то момент, создавалась пустота и только потом появлялось загруженное изображение. В какой-то момент я узнал что можно делать спрайты и загружать все нужные изображения сразу в одном. Для примера рассмотрим часть того что используется на сайте:
Пример спрайта с полем ввода, кнопкой, элементами меню и навигации
Все элементы просто складывались, как в тетрисе, на одно полотно. Сложность была только в том, чтобы попасть в стилях на правильные координаты и размеры для позиционирования.
Поля и кнопки специально делались подлиннее. Нужная часть изображения ставилась фоном на кнопку и в отдельный элемент делался хвост фиксированной ширины с окончанием этого участка. Теперь кнопку можно растягивать вплоть до того размера, которое мы поместили на спрайт.
Что самое интересное, даже с отсутствием быстрого интернета, это работало довольно-таки шустро. Сайт загружался и его можно было использовать до того как подгрузится спрайт. Но признаюсь мне стоило повозиться, чтобы добиться идеального вида этих изображений для демонстрации. В production бы ушли пережатые и оптимизированные изображения и визуально это было бы заметно.
20px + 20px + 5px
По скриншотам сайта можно заметить что он получился какой-то не широкий. А всё потому что, в то время, у большинства стоял монитор в 17 дюймов с разрешением 1024х768 или 19-шка с огромными 1280х1024. По этому сайт обычно делался или во всю ширину или блочно, но с контентной частью где-то 980 пикселей.
Обычно сайты были статичны с определённым минимальным размером. Сейчас такое тоже случается, тот самый Вконтакте использует статичные размеры и отдельно мобильную версию сайта. С шаблоном Facebook мне повезло и сильно изменять ничего не пришлось.
Internet Explorer и тут выделялся, он использует блоковую модель
border-box по-умолчанию, тогда как другие браузеры используют content-box как и сейчас. Посмотрим в чем разница на примере кода:.selector {
border: 2px solid black;
padding: 10px;
width: 500px;
}
Internet Explorer отрисует блок в 500 пикселей как и написано. А другие браузеры отрисуют блок в 524 пикселя. Это связано с логикой работы блоковой модели в баузерах. За основу берется размер контента и к нему прибавляются все остальные размеры отступов и обводок. В IE решили пойти от обратного и что самое интересное — в современной разработке это считается более удачным выбором.
Наглядно показана разница между блоковыми моделями W3C и Internet Explorer
Чтобы выровнять размеры блока нужно указать отдельно ширину в 500 пикселей для IE и отдельно ширину в 476 пикселей для всех остальных браузеров. Благо такая возможность была и приходилось постоянно считать пиксели, суммировать и вычитать для каждого случая с отступами или обводкой. И я точно знаю что раньше в уме считал значительно быстрее чем сейчас.
Стоит ещё заметить одну важную деталь. Сейчас основной размер текста равен 16 пикселям. А верстка строится на привязанных к этому размеру единицах измерения — rem. Это очень удобно и легко делится с сохранением чётного значения. Да и думать долями проще. Сделано это всё для мобильных устройств. Парные пиксели легче масштабировать и не будет проблемы что где-то он потерялся или то-то выглядит размыто.
Так вот, раньше об этом не думали. Пиксели ставили как попало, во всех размерах часто использовался шаг в 5 пикселей (так считать удобней), а весь текст был в 12 пикселей Arial или Times New Roman. И скажу что это огромное облегчение не затрагивать мобильные устройства и то как там что будет выглядеть.
jQueryScript...
Помню раньше были сайты, которые предлагали всякие поделки на JavaScript в виде часов, календарей или эффектов и каждый уважающий себя владелец интернет-ресурса должен был иметь подобные побрякушки и у себя. О JavaScript я мало чего помню, только то, что у каждого браузера он был свой. А так как я всё учил методом научного тыка, JavaScript для меня начался с jQuery и Mootools.
jQuery я полюбил сразу как понял в чем его суть. Продуманная структура и хорошо прописанная документация с примерами, давала возможность использовать эту библиотеку не зная основ JavaScript. Стоит уточнить, что в будущем это негативно скажется на некоторых аспектах моего пути в веб. Ведь любой язык и любую технологию нужно учить с фундаментальных основ, чтобы уметь мыслить с использованием полученных знаний, а не просто применять инструмент.
На моей копии Facebook я также использовал jQuery. Всё точно так же как и сейчас, только набор методов значительно меньше. На нем я написал логику работы выпадающих меню и
placeholder полей ввода.С выпадающими меню все просто, слушаем события
click и манипулируем CSS-свойствами и анимацией. А вот с placeholder всё чуть сложнее. В HTML 4 не было возможности поставить на поле нативный placeholder. Для их реализации использовали тег label с абсолютным позиционированием над полем и отслеживанием состояния фокуса поля через JavaScript, чтобы этот label скрыть.
Поле поиска с активным фокусом и без него. Красным цветом указан контейнер, жёлтым цветом указан label
Ванильный JavaScript использовался для фиксации верхней панели навигации внутри CSS-свойства. Да IE 6 не умел фиксировать позицию элемента на экране с помощью
position: fixed;, но умел в CSS с использованием JavaScript. Посмотрим на пример:.selector {
position: absolute;
left: 0px;
top: 0px;
left: expression((0 + (someVariable = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft )) + "px");
top: expression((0 + (someVariable = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop)) + "px");
}
Любое JavaScript-выражение можно поместить в
expression и оно будет выполнено. Здесь м�� получаем позицию скрола и используем её для определения позиции элемента. При изменении скрола всё автоматически будет пересчитано. Работает это очень плохо и при скроле дёргается.Напомню что на дворе было начало 2000-х когда это появилось и на фоне того что происходит в современном вебе, это чертовски инновационно, но непонятно зачем.
Это можно сделать только в IE
Можно заметить что часто что-то работало не так или вовсе не работало в Internet Explorer. Из-за того что он занимал монопольное положение на рынке, Microsoft реализовывали функционал как сами того хотели и этим нарушали те малые стандарты которые тогда были. Но кто-то в компании понял что это путь в никуда и предоставил инструменты решающие некоторые проблемы.
Первое что мы рассмотрим — специальный селектор:
.selector {
// Это будет работать в любом браузере
color: red;
}
* html .selector {
// Это будет работать только в IE 6
color: blue;
}
Довольно таки удобно писать код как привык и выносить отдельные части специально для IE, но на самом деле этот код не валиден по стандартам CSS, ведь выше тега html в иерархии ничего не может быть.
Второе — префикс для CSS-свойства:
.selector {
// Это будет работать в любом браузере
border: 2px solid red;
// Это будет работать только в IE 6
_border: 2px solid blue;
}
Тоже довольно таки удобно и часто встречался в использовании, но как и первый вариант этот код не валиден. Каждая следующая версия IE которая использовала такой подход, предпочитала свой префикс, что быстро вводило в заблуждение.
И наконец третий вариант и самый используемый — специальный комментарий, он же conditional comments.
<!--[if IE 6]>
Тут будет работать код только в IE 6, в других браузерах это будет обычный комментарий
<![endif]-->
Просто подключаем 2 стиля, один полноценный и один с правками для IE. Именно это решение использовали для всех IE вплоть пока это было возможно. Но кто-то решил что IE 10 — отличный браузер и подобные вещи ему больше не нужны, там этот хак убрали. Спасибо, это очень помогло в разработке (нет).
Но на этом не всё! Было ещё много багов и поведений которые не ложились на здравое мышление. Опишу те что помню.
▍Небагафича №1
IE не понимал ничего что было связано с минимальной и максимальной высотой и шириной. Лечилось это с использованием
expression в CSS и JavaScript выражением. Или вот таким хаком для min-height:.selector {
min-height: 100px;
height: auto !important;
height: 100px;
}
Понятия не имею почему это работает, но хаков с использованием
!important было достаточно много.▍Небагафича №2
.selector {
color: red !important;
color: blue;
}
Все браузеры отрисуют красный цвет и только IE 6 покажет синий. Почему? Мне тоже интересно.
▍Небагафича №3
Только ссылки и кнопки могли обрабатываться свойством
:hover, остальные элементы не работали. По этому все возможное я оборачивал в ссылку и уже её стилизовал. При написании этой статьи и гуляя по интернету я вспомнил об этих скриптах:.selector {
behavior: url("csshover3.htc");
behavior: url("iepngfix.htc");
}
Первый скрипт добавлял :hover на любые элементы, второй прозрачность для PNG. Я их когда-то использовал в своей работе, но на момент создания копии просто не помнил что такое было.
▍Небагафича №4
Размер шрифта влиял на размер элемента, даже если он был без текста. Рассмотрим пример:
.selector {
width: 2px;
height: 2px;
}
Все браузеры отрисуют блок 2 на 2 пикселя и только в IE 6 он будет чуть больше. Чтобы этого не было нужно добавить
font-size: 0;, тогда шрифт не будет влиять на размер блока.▍Небагафича №5
Ну и куда же без
zoom: 1;. Это магическое свойство заставляло разметку написанную нами работать более правильно. Каждый раз когда были какие-то проблемы с позиционированием, отображением или прокруткой сразу пробовали добавить zoom и очень часто он решал проблему. Связано это было со слоями и рендерингом страницы самим IE.Подобных багов было очень много. Всё усложняло непонимание — «откуда они берутся и как с ними бороться». Зато каждый раз разработка превратилась в детектив с использованием смекалки и чутка магии.
А что покажет Огнелис?
Сайт полностью готов и пришло время посмотреть как он выглядит в другом браузере. Я запускаю Firefox, открываю сайт и… и у меня сдают нервы. Естественно всё выглядело криво. А чтобы всё исправить нужно сидеть и разделять стили для браузеров, считай размеры, править съехавшую вёрстку и дебажить, дебажить, дебажить. Я понял что с меня ностальгии достаточно.
Я специально писал код опираясь на IE. Вместо запланированного времени на реализацию только одной страницу ушло 5 часов и 43 минуты!
А вся проблема в логике и мышлении. Только создавая подобные проекты понимаешь как сильно инструмент который ты используешь, влияет на то как ты мыслишь и насколько сильно он упрощает рутину. Во время работы всегда возникал конфликт как это сделать, как это делали раньше, почему это не работает. Приходилось несколько раз переписывать, продумывать разметку заново и снова переписывать.
«Отмерять размеры, сверстать, забыть значение пока переключаешься между окнами, нарезать все изображения и переделать 3 раза, обматериться, свести всё в спрайт, посмотреть на сайт и понять что это как-то не очень выглядит, опять нарезать все изображения и переделать еще 2 раза, а потом ещё 2 раза, обматериться ещё раз, опять свести все в спрайт, обматерить неудобную клавиатуру, выпить кофе, начать искать в интернете более удобную клавиатуру, загуглить пару сотен раз „почему это не работает в IE 6“, закончить работу».
Но зато идеально и как один в один! Хотя раньше я на всё потратил бы меньше часа и выглядело бы оно так же. Всё-таки 15 лет это очень много. Веб сильно изменился, но сайты свёрстанные тогда всё так же работают в современных браузерах. А вот будут ли работать современные сайты в браузерах будущего пока сказать сложно.
Скриншот с Firefox я не покажу чтобы не травмировать сильно впечатлительных людей. А ещё я где-то потерял исходный код во время написания статьи… Обидно.
Ну и в конце
Ностальгия была не настолько приятной как я думал, но и не такой плохой. Сейчас много времени приходится тратить на продумывание дизайна и концепции, на бизнес логику и взаимодействия, на адаптацию под разные устройства, на комфорт пользователя и сравнительно немного на саму реализацию. Раньше от мысли до готового сайта у меня уходило 3 часа, с которых 80% это простое программирование. Но как бы мне не казалось, что раньше было лучше и проще, это не так.
Internet Explorer 6 в моей памяти был хорошим браузером и оказался не очень на практике. Его, как и все последующие версии, погубило несколько очень значимых деталей: своя политика партии в отношении веб, многочисленные баги которые не исправлялись годами, медленное принятие современный веб-стандартов и глобальные обновления только с выходом новой версии Windows. «Тебя это тоже касается Safari!»
Это был хороший опыт. Я стал любить больше современные технологии с меньшим ощущением что вся веб-разработка повернула не в ту сторону и я занимаюсь не тем (тебя это не касается node_modules, ты всё так же плох).
Я советую всем попытаться воссоздать что-то современное на старых языках и технологиях. Или хотя бы узнать, как развивался тот стек который вы используете каждый день. Это интересно, но предупреждаю — местами будет больно.
