Parceljs rebuild + minor content and design refresh

[coliff]

Hey! I was working on changing the build process to use ParcelJS and took the opportunity to refresh the design and content a little bit.

Highlights:

• Switched from using Open Sans (via Google Fonts) to using native font-stack (Like Airbnb, Medium, Bootstrap and others do). Improved performance and still looks great.
• Removed background grain PNG image and used a darker grey which I think looks a bit more flat and modern.
• Used Bootstrap Grid for layout, set the max-width to be wider and used responsive column sizes for some sections. Purgecss plugin for Parcel is used so all classes not used get stripped so CSS is just 1.8KB (gzipped)
• Added SVG icons for each of the feature sections and rearranged/restructured content.
• Switched the 'Who Uses H5BP?' section to use SVG logos rather than plain text - looks nicer. For now it shows just six logos in a row - but we could potentially increase to 12. (2 rows of 6 on desktop screens, 4 rows of 4 on tablet and 6 rows of 2 on phone screens)
• Changed the 'Many more' link to go to https://h5bp.net rather than the Wiki (which isn't there anymore)
• Removed the 'Tweet' Twitter JavaScript. The button was very rarely used (4 times in the past year) REF: https://twitter.com/search?q=HTML5%20Boilerplate%3A%20The%20rock-solid%20professional%20front-end%20template%20https%3A%2F%2Fhtml5boilerplate.com%2F%20via%20%40h5bp%20&src=typed_query&f=live

Other small changes:

• Removed Twitter Card's title, description, url and image tags - they aren't needed when the OpenGraph meta tags are defined (I may add a note about this to the docs) REF: https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started#twitter-cards-and-open-graph
• Added SVGO npm script. Run 'npm run svgo' to losslessly minify all SVGs in src/

Issues / Notes

• Not a big problem really but I don't like that Parcel renames static assets - do you know how to disable that?
• I couldn't find a way of copying static assets (which aren't referenced in the index.html) across, so humans.txt, robots.txt were manually copied across.
• All images, JS and CSS are served as separate static assets rather than being inlined. I'd have preferred them to be inlined.
• The version number is added after site is built with Parcel using 'replace' (a simple npm script). Would be good to improve this by getting version number from package.json version.
• The margins and padding could be maybe do with some minor tweaks for optimal consistency on some screen sizes.

Screenshots from Desktop and iPhone 8 (simulator):

FEEDBACK WELCOME!

[lgtm-com[bot]]

This pull request introduces 1 alert when merging 037b5f6a6404fcb9c2b20b3f00579456e0640765 into 0031b94e21c9e49d7e5846768b1c6c9519f0c659 - view on LGTM.com

new alerts:

• 1 for Unused variable, import, function or class

[coliff]

Good spot by the LGTM-bot. :-) I'll look into this tomorrow - maybe remove the Analytics script from main.js and use the actual one in H5BP instead:

<script>
    window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
    ga('create', 'UA-17904194-1', 'auto'); ga('set', 'anonymizeIp', true); ga('set', 'transport', 'beacon'); ga('send', 'pageview');
    window.document.addEventListener("click", handleClickEvent);
  </script>
  <script src="https://www.google-analytics.com/analytics.js" async></script>

[coliff]

@roblarsen I haven't touched this for a few months, but what do you think of the general idea? If you like it then I can tidy it up and get it ready for HTML5Boilerplate v9.0.0

[roblarsen]

@coliff this looks great, in general. Do you want to break out some of the to-dos into separate issues that we can split up and tackle?

[coliff]

Update: 11 months later. Waiting for Parcel v2 - we should look to get this finished alongside H5BP v9 (next month?).

[roblarsen]

Yeah, next month is good. I think there's a lot of work to do across the repos and I'm just now getting some time to work on all of this.

[roblarsen]

Hey, @coliff do you want to work the design changes into the repo, minus parcel?

[coliff]

Hey, @coliff do you want to work the design changes into the repo, minus parcel?

YES! I've been away for a bit... 🏖️ but back now and expect to be able to get this done by early next week.

[coliff]

Will make a new PR due to the huge number of changes to the build process.