Read "Streaming Systems" 1&2, Streaming 101 Read "F1, a distributed SQL database that scales" Read "Zanzibar, Google’s Consistent, Global Authorization System" Read "Spanner, Google's Globally-Distributed Database" Read "Designing Data-intensive applications" 12, The Future of Data Systems IOS development with Swift Read "Designing Data-intensive applications" 10&11, Batch and Stream Processing Read "Designing Data-intensive applications" 9, Consistency and Consensus Read "Designing Data-intensive applications" 8, Distributed System Troubles Read "Designing Data-intensive applications" 7, Transactions Read "Designing Data-intensive applications" 6, Partitioning Read "Designing Data-intensive applications" 5, Replication Read "Designing Data-intensive applications" 3&4, Storage, Retrieval, Encoding Read "Designing Data-intensive applications" 1&2, Foundation of Data Systems Three cases of binary search TAMU Operating System 2 Memory Management TAMU Operating System 1 Introduction Overview in cloud computing 2 TAMU Operating System 7 Virtualization TAMU Operating System 6 File System TAMU Operating System 5 I/O and Disk Management TAMU Operating System 4 Synchronization TAMU Operating System 3 Concurrency and Threading TAMU Computer Networks 5 Data Link Layer TAMU Computer Networks 4 Network Layer TAMU Computer Networks 3 Transport Layer TAMU Computer Networks 2 Application Layer TAMU Computer Networks 1 Introduction Overview in distributed systems and cloud computing 1 A well-optimized Union-Find implementation, in Java A heap implementation supporting deletion TAMU Advanced Algorithms 3, Maximum Bandwidth Path (Dijkstra, MST, Linear) TAMU Advanced Algorithms 2, B+ tree and Segment Intersection TAMU Advanced Algorithms 1, BST, 2-3 Tree and Heap TAMU AI, Searching problems Factorization Machine and Field-aware Factorization Machine for CTR prediction TAMU Neural Network 10 Information-Theoretic Models TAMU Neural Network 9 Principal Component Analysis TAMU Neural Network 8 Neurodynamics TAMU Neural Network 7 Self-Organizing Maps TAMU Neural Network 6 Deep Learning Overview TAMU Neural Network 5 Radial-Basis Function Networks TAMU Neural Network 4 Multi-Layer Perceptrons TAMU Neural Network 3 Single-Layer Perceptrons Princeton Algorithms P1W6 Hash Tables & Symbol Table Applications Stanford ML 11 Application Example Photo OCR Stanford ML 10 Large Scale Machine Learning Stanford ML 9 Anomaly Detection and Recommender Systems Stanford ML 8 Clustering & Principal Component Analysis Princeton Algorithms P1W5 Balanced Search Trees TAMU Neural Network 2 Learning Processes TAMU Neural Network 1 Introduction Stanford ML 7 Support Vector Machine Stanford ML 6 Evaluate Algorithms Princeton Algorithms P1W4 Priority Queues and Symbol Tables Stanford ML 5 Neural Networks Learning Princeton Algorithms P1W3 Mergesort and Quicksort Stanford ML 4 Neural Networks Basics Princeton Algorithms P1W2 Stack and Queue, Basic Sorts Stanford ML 3 Classification Problems Stanford ML 2 Multivariate Regression and Normal Equation Princeton Algorithms P1W1 Union and Find Stanford ML 1 Introduction and Parameter Learning

HTML CSS Bootstrap basics

2017-12-20

HTML Basics

MDN: Mozilla Developer Network has some good reference and tutorials.

MDN element ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element

Tags

<strong>bold</strong>
<i>italic</i>

<!-- ordered list, nested -->
<ol>
    <li>a
        <ul>
            <li>a1</li>
            <li>a2</li>
        </ul>
    </li>
    <li>b</li>
</ol>

<!-- unordered list -->
<ul>
    <li>a</li>
    <li>b</li>
</ul>

Divs and spans

They allows to group thing together.

  • div is a block level container, will push following content to new line
  • span is a generic container, inline

Attributes

MDN attribute ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes

<!-- image -->
<img src= "./pic.png">

<!-- links -->
<a href="url">Text</a>

Tables

MDN table ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

    <table>
        <!-- thead: table header block -->
        <thead>
            <!-- tr: table row -->
            <tr>
                <!-- th: table header -->
                <th>First Col</th>
                <th>Sec Col</th>
            </tr>
        </thead>
        <!-- tbody: table body block -->
        <tbody>
            <tr>
                <!-- td: column -->
                <td>A</td>
                <td>AA</td>
            </tr>
            <tr>
                <td>BBB</td>
                <td>BBBB</td>
            </tr>
        </tbody>

    </table>

Forms

MDN input tag ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

    <form action="where_the_form_send_data_to" method="what_HTTP_method_post/get">
        <label>Username:
            <!-- validation -->
            <input type="text" name="username" id="" placeholder="Name" required>
        </label>
        
        <label>Email:
            <!-- validation -->
            <input type="email" name="email" id="email" placeholder="Email" required pattern=".{5,10}" title="Password must be 5 to 10 chars">
        </label>
        
        <!-- or label for id-->
        <label for="password">Password:</label>
        <input type="password" name="password" id="password" placeholder="Password">
        
        <input type="date" name="" id="">
        <input type="color" name="" id="">
        <input type="file" name="" id="">
        <input type="checkbox" name="" id="">


        <!-- button -->
        <button>Submit</button>
        <input type="submit" name="" id="">
    </form>
  • radio button
    • radio: User has only one choice
    • checkbox can be checked multiple.
  • select tag
  • textarea tag
<!-- radio button -->
    <form action="action" method="post">
        <!-- use the same name for the same radio group -->
        <!-- value will be sent -->
        <label for="dogs">Dogs:</label>
        <input type="radio" name="pet" id="dogs" value="dogs">
        <label for="cats">Cats:</label>
        <input type="radio" name="pet" id="cats" value="cats">

        <!-- if button is the last element in form, it will submit -->
        <button>Go!</button>
    </form>


<!-- select tag -->
    <form action="action" method="post">
        <!-- value will be sent -->
        <select name="color" id="">
            <option value="RED">Red</option>
            <option value="BLUE">Blue</option>
            <option value="Green">Green</option>
        </select>
    </form>


<!-- textarea tag -->
    <!-- for input with multiple lines -->
    <textarea name="para" id="" cols="30" rows="10"></textarea>

CSS

Introduction

Cascading Style Sheets

general rule:

selector {
    property1: value1;
    property2: value2;
}

example:

h1 {
    color: purple;
    font-size: 56px;
}

Embedded in HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- define style -->
    <style type="text/css">

        h1 {
            color: purple;
        }
        li {
            color: orange;
        }
    </style>
</head>
<body>
    
</body>
</html>

Preferred: Use <link> tag:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- use link tag -->
    <link rel="stylesheet" type="text/css" href="path_to_dot_css_file">
</head>
<body>
    
</body>
</html>

Color

define by

  • name like ‘red’
  • hexadecimal: ‘#’ + String of 6 hexadecimal numbers(from 0-F)
  • RGB: rgb(r, g, b). r, g, b range from 0-255
  • RGBA: last is alpha standing for transparency form 0.0-1.0
h1 {
    color: #4b0082;
}
h2 {
    color: rgb(0, 255, 0);
}
h3 {
    color: rgba(100, 100, 100, 0.6);
}

We can use a color picker to get the hexadecimal of a color.

Background and border

h1 {
    background: green;

    border-color: purple;
    border-width: 5px;
    border-style: solid;
    /* equivalent to */
    border: 5px solid purple;
}
body {
    /* set image as bgd */
    background: url(path_to_img);
    background-repeat: no-repeat;
    /* cover whole page */
    background-size: cover;
}

We can find pictures that can be used at https://unsplash.com/

Set a background pic:

body {
    background: url(#);
    background-size: cover;
    background-position: center;
}

html {
    height: 100%;
}

CSS selectors

The basics: element, id and class

  • element: select all instances of a given element
  • id: select an element with a given ID, only one per page!
  • class: select all elements with a given class
/* element */
h1 {
    color: red;
}

/* id */
#specialID {
    color: yellow;
}

/* class */
.high {
    background: blue;
    text-decoration: line-through;
}
<div> 
    <p>Hey</p>
    <p class="high">Hi</p>
    <p id="specialID">hello</p>
    <p class="high">Howdy</p>
</div>

More advanced selectors:

The 30 CSS Selectors You Must Memorize

  • star: select every thing
  • descendant selector: take two or more tags and chain them together
  • adjacent selector: select adjacent tags on the same level (apply on the later one)
  • attribute selector: select all elements with this href/other stuff
  • nth of type: select the nth element in every group of that type
/* star */
* {
    color: red;
}


/* descendant
    select all <a> inside <li> */
li a {
    color: blue;
}

li .hello {

}


/* adjacent */
h4 + ul {
    color: green;
}


/* attribute */
a[href="http://www.google.com"] {
    color: yellow;
}

input[type="text"] {
    color: black;
}
    /* pseudo-class */
    a:hover {

    }
    input:checked {

    }


/* nth of type */
li:nth-of-type(3) {
    color: purple;
}

/* select every other */
li {
    background: #fff;
}

li:nth-child(2n) {
    background: #f7f7f7;
}

Chrome inspector

  • Right click -> view page source
  • Right click -> inspect elements
    • the style can be changed

Cascade and specificity

If we specify properties of parent, the child elements will inherit those properties(current or the nearest).

Which selector wins?

id > class, attribute, pseudo-class > type > universal

Specificity Calculator

Font

We can generate random paragraph for test using ipsum generator. bacon ipsum

CSS font stack

  • font-family
  • font-size
  • font-weight
  • line-height
  • text-align
  • text-decoration: underline or else
  • text-transform: change case
  • letter-spacing: space between letters
/* font-family: specify font */

p {
    font-family: "Arial";
}

/* font-size */ 
    /* can use "inspect elements" to change size */
    /* can use "em" unit to change font size relatively to the parent tag*/

body {
    font-size: 16px;
}

p {
    font-size: 1.0em;
}

p {
    font-size: 12px;
}


/* font-weight */
    /* some fonts can have range from 100 to 800 */
p {
    font-weight: bold; 
}

/* line-height: use it to center text vertically by set it taking entire area*/
p {
    line-height: 2px;
}

li {
    height: 40px;
    line-height:40px;
}

/* text-align */
h1 {
    text-align: right;
}

/* text-decoration */ 
h1  {
    text-decoration: underline;
}

Google fonts

Google fonts: https://fonts.google.com/

  1. search the right font
  2. click the red plus sign circle to the right of the font name
  3. click the bottom grey tab
  4. click embed, copy the link tag and paste it into the head tag in project

Box model

Every element has a rectangular box around it. It has four edges: margin, border, padding and content.

  1. content: the width and height of the content box
  2. padding: the space between content and border
  3. border
  4. margin
p {
    /* content - width and height */
        /* percentage relative the the parent */
    max-width: 700px;
    width: 80%;
    height: 80%;


    /* border */
    border: 2px solid blue;
    /* or */
    border-left: 1px solid black;


    /* padding */
    padding: 10px;
    /* or */
    padding-left: 40px;


    /* margin */
        /* margin top, right, bot, left*/
    margin: 100px 20px, 50px, 10px;
    /* or */
    margin-top: 50px;
        /* margin auto will do center */
    margin: 0 auto 0 auto;
}

Float

float: left will put the element on the same line of the previous one and to the left of it. It will delete the default white space between images.

img {
    width: 30%;
    float: left;
    margin: 1.66%;
}

Bootstrap

Bootstrap Doc

It includes a CSS file and a js file.

<button class="btn btn-success btn-xs" disabled="disabled">Click</button>

Forms and inputs

Jumbotron

We can put jumbotron or other stuff inside a container to have proper margin on the whole page.

<div class="container"> 
    <div class="jumbotron"> 

    </div>
</div>

Forms

  • Use form-group to wrap each pair of label and input to have optimal spacing.
  • Use form-control for input tag
  • Use form-inline to create inline form
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-check">
    <label class="form-check-label">
      <input type="checkbox" class="form-check-input">
      Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
<!-- fix the nav bar on the top -->
<nav class="navbar navbar-default navbar-fixed-top">
  <!-- add container to make the margin right -->
    <div class="container">
        <div class="navbar-header">
            <a href="#" class="navbar-brand">Brand</a>
        </div>
        <ul class="nav navbar-nav">
            <li>
            <a href="#">About</a>
            </li>
            <li>
            <a href="#">Contact</a>
            </li>
        </ul>
        <!-- make content on the right -->
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Sign up</a></li>
            <li><a href="#">Sign in</a></li>
        </ul>
    </div>
</nav>


<!-- default nav bar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <!-- button for toggling -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- all stuff inside this div will be collapsed -->
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

<!-- put script at the end of script -->
<!-- add jquery script before js -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<!-- add bootstrap js -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

Grid system

The grid system scales up to 12 columns. A row can be divided into several parts whose width sum to 12. The grid should be used inside a container.

4 sizes:

  • xs
  • sm
  • md
  • lg
<div class="container">
    <!-- this is a row -->
    <div class="row">
        <!-- nested -->
        <div class="col-lg-3 col-md-6">
            <!-- another 12 units inside this row -->
            <div class="row">
                <div class="col-lg-6">FIRST</div>
                <div class="col-lg-6">SECOND</div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6">COL LG 3</div>
        <div class="col-lg-3 col-md-6">COL LG 3</div>
        <div class="col-lg-3 col-md-6">COL LG 3</div>

    </div>
</div>

With thumbnail div, image will be properly scaled and get a nice border.

<div class="thumbnail"> 
    <img src="#">
</div>

Font-awesome

Font Awesome can now be found at http://fontawesome.io/. A lot of icons.

CDN: https://www.bootstrapcdn.com/fontawesome/

To change color or size, just change the font color or size.

Mobile

If you want your bootstrap styled website to be responsive on mobile then be sure to add the following meta tag to your <head> element, above the <title> tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

Misc

CSS

box-sizing

/* border box will not include the margin */
input {
    box-sizing: border-box; 
}

input focus

/* while some input is being conducted */
input:focus {
    background-color: #fff;
    border: 3px solid #2980b9;
    outline: none;
}

Color gradients

UIgradients: https://uigradients.com/#DigitalWater

Fill a space

/* fill the space with border box */
.delete {
    background-color: #e74c3c;
    height: 40px;
    margin-right: 20px;
    text-align: center;
    color: white;
    width: 40px;
    display: inline-block;
}

Make grid flexible with different-size images

<!-- note the style, can add to css file -->
<div class="row" style="display:flex; flex-wrap: wrap;">
    <% campgrounds.forEach(function(camp) { %>
        <div class="col-md-3 col-sm-6">
            <div class="thumbnail">
                <img src="<%= camp.image %>" height="150">
                <div class="caption">
                    <h4><%= camp.name %></h4>
                </div>
            </div>
        </div>
    <% }); %>
</div>

Bootstrap

Text under pic

<div class="thumbnail">
    <img  class="img-responsive" src="<%= camp.image %>" height="150">
    <div class="caption"> <!-- or caption-full -->
        <h4><%= camp.name %></h4>
    </div>
</div>

Center text

<div class="row text-center">
</div>

Simple navbar

 <nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" herf="/">Home</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a  href="#">Log in</a></li>
                <li><a href="#">Sign up</a></li>
                <li><a href="#">Log out</a></li>
            </ul>
        </div>
    </div>
</nav>

Button takes entire width

<!-- use btn-block-->
<div style="width=30%; margin: 0 auto;">
    <form action="/campgrounds" method="POST">
        <input class="form-control" type="text" placeholder="Name" name="name">
        <input class="form-control" type="text" placeholder="Image url" name="image">
        <button class="btn btn-default btn-lg btn-block">Submit</button>
    </form>
</div>

A block with grey background

<div class="well"></div>

Pull content to the right

<h4 class="pull-right">$9.00/night</h4>
<h4><a><%= campground.name %></a></h4>

Creative Commons License
Melon blog is created by melonskin. This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.
© 2016-2019. All rights reserved by melonskin. Powered by Jekyll.