Pull to refresh
30
0
Станислав @CyberAP

Фронтенд-разработчик

Send message

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

Reading time 16 min
Views 16K
image

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

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

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

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

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

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

Vue mixins, the explicit way (by an example of BEM modifiers plugin)

Reading time 3 min
Views 7K


Vue mixins are the recommended way of sharing common functionality between components. They are perfectly fine until you use more than one for them. That's because they are implicit by design and pollute your component's context. Let's try to fix this by giving them as much explicitness as we can.

Read more →
Total votes 26: ↑26 and ↓0 +26
Comments 0

Контролируем переполнение ячейки таблицы с помощью max-width

Reading time 2 min
Views 21K


Допустим, мы хотим сделать двухколоночную раскладку с помощью свойства table-cell. Левая колонка будет занимать всю доступную ширину, правая же может иметь два варианта в нашем случае:

  • мы зададим этой колонке фиксированную ширину;
  • она будет равняться минимальной ширине контента → minimum content width (MCW).

Едем дальше
Total votes 31: ↑25 and ↓6 +19
Comments 21

Обновление XenForo 1.3

Reading time 1 min
Views 8.1K
image


Сегодня состоялся релиз XenForo 1.3.

Пару слов о XenForo


XenForo — платный форумный движок, авторами которого являются два бывших ведущих разработчика vBulletin 3. Написан на PHP с использованием Zend Framework. Отличается стабильностью и надежностью. Цена лицензии — $140.

Что нового?
Total votes 12: ↑7 and ↓5 +2
Comments 1

Armikrog — новая игра от создателей Neverhood и Earthworm Jim

Reading time 1 min
Views 44K


Дуглас ТенНейпл разместил на кикстартере свой новый проект — игру Armikrog, «духовного наследника» Neverhood. Специально для этой игры была собрана та же команда, что работала над Neverhood, включая Терри Тейлора, который написал замечатльный саундтрек для этой игры. Ребята подготовили небольшой ролик, фанатам Neverhood смотреть обязательно. Перевод выполнен мной.



Проект на кикстартере: www.kickstarter.com/projects/1949537745/armikrog
Total votes 89: ↑86 and ↓3 +83
Comments 69

Повторяющийся зубчатый фон на CSS

Reading time 2 min
Views 44K


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

Важные требования к такому забору:

  • Никаких изображений!
  • Он должен спокойно тянуться по горизонтали
  • Обязательно должен поддерживать неравномерный фон у подложки
  • Фон не должен требовать никакой экстра-разметки. Лучше всего будет избегать псевдо-элементов (экономия — хорошо).

Поддерживаемые браузеры: Chrome, Firefox (> 3.6), Opera (>= 12), Safari (>= 5), IE10.

Для IE 7, 8 у нас будет фоллбэк в виде обычной заливки. А вот с IE9 проблема — он не поддерживает градиенты, но при этом понимает hsla и rgba цвета. Воистину «великолепный» браузер. Что ж, его пока придётся игнорировать. Если кто–то подскажет хороший фоллбэк для IE буду только благодарен.
Читать дальше →
Total votes 82: ↑74 and ↓8 +66
Comments 66

Internet Explorer 10 для Windows 7 в середине ноября

Reading time 1 min
Views 27K
Компания Майкрософт объявила о выходе превью версии Internet Explorer в ноябре этого года для ОС Windows 7. Хотя основная задача для Майкрософт сейчас выпуск и поддержка Windows 8 они не забывают про пользователей Windows 7 и представят там те же стандарты которые они применили в своей новой операционной системе. Важно отметить что превью версии IE10 уже около года и всё это время она была доступна только для Windows 8.
Читать дальше →
Total votes 44: ↑37 and ↓7 +30
Comments 63

Apple заработала 5 миллионов долларов за 10 дней на продаже iPhoto

Reading time 1 min
Views 740


Хоть Apple и получает огромную прибыль от торговли электронными устройствами, она всё ещё имеет отдельную статью доходов и от продаж программного обеспечения. С такой огромной базой устройств по всему миру каждое приложение имеет серьёзный потенциал разойтись огромным тиражом.
Читать дальше →
Total votes 37: ↑28 and ↓9 +19
Comments 28

Затухающие полоски на CSS3 без изображений

Reading time 2 min
Views 22K
Хочу поделиться с вами моим способом создания затухающих полосок без использования изображений. Дальше под катом описан метод создания таких элементов с комментариями и примером.


Читать дальше →
Total votes 97: ↑85 and ↓12 +73
Comments 21

Information

Rating
Does not participate
Location
Нижний Новгород, Нижегородская обл., Россия
Registered
Activity