• Весь веб на 60+ FPS: как новый рендерер в Firefox избавился от рывков и подтормаживаний

    • Translation
    До релиза Firefox Quantum остаётся всё меньше времени. Он принесёт множество улучшений в производительности, в том числе сверхбыстрый движок CSS, который мы позаимствовали у Servo.

    Но есть ещё одна большая часть технологии Servo, которая пока не вошла в состав Firefox Quantum, но скоро войдёт. Это WebRender, часть проекта Quantum Render.



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

    При разработке WebRender мы поставили задачу, чтобы все приложения работали на 60 кадрах в секунду (FPS) или лучше, независимо от размера дисплея или от размера анимации. И это сработало. Страницы, которые пыхтят на 15 FPS в Chrome или нынешнем Firefox, летают на 60 FPS при запуске WebRender.

    Как WebRender делает это? Он фундаментальным образом меняет принцип работы движка рендеринга, делая его более похожим на движок 3D-игры.
    Читать дальше →
  • Погружение в CSS: метрики шрифтов, line-height и vertical-align

    • Translation
    image

    line-height и vertical-align — это простые свойства CSS. Настолько простые, что большинство из нас уверены, что понимают, как они работают и как их использовать. К сожалению, это не так — на самом деле они, пожалуй, являются самыми сложными свойствами, поскольку играют важную роль в создании малоизвестной особенности CSS под названием «строчный контекст форматирования» (inline formatting context).

    Например, line-height можно задать в виде длины или безразмерного значения, но его значение по умолчанию — normal (стандартное). Хорошо, но что значит «стандартное»? Зачастую пишут, что это (как правило) 1, или, может быть, 1,2. Даже в спецификации CSS нет четкого ответа на данный вопрос.

    Нам известно, что безразмерное значение line-height зависит от значения font-size, но проблема в том, что font-size: 100px выглядит по-разному для разных гарнитур. В связи с этим возникает вопрос: всегда ли line-height будет одинаковым или может различаться? Действительно ли это значение находится в промежутке от 1 до 1,2? А как vertical-align влияет на line-height?

    Давайте углубимся в не самый простой механизм CSS…
    Читать дальше →
    • +28
    • 18.9k
    • 9
  • C++17

      Рисунок 2


      Язык C++ постоянно развивается, и нам как разработчикам статического анализатора важно следить за всеми изменениями, чтобы поддерживать все новые возможности языка. В этой обзорной статье я хотел бы поделиться с читателем наиболее интересными нововведениями, появившимися в C++17, а также продемонстрировать их на примерах.
      Читать дальше →
    • Тернистый путь Hello World

      Вдохновение на написание данной статьи было получено после прочтения похожей публикации для архитектуры x86 [1].


      Данный материал поможет тем, кто хочет понять, как устроены программы изнутри, что происходит до входа в main и для чего всё это делается. Также я покажу как можно использовать некоторые особенности библиотеки glibc. И в конце, как и в оригинальной статье [1] будет визуально представлен пройденный путь. В большинстве своём статья представляет собой разбор библиотеки glibc.


      Итак, начнём наш поход. Будем использовать Linux x86-64, а в качестве инструмента отладки — lldb. Также иногда будем дизассемблировать программу при помощи objdump.


      Исходным текстом будет обычный Hello, world (hello.cpp):


      #include <iostream>
      int main()
      {
              std::cout << "Hello, world!" << std::endl;
      }
      Читать дальше →
      • +74
      • 25.8k
      • 4
    • Перестаньте травить печатные платы дома — заказывайте их на производстве

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

        Я ни в коем разе не принуждаю сразу выливать ваше хлорное железо / перекись водорода, оставьте их для макетирования. Я лишь хочу показать, что заказать платы на производстве в наше время совсем не сложно, как может показаться начинающему радиолюбителю. Есть в этом что-то магическое — подержать в руках красивую плату собственного изготовления.
        Читать дальше →
      • Создаём GTK-видеоплеер с использованием Haskell

        • Translation


        Когда мы в последний раз остановились на Movie Monad, мы создали десктопный видео-плеер, использующий все веб-технологии (HTML, CSS, JavaScript и Electron). Фокус был в том, что весь исходный код проекта был написан на Haskell.


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


        Мы могли бы продолжить развивать наш подход с вебом, настроив бэкенд на стриминг видеофайла в HTML5-сервер, запустив параллельно сервер и Electron-приложение. Вместо этого мы откажемся от веб-технологий и обратимся к GTK+, Gstreamer и системе управления окнами X11.

        Читать дальше →
        • +35
        • 8.6k
        • 7
      • DariaDB. Разработка базы данных для хранения временных рядов

        Уже больше года, как у меня есть свой хобби-проект, в котором я разрабатываю движок базы данных для хранения временных рядов — dariadb. Задача довольно интересная — тут есть и сложные алгоритмы да и область для меня совершенно новая. За год был сделан сам движок, небольшой сервер для него и клиент. Написано все это на С++. И если клиент-сервер находится пока в достаточно сыром состоянии, то движок уже обрел некоторую стабильность.Задача хранения временных рядов достаточно распространена там, где есть хоть какие-то измерения (от SCADA-систем до мониторинга состояния серверов).

        Читать дальше →
      • Яндекс.Блиц. Почему и какие алгоритмические задачи нужно уметь решать, работая в поиске

          Редко когда кандидат проходит только одно техническое собеседование — обычно их несколько. Среди причин, почему человеку они могут даваться непросто, можно назвать и ту, что каждый раз приходится общаться с новыми людьми, думать о том, как они восприняли твой ответ, пытаться интерпретировать их реакцию. Мы решили попробовать использовать формат контеста, чтобы сократить количество итераций для всех участников процесса.



          Для Блица мы выбрали исключительно алгоритмические задачи. Хотя для оценки раундов и применяется система ACM, в отличие от спортивного программирования все задания максимально приближены к тем, которые постоянно решают в продакшене Поиска. Те, кто решит успешно хотя бы четыре задачи из шести, могут считать, что прошли первый этап отбора в Яндекс. Почему алгоритмы? В процессе работы часто меняются задачи, проекты, языки программирования, платформы — те, кто владеет алгоритмами, всегда смогут перестроиться и быстро научиться новому. Типичная задача на собеседовании — составить алгоритм, доказать его корректность, предложить пути оптимизации.


          Квалификацию можно пройти с 18 по 24 сентября включительно. В этом раунде вам нужно будет написать программы для решения шести задач. Можете использовать Java, C++, C# или Python. На всё про всё у вас будет четыре часа. В решающем раунде будут соревноваться те, кто справится как минимум с четырьмя квалификационными задачами. Финал пройдёт одновременно для всех участников — 30 сентября, с 12:00 до 16:00 по московскому времени. Итоги будут подведены 4 октября. Чтобы всем желающим было понятно, с чем они столкнутся на Блице, мы решили разобрать пару похожих задач на Хабре.

          Читать дальше →
        • О культуре разработки в группах программистов

            «Почему ж всё так плохо?» — каждый раз я задаюсь этим вопросом, когда приходится иметь дело с очередным кодом, продуктом или API, созданными для внутренних нужд в непрофильной организации.

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

            И деньги ничего не решают: ужасный код и ужасные продукты пишут как маленькие бедные ВУЗы, у которых денег хватает только на рабский труд аспирантов, так и крупные и богатые компании, включая IT-компании, включая зарубежные: несколько раз сталкивался с кодом, который писали зарубежные подрядчики и каждый раз от него хотелось рыдать и биться головой об стену.

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

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

            Культуру разработки можно сравнить с экосистемой: как сад или аквариум. Крепкая, здоровая культура обладает запасом прочности, чтобы оздоравливать обитателей экосистемы, избавляться от вредителей, прощать небольшие ошибки ухода, сглаживать стрессы и на выходе все-равно получать отличный результат. А больная культура сводит на нет все усилия, заражает и губит даже самые здоровые и крепкие саженцы.

            Читать дальше →
          • 36 материалов о нейросетях: книги, статьи и последние исследования

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

              Поэтому, желая облегчить жизнь себе и читателям, мы сделали краткую подборку из книг, статей и текстов по направлению нейросетей и глубокого обучения, рекомендуемых к прочтению резидентами GitHub, Quora, Reddit и других платформ. В неё вошли материалы как для тех, кто только начинает знакомство с нейротехнологиями, так и для коллег, желающих расширить свои знания в этой области или просто подобрать «легкое чтение» на вечер.

              Читать дальше →
              • +23
              • 65.2k
              • 8
            • Планировщик ввода / вывода BFQ лучше

                Помимо атомарных операций KMS для пользователей рабочей станции Linux недавно завезли еще одно полезное новшество — планировщик подсистемы ввода и вывода BFQ (Budget Fair Queue). Он является усовершенствованием дефолтного CFQ (Completely Fair Queue), дебютировал аж 9 лет назад, но только в версии 4.12 попал в основную ветку.



                Прежде чем поговорить о принципах работы планировщика ознакомьтесь с демо-роликом разработчика Paolo Valente, это добавит вам мотивации продолжить. На снимке экрана показан замер старта проигрывателя с 10 фоновыми задачами читать файл с диска для двух планировщиков: CFQ и BFQ. Угадайте, который из них так и не стартовал при такой нагрузке?

                Читать дальше →
              • Троллейбус из буханки или alias analysis в LLVM

                  В преддверии очередной конференции C++ Siberia, я решил выложить на всеобщее оборзрение запись доклада с февральской конференции C++ Russia, проходившей в городе-герое Санкт-Петербурге.

                  Зачастую, знакомство с алиасингом в C++ у многих программистов начинается и заканчивается одинаково: -fno-strict-aliasing. На вопросы новичка, более опытные коллеги отвечают в стиле: «не трогай! а то все сломаешь!». Новичок и не трогает.

                  В докладе сделана попытка заглянуть под капот компилятора и понять, что же там, внутри? Что такое alias analysis, где он может быть полезен, в чем его преимущества и недостатки. Тема рассмотрена и со стороны программиста и со стороны разработчика компилятора. А по сему, вопрос «зачем?» был центральным.

                  В докладе вы найдете:

                  • Код Quake3 и стандарт IEEE754
                  • Магическую константу 0x5F3759DF
                  • Много ассемблера x86
                  • Много IR кода LLVM
                  • Rust, Java и даже Fortran
                  Читать дальше →
                • По следам C++ Siberia: дракон в мешке

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

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

                    На самом деле, пост не о том.

                    Так уж вышло, что мне довелось выступать на означенной конференции, где я на пальцах и с приплясываниями рассказывал, что такое LLVM, чем интересна нотация SSA, что такое IR код и, наконец, как так получается, что детерменированные на первый взгляд C++ программы, оказывается, провоцируют неопределенное поведение.

                    Кстати, этот доклад можно поставить пятым номером в серии статей про виртуальную машину Smalltalk. Многие просили подробнее рассказать о LLVM. В общем, убиваем всех зайцев сразу. Заинтересовавшимся, предлагаю «откинуться на спинку кресла», опционально налить чего-нибудь интересного и послушать. Обещаю, что больше часа времени я не отниму.

                    Ах да, под катом можно найти пояснения тех моментов, которым не было уделено должное внимание на конференции. Я постарался ответить на часто задаваемые вопросы и детально разобрать листинги LLVM IR. В принципе, текстовую часть статьи можно читать как самостоятельное произведение, тем не мене я рассчитывал на то, что читатель обратится к нему уже после просмотра видео.


                    Читать дальше →
                  • Параллельная загрузка JavaScript и CSS без блокирования парсинга страницы

                      Известно, что следуя идеям старой школы, а именно, добавляя ссылки на JS и CSS в страницы, может обернуться большим временем загрузки страницы. Браузер отображает страницу по мере скачивания, но останавливается, если натыкается на тег script со ссылкой, до того момента, пока скрипт не будет загружен и выполнен. Сайты стали использовать всё большее количество скриптов, начальное отображение страницы занимает всё больше времени, к примеру, на этой странице, которую вы читаете, 13 скриптов, 7 из которых находятся в head'е. Ко всему прочему, некоторые браузеры по-прежнему придерживаются ограничений на одновременное количество загрузок с одного хоста.

                      Сразу предлагаю принять, что все JS файлы минимизированы, и передаются в сжатом виде.

                      Существует несколько решений, как то:
                      — поместить стили и скрипты прямо в страницу;
                      — установка аттрибутов async/defer тегу script;
                      — склеить все скрипты в один файл;
                      — помесить ссылки на скрипты в конец body;
                      — разместить все файлы на CDN/на разных хостах;
                      — свой вариант…

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

                      Началось всё, конечно, с того, что я взялся за один проект, и в какой-то момент мне показалось, что простенькая страница достаточно долго загружается, и посмотрел на график загрузки, и на результаты YSlow. Огонь на секунду потух в моих глазах, но зная, что может быть лучше, я полез искать,
                      как сделать лучше.
                    • Как новичок в Go контрибьютил

                      • Translation


                      Rocky Runs Up The Stairs


                      Привет, Хабр. Вы, наверно, меня помните: я – Марко Кевац, системный программист в Badoo. Недавно я наткнулся на небольшой рассказ о том, как новичок сделал изменение в рантайме языка Go. Несмотря на то, что этот пост, наверное, довольно неожиданно встретить в хабраблоге Badoo, и многие могут сказать, что он банален и переполнен наивной радостью, я считаю, что такие истории демонстрируют, насколько сообщество Go доброжелательно и внимательно по отношению ко всем его участникам. Поэтому и перевел его.


                      А ещё в посте есть два интересных факта, связанных с внутренностями языка. Приятного чтения!

                      Читать дальше →
                    • Как писать, когда не умеешь и лень

                        Многие сравнивают писательство с каким-то творческим процессом. Это ошибка — мы все умеем писать по умолчанию. Сначала нас учили письму в школе, а потом пришли мессенджеры, и это дело превратилось в ежедневную привычку.
                        Читать дальше →
                      • Ад рендера v.2.0. Книга первая. Обзор

                          Отсебятина


                          Наткнулся год назад на ряд очень интересных статьей господина Simon. Саймон очень любит разбирать то, как создаются игры, а именно графические решения того или иного элемента в игре. Начиная от сколов на гранях плит, заканчивая тем, как реализовано отрезание кусков от объектов. Но особенно интересным представляется его ряд статей под общим названием «Ад рендера» (Render Hell), в котором он подробно разбирает, как на уровне железа (да и программно тоже) происходит рендер 3D-объектов.

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

                          Ну что, начнем?
                          Читать дальше →
                        • Сети для самых маленьких. Часть восьмая. BGP и IP SLA

                          • Tutorial


                          До сих пор мы варились в собственном соку – VLAN’ы, статические маршруты, OSPF. Плавно росли над собой из зелёных студентов в крепких инженеров.
                          Теперь отставим в сторону эти игрушки, пришло время BGP.

                          Сегодня мы
                          • Разбираемся с протоколом BGP: виды, атрибуты, принципы работы, настройка
                          • Подключаемся к провайдеру по BGP
                          • Организуем резервирование и распределение нагрузки между несколькими линками
                          • Рассмотрим вариант резервирования без использования BGP – IP SLA

                          Читать дальше →
                        • Bitcoin in a nutshell — Cryptography

                            Одна из причин, почему Bitcoin продолжает привлекать столько внимания — это его исключительная «математичность». Сатоши Накамото удалось создать систему, которая способна функционировать при полном отсутствии доверия между ее участниками. Все взаимодействия основаны на строгой математике, никакого человеческого фактора — вот в чем была революционность идеи, а не в одноранговой сети, как многие думают. Поэтому первую главу я решил посвятить именно математическим основам Bitcoin.

                            Ниже я постараюсь объяснить вам самые базовые вещи — эллиптические кривые, ECC, приватные / публичные ключи и так далее. По возможности я буду иллюстрировать свои слова примерами кода, преимущественно на Python 2.7, если что-то непонятно — спрашивайте в комментариях.

                            intro
                            Читать дальше →
                          • Набор в Санкт-Петербургский академический университет

                              Традиционно сообщаем об открытии набора на кафедру математических и информационных технологий.



                              Академический университет существует с 2008 года. За это время мы успели открыть аспирантуру, магистратуру и бакалавриат (да, именно в таком порядке); cтать Национальным исследовательским университетом; выиграть мегагрант по биоинформатике и еще много всего. В этом посте мы расскажем о том как к нам поступить и том, что нового у нас произошло в течение года.
                              Читать дальше →