• Последствия переписывания компонентов Firefox на Rust
    +2
    А если открыть инструменты разработчика, то сразу становится понятно, что узкое место в демке — перерасчет стилей. Казалось бы, как здесь может помочь WebRender?..

    prnt.sc/n47kkv — Chrome
    prnt.sc/n47m4r — Firefox с включенным WebRender'ом
  • Как работать с async/await в циклах JavaScript
    0
    Есть предложение для будущей реализации: github.com/tc39/proposal-promise-allSettled.
  • Microsoft официально подтвердила, что Edge переходит на движок Chromium
    0
    Не знаю.
  • Microsoft официально подтвердила, что Edge переходит на движок Chromium
    0
    mozillagfx.wordpress.com — хороший блог, где описывается процесс развития WebRender'а. Пока проект только пилится, разработчики решили ограничить число поддерживаемых карт, ОСей и т.п.
  • Microsoft официально подтвердила, что Edge переходит на движок Chromium
    0
    Я на 4k смотрю и все сильно хуже именно на этой станице, но это, как надеются сами разработчики, временно. Когда кеширование допилят, то и здесь все ок будет.

    Выше много писали, что сейчас невозможно создать новый браузер и т.п. Mozilla же в случае с WebRender не браузер новый создает, а пробует совершенно новый подход к отрисовке, без этих костыльных и неудобных слоев на каждый чих. Если это решение окажется еще и быстрее существующего подхода, то, с точки зрения разработчика, это будет неоспоримое преимущество. Правда, обычному пользователю будет все равно, так как сейчас, по сути, все браузеры достаточно быстрые.
  • Microsoft официально подтвердила, что Edge переходит на движок Chromium
    0
    Так не везде и работает. :)
  • Microsoft официально подтвердила, что Edge переходит на движок Chromium
    0
    Проверьте на всякий about:support#graphics-features-tbody. В графе «Композитинг» должен стоять «WebRender». Насколько я знаю, подобные страницы все еще представляют большую проблему для WebRender'а из-за того, что при прокрутке он пытается на каждое смещение отрисовать всю сцену целиком. С отключенным WebRender'ом эта страница отрисуется как вы и описали (правда, у меня Chrome быстрее), но вот с включенным браузер намертво подвисает на секунды.
  • Microsoft официально подтвердила, что Edge переходит на движок Chromium
    0
    about:config > «gfx.webrender.all». Нет, его еще не включили в стабильной версии.
  • Microsoft официально подтвердила, что Edge переходит на движок Chromium
    0
    Не все так радужно. Попробуйте diana-adrianne.com/purecss-francine открыть с включенным WebRender. Fx будет очень тяжко переваривать и так при каждом сдвиге прокрутки. Но WebRender еще не в релизе, так что посмотрим, что будет в конце, самому интересно увидеть.
  • Ребята, давайте жить дружно или о поле «Пароль» при регистрации
    0

    Сама карта уже ключём является. Для входа в банковское приложение также понадобится пароль, двухфакторная аутентификация и т.п.

  • Знакомство с новым элементом dialog
    0
    Модальные окна как использовались, так и будут использоваться. Само окно может быть не просто `alert()`, а что-то большее. Вот вам простой пример. Когда открываете настройки приложения, они часто открываются в отдельной вкладке, али же в модальном окне. Допустим, вы открыли настройки в модальном окне под которым располагается форма. Когда будете нажимать клавишу `Tab`, фокус будет бегать внутри модального окна не попадая на форму под ним. Либо же выбрав весь текст на странице, вы выберете только текст в модальном окне. Это лишь один пример из множества.

    И в данной статье речь идет об элементе `dialog`, который нужен не только для модальных окон.
  • Знакомство с новым элементом dialog
    0
    Не понял, чем поможет `:checked`. Суть в том, что если на странице с формой открыть модальное окно, то при нажатии клавиши `Tab` фокус не будет попадать в поля вне модального окна. Если выбрать весь текст на странице, то текст под модальным окном не будет выбран. И прочее. Это все дается из коробки, а написать универсальный полифилл для сего по сути невозможно.
  • Знакомство с новым элементом dialog
    0

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

  • Знакомство с новым элементом dialog
    –1

    Всплывающее окно, возможно, и проще, а вот модальное нет.

  • Аналоговые часы, CSS и ничего больше
    –1
    Мои доводы касались тех проблем, решение которых описывалось в статье. Речь шла о производительности, а не о поддержке IE. Если бы все описывалось в контексте обратной совместимости, то мне это было бы неинтересно, так как, благо, под IE уже давно не пишу.

    Про то, как работают браузеры (хоть открытые, хоть закрытые), написано множество статей + море информации можно найти в исходниках (не у всех открыты), багтрекерах, инструментах разработчика и прочем.

    60 вызовов — это к тому, что штуки вроде `requestAnimationFrame`, CSS animation / transisition.., как раз и ограничиваются этими 60-ю кадрами, то бишь 60-ю перерисовками. Если transform отправляет что-то на GPU, а инструменты разработчика Chrome'а не показывают перерисовки, то это вовсе не означает, что ничего не происходит. Картинка-то на экране меняется. Вот как раз с потолком в 60FPS и меняется. А Paint flashing (зеленый прямоугольник) этого и не покажет.
  • Аналоговые часы, CSS и ничего больше
    +1
    Ваше утверждение немного неверно. 60fps — этакий стандарт для браузера. Соответственно, 60 вызовов функции перерисовки внутри браузера. Но суть не в этом. Я пока отброшу второй абзац вашего ответа, так как, если основываться на нем, то переменных (пользовательских свойств) CSS вообще быть не может, так как нет поддержки. В оригинальной статье автор обновлял DOM не только с целью проброски CSS переменных, но и с целью обновления данных для доступности, чего у вас уже нет. Для глаз это погоды не делает, а вот для слуха очень даже (по сему поводу чистая теория, так как нет желания проверить). Идем дальше. Ваш код создает отдельный слой и крутит его. И этот слой висит постоянно из-за анимации и не объединяется с другими слоями (http://prntscr.com/ir5mc8), посему вы не видите перерисовки. Такая «магия» дается не бесплатно, на нее выделяется память, что, как бы, тоже ресурс системы. Выше вам уже писали про «волшебное» свойство `will-change`, которое может сделать тоже самое для решения из оригинальной статьи. Добавьте `transition` и увидите теже 60FPS (появится постоянная перерисовка). Ну а если учесть
    Так как часы отсчитывают время CSS-ом, то если забить тред какими-то тяжёлыми заданиями — часы перестанут идти и когда страница освободится — будут отставать. Но все это можно поправить заново задав keyframe.
    то получается, что нам нужно точно так же пробрасывать в DOM кучу стилей не реже, чем раз в секунду. Так в чем профит-то? IE11?

    И про загадочные 50.2FPS все тоже просто и понятно. Если открыть счетчик FPS на оригинальных часах, то там будет 1FPS (логично же, 1 перерисовка всего, но, на самом-то деле, это тоже может варьироваться, так как процессор можно нагрузить так, что будет 0FPS). На вашем же скрине видно, что включена настройка отображения перерисовок (зеленый прямоугольник), которая сама по себе вызывает перерисовку, так как этот самый зеленый прямоугольник появляется / исчезает плавно. Вот и FPS проседает (а проседает ли? :)).
  • Аналоговые часы, CSS и ничего больше
    0
    Поддерживаю. В статье изложены неверные выводы. Переменные вообще никак к отрисовке не относятся и сами по себе ее не вызывают. Просто в одном варианте часов отдельный слой создается при каждом сдвиге стрелки, а во втором варианте слой существует постоянно.
    Для плавности же можно просто добавить тех же стилей вроде `transition: 1s linear;`. В итоге код в статье сильно усложнился / запутался, а прибавилось только минусов. %)
  • Очерки истории CSS
    0
    Обратная совместимость + возможность указывать запасные значения, аля

    padding: var(--grid-size, var(--grid-gap), 10px);


    Так и вышло. :)
  • Clips и Pixelbook — новые устройства Google с Intel Inside
    0
    Так i5 i5-ому рознь. Посмотрите характеристики тех процессоров. :) А приложений и в сети сейчас хватает, к примеру, Figma для редактирования векторной графики вполне себе требовательна и прочие. Ну и если у вас имеются средства, а задачи только офисные, то будет плюс в меньшем количестве тормозов, быстром запуске и подобном.
  • Clips и Pixelbook — новые устройства Google с Intel Inside
    0
    Так можно готовый с Win на борту взять и более вкусный, но без буковки G. К примеру, Dell XPS.
  • Dell XPS 13 9365: лёгкий трансформер на каждый день
    0
    Пользуюсь старшей моделью 9550 уже ~ 1.5 года, никак подобных шумов не замечал. Только кулер шуршит, что, собственно, не раздражает.
  • Dell XPS 13 9365: лёгкий трансформер на каждый день
    0
    Так 15'' DELL XPS без цифровой клавиатуры идет же.
  • Divoom TimeBox: настольный bluetooth-динамик с пиксельным дисплеем
    0
    Я брал его дешевле еще в те времена, когда они выходили на Kickstarter. И, да, он стоит своих денег. ;)
  • Прокрутка в вебе: букварь
    +1
    В Chrome'е уже давно имеется подобный инструмент

    image

  • Divoom TimeBox: настольный bluetooth-динамик с пиксельным дисплеем
    0

    http://lametric.com — давно пользуюсь. Судя по фотографиям у LaMetric'а экран заметно лучше, да и в целом выглядит приятнее.

  • 10 лучших подарков для поклонника Sony
    0

    А чем SBH80 так плоха? Уже ~ пару лет с ней хожу, + бег, велосипед, сноуборд, все отлично работает. Единственное нарекание — максимальный уровень громкости низковат, в шумной обстановке порой плохо слышно собеседника.

  • Нативные приложения обречены (часть 1)
    +1

    SVG иконки поддерживаются лишь частично и с ограничениями на различных платформах. Работа ведется. :)

  • Нативные приложения обречены (часть 1)
    0

    Application Cache является устаревшей технологией и, скорее всего, будет со временем удалена поддержка сего в браузерах. Service Worker является ее заменой. localStorage для чего-то более-менее простого, для более сложных вещей — IndexedDB.

  • Кружевные орнаменты на CSS
    0

    Интереса ради не могли бы привести пример? Меня всегда интересовали вопросы производительности и изучить в этом плане градиенты было бы увлекательным занятием для меня.

  • Кружевные орнаменты на CSS
    0

    А что не так с генерируемой картинкой? Браузер ее отрисовал и все, далее просто копирует как тот же растр, по сути все то же самое.

  • Легкий способ потерять клиентов или почему не следует использовать Google CDN
    0

    Проблема подмены решается сим: https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity.

  • Использование CSS Flexbox для позиционирования блоков на странице
    +1

    @EvgenyMakhnovets Уже много раз писал (не конкретно вам, а вообще), но толку все равно нет. Забудьте о свойстве flex. Пишите все раздельно. Тогда и про "растягивается", "жадность" и прочие недоразумения писать не нужно будет, так как об этом скажет ваш код, а не набор непонятных 0 0 auto и т.п.


    И вот, кстати, решение задачи из статьи, только без горы мусора и с читаемым CSS'ом: https://jsbin.com/gajozaj/5/edit?html,css,output.

  • Обзор ультрабука Dell Latitude 13 (7370): Без шума, пыли и сомнений
    0
    Вот-вот. У самого старенький Asus и актуальный Dell. Кириллица сильно портит внешний вид. :( Казалось бы, мелочь, но…
  • Обзор ультрабука Dell Latitude 13 (7370): Без шума, пыли и сомнений
    0
    Наконец-то Dell нанесла нормальную кириллицу на клавиатуру, ибо до сего что в Asus, что в Dell было какое-то непотребство.
  • Как по маслу, или анимируем со скоростью 60 FPS на CSS 3
    0

    На подготовку слоев может уйти и больше. ;) Впрочем, я сего и не отрицал, хоть и не являюсь приверженцем данной теории...

  • Как по маслу, или анимируем со скоростью 60 FPS на CSS 3
    0

    А зачем тогда, собственно, will-change, если браузер все равно проведет подготовительные работы во время трансформации? Вся проблема will-change в том, что его сложно использовать. Мы все привыкли ко всяким там "непонятным" эвристикам и т.п., что браузер все за нас делает и т.п., и т.д. А тут появился will-changecontains ;)) и разработчики браузеров предложили нам все самим делать в помощь браузеру (увы, не во всех сценариях браузер может все верно оптимизировать и оптимизировать ли?..). kahi4, в целом, неплохо все объяснил. Дополню, что will-change нужен не только во время анимации, но и при любом ином изменении, а не только CSS transform. То, что делает это свойство, будет и без него проделано, но на эти подготовительные работы нужны ресурсы (время и мощности железа). При открытии меню, к примеру, мы хотим увидеть начало анимации сразу же после клика на кнопку и эти подготовительные работы отсрочат начало анимации на n миллисекунд, что будет замечено пользователем и испортит пользовательский опыт. Вот чтобы этого не происходило, посредством will-change можно подготовить элемент заранее. :)

  • HEIST позволяет получить зашифрованную информацию в HTTPS канале в виде открытого текста
    0

    https://www.w3.org/TR/SRI/ — если с умом подходить, то не могут. Сие уже поддерживает Chrome и Firefox, то бишь можно указать хеш файла, который ожидается, если придет что-то иное, то среагировать на сие событие.


    Пардон, не увидел ссылку akaluth выше.

  • Анимация Floating Action Button в Android
    0
    Спецификация (скорее даже пособие по стилю) не гласит располагать этот элемент на всех страницах. Скорее это проблемы отдельных приложений и их разработчиков. +, там есть различные вариации, в том числе обыгрывается ситуация с несколькими значимыми стилями.
  • Houdini: один из самых впечатляющих проектов в CSS, о котором вы никогда не слышали
    0

    Разве есть проблема сделать это сейчас в браузерах, поддерживающих эти самые кастомные переменные пользовательские свойства?

  • Коллекция практических советов и заметок по вёрстке
    0
    :) Поправлюсь, в целом хорошая подборка материала, то бишь планка на достаточно хорошем уровне, чтобы пописаться и следить за блогом. Ну и перевод официальной документации по Material Design тоже много стоит (увы, устаревает, но тем не менее). Удачи вам. ;)