Привет, Хабр! Меня зовут Павел, я JS-разработчик SimbirSoft. За три года работы во фронтенде я убедился, что микроразметка необходима для оптимизации и улучшения UX на сайте, и считаю ее важным инструментом при разработке. В целом микроразметка феномен распространённый. Но что мы знаем об использовании Server-Side Rendering (SSR)? Разберёмся по порядку.
Микроформаты *
Способ семантической разметки на веб-страницах
Новости
Смотрим любое кино мгновенно
После ареста серверов Moonwalk жить стало в разы труднее. Лично я уже совсем отвык от торрентов. Нужно что-то качать, ждать, чем-то открывать, куда-то кликать, иногда еще и место на диске кончается. Как можно ждать час пока скачается фильм? За час можно жизнь прожить. Пришлось искать решение, которое позволит смотреть кино также просто, как и раньше. Норматив: от идеи посмотреть что-нибудь до начала просмотра - не более минуты.
Вы скажете: есть Popcorntime, не морочь нам голову. Все так, есть Popcorntime, идея классная, но реализация не совсем та, какую хотелось бы. Часто нет нужных дорожек, субтитров, все как-то непрозрачно работает. Вот бы можно было иметь интерфейс, который ищет необходимое кино по всем нужным трекерам и мгновенно его начинает крутить. Есть такой интерфейс.
Довольно непонятное решение в schema.org с LocalBusiness
Описание, для чего проект schema.org можно найти здесь — https://schema.org. На хабре это редкий гость, для него даже специального хаба не было.
Я знаю, что Яндекс пытался пользоваться schema.org… Они этой частью, видимо, не пользуются.
Отношения
https://schema.org/Library, https://schema.org/ExerciseGym — оба относят себя к https://schema.org/LocalBusiness.
LocalBusiness относит себя сразу к двум объектам (именно здесь и есть особенность schema.org): https://schema.org/Organization и https://schema.org/Place
Словари
https://www.oxfordlearnersdictionaries.com/definition/english/gym?q=Gym (один смысл — место, другой — организация)
https://dictionary.cambridge.org/us/dictionary/english/gym (один смысл использует неоднозначное слово "club", другой про место)
Проверку словарями можно и завалить, но я не вижу оснований для этого...
Виды защитных технологий светодиодов LED экранов
Истории
Технологии производства светодиодных LED экранов: Micro-LED vs. Mini-LED
Микробраузеры повсюду. Но что мы о них знаем?
Рис. 1. Превью одной и той же страницы в iMessage (слева), Hangouts и WhatsApp (справа)
Если упомянуть любой URL в твите, на Slack-канале, в Telegram или WhatsApp — ссылка развернётся в превью. Оно даёт примерное представление, как выглядит настоящая веб-страница.
Предварительный просмотр стал настолько обычным делом, что мы почти не обращаем внимания, как он работает. Но это мощнейшее средство привлечения новой аудитории. Возможно, оно даже важнее, чем поисковая оптимизация. К сожалению, большинство систем веб-аналитики не видят этот трафик и не могут показать, как микробраузеры взаимодействуют с вашим сайтом.
Вот основные факты о микробраузерах, которые должен знать каждый веб-разработчик.
Protobuffers — это неправильно
Узкая специализация и разработка любителями
Остановитесь. Закройте свой почтовый клиент, где уже написали мне полписьма о том, что «в Google работают лучшие в мире инженеры», что «их разработки по определению не могут быть созданы любителями». Не хочу этого слышать.
Давай просто не будем обсуждать эту тему. Полное раскрытие: мне доводилось работать в Google. Это было первое (но, к сожалению, не последнее) место, где я когда-либо использовал Protobuffers. Все проблемы, о которых я хочу поговорить, существуют в кодовой базе Google; это не просто «неправильное использование протобуферов» и тому подобная ерунда.
Издержки согласования в коллективах
Закон Амдала
В 1967 году Джин Амдал представил довод против параллельных вычислений. Он утверждал, что рост производительности ограничен, поскольку только часть задачи поддаётся распараллеливанию. Размер остальной «последовательной части» отличается в разных задачах, но она есть всегда. Этот довод стал известен как закон Амдала.
Если построить график «ускорения» выполнения задачи в зависимости от количества выделенных ей параллельных процессоров, вы увидите следующее:
Это асимптотический график для фрагмента, который не поддаётся распараллеливанию («последовательная часть»), поэтому существует верхний предел максимального ускорения
Пирамида тестов на практике
«Пирамида тестов» — метафора, которая означает группировку тестов программного обеспечения по разным уровням детализации. Она также даёт представление, сколько тестов должно быть в каждой из этих групп. Несмотря на то, что концепция тестовой пирамиды существует довольно давно, многие команды разработчиков по-прежнему пытаются неправильно реализовать её на практике должным образом. В этой статье рассматривается первоначальная концепция тестовой пирамиды и показано, как её воплотить в жизнь. Она показывает, какие виды тестов следует искать на разных уровнях пирамиды, и даёт практические примеры, как их можно реализовать.
- Важность автоматизации (тестов)
- Пирамида тестов
- Какие инструменты и библиотеки мы рассмотрим
- Пример приложения
- Юнит-тесты
- Интеграционные тесты
- Контрактные тесты
- Тесты UI
- Сквозные тесты
- Приёмочные тесты — ваши фичи правильно работают?
- Исследовательское тестирование
- Путаница с терминологией в тестировании
- Внедрение тестов в конвейер развёртывания
- Избегайте дублирования тестов
- Пишите чистый код для тестов
- Заключение
Примечания
WRIO Internet OS. Архитектура: Linked Data и JSON-LD
Вводное видео о проекте:
www.youtube.com/watch?v=JUiMijJ6tEg English version
www.youtube.com/watch?v=DxA6t2kax_k Русская версия
Сегодняшняя тема: Linked Data и JSON-LD. На примере своего опыта мы расскажем чем данный формат интересен и какие преимущества он предоставляет.
Опрос: насколько строго вы следуете стандартам и лучшим практикам на фронтенде?
Но, судя по моему опыту и ощущениям, на практике никто этим не занимается, кроме самых крупных компаний. Эти ощущения подтверждает, например, подкаст Веб-стандартов: там при обсуждении каких-то технологий или практик, постоянно звучат слова "мы это у себя не используем", "только если заказчик пнёт".
Я бы хотел проверить, так ли это, проведя небольшой опрос. Думаю, результаты будут интересны многим, приглашаю обсудить вопросы, ответы и вообще эту тему в целом в комментариях.
P.S. Я в опросе довольно вольно использую термин "стандарты". Понятно, что для некоторых вещей стандартов нет, но придумывать какое-то альтернативное название не вижу смысла.
API для валидатора от Яндекса. А также почему валидаторы микроразметки выдают разные ответы?
Валидаторы бывают разных типов и разрабатываются для разных целей. В общем их можно разделить на два типа: универсальные и специализированные. Универсальные – наш валидатор, Structured data testing tool от Google, Validator.nu, Structured Data Linter, Markup Validator от Bing – проверяют сразу несколько стандартов разметки. При этом валидаторы от поисковых систем проверяют разметку еще и на соответствие документации к своим продуктам на ее основе. Специализированные валидаторы, такие как JSON-LD Playground, Open Graph Object Debugger, – это инструменты от разработчиков самих стандартов. С помощью Open Graph Object Debugger можно проверить правильность разметки Open Graph, а JSON-LD Playground показывает, как разметка JSON-LD будет разбираться роботами.
Мы взяли разные примеры разметки и сравнили ответы этих валидаторов, чтобы найти лучший.
Не только Яндексу. Микроразметка на крупнейших сайтах рунета: зачем ею пользуются и почему она пригодится и вам
Теперь мы решили показать, как микроразметка участвует в жизни существующих сайтов: сделали обзор всех возможностей, которые она дает интернет-магазинам, сайтам СМИ и видеохостингам, и узнали, насколько они пользуются спросом у крупнейших проектов рунета.
Люди, которые отвечают за разработку и всю техническую часть таких сайтов, как Holodilnik.ru, Ozon.ru, Lenta.ru, Interfax.ru и Ivi.ru, ответили на вопросы о том, как на практике происходит внедрение микроразметки и каких результатов она позволяет добиться. А мы со своей стороны рассказали, какие типы мы бы порекомендовали таким сайтам и для чего.
Ближайшие события
rawdog — агрегатор RSS без завышенных запросов
Лирическое вступление
В связи с недавним отпочкованием от Хабрахабра нового ресурса, у меня возникла нужда обустроить удобный способ чтения обоих ресурсов. Первая мысль, разумеется, была об RSS, благо движок у обоих сайтов его поддерживает. Оставались сущие пустяки — найти хороший RSS-агрегатор, который можно было бы установить на малосильную VPS (поскольку участь Google Reader'а несколько охладила желание полагаться на сторонний сервис).
Зачем на самом деле используют микроразметку. Обзор от Яндекса
В веб-сервисах много больших задач, основанных на передаче данных и на создании связи между объектами. В этой статье мы разберем примеры конкретных проектов, реализованных с помощью семантической разметки.
Поисковые системы стремятся к улучшению выдачи: разрабатывают колдунщики, запускают партнерские программы, собирают «базы знаний». Большая часть этих задач решается с помощью разметки. Сайты могут получить красивый сниппет, передать данные для Яндекс.Островов, а «базы знаний», которые есть почти у всех поисковых систем (Google Knowledge Graph, Bing Satori, Яндекс Entity Search), получают свежие данные.
Facebook был заинтересован в развитии индустрии приложений, поэтому дал разработчикам возможность продвигать свои проекты в социальных сетях и связываться с другими приложениями. Так — тоже с помощью разметки — Open Graph публикует записи приложений в социальных сетях, а Applinks позволяет приложениям легко ссылаться друг на друга. Позже публиковать свои записи стало возможно и в Google+.
Читайте дальше и узнайте подробнее, как перечисленные ниже задачи решаются с помощью семантической разметки в разных продуктах и сервисах:
- Улучшение выдачи в поисковиках: сниппеты в Яндексе, Google, Bing и Yahoo!
- Пополнение Баз знаний: Яндекс Entity Search, Google Knowledge Graph, Bing Satori.
- Другие варианты использования: приложения, глубокие ссылки и почта.
Элемент HTML <time>
<time>
представляет собой дату, время или период времени, представленные в машинночитаемом формате. Он может быть полезен для создания расписаний, архивов или других функций, связанных со временем. WordPress использует этот элемент в базовой теме оформления. Ещё один пример использования <time>
— Reddit:Краткая история
Жизненный путь этого элемента был нелёгким. Его добавили в спецификацию HTML5 в 2009 году. Два года спустя, в 2011, его убрали и заменили на гораздо более широкий <data>. Однако в этом же году его вернули и добавили новых возможностей. Сейчас его можно уверенно использовать.
Ситуацию хорошо описал Брюс Лоусон (убрали, вернули, текущее положение дел). [Та же история на Хабре: убрали, вернули]. Классический пример того, как реакция сообщества разработчиков влияет на развитие HTML.
Как устроен мир семантической микроразметки
Мир семантической разметки устроен не вполне просто и на первый взгляд даже не всегда логично. Для того чтобы облегчить жизнь тем, кто хочет в нём разобраться, мы решили написать рассказ о том, какой бывает разметка, что дает и как ее внедрить.
Под микроразметкой (или семантической разметкой) мы подразумеваем разметку страницы с дополнительными тегами и атрибутами в тегах, которые указывают поисковым роботам на то, о чем написано на странице.
Микроразметка состоит из словаря и синтаксиса.
Реестр стационарных объектов наблюдения (комплексы ФВФ)
Для жителей Москвы на сайте www.data.mos.ru есть официальный список камер фото и видео регистрации ПДД. На вкладке «Для разработчиков» находится описание полей. Всю базу можно выгрузить в формате CVS.
www.data.mos.ru/datasets/621_reestr_statsionarnyh_obektov_nablyudeniya_kompleksy_fvf
На портале «Открытые данные» опубликована информация о 600 с лишним стационарных комплексах фото и видео фиксации нарушений ПДД, установленных на дорогах столицы. Данные доступны в виде таблицы, по которой автовладельцы смогут проверить свой обычный маршрут, а также доступны для выгрузки в формате CVS, который могут использовать разработчики для создания приложений, например, предупреждающих водителя о необходимости снизить скорость на определенном участке дороги (эдакие самописные радар-детекторы).
Google выложила руководства для начинающих SEO-оптимизаторов
Надо сразу сказать, что первое руководство действительно для новичков — профессионалы вряд ли обнаружат там нечто секретное и таинственное. Любопытно только то, что в Google не поленились и подготовили соответствующий одностраничный PDF-документ сразу в 13 языковых редакциях, включая и русский (английская версия). При этом документ (А4) выглядит визуально привлекательно и информативно, так что его можно распечатать и повесить в офисе, если вдруг возникнет необходимость в напоминании банальностей.
Второй документ более серьезного уровня и уже только на английском языке. Он довольно подробно и с примерами описывает различные «best practices» вроде создания уникальных заголовков веб-страниц, заполнения мета-тегов или улучшения структуры URL. Забрать документ можно отсюда.
Как и для чего мы сделали свой валидатор микроразметки
Медленно, но верно семантическая разметка набирает популярность. Чуть больше десяти лет назад (в мае 2001 года) впервые был введен термин «семантическая паутина». В 2004 году появилось первое упоминание формата RDFa, примерно тогда же начали развиваться микроформаты. В июне 2011 года был запущен стандарт schema.org. Сейчас семантическую микроразметку поддерживают и Яндекс, и другие ведущие мировые поисковые системы.
Однако вебмастера часто сталкиваются с тем, что валидаторы HTML выдают массу ошибок.
Вклад авторов
rossomachin 347.0deliya 220.0alizar 191.0t1r1 143.0RainbowJose 66.0jeston 50.0Chemist 42.0Rasifiel 39.0sitecreator 33.0m1rko 27.6