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

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

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

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

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

Давайте посмотрим, как работали комментарии полгода назад, до того, как мы начали работу по оптимизации.

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.

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

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

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

Пару слов о XenForo

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

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



Проект на кикстартере: www.kickstarter.com/projects/1949537745/armikrog

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

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

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

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

Для IE 7, 8 у нас будет фоллбэк в виде обычной заливки. А вот с IE9 проблема — он не поддерживает градиенты, но при этом понимает hsla и rgba цвета. Воистину «великолепный» браузер. Что ж, его пока придётся игнорировать. Если кто–то подскажет хороший фоллбэк для IE буду только благодарен.

Компания Майкрософт объявила о выходе превью версии Internet Explorer в ноябре этого года для ОС Windows 7. Хотя основная задача для Майкрософт сейчас выпуск и поддержка Windows 8 они не забывают про пользователей Windows 7 и представят там те же стандарты которые они применили в своей новой операционной системе. Важно отметить что превью версии IE10 уже около года и всё это время она была доступна только для Windows 8.

Идея взята у Dan Eden (demo), я лишь немного доработал способ.

В этой статье я покажу один из вариантов создания градиента для границ у любого блока с помощью CSS3.

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

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