Веб-разработка *

Категории, они же разделы каталога, порой играют ключевую роль в продвижении сайта. Сюда посетители заходят напрямую из поисковиков. От того, насколько правильно и корректно вы оптимизировали эти страницы, зависит практически 90% успеха продвижения. За годы работы мы в AlkoDesign продвинули десятки таких проектов.

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

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

Итак, у нас было 2 известных рынку конструктора сайтов — uCoz и uKit, 90+ процентов регистраций, никогда не конвертирующихся в создание своего сайта, амбициозное желание спасти хотя бы 5 процентов этой аудитории, а также два с половиной человека в команде, имеющих какой-никакой опыт в игровой разработке. Не то чтобы это был необходимый запас для релиза игры про веб-индустрию… Ну вы поняли.

Давно были в Вебмастере? Пробегитесь по основным пунктам своего сайта за 5-10 минут времени, и поставьте задачи программистам!

Для начала, если у вас есть сайт и нет Yandex-вебмастера – срочно поставьте webmaster.yandex.ru.

Доверие

1. Значки перед сайтом:

Недавно мы сделали то, о чём грезят все программисты и дизайнеры — переписали всё с нуля: полный редизайн нашего сайта и написание «движка» с чистого листа. Ниже поведаем о мотивации и процессе миграции с онлайн-CMS на статику.

Меня зовут Владимир, я занимаюсь мобильным фронтендом в Яндекс.Почте. В нашем приложении уже была тёмная тема, но недожатая: мы умели перекрашивать интерфейс и простые письма. Но письма с форматированием оставались светлыми и контрастировали с тёмным интерфейсом, из-за чего глаза ночью могли уставать.

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

Эта памятка писалась для внутренних нужд (открыть глаза менее опытным в вебе коллегам). Но, т.к. я насмотрелся велосипедов от довольно уважаемых, казалось бы, контор, — выкладываю на хабр. Мне кажется, многим будет полезно.

Зачем

Надеюсь, читающий уже понимает, зачем ему вообще нужен именно REST api, а не какой-нибудь монстр типа SOAP. Вопрос в том, зачем соблюдать какие-то стандарты и практики, если браузеры вроде бы позволяют делать что хочешь.

• Стандарт HTTP это стандарт. Его несоблюдение вредно для кармы и ведёт к постоянным проблемам с безопасностью, кэшированием и прочими "закидонами" браузеров, которые совсем не закидоны, а просто следование стандарту.
• Велосипеды со всякими {error: "message","result":...} невозможно нормально тестировать и отлаживать
• Поддержка большим количеством готовых клиентских библиотек на все случаи жизни. Те, кто будет вашим api пользоваться, скажут большое человеческое спасибо.
• Поддержка автоматизированного интеграционного тестирования. Когда сервер на любые запросы отдаёт 200 ОК — ну, это такое себе развлечение.

Это продолжение статьи «Пишем первый микросервис на Node.js с общением через RabbitMQ», которая была неплохо принята пользователями хабра.

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

В этой части перевода учебного курса по React мы поговорим об архитектуре React-приложений. В частности, обсудим популярный паттерн Container/Component.



→ Часть 1: обзор курса, причины популярности React, ReactDOM и JSX
→ Часть 2: функциональные компоненты
→ Часть 3: файлы компонентов, структура проектов
→ Часть 4: родительские и дочерние компоненты
→ Часть 5: начало работы над TODO-приложением, основы стилизации
→ Часть 6: о некоторых особенностях курса, JSX и JavaScript
→ Часть 7: встроенные стили
→ Часть 8: продолжение работы над TODO-приложением, знакомство со свойствами компонентов
→ Часть 9: свойства компонентов
→ Часть 10: практикум по работе со свойствами компонентов и стилизации
→ Часть 11: динамическое формирование разметки и метод массивов map
→ Часть 12: практикум, третий этап работы над TODO-приложением
→ Часть 13: компоненты, основанные на классах
→ Часть 14: практикум по компонентам, основанным на классах, состояние компонентов
→ Часть 15: практикумы по работе с состоянием компонентов
→ Часть 16: четвёртый этап работы над TODO-приложением, обработка событий
→ Часть 17: пятый этап работы над TODO-приложением, модификация состояния компонентов
→ Часть 18: шестой этап работы над TODO-приложением
→ Часть 19: методы жизненного цикла компонентов
→ Часть 20: первое занятие по условному рендерингу
→ Часть 21: второе занятие и практикум по условному рендерингу
→ Часть 22: седьмой этап работы над TODO-приложением, загрузка данных из внешних источников
→ Часть 23: первое занятие по работе с формами
→ Часть 24: второе занятие по работе с формами
→ Часть 25: практикум по работе с формами
→ Часть 26: архитектура приложений, паттерн Container/Component
→ Часть 27: курсовой проект

Свежая подборка со ссылками на новости и материалы. В выпуске: принят PSR-14 Event Dispatcher, JIT в PHP 8, тройка RFC-предложений из PHP Internals, порция полезных инструментов, и многое другое.

Приятного чтения!

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

Предисловие

Все-таки в душе я фантазер и мечтатель, на деле (в мире программирования) максимум «парень из гаража», но после «раскручивания гаек» не мог не удержаться от идеи явить Хабражителям на справедливый суд концепцию проекта MCDM-Project в целом и игрушечную тестовую версию в частности (несколько опасаюсь Хабраэффекта, если будут проблемы — прощения просим). Ссылка на сайт проекта ждет читателя в конце публикации (вместе с опросом), для ознакомления рекомендуется пройти предлагаемый на сайте тур, а в идеале — предварительно ознакомиться с основными идеями под катом.

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

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

Замена Disqus на Commento снизила размер страниц в 10 раз

Когда я завёл блог, то установил Disqus для комментариев. Это был естественный выбор: сайты по всему интернету ставили Disqus, его легко настроить, и есть бесплатный вариант использования. Я спокойно интегрировал движок комментариев и двинулся дальше.

Но вот в чём дело: я всегда знал, что Disqus немного раздувает страницы. Я ведь писал о веб-производительности и обычно старался оптимизировать страницы. Но я просто предположил, что Disqus прибавляет немного лишних килобайт. Логика: если он сильно раздувает страницы, все бы уже давно отказались от него. Очевидно, Disqus старается не увеличивать трафик, верно?

Я ошибался.

19 апреля в Екатеринбурге пройдет конференция разработчиков DUMP. Программные директора секции Backend — руководитель офиса разработки Яндекса Андрей Жаринов, руководитель отдела разработки Naumen Contact Center Константин Беклемишев и инженер-программист из Контура Денис Тарасов — рассказали, какие доклады ждут разработчиков на конференции.

Есть мнение, что от докладов на «фестивальной» конференции не стоит ждать инсайтов. Нам кажется, что мы сделали такую программу, от которой ждать стоит. Для этого мы брали только тех, кто глубоко в теме, отсеяли ⅔ заявок, до бесконечности правили структуру выступлений и требовали примеры из практики от спикеров.

На третьей встрече из серии Backend United мы с коллегами из Booking, Dodo Pizza и Авито обменялись опытом работы с микросервисной архитектурой. Говорили о распилах, монолитах и всём, что за этим стоит. Этот пост — отчёт о том, как прошёл митап. Внутри — видеозаписи, презентации спикеров, ссылки на фотоотчёт и отзывы участников встречи.

Один из топовых сайтов Alexa (центральный кружок), защищённый HTTPS, с поддоменами (серым) и зависимостями (белым), среди которых есть уязвимые (штриховая заливка)

В наше время значок защищённого соединения HTTPS стал стандартным и даже необходимым атрибутом любого серьёзного сайта. Если сертификат отсутствует, почти все последние браузеры показывают предупреждение, что соединение с сайтом «не защищено» и не рекомендуют передавать на него конфиденциальную информацию.

Но оказывается, что наличие «замочка» в адресной строке не всегда гарантирует защиту. Проверка 10 000 ведущих сайтов из рейтинга Alexa показала: многие из них подвержены критическим уязвимостям протоколов SSL/TLS, обычно через поддомены или зависимости. По словам авторов исследования, сложность современных веб-приложений многократно увеличивает поверхность атаки.

В этом руководстве я расскажу как с помощью OffscreenCanvas мне удалось вынести весь код работы с WebGL и Three.js в отдельный поток веб-воркера. Это ускорило работу сайта и на слабых устройствах исчезли фризы во время загрузки страницы.

Статья основана на личном опыте, когда я добавил вращающуюся 3D-землю на свой сайт и это забрало 5 очков производительности в Google Lighthouse — слишком много для лёгких понтов.

На следующей неделе стартует Saint HighLoad++ – вторая часть нашего эксперимента по экспансии хайлоада на крупные IT центры страны. Возвышенная приставка в начале названия, как и для других наших конференций, значит, что 8–9 апреля мы едем в Санкт-Петербург. В программе 40 докладов, традиционный трек от Aletheia Business и user generated митапы. Все доклады новые и специально подобраны, чтобы учесть социокультурный контекст IT северной столицы. В чем выражается региональная специфика и как она отразилась на программе, расскажу дальше.

Сначала давайте поделюсь, зачем мы вообще это затеяли. Нормально же было – большая ежегодная сходка всех заинтересованных в том, чтобы веб-сервисы качественно справлялись с нагрузкой и делали миллионы пользователей счастливыми. Когда мы начинали в 2007, таких всех было не очень много – как раз на небольшой хардкорный междусобойчик, но в 2018 году на HighLoad++ в Москве пришло 3 000 человек. Конференция стала не просто большая, а огромная: 10 основных потоков докладов, 10 потоков мастер-классов и митапов. В таком изобилии всевозможных альтернатив очень трудно ориентироваться.

Для того, чтобы создать свое веб приложение в наше время недостаточно уметь его разрабатывать. Важным аспектом является настройка инструментов по развертыванию приложения, мониторингу, а также управление и администрирование среды, в которой оно работает. Эра ручного развертывания уходит в забвение, даже для небольших проектов, инструменты автоматизации могут принести ощутимую пользу. При развертывании «руками», зачастую мы можем забыть перенести что-либо, учесть тот или иной нюанс, запустить забытый тест, этот список можно продолжать довольно долго.

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

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