Hacker News Digest

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

Особенно примечательны "революционные" методы разработки, такие как многократное нажатие кнопки "регенерировать" в надежде, что что-то сработает, и случайное раскрытие пароля "hunter2" в разделе безопасности. Структура проекта показывает множество версий файлов и отладочных скриптов, что отражает хаотичный подход при использовании ИИ. Ссылки на Hacker News и GitHub репозиторий подтверждают, что это реальный проект, созданный как критика тренда "промпт-инжиниринга" как замены реальным навыкам программирования.

• Обсуждение вращается вокруг "vibe-coding" и его влияния на веб-дизайн: критика повторяет аргументы 2013 года о Bootstrap, обвиняя LLM в том, что они делают сайты одинаковыми, как и тогда обвиняли Bootstrap в том, что он делает сайты одинаковыми.
• Участники спора вспоминают, что критика сама по себе не нова — она уже была в 2013 году в отношении Bootstrap, и теперь она просто трансформировала в критику LLM-стилей.
• Обсуждение затрагивает вопрос о том, что если веб-сайт выглядит как "vibe-coded", то это может быть как результат использования LLM, так и просто результат использования одинаковых компонентов, как это было с Bootstrap.
• Некоторые участники обсуждения отмечают, что критика "виб-кодинга" похожа на критику Bootstrap, и что эта критика может быть вызвана тем, что сайты, созданные с помощью LLM, выглядят одинаково из-за использования одинаковых компонентов и стилей.

Основной урок: «A» не обязательно должна быть «A». Кроссбар, который не попадает в центр, делает букву высокопоясной и визуально неуравновешенной. Правило: если выглядит неправильно — значит, так оно и есть. Подчеркнуть: контраст штрихов в местах стыков должен быть заметен.

• Обсуждение началось с цитаты о том, что «недостаточное внимание к промежуткам между буквами приводит к тому, что мы теряем B-образность», и быстро перешло к обсуждению веб-дизайна, шрифтов и их взаимодействия с Hacker News.
• Участники обменялись ссылками на ресурсы вроде ohnotype.co, futurefonts.com и letterspractice.com, а также обсудили, что читабельность и доступность контента важнее, чем кричащие цвета и неуместный скроллинг.
• В итоге, обсуждение свелось к тому, что даже в сообществе, где обсуждают веб-дизайн и типографику, важно соблюдать баланс между формой и содержанием, и что важно не только знать, где рисовать линию, но и понимать, как влияет на читаемость то, что мы оставляем пустым.

Современные стековые наборы шрифтов используют системные шрифты, доступные в операционных системах, что обеспечивает мгновенную загрузку без скачивания файлов, отсутствие смещений макета и мерцания. Они организованы по классификации типографики, включая System UI, Transitional, Old Style, Humanist и другие, каждый с оптимизированным списком шрифтов для резервного отображения.

Например, стек System UI использует system-ui, sans-serif, а Monospace Code — ui-monospace, 'Cascadia Code', Menlo, что подходит для кода. Это решение повышает производительность веб-страниц и универсальность, так как шрифты уже установлены у пользователей.

• Использование кастомных шрифтов может привести к неожиданному рендерингу из-за настроек браузера и системных ограничений, особенно при блокировке веб-шрифтов.
• Широкие стеки шрифтов могут негативно влиять на производительность, если первый шрифт в списке не содержит нужных глифов, что особенно актуально для нелатинских шрифтов и эмодзи.
• Веб-шрифты считаются предпочтительным решением для обеспечения консистентности брендинга, а инструменты вроде screenspan.net помогают подобрать системные fallback-шрифты с похожей метрикой.
• Для внутренних дашбордов и инструментов рекомендуется использовать системные стеки (например, system-ui) для лучшей интеграции с ОС, в то время как для публичных сайтов важнее контроль над брендингом.
• На Android многие стеки шрифтов выглядят идентично из-за ограниченного набора системных шрифтов, что требует создания гибридных решений или компромиссов.

loadmo.re — это кураторская галерея мобильных сайтов, созданная для вдохновения дизайнеров, работающих с нетривиальным вебом. Платформа подчёркивает, что современный интернет всё больше смещается в сторону смартфонов, хотя дизайнеры по привычке ищут референсы на десктопах, упуская из виду потенциал мобильных интерфейсов.

В архиве представлено 362 сайта с фильтрацией по тегам — от 3D-анимации и типографики до звукового дизайна и глитчей. Примеры вроде rude-captcha.xyz или slingshot.trudy.computer демонстрируют, как можно творчески использовать возможности телефона. Цель проекта — стимулировать сообщество к обсуждению и эксперименту в mobile-first дизайне.

• Пользователи обсуждают нестандартный веб-дизайн представленных сайтов, отмечая как их креативность и ностальгическую ценность, так и проблемы с юзабилити и доступностью.
• Критике подвергаются отдельные элементы, такие как изменение поведения ссылок при наведении и невозможность добраться до нижней части страницы из-за бесконечной подгрузки контента.
• Участники делятся воспоминаниями о легендарных сайтах прошлого (Kaliber 10000) и обмениваются ссылками на аналогичные ресурсы и агрегаторы необычных сайтов.
• Высказываются опасения, что подобный дизайн часто непрактичен для представления реального контента и создания призывов к действию, а также создает барьеры для доступности.
• Часть сообщества ценит представленные работы за их художественную ценность и вдохновляющий потенциал, призывая не зацикливаться на мелких недостатках.

• Пользователи отмечают необычное и вызывающее головокружение отображение шрифтов на сайте, сравнивая его с психологической операцией.
• Некоторые предполагают, что искажение шрифтов может быть проблемой совместимости с Linux или конкретными браузерами.
• Высказана гипотеза, что особенность шрифта может быть способом кодирования информации для отслеживания утечек документов.
• Обсуждается красакция пометок на рассекреченном документе, объясняемая необходимостью защиты действующих методов и источников.
• Отмечается сходство представленного дрона-птицы с современными разработками, что вызывает вопросы о текущем уровне таких технологий.
• Одно из мнений: цель материала — вербовка, а сам сайт может принадлежать подразделению по набору персонала.
• Некоторые комментарии удалены модерацией или отмечены как нежелательные.
• Часть пользователей шутливо связывает происходящее с научной фантастикой или считает это сатирой.

Привет!
Кликни по аватарке, чтобы войти в «Windows XP» с моим портфолио. Всё внутри работает как настоящий рабочий стол: иконки, панель задач, кнопка «Пуск».
После загрузки откроются:

• Обо мне
• Резюме
• Проекты
• Контакты

Связаться: LinkedIn | GitHub | Instagram
Для эффекта CRT и полноэкранного режима жми иконки в трее.

• Пользователи в восторге от детализации и ностальгии, но спорят: копирование XP ≠ дизайнерский талант.
• Основные претензии: AI-аватар, неточности пикселей, скролл-бары, отсутствие теней и Easter-egg’ов в консоли.
• Советуют убрать «студий-гибли» аватар, добавить мини-приложения (Minesweeper, проводник) и open-source’нуть проект.
• Мобильная версия похвалена, но просят доработать CMD и убрать «размывающие» скан-линии.
• Вывод: крутая визуальная витрина, но чтобы впечатлить индустрию, нужно больше собственных идей и меньше «копипаста» 2001 года.

Tufte CSS — стиль для веб-статей, вдохновлённый книгами Эдварда Тафти: простота, боковые заметки, встроенная графика и продуманная типографика. Проект Дэйва Липмана, опирается на Tufte-LaTeX и R Markdown. Предложения приветствуются на GitHub.

Цель — не копировать книги в вебе, а адаптировать приёмы Тафти под экраны.

Быстрый старт

Скопируй tufte.css и папку et-book со шрифтами, добавь в <head>:

<link rel="stylesheet" href="tufte.css"/>

Основы

• Разметка: <article> → <section> → заголовки h1, h2, h3.
• Новая мысль: <span class="newthought"> + неотступный абзац.
• Цвета: фон #fffff8, текст #111111, мягкий контраст.
• Шрифт: ETBook → Palatino → Georgia; жирный и курсив — отдельные файлы.
• Ссылки: цвет текста, подчёркнуты, без hover-эффектов.

• Участники спорят о визуальном устаревании Tufte CSS: кому-то шрифт и отступы кажутся «атrocious», другие всё ещё находят стиль уместным для длинных текстов.
• Критикуют выбор почти-белого фона (#fffff8) и почти-чёрного текста (#111111): считают аргументы о «мягком контрасте» надуманными, особенно на OLED.
• Поднимают тему повторных постов: Tufte CSS регулярно появляется на HN каждые ~18 месяцев, и с каждым разом нравится меньше.
• Отмечают проблемы типографики: узкий сериф, плохой кернинг, «ужасная» open-source копия Bembo.
• Некоторые делятся опытом адаптации стиля под мобильные устройства и предлагают альтернативы вроде tint или Scribe.

Чар простой текстовой страницы

Открывая страницу из одного текста, я чувствую облегчение: нет баннеров куки, рекламы, всплывающих подписок и автозапуска видео.
Только чистый, быстрый, читаемый текст.

Такой контент можно скопировать в письмо, отправить в ChatGPT, распечатать или сохранить на Kindle — он везде работает.
Ссылка открывается мгновенно без CDN и предзагрузок.
Хостинг стоит копейки, сайт живёт даже на Raspberry Pi.

Читая, легко переключаться между беглым просмотром и вдумчивым чтением, не чувствуя вины за «потерянное» время.

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

• Участники мечтают о браузере без JS, где только HTML и выбранная пользователем CSS-тема.
• Хвалят сайты вроде plaintextsports.com и berkshirehathaway.com за минимализм, читаемость и отсутствие трекеров.
• Спорят о шрифтах: кто-то любит моноширинные «под печатную машинку», кто-то просит sans-serif и контрастные цвета.
• Соглашаются, что картинки допустимы, если служат тексту, а главный враг — избыточный JS, баннеры и медленные фреймворки.
• Вспоминают лёгкие новостные «lite»-версии CNN/NPR и альтернативные протоколы вроде Gemini как примеры «текстового» интернета.

Миллион скриншотов
Увеличьте главные страницы интернета.
Поиск сайта: ⌘K или случайный выбор.

• Проект OneMillionScreenshots показывает скриншоты топ-1 000 000 сайтов в виде интерактивной «карты».
• Часть пользователей жалуется на SSL-ошибки, блокировку DNS и поломку кнопки «Назад».
• Большинство отмечает однообразие современного веб-дизайна и коммерциализацию интернета.
• Некоторые просят фильтров по нишевым или старым сайтам, а также API-фич и мозаичных раскладок.
• Создатели подтвердили, что визуализация устарела, но данные обновляются ежемесячно и доступны через ScreenshotOf.com.

Историческое дерево технологий
Интерактивная визуализация технологической истории от 3 млн лет до наших дней. Проект Этьена Фортье-Дюбуа, пока содержит 0 технологий и 0 связей.

Каменное орудие
3300 тыс. до н. э. — первая технология производства.

• Пользователи отмечают слепые зоны: недооценены металлургия, точная механика и «базовая наука», из-за чего газовые турбины возникают «из ниоткуда».
• Найдены мелкие ошибки: дата «обуви» указывает на сандалии, а не самые ранние туфли 7000–8000 г. до н. э.; точность дат винторезных токарных станков спорна.
• UI-критика: слишком много пустого пространства, неудобно на мобильных, не хватает зума, тысячных разделителей и «привязки» к следующему узлу.
• Замечена западная и англоязычная предвзятость: китайское письмо показано как терминус, а не как корень множества ветвей.
• Предложения по улучшению: вертикальный мобильный вид, поиск «самых важных потомков» технологии, агент для автоматического обогащения графа.

Countdown timers and ‘Only 4 left’ are often scams, but they should note a few sites like eBay get a pass since for simply giving true facts about the auction. My favorite “dark pattern” is when you close a tab with items in your cart and a burner email associated, then a couple