Как стать автором
Обновить
-3
0

Front-End Developer

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

Как мы отказались от JPEG, JSON, TCP и ускорили ВКонтакте в два раза

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

На протяжении всей жизни мне приходится экономить вычислительные и сетевые ресурсы: сначала были компьютеры с 300 кГц (кило — не гига!) и 32 Кбайт RAM, интернет по dial-up. Потом я решал олимпиадные задачки. Теперь имею дело с терабайтами трафика и 50 млрд событий в сутки. И хотя современные телефоны в 1 000 раз мощнее любого оборудования двадцатилетней давности, я до сих пор оптимизирую. Думал даже, что это со мной что-то не так. Но потом понял, что все постоянно что-нибудь оптимизируют. 

Эта статья в меньшей степени о том, почему нужно бороться за производительность, и в большей о том, на что сейчас стоит заменить устаревший стек из JPEG, JSON, gzip и TCP — и как это сделать. 

Спойлер: у нас есть решение и мы его не только показываем — ссылки на open source в конце статьи.

Читать далее
Всего голосов 336: ↑324 и ↓12+411
Комментарии300

Собираем свой chromium/electron, с блекджеком и поэтессами

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

Добрый день. Меня зовут Тимур и я программист.

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

Если Вам хочется похейтить пользователей электрона в частности или джисеров в целом — проходите мимо. Электрон я сам не особо люблю и как раз пытаюсь сделать лучшую замену ему, что касается фронтовиков — я один из них, но про js в статье будет очень мало. Сорян.
Читать дальше →
Всего голосов 30: ↑26 и ↓4+25
Комментарии35

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

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

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

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

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

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

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

Давайте посмотрим, как работали комментарии полгода назад, до того, как мы начали работу по оптимизации.
Читать дальше →
Всего голосов 59: ↑52 и ↓7+79
Комментарии147

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

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

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



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


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

Читать дальше →
Всего голосов 53: ↑45 и ↓8+50
Комментарии55

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

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

image
Фото Florencia Viadana, Unsplash.com


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

Читать дальше →
Всего голосов 79: ↑78 и ↓1+95
Комментарии48

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

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


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


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


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

Всего голосов 23: ↑23 и ↓0+23
Комментарии4

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

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

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

RangeError: Maximum call stack size exceeded.

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

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

Читать далее
Всего голосов 16: ↑13 и ↓3+14
Комментарии40

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

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

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

Читать далее
Всего голосов 132: ↑131 и ↓1+173
Комментарии90

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

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

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



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

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

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

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

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

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

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

Дисклеймер:


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

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

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

Время на прочтение43 мин
Количество просмотров896K
Доброго времени суток, друзья!

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

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

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

Итак, поехали.
Читать дальше →
Всего голосов 37: ↑34 и ↓3+40
Комментарии135

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

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

Вступление


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

image

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

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

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


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

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

Время на прочтение3 мин
Количество просмотров39K
Автор статьи, перевод которой мы публикуем сегодня, хочет рассказать о нескольких расширениях и темах для популярного редактора VS Code, которые способны улучшить жизнь разработчика.


Читать дальше →
Всего голосов 36: ↑23 и ↓13+26
Комментарии28

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

Время на прочтение24 мин
Количество просмотров53K
А вы знакомы с Иваном Тулупом? Скорее всего да, просто вы еще не знаете, что это за человек, и что о состоянии его сердечно-сосудистой системы нужно очень заботиться.

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



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

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

Всего голосов 40: ↑33 и ↓7+26
Комментарии4

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

Время на прочтение3 мин
Количество просмотров153K
Как думаете, что произойдет, если запустить в консоли браузера этот фрагмент кода?

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

foo();

А этот?

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

foo();

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

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

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

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

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

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

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

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

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

image
Читать дальше →
Всего голосов 91: ↑85 и ↓6+79
Комментарии106

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

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

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



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

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

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

Время на прочтение13 мин
Количество просмотров72K
— Идея с айфонами — полное говно. — начал встречу Сергей.

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

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

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

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

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

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

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

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

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

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


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


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


Читать дальше →
Всего голосов 11: ↑9 и ↓2+7
Комментарии22

Информация

В рейтинге
Не участвует
Откуда
Краснодар, Краснодарский край, Россия
Зарегистрирован
Активность

Специализация

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