CSS Selectors

 CSS Selectors

In CSS, selectors are patterns used to select the element(s) you want to style

There are 3 different types of CSS selectors

1.Element

2.Class

3.ID

We will see in details below,

1.Element

  The element selector selects HTML elements based on the element name.

Example:

p--Selects all <p> elements

<p>My first CSS tutorials</p>

p{

    text-align: center;

    color: red;

}

Here, all the paragraph will have text aligned in Center with color red.

2.Class

The class selector selected HTML elements based on the specific class attributes.

This will have (.) period followed by class name.

<p class="center">My first CSS tutorials.</p> 

.center {

      text-align: center;

      color: red;

}

Here, all the element with class="center" will text aligned in Center with color red.

3.ID

ID selector uses the ID attribute of an HTML element to select a specific element.

ID selector is unique across the page, it should be used to select one unique element.

Write (#) character followed by id of the element.

<p id="para_1">My first CSS tutorials.</p>

#para_1 {

      text-align: center;

      color: red;

} 

Here, the specific id (para_1) element will be render on to the page with text aligned in Center and color red.

Java Program to find the first repeating element in array

Simple Java program to find the first repeating element in array

• Let say there is an array
• int array[]={8,7, 5, 3, 4, 3, 5, 6};
• Now if you see the first repeating element is 5
• To solve this, First think comes to our mind is  use iteration.
• then use Set and one counter variable.
• Since we need the first repeating element ,  do the iteration from array.length instead of 0. So that the first repeating element will come at the end in the iteration

public class FirstRepeatingElement {

public static void main(String[] args) throws java.lang.Exception {

int array[] = { 8, 7, 5, 3, 4, 3, 5, 6 };

int min = -1;

// Creates an empty hashset

HashSet<Integer> set = new HashSet<>();

// Traverse the input array from right to left

for (int i = array.length - 1; i >= 0; i--) {

// If element is already in hash set, update min

if (set.contains(array[i])) {

min = i;

}

else {

// Else add element to hash set

set.add(array[i]);

}

}

if (min != -1) {

System.out.println("The first repeating element is " + array[min]);

} else {

System.out.println("There are no repeating elements");

}

}

}

• As you can see, Hashset will not allow duplicate, whenever it finds the duplicate element just increment the counter min variable.
• And also it iterate the for loop in reverse direction.

Alternate approach is Use LinkedHashMap.

• Initialize LinkedHashMap<Integer, Integer> hMap=new LinkedHashMap<>();
• Iterate the array element in for loop
• Check the map contains the same element already
• if not put the element in hMap with value 1
• if already found, then just increment the value to +1

for(int i=0;i<arr.length;i++) {

if(hMap.get(arr[i]) == null) {

hMap.put(arr[i], 1);

}else {

int val=hMap.get(arr[i]);

hMap.put(arr[i],val+1);

}

}

Finally, iterate the Map, the print the first repeating element in array.

ToDo Sample Application Using AngularJS

ToDo Application Using AngularJS :

Building a sample ToDo application with option to add/delete and mark it as completed using following below technologies

 Angular 1.5.8, 
 HTML5,
 JavaScript,
 bootstrap 3.3.6,
 JAX-RS 2.0,
 EJB 3.2,Hibernate
 Mysql 8.0,
 Maven 3.0.3,
 Payara,
 Micro payara

For source code, download it from below github link
https://github.com/sameencse/TodoApp



Payara domain configuration:
===================
Add the below configuration

 <jdbc-connection-pool driver-classname="com.mysql.cj.jdbc.Driver" datasource-classname="com.mysql.jdbc.Driver" name="MysqlPool" res-type="java.sql.Driver">
      <property name="password" value="root"></property>
      <property name="databaseName" value="ngp"></property>
      <property name="serverName" value="127.0.0.1"></property>
      <property name="user" value="root"></property>
      <property name="portNumber" value="3306"></property>
      <property name="url" value="jdbc:mysql://localhost:3306/ngp?useSSL=false"></property>
    </jdbc-connection-pool>
 <jdbc-resource pool-name="MysqlPool" jndi-name="jdbc/todo"></jdbc-resource>
 
 <resource-ref ref="jdbc/todo"></resource-ref>
 
 Download payara micro:
 Command to Deploy on payara micro
 
 D:\server> java -cp "C:\Tools\MySQL\mysql-connector-java-8.0.11.jar;D:\server\payara-micro-4.1.2.174.jar" fish.payara.micro.PayaraMicro --deploy "C:\To
ols\project\todo-apps-ui\target\todo-apps-ui-1.0-SNAPSHOT.war" --domainConfig D:\server\domain.xml
 
 
Note: download  both the mysql-connector-java-8.0.11.jar & payara-micro-4.1.2.174.jar and modify the domain.xml file to add the JDBC connection pool


Mysql Database Setup:
===================

create database ngp;
use database ngp;

create table todo_items 
( id int PRIMARY KEY AUTO_INCREMENT,
name varchar(50) not null,
description varchar(200),
todo_date date, 
status varchar(20) not null);



DB Connection Details:
=======================
URL: jdbc:mysql://localhost:3306/ngp
Username: root
Password: root
port :3306

Arrays in Javascript

Arrays are used to store multiple values in a single variable.

Example :

var list=["apple","banana","grapes"];

As you can see the above example, values are placed inside the brackets and separated by comma(,)

even you can initialize the empty values

var list=[];

Accessing the items in Array :

       index       values
          0            apple
          1            banana
          2            grapes


 Let say , user want to access the banana item in an array then all i need to do is pass in the index value of the item I am interest in:

var selectedItem=list[1];




Adding Item to an array:

• push
• unshift

The push method is called directly on your array and pass the data you want to add it.

The above item will get added to your end of the arrays.

list.push("mango");

result: 

       index       values

          0            apple
          1            banana
          2            grapes

          3            mango

If you want to add the items at the beginning of the list then use the below method

list.unshift("watermelon");

result :

     index          values
          0          watermelon

          1            apple
          2            banana
          3            grapes

          4            mango

Removing items from an array:

to remove the items from an array use pop or shift method,its just the reverse of push or unshift.

var remItem=list.pop();

or 

var remFirstItem=list.unshift();

The pop method will the last item from an array and unshift method is used to remove the first item of an array.

Both the method will remove the item from an array and it will return the values of an array.

How to retrieve Client's Timezone in GWT

• Let say Application is hosted at one place whose time zone is 'A'
• User can login any where from the world whose time zone is 'B'
• So the server where the application is hosted should know the time zone of the user access

To retrieve the client browser time zone ,use GWT DateTimeFormat

 DateTimeFormat.getFormat("ZZZZ").format(new Date())

The above method will give the browser time zone.

There is one more way to retrieve the time zone is to use JSNI

private native int getClientOffsetTimeZone() /*-{

    return new Date().getTimezoneOffset();

}-*/;

Note that the getTimezoneOffset() method returns the time difference between UTC time and local time in minutes,

For example,

 If your time zone is GMT+2, -120 will be returned

 If your time zone is GMT-2, +120 will be returned

Coder Vs Programmer

Coder:

Coder is some one who does a routine job and works very hard. Even works as per the client requirements and meets the deadline.Coder will follow the instruction and guidelines blindly.
Will use lot of If else statement Without using any design patterns .

Programmer:

Programmer is the one who works very smart. Programmer works in a best possible way to deliver the client requirement. Programmer will not work blindly. Will use Design patterns and principles with new innovative thoughts.Be a programmer not a coder.

This is sample Video which explains about the difference between Coder Vs Programmer (which is taken from youtube).

GWT Tutorial:: FAQ on Module Descriptor

GWT Module Descriptor:

GWT Module is a configuration file which is used to configure the GWT application.
It contain with the file extension *.gwt.xml.
* is the name of the application and this file should be reside inside the project's root.
For Example If the project name is MyApp then the Module name will be MyApp.gwt.xml.

Below is the sample example which will explain about the Module Descriptor,

<?xml version="1.0" encoding="utf-8"?>
<module rename-to='MyApp'>
   <!-- inherit the core web toolkit stuff.  -->
   <inherits name='com.google.gwt.user.user'/>

   <!-- inherit the default gwt style sheet. -->
   <inherits name='com.google.gwt.user.theme.clean.Clean'/>

   <!-- specify the app entry point class. -->
   <entry-point class='com.example.client.MyApp'/>

   <!-- specify the paths for translatable code (the below folders get complied to JS)  -->
   <source path='client'/>
   <source path='shared'/>

   <!-- specify the paths for static files like html, css etc. -->
   <public path='...'/>
   <public path='...'/>

   <!-- specify the paths for external javascript files -->
   <script src="js-url" />
   <script src="js-url" />

   <!-- specify the paths for external style sheet files  -->
   <stylesheet  src="css-url" />
   <stylesheet  src="css-url" />

</module>


Even More then one entry point class can be defined in Module Descriptor which will be executed one by one.
GWT provides this default themes
<inherits name='com.google.gwt.user.theme.standard.Standard'/>
<inherits name="com.google.gwt.user.theme.chrome.Chrome"/> 
<inherits name="com.google.gwt.user.theme.dark.Dark"/>