Немного полезных ссылок
От: Shtole  
Дата: 14.08.22 18:30
Оценка: 102 (4) -1

SVG


После долгого периода неприятия, я постиг, наконец, дао SVG (ну, или мне это просто кажется). К SVG нельзя относиться как к ещё-одному-формату-графического файла, вот в чём дело. SVG — это графическая разметка. Попробую показать на примере:

https://stackoverflow.com/a/38118843/14400772

Там и сам вопрос — демонстрация правильного подхода к SVG, а уж когда приходит SVG-ниндзя и показывает, как он мыслит в терминах path-операций...

Explanation

m100,100: move to point(100,100)
h200: draw a 200px horizontal line from where we are
a20,20 0 0 1 20,20: draw an arc with 20px X radius, 20px Y radius, clockwise, to a point with 20px difference in X and Y axis
v200: draw a 200px vertical line from where we are
a20,20 0 0 1 -20,20: draw an arc with 20px X and Y radius, clockwise, to a point with -20px difference in X and 20px difference in Y axis
h-200: draw a -200px horizontal line from where we are
a20,20 0 0 1 -20,-20: draw an arc with 20px X and Y radius, clockwise, to a point with -20px difference in X and -20px difference in Y axis
v-200: draw a -200px vertical line from where we are
a20,20 0 0 1 20,-20: draw an arc with 20px X and Y radius, clockwise, to a point with 20px difference in X and -20px difference in Y axis
z: close the path


Ну и вообще, допилить готовое изображение точечными вставками какого-нибудь stroke='white' stroke-width='0.5' или, наоборот, удалением ненужных path — умение из категории must have.

Наконец, менять код SVG можно автоматизированно, из скриптов.

Итак, ссылки.


Misc


Do you want to develop an app?
Отредактировано 16.09.2022 9:25 Shtole . Предыдущая версия . Еще …
Отредактировано 15.08.2022 9:52 Shtole . Предыдущая версия .
Отредактировано 15.08.2022 9:48 Shtole . Предыдущая версия .
Отредактировано 15.08.2022 0:49 Shtole . Предыдущая версия .
Отредактировано 15.08.2022 0:47 Shtole . Предыдущая версия .
Re: Немного полезных ссылок
От: kov_serg Россия  
Дата: 15.08.22 07:59
Оценка:
Здравствуйте, Shtole, Вы писали:

S>После долгого периода неприятия, я постиг, наконец, дао SVG

1. очень избыточен, там тебе и javascript и анимации и фильтры, но нет возможности задать размер физических величинах
2. нет вменяемого редактора анимаций, да и просто редакторы вызывают смешанные эмоции. (тот же inkscape — глючевое глючево)
3. текст может неприятно удивить, ибо его размер не контролируется
4. можно создать картинку которая будет отрисоваться "вечность"
Re[2]: Немного полезных ссылок
От: Shtole  
Дата: 15.08.22 11:04
Оценка: 12 (2) +1
Здравствуйте, kov_serg, Вы писали:

_>1. очень избыточен, там тебе и javascript и анимации и фильтры


Он сложен, но настолько, насколько сложна графика вообще. Допустим, фильтры.

<defs>
<filter id="myfilter">
        <feFlood result="floodFill" x="0" y="0" width="100%" height="100%" flood-color="green" flood-opacity="0.95"/>
        <feBlend result="mergedImg" in="SourceGraphic" in2="floodFill" mode="multiply" />
        <feComposite in2="SourceGraphic" in="mergedImg" operator="in" />
</filter>
</defs>

<image xlink:href="https://rsdn.org/mag/cover/mag0407.jpg" x="100" y="550" width="200" height="276" style="filter:url(#myfilter);" />


Результат:



Что это? А это я разбирался, как сделать аналог color overlay из Фотошопа (цвет, наложенный только на непрозрачные пиксели + прозрачность полученного эффекта) и применить к изображению. (По идее, можно было бы даже написать плагин к Фотошопу, который импортировал бы слоевые эффекты). То есть, это вполне востребованная вещь. Сложно? Да. Избыточно? Нет.

Про Джаваскрипт. Это не сложность, а универсальность. Если элементы складываются неким естественным образом в DOM, и у нас уже есть язык для управления DOM, было бы странно и неестественно НЕ давать манипулировать DOM'ом через этот язык. Сложность от этого не повышается.

С анимациями почти то же самое. Одна из ключевых идей SVG в том, чтобы продублировать атрибуты внешними стилями (CSS). Ну, просто чтобы была возможность отделить «разметку» (круг) от «способа рисования» (зелёный с синим ободком). Опять же, если есть готовый язык стилей, никак не привязанный к семантике этих стилей (я говорю про CSS, который на базовом уровне «ничего не знает» про смысл X: Y; ), глупо было бы использовать что-то другое. Ну а анимации — часть этого языка. Довольно удобная и нужная часть.

>нет возможности задать размер физических величинах


Такова природа векторной графики. Она про соотношения, а не про размеры. Размеры появляются при её выводе. Это нормально, так и должно быть.

_>2. нет вменяемого редактора анимаций, да и просто редакторы вызывают смешанные эмоции. (тот же inkscape — глючевое глючево)


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

Рисовать в Inkscape, это как верстать в Ворде. Можно, но код потом чистить долго придётся. Или можно вставить как есть, не думая, что внутри (как при покупке колбасы).

Сопоставление, конечно, преувеличенное — вменяемые люди верстают изначально кодом, не прибегая к редакторам, а Inkscape для рисования я и сам пользуюсь. Но многого от него не жду, чищу сгенерированный им код Nano (см. выше), и если надо — дорабатываю руками. И вполне доволен.

_>3. текст может неприятно удивить, ибо его размер не контролируется


В силу изложенного в п.1, рано или поздно должен был встать вопрос: кто кого поглотит, HTML SVG или наоборот. Так вот, пока побеждает HTML, и слава богу. В смысле, я был вставлял графику в текст, а не наоборот.

_>4. можно создать картинку которая будет отрисоваться "вечность"


Есть такой знаменитый «тигр»:



Его используют как ленино плечо, для тестирования производительности графических движков. Анимация этого тигра (через универсальную матрицу) меньше 60fps на бытовых устройствах считалась зашкваром много лет назад (более 10 точно). Что-то у вас глубоко неправильно. Может, вы гигабайтную базу визуализируете? Картография какая-нибудь?
Do you want to develop an app?
Отредактировано 15.08.2022 11:09 Shtole . Предыдущая версия . Еще …
Отредактировано 15.08.2022 11:07 Shtole . Предыдущая версия .
Отредактировано 15.08.2022 11:06 Shtole . Предыдущая версия .
Re[3]: Немного полезных ссылок
От: kov_serg Россия  
Дата: 15.08.22 12:28
Оценка:
Здравствуйте, Shtole, Вы писали:


>>нет возможности задать размер физических величинах

S>Такова природа векторной графики. Она про соотношения, а не про размеры. Размеры появляются при её выводе. Это нормально, так и должно быть.
Нет это не нормально.

S>А есть вообще хоть один вменяемый WYSIWYG-редактор чего угодно? Профессионалы не пользуются WYSIWYG. В этом дао

Вы аниматорам это расскажите.


_>>4. можно создать картинку которая будет отрисоваться "вечность"

S>Есть такой знаменитый «тигр»:
S>Image: 256px-Ghostscript_Tiger.svg.png

S>Его используют как ленино плечо, для тестирования производительности графических движков. Анимация этого тигра (через универсальную матрицу) меньше 60fps на бытовых устройствах считалась зашкваром много лет назад (более 10 точно). Что-то у вас глубоко неправильно. Может, вы гигабайтную базу визуализируете? Картография какая-нибудь?

Сколько fps у вас показывает такой svg?
<?xml version="1.0" encoding="utf-8"?>
<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>path { stroke: red; opacity: 0.3 }</style>
<defs>
<symbol id="s1"><path d="m-50,0 h100"/></symbol>
<symbol id="s2">
<use transform="rotate(1)" xlink:href="#s1"/>
<use transform="rotate(2)" xlink:href="#s1"/>
<use transform="rotate(3)" xlink:href="#s1"/>
<use transform="rotate(4)" xlink:href="#s1"/>
<use transform="rotate(5)" xlink:href="#s1"/>
<use transform="rotate(6)" xlink:href="#s1"/>
<use transform="rotate(7)" xlink:href="#s1"/>
<use transform="rotate(8)" xlink:href="#s1"/>
<use transform="rotate(9)" xlink:href="#s1"/>
<use transform="rotate(10)" xlink:href="#s1"/>
</symbol>
<symbol id="s3">
<use transform="rotate(1)" xlink:href="#s2"/>
<use transform="rotate(2)" xlink:href="#s2"/>
<use transform="rotate(3)" xlink:href="#s2"/>
<use transform="rotate(4)" xlink:href="#s2"/>
<use transform="rotate(5)" xlink:href="#s2"/>
<use transform="rotate(6)" xlink:href="#s2"/>
<use transform="rotate(7)" xlink:href="#s2"/>
<use transform="rotate(8)" xlink:href="#s2"/>
<use transform="rotate(9)" xlink:href="#s2"/>
<use transform="rotate(10)" xlink:href="#s2"/>
</symbol>
<symbol id="s4">
<use transform="rotate(1)" xlink:href="#s3"/>
<use transform="rotate(2)" xlink:href="#s3"/>
<use transform="rotate(3)" xlink:href="#s3"/>
<use transform="rotate(4)" xlink:href="#s3"/>
<use transform="rotate(5)" xlink:href="#s3"/>
<use transform="rotate(6)" xlink:href="#s3"/>
<use transform="rotate(7)" xlink:href="#s3"/>
<use transform="rotate(8)" xlink:href="#s3"/>
<use transform="rotate(9)" xlink:href="#s3"/>
<use transform="rotate(10)" xlink:href="#s3"/>
</symbol>
<symbol id="s5">
<use transform="rotate(1)" xlink:href="#s4"/>
<use transform="rotate(2)" xlink:href="#s4"/>
<use transform="rotate(3)" xlink:href="#s4"/>
<use transform="rotate(4)" xlink:href="#s4"/>
<use transform="rotate(5)" xlink:href="#s4"/>
<use transform="rotate(6)" xlink:href="#s4"/>
<use transform="rotate(7)" xlink:href="#s4"/>
<use transform="rotate(8)" xlink:href="#s4"/>
<use transform="rotate(9)" xlink:href="#s4"/>
<use transform="rotate(10)" xlink:href="#s4"/>
</symbol>
<symbol id="s6">
<use transform="rotate(1)" xlink:href="#s5"/>
<use transform="rotate(2)" xlink:href="#s5"/>
<use transform="rotate(3)" xlink:href="#s5"/>
<use transform="rotate(4)" xlink:href="#s5"/>
<use transform="rotate(5)" xlink:href="#s5"/>
<use transform="rotate(6)" xlink:href="#s5"/>
<use transform="rotate(7)" xlink:href="#s5"/>
<use transform="rotate(8)" xlink:href="#s5"/>
<use transform="rotate(9)" xlink:href="#s5"/>
<use transform="rotate(10)" xlink:href="#s5"/>
</symbol>
<symbol id="s7">
<use transform="rotate(1)" xlink:href="#s6"/>
<use transform="rotate(2)" xlink:href="#s6"/>
<use transform="rotate(3)" xlink:href="#s6"/>
<use transform="rotate(4)" xlink:href="#s6"/>
<use transform="rotate(5)" xlink:href="#s6"/>
<use transform="rotate(6)" xlink:href="#s6"/>
<use transform="rotate(7)" xlink:href="#s6"/>
<use transform="rotate(8)" xlink:href="#s6"/>
<use transform="rotate(9)" xlink:href="#s6"/>
<use transform="rotate(10)" xlink:href="#s6"/>
</symbol>
<symbol id="s8">
<use transform="rotate(1)" xlink:href="#s7"/>
<use transform="rotate(2)" xlink:href="#s7"/>
<use transform="rotate(3)" xlink:href="#s7"/>
<use transform="rotate(4)" xlink:href="#s7"/>
<use transform="rotate(5)" xlink:href="#s7"/>
<use transform="rotate(6)" xlink:href="#s7"/>
<use transform="rotate(7)" xlink:href="#s7"/>
<use transform="rotate(8)" xlink:href="#s7"/>
<use transform="rotate(9)" xlink:href="#s7"/>
<use transform="rotate(10)" xlink:href="#s7"/>
</symbol>
<symbol id="s9">
<use transform="rotate(1)" xlink:href="#s8"/>
<use transform="rotate(2)" xlink:href="#s8"/>
<use transform="rotate(3)" xlink:href="#s8"/>
<use transform="rotate(4)" xlink:href="#s8"/>
<use transform="rotate(5)" xlink:href="#s8"/>
<use transform="rotate(6)" xlink:href="#s8"/>
<use transform="rotate(7)" xlink:href="#s8"/>
<use transform="rotate(8)" xlink:href="#s8"/>
<use transform="rotate(9)" xlink:href="#s8"/>
<use transform="rotate(10)" xlink:href="#s8"/>
</symbol>
<symbol id="s10">
<use transform="rotate(1)" xlink:href="#s9"/>
<use transform="rotate(2)" xlink:href="#s9"/>
<use transform="rotate(3)" xlink:href="#s9"/>
<use transform="rotate(4)" xlink:href="#s9"/>
<use transform="rotate(5)" xlink:href="#s9"/>
<use transform="rotate(6)" xlink:href="#s9"/>
<use transform="rotate(7)" xlink:href="#s9"/>
<use transform="rotate(8)" xlink:href="#s9"/>
<use transform="rotate(9)" xlink:href="#s9"/>
<use transform="rotate(10)" xlink:href="#s9"/>
</symbol>
<symbol id="s11">
<use transform="rotate(1)" xlink:href="#s10"/>
<use transform="rotate(2)" xlink:href="#s10"/>
<use transform="rotate(3)" xlink:href="#s10"/>
<use transform="rotate(4)" xlink:href="#s10"/>
<use transform="rotate(5)" xlink:href="#s10"/>
<use transform="rotate(6)" xlink:href="#s10"/>
<use transform="rotate(7)" xlink:href="#s10"/>
<use transform="rotate(8)" xlink:href="#s10"/>
<use transform="rotate(9)" xlink:href="#s10"/>
<use transform="rotate(10)" xlink:href="#s10"/>
</symbol>
<symbol id="s12">
<use transform="rotate(1)" xlink:href="#s11"/>
<use transform="rotate(2)" xlink:href="#s11"/>
<use transform="rotate(3)" xlink:href="#s11"/>
<use transform="rotate(4)" xlink:href="#s11"/>
<use transform="rotate(5)" xlink:href="#s11"/>
<use transform="rotate(6)" xlink:href="#s11"/>
<use transform="rotate(7)" xlink:href="#s11"/>
<use transform="rotate(8)" xlink:href="#s11"/>
<use transform="rotate(9)" xlink:href="#s11"/>
<use transform="rotate(10)" xlink:href="#s11"/>
</symbol>
</defs>
<use transform="translate(100,100)" xlink:href="#s12"/>
</svg>
Re[4]: Немного полезных ссылок
От: Shtole  
Дата: 15.08.22 13:09
Оценка:
Здравствуйте, kov_serg, Вы писали:

S>>А есть вообще хоть один вменяемый WYSIWYG-редактор чего угодно? Профессионалы не пользуются WYSIWYG. В этом дао

_>Вы аниматорам это расскажите.

Смотря про каких аниматоров вы говорите. Если про тех, которые «Рика и Морти» анимируют, про этих я ничего не знаю. А если про анимации для UI, то я их сам постоянно делаю.

_>Сколько fps у вас показывает такой svg?


Так а в чём претензия-то именно к SVG? Что он позволяет повеситься прямо через markup, не требуя явного вызова алгоритма? По мне, так это гибкость.
Do you want to develop an app?
Re: Немного полезных ссылок
От: Baiker  
Дата: 15.08.22 21:25
Оценка: :))
Здравствуйте, Shtole, Вы писали:

S>После долгого периода неприятия, я постиг, наконец, дао SVG


И таки шо? Кричать теперь об этом? Можно подумать, здесь кто-то не знает, что SVG — текстовый формат и в нём можно выежопываться.
На деле, SVG так и остался пятым колесом веба — вроде бы кто-то где-то использует, но я как-то не вижу особого победоносного шествия этого формата.
То, что дряхлые деды перед "зелёно-текстовым монитором" придумали "красивую вёрстку", используя текст и теги, ещё не делает эту идею идеальной для всего.
Собственно, ТОЛЬКО вебсайты и страдают этой хуанитой — делать ВИЗУАЛЬНЫЕ вещи допотопным редактированием текста.
Возьмите любую редакцию любого журнала — вы там не найдёте идиотов, просирающих время на доводку DIV'ов и flexible layout. Там всё куда прозаичнее и нагляднее — вся линейка Adobe или QuarkXPress (мне кварк тоже очень зашёл). Визуально набросал блоков, выровнял, оформил — получите вёрстку для типографии. Всё. И хоть ты весь РСДН распиши своим СВГ, он нахрен там не нужон! (как и в вебе, собственно)
Re[2]: Немного полезных ссылок
От: vsb Казахстан  
Дата: 15.08.22 21:40
Оценка:
Здравствуйте, Baiker, Вы писали:

S>>После долгого периода неприятия, я постиг, наконец, дао SVG


B>И таки шо? Кричать теперь об этом? Можно подумать, здесь кто-то не знает, что SVG — текстовый формат и в нём можно выежопываться.

B>На деле, SVG так и остался пятым колесом веба — вроде бы кто-то где-то использует, но я как-то не вижу особого победоносного шествия этого формата.
B>То, что дряхлые деды перед "зелёно-текстовым монитором" придумали "красивую вёрстку", используя текст и теги, ещё не делает эту идею идеальной для всего.
B>Собственно, ТОЛЬКО вебсайты и страдают этой хуанитой — делать ВИЗУАЛЬНЫЕ вещи допотопным редактированием текста.

Никто SVG в своём уме не редактирует текстом.

B>Возьмите любую редакцию любого журнала — вы там не найдёте идиотов, просирающих время на доводку DIV'ов и flexible layout. Там всё куда прозаичнее и нагляднее — вся линейка Adobe или QuarkXPress (мне кварк тоже очень зашёл). Визуально набросал блоков, выровнял, оформил — получите вёрстку для типографии. Всё.


А для айфона, андроида, восьмого айфона, айпада и ещё миллиона разных разрешений и экранов кто будет выравнивать? Пушкин?

Вёрстка для фиксированного размера никому не нужна.

> И хоть ты весь РСДН распиши своим СВГ, он нахрен там не нужон! (как и в вебе, собственно)


В вебе он уже давно обосновался и альтернатив ему нет. По-мне он тоже избыточен, ну что поделаешь, по крайней мере что надо — есть, и на том спасибо.
Re[2]: Немного полезных ссылок
От: Shtole  
Дата: 16.08.22 12:56
Оценка: +1 :)
Здравствуйте, Baiker, Вы писали:

B>И таки шо? Кричать теперь об этом? Можно подумать, здесь кто-то не знает, что SVG — текстовый формат и в нём можно выежопываться.

B>На деле, SVG так и остался пятым колесом веба — вроде бы кто-то где-то использует, но я как-то не вижу особого победоносного шествия этого формата.
B>То, что дряхлые деды перед "зелёно-текстовым монитором" придумали "красивую вёрстку", используя текст и теги, ещё не делает эту идею идеальной для всего.
B>Собственно, ТОЛЬКО вебсайты и страдают этой хуанитой — делать ВИЗУАЛЬНЫЕ вещи допотопным редактированием текста.
B>Возьмите любую редакцию любого журнала — вы там не найдёте идиотов, просирающих время на доводку DIV'ов и flexible layout. Там всё куда прозаичнее и нагляднее — вся линейка Adobe или QuarkXPress (мне кварк тоже очень зашёл). Визуально набросал блоков, выровнял, оформил — получите вёрстку для типографии. Всё. И хоть ты весь РСДН распиши своим СВГ, он нахрен там не нужон! (как и в вебе, собственно)

Такого я ещё не читал.

Но если меня спросить, кто больше не нужен — HTML или Baiker — я уверенно поставлю на Baiker'а.
Do you want to develop an app?
Re[3]: Немного полезных ссылок
От: Baiker  
Дата: 19.08.22 16:47
Оценка:
Здравствуйте, vsb, Вы писали:

vsb>Никто SVG в своём уме не редактирует текстом.


А Shtole хвалится, что можно генерить как текст!

допилить готовое изображение точечными вставками какого-нибудь stroke='white' stroke-width='0.5'


B>>Возьмите любую редакцию любого журнала — вы там не найдёте идиотов, просирающих время на доводку DIV'ов и flexible layout. Там всё куда прозаичнее и нагляднее — вся линейка Adobe или QuarkXPress (мне кварк тоже очень зашёл). Визуально набросал блоков, выровнял, оформил — получите вёрстку для типографии. Всё.


vsb>А для айфона, андроида, восьмого айфона, айпада и ещё миллиона разных разрешений и экранов кто будет выравнивать? Пушкин?

vsb>Вёрстка для фиксированного размера никому не нужна.

Спорный момент, где подымается древняя как Зло проблема — что такое HTML — приложение или вёрстка? Для приложений — слишком убого, громоздко, неуклюже. Для вёрстки — слишком убого, громоздко, неуклюже. Выбери любой пункт.
Если говорить о вёрстке, то практически БЕЗ РАЗНИЦЫ, на чём ты её смотришь — открываешь PDF-ку и можешь зуммировать её хоть до бактерий. И да, PDF — фиксированная вёрстка.
Ну а приложения... это просто проклятие писать их на HTML/JS.

>> И хоть ты весь РСДН распиши своим СВГ, он нахрен там не нужон! (как и в вебе, собственно)


vsb>В вебе он уже давно обосновался и альтернатив ему нет. По-мне он тоже избыточен, ну что поделаешь, по крайней мере что надо — есть, и на том спасибо.


Именно! А кто виноват? Правильно! Старые дедули, которые кроме тегов ничего и не видели. Хотя очевидно, что для "текстовой графики" как нельзя лучше подходит язык из WPF (для path) "M10,R200" и т.п.
Тут опять же надо тщательно подходить к вопросу: хочешь ли ты сверхкомпактный язык для простой графики (нарисовать,залить,выпитьсмасштабировать) или мы переходим к тяжёлой артиллерии типа "как в фотошопе, только командами". И получается, что SVG ни там не победил, и тут пролошарил.

Не надо ещё забывать, что куча "тего-языков" возникла на волне XML-ХАЙПА — когда разгорячённые умы грезили, что во всём мире победит XML. Оказалось, XML крайне избыточен, капризен к символам, категорически лажает с бинарными данными, неуклюж в программной обработке, неоднозначен (у каждого свой формат) и в результате этого монстра тихо и незаметно выдавил JSON! Вот те и SVG.
Re[4]: Немного полезных ссылок
От: vsb Казахстан  
Дата: 19.08.22 16:56
Оценка:
Здравствуйте, Baiker, Вы писали:

vsb>>Никто SVG в своём уме не редактирует текстом.


B>А Shtole хвалится, что можно генерить как текст!

B>

B>допилить готовое изображение точечными вставками какого-нибудь stroke='white' stroke-width='0.5'


Ну это редкость. Я тоже руками рисую на svg в блокноте, но я упоротый. Таких можно считать, что нет.

B>Спорный момент, где подымается древняя как Зло проблема — что такое HTML — приложение или вёрстка? Для приложений — слишком убого, громоздко, неуклюже. Для вёрстки — слишком убого, громоздко, неуклюже. Выбери любой пункт.


В 2022 году HTML+CSS позволяет рисовать интерфейс приложений и делать вёрстку, его возможностей для этого вполне хватает. Это утверждение где-то из эпохи HTML 4+CSS 2. Сейчас с grid, flex, кучей семантических тегов всё стало абсолютно адекватно. Ну разве что довольно сложно, да, не все фронтэндеры даже список возможностей современного HTML+CSS знают, раньше всё проще было.

B>Если говорить о вёрстке, то практически БЕЗ РАЗНИЦЫ, на чём ты её смотришь — открываешь PDF-ку и можешь зуммировать её хоть до бактерий. И да, PDF — фиксированная вёрстка.


Шоб тебе всю жизнь читать свёрстанные в A4 статьи на маленьком айфоне. Зуммируя до бактерий. Адобе даже ИИ придумала использовать, чтобы хоть как-нибудь читать PDF на телефоне (оно там как-то распознаёт вёрстку и пытается переверстать под мобильный размер автоматически).

B>Ну а приложения... это просто проклятие писать их на HTML/JS.


Да нет никакого проклятия. Большинство новых приложений пишут на Electron, с тем самым HTML+JS. При том, что вроде альтернатив хватает.

vsb>>В вебе он уже давно обосновался и альтернатив ему нет. По-мне он тоже избыточен, ну что поделаешь, по крайней мере что надо — есть, и на том спасибо.


B>Именно! А кто виноват? Правильно! Старые дедули, которые кроме тегов ничего и не видели. Хотя очевидно, что для "текстовой графики" как нельзя лучше подходит язык из WPF (для path) "M10,R200" и т.п.

B>Тут опять же надо тщательно подходить к вопросу: хочешь ли ты сверхкомпактный язык для простой графики (нарисовать,залить,выпитьсмасштабировать) или мы переходим к тяжёлой артиллерии типа "как в фотошопе, только командами". И получается, что SVG ни там не победил, и тут пролошарил.

B>Не надо ещё забывать, что куча "тего-языков" возникла на волне XML-ХАЙПА — когда разгорячённые умы грезили, что во всём мире победит XML. Оказалось, XML крайне избыточен, капризен к символам, категорически лажает с бинарными данными, неуклюж в программной обработке, неоднозначен (у каждого свой формат) и в результате этого монстра тихо и незаметно выдавил JSON! Вот те и SVG.


Ну я защищать SVG вряд ли буду, хоть и по другой причине. Но мой поинт в том, что не такой он и плохой. Можно было сделать лучше. Всё можно было сделать лучше, но и текущие реализации вполне хороши.

Радуйся, что CSS на XML не сделали. И JavaScript. А то вон XSLT у кого-то ума хватило же придумать.
Отредактировано 19.08.2022 16:59 vsb . Предыдущая версия .
Re[3]: Немного полезных ссылок
От: Baiker  
Дата: 19.08.22 16:58
Оценка:
Здравствуйте, vsb, Вы писали:

vsb>Вёрстка для фиксированного размера никому не нужна.


То-то я смотрю, что ни сайт, то отдельная вёрстка ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ! Что и есть ничто иное, как "мы заточили вёрстку под ваши убогие мобилочки".
Здесь мы приходим к неразрешимой проблеме — полной ортогональности мобильного и десктопного мира. Поэтому все эти "флексибл вёрстки" идут в зад сразу же — они и на десктопе просирают свободное пространство, и на мобилах куце сияют страничками. Здесь действительно нужно две абсолютно разных вёрстки. Более того — для мобил (где просто НЕТ РЕСУРСОВ для дебильных жабоскриптов и DOM-извращений) как нельзя лучше подошла бы именно PDF-модель — загружаешь документ с безумно оптимизированным(компактным) форматом и на мобилке аккуратно его разворачиваешь и показываешь безо всяких "динамических плюшек".
Re[4]: Немного полезных ссылок
От: vsb Казахстан  
Дата: 19.08.22 17:01
Оценка: +1
Здравствуйте, Baiker, Вы писали:

vsb>>Вёрстка для фиксированного размера никому не нужна.


B>То-то я смотрю, что ни сайт, то отдельная вёрстка ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ! Что и есть ничто иное, как "мы заточили вёрстку под ваши убогие мобилочки".


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

B>Здесь мы приходим к неразрешимой проблеме — полной ортогональности мобильного и десктопного мира. Поэтому все эти "флексибл вёрстки" идут в зад сразу же — они и на десктопе просирают свободное пространство, и на мобилах куце сияют страничками. Здесь действительно нужно две абсолютно разных вёрстки. Более того — для мобил (где просто НЕТ РЕСУРСОВ для дебильных жабоскриптов и DOM-извращений) как нельзя лучше подошла бы именно PDF-модель — загружаешь документ с безумно оптимизированным(компактным) форматом и на мобилке аккуратно его разворачиваешь и показываешь безо всяких "динамических плюшек".


Ты так говоришь, как будто всего 2 размера. Есть мобила. Есть мобила в альбомной ориентации. Есть планшет в двух ориентациях. Есть ноутбук. Есть 27" экран.
Re[5]: Немного полезных ссылок
От: Baiker  
Дата: 19.08.22 17:13
Оценка: :)
Здравствуйте, vsb, Вы писали:

vsb>В 2022 году HTML+CSS позволяет рисовать интерфейс приложений и делать вёрстку... Сейчас с grid, flex, кучей семантических тегов


Меньше всего, что я хочу — это возиться с "абстрактными тегами" для создания вполне конкретного UI. Причём априори опуская себя до наитупейшего уровня интерактивности "кликнул — получил". Винда давно бы сдохла, если б её GUI можно было бы сымитировать простым браузером. Интерфейс любой OS намного богаче и HTML надо гнать ссаными тряпками из софтостроения! Пусть дальше верстают хомепаги и идиотские SPA.

vsb>Шоб тебе всю жизнь читать свёрстанные в A4 статьи на маленьком айфоне


ыыыы Вот именно! Ещё один миф развенчан — НЕ ПОДХОДЯТ сраные мобилки ни для чего, кроме звонков! Ни читать неудобно, ни играть — разве что звонить, да музыку слушать. Так что вообще непонятно, зачем в соременном мире ТАК НЕИСТОВО топить за "а для мобилок у вас есть приложение?". НЕТ И НЕ БУДЕТ. И точка.


B>>Ну а приложения... это просто проклятие писать их на HTML/JS.


vsb>Да нет никакого проклятия. Большинство новых приложений пишут на Electron, с тем самым HTML+JS. При том, что вроде альтернатив хватает.


Вот именно из-за ушлёпского HTML никогда не буду писать во всяких Атомах. Для текста — Notepad++, для прог — VS.


vsb>Ну я защищать SVG вряд ли буду, хоть и по другой причине. Но мой поинт в том, что не такой он и плохой.


Я солидарен, что "плохой" тут неуместное прилагательное — скорее, "несуразный". Примерно как 3-метровая лопата для копки картошки — умом-то ты понимаешь, что можно выкопать плоды даже на 3-метровой глубине, но практически никому это нафиг не нужно, но ты всё равно держишь 3 метровый черенок, МУЧАЕШЬСЯ, проклинаешь её создателя, но другого инструмента у тебя нет.

vsb>Радуйся, что CSS на XML не сделали. И JavaScript. А то вон XSLT у кого-то ума хватило же придумать.


Вот! Говорю же — SVG практически живой труп, он не нужен в 21 веке. HTML сам себя убил. JS — вообще похабщина от ИТ. Мир требует серьёзных перемен, а нам вместо этого анально вводят webassembly — ещё худшее зло.
Re[6]: Немного полезных ссылок
От: vsb Казахстан  
Дата: 19.08.22 17:18
Оценка:
Здравствуйте, Baiker, Вы писали:

vsb>>Шоб тебе всю жизнь читать свёрстанные в A4 статьи на маленьком айфоне


B>ыыыы Вот именно! Ещё один миф развенчан — НЕ ПОДХОДЯТ сраные мобилки ни для чего, кроме звонков! Ни читать неудобно, ни играть — разве что звонить, да музыку слушать. Так что вообще непонятно, зачем в соременном мире ТАК НЕИСТОВО топить за "а для мобилок у вас есть приложение?". НЕТ И НЕ БУДЕТ. И точка.


Ну у тебя не будет, а у конкурента будет. Я вот еду на работу и сижу в видеосовещании на работе, слушаю, чего там говорят. Удобно. Не было бы этого — пришлось бы вставать на полчаса раньше, неудобно.

B>>>Ну а приложения... это просто проклятие писать их на HTML/JS.


vsb>>Да нет никакого проклятия. Большинство новых приложений пишут на Electron, с тем самым HTML+JS. При том, что вроде альтернатив хватает.


B>Вот именно из-за ушлёпского HTML никогда не буду писать во всяких Атомах. Для текста — Notepad++, для прог — VS.


Знаешь, я иногда мечтаю найти работу, где я буду писать на C консольные программки. Чтобы купить ноутбук с маленьким экраном, поставить туда OpenBSD без всякой графики и сидеть себе в консоли, печатать в vim-е чего-нибудь. Но реальность такая, что платят мне за то, чтобы на "ушлёпском HTML" делать сервисы, которые будут приносить компании деньги. И тут я могу уволиться и отрицать эту реальность, но когда деньги закончатся, придётся писать на том, что востребовано.

vsb>>Радуйся, что CSS на XML не сделали. И JavaScript. А то вон XSLT у кого-то ума хватило же придумать.


B>Вот! Говорю же — SVG практически живой труп, он не нужен в 21 веке. HTML сам себя убил. JS — вообще похабщина от ИТ. Мир требует серьёзных перемен, а нам вместо этого анально вводят webassembly — ещё худшее зло.


Да нет там никакого зла. Некоторые редкие юз-кейсы в браузере станут работать пошустрей, чем раньше, и всё. Ничего не изменится.
Re[5]: Немного полезных ссылок
От: Baiker  
Дата: 19.08.22 17:30
Оценка:
Здравствуйте, vsb, Вы писали:

vsb>Здравствуйте, Baiker, Вы писали:


vsb>>>Вёрстка для фиксированного размера никому не нужна.


B>>То-то я смотрю, что ни сайт, то отдельная вёрстка ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ! Что и есть ничто иное, как "мы заточили вёрстку под ваши убогие мобилочки".


vsb>Не знаю, где ты смотришь


Шутишь штоле?! Самый посещаемый сайт! m.facebook.com — вот вам и "мобилочки".

vsb> Из моей практике — при использовании правильных фреймворков про это чаще всего даже думать не надо


Это если есть мозг, квалификация и знание о "правильном фрэймворке". 99% сайтов про это и не слышали! Студота запиливает сайт, искусственно заужает (чтобы с мобилочек тоже смотрелось) и ****як — в продакшн!

B>>Здесь мы приходим к неразрешимой проблеме — полной ортогональности мобильного и десктопного мира


vsb>Ты так говоришь, как будто всего 2 размера. Есть мобила. Есть мобила в альбомной ориентации. Есть планшет в двух ориентациях. Есть ноутбук. Есть 27" экран.


Грубо говоря, всего 2 размера и есть! Нормальный (24"+ на десктопном монике) и "всё остальное мобильное барахло". Смарт — там гонки DPI (от 200 до 600). При том, что экраны — убогие 5-6". Очевидно, что хоть 2000 ДПИ туда воткни, ты не станешь видеть больше. Обычный закон оптики и строение глаза. Планшеты — то же самое, просто размеры чуть больше. И тот же геморой со скролами, зумами и т.п.
Возможно, эти мобильные убожества и представляли бы какую-то ценность, будь у нас реально flexible стандарт HTML 1.0 — где из вёрстки был болд, италик, картинка и ссылка. Тогда любую статью можно было бы раззумить (или увеличить шрифт) без боязни, что весь контент уплывёт за экран. Но разве современных веб-макак остановишь! Они даже ссылки делают через span и onClick!! Про вёрстку, удобную для ВСЕХ экранов, эти "веб-джамшуты" не думают вообще — учитель сказал flex, значит флекс и 3 мегабайта скриптов!
Re[6]: Немного полезных ссылок
От: vsb Казахстан  
Дата: 19.08.22 17:35
Оценка:
Здравствуйте, Baiker, Вы писали:

B>Шутишь штоле?! Самый посещаемый сайт! m.facebook.com — вот вам и "мобилочки".


facebook может написать хоть отдельную версию сайта для каждого разрешения от 160px до 1600px с шагом в 5 пикселей. Но большинство ограничено временем и бюджетом.

vsb>>Ты так говоришь, как будто всего 2 размера. Есть мобила. Есть мобила в альбомной ориентации. Есть планшет в двух ориентациях. Есть ноутбук. Есть 27" экран.


B>Грубо говоря, всего 2 размера и есть! Нормальный (24"+ на десктопном монике) и "всё остальное мобильное барахло". Смарт — там гонки DPI (от 200 до 600). При том, что экраны — убогие 5-6". Очевидно, что хоть 2000 ДПИ туда воткни, ты не станешь видеть больше. Обычный закон оптики и строение глаза. Планшеты — то же самое, просто размеры чуть больше. И тот же геморой со скролами, зумами и т.п.


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

B>Возможно, эти мобильные убожества и представляли бы какую-то ценность, будь у нас реально flexible стандарт HTML 1.0 — где из вёрстки был болд, италик, картинка и ссылка. Тогда любую статью можно было бы раззумить (или увеличить шрифт) без боязни, что весь контент уплывёт за экран. Но разве современных веб-макак остановишь!


Эта проблема частично решается костылями вроде Reader Mode. А так, конечно, да, бывает зайдешь и тебе на весь экран каких-нибудь "окон" насуёт. Ну что поделаешь, тьюринг-полные языки, они такие.
Re[7]: Немного полезных ссылок
От: Baiker  
Дата: 19.08.22 17:36
Оценка:
Здравствуйте, vsb, Вы писали:

vsb> Я вот еду на работу и сижу в видеосовещании на работе, слушаю, чего там говорят


Надеюсь, в наушниках??

Тут возражений никаких и нет — какие-то ТОЧЕЧНЫЕ применения у мобил есть, хотя я мало представляю себе продуктивный разговор, сидя в трамвае! Но в целом удобство мобил сильно переоценено.

vsb>Да нет там никакого зла. Некоторые редкие юз-кейсы в браузере станут работать пошустрей, чем раньше, и всё. Ничего не изменится.


Нет, вебассембля спрячет всё унутрях + выполнение хрен знает чего с фиг знает какими правами. Сейчас хотя бы можно отрезать отдельные скрипты, а с "веб архивом" ты беспомощно погрязнешь в рекламе и вирусах.
Re[8]: Немного полезных ссылок
От: vsb Казахстан  
Дата: 19.08.22 17:40
Оценка:
Здравствуйте, Baiker, Вы писали:

B>Нет, вебассембля спрячет всё унутрях + выполнение хрен знает чего с фиг знает какими правами.


Права у вебассебмли ровно те же, что и у жаваскрипта, отличий ровно 0. На самом деле по факту даже меньше, для любого API нужно дергать обертку на JS, по крайней мере сейчас. Ничего унутрях там не прячется, по крайней мере прячется не больше, чем у минифицированного JS. wasm-модуль так же видно в developer tools, его можно посмотреть в дизассемблированном виде и при некоторой привычке он читается даже лучше, чем обфусцированный JS (если он сам не обфусцирован, конечно), не такой уж он и низкоуровневый. Исключительно вопрос привычки.

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


Да ровно так же можно всё отрезать, оно же не из астрала грузится, а с конкретных URL-ов.

В рекламе погрязнем, когда начнут сайт рендерить жаваскриптом в canvas. Но вроде пока не начали.
Отредактировано 19.08.2022 17:42 vsb . Предыдущая версия . Еще …
Отредактировано 19.08.2022 17:41 vsb . Предыдущая версия .
 
Подождите ...
Wait...
Пока на собственное сообщение не было ответов, его можно удалить.