Blog Leadway
software development company, ux ui design, user experience, user interface design, website design, wordpress, graphic design, coding, java, small business, michigan, grand rapids, global, contracting, consulting company, local, usability testing, blog, interface, optimization
19169
page-template,page-template-blog-large-image,page-template-blog-large-image-php,page,page-id-19169,page-child,parent-pageid-1815,qode-social-login-1.0,qode-restaurant-1.0,stockholm-core-1.1,woocommerce-no-js,select-theme-ver-5.1.8,ajax_fade,page_not_loaded,popup-menu-fade,wpb-js-composer js-comp-ver-5.4.7,vc_responsive

Introduction to BOOTSTRAP

BOOTSTRAP

Bootstrap is a popular, opensource front-end toolkit for building web applications      (is the most popular front-end component library).

Is flexible and easy to work with.

It provides all foundational pieces that you need for layouts buttons menus labels badges

Responsive web design is about creating websites which automatically adjust themselves to look good on all devices, from small phones to large desktops.

Bootstrap is all  HTML, CSS and JAVASCRIPT (openstandart).

Bootstrap is used in any technology and platforme.

Bootstrap is primarily about styles that you can build something with

bootstrap to increase reusability uses :

semantic class names (descriptive naes have meaning. but they’re not specific about implementation details  

compositional classes (well factored, very focused and reusable.. you can pull them in pieces )

conventions(add the class name in the right place and structure HTML in the right way –> magic )

 

Bootstrap has some default styles included on the page.

We can check styles in developer tools into a web browser:

right click on the element and  ‘inspect tools’.

 

GRID LAYOUTS

Grid layouts is about Arranging content on a webpage

Is provides structure

GRID = horizontal and vertical guidelines for arranging content and arranging margins.

-intuitive structure for viewers cause it is easy to follow left<->right

Grid is not visible but exists behind the scenes to provide order alignment and consistency.

Every HTML element is a rectangle which has width, height  and margin border, padding

Bootstrap’s grid system allows up to 12 columns across the page.

If you do not want to use all 12 columns individually, you can group the columns together to create wider columns

columns rearrange automatically depending on the screen size because is a responsive system

 

Grid Classes

The Bootstrap grid system has fou classes:

-xs (for phones – screens less than 768px wide)

-sm (for tablets – screens equal to or greater than 768px wide)

-md (for small laptops – screens equal to or greater than 992px wide)

-lg (for laptops and desktops – screens equal to or greater than 1200px wide)

 

1-create a row (<div className=”row”>)  or just <Row></Row>

2-add the number of columns (the number of columns would always add up to 12 for each row.    

example:

<Row>

       <Col md=”6″>

         <div className=”ft-predomo-copy”>© 2018 Predomo</div>

       </Col>

       <Col md=”6″>

         <div className=”join-our-community”>JOIN OUR COMMUNITY</div>

       </Col>

     </Row>

 

Bootstrap Text/Typography

Some html elements are styled a little bit differently by Bootstrap than browser defaults

HTML headings  <h1> – <h6> are styled like the following:

<small>

In Bootstrap : <small>  is used to create a lighter, secondary text in any heading

<mark>

mark elementis used to highlight text.

<blockquote> is used to write a whole text inside.

Bootstrap also has some contextual classes that  provide meaning through colors.

.text-muted, .text-primary, .text-success, .text-info, .text-warning, and .text-danger

classes for background colors are .bg-primary, .bg-success, .bg-info, .bg-warning, and .bg-danger

 

Bootstrap Tables

the class  .table adds basic styling to a table

the class  .table-bordered  adds borders and sizes to tables elements

 

Bootstrap Images

Bootstrap Image Shapes:

the class .img-rounded  adds rounded corners to an image               

  <img src=”cinqueterre.jpg” class=”img-rounded” alt=”Cinque Terre”>

the class .img-circle  adds rounded corners to an image                                              <img src=”cinqueterre.jpg” class=”img-circle” alt=”Cinque Terre”>

thumbnail  image:

<img src=”cinqueterre.jpg” class=”img-thumbnail” alt=”Cinque Terre”>

Responsive images

when automatically adjust  the size of the screen to fit.

the .img-responsive class applies display: block; and max-width: 100%; and height: auto; to the image

 

Image Gallery

You can use Bootstrap’s grid system with the .thumbnail class to create an image gallery.

 

Jumbotron

Jumbotron is the big text that calls attention like title or smth important to be noticed. To create a jumbotron  we use <div> element and .jumbotron class .

if you don’t want jumbotron to be expanded in the background , you can place into a container like this <div class=”container”>

 

CREATING A PAGE HEADER

Use a <div> element with class .page-header to create a page header

 

Well

the .well is used to add a rounded and padding gray   around the text,

BOOTSTRAP ALERT

Is an easy way to provide alert messages

.alert class is followed by one of the four contextual classes .alert-success, .alert-info, .alert-warning or .alert-danger

ALERT LINK

alert-link class is used to add links inside the alert box to match the colored links

 

BOOTSTRAP BUTTONS

use the following classes to provide the buttons

.btn

.btn-default

.btn-primary

.btn-success

.btn-info

.btn-warning

.btn-danger

.btn-link

The button classes can be used on<a>   <input> <button> element.

<a href=”#” class=”btn btn-info” role=”button”>Link Button</a>

<button type=”button” class=”btn btn-info”>Button</button>

<input type=”button” class=”btn btn-info” value=”Input Button”>

<input type=”submit” class=”btn btn-info” value=”Submit Button”>

 

Glyphicons

Bootstrap provides 260 glyph icons from the Glyphicons Halflings set.

Glyphicons can be used in text, buttons, toolbars, navigation, forms, etc.

examples

glyphicons has the following syntax :

<span class=”glyphicon glyphicon-name“></span>

 

Badges

Badges are numerical indicators of how many items are associated with a link

Use the .badge class within <span> elements to create badges:

<a href=”#”>News <span class=”badge”>5</span></a><br>

<a href=”#”>Comments <span class=”badge”>10</span></a><br>

<a href=”#”>Updates <span class=”badge”>2</span></a>

 

they can also be used as buttons.

<button type=”button” class=”btn btn-primary”>Primary <span class=”badge”>7</span></button>

LABELS                                                                                  

   are used to provide additional information, fot example:

<h1>Example <span class=”label label-default”>New</span></h1>

<h2>Example <span class=”label label-default”>New</span></h2>

<h3>Example <span class=”label label-default”>New</span></h3>

<h4>Example <span class=”label label-default”>New</span></h4>

<h5>Example <span class=”label label-default”>New</span></h5>

<h6>Example <span class=”label label-default”>New</span></h6>

 

Basic Progress Bar

Is used to show how far is the progress.

can be created by adding a .progress class to a <div> element

<div class=”progress”>

 <div class=”progress-bar” role=”progressbar” aria-valuenow=”70″

 aria-valuemin=”0″ aria-valuemax=”100″ style=”width:70%”>

   <span class=”sr-only”>70% Complete</span>

 </div>

</div>

 

PAGER

Is a pagination form  used to provide next and previous button link.

to create this you need .pager class and <ul> element.

 

BOOTSTRAP LIST GROUPS

An list group is created by using <ul> combined with .list-group  class and <li> combined with .list-group-item

<ul class=”list-group”>

 <li class=”list-group-item”>First item</li>

 <li class=”list-group-item”>Second item</li>

 <li class=”list-group-item”>Third item</li>

</ul>

 

List group with badges :

to do this you can create a <span> with .badge inside the list

<ul class=”list-group”>

 <li class=”list-group-item”>New <span class=”badge”>12</span></li>

 <li class=”list-group-item”>Deleted <span class=”badge”>5</span></li>

 <li class=”list-group-item”>Warnings <span class=”badge”>3</span></li>

</ul>

 

DROPDOWN

is a toggleable menu that allows users to choose between options

<div class=”dropdown”>

 <button class=”btn btn-primary dropdown-toggle” type=”button” data-toggle=”dropdown”>Dropdown Example

 <span class=”caret”></span></button>

 <ul class=”dropdown-menu”>

   <li><a href=”#”>HTML</a></li>

   <li><a href=”#”>CSS</a></li>

   <li><a href=”#”>JavaScript</a></li>

 </ul>

</div>

 

The .dropdown class indicates a dropdown menu.

To open the dropdown menu, use a button or a link with a class  .dropdown-toggle and the .data-toggle=”dropdown” attribute.

The .caret class creates a caret arrow icon (), which indicates that the button is a dropdown.

Add the .dropdown-menu class to a <ul> element to actually build the dropdown menu.

 

NAVIGATION BAR

Can be extended or collapsed depending on the size screen

A standard navigation bar is created with <nav class=”navbar navbar-default”>

<nav class=”navbar navbar-default”>

 <div class=”container-fluid”>

   <div class=”navbar-header”>

     <a class=”navbar-brand” href=”#”>WebSiteName</a>

   </div>

   <ul class=”nav navbar-nav”>

     <li class=”active”><a href=”#”>Home</a></li>

     <li><a href=”#”>Page 1</a></li>

     <li><a href=”#”>Page 2</a></li>

     <li><a href=”#”>Page 3</a></li>

   </ul>

 </div>

</nav>

 

FORMS

-horizontal

-inline

-vertical

<form action=”/action_page.php”>

 <div class=”form-group”>

   <label for=”email”>Email address:</label>

   <input type=”email” class=”form-control” id=”email”>

 </div>

 <div class=”form-group”>

   <label for=”pwd”>Password:</label>

   <input type=”password” class=”form-control” id=”pwd”>

 </div>

 <div class=”checkbox”>

   <label><input type=”checkbox”> Remember me</label>

 </div>

 <button type=”submit” class=”btn btn-default”>Submit</button>

</form>

 

BOOTSTRAP INPUTS

<div class=”form-group”>

 <label for=”usr”>Name:</label>

 <input type=”text” class=”form-control” id=”usr”>

</div>

<div class=”form-group”>

 <label for=”pwd”>Password:</label>

 <input type=”password” class=”form-control” id=”pwd”>

</div>

 

Media Objects

Bootstrap provides an easy way to align media objects (like images or videos) to the left or to the right of some content. This can be used to display blog comments, tweets and so on

<!– Left-aligned –>

<div class=”media”>

 <div class=”media-left”>

   <img src=”img_avatar1.png” class=”media-object” style=”width:60px”>

 </div>

 <div class=”media-body”>

   <h4 class=”media-heading”>John Doe</h4>

   <p>Lorem ipsum…</p>

 </div>

</div>

 

<!– Right-aligned –>

<div class=”media”>

 <div class=”media-body”>

   <h4 class=”media-heading”>John Doe</h4>

   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

 </div>

 <div class=”media-right”>

   <img src=”img_avatar1.png” class=”media-object” style=”width:60px”>

 </div>

</div>

 

Use a <div> element with the .media class to create a container for media objects.

Use the .media-left class to align the media object (image) to the left, or the .media-right class to align it to the right.

Text that should appear next to the image, is placed inside a container with class=”media-body”.

Additionally, you can use .media-heading for headings.

 

CAROUSEL

the carousel is  a slideshow for passing throw the elements.

<div id=”myCarousel” class=”carousel slide” data-ride=”carousel”>

 <!– Indicators –>

 <ol class=”carousel-indicators”>

   <li data-target=”#myCarousel” data-slide-to=”0″ class=”active”></li>

   <li data-target=”#myCarousel” data-slide-to=”1″></li>

   <li data-target=”#myCarousel” data-slide-to=”2″></li>

 </ol>

 <!– Wrapper for slides –>

 <div class=”carousel-inner”>

   <div class=”item active”>

     <img src=”la.jpg” alt=”Los Angeles”>

   </div>

   <div class=”item”>

     <img src=”chicago.jpg” alt=”Chicago”>

   </div>

   <div class=”item”>

     <img src=”ny.jpg” alt=”New York”>

   </div>

 </div>

 <!– Left and right controls –>

 <a class=”left carousel-control” href=”#myCarousel” data-slide=”prev”>

   <span class=”glyphicon glyphicon-chevron-left”></span>

   <span class=”sr-only”>Previous</span>

 </a>

 <a class=”right carousel-control” href=”#myCarousel” data-slide=”next”>

   <span class=”glyphicon glyphicon-chevron-right”></span>

   <span class=”sr-only”>Next</span>

 </a>

</div>

 

Example Explained

The outermost <div>:

Carousels require the use of an id (in this case id=”myCarousel”) for carousel controls to function properly.

The class=”carousel” specifies that this <div> contains a carousel.

The .slide class adds a CSS transition and animation effect, which makes the items slide when showing a new item. Omit this class if you do not want this effect.

The data-ride=”carousel” attribute tells Bootstrap to begin animating the carousel immediately when the page loads.

The “Indicators” part:

The indicators are the little dots at the bottom of each slide (which indicates how many slides there is in the carousel, and which slide the user are currently viewing).

The indicators are specified in an ordered list with class .carousel-indicators.

The data-target attribute points to the id of the carousel.

The data-slide-to attribute specifies which slide to go to, when clicking on the specific dot.

The “Wrapper for slides” part:

The slides are specified in a <div> with class .carousel-inner.

The content of each slide is defined in a <div> with class .item. This can be text or images.

The .active class needs to be added to one of the slides. Otherwise, the carousel will not be visible.

The “Left and right controls” part:

This code adds “left” and “right” buttons that allows the user to go back and forth between the slides manually.

The data-slide attribute accepts the keywords “prev” or “next”, which alters the slide position relative to its current position.

 

Getting Started with TypeScript

TYPESCRIPT

 

Is a javascript type  with additional features.          

-strong/static typing(you don’t have to specify the type of variables.

-object oriented features (classes, interfaces..)

-compile time errors (so you can catch errors at compile time instead of the ran time(catch and fix them before deploying app)

-access to great tools in detecting code errors

-typescript is like a superset of javascript.

PATH:

TYPESCRIPT—-> transpile—> JAVASCRIPT

When you build an application typescript need to be transpiled into javascript code that browsers can understand.

-the transpilation in angular happens under the hood.

Javascript versions :

ES5

ES6

ES2016

ES2017

 

VAR vs LET  (LET is always placed before the element,because it to the nearest scope not to the nearest function, compiler report this errors but generates still a valid js code  but the problem is that the code is going to break somewhere)

DIFFERENT TYPES IN TYPESCRIPT

Type annotation – is used when we don’t know the type of the  variable

let a: number;

let b: boolean;

let c: strings;

let d: any;

let e: number[] = {1,2,3};//array

let f: any[] = {1,’true’,’false’,3};

 

ENUM– for groups of related constants(example colours.)

you can put all the related constants in a container

enum colours{red,green , blue}

let backgroundcoolour= colour.Red;

in javascript enum is kinda complicated

 

TYPE ASSERTIONS 

 -when we tell typesript compiler  that is actually a string(for example)

2 ways:

1– to prefix variables with angle brackets {<string>message}.endwith

2– to use message as a string ={message as string}.endwith…

type assertion doesnt change the type of variable on runtime  this is used to access the intellisens

 

ARROW FUNCTIONS:(=>)—is a clean way to declare functions

let dolog = (message) => console.log(message);

 

CUSTOM TYPES IN TYPESCRIPT

let drawPoints = (point) =>{}

drawPoint({

x:1,

y:2,

})

this would break so we use inline annotation

let drawPoints = (point: {x:number,y: number) =>{}

 

INTERFACES

:are used to not repeat an object in multiple places.

interface Point{

x:number,

y: number

}

let drawPoints = (point:Point) =>{}

drawPoint({

})

 

In interfaces we use upper case (smth Pascale)

COHESION : means that things that are related should be together in one unit

to avoid creating other functions.This units are called CLASSES, it groups properties functions that are related to each other.

Interfaces can not include implementation (mostly decorative)  only signatures and functions:

interface Point{

x:number,

y: number

draw: (point)=>void  //draw can directly access  x and y in the same unit

}

let drawPoints = (point:Point) =>{}

drawPoint({  })

to apply cohesion we need to use a class instead of interfaces

class Point{

x:number;

y: number;

draw(){}

getDistance(another:point) {}

let drawPoints = (point:Point) =>{}

drawPoint({

})

 

How to create an object and call the draw method:

property is different from field

class Point{  // point is a class

x:number;

y: number;

draw(){

console.log(‘X:’+ this.x + ‘, Y:’+ this.y)

}

getDistance(another:point) {}

let drawPoints = (point:Point) =>{}

}

let point =new Point();///  this point is an object so an instance of a class

point.x=1;

point.y=2;

point.draw();

 

Human is a class  anne,bill etc are objects of the class.

CONSTRUCTORS  

: Methods that are called when we create an instance of a class

class Point{  // point is a class

// method, can have parameters x and y

constructor(x : number, y : number)

// initialise this fields

this.x =x;

this.y =y;

}

draw(){

console.log(‘X:’+ this.x + ‘, Y:’+ this.y){

}

draw(){

console.log(‘X:’+ this.x + ‘, Y:’+ this.y)}

getDistance(another:point) {}

let drawPoints = (point:Point) =>{}

}

let point =new Point(1,2);

point.draw();

}

we can make parameters optional

constructor(x? : number, y? : number)

{this.x =x;

this.y =y;

}

draw(){

console.log(‘X:’+ this.x + ‘, Y:’+ this.y)

}

getDistance(another:point) {}

let drawPoints = (point:Point) =>{}

}

let point =new Point();// we dont set initial values because x and y are optional (?)

point.draw();

}

ACCESS MODIFIERS 

Are used to control certain members of a class from the outside.

Is a keyword applied to a member of a class to control its access from outside                                                                             There are 3 types of access modifiers :

– public : are  mostly used  and all members are public by default  …(when the object can be accessed anywhere)

– private:  when is only accessible within the class point

-protected                                                                                                                   

Access modifiers are used on fields properties and methods .

Are used to achieve the same thing in less code :

class Point {

constructor(private x? : number, private y? : number)

{//typescript can create this field and initialise it with values of arguments}

draw(){

console.log(‘X:’+ this.x + ‘, Y:’+ this.y)

}

getDistance(another:point) {}

let drawPoints = (point:Point) =>{}

}

let point =new Point();

point.draw();

}

class Point {

constructor(private x? : number, private y? : number)

{}

draw(){

console.log(‘X:’+ this.x + ‘, Y:’+ this.y)

}

get X() {

return this.x;

 }

set X(value){

if(value < 0 )

throw new Error(‘value can not be less than 0’)

this.x = value ;  // properties

}

let point =new Point(1,2);

let x = point.getX // get the value and display it to the user

point.draw();

}

PROPERTIES

  we use get and set and the name of the property  just like methods

but the difference is that we can use properties like fields  for example we dont have to : read x and later we can set it // point.setX(10);

class Point {

constructor(private_x? : number, private_y? : number)

{}

draw(){

console.log(‘X:’+ this.x + ‘, Y:’+ this.y)

}

get x() {

return this.x;

 }

set x(value){

if(value < 0 )

throw new Error(‘value can not be less than 0’)

this._x = value ; }

}

let point =new Point(1,2);

let x = point.x

point.x= 10

point.draw();

//properties looks like fields but are like methods in a class

 

MODULES

each file can be seen as a module

export class Point {

constructor(private_x? : number, private_y? : number)

{}

draw(){

console.log(‘X:’+ this.x + ‘, Y:’+ this.y)

}

To use files somewhere else we need to export our program in the outside

When we use export  this file is a module

main.Ts

import {Point} from ‘./point’;

let point =new Point(1,2);

point.draw();

 

Usage:

npm install typescript

tsc

 

Primitive types

Any type (explicitly untyped)                                                                any

void type (undefined or null, use for function returns only)          void

Undefined type                                                                                         undefined

Null type                                                                                                     null

never type                                                                                                   never

readonly                                                                                                      readonly

String (including ES6 multi-line string templates)                           string

Number                                                                                                       number

Boolean                                                                                                        boolean

object (may be an Object or non-primitive)                                         object                                

Named types (interface, class, enum)

Interface

interface Child extends Parent, SomeClass {

 property: Type;

 optionalProp?: Type;

 optionalMethod?(arg1: Type): ReturnType;

}

 Class

 class Child extends Parent implements Child, OtherChild {

 property: Type;

 defaultProperty: Type = ‘default value’;

 private _privateProperty: Type;

 static staticProperty: Type;

 constructor(arg1: Type) {

   super(arg1);

 }

 private_privateMethod(): Type {}

 methodProperty: (arg1: Type) => ReturnType;

 overloadedMethod(arg1: Type): ReturnType;

 overloadedMethod(arg1: OtherType): ReturnType;

 overloadedMethod(arg1: CommonT): CommonReturnT {}

 static staticMethod(): ReturnType {}

 subclassedMethod(arg1: Type): ReturnType {

   super.subclassedMethod(arg1);

 }

}

Enum

enum Options {

 FIRST,

 EXPLICIT = 1,

 BOOLEAN = Options.FIRST | Options.EXPLICIT

}

enum Colors {

 Red = “#FF0000”,

 Green = “#00FF00”,

 Blue = “#0000FF”

}

Object type literals

Object with implicit Any properties { foo; bar; }

Object with optional property    { required: Type; optional?: Type; }

Hash map                                       { [key: string]: Type; }

 

Union and intersection types

Union type                                    let myUnionVariable: number | string;

Intersection type                        let myIntersectionType: Foo & Bar;

Arrays and tuples

Array of strings string[ ]   or Array<string>

Array of functions that return strings    { (): string; }[ ] or Array<() => string>

Tuples       

                  let myTuple: [ string, number ];

                  myTuple = [ ‘test’, 42 ];

Functions

Function

                 { (arg1: Type, argN: Type): Type; } or

                    (arg1: Type, argN: Type) => Type;

Constructor

                        { new (): ConstructedType; } or

                        new () => ConstructedType;

Default argument        

               function fn(arg1: Type = ‘default’): ReturnType {}

Arrow  function

                                 (arg1: Type): ReturnType => {} or

                                 (arg1: Type): ReturnType => Expression

Generics

Function using type parameters

<T>(items: T[], callback: (item: T) => T): T[]

Interface with multiple types   

interface Pair<T1, T2> {

             first: T1;

             second: T2; }

 

Constrained type parameter

   <T extends ConstrainedType>(): T

Default type parameter       

     <T = ConstrainedType>(): T

Constrained and default type parameter

    <T extends ConstrainedType = ConstrainedType>(): T

 

Partial and mapped types

Partial type

   Partial<{ x: number; y: number; z: number; }>

Is equivalent to

{ x?: number; y?: number; z?: number; }

Readonly type

Readonly<{ x: number; y: number; z: number; }>

is equivalent to

                {

                      readonly x: number;

                      readonly y: number;

                      readonly z: number;

                }

Pick type

                Pick<{ x: number; y: number; z: number; }, ‘x’ | ‘y’>

      is equivalent to

                    { x: number; y: number; }

Record type

  Record<‘x’ | ‘y’ | ‘z’, number>

is equivalent to

             { x: number; y: number; z: number; }