This is just a personal github repository to stash my code. If you need a template to start of your website, feel free to use my code. Also I'm happy to receive comments. My aim is to create a responsive, if possible progressive web app to manage my blog posts. Before I wrote any code I wrote this.
Most probably the site is already running on Gius.nl
Create a good template, with the least amount of code that is as light as possible that delivers the most tidy result.
- step 0: write this document
- step 1: create a github, stash my code
- step 2: create a app shell, so it loads my stuff, potentially using HTML5 cache
- step 3: create some static content
- step 4: create a rest service to be able to manage my content
Beforehand I want to thank all the resources that I could use to create this epic project;
- Douwe Egberts coffee: no coffee no code
- Hertog Jan beer
- The Internet: for letting me copy all the code:
- Jono, Tony and Paavo of Above and Beyond: for letting me code on in tune
- Brackets.io for a free IDE
- Microsoft for Visual Studio Code
- Github for keeping my code
Kevin Yank wrote an article about the minimal HTML5 page in 2010 - this is a good read; short summary: type optional in both style and script tags.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Gius.nl</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- i want to first load the page and then the javascript -->
<script src="script.js"></script>
</body>
</html>Also I took a look at the HTML5 styleguide and checked the page on W3 html checker.
I'm not going to reinvent the wheel for layouts. I don't even want a css. Maybe I need it in future, but for now I'm going to use the vanilla Twitter bootstrap
Added the link tag in the head, connected to the CDN:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">I'm wondering if I need the integrity attribute. *Q:What do these attributes mean? How do they affect the loading of the stylesheet? A:Both attributes have been added to Bootstrap CDN to implement Subresource Integrity.
Subresource Integrity defines a mechanism by which user agents may verify that a fetched resource has been delivered without unexpected manipulation (Reference)
Integrity attribute is to allow the browser to check the file source to ensure that the code is never loaded if the source has been manipulated.
Crossorigin attribute is present when a request is loaded using 'CORS' which is now a requirement of SRI checking when not loaded from the 'same-origin'. More info on crossorigin* And read up on support for old browsers: Depending upon what Microsoft browsers you support you may not need to continue using the X-UA-Compatible tag. If you need to support IE 9 or IE 8, then I would recommend using the tag. I want good support so I added this in the head:
<meta http-equiv="X-UA-Compatible" content="IE=edge"> Looking back at the Starter template:
<!doctype html>
<!--
so you are looking at my code? have a look at https://github.com/rkristelijn/giusnl instead
-->
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<title>Gius.nl</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
</head>
<body>
<!-- i want to first load the page and then the javascript -->
<h1>Hello, world!</h1>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
</body>
</html>I'm wondering why I need the 3 javascripts: jquery, Tether and BoostrapJS. Q:I work in a project where we don't use JQuery. Is twitter bootstrap dependant on it? A:Twitter bootstrap itself isn't jQuery dependant. If you use just the CSS part of it, you won't need jQuery. If you use the Javascript plugins you need jQuery, since they are jQuery plugins. So what do I need Tether for and [BootstrapJS].
Tether: Better support for positioning, scrolling etc for things like tooltips, dropdowns, hover-activated info boxes, etc.
- Optimized GPU-accelerated repositioning for 60fps scrolling
- Reliable positioning on any possible corner, edge or point in between.
- Support for repositioning or pinning the element when it would be offscreen
- Designed to be embeddable in other libraries
BootstrapJS Button dropdowns require the Bootstrap dropdown plugin to function.
In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom JavaScript.
Some downsides of using bootstrap - interesting, but since I'm a developer, bootstrap enables me to make my site responsive. I'm not a designer. not sure if I want to become one either. I don't realy care that my site looks like everyone elses. If it starts to annoy me, I just buy a new template
Why wait any longer, let's get started and steal some template.
Thanks for bearing with me, after more than 2 years I'm picking up the task again to review my site. A lot has happened;
- Browsers changed, support for fetch and service workers
- My knowledge changed; mastered Vue, React, Angular.js (1+), jQuery, Angular (2-6+), Node, Nativescript
- JavaScript (ECMASCRIPT) changed, added support for rest- and spread operators
- I have lot of knowledge to share and I intend to pick up using my domain.
Unfortunately I'm kinda stuck with PHP as a back-end while I focus on using JavaScript (Node) as a platform. Still looking into this, but for now, I just let Apache serve static content and have no database.
So what is next in this step?
I decided to go with Vue and create a web server to serve my local content.
- initialize npm repo
npm init-> this will create a package.json file:
{
"name": "giusnl",
"version": "2.0.0",
"description": "Create a good template, with the least amount of code that is as light as possible that delivers the most tidy result.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/rkristelijn/giusnl.git"
},
"keywords": [
"HTML",
"Performance",
"Flexible",
"Responsive"
],
"author": "Remi Kristelijn",
"license": "ISC",
"bugs": {
"url": "https://github.com/rkristelijn/giusnl/issues"
},
"homepage": "https://github.com/rkristelijn/giusnl#readme"
}- Add a webserver:
npm i --save express path - create
/index.js:
const path = require('path');
const express = require('express');
const app = express();
const PORT = 3000;
const staticPath = path.join(__dirname, '/');
app.use(express.static(staticPath));
app.listen(PORT, () => {
console.log(`listening on port ${PORT}`);
});- Add
startscript in/package.json
...
"scripts": {
"start": "node index.js", /* << this one */
"test": "echo \"Error: no test specified\" && exit 1"
},
...- Run
npm start -s
-s means --silent to let npm not show
> giusnl@2.0.0 start /home/pi/giusnl
> node index.js- Before commiting, we need to let git know that
/node_modules/should be ignored:
echo node_modules >> .gitignore
In this step I'm going to get rid of jQuery (for bootstrap) and implement Vue. Possibly use markdown for my articles.