• java.util.Optional

  Imagine Optional as a container that may or may not contain some value. Just like all references in Java can point to some object or be null, Option may enclose some (non-null!) reference or be empty.

Optional instead of plain null is statically checked at compile time and much more informative as it clearly indicates that a given variable may be present or not. Of course it requires some discipline - you should never assign null to any variable any more.

• Angular 2 Basic

The heart of angular 2 is containers.

import from angular/core

import { 
    Component, 
    Input,
    Output,
    EventEmitter } from '@angular/core';

• Design a table with a primary key of varchar or int?

• In gereral, VARCHAR or INT has no big differency in query. What matter is the access pattern.

Narrowness:
On absolute terms, a wider key will always be worse than a narrow key. The type carries no importance, is the width of the key that matters. When compared with INT though, few types can beat INT in narrowness, so INT usually wins that argument just by the fact that it is only 4 bytes wide.

More on this aspect:
In most cases, The Primary Key (PK) is defined as INT NOT NULL IDENTITY(1,1) field in each table.
On one side, with an IDENTITY field, the database handles all the details of making sure it’s really unique, and the INT datatype is just 4 bytes, and fixed, so it’s easier and more suited to be used for the primary (and clustering) key in the table.
On the other side, using a VARCHAR(10) or (20) just uses up too much space - 10 or 20 bytes instead of 4.

• Another fact is when choosing the PK usually one also selects the clustered key. Those two are often confused. By default, SQL server chooses PK as one of clustering indexes.

• What is machine learning?

• Core Task
  • Finds patterns in data
  • Use those patterns to predict future

• What is learning?
  • Identifying patterns
  • Recognizing those patterns when you see them again

Machine can find a pattern in existing data, then create and use a model that recognize those patterns in new data

• Carousel Parameters

Problem: In Hippo banner carousel setting, changing parameter height has no effect.

Solution: This is because missing configuration of CSS with parameter height in essentials-carousel.ftl.

The following code is a good example to show that using object from java bean to dynamically configure the CSS in script.

<#-- @ftlvariable name="cparam" type="org.onehippo.cms7.essentials.components.info.EssentialsCarouselComponentInfo" -->

<@hst.headContribution category="htmlHead">
    <style type="text/css">
        <#-- Carousel base class -->
        .swiper-wrapper {
            max-height: ${cparam.carouselHeight}px;
        }
    </style>
</@hst.headContribution>

• MVC

• A web framework built around the principles of Spring
• POJO based and interface driven
• Based on a Dispatcher Servlet / Front Controller pattern
• Support for:
  • Themes
  • Locales | i18n
  • Restful services
  • Annotation based configuration
  • Seamless integration with other Spring Service/beans

• Built-in Function

Built-ins are like methods that are added to the objects by FreeMarker. To prevent name clashes with actual methods and other sub-variables, instead of dot (.), you separate them from the parent object with question mark (?).

Some examples:

${testString?upper_case}
${testString?html}
${testString?upper_case?html}

${testSequence?size}
${testSequence?join(", ")}

Assuming that testString stores the string “Tom & Jerry”, and testSequnce stores the strings “foo”, “bar” and “baz”, the output will be:

TOM & JERRY
Tom & Jerry
TOM & JERRY

3
foo, bar, baz

html(deprecated): This built-in is deprecated by the auto-escaping mechanism introduced in 2.3.24.

Other examples:

path?ensure_starts_with('/')
path?length 
<#--not path?length()-->

Ref links: builtin methods

• Introduction

• Why big data?
  In case of Google:
  • ~40 billion web pages x 30 kb each = Petabyte
  • average disk speed reads about 120 mb/sec
  • over 3 months to read the web
  • about 1,000 drives to store and use
    Read more »

• HTML DIV overflow and scroll

  Sometimes, the overflow-y:scroll is not working.

  $('#div_scroll').css('overflow-y', 'auto')

Simply because the height property is missing.

$('#div_scroll').css('height', '200px')

• Datepicker

Configure datepicker: make sure the right jQuery libs have been included.

Show calendar image only with a hidden input field.

<input type="hidden" id="dp" />

$("#dp").datepicker({
    buttonImage: '../images/calendar.png',
    buttonImageOnly: true,
    changeMonth: true,
    changeYear: true,
    showOn: 'both',
});

Show both date input and image fields. The datepicker is binding to the input field. Then, when clicking the image, it also trigger the popup of same datepicker.

<input type="text" id="date" >
<div>
    <img id="date_img" src="../images/calendar.png”>
</div>

$("#date").datepicker({
    format: "yyyy-mm-dd",
    autoclose: true
});

$("#date_img").on( "click", function() {
    $('#date').datepicker('show');
});

Possible conflict with bootstrap: when it comes with <div class="input-group date" data-provide="datepicker"> in HTML, the datepicker does not popup.

• Get URL Parameters

<script type="text/javascript">
    function $_GET(q,s) { 
        s = s ? s : window.location.search; 
        var re = new RegExp('&'+q+'(?:=([^&]*))?(?=&|$)','i'); 
        return (s=s.replace(/^\?/,'&').match(re)) ? (typeof s[1] == 'undefined' ? '' : decodeURIComponent(s[1])) : undefined; 
    } 
</script>

This is a JavaScript implementation of PHP’s $_GET functionality. It uses a regular expression to keep the code to a minimum. Here is a simple example of how to use it:

// this code would print "hello world" with http://someurl?var1=hello&var2=world
var var1 = $_GET('var1');
var var2 = $_GET('var2');
document.write(var1 + " " + var2);

// get the src parameter and split it down to the search query string
var src = document.getElementById('example').src;
params = src.split('?');
var var1 = $_GET('var1','?'+params[1]);

• Two Digits Hours and Minutes

function currentFormatTime(){
    var date = new Date(),str='';
    var currHours = date.getHours();
    currHours = ("0" + currHours).slice(-2);
    str += currHours + ':';
    var currMins = date.getMinutes();
    currMins = ("0" + currMins).slice(-2);
    str += currMins + '';
    return str;
}

//set current time
$("#currentTime").html(currentFormatTime);
setInterval(function(){$("#currentTime").html(currentFormatTime)},1000);

• Format Date to MM/DD/YY

NOTE:

• Consider the case with a single digit in month and day
• Consider to slice the year to two digits.
• getYear() returns [year]-1900. E.g., 2016 - 1900 = 116.

function formatDate(date) {
    var pDate = new Date(date);
    var month = pDate.getMonth() + 1;
    month = month < 10 ? "0" + month : month;
    var day = pDate.getDate();
    day = day < 10 ? "0" + day : day;
    var year = pDate.getFullYear();
    year = year.toString().substr(2,2);
    return  month + '/' + day + '/' + year;
}

• Populate HTML Table Dynamically

<div>
    <table>
        <thead>
        <tr>
            <td>ID</td>
            <th>NAME</th>
            <th>STATUS</th>
        </tr>
        </thead>
        <tbody id="tableBody">
        </tbody>
    </table>
</div>

NOTE:

• $("#tableBody").empty() clear the all children html elements inside #tableBody
• $("#tableBody").remove() removes all including #tableBody itself.

$("#tableBody").empty();

$.each(data, function (key, value) {
    htmlTable(value.id, value.name, value.status);
});

//populate html table
function htmlTable(id, name, status) {
    // <th>ID</th>
    // <th>NAME</th>
    // <th>STATUS</th>
    var tr = '<tr>'
    tr += '<th scope="row">' + id + '</th>';
    tr += '<td>' + name + '</td>';
    tr += '<td>' + status + '</td>';
    tr += '</tr>';
    $("#tableBody").append(tr);
}

• Treat String like Variable Name

User eval (may have some problem…).
Here, the #tableBody shows content based on the option being selected in a dropdown list #select. Suppose variable varName has corresponding html table content.

$('#select').on('change', function () {
    $('#tableBody').empty();
    var varName = $( "#select option:selected" ).val();
    eval("$('#tableBody').append(" + varName + ")");
})

Another method, if varName has been defined as global variable. Call it by window[varName].
$('#tableBody').append(window[varName]);

• Introduction

Inversion of Control (IoC): The core of the Spring framework is based on the principle of IoC. IoC is a technique that externalizes the creation and management of component dependencies.

A alternative descriptive name is Dependency Injection (DI). Such behavior takes place at runtime, in which an instance of class A is provided to class B by some external process if B depends on A to perform some processing.

Aspect Oriented Programing (AOP): AOP provids another way of thinking about program structure. The key unit of modularity in OOP is the class, whereas in AOP the unit of modularity is the aspect. Aspects enable the modularization of concerns such as transaction management, log management, and input field validation that cut across multiple types and objects.

The best document: Spring Framework Documents