Pull to refresh
128
0
Владислав Екушев @jarvis394

React, TypeScript, NodeJS разработчик

Send message

Анимация в браузерах и как с ней работать

Level of difficultyMedium
Reading time10 min
Views5.3K

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

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

Меня зовут Сергей Чикуёнок. Я ведущий разработчик в ОК. В этом материале я расскажу об основных этапах работы с анимацией для браузеров, ключевых сложностях и вариантах их нативной оптимизации. 

Читать далее
Total votes 43: ↑43 and ↓0+43
Comments8

Глубокий JS. Области тьмы или где живут переменные

Level of difficultyHard
Reading time16 min
Views13K

В статье Глубокий JS. В память и типах и данных мы говорили о том, как выглядит структура переменной каждого конкретного типа в памяти движка V8. В этой статье предлагаю теперь рассмотреть, где именно эти переменные хранятся и каким образом попадают в память.

Речь пойдет об Абстрактном Синтаксическом Дереве (AST), типах переменных, областях видимости и выделении памяти в стэке и куче.

Читать далее
Total votes 15: ↑15 and ↓0+15
Comments12

Как работает JS: о внутреннем устройстве V8 и оптимизации кода

Reading time11 min
Views159K
[Советуем почитать] Другие 19 частей цикла
Часть 1: Обзор движка, механизмов времени выполнения, стека вызовов
Часть 2: О внутреннем устройстве V8 и оптимизации кода
Часть 3: Управление памятью, четыре вида утечек памяти и борьба с ними
Часть 4: Цикл событий, асинхронность и пять способов улучшения кода с помощью async / await
Часть 5: WebSocket и HTTP/2+SSE. Что выбрать?
Часть 6: Особенности и сфера применения WebAssembly
Часть 7: Веб-воркеры и пять сценариев их использования
Часть 8: Сервис-воркеры
Часть 9: Веб push-уведомления
Часть 10: Отслеживание изменений в DOM с помощью MutationObserver
Часть 11: Движки рендеринга веб-страниц и советы по оптимизации их производительности
Часть 12: Сетевая подсистема браузеров, оптимизация её производительности и безопасности
Часть 12: Сетевая подсистема браузеров, оптимизация её производительности и безопасности
Часть 13: Анимация средствами CSS и JavaScript
Часть 14: Как работает JS: абстрактные синтаксические деревья, парсинг и его оптимизация
Часть 15: Как работает JS: классы и наследование, транспиляция в Babel и TypeScript
Часть 16: Как работает JS: системы хранения данных
Часть 17: Как работает JS: технология Shadow DOM и веб-компоненты
Часть 18: Как работает JS: WebRTC и механизмы P2P-коммуникаций
Часть 19: Как работает JS: пользовательские элементы

Перед вами — второй материал из серии, посвящённой особенностям работы JavaScript на примере движка V8. В первом шла речь о механизмах времени выполнения V8 и о стеке вызовов. Сегодня мы углубимся в особенности V8, благодаря которым исходный код на JS превращается в исполняемую программу, и поделимся советами по оптимизации кода.


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

Руны и лёд: техническое собеседование по TypeScript

Reading time6 min
Views14K

Крисс проводит тебя в комнату для совещаний.

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

«Как дела?», — спрашивает он.

Сложный вопрос для начала беседы, придётся объяснять внутренний механизм, приводящий в движение твои действия. Возможно, он риторический?

«Действительно, как?», — улыбаешься ты.

«… хм, отлично. Ну, приступим?»

Ты утвердительно киваешь.

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

Волноваться? Ты с трудом вспоминаешь это ощущение. Возможно, оно осталось в твоей юности, когда ты зимовал на Свальбарде* с медведями. Ещё до того, как ты понял сейд.
Читать дальше →
Total votes 40: ↑39 and ↓1+47
Comments14

Как создать монорепозиторий с несколькими сервисами, используя Lerna и Yarn?

Level of difficultyMedium
Reading time6 min
Views5.1K

Для разработчиков построение масштабируемых и поддерживаемых приложений может быть значительным вызовом, особенно при работе с большими кодовыми базами и несколькими сервисами. К счастью, использование подхода монорепозитория в сочетании с мощными инструментами, такими как NX, Lerna и Yarn, может обеспечить упрощенный процесс разработки, который повышает общность кода и возможность повторного использования.

Это подробное руководство нацелено на помощь разработчикам в настройке монорепозитория с использованием NX, Lerna и Yarn. Руководство включает подробную информацию о начальной настройке, структуре каталогов, управлении зависимостями, тестировании и развёртывании.

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

Читать далее
Total votes 5: ↑5 and ↓0+5
Comments1

Как пользоваться дизайнером

Level of difficultyEasy
Reading time6 min
Views4.4K

Вот уже семнадцать лет я работаю графическим дизайнером. Как в найме, так и для частных заказчиков. Я не тот дизайнер, чьи работы лайкают на behance, растаскивают по доскам на pinterest и кидают референсами заказчику. Я обычный ремесленник и трудяга, продавший душу корпорации за комфортный соцпакет и стабильную зарплату. И нас таких – легион. Если вы хоть раз заказывали дизайн, вы почти наверняка имели дело с человеком вроде меня. В этой статье опишу жёстко и честно, почему работа с нами обычно строится через жопу.
И подскажу решение.

Читать далее
Total votes 21: ↑20 and ↓1+28
Comments11

Как писать конспекты на компьютере быстрее, чем от руки, при помощи VS Code

Reading time5 min
Views47K

Привет всем!

В этой статье говорится о том, как я конспектирую на компьютере, а точнее описываются способы ускорения набора LaTeX-овского текста.

Читать далее
Total votes 42: ↑42 and ↓0+42
Comments50

Создание e-ink дисплея с прогнозом погоды

Reading time10 min
Views21K

Кому-то нравится украшать дом электронными фоторамками, а кому-то — цифровым прогнозом погоды. Если вы из их числа, то читайте, как собрать своё собственное метео-табло.

Читать далее
Total votes 74: ↑72 and ↓2+83
Comments49

Настройка GUI в линуксе для мониторов с High DPI

Reading time3 min
Views37K
В последнее время появилось достаточно много мониторов с высоким разрешением, 150 dbi и выше, особенно в ноутбуках. И при этом всё выглядит жутко маленьким.
Причина этого — система думает что у Вашего монитора разрешение 96..100 dpi.
Решать это только увеличением размера шрифта неправильно, т.к. размеры всех остальных элеменов интерфейса остаются маленькими. Надо чтобы графическая оболочка сама это делала.

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

Ниже будет идти список где что поправить, все параметры привожу для своего монитора — 13,3" при 2560x1600, это даёт 226 dpi. Более высокое разрешение сейчас я видел только в ноутбуке Fujistu U904 — 262 dpi.
Читать дальше →
Total votes 38: ↑35 and ↓3+32
Comments59

Полевой набор пентестера

Reading time7 min
Views28K

Сегодня расскажем о составе нашего типового полевого набора, который пентестеры берут с собой, выезжая для проведения анализа беспроводных сетей или проектов в формате Red Team.

Заглянуть внутрь гаджет-органайзера
Total votes 66: ↑66 and ↓0+66
Comments16

Алгоритмы сортировки и их производительность

Reading time17 min
Views45K

Здравствуйте, давно читаю Хабр и все хотел написать кому-нибудь статью, но не знал с чего начать и о чем писать. Но решил что тянуть кота за причинное место. Надо просто взять и написать обзор о чем то что я знаю и что будет просто для начало. Поэтому решил описать алгоритмы сортировки в размере 37 штук. Я понимаю, что на Хабре есть подобные статьи, одна постараюсь их добавить количеством алгоритмов и приведением небольшого числа графиков.

Читать далее
Total votes 65: ↑63 and ↓2+75
Comments29

Под капотом у Mobx. Пишем свою реактивную библиотеку с нуля

Reading time23 min
Views15K

Первое мое знакомство с Mobx началось с удивления. Я не понимал всю магию библиотеки и задавал себе вопрос: “А как это возможно?”. Кажется, в ней используются какие-то подкапотные возможности JS или Mobx вообще написан на другом языке. 

И вот, потратив 3 месяца в исходниках, я развеял для себя магию. Mobx все таки написан на JS и даже имеет множественные ограничения, которые нужно соблюдать, чтобы ваш браузер не взорвался.

В этой статье мы создадим свой Mobx с нуля, а так же свяжем его с React, через собственно написанный HOC observer. В конце у вас будет общее понимание реактивности, которое поможет в самостоятельном осмыслении не только Mobx, но и других реактивных библиотек и фреймворков.

Читать далее
Total votes 20: ↑20 and ↓0+20
Comments12

Истории старой мейлрушечки

Reading time9 min
Views36K


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

Сегодня в честь 18-летия компании мы впервые расскажем о реальной истории Mail.Ru Group. Впервые за годы жизни поделимся тем, что раньше было на уровне мифов и легенд даже внутри самой компании. Мы разговорили людей, проработавших в компании много лет и непосредственно участвовавших во всех событиях.
Total votes 148: ↑134 and ↓14+120
Comments107

Собеседование на должность JavaScript разработчика

Reading time4 min
Views287K


Недавно прочитал неплохой пост на тему поиска работы QA и подумал, что похожий пост был бы полезен для JavaScript разработчиков. В конечном счёте, веб движется вперед семимильными шагами, и соискателей на позицию JavaScript программиста хоть отбавляй (разумеется, хороших всегда меньше).
Читать дальше →
Total votes 126: ↑115 and ↓11+104
Comments313

Как правильно верстать в 2022 году. Часть 1

Reading time11 min
Views89K

Меня зовут Николай, я Frontend-разработчик IT-компании Relog. Хочу рассказать о самых распространённых ошибках в вёрстке современных проектов.

Дело в том, что лишь малая часть современных фронтендеров обращает внимание на работу с HTML и CSS, предпочитая готовые решения, вроде UI-библиотек и систем сеток. Но эти решения неидеальные и приходится дописывать обёртки вокруг них, видоизменять код, переписывать стили и совершать прочие действия для соответствия требованиям проекта. Тут-то и начинаются проблемы: вёрстка местами становится избыточной, стили переназначются через important и с каждым релизом проект всё сложней поддерживать. Я уже не говорю об удобстве использования и доступности. Об этом думают вообще в последнюю очередь.

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

Читать далее
Total votes 41: ↑39 and ↓2+44
Comments42

Гайд по архитектуре приложений для Android. Часть 1: обзор

Reading time7 min
Views52K

Перевод обновлённого гайда Android по архитектуре приложений. Это — первая часть из пяти: обзор рекомендаций по архитектуре.

Читать далее
Total votes 10: ↑10 and ↓0+10
Comments2

Работа за границей. Переезд в Швецию

Reading time6 min
Views26K

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

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

Читать далее
Total votes 19: ↑11 and ↓8+9
Comments28

Почему нельзя перевернуть строку с флагом-эмодзи?

Reading time11 min
Views7.4K
Каким, по-вашему, будет результат выполнения следующего кода на Python?


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

Вот как я рассуждал, когда впервые увидел этот вопрос:

  • Строкаflag содержит один символ.
  • [::-1] переворачивает строку flag.
  • Строка, обратная строке с одним символом, будет такой же, как и исходная.
  • Следовательно, reversed_flag должна быть равна "".
Читать дальше →
Total votes 25: ↑17 and ↓8+15
Comments18

Основы внутреннего устройства JavaScript

Reading time6 min
Views40K
image

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

Введение


Почти все уже слышали о концепции движка V8 и большинство людей знает, что язык JavaScript однопотоковый или что он использует очередь обратных вызовов.

В этом посте мы подробно разберём эти концепции и объясним, как же работает JavaScript. Благодаря знанию этих подробностей вы сможете писать более оптимальные приложения, надлежащим образом использующие API. Если вы работаете с JavaScript относительно недавно, этот пост поможет вам понять, почему JavaScript настолько «странный» по сравнению с другими языками. А если вы опытный разработчик на JavaScript, то он позволит вам по-новому взглянуть на внутреннее устройство JavaScript Runtime, с которым вы работаете каждый день.
Читать дальше →
Total votes 26: ↑23 and ↓3+29
Comments5

Классика фантастики и фэнтези, которая лишь недавно добралась до русскоязычного читателя

Reading time6 min
Views57K

В фэнтези и фантастике есть целый пласт произведений, которые уже давно считаются классическими и хорошо известны читателям. Большая часть таких книг давно переведена на русский язык, ведь в 90-х годах в наших палестинах очень активно издавались книги популярных фантастов. Однако некоторые романы, по праву имеющие на Западе статус классических, на русском языке впервые увидели совсем недавно. Иногда из-за того, что пик их популярности пришелся на время до распада Советского Союза, когда с переводами западной фантастики все было гораздо сложнее, иногда из-за неформатности или предполагаемой сложности для читателя, иногда по финансовым причинам. Рассказываем о нескольких таких произведениях, с которыми русскоязычные читатели смогли познакомиться только в последнее время.

Читать далее
Total votes 108: ↑101 and ↓7+110
Comments22
1

Information

Rating
Does not participate
Location
Санкт-Петербург, Санкт-Петербург и область, Россия
Date of birth
Registered
Activity

Specialization

Frontend Developer, UI/UX Designer
Junior
TypeScript
React
Node.js
Redux
Adaptive layout
Figma Design
UI/UX design