Как стать автором
Обновить
21
0
Сергей Радченко @avrelian

Пользователь

Отправить сообщение

Оптимизация производительности фронтенда. Часть 2. Event loop, layout, paint, composite

Время на прочтение11 мин
Количество просмотров48K

Ночь. Стук в дверь. Открыть. Стоят двое. "Верите ли вы в Event loop, нашу главную браузерную цепочку?" Вздохнуть. Закрыть дверь. Лечь досыпать. До начала рабочего дня еще 4 часа. А там уже ивент лупы, лейауты и прочая радость…


В первой части мы говорили о первой загрузке и работе с ресурсами. Сегодня я расскажу о второй части оптимизации производительности фронтенда. О том, что происходит с нашей страницей, когда она загружена, на что уходит процессорное время и что с этим делать. Ключевые слова: event loop, paint \ repaint, layout \ reflow, composite.


Читать дальше →
Всего голосов 22: ↑21 и ↓1+20
Комментарии5

Децентрализованная конфигурация webpack или как упростить сборку проекта

Время на прочтение8 мин
Количество просмотров8.8K

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

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

Но если говорить о конфигурации сборки, то такая декомпозиция скорее редкость, и в больших проектах часто можно встретить огромные webpack.config.js, модификация которых может доставить немало проблем и привести к ошибкам.

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

Читать далее
Всего голосов 51: ↑51 и ↓0+51
Комментарии19

Мой опыт технического собеседования: как не превратить его в экзамен и найти профпригодного сотрудника

Время на прочтение21 мин
Количество просмотров28K
image

Привет, Хабр! Меня зовут Леонид Титов, я бэкенд разработчик в #CloudMTS. Так уж сложилось, что я не только пишу код, но и иногда собеседую кандидатов. Мне нравится процесс, и, думаю, у меня это получается.

Начал я этим заниматься ещё на предыдущем месте работы, где мы с тимлидом собирали новую команду. С тех пор прошло уже N лет, практика продолжилась, и после очередного собеседования я решил упорядочить свои знания. Кто-то считает, что от собеседований вообще толку нет, а кто-то наоборот (не будем показывать пальцем) проводит их в 3-5 раундов. Я уверен, что собеседования нужны, но важно четко понимать, зачем именно.

На всякий случай уточню: в статье речь пойдет не столько про конкретные вопросы (хотя они тоже будут), сколько про выработанную мной методику и принципы, которыми я руководствуюсь, задавая те или иные вопросы.

Еще я поделюсь неожиданными впечатлениями от ситуации, когда оказался «по ту сторону», лайфхаками, фейлами и неплохо зарекомендовавшими себя практиками. Про soft skills тут ничего не будет — это отдельная важная тема. Прежде всего мы затронем вопрос профпригодности, определения ее наличия или отсутствия. Во второй половине статьи приведу собственный список вопросов, переведенный на русский, с комментариями.
Читать дальше →
Всего голосов 60: ↑48 и ↓12+36
Комментарии68

Chrome DevTools: Хитрости при отладке

Время на прочтение7 мин
Количество просмотров45K

В сети полно обзоров Chrome DevTools, которые демонстрируют многочисленные возможности этого прекрасного инструмента. DevTools настолько большие, что познать их полностью, как мне кажется, уже почти невозможно.

В этой заметке я бы хотел остановиться на различных нюансах, полезных при отладке. Какие-то из них я почерпнул в сети (например в комментариях на Хабре), до каких-то додумался сам. Надеюсь вы найдёте для себя что-нибудь полезное.

Под катом:

— Как отладить popup-ы, которые исчезают при потере фокуса
— Как убить повисший JS-цикл, не убивая вкладку
— Различные нюансы работы с breakpoint-ми
— Методы ведения войны с sourceMaps
— Перехват network-запросов
— Как отладить race-condition
— Почему стоит опасаться галочки "disable cache"
— Что делать если у вас не Hi-DPI экран?

Подробнее
Всего голосов 50: ↑49 и ↓1+48
Комментарии41

22 интересные фичи, которые стоит добавить в Telegram

Время на прочтение7 мин
Количество просмотров58K


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

Читать дальше →
Всего голосов 12: ↑9 и ↓3+6
Комментарии108

Как развитие алгоритмов сжатия остановилось 20 лет назад, или о новом конкурсе на 200 тысяч евро

Время на прочтение18 мин
Количество просмотров70K

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

Пост набрал 206 «плюсов», вышел на 2 место топа недели и вызвал оживленную дискуссию, в которой мне больше всего понравился комментарий: «Коммерческого интереса эффективность по сжатию алгоритмов сжатия без потерь сегодня не представляет, в силу отсутствия принципиально более эффективных алгоритмов. Деньги сегодня — в сжатии аудио-видео. И там и алгоритмы другие. Тема сжатия без потерь удобна именно лёгкостью верификации алгоритма, и не слегка устарела. Лет на 20.» 

Поскольку я сам уже 20 лет в области сжатия видео, с ее бурным развитием мне спорить сложно. А вот что сжатие без потерь развиваться перестало… Хотя логика тут понятна каждому. Я до сих пор пользуюсь ZIP, все мои друзья пользуются ZIP с 1989 года — значит, ничего нового не появляется. Так ведь? Похоже рассуждают сторонники плоской земли. ))) Я не видел, знакомые не видели, и даже некоторые авторитеты утверждают, значит, это так! 

О том, как Intel просили меня не прекращать читать курс по сжатию, ибо людей нет новые алгоритмы делать, я в прошлый раз писал. Но тут и Huawei в ту же дуду дует! Вместо того, чтобы раздать призы и должности победителям, а затем успокоиться, поскольку развитие давно встало, эти эксцентричные люди посчитали конкурс крайне успешным и запустили новый с призовым фондом 200 тысяч EUR.

Развивались ли алгоритмы сжатия без потерь в последние 20 лет? Чем закончился прошлый конкурс и на сколько опередили baseline? Сколько денег получили русские таланты, а сколько зарубежные? И есть ли вообще жизнь на Марсе в сжатии без потерь? 

Кому интересно — добро пожаловать под кат! 
Читать дальше →
Всего голосов 259: ↑258 и ↓1+257
Комментарии134

Приёмы ускорения кода на JS и других языках: подборка от разработчика поиска Яндекса

Время на прочтение17 мин
Количество просмотров66K
Привет! Меня зовут Виктор Хомяков, в Яндексе я работаю над скоростью страниц поиска. Однажды мне в голову пришла идея обобщить свой опыт и систематизировать приёмы ускорения работы кода на JavaScript. То, что получилось в итоге, собрано в этом материале.

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


Читать дальше →
Всего голосов 80: ↑80 и ↓0+80
Комментарии51

Шпаргалка по функциональному программированию

Время на прочтение23 мин
Количество просмотров37K

Привет, меня зовут Григорий Бизюкин, я преподаватель Школы разработки интерфейсов и фронтенд-разработчик в Яндексе. Давайте поговорим о функциональном программировании в мире JavaScript. Мы все про ФП что-то слышали, нам всем оно интересно, но у меня, когда я искал полезные материалы для подготовки к лекциям, сложилось такое впечатление: есть куча статей, каждая из которых либо говорит об ФП общими словами, либо раскрывает отдельный маленький кусочек темы, чего, конечно, недостаточно.



Добавим функционального света


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

Читать дальше →
Всего голосов 39: ↑36 и ↓3+33
Комментарии18

Модуляризация iOS-приложения: зачем и как мы разбиваем Badoo на модули

Время на прочтение12 мин
Количество просмотров9.5K

В iOS-разработке Badoo мы уже несколько лет занимаемся созданием модулей, и большая часть нового кода разрабатывается вне кодовой базы приложений. Сейчас у нас более 100 модулей для Badoo и Bumble. В этой статье я расскажу о нашем опыте и отвечу на самые популярные вопросы о модуляризации: 

— по какому принципу выделять модули; 

— как организовать связи между ними; 

— достаточно ли для фичи одного фреймворка; 

— как сократить время запуска многомодульного приложения; 

— зачем в этом процессе мониторинг;

— можно ли автоматизировать создание новых модулей и так далее. 

Мой коллега, лид команды iOS-разработки и Core-команды Артем Лоенко, в начале года говорил об этом на митапе FunCorp в докладе «Катастрофически полезные последствия модуляризации». Я приведу более подробный разбор процесса модуляризации и некоторых опущенных в его рассказе деталей.

Читать далее
Всего голосов 25: ↑24 и ↓1+23
Комментарии8

Чаты на вебсокетах, когда на бэкенде WAMP. Теперь про Android

Время на прочтение7 мин
Количество просмотров6.8K

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

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

Читать далее
Всего голосов 50: ↑50 и ↓0+50
Комментарии3

Чаты на вебсокетах в iOS, если у вас WAMP

Время на прочтение7 мин
Количество просмотров4.6K


Разработка заняла примерно 9 месяцев, а я занимался реализацией клиент-серверного общения по сокету для iOS. Особенности нашей ситуации:

  1. Поддержка старых версий iOS, где нативных методов для общения по сокетам ещё не было — пришлось искать рабочую библиотеку и фиксить баги.
  2. Протокол WAMP на бэкенде — предстояло научить клиент декодировать any, декодировать протоколы и создать объект, который отвечает за отправку и приём сообщений.

Примечание: описанные ниже способы декодирования, можно применить и в других задачах.
Читать дальше →
Всего голосов 44: ↑44 и ↓0+44
Комментарии18

Код на React и TypeScript, который работает быстро. Доклад Яндекса

Время на прочтение16 мин
Количество просмотров27K
Евангелисты Svelte и других библиотек любят показывать примеры тормозящих компонентов на React. React и TypeScript дают много возможностей создавать медленный код. После доклада Виктора victor-homyakov вы сможете писать более производительные компоненты без усложнения кода.

— Здравствуйте, меня зовут Виктор, я один из разработчиков страницы поиска Яндекса. На ней каждый день сотни миллионов пользователей вводят свои запросы, получают страницу со ссылками или сразу с правильными ответами. Из-за такого количества запросов нам очень важно, чтобы наш код работал оптимально. И, конечно, я сразу должен затронуть тему преждевременной оптимизации кода.
Читать дальше →
Всего голосов 25: ↑24 и ↓1+23
Комментарии30

Micro-frontends. Асинхронный подход к мультикомандной разработке

Время на прочтение12 мин
Количество просмотров6.8K

Вы когда нибудь задумывались о том, как в условиях мультикомандной разработки современного продукта избежать задержек из-за синхронизации команд? Далее я поделюсь опытом такой разработки на примере нашей команды Циан.Финансы. Деталями вертикального подхода к разработке и почему мы работаем именно так.

Читать дальше →
Всего голосов 7: ↑4 и ↓3+1
Комментарии19

Jupyter для .NET. «Как в питоне»

Время на прочтение3 мин
Количество просмотров8.8K
Несколько месяцев назад Microsoft рассказали о Jupyter в .NET. Но активности по этому топику очень мало, а ведь тема очень интересная. Но что такое прикольное придумать? Я решил сделать удобный вывод класса Entity из библиотеки символьной алгебры:



Выглядит круче, чем в питоне. Делается просто, доставляет массу удовольствия. Приглашаю под кат!
Читать дальше →
Всего голосов 24: ↑24 и ↓0+24
Комментарии11

Как приручить Charles Proxy?

Время на прочтение10 мин
Количество просмотров306K
Привет! Многие из тех, кто приходит к нам на собеседование на должность тестировщика, с гордостью заверяют, что они могут пользоваться Charles Proxy. Но когда погружаешься в техническую часть, то становится очевидно, что кандидат только слышал об этом инструменте. Давайте уже наконец скорее приручим эту вазу!


Читать дальше →
Всего голосов 27: ↑27 и ↓0+27
Комментарии25

RBK.money выпустила первый в мире open-source платежный процессинг — творим будущее вместе

Время на прочтение15 мин
Количество просмотров40K


Привет!


Если вы читали наши предыдущие посты (читали же?), то точно помните, что мы в RBK.money очень сильно за опенсорс. Настолько, что выложили в открытый доступ наш антифрод в виде открытых исходников под лицензией Apache 2.0.


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


Зачем мы это сделали? Как это работает внутри? Как теперь жить дальше? Читайте под катом. Я гарантирую, что такого вы еще не встречали — еще никто в мире не опенсорсил платежную систему такого уровня.


История меняется прямо сейчас на ваших глазах!

Читать дальше →
Всего голосов 86: ↑84 и ↓2+82
Комментарии43

Современные архитектуры фронт-энда

Время на прочтение12 мин
Количество просмотров47K

image


В статье "Contemporary Front-end Architectures" рассмотрены архитектуры фронт-энда с точки зрения потоков данных в исторической ретроспективе.


Материал состоит из трех частей


  1. Теория и история
  2. Реализация
  3. Перспективы

Читать дальше →
Всего голосов 25: ↑24 и ↓1+23
Комментарии14

Чистая Архитектура для веб-приложений

Время на прочтение36 мин
Количество просмотров103K
Хочу поделиться с вами подходом который я уже много лет использую в разработке приложений, в том числе и веб-приложений. Многим разработчикам настольных, серверных и мобильных приложений этот подход хорошо знаком, т.к. является фундаментальным при построении таких приложений, однако в вебе он представлен очень скудно, хотя желающие использовать такой подход однозначно есть. Кроме того на таком подходе написан редактор VS Code.

Чистая Архитектура

В результате применения этого подхода вы отвяжетесь от конкретного фреймворка. Сможете легко переключать библиотеку представления внутри вашего приложения, например React, Preact, Vue, Mithril без переписывания бизнес логики, а в большинстве случаев даже вьюхи. Если у вас есть приложение на Angular 1, вы без проблем сможете перевести его на Angular 2+, React, Svelte, WebComponents или даже свою библиотеку представления. Если у вас есть приложение на Angular 2+, но нету специалистов для него, то вы без проблем сможете перевести приложение на более популярную библиотеку без переписывания бизнес логики. А в итоге вообще забыть про проблему миграции с фремворка на фреймворк. Что же это за магия такая?
Читать дальше →
Всего голосов 24: ↑20 и ↓4+16
Комментарии80

Понижаем барьеры на вход в распознавание речи

Время на прочтение15 мин
Количество просмотров18K

image


Автоматическое распознавание речи (STT или ASR) прошло долгий путь совершенствования и имеет довольно обширную историю. Расхожим мнением является то, что лишь огромные корпорации способны на создание более-менее работающих "общих" решений, которые будут показывать вменяемые метрики качества вне зависимости от источника данных (разные голоса, акценты, домены). Вот несколько основных причин данного заблуждения:


  • Высокие требования к вычислительным мощностям;
  • Большое количество данных, необходимых для обучения;
  • В публикациях обычно пишут только про так называемые state-of-the-art решения, имеющие высокие показатели качества, но абсолютно непрактичные.

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


  • Расскажем, что можно достигнуть отличного результата в рамках разумного времени, используя лишь две видеокарты NVIDIA GeForce 1080 Ti;
  • На всякий случай еще раз представим датасет Open STT для русского языка на 20 000 часов;
  • Опишем различные подходы, позволяющие ускорить процесс тренировки STT на порядок.

В этой статье есть 3 основных блока — критика литературы и доступных инструментов, паттерны для проектирования своих решений и результаты нашей модели.

Читать дальше →
Всего голосов 24: ↑24 и ↓0+24
Комментарии40

Экосистема Low-Code решений

Время на прочтение8 мин
Количество просмотров20K
image

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

Я бы хотел рассмотреть, что это за инструменты, как именно они помогают, и какие выглядят наиболее многообещающе.
Читать дальше →
Всего голосов 4: ↑4 и ↓0+4
Комментарии0
1
23 ...

Информация

В рейтинге
Не участвует
Откуда
Москва, Москва и Московская обл., Россия
Дата рождения
Зарегистрирован
Активность