Bootstrap Starter Templates

This is a collection of starter template HTML pages with Bootstrap 4.1.1 capabilities.

Use these pages to start a new page / project. It contains the necessary references to bootstrap related files.

Find the code at the correspoding GitHub Project

Bootstrap Full

bootstrap.full.html

This is the full package that includes the Bootstrap framework and additional Javascript files required.

See Bootstrap documentation for more details.

Bootstrap Full - No popper.js

bootstrap.full.no-popper.html

This is the full package that includes the Bootstrap framework and additional Javascript files required, except for Popper.

Use this if you do not want to use:

  • Tooltips and popovers for displaying and positioning (also requires Popper.js)
  • Dropdowns for displaying and positioning (also requires Popper.js)

See Bootstrap documentation for more details.

Bootstrap Full - CSS Only

bootstrap.full.css-only.html

This is the full package that includes the Bootstrap framework - CSS file only.

Use this if you do not want to use:

  • Alerts for dismissing
  • Buttons for toggling states and checkbox/radio functionality
  • Carousel for all slide behaviors, controls, and indicators
  • Collapse for toggling visibility of content
  • Dropdowns for displaying and positioning (also requires Popper.js)
  • Modals for displaying, positioning, and scroll behavior
  • Navbar for extending our Collapse plugin to implement responsive behavior
  • Tooltips and popovers for displaying and positioning (also requires Popper.js)
  • Scrollspy for scroll behavior and navigation updates

See Bootstrap documentation for more details.

Bootstrap - Grid only

bootstrap.full.grid-only.html

Use this if you do not want to use Grid and Flexbox only capabilities:

See Bootstrap documentation for more details.

Bootstrap - Reboot only

bootstrap.full.reboot-only.html

Use this if you do not want to use the Reboot only capabilites:

See Bootstrap documentation for more details.

ngx-model Recipes

Code recipes, tips-n-tricks and more for Angular’s ngx-model.

ngx-model offers simple state management, one way data flow, multiple model support and immutable data exposed as RxJS Observable.

The following recipes build on the core ngx-model and add commonly needed functionality. It focuses on hosting model as immutable classes that have both properties and methods, and not simple objects/interfaces.

Contents:

Find the full project here: https://github.com/killerchip/ngx-model-recipes/

From Mockup Design to HTML code

Here follows a checklist / guide on how to create HTML5 code from a mockup design.

Start from here:

And finish here:

Checklist

Page Layout

  • Identify Boxes and sub-boxes
  • Position Boxes / Use Grid system
  • Put (placeholder) content

Repeat the above steps progressively per ‘level’… from outer boxes to inner boxes. (See example below).

Box Layout

  • Use a CSS normalizer
  • Identify margins & paddings
  • Identify box styles
    • background color/style
    • border color/style
  • Identify content text styles
    • Font family, weight, color, style, etc…
    • Text positioning, overflow, etc…

Details…

Please visit the Github Project: From Mockup to Code

A Simple CSS Grid system

Github project: https://github.com/killerchip/html5-cheatsheet/tree/simple-grid-framework

This is a very minimum grid system that you can apply in simple cases and you do not wish to include a full-force commercial framework.

It is using a 12-column grid.

How to use

  1. Copy the contents of my-fmw/grid.css into your project.
  2. Reference it from your HTML5 page: <link rel="stylesheet" href="grid.css">
  3. Enclose your layout in grid class so you can define a maximum width
  4. Create your rows with row class
  5. Define your colums with col-1 to col-11 classes

Example

home.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>

<!--
Demo page that demonstrates the use of a simple Grid framework.
-->

<html lang="en">

<head>
<meta charset="utf-8">
<title>Grid test</title>
<!-- This is the actual grid imported -->
<link rel="stylesheet" href="./my-fmw/grid.css">

<!-- Additional stylesheet to help visualize the grid system-->
<link rel="stylesheet" href="./grid-test.css">
</head>

<body>

<div class="grid">
<div class="row">
<div class="col-1">1/12</div>
<div class="col-11">11/12</div>
</div>

<div class="row">
<div class="col-2">2/12</div>
<div class="col-10">10/12</div>
</div>

<div class="row">
<div class="col-3">3/12</div>
<div class="col-9">9/12</div>
</div>

<div class="row">
<div class="col-4">4/12</div>
<div class="col-8">8/12</div>
</div>

<div class="row">
<div class="col-5">5/12</div>
<div class="col-7">7/12</div>
</div>

<div class="row">
<div class="col-6">6/12</div>
<div class="col-6">6/12</div>
</div>
</div>

</body>

</html>

Project contents

grid.css - The actual grid system file

home.html - A page demonstrating how to use the grid system

grid-test.css - Additional styles to visual the grid system demonstration

Javascript placement in HTML5 document

An HTML Page example showcasing how you can insert/link javascript scripts inside an HTML document.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Javascript placement in HTML document</title>
<script>
console.log("Script in HTML > head");
</script>
<script src="head.js"></script>
</head>
<body>
<script>
console.log("Script in HTML > body");
</script>
<script src="body.js"></script>
</body>
</html>

You can have javascript directly inside the document (head / body) and/or import it from external files (head/body).

You can find the file as a project at Github: Javascript-Cheatsheet / js-placement.

Moodle editathon - what a fun event...

On 5/5/2018 I participated in a 4h editathon event, hosted at Smartbox facilities and organized for the city of Larissa by my friend John Gialamas. What a fun… !

Moodle is an open-source learning platform, for hosting online courses, etc…

Our mission was to translate as much content as we could into Greek language. So this way we contribute to bringing the platform closer to the Greek education community. And I think we did a great job…

Regardless of the result, it was great fun and met interesting people !

Until next time…

Captain out

Immutable Class in Typescript/Angular

Please refer to my Github project for details.

This is a class structure for creating immutable objects in typescript / angular. An immutable object is one that you do not update its contents. Instead you create a new object with altered content and then replace the original with a new one. The initial intention is to be used with ngx-model.

In this example we are creating a class that models a person .

Define an interface

First define an interface to be applied to the constructor of the class:

src/app/model/person.ts

1
2
3
4
5
export interface IPerson {
name: string;
surname: string;
age?: number; //optional property
}

Define the class

Define the class with its constructor and the properties:

src/app/model/person.ts

1
2
3
4
5
6
7
8
9
10
11
12
export class Person {
//Define the class Person
name: string;
surname: string;
age?: number;

constructor(newPerson: IPerson) {
this.name = newPerson.name;
this.surname = newPerson.surname;
this.age = newPerson.age || 0; //Default value in optional property
}
}

Define a json method

A .json() method will allow you extracting the original data that the class was created with:

src/app/model/person.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
export class Person {
...

// Allows extraction of the original properties of the class
json(): IPerson {

// Return the properties
return {
name: this.name,
surname: this.surname,
age: this.age
};
}

...
}

Define a clone method

A .clone() method will allow you easily obtaining a clone of the object when needed:

src/app/model/person.ts

1
2
3
4
5
6
7
8
9
10
export class Person {
...

// Allows cloning of the object
clone(): Person {
return new Person( this.json() );
}

...
}

Define an update method

Although the name .update() refers to a mutable object, in practice this method will allow you easily to get a copy of the original object with updated properties.

src/app/model/person.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
export class Person {
...

// Returns a new clone of the object with updated specific properties
update(data: Partial<IPerson>): Person {
let result: IPerson = this.json();
for (let key in data) {
result[key] = data[key];
}
return new Person(result);
}

...
}

Define any additional methods

You define any additional methods and/or derived data as methods.

src/app/model/person.ts

1
2
3
4
5
6
7
8
9
10
export class Person {
...

// A sample class method
getDescription(): string {
return this.age >= 18 ? 'adult' : 'kid';
}

...
}

Conclusion

You are now having a class which can produce immutable objects. Its basic methods allows to easily manipulate the object and still keep it immutable.

A Home-made Redux Store

I created a code template/guide on how to create a simple Redux-store for Angular. You can find it in my Gist: Home Made Redux Store

Captain out…


Home-made Redux Store

This is a simple/small Redux Store implementation for small angular apps.
Use in case you don’t want to use the full-blown Redux libraries out there, for the sake of simplicity.

This template code is based and inspired on Ultimate Angular - NGRX Store + Effects Online Training (Free).
Highly recommended.

The example below is based on a super simple fictional ‘Agenda’ app where we can add contacts and to-do tasks.

Step 1: Copy the Home-Made Redux Store code

Copy into your application the following files, from this Gist that form the ‘Home-Made Redux Store’ class.

Step 2: Define your state

Now define your AppState interface and its substates

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
export interface IContact {

name: string;
email: string;

}

export interface ITask {

description: string;
done: boolean;

}


export interface IAppState {

contacts: IContact[];
tasks: ITask[];

}

Step 3: Define the initial state

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
export const initialState: IAppState = {
contacts: [
{
name: "Me",
email: "me@example.com"
}
],

tasks: [
{
description: "Start populating this list",
done: false
}
]
}

Step 4: Define your action types

1
2
3
4
export enum ActionTypes {
ADD_CONTACT,
ADD_TASK
}

Step 5: Define your actions and their payloads

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
export class TaskAction implements IAction {
public readonly type = ActionTypes.ADD_TASK

constructor (
public payload: ITask
){}
}

export class ContactAction implements IAction {

constructor(
public payload: IContact
) {

}

public readonly type = ActionTypes.ADD_CONTACT;

}

Step 6: Define your reducers (functions)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const contactsReducer: IReducer = function (state: IContact[], action: ContactAction) {
switch (action.type) {
case ActionTypes.ADD_CONTACT: {
const contacts = [...state, action.payload];
return contacts;
}
}
return state;
};

const tasksReducer: IReducer = function (state: ITask[], action: TaskAction) {
switch (action.type) {
case ActionTypes.ADD_TASK: {
const tasks = [...state, action.payload];
return tasks;
}
}
return state;
}

export const reducers: IReducers = {
contacts: contactsReducer,
tasks: tasksReducer
};

Step 7: Instanciate the store as your own service

In this example, the State Service extends the HomeMadeReduxStore class. Alternatively you could build a wrapper service
that utilizes the HomeMadeReduxStore class.

1
2
3
4
5
6
7
8
9
10
11
@Injectable()
export class AppStateService extends HomeMadeReduxStore<IAppState> {

constructor(
reducers: IReducers = {},
initialState: IAppState = <IAppState>{}
) {
super(reducers, initialState);
}

}

Step 8: Inject your service into your module

In this example we instanciate the service with our specific state and reducers.

app.module.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [
{provide: AppStateService, useFactory(){
return new AppStateService(reducers,initialState);
}}
],
bootstrap: [AppComponent]
})
export class AppModule { }

Step 9: Start using the store by dispatching actions

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import { TaskAction } from './app-state/actions/task-action';
import { AppStateService } from './app-state/app-state.service';
import { Component } from '@angular/core';
import { ContactAction } from './app-state/actions/contact-action';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';

constructor(
private appState: AppStateService
){

console.log('Intial State:', this.appState.value);

this.appState.dispatch(new ContactAction ({
name: "John Doe",
email: "johndoe@example.com"
}));
console.log('Adding contact', this.appState.value);

this.appState.dispatch(new TaskAction ({
description: 'Buy groceries',
done: false
}));
console.log('Added task', this.appState.value);

}

}