Pull to refresh
8
0
Дмитрий Кузнецов @frontendj

Front-end developer

Send message

Оптимизация производительности фронтенда. Часть 1. Critical Render Path

Reading time 14 min
Views 41K

Здравствуйте. Меня зовут Ник, я фронтенд разработчик (жидкие аплодисменты). Кроме того, что я пишу код, я преподаю в Школе программистов hh.ru.


Записи наших лекций от 2018-2019 учебного года можно посмотреть на youtube


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



Вот презентация для тех, кому неохота читать лонгрид, но при этом хочется иметь базовое представление о контенте.


Лонгридом можно пользоваться как справочником, чтобы не читать за один присест. Вот список тем, которые мы затронем:


  1. Зачем думать о производительности
  2. FMP, TTI + подробнее в докладе
  3. Critical render path, DOM, CSSOM, RenderTree
  4. Шаги по улучшению производительности первой загрузки + подробнее в докладе
Читать дальше →
Total votes 19: ↑18 and ↓1 +17
Comments 10

IMHO, как писать на Хабр

Reading time 10 min
Views 38K


Акронис на прошлой неделе попросил меня рассказать про опыт на Хабре. После семинара я обещал выложить основные тезисы. Возможно, вы найдёте что-то полезное ниже.

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

При этом активных (голосующих) пользователей всего около 3 тысяч. Уровень знаний аудитории на входе в пост — в примерно 95% случаев низкий, в 5% — экспертный (разбиение оценочное). Проще говоря, есть люди, которые вообще не понимают, что вы хотите сказать (и их большинство), и есть те, кто разбирается в теме на голову лучше вас. Поэтому лучший пост — это тот, что проходит от ликбеза к хардкору. На площадке довольно высокий уровень агрессии (точнее, желания проверить материал на прочность). Ранее был экстремально высок. Средняя или низкая внимательность читателя (ранее была высокая).

Разумеется, это всё моё личное мнение, и можно поспорить. Сейчас постараюсь объяснить, почему я так считаю, и как это влияет на посты. Я основываюсь на опыте примерно 1500 постов за 6 лет, которые написал сам или помогал готовить.

Но начнём с численных показателей. Вот эти компании так или иначе вызвали мой интерес тем, что для них работают агентства или выделенный инхаусный пиар:


Данные тут на конец августа, я их к другому семинару (в Хабре для владельцев блогов) готовил.
Читать дальше →
Total votes 200: ↑182 and ↓18 +164
Comments 165

Локализация приложений: как мы подружили перевод и разработку

Reading time 14 min
Views 28K


Привет, Хабр! Я ведущий разработчик системы локализации в Badoo. Мы работаем с несколькими большими проектами: Badoo, Bumble, Lumen и Chappy. Сейчас в системе локализации у нас находятся 150 000 фраз и текстов, переведённых на 52 языка. При этом каждое из наших приложений имеет свою аудиторию, свои рынки, свой стиль общения с пользователями, версии для веба и для мобильных платформ.


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


Статья написана по мотивам моего доклада на конференции Highload++ в ноябре.

Читать дальше →
Total votes 65: ↑63 and ↓2 +61
Comments 26

QA — специалист по пожарной безопасности вашего проекта

Reading time 25 min
Views 16K


На конференциях и в неформальных беседах на работе нет-нет да и возникает разговор о важности работы QA-инженера и его роли в проекте. Это может быть и робкий вопрос коллеги-программиста «А, может, выпустим без QA?», и объёмный доклад.


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

Читать дальше →
Total votes 30: ↑28 and ↓2 +26
Comments 8

Практика CSS Scroll Snapping

Reading time 6 min
Views 42K

Перевод «Practical CSS Scroll Snapping» Max Kohler


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


Пример использования CSS Scroll Snapping

Читать дальше →
Total votes 17: ↑17 and ↓0 +17
Comments 6

CSS-функции min(), max() и clamp()

Reading time 12 min
Views 60K
Поддержка CSS-функций сравнения min(), max() и clamp() появилась в Firefox 8 апреля 2020 года. Это означает, что данные функции теперь поддерживаются во всех основных браузерах. Эти CSS-функции расширяют наши возможности по созданию динамических макетов и по проектированию более гибких, чем раньше, компонентов. Их можно использовать для настройки размеров элементов-контейнеров, шрифтов, отступов и многого другого. Правда, веб-дизайнеру, создающему макеты страниц с учётом возможности использования этих восхитительных функций, может понадобиться научиться думать по-новому.



Сегодня я хочу рассказать об особенностях этих функций, объяснить всё то, что может оказаться в них непонятным, и привести практические примеры их использования.
Читать дальше →
Total votes 37: ↑36 and ↓1 +35
Comments 11

Новое CSS-свойство content-visibility ускоряет отрисовку страницы в несколько раз

Reading time 5 min
Views 38K
5 августа 2020 разработчики Google анонсировали новое CSS-свойство content-visibility в версии Chromium 85. Оно должно существенно повлиять на скорость первой загрузки и первой отрисовки на сайте; причём с только что отрендеренным контентом можно взаимодействовать сразу же, не дожидаясь загрузки остального содержимого. content-visibility заставляет юзер-агент пропускать разметку и покраску элементов, не находящихся на экране. По сути, это работает как lazy-load, только не на загрузке ресурсов, а на их отрисовке.


В этой демке content-visibility: auto, применённый к разбитому на части контенту, даёт прирост скорости рендера в 7 раз
Total votes 41: ↑36 and ↓5 +31
Comments 26

Медиазапросы в SCSS — ещё один удобный способ использования @media screen

Reading time 3 min
Views 22K
Привет!

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

В общем, для удобства составила себе такие требования:

  1. Размеры экранов должны быть вынесены отдельно, чтобы можно было глобально в одном месте поменять поведение (например, вместо «320px» передавать просто «xs»).
  2. Данный миксин с медиазапросами может быть не только в одну сторону (например, не всегда только max-width).
  3. Миксин может использоваться и отдельно, переопределяя описанные классы внутри, или описываться в теле родителя, переопределяя его свойства.

Итак, определим любые нужные нам разрешения. Например:

$sizes: ("xs":320px, "sm":576px, "md":768px, "lg":992px, "xl":1200px);

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

@mixin media($minmax, $media) {
  @each $size, $resolution in $sizes {
    @if $media == $size {
      @media only screen and (#{$minmax}-width: $resolution) {
        @content;
      }
    }
  }
}

Если кратко, то мы передаём нужное нам название разрешения экрана, ищем его значение среди объявленных ранее в переменной $sizes. После того, как нашли, подставляем его вместе с переданным min или max (переменная $minmax).
Читать дальше →
Total votes 10: ↑9 and ↓1 +8
Comments 18

1С справа налево: как мы поддержали RTL в платформе 1С: Предприятие

Reading time 10 min
Views 11K
Платформа 1С:Предприятие локализована на 22 языка, включая английский, немецкий, французский, китайский, вьетнамский. Недавно, в версии 8.3.17, мы поддержали арабский язык.

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

Под катом – о том, как мы поддержали RTL (right-to-left) в веб-клиенте платформы 1С:Предприятие, а ещё – одна из гипотез, объясняющая, почему арабский мир пишет справа налево.

image
Читать дальше →
Total votes 18: ↑17 and ↓1 +16
Comments 17

Правосторонний интерфейс: адаптируем контролы к right-to-left языкам

Reading time 8 min
Views 4.6K
C адаптацией приложений и сайтов под RTL-языки (right-to-left, справа налево) сталкиваются разработчики многих развивающихся и выходящих на новые рынки продуктов. Мы в Badoo тоже в какой-то момент оказались в этой ситуации: наши приложения переведены на 52 языка и диалекта. В этой статье я расскажу о нескольких интересных нюансах, которые мы обнаружили при адаптации форм на сайте Badoo.сом под иврит и арабский язык.


Читать дальше →
Total votes 23: ↑23 and ↓0 +23
Comments 0

Information

Rating
Does not participate
Location
Великобритания
Registered
Activity