Add HTML boilerplate post

2 years ago · ed64bc4426
2 changed files with 111 additions and 0 deletions
--- a/config.yml
+++ b/config.yml
@ -9,16 +9,29 @@ buildDrafts: false
 buildFuture: false
 buildExpired: false

+enableEmoji: true
+
 minify:
  disableXML: true
  minifyOutput: true

+markup:
+  highlight:
+    # anchorLineNos: true
+    codeFences: true
+    guessSyntax: true
+    lineNos: true
+    # noClasses: false
+    style: monokai
+
 params:
  env: production
  description: "A blog about things"
  ShowReadingTime: true
  ShowToc: true
  ShowBreadCrumbs: true
+  assets:
+    disableHLJS: true

  homeInfoParams:
    Title: "Xirion.net Blog"
--- a/content/posts/html-boilerplate.md
+++ b/content/posts/html-boilerplate.md
@ -0,0 +1,98 @@
+---
+title: "My HTML Boilerplate"
+description: "My personal HTML boilerplate"
+date: 2021-04-27T17:09:21+02:00
+draft: false
+tags:
+- web
+---
+Everytime when making a website I have to look up the standard HTML5 boilerplate/template again.
+To make it easier for myself and possibly others, this is the template that I currently use together an
+explanation of the various tags I use in it.
+
+## The Boilerplate
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <title>A Page - My Site</title>
+  <meta name="description" content="Page description">
+
+  <link rel="stylesheet" href="/style.css">
+  <link rel="icon" href="/favicon.ico">
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+  <meta name="theme-color" content="#8000FF">
+</head>
+
+<body>
+  <script src="/script.js" type="module"></script>
+</body>
+</html>
+```
+
+## Explanation
+Here I will do a rough overview of the various tags used and their purpose.
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+```
+The doctype and html tag are to indicate that the page is HTML and in English so that it renders properly.
+
+```html
+<meta charset="UTF-8">
+```
+This indicates that we want proper unicode support otherwise some characters might fail to render.
+
+```html
+<meta name="viewport" content="width=device-width, initial-scale=1">
+```
+The purpose of this line is to make sure the viewport is correctly sized for responsive web design.
+The `initial-scale` is to set the initial zoom level to one (required for safari).
+
+```html
+<title>A Page - My Site</title>
+<meta name="description" content="Page description">
+```
+These tags are fairly self explanatory but are still important if you want rich embed in for
+example Discord. If you want even more customizability for rich linking see the further resources
+down below, specifically about twitter cards and opengraph.
+
+```html
+<link rel="stylesheet" href="/style.css">
+```
+Just the standard snippet for including CSS, I must admit that I forget the specific syntax for this
+quite often :sweat_smile:.
+
+```html
+<link rel="icon" href="/favicon.ico">
+<link rel="icon" href="/favicon.svg" type="image/svg+xml">
+```
+The code necessary for specifying a favicon, modern browsers support svg favicons which can look much nicer.
+
+```html
+<meta name="theme-color" content="#8000FF">
+```
+Theme color can affect various user elements around the website in supported browsers (think navbar etc.),
+especially important when making a PWA or similar.
+
+```html
+    <script src="/script.js" type="module"></script>
+```
+In the body element we see the code for including some module based javascript,
+which is much nicer than non-module based JS. 
+See also the [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) on this topic
+
+## Further Resources
+This post and code was heavily inspired by [this article](https://www.matuzo.at/blog/html-boilerplate/)
+but much more slimmed down to fit my needs.
+
+For more information about what you can put in the `<head>` tags to ensure richer
+linking with for example opengraph or twitter cards [joshbuchea/HEAD](https://github.com/joshbuchea/HEAD)
+is really useful.
+
+And of course the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web) are an immensely useful
+resource when doing anything regarding web development.