Впервые за 4 года мы полностью переработали дизайн сайт нашей компании . Мы запустили его сегодня. Сайт представляет собой простое приложение Laravel с некоторыми техническими тонкостями. Верный форме, мы также открываем приложение с открытым исходным кодом, вы можете найти код в этом репозитории на GitHub .
В этом посте в блоге я хотел бы, чтобы вы провели экскурсию за кулисы.
Интеграция с GitHub
В последние годы мы все больше и больше участвуем в сообществе с открытым исходным кодом. Мы создали более 100 пакетов, которые были загружены более 15 миллионов раз. На нашем веб-сайте мы посвятили целый раздел , чтобы осветить наши усилия. Мы перечислим все наши пакеты и проекты с открытым исходным кодом.
Мы используем API GitHub для импорта большей части информации о наших общедоступных репозиториях в базу данных. Импорт осуществляется с помощью эта консольная команда , которая планируется выполнять ежедневно .
На GitHub нет никакой информации о количестве загрузок. Вот почему существует отдельная команда , которая запрашивает API Packagist для номеров загрузок.
Участие в open source имеет множество преимуществ . Мы считаем, что важно снизить барьер входа для тех, кто хочет начать вносить свой вклад в open source. Вот почему мы также перечислим несколько простых проблем в наших репозиториях. Они идеальны
Эти простые проблемы, которые распознаются по определенной метке на проблеме, также импортируются через API GitHub. Вот команда , которая обрабатывает импорт простых проблем. Обратите внимание, что любая новая проблема также автоматически публикуется в твиттере .
Наши материалы с открытым исходным кодом были бы не так хороши, если бы мы не получали никакой помощи от сообщества. Мы благодарны всем, с кем мы улучшили наш код с помощью APR, исправили для нас опечатку, открыли проблему, чтобы задать нам вопрос или сообщить о проблеме. Symfony недавно начал с благодарности случайным участникам на их сайте . Мы считаем, что это хороший жест, поэтому мы сделали то же самое. Вот команда , которая импортирует случайного участника.
Отображение адаптивных изображений
Все наши материалы с открытым исходным кодом подпадают под специальную лицензию, называемую postcardware. Это означает, что если наш код попадет в вашу производственную среду, вам необходимо отправить нам открытку из вашего родного города. Для нас довольно круто получать открытки со всей планеты. Мы делимся каждой открыткой, которую мы получили, на этой специальной странице на нашем сайте.
Сейчас у нас на этой странице представлено около 200 открыток. Когда я фотографирую открытку с помощью телефона, размер файла составляет от 4 до 6 МБ. Если бы мы использовали эти изображения напрямую, размер страницы составлял бы около 1 ГБ.
Вы можете подумать, просто создайте уменьшенную версию, но мы пошли дальше. Мы использовали нашу собственную медиатеку для создания адаптивных изображений для этих открыток. Это означает, что если вы посещаете сайт с помощью небольшого мобильного устройства, ваш браузер будет загружать изображения меньшего размера, чем если бы вы работали на устройстве с большим монитором. Мы используем атрибут srcset для выполнения этого поведения.
При первом посещении страницы открыток вы, возможно, заметили, что отображаются размытые версии открыток. Этот метод называется прогрессивной загрузкой изображений. Мы вставляем размытую svg-версию открыток на страницу, чтобы браузер мог сразу ее отобразить. Браузер заменит это реальным изображением, когда оно будет загружено.
Вот разметка, созданная медиатекой для адаптивного изображения.
Дополнительную справочную информацию о том, как все это работает, можно найти на соответствующей странице в документах medialibrary.
Отказ от файлов cookie
Мы считаем, что предупреждения о файлах cookie уродливы и ухудшают пользовательский опыт. Чтобы избежать необходимости размещать такое предупреждение на нашем сайте, мы решили, что на нашем сайте вообще не следует устанавливать файлы cookie. Если вы хотите знать, как вы можете избежать установки каких-либо файлов cookie в приложении laravel, прочитайте это сообщение в блоге Дитера Стинглхамбера .
На нашем сайте есть очень маленький раздел администратора для загрузки открыток. Потому что для того, чтобы защита csrf работала над этой формой, нам нужно установить файл cookie сеанса. Вот почему мы незаметно меняемся драйвер сеанса при посещении этой страницы.
Сбор статистики посетителей
Для большинства наших клиентских сайтов мы используем Google Analytics. Поскольку Google Analytics полагается на установку файлов cookie, мы не можем использовать их на spatie.be . Вместо Google Analytics мы используем Matomo . Это бесплатный самостоятельный инструмент с открытым исходным кодом, который может собирать информацию о посетителях сайта. Это легко установить на сервере. Для сбора данных о посетителе сайта на каждую страницу включен небольшой фрагмент JavaScript . Он может работать без установки каких-либо файлов cookie .
Забавный факт: “матомо” – это японское слово, которое можно перевести как “честность” или “порядочность”.
Повышение производительности за счет кэширования ответа
Без какого-либо кэширования приложение уже довольно быстро работает. На моем MacBook Pro (с 2015 года) время отклика варьируется от 150 до 200 мс. На мой взгляд, это очень приемлемо, но мы можем сделать лучше.
Одним из наших популярных пакетов является laravel-кэш ответов . Это может значительно ускорить работу любого приложения laravel за счет кэширования всего ответа. Если вам нужно больше информации о том, как это работает, прочитайте это сообщение в блоге . При установленном пакете время отклика составляет в среднем около 50 мс.
Мы применили прагматичный подход к аннулированию кэша. Всякий раз, когда что-то меняется в базе данных, мы очищаем кэш ответов. Это происходит в базовой красноречивой модели .
Заключительные мысли
Наш новый сайт был в основном разработан Виллемом Ван Боксталем . Во время разработки каждый сотрудник нашей компании внес свой вклад, сделав это командной работой. Мы очень довольны результатами, но на этом не остановимся. В ближайшие месяцы мы добавим еще немного контента и внесем некоторые изменения здесь и там.
Обязательно проверьте гостевой пост моего коллеги Виллема чтобы узнать больше о том, что происходит в интерфейсе нашего нового сайта.
Что вы думаете о нашем новом сайте? Дайте нам знать в комментариях ниже!
Оригинал: “https://dev.to/freekmurze/a-new-website-for-spatie-backend-highlights-1k5l”