История HTML и CSS: какие элементы и свойства ушли навсегда Когда-то бегущая строка на сайте была вполне обычной вещью. Автор, например, ещё в школе выводил через marquee гордое «Локомотив — чемпион России 2004». Текст по центру тоже ставили совсем не так, как сейчас — для этого существовал отдельный элемент center. С вёрсткой было ещё интереснее. До flexbox и CSS Grid элементы выстраивали через float, а потом отдельно боролись с последствиями при помощи пустого div и clear: both. А в Internet Explorer свойство zoom использовали не только для масштабирования, но и как способ чинить проблемы с отображением. Такие конструкции встречались даже в раннем Twitter Bootstrap и normalize.css. marquee, applet, center, clearfix и старые хаки для IE — прогулка по вебу, где привычные сегодня задачи решались совсем другими средствами. И это лишь часть того, что со временем исчезло из повседневной HTML- и CSS-практики.

HTML и CSS помогут вам сделать ужасный интерфейс для пользователя Вводишь номер телефона, жмёшь Enter, форма стоит на месте. Жмёшь ещё раз, потом ещё. А чуть раньше текст с иконкой цветом выдавал себя за ссылку, и его хотелось открыть в новой вкладке с зажатым ctrl, но вкладка так и не открылась. Багов здесь нет, интерфейс работает ровно так, как его разметили. Подобные решения собраны с живых сайтов: подпись «fire» у иконки, которую скринридер честно зачитает незрячему пользователю, обводка фокуса, обрезанная сверху, и поле для кода из пуша, где вместо цифровой клавиатуры открывается стандартная с мелкими клавишами. Последнее автор увидел, когда его маме с травмированной кистью нужно было заплатить за коммуналку. Посмотрим, какие ещё подозрительные решения стоит поискать у себя в проекте.

Вайбкодить сайты легко. А вы попробуйте вайбкодить обложки для видео 😄 Я вот пробую. Пока херня получается. Мне надо пересобрать обложки для видео на моем ютуб-канале и идея такая: Claude собирает мне конструктор этих обложек в HTML, чтобы каждый раз не генерировать целые картинки. А на самих обложках будет вставлять меня в разных позах. И вот щас он нагенерировал меня, но вырезал из фона меня супер херово. Щас перебираю варианты, как это лучше сделать. Должно получиться так: 1. Заголовки текстом через HTML 2. Меня в разных позах сгенерирует один раз Chat GPT 3. Всякие 3D объекты для видео тоже сгенерирует Chat GPT 4. Claude будет собирать обложки через HTML, и уже из него будет сохранять картинку всей обложки целиком.

Вайбкодинг проект за пол дня💻 👻После мастер-класса Димы Черненко я решил создать инструмент, который превращает обычную линию в объёмную форму из жидкого металла. 🐕 Штука получилась залипательная. И если вы, как и я, рисуете не очень ровно, это даже плюс! тут работает правило, чем кривее и неожиданней линия, тем интереснее получаются формы) 💩 Что умеет инструмент: 🟡 сглаживать неровную линию 🟡 автоматически замыкать круги и другие контуры 🟡 отражать рисунок по X, Y или сразу по двум осям 🟡 создавать раздвоенные и органические окончания 🟡менять толщину, объём, глянец и контур формы 🟡 настраивать направление, высоту и яркость света 🟡 менять цвета металла, бликов, контрового света и фона 🟡 сохранять результат в PNG В общем, это классный инструмент для творческого поиска, создания графики, орнаментов и элементов геральдики. И через Nano Banana можно придумывать форме любую обёртку: накладывать текстуры, материалы, дополнительные элементы! ✨ 🤌Весь инструмент помещается в одном HTML-файле. Ничего устанавливать не нужно: открываете файл — и рисуете. Всё работает локально и никуда не отправляет ваши изображения или рисунки. Файл с проекта скинул в комментарии⤵️ Вайбкодинг проект за пол дня💻 👻После мастер-класса Димы Черненко я решил создать инструмент, который превращает обычную линию в объёмную форму из жидкого металла. 🐕 Штука получилась залипательная. И если вы, как и я, рисуете не очень ровно, это даже плюс! тут работает правило, чем кривее и неожиданней линия, тем интереснее получаются формы) 💩 Что умеет инструмент: 🟡 сглаживать неровную линию 🟡 автоматически замыкать круги и другие контуры 🟡 отражать рисунок по X, Y или сразу по двум осям 🟡 создавать раздвоенные и органические окончания 🟡менять толщину, объём, глянец и контур формы 🟡 настраивать направление, высоту и яркость света 🟡 менять цвета металла, бликов, контрового света и фона 🟡 сохранять результат в PNG В общем, это классный инструмент для творческого поиска, создания графики, орнаментов и элементов геральдики. И через Nano Banana можно придумывать форме любую обёртку: накладывать текстуры, материалы, дополнительные элементы! ✨ 🤌Весь инструмент помещается в одном HTML-файле. Ничего устанавливать не нужно: открываете файл — и рисуете. Всё работает локально и никуда не отправляет ваши изображения или рисунки. Файл с проекта скинул в комментарии⤵️ #вайбкодинг Буст канала ❤️ @webdesignlab