https://www.fluidplayer.com/

Есть что удобнее хромовского F12 для отладки фронтенда? Может, специальный хромобилд или лисобилд?

ｷﾀ━━━(ﾟ∀ﾟ)━━━!!

https://purecss.io/
Всё ясно из названия.

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

http://qaru.site/questions/11599/retrieve-the-position-xy-of-an-html-element
http://htmlbook.ru/samlayout/blochnaya-verstka/pozitsionirovanie-elementov
http://javascript.ru/ui/offset
https://learn.javascript.ru/coordinates

https://sohabr.net/habr/post/340502/

https://habr.com/ru/post/429920/>>21106

>>20884
Смотря что нужно обнаружить. Наследование алертом не выявишь, например.

>>20851
Кстати, не смешно. Хороший devtool был только у Presto.

З.Ы.: Вот вам Хром под ХР от весёлых китайцев, 61-й штоле. Новее не найдёте: http://www.maxthon.com/

>>21191
Я так и не разобрался, чего они там наворотили и зачем это надо. Да и не думаю, что браузеру настолько нужна поддержка из облака.

>>21192
Прикрутили синхронизацию к облаку, выделили там юзеру пять гигов. Можешь сохранять свои закладки, заметки и файлы и иметь к ним доступ с любого утюга, на котором этот браузер сможет запуститься. То же, что и везде, в общем. Основное для меня преимущество — это работа под XP-шку.

Подкину.
https://colintoh.com/blog/display-table-anti-hero
https://news.ycombinator.com/item?id=8514717

Ну и такой себе челлендж: сверстайте резиновый трёхпанельник без использования calc и vh.

>>21259
Ахаха. Таблицы (потому что ты не включил в условие прибитый футер). Святой грааль такой святой грааль

>>21262
А независимый скролл колонкам ты тоже таблицами сделаешь?

>>21259
Я конечно не эксперт, но флексы ведь: хоть сто панелей делай.

>>21267
И получишь то же самое, что и с table-ами — страница растянется по высоте самой высокой колонки и уедет вместе с футером вниз за край окна.

Такой себе челлендж, если нормально формулировать, то здесь >>21259 должно было «сверстайте резиновый трёхпанельник, с хедером и футером, с независимым скроллом колонок и без скролла окна», но мне проще было картинку.

>>21259
Easy: display:table
Medium: display:flex
Hard: position:fixed

Более интересный тест на пердуна: сделать таблицу с выравниванием элементов с однопиксельной рамкой без CSS и чтоб работало во всех браузерах.

>>21265
А overflow: scroll отменили?

>>21270
А в каком месте у тебя overflow будет?

>>21268
Так шапку и подвал сделать не флексами и fixed. А в колоки - overflow.

>>21272
и высоту выставить фиксированную
только не бейте

>>21259
Что-то вроде этого. Но, насколько я понял, нужно и от вертикальной прокрутки страницы избавиться?

>>21274
даже позиционирование не понадобилось

>>21269
>Более интересный тест на пердуна...
Ты меня поразил в самое сердце, старый развратник, — уже никто не помнит, что у table-ов такие аттрибуты есть. Теперь ты обязан на мне жениться.

>>21273
И под каждое стандартное разрешение сделать свой CSS...
>только не бейте
Сам об мобилы убьёшься. По идее, если в левой колонке будет меню, то для мобил его надо убирать в иконку в футере; правую же колонку убирать вовсе.

>>21274
Основная сложность в этом. Обычно сейчас все используют vh и calc.

>>21275
У меня под Presto и новее проще не получилось: https://pastebin.com/y1xxp71P Отступы тоже сначала процентами были, но разметка едет, хотя и не сильно.

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

>>21269
>Hard: position:fixed
Challenge accepted.
https://jsfiddle.net/uyzwf9et

>>21259
Я так понял, что таблица это самый простой и экономный способ сделать такой макет? А раз результат одинаков, то зачем писать больше?

>>21278
Осталось понять, как без flex-а добавлять туда компоненты. Одна девочка пробовала, но макет разваливается.

>>21281
Только на модерновых браузерах. Причин несколько:
1. Рендеринг таблиц сам по себе — это NP-полная задача, на старых браузерах они дико тормозили.
2. С дефолтным алгоритмом планировки любое изменение в таблице приводит к пересчёту всей таблицы.
3. display: table старыми браузерами поддерживался через известное место.

Юмор, очевидно, в том, что потребовалось практически пятнадцать лет для того, чтобы ты мог верстать таблицами. Прогресс, однако!

Ну и ещё подобного юмора:
— прогресс дошел до очевидной вещи: px <=> pt
— вместо дедовского position:fixed;top:0;bottom:0; можно написать height:100vh; https://css-tricks.com/fun-viewport-units/

>>20800
https://github.com/FieryLionite/Stretchy-Streamer
https://www.reddit.com/r/unbirth/comments/afe8eb/stretchy_streamer_a_simple_interactive_game_im/

https://stackoverflow.com/questions/5183731/is-using-div-spacers-a-bad-practice
Вкратце — да. По тем же причинам, почему и таблицы/списки тэгами. Никогда так не делайте.

>>21304
А как мне делать таблицы и списки без тэгов? Я не умею.

https://userstyles.org/styles/147936/windows-95-for-iichan
https://userstyles.org/styles/95033/youtube-nyan-cat-progress-bar-video-player-theme

https://docs.npmjs.com/misc/coding-style.html

https://gifer.com/en/8B70

https://www.youtube.com/watch?v=Mus_vwhTCq0

https://chrome.google.com/webstore/detail/video-downloadhelper/lmjnegcaeklhafolokijcfjliaokphfk + https://chrome.google.com/webstore/detail/adobe-hds-hls-video-saver/fkbfbopjoockkhmfnchmacgpmkofcfaj

>>20223
Decentraleyes - Заменяет js скрипты, например всякие angular.js, css стили, etc, с анальных CDN серверов на локальные файлы. Позволяет еще немного уменьшить анальный зонд и чуть ускорить интернеты.

Хромобраузеры: https://chrome.google.com/webstore/detail/decentraleyes/ldpochfccmkkmhdbclfhpagapcfdljkj
FF: https://addons.mozilla.org/firefox/addon/decentraleyes/

Не знаю куда это запостить, но это вроде как относится к веб-разработке. Ну и в /b/ кто-то жаловался.

Неизвестно, зачем это сделано, но по крайней мере эта Лиса на этой системе по умолчанию похоже стремится сожрать всю доступную память.

>>21740
Помогло, но частично. В свап не лезет, однако при AFK-е часов на пять-шесть всё-равно занимает всю RAM, и система начинает свапится. Начинаешь Лису тормошить — она тут же память высвобождает делая вид, что эти узурпированные 500 MB никому не были нужны.

Так что, если Лиса у вас жрёт гигабайты, это не значит, что у вас что-то течёт; просто она так своеобразно работает с памятью.

>>21740
У меня такое наблюдалось в palemoon некоторое время назад, когда его было открыто на 5 окон и, соответственно, примерно 50-100 вкладок больше, чем сейчас.
Я подозреваю, что это какой-то конкретный сайт. Хотя сайты были, вроде бы, девелоперские и всё такое. Но кто конкретно из них при отсутствии активности начинал майнить (или что он там делал) я, увы, не отследил. Отказывалась отображаться с выключенным js примерно половина.

>>21751
>на 5 окон и, соответственно, примерно 50-100 вкладок больше
(заглянув в историю сессий)
А, нет, вру. Было 15 окон и 580 вкладок. Сейчас 9 окон и 340 вкладок.

>>21746
Подкрутила ещё пороги, буду смотреть, как дальше вести себя будет. Таким образом, сейчас в about:config

memory.free_dirty_pages = true;

memory.low_physical_memory_threshold_mb = 128;

>>21751
Я тоже сначала так полагала; более того, грешила на своё поделие, поскольку загрузка CPU в норме, без странных выбросов. Но нет. Если Лису растормошить, память высвобождается вся сразу, — это характерно для массированной деаллокации; GC бы тупил ещё какое-то время, к тому же сама сборка мусора «дедом Мазаем» — дело довольно затратное по CPU. Если при выжратой RAM установить в настройках memory.free_dirty_pages в true, память также высвобождается вся сразу. Такие дела. Походу, или в аллокаторе баг, или он забирает память впрок; ну или это сделано умышленно, чтоб разницы с новой Лисой была не так заметна.

>>21754
…И я нашел виновника.

Как можно видеть из пикчи — это ICU, Unicode and globalization support library.
Скрин (about:memory) отражает ситуацию, когда несколько сотен вкладок бездействовали всю ночь.
После GC (каковой и случился в процессе выполнения measure, однако результат оного показал ситуацию до этого) занимаемая ICU память сбросилась с 8Gb до 3Mb. После еще часа бездействия — это было уже 30Mb.

И да, это palemoon. Имеется ли этот баг в последних версиях ванильной лисы — х/з. У луны, как наследницы всего старого кода — он, как можно видеть в наличии.

Если кто-нибудь возьмет на себя труд запилить официальный багрепорт — скажу ему большое спасибо. У меня самого руки до этого далеко не факт, что дойдут. По крайней мере — точно не в ближайшее время.

Отключалка надоедливых CSS3-анимаций в Хроме.
https://dev.webonomic.nl/how-to-disable-css-transforms-transistions-and-animations
manifest.json

{

   "manifest_version" : 2,

   "name" : "Animation disabler",

   "description" : "Disables CSS animations on web pages.",

   "version" : "1.0",

   "content_scripts" : [

      {

         "matches" : [

            "http://*/*",

            "https://*/*"

         ],

         "css" : [

            "user.css"

         ],

         "run_at" : "document_start"

      }

   ]

}

user.css

*, :before, :after {

   /*CSS transitions*/

   -o-transition-property:       none !important;

   -moz-transition-property:     none !important;

   -ms-transition-property:      none !important;

   -webkit-transition-property:  none !important;

   transition-property:          none !important;



   /*CSS animations*/

   -o-animation:                 none !important;

   -moz-animation:               none !important;

   -ms-animation:                none !important;

   -webkit-animation:            none !important;

   animation:                    none !important;

}

>>25669
Более вменяемая отключалка, так как на событиях от этих анимаций может висеть логика UI.

user.css

*, :before, :after {

   /*CSS transitions*/

   transition-delay:    0s !important; \n\

   transition-duration: 0s !important; \n\



   /*CSS animations*/

   animation-duration:        0s !important;

   animation-iteration-count: 1  !important;

}

>xdg-mime query filetype animated.png
<image/png
>xdg-mime query filetype animated.webp
<image/webp
И как же это понимать?

Три гадости, которые делают этот ваш Интернет недружелюбным и закрытым, и которые необходимо заблокировать:
— HTTP-заголовок ответа Content-Security-Policy;
— HTML-атрибут integrity;
— JS объект navigator.serviceWorker, конкретнее navigator.serviceWorker.register.

>>25725
А расскажи пожалуйста поподробнее, в частности про serviceWorker

>>25726
Content-Security-Policy позволяет серверу указать в ответе, что браузеру, который понимает этот заголовок, надо загружать и выполнять. HTML-атрибут integrity для тэга <link> содержит хэш-сумму загружаемого файла, будь это CSS или JS-скрипт. Вместе эта байда по сути просто не даёт тебе менять содержимое страницы, если ты что-то фильтруешь проксей, например, инжектишь в страницу свои скрипты и стили.

ServiceWorker — это JS-скрипт, который сайт устанавливает в поддерживающий их браузер, и который безпалевно работает в фоне, делая что-то непонятное: https://developers.google.com/web/fundamentals/primers/service-workers
Алсо
>Service worker is a programmable network proxy
Типично используется для обработки push-уведомлений, нетипично... ктож его знает.

>>25728
Спасибо