Pull to refresh
-3
0.2

Front-End Developer

Send message

Как мы ускоряли комментарии Хабра

Reading time16 min
Views16K
image

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

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

Этому есть несколько причин. Во-первых, Хабр стал одностраничным приложением (SPA, Single Page Application) на Vue, то есть теперь переходы между страницами рисуются на клиенте с помощью JS вместо классического серверного рендеринга (Server-Side Rendering, SSR). Такие SPA-страницы отображаются быстрее на современных устройствах, но на старых девайсах могут тормозить.

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

В октябре мы постепенно выкатывали на часть пользователей обновлённую версию комментариев, над которой трудились последние полгода. Наши новые комментарии должны рендериться быстрее и доставлять удовольствие всем, а не только обладателям топовых MacBook Pro c M1 Max.

Давайте посмотрим, как работали комментарии полгода назад, до того, как мы начали работу по оптимизации.
Читать дальше →
Total votes 60: ↑53 and ↓7+82
Comments147

Разбираемся в сортах реактивности

Reading time27 min
Views36K

Здравствуйте, меня зовут Дмитрий Карловский и я… прилетел к вам на турбо-реактивном самолёте. Основная суть реактивного двигателя изображена на картинке.



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


Это — текстовая расшифровка выступления на SECON.Weekend Frontend'21. Вы можете посмотреть видео запись, прочитать как статью, либо открыть в интерфейсе проведения презентаций.

Читать дальше →
Total votes 53: ↑45 and ↓8+50
Comments55

HTTP/3 от А до Я: основные концепции. Часть 1

Reading time20 min
Views78K

image
Фото Florencia Viadana, Unsplash.com


После почти пятилетних разработок протокол HTTP/3 наконец приближается к окончательному выпуску. Предыдущие итерации уже доступны как экспериментальная функция, но в 2021 году мы ждём широкого распространения протокола. Что такое HTTP/3? Зачем выпускать его так рано после HTTP/2? Как его можно или нужно использовать? Как он влияет на производительность?

Читать дальше →
Total votes 79: ↑78 and ↓1+95
Comments48

Эффективный поиск XSS-уязвимостей

Reading time21 min
Views40K


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


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


Под катом — и текст, и видео. Далее повествование идет от лица Ивана.

Total votes 23: ↑23 and ↓0+23
Comments4

JavaScript: Стек вызовов и магия его размера

Reading time6 min
Views24K

Большинство разработчиков, которые использовали рекурсию для решения своих задач, видели такую ошибку:

RangeError: Maximum call stack size exceeded.

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

Большинство фронтэнд-разработчиков откроют для себя в этой статье что-то новенькое!

Читать далее
Total votes 16: ↑13 and ↓3+14
Comments40

Windows: достучаться до железа

Reading time11 min
Views55K

Меня всегда интересовало низкоуровневое программирование – общаться напрямую с оборудованием, жонглировать регистрами, детально разбираться как что устроено... Увы, современные операционные системы максимально изолируют железо от пользователя, и просто так в физическую память или регистры устройств что-то записать нельзя. Точнее я так думал, а на самом деле оказалось, что чуть ли не каждый производитель железа так делает!

Читать далее
Total votes 132: ↑131 and ↓1+173
Comments90

Я перехожу на JavaScript

Reading time9 min
Views61K
После того, как я 5 лет писал на Go, я решил, что мне пора двигаться дальше. Go хорошо послужил мне. Вероятно, это был лучший язык, которым я мог бы пользоваться столько времени, но теперь настал момент оставить Go.

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



Мне не хотелось бы писать материал о том, почему я перешёл с Go на JavaScript, перечисляя минусы Go. Я полагаю, что подобные материалы оторваны от жизни и приносят читателям очень мало пользы. Поэтому я написал материал о том, что мне нравится в JavaScript, о том, что подвигло меня на переход.
Читать дальше →
Total votes 127: ↑84 and ↓43+79
Comments409

Мои любимые вопросы о CSS с ответами

Reading time7 min
Views37K

Я проходил множество интервью, и когда дело доходило до вопросов о CSS, то они сводились к: "Перечислите все известные способы центрирования элемента". После 5 ответов, откровенно, это надоело. Поэтому я хочу поделиться своими любимыми вопросами о CSS, которые я задаю на интервью.

Читать дальше →
Total votes 16: ↑13 and ↓3+19
Comments34

Подготовка к собеседованиям в IT-гиганты: как я преодолела проклятье алгоритмического собеседования

Reading time12 min
Views204K

Дисклеймер:


Я не программирую с трёх лет, не знаю наизусть Кнута, не являюсь призёром олимпиад по информатике и чемпионатов по спортивному программированию, не училась в MIT. У меня за плечами образование по информатике и 6 лет опыта в коммерческой разработке. И до недавнего времени я не могла пройти дальше первого технического скрининга в IT-гиганты из FAANG (Facebook, Amazon, Apple, Netflix, Google и подобные), хотя предпринимала несколько попыток. 

Но теперь всё изменилось, я получила несколько офферов и хочу поделиться опытом, как можно к этому прийти. Речь пойдёт о позиции Software Engineer в европейских офисах перечисленных компаний.
Читать дальше →
Total votes 155: ↑150 and ↓5+191
Comments342

70 вопросов по JavaScript для подготовки к собеседованию

Reading time43 min
Views877K
Доброго времени суток, друзья!

Надеюсь, эта статья будет полезна как начинающим разработчикам, так и опытным.

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

Буду признателен за развернутые комментарии. Все замечания будут учтены при редактировании статьи.

Итак, поехали.
Читать дальше →
Total votes 37: ↑34 and ↓3+40
Comments135

do {Yoga} while (болит спина)

Reading time9 min
Views38K

Вступление


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

image

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

Перед написанием текста я изучил публикации моих коллег по цеху, например, вот эту, и не хочу повторяться, но, на мой взгляд, моя статья имеет несколько другое направление, хотя и рассказывает о том же предмете. Плюс, я надеюсь, что кого-то может зацепить или, говоря научно, мотивировать, тот эмоциональный фон, на подъеме которого я эту статью сочиняю. То, что описано ниже, пожалуй, самое значительное мое достижение на данном этапе моей жизни. Я только сейчас это осознал и просто не могу не рассказать об этом окружающим.

С чего все началось и чем закончилось


Итак, все началось давным давно и довольно банально, как и у большинства моих соотечественников. А именно: 10 лет сидячий жизни в школе = проблемы с осанкой, + 7 лет сидячей жизни в университете = проблемы с осанкой (уже видимо начались непосредственно проблемы с позвоночником) + 10 лет сидячей работы в IT = проблемы с осанкой (уже совершенно точно серьезные проблемы с позвоночником). Я периодически занимался какими-то физическими упражнениями типа игры в футбол, катания на сноуборде или нерегулярных походов на тхэквандо, но, насколько мне кажется теперь, это скорее негативно, чем позитивно отражалось на состоянии моей спины.
Читать дальше →
Total votes 47: ↑44 and ↓3+59
Comments92

5 расширений и тем для VS Code, которые способны изменить жизнь фронтенд-разработчика

Reading time3 min
Views38K
Автор статьи, перевод которой мы публикуем сегодня, хочет рассказать о нескольких расширениях и темах для популярного редактора VS Code, которые способны улучшить жизнь разработчика.


Читать дальше →
Total votes 36: ↑23 and ↓13+26
Comments28

Иван Тулуп: асинхронщина в JS под капотом

Reading time24 min
Views52K
А вы знакомы с Иваном Тулупом? Скорее всего да, просто вы еще не знаете, что это за человек, и что о состоянии его сердечно-сосудистой системы нужно очень заботиться.

Об этом и о том, как работает асинхронщина в JS под капотом, как Event Loop работает в браузерах и в Node.js, есть ли какие-то различия и, может быть, похожие вещи рассказал Михаил Башуров (SaitoNakamura) в своем докладе на РИТ++. С удовольствием делимся с вами расшифровкой этого познавательного выступления.



О спикере: Михаил Башуров — fullstack веб-разработчик на JS и .NET из Luxoft. Любит красивый UI, зеленые тесты, транспиляцию, компиляцию, технику compiler allowing и улучшать dev experience.

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

Total votes 40: ↑33 and ↓7+26
Comments4

Что ты такое, Event Loop? Или как устроен цикл событий в браузере Chrome

Reading time3 min
Views152K
Как думаете, что произойдет, если запустить в консоли браузера этот фрагмент кода?

function foo() {
  setTimeout(foo, 0);
}

foo();

А этот?

function foo() {
  Promise.resolve().then(foo);
}

foo();

Если вы также, как и я, прочитали кучу статей про Event Loop, Main Thread, таски, микротаски и прочее, но затрудняетесь ответить на вопросы выше — эта статья для вас.
Читать дальше →
Total votes 50: ↑47 and ↓3+44
Comments16

Резюме глазами интервьюера

Reading time9 min
Views53K
Когда я составляла свое первое резюме, процесс отбора на очное интервью мне казался магией. Люди, принимающие решения, представлялись «черными ящиками», которые определяют: кандидат «интересен» или «неинтересен» — по непонятным критериям.

Статьи «Как составить резюме» отчасти были полезны, а отчасти путали и нагоняли страх: их авторы утверждали, что мое письмо может попасть в корзину, если не выдержана структура или ответственный сотрудник не увидел в нем ключевых слов за первые 5 секунд чтения.

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

В этой статье я хочу рассказать:

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

А главное — хочу объяснить логику, которой мы руководствуемся, чтобы процесс больше не выглядел магией.

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

image
Читать дальше →
Total votes 91: ↑85 and ↓6+79
Comments106

Руководство по Node.js, часть 1: общие сведения и начало работы

Reading time10 min
Views329K
Мы начинаем публикацию серии материалов, которые представляют собой поэтапный перевод руководства по Node.js для начинающих. А именно, в данном случае «начинающий» — это тот, кто обладает некоторыми познаниями в области браузерного JavaScript. Он слышал о том, что существует серверная платформа, программы для которой тоже пишут на JS, и хотел бы эту платформу освоить. Возможно, вы найдёте здесь что-то полезное для себя и в том случае, если уже знакомы с Node.js.

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



Сегодня мы обсудим особенности Node.js, начнём знакомство с экосистемой этой платформы и напишем серверный «Hello World».

Читать дальше →
Total votes 47: ↑39 and ↓8+31
Comments25

Корпоративный синдром

Reading time13 min
Views72K
— Идея с айфонами — полное говно. — начал встречу Сергей.

— Извините, Сергей, я не ослышалась? — недобро прищурившись, спросила Светлана Владимировна.

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

Татьяна, видимо, не ожидавшая такого развития событий, сидела с круглыми глазами. Этими круглыми глазами она и уставилась на Сергея. Впрочем, как и остальные господа топ-менеджеры.

— И это говорит человек, больше всех радеющий за развитие? — с ехидной улыбкой спросила Марина, директор по качеству?

— Ты бы молчала лучше… — вздохнул Сергей.

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

— Идея не Сергея, а моя. — твердо проговорила Светлана Владимировна. — Сергей, я жду объяснений. И выбирайте, пожалуйста, выражения, вы не с программистами разговариваете. Да и с программистами так разговаривать не стоит.
Читать дальше →
Total votes 226: ↑194 and ↓32+162
Comments254

Освоение Vuex — с нуля до героя

Reading time7 min
Views155K

Привет, Хабр! представляю вашему вниманию перевод статьи «Mastering Vuex — Zero to Hero» автора Sanath Kumar.


Официальная документация Vuex определяет его как паттерн управления состоянием + библиотека для приложений Vue.js. Но что это значит? Что такое паттерн управления состоянием?


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


Читать дальше →
Total votes 11: ↑9 and ↓2+7
Comments22

PHP-скрипт, который обновляет сам себя

Reading time4 min
Views34K


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

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

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

Это не туториал, поэтому вот сразу окончательный вариант скрипта: www.webasyst.com/etc/ru/selfupdate-1 (скрипт index.php; ≈20 КБ).
Скрипт содержит класс selfUpdate, который выполняет обновление самого себя (скачивает обновленную версию файла index.php и заменяет ей работающую в текущий момент).

Под катом рассмотрим как устроен процесс обновления и какие могут возникнуть проблемы при обновлении.
Читать дальше →
Total votes 80: ↑57 and ↓23+34
Comments58

Команды для работы с JavaScript-консолью в браузерах и повышение производительности труда программиста

Reading time5 min
Views63K
Если вы занимаетесь веб-программированием, это значит, что вам не надо рассказывать о том, насколько в вашей работе важна отладка. Нередко для записи данных в логи, для их форматирования или вывода на экран используют внешние библиотеки, не учитывая при этом того факта, что в распоряжении программистов имеются JavaScript-команды для работы с консолями, которые встроены в браузеры. И обладают эти консоли гораздо более серьёзными возможностями, чем может показаться на первый взгляд.

image

Пожалуй, первое, что многим приходит в голову при слове «консоль» — это команда console.log(). Однако, она — лишь одна из многих подобных команд. Материал, перевод которого мы сегодня публикуем, посвящён особенностям работы с консолью JavaScript.
Читать дальше →
Total votes 28: ↑26 and ↓2+24
Comments7

Information

Rating
2,004-th
Location
Краснодар, Краснодарский край, Россия
Registered
Activity

Specialization

Frontend Developer, Fullstack Developer
Senior
Vue.js
TypeScript
GraphQL
Node.js