Make items align in one line within a td tag

Assuming you have coded an html table as below:

But somehow the three Chinese characters don’t align in one line,

and you really wanna align them into one line.

One approach you can make is creating an inner table within that <td> tag.
But here I’d like to avoid using another table (cuz the more tables you use on a page, the slower the rendering speed is gonna be).

Instead, I will use <div> to handle this situation.
The solution is as shown:

You just need to substitute <td>我 爱 你</td> in the first image with the code snippet shown above. Basically, width:33% is to divide the <td> tag into equally 3 invisible columns and “nowrap” is a keyword I introduced before in wrap and no-wrap in html, especially in this newer example containing a font-awesome icon after the Character 我, cuz you don’t want the character and the icon being displayed in two lines.

And, <i class=”fa fa-fw fa-lg fa-heart”></i> is there to help you decode this three Chinese character sentence 🙂

At the end, please don’t be lazy, you can extract out style="" and put it into your css file 🙂

Understanding class=”” in html and .class-name in css

Fundamental in html/css, jot down for myself to review:

Point 1
Space between class names vs. Appending class names in CSS

1. “.classA[SPACE].classB {}” in CSS means I have

in html.

2. “.classA.classB {}” in CSS means I have

in html.

So basically, space between class names in css reveals the hierarchy in html elements; appending class names would result in the same-level classes class="classA classB classC etc" in an html element.

Point 2
If I see class="classA classB classC" in an html element, that doesn’t necessarily mean we have appended class names like “.classA.classB.classC {}” in CSS, because there is a case when classA, classB and classC are defined parallel in CSS.

For example, if I see <i class="fa fa-fw fa-lg fa-spinner></i>, that doesn’t mean we have “.fa.fa-fw.fa-lg.fa-spinner{}” defined in CSS.

Here,
fa means that its a font-awesome element
fa-fw means that its a fixed width element
fa-lg means it’s large and should have a font size applied
fa-spinner means it should display a character representing spinner from the font set.

They are related but independent. So, in the font-awesome.css, they could be organized as

.fa {
 //.fa definition
}
.fa-fw {
 //.fa-fw definition
}
.fa-lg {
 //.fa-lg definition
}
.fa-spinner {
 //.fa-spinner definition
}

Feel free to comment and let me know if I wrote anything wrong 🙂

Copy URL into an XML file

I learned a great lesson yesterday.

When copying an URL into a tag element in an xml file, I may copy some non-ASCII character into the xml file (I don’t know how this happened).

So, a safe way to copy URL from a source into an xml file is to copy URL into a web browser URL bar first, verify the validity of the URL, then copy it onto the XML file.

— Keep this in my mind 🙂

Side Note: & shall be written as & in XML, like we did for HTML.

Make a very simple Hover Form

Before start, let me show a hover form example:

[Credit: img found from Google Image]

Below is a piece of code in css I used for creating a hover form. For you and me as a reference.


.hover-form {
    position: absolute;
    margin-top: 0px;
    margin-left: -10px;
    width: 50%;
    z-index: 999;
    padding: 20px;
    background-color: #eee;
    border: solid 1px #999;
    border-top: 0px;
}

The key points in this piece of code are:
1. position: absolute
2. z-index value shall be greater than 0 so the form can stand out on the page

Surely, once you understood this piece of code, the most important thing becomes the Content in the hover form. haha~

wrap and no-wrap in html

Wrapping and unwrapping text is a subtle styling feature used in table. A couple days ago, I encountered a requirement to list three icons in a table data field side by side (wrapping the table data field and let an icon moving the next line is forbidden). The solution is below.

In your css file, define a no-wrap class
.no-wrap {white-space: nowrap}

Then, in the designated <td> tag on your html page, wrote
<td class="no-wrap">

That’s it!

When you need to hide an icon on a webpage

In AngularJS, I have been using the two directives ng-show and ng-hide quite often to toggle the show/hidden of an icon. The problem of using these two directives sometimes is that HTML interpreting the icon being hidden as  . If you need a particular icon (wider than &nbsp;) to fit in the position, you probably don’t want a simply hidden and   substitution to screw it up. Therefore, it is time for ng-class with css visibility to come in.

In a plain HTML/CSS, the following code would hide a icon item, assuming font-awesome is used.

In HTML
<i class="fa fa-fw fa-lg fa-check" class="invisible"></i>

In CSS, invisible class is defined as


.invisible {
  visibility: hidden;    
}

Then, the problem has been simplified to use a certain logic to toggle the css style “invisible” in the class attribute. Assuming we are in the scenario of a customer submitting an order and the icon’s show/hidden depends on whether that order has a customer’s comment associated with (show: order has a commnet; hidden: order doesn’t have a comment). Then, we can rewrite the HTML part using ng-class as follows:

<i class="fa fa-fw fa-lg fa-check" ng-class="{invisible: !order.Comment}"></i>

Basically, I just learned two points

  1. ng-class="{property: a_bool_function}"
  2. invisible means an icon is always there occupying that large space it declares and unseen.

Awesome!

Website Viewer Sending Email to you from your Website via your Gmail Account

Today I am gonna cover how you may use Your Gmail (or other email accounts like Yahoo, Outlook, etc.) to let your website viewers send emails to you.

contact

My Current Approach on My Site

Use Java Servlet

Code Part 1

@WebServlet(“/Mail”)
public class Mail extends HttpServlet {
private static final long serialVersionUID = 1L;
private static String SUCCESS = “/emailsuccess.html”;
private static String FAIL = “/emailerror.html”;

public Mail() {
super();
}

/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpSer vletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
}

/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String forward = “”;

// grab input data from index.jsp
String name = request.getParameter(“name”);
String email = request.getParameter(“email”);
String number = request.getParameter(“contact_number”);
String message = request.getParameter(“message”);

String subject = “Email from Name: ” + name
+ “; Email Address ” + email
+ “; Phone Number: ” + number;

System.out.println(“subject is: ” + subject);
System.out.println(“message is: ” + message);

/*EmailThread sentEmail = new EmailThread(subject, message);
sentEmail.start();*/

Runnable r = new EmailThread(subject, message);
Thread sentEmail = new Thread(r);
sentEmail.start();

if(sentEmail.isAlive()) {
forward = SUCCESS;
} else {
forward = FAIL;
}

//response.sendRedirect(“emailsuccess.html”);
RequestDispatcher view = request.getRequestDispatcher(forward);
view.forward(request, response);
}
}

Code Part 2

public class EmailThread implements Runnable {
private String subject;
private String message;
public EmailThread(String subject, String message) {
this.subject = subject;
this.message = message;
}

@Override
public void run() {
final String username = “YOUR_SENDER’s_EMAILADDRESS”;
final String pwd = “YOUR_SENDER’s_EMAILADDRESS_PASSWORD”;

// Get a Properties object SSL
Properties props = new Properties();
props.put(“mail.smtp.host”, “smtp.gmail.com”);
props.put(“mail.smtp.socketFactory.port”, “465”);
props.put(“mail.smtp.socketFactory.class”, “javax.net.ssl.SSLSocketFactory”);
props.put(“mail.smtp.auth”, “true”);
props.put(“mail.smtp.port”, “465”);
System.out.println(“Mail Server Properties have been setup successfully!”);

Session session = Session.getDefaultInstance(props,
new javax.mail.Authenticator() {
protected PasswordAuthentication getPasswordAuthentication() {
return new PasswordAuthentication(username, pwd);
}
});

try {

Message msg = new MimeMessage(session);

// Set the sender
msg.setFrom(new InternetAddress(“YOUR_SENDER’s_EMAILADDRESS”));

// Set the recipient
msg.setRecipients(Message.RecipientType.TO,
InternetAddress.parse(“YOUR_RECIPIENT’s_EMAILADDRESS”));

// Create mail subject
msg.setSubject(subject);

// create mail body
msg.setText(message);

System.out.println(“Mail Session has been created successfully!”);

Transport.send(msg);

System.out.println(“Msg sent!!”);

} catch (MessagingException e) {
throw new RuntimeException(e);
}
} // end of run()
}

Notice

  1. You should own both the YOUR_SENDER’s_EMAILADDRESS and YOUR_RECIPIENT’s_EMAILADDRESS; one is for sending the viewer’s message to you and the other is for receiving the viewer’s message.
  2. Library for implementing this feature: please place javax.mail-1.5.1.jar or above in WEB-INF/lib/ folder. I failed many times initially due to using a javax.mail.jar whose version is not high enough.
  3. If necessary, log onto YOUR_SENDER’s_EMAILADDRESS through your browser and lower the security level set by Google.