Современный стартовый HTML-шаблон



    Доброго времени суток, друзья!

    Позвольте представить вам мой новый проект — современный стартовый HTML-шаблон.

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

    • Все meta и link-теги (общие, Microsoft, Facebook, Twitter, IOS, Android, структурированные данные — Schema.org и JSON-LD, а также парочка тегов, связанных с безопасностью)
    • Пример использования HTML5-тегов
    • Пример использования CSS3-свойств
    • Пример использования CSS-модулей
    • Пример использования JavaScript-модулей
    • Файл «manifest.json»
    • Сервис-воркер общего назначения (сначала кэш, затем сеть)
    • Файл «robots.txt»
    • Файл «sitemap.xml»
    • Файл «browserconfig.xml»
    • Файл ".gitignore"
    • Пример Express.js-сервера, устанавливающего заголовки, связанные с безопасностью и сжатием, и возвращающего файлы по запросу
    • Пример креативной страницы ошибки 404 (страница не найдена, креатив не мой)
    • и многое другое

    Официальный сайт: moderntemplate.site.

    Код проекта находится здесь.

    Приветствуется любая форма обратной связи: не стесняйтесь писать в личку и пуллреквестить на гитхабе.

    Если же вы хотите повторить мой «исследовательский» путь, то можете начать со следующих ресурсов:


    По этой ссылке вы найдете масштабируемый шаблон настроек Webpack 5, включающий Babel и PostCSS, сервер для разработки и оптимизированную сборку для продакшна.

    А если вы хотите освежить или проверить свои знания по JavaScript, то специально для этого в свободное от работы время я занимаюсь разработкой этого замечательного приложения (сам себя не похвалишь...).

    Благодарю за внимание и хорошего дня.

    Similar posts

    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 20

      –4
      Пример использования CSS3-свойств

      Что такое CSS3?

      • UFO just landed and posted this here
          0

          CSS3 нет и не будет. Может, лет 10 назад еще так можно было говорить для поддержки разговора, но уже заканчивается 2020-ый.

            +1
            Де юре нету, всё разбили на модули, де факто так называют совокупность всего, что было после второй версии.
            • UFO just landed and posted this here
          +1

          Добавьте ещё информации. Сколько файлов подгружается? Каков стартовый обьём данных? Как быстро работает?


          Ну и если это таки шаблон то может стоит тогда попробовать дополнительно использовать XSLT?


          Ещё можно добавить текст лицензии через GitHub и тогда он будет её определять автоматически.

            0
            Впишусь в ветку с вопросом по интеграции: тот же бутстрап без вопросов интегрируется или это взаимоисключающие вещи?

            Из описания понятно, что собран аналог стартового фреймворка, но непонятно как с этим работать. Пару примеров бы, чтобы понимать, стоит тратить время на настройку или в моей копилке это будет бесполезно?

            Время ценно. Хотя пост интригует.
            +2
            А можно пару строк с историей? Почему появился этот проект, какие есть аналоги и какую пользу проект призван нести,
              0
              Поддерживаю. Я человек, далёкий от веба, кажется оочень сильным переусложнением.
              +1
              Чем принципиально отличается кеширование файлов стандартным механизмом кеширования и через сервис воркер? Сервис воркер сложнее, почему нужно кешировать файлы именно таким образом?
                +1
                Одно из преимуществ — это возможность показать страницу без интернета и добавить сайт как приложение на десктоп или мобильное устройство. Но и минусов много, в частности файлы кеша могут занимать неприлично много места, проблемы с обновлением кеша и многое зависит от кривизны рук и отсутствия склероза у автора приложения.
                0

                deleted

                  +2
                  Мне кажется главная проблема таких “современных” стартовых шаблонов (не вашего, а вообще) – это то, что они в 99% случаев делаются теоретиками, а не практиками. И если брать их как есть, то быстро обнаруживается, что там обычно даже нет стандартного набора подстраховок, снимающих нагрузку на мозг и предотвращающих глупые баги (w3c-валидатор, stylelint, doiuse, eslint, sonarjs). Это те вещи, которые упрощают работу всегда, вне зависимости от пре/пост-процессоров, сборщиков и.т.д., и казалось бы в 2020 году уже должны быть везде, а их нет. Есть какие-то замороченные варианты загрузки ресурсов, примеры редких мета-тегов, что-то еще такое умное и полезное в теории, а банального настроенного процесса сборки и проверки всего – нет. Но при этом если начать доделывать эти шаблоны, то получаются монстры с кучей зависимостей, в которых только ты и разбираешься (раз уж такое дело, то поделюсь одним из своих стартовых шаблонов). Где-то здесь должна быть золотая середина…
                    0
                    Мое мнение, что стартовые шаблоны — чужие — нужны в большей мере новичкам, чтобы вообще понять как все это работает. Я в свое время их кучу перепробовал, и это было довольно полезно. В конце концов приходишь к выводу, что единого решения нет и быть не может, но можно в разных подсмотреть что то полезное для себя.
                    А когда уже тебе действительно становится необходим шаблон для реальной работе, как инструмент, упрощающий разработку, то как правило такой шаблон у тебя уже есть, и это твой собственный шаблон, и не один, вот их то и используешь в дальнейшем.
                    0

                    А зачем в коде сервера нужно задание заголовка res.setHeader('Accept-Encoding', 'gzip, compress, br')? Несмотря на наличие в Node.js средств для работы с gzip и brotli в модуле zlib, ни встроенный http-сервер, ни express из коробки не умеют кодировать-декодировать такие форматы.

                      0
                      ошибся, нужен заголовок 'Content-Encoding'
                    • UFO just landed and posted this here
                        0
                        на htmltemplate.site ссылка Download битая
                          0
                          починил
                          +1

                          Автором проделана хорошая работа!
                          Я считаю, что проект не должен быть перегружен оверколичеством технологий. Имеет смысл сделать к шаблону сайт с описаниями, как что можно добавить и включить примеры.


                          От себя же хочу хочу поделиться шаблоном для тех, кому нужен быстрый и понятный старт.
                          К примеру, сделать тестовое задание или сверстать шаблон для CMS.
                          Основан на боевых проектах, из которых и вырос.
                          Без миллиона технологий под капотом, но в то же время с модульным подходом к разработке, линтерами, prettier и базовой оптимизацией.
                          create-html-boilerplate

                          Only users with full accounts can post comments. Log in, please.