Задать вопрос

ImagineTables

Ответы

  • Продвинутые пользовательские стили сайтов, не ограниченные одним css?

    @ImagineTables
    Другой пример когда мне нужно применить какой то стиль к
    #responsive_page_template_content > div.page_content_ctn > div
    Если в теге
    #responsive_page_template_content > div.page_content_ctn > div > div > div
    есть искомое мной значение, будь то класс .class или текст [href="text"]


    body:has(#responsive_page_template_content > div.page_content_ctn > div > div > div.class[href="text"]) #responsive_page_template_content > div.page_content_ctn > div
{
…
}


    Скажем выделить цвет красным, если Красный. Тут уже нужно что-то более глубокое чем CSS.


    Обычно надо догадаться, какой принцип в структуре, и написать правильный селектор. Именно так и приходится делать, отключая баннеры в Яндекс.Почте, например, поскольку они генерируют классы и идентификаторы заново каждый раз и юблок не работает. Задача творческая и универсального ответа нет. (Кстати, они, судя по всему, начали бороться, определяя, что реклама не отобразилась и вставляя искусственные паузы в наказание).

    Опять же, помогает :has(), типа «среди детей такого-то поищи такого-то, чтобы у него был класс banner на любой глубине вложенности».
    Ответ написан
    Комментировать
    Комментировать

  • Как настроить английскую раскладку для русскоязычного пользователя в Windows?

    @ImagineTables
    1. Качаете Microsoft Keyboard Layout Creator (MSKLC). В данный момент ссылка на него такая: https://www.microsoft.com/en-us/download/details.a...

    2. Создаёте абсолютно любую раскладку, какая нужна. Для каждого языка (ru, en) — нужна отдельная раскладка.

    3. Компилируете. На выходе получается exe'шник.

    4. Устанавливаете в системе свою раскладку как главную для русского/английского языков. Удалить базовую раскладку не выйдет — при удалении она восстанавливается. Как ни странно, даже в Windows 11 это не мешает её игнорировать и всё работает как надо.

    Бонус. Опыт показал, что удобно добавить на Ctrl + верхние цифры всякую типографику: ❤«»€©–—•←→↓↑. Кроме того, можно повесить на Ctrl + пробел nbsp (удобно добавлять его вокруг тире при печати), на Ctrl + точку — многоточие (…), а в русской раскладке заменить запятую в цифроблоке на точку (как в английской), чтобы было удобно вводить десятичные дроби.
    Ответ написан
    8 комментариев
    8 комментариев

  • Не могу найти, где можно увеличить шрифт панели "Найти и изменить" в Visual Studio 2022?

    @ImagineTables
    Есть workaround. Ставьте кегль в настройках редактора в полтора раза меньше, а потом делайте zoom для документа 150%. Текст останется прежнего размера, а панель увеличится в полтора раза.

    А вообще, студия деградирует, конечно. Жаль, что остальное ещё хуже.
    Ответ написан
    1 комментарий
    1 комментарий

  • Различие скелета в пк версии и телефонной, как лучше всего делать такие вещи?

    @ImagineTables
    1. «по макету для десктопа и для мобильной версии расположение элементов сильно отличается» — подумайте, правильный ли это макет. (Или, скорее, правильная ли трактовка макета вами). Расположение элементов обычно ставят в зависимость от ширины экрана (при помощи media queries), а уже через неё — возникает разница между десктопом и мобилой.

    Если хочется сделать радикальное упрощение для мобил, сайт обычно пакуют в приложение вместе с webview.

    2. «Сначала сверстать десктопную версию, а затем — отдельный скелет под мобильную» — я бы так делать не стал. Более того, для меня это хороший критерий, чтобы понять, правильно или нет устроен «скелет». Если вы не можете один и тот же «скелет» по-разному представить для разных условий, значит структура недостаточно изолирована от отображения.

    Чтобы этого избежать, меньше пользуйтесь утилитами (классами типа w-100, d-none и т.д.), размечайте маркап семантически (классами типа «меню для юзера», «карточка того-то», «панель сего-то»), не вводите атрибуты для контроля за отображением, а отображение настраивайте строго через CSS.
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать нестандартную рамку?

    @ImagineTables
    border-image-slice не подойдёт?

    Вообще, эта техника в UI называется 9-split border. Я пользовался её кастомной имплементацией, но свойство выше должно точно так же решать проблему.
    Ответ написан
    Комментировать
    Комментировать

  • Как исправить создание иконок в трее Process Explorer'ом при автозагрузке?

    @ImagineTables Автор вопроса
    Кажется, нашёл решение.

    PE автозапускается хитрым способом: через таску, повешенную на триггер At user logon. У таски стоит highest privileges. (Похоже, это такой способ автозагрузки чего-нибудь с правами админа и не показывая диалог UAC. Надо взять на заметку).

    Речь идёт о том, что происходит, когда чекаешь пункт меню Run At Logon в PE — именно в этот момент и создаётся таска.

    Найти таску можно либо через Task Scheduler, либо утилитой Autoruns (найти запись для PE, выбрать в контекстном меню Jump to Entry…). Рекомендую Autoruns, и регулярно смотреть, что и как там грузится.

    Так вот, в свойствах таски переходим на вкладку триггеров, находим триггер At user logon, редактируем его и прописываем там задержку секунд в 10. И это лично для меня решило проблему гонок, несколько перезагрузок — иконки в трее каждый раз появляются.
    Ответ написан
    Комментировать
    Комментировать

  • В чём смысл делать приложения-прокладки?

    @ImagineTables
    Смысл для КОГО?

    Для вас, как для пользователя, смысл в том, что «сайт» будет хорошо заизолирован. Никаких межсайтовых кук, никакой проверки истории посещений через

    body:has(a[href="pornhub.com"]:visited) .mychecker
{
    backgound-image: url(drochit.png);
}


    и т.д. Правда, толку от этого немного, но всё равно приятно. (Если, конечно, основной рабочий браузер держать в нестандартном месте, чтобы напрямую там никто не ковырялся).

    Для разработчиков смысл в том, что:

    1. Фиксируется набор фич и багов, при изменении в будущих версиях браузера всё гарантированно будет работать без необходимости постоянно тестировать и подправлять клиентский код. (Уж как я ни стараюсь делать всё по стандартам, а через пару лет обновлений браузера то одно отвалится, то другое).
    2. Ресурсы можно плавно раскатывать по юзерам вместе с приложением, от сервера останется только API. Что удобно в организационном плане.
    3. Всё грузится мгновенно. Не только не надо больше думать про прекэширование, загрузочные оптимизации, но и вообще беспокоиться о размере картинок/аудио/видео/шрифтов/файлов с лицензиями и пр.
    4. В своей сборке браузера можно перенастроить политики т.н. «безопасности». Которые нужны, по сути, только чтобы не дать помешать впариванию рекламы.
    5. В свою сборку браузера можно включить любые аддоны. (Если есть готовый аддон с нужным функционалом, может оказаться проще использовать его as is).
    6. Главное — вы уверены, что видели весь код? Иногда надо сделать фичу-другую, которые имплементируются ТОЛЬКО через вызов OS API. А без них это будет приложение хуже классом.
    Ответ написан
    Комментировать
    Комментировать

  • В чём под Windows писать на Rust'е десктопные приложения?

    @ImagineTables Автор вопроса
    Забыл написать. В общем, остановился пока на rust-analyzer.vs (https://marketplace.visualstudio.com/items?itemNam...). Самое главное, что он делает — позволяет использовать полноценную студию (кто ценит студию за редактор, тот поймёт).

    Несколько примечаний для новичков.

    0. Поставьте все апдейты для студии. Поставьте Rust отсюда: https://rustup.rs/
    1. Создайте пустой проект при помощи cargo из командной строки. Затем откройте папку с проектом в студии командой Open Folder…. Плагин подхватит.
    2. Собирать проект можно через меню Build.
    3. Отладка в данный момент поломана (около месяца продолжается сие), на авторах плагина висят тикеты, есть шанс, что скоро поправят.
    4. Нужен второй плагин, TOML Editor (https://marketplace.visualstudio.com/items?itemNam...) для правки файла проекта.
    5. Настраивать табы-пробелы и прочие переносы надо не в Tools → Option… и далее в Text Editor → Rust (как мы привыкли), а прямо в настройках проекта (надо создать в корне проекта файл rustfmt.toml), потому что этот язык регламентирует форматирование. Курить настройки тут: https://rust-lang.github.io/rustfmt Дополнительно могут пригодиться директивы типа таких:

    #![allow(non_snake_case)]
#![allow(unused_parens)]

    6. Rustfmt не позволяет почти ничего, пока не переключишься на nightly канал. Это делается из командной строки.
    Ответ написан
    Комментировать
    Комментировать

  • Какие принципы нужно соблюдать при разработке фреймворков по типу Bootstrap/Tabler, UIKit и прочих?

    @ImagineTables
    Какие принципы должны лечь в основу создания CSS-кода


    Не писать CSS. Только препроцессор, только миксины.
    Ответ написан
    Комментировать
    Комментировать

  • Как в CSS остановить одну анимацию и сразу запустить вторую для одного элемента?

    @ImagineTables
    Если правильно понял вопрос, попробуйте это (придётся подписаться на событие focusin):

    // Resets CSS animation based on keyframes.
System.resetAnimation = function (elements)
{
	elements.forEach(element =>
	{
		element.style.animation = 'none';
		element.offsetHeight; // Trigger reflow.
		element.style.animation = null;
	});
}


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

    const map = $('.map');
map
	.css('--current-position-y', getComputedStyle(map[0]).backgroundPositionY)
	.css('--direction', position.y > 0 ? '-1' : '1') // Map is scrolled in opposite direction.
	.css('--speed', Math.abs(position.y).toString());

System.resetAnimation([map[0]]);


    @keyframes move-map-bg_map
{
	from
	{
		background-position-y: var(--current-position-y);
	}

	to
	{
		background-position-y: calc(var(--current-position-y) + var(--direction) * var(--city-map-size));
	}
}


    Выше показано, как одна анимация плавно переходит в другую, в данном случае — на лету меняется скорость и направление анимации фона.
    Ответ написан
    Комментировать
    Комментировать

  • Есть ли какой-нибудь заменитель pattern matching в Javascript/ECMAScript?

    @ImagineTables Автор вопроса
    В итоге, остановился на https://github.com/shuckster/match-iz

    Подкупило то, что “I've tried to, ahem, match the TC39 spec as closely as I could in anticipation of the hopeful day when I don't need to use it anymore”.

    foo(match(val)
(
	when(i => i == 0, 'none'),
	when(i => i > 0, 'up'),
	when(i => i < 0, 'down')
));
    Ответ написан
    Комментировать
    Комментировать

  • Как вернуть перетаскивание файлов на кнопки таскбара в Windows 11?

    @ImagineTables Автор вопроса
    Оказалось, что это поведение завязано на UAC (!!!).

    Включить можно через установку EnableLUA → 1 в HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Policies\System. (Требуется перезагрузка ОС, а не только Explorer).

    Если кто-то знает альтернативный таскбар или какой-то хак, посоветуйте, пожалуйста. До тех пор придётся мириться с UAC'ом facepalm.jpg
    Ответ написан
    Комментировать
    Комментировать

  • Как в файлах формата mhtml запретить переход по ссылкам?

    @ImagineTables
    1. Сохранить страницу не как mhtml, а как HTML с изображениями.
    2. Открыть сохранённый файл .htm в текстовом редакторе, найти все вхождения <a href="сайт">текст</a>, заменить их на текст. Если трудно, можно открыть в визуальном редакторе HTML, но я бы не стал.
    3. Открыть сохранённый файл в браузере, потом его сохранить как mhtml.
    Ответ написан
    Комментировать
    Комментировать

  • Чем и как вы тестируете WAI-ARIA?

    @ImagineTables Автор вопроса
    Немного глюковатое, но в целом полезное дополнение:

    https://chromewebstore.google.com/detail/Silktide%...

    Кроме того, поставил скрин-ридер JAWS (весит больше гига, однако), он глючит меньше, но не так удобен для тестирования.
    Ответ написан
    Комментировать
    Комментировать

  • Как добавить анимацию div?

    @ImagineTables
    А оно вообще анимируемое?

    Вот тут, например, пишут, что нет: https://stackoverflow.com/questions/71085424/how-t...

    В стандарте (https://drafts.csswg.org/css-overflow-4/#propdef-l...) этот вопрос обходят стороной:

    Animation type: see individual properties


    А далее, обратно на сепульки. ))

    По ссылке на SO есть рабочие примеры, как добиться того же эффекта при помощи других свойств, плюс в стандарте показано, из каких трёх свойств можно собрать данное (чтоб уж полностью воспроизвести, если надо).
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать фильтр с чекбоксами?

    @ImagineTables
    Если список фильтров статичный или есть возможность генерировать CSS (например, препроцессором), можно так:

    body:has(input.filter[data-filter~="Filter1"]:checked) div.block[data-filter~="Filter1"],
body:has(input.filter[data-filter~="Filter2"]:checked) div.block[data-filter~="Filter2"],
body:has(input.filter[data-filter~="Filter3"]:checked) div.block[data-filter~="Filter3"]
{
    display: none;
}


    У блоков есть атрибут data-filter с пробело-разделяемым списком фильтров. У чекбоксов-фильтров — аналогично. Чекинг любого чекбокса делает невидимыми все блоки, у которых совпадает хотя бы один фильтр с этим чекбоксом.
    Ответ написан
    Комментировать
    Комментировать

  • Почему meta charset="utf-8"/ работает только если сместить кавычку на meta "charset=utf-8"?

    @ImagineTables
    Это не «смещение кавычки», это некорректная запись атрибута элемента (кавычки могут быть только вокруг значения атрибута, но не имени). Некорректно записанный атрибут игнорируется браузером. И выше уже ответили, что некорректная запись атрибута не даёт работать некорректно указанной кодировки, т.е. минус на минус…
    Ответ написан
    Комментировать
    Комментировать

  • Как в Owl Carousel 2 задать отступ в rem?

    @ImagineTables 
    .owl-item
{
    margin-right: 0.625rem !important;
}


    !important потому, что он пихает опцию в атрибут style.
    Ответ написан
    Комментировать
    Комментировать

  • Как имитировать клик по кнопке в момент переключения табов?

    @ImagineTables
    Дисклеймер: не уверен, что правильно понял проблему, но попытка не пытка. Попробуйте первый раз инициализировать контролы внутри бутстраповских табов (т.е., в данном случае, делать вызов .slick()) из события shown.bs.tab (ну и запоминать, что инициализация состоялась, чтобы при повторном выборе таба её не делать повторно, либо unslick'ать всё на парное событие hidden.bs.tab).

    Событие shown.bs.tab генерирует контрол, который переключает табы. Т.е.

    $('button[role="tab"]')
	.on('shown.bs.tab', function (e) { … } );


    Из e достаёте таб (см. бутстраповскую документацию на событие), и для его содержимого уже делаете инициализацию.
    Ответ написан
    Комментировать
    Комментировать

  • MIME тип CSS при попытке добавить stylesheet в head через скрипт. Как решить проблему?

    @ImagineTables
    >В задумке подгружать стили ориентируясь на операционную систему.

    Оффтопик по отношению к этому конкретному вопросу, но, возможно, стоит рассмотреть переезд из браузера в ОС-специфичные webview-приложения и вынос разметки/стилей в ресурсы. По крайней мере, обычно обозначенная в цитате дорога приводит именно к этому )) А от сервера оставить только веб-АПИ.
    Ответ написан
    1 комментарий
    1 комментарий