box-shadow using images in emails

Below code use images sliced down for all four sides. In mobile, below code hides images and apply box-shadow property.

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html lang=”en” xmlns=”http://www.w3.org/1999/xhtml”
xmlns:v=”urn:schemas-microsoft-com:vml”
xmlns:o=”urn:schemas-microsoft-com:office:office”
xmlns:w=”urn:schemas-microsoft-com:office:word”>
<head>
<!–[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:Allowjpg/>
<o:PixelsPerInch>96/o:PixelsPerInch
/o:OfficeDocumentSettings
</xml><![endif]–>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta name=”format-detection” content=”telephone=no”>
<meta name=”format-detection” content=”date=no”>
<meta name=”format-detection” content=”address=no”>
<meta name=”format-detection” content=”email=no”>
<title></title>
<style type=”text/css”>
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
.ReadMsgBody {
width: 100%;
background-color: #ffffff;
}
.ExternalClass {
width: 100%;
background-color: #ffffff;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height:100%;
}
table {
border-spacing:0;
}
table td {
border-collapse:collapse;
}
.yshortcuts a {
border-bottom: none !important;
}

@media screen and (max-device-width: 600px), screen and (max-width: 600px) {
table.box_shadow {
width: 90% !important;
-webkit-box-shadow: 0px 0px 20px 0px rgba(23,114,183,0.2);
-moz-box-shadow: 0px 0px 20px 0px rgba(23,114,183,0.2);
box-shadow: 0px 0px 20px 0px rgba(23,114,183,0.2);
margin: 0 auto;
display: block;
}
tr.hide,
td.hide,
img.hide,
span.hide{
display: none;
visibility: hidden;
font-size: 0;
max-height: 0;
line-height: 0;
mso-hide:all;
}
}
</style>
</head>

<body>
<!– BOX SHADOW TABLE –>
<table border=”0″ cellspacing=”0″ cellpadding=”0″ class=”box_shadow”>
<tbody>
<tr>
<td colspan=”3″ align=”left” valign=”bottom” style=”line-height: 0″><img src=”images/top.jpg” alt=”” width=”422″ class=”hide”><!– HIDING IMAGE FROM MOBILE –></td>
</tr>
<tr>
<td width=”12″ align=”left” valign=”top” style=”line-height: 0″><img src=”images/left.jpg” alt=”” height=”500″ width=”12″ class=”hide”><!– HIDING IMAGE FROM MOBILE –></td>
<td width=”398″ align=”left” valign=”top”>
<!– TABLE CONTENT GOES HERE –>
<table border=”0″ cellspacing=”0″ cellpadding=”0″>
<tbody>
<tr>
<td style=”padding: 20px”>HEADLINE</td>
</tr>
</tbody>
</table>
<table border=”0″ cellspacing=”0″ cellpadding=”0″>
<tbody>
<tr>
<td style=”padding:0 20px 10px;”>BULLET</td>
<td style=”padding:0 10px 10px 0;”>CONTENT</td>
</tr>
<tr>
<td style=”padding:0 20px 10px;”>BULLET</td>
<td style=”padding:0 10px 10px 0;”>CONTENT</td>
</tr>
</tbody>
</table>
<!– END TABLE CONTENT –>
</td>
<td width=”12″ align=”right” valign=”top” style=”line-height: 0″><img src=”images/right.jpg” alt=”” height=”500″ width=”12″ class=”hide”><!– HIDING IMAGE FROM MOBILE –></td>
</tr>
<tr>
<td colspan=”3″ align=”left” valign=”top” style=”line-height: 0″><img src=”images/bottom.jpg” alt=”” width=”422″ class=”hide”><!– HIDING IMAGE FROM MOBILE –></td>
</tr>
</tbody>
</table>
<!– END :: BOX SHADOW TABLE –>
</body>
</html>

box-shadow in emails

We have a CSS3 property box-shadow which can be used in emailers. This property is supported in most of the email clients.

Like outlook 13 and below do not support this property. For that we can add a border of 1px so that if box shadow not supported then border can appear.

We can also use images for box-shadow if acceptable. Click here for source code for box shadow using images in email

Accessibility for data tables

Data tables are most easily readable by screen readers and need no extra mechanism to enable screen reader support.

HTML structure for accessibility:

Use below for screen reader to read tables as rows and columns along with cell with text and cell reference in table:

<table>
 <tbody>
  <tr>
    <th>Id</th>
    <th>Name</th>
    <th>Age</th>
    <th>Place</th>
  </tr>
                    
  <tr>
    <td>201</td>
    <td>John</td>
    <td>25</td>
    <td>California</td>
  </tr>
  <tr>
    <td>202</td>
    <td>Smith</td>
    <td>30</td>
    <td>Miami</td>
   </tr>
 </tbody>
</table>

With proper table structure, screen readers tend to read it correctly. You might add below tags as well:

<thead></thead>
<tbody></tbody>
<caption></caption>

<caption></caption> is good to add to enable screen readers for tables.

GIT LFS – GIT Large File Storage

Git Large File Storage (LFS) replaces large files such as audio samples, videos, datasets, and graphics with text pointers inside Git, while storing the file contents on a remote server like GitHub.com or GitHub Enterprise.

Steps to install on MAC:

First install homebrew on your machine using terminal. Homebrew installs the stuff you need that Apple (or your Linux system) didn’t.
Paste below command in terminal and hit enter
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

And now git-lefs can be installed using brew on OSx. Use below command.:
brew install git-lfs

How to download files when git-lfs was installed after git clone:

If repo is setup using git lfs, and you cloned your repo without installing git lfs, you might run into issue of broken files and images in your local repo. To fix this issue, please follow along. Use below command if you have already cloned a repo which is using lfs for files:
git lfs fetch

This command will download all Git LFS files for a given ref.
Enter username & password for github, if required.

This works for me!! Please share if any solution you found other than this.

how to start with angularjs

To start with AngularJS what should you already know

To start with AngularJS you should have a basic understanding of JavaScript, HTML and CSS. As you are going to develop web applications it will be great if you have understanding of other web technologies like Ajax, jQlite etc.

Lets know the basic of AngularJS and create a Hello World App

This is a basic example. In this we will initialize the AngularJS app which takes user input and shows the message on real time. For this we need to follow below steps :-

1) Loading Framework

First we need AngularJS library. As AngularJS is a pure javascript framework, we can embed it using script tag. We can either use a CDN or download it from angularjs.org. Here I am using CDN link.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

angular-js-download-popup

2) Bootstrap the AngularJS app using ng-app directive

Now it’s time to bootstrap AngularJS app. We can auto-bootstrap an AngularJS application using ng-app directive. It’s root element of the application and is typically placed near the root element of the page e.g. on the <body> or <html> tags.

<html ng-app="myFirstApp"> ... </html>

Note: Only one AngularJS application can be auto-bootstrapped per HTML document. You must manually bootstrap multiple app in a HTML document using angular.bootstrap . Check out ng-app Reference

3) Get user input using ng-model directive

We will create a input field to get user name. To bind input field value into the model we use ng-model directive.

<input type="text" ng-model="yourName" placeholder="Enter a name here">

The ngModel directive creates two way binding between a form control and a property on the scope. ngModel provides validation behavior, state of the control, and more. Check out ng-model Reference

4) Show user name using AngularJS expressions

In AngularJS we can print a property value using expression. AngularJS resolve the expression and replace property value in place of expression. Angular expressions can be written inside double braces: {{ expression }}. We can also print value using ng-bind directive.

<h1>Hello {{yourName}}!</h1>

Now we are done. Check out the Code Ground

See in Action

Enter the user name in input filed and see how things work.

Source Code

The final code we build in above example.

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

How to avoid being asked passphrase each time using ssh

Each time when you are trying to access remote server, pull push to git, your are being asked “Enter passphrase for key” because passphrase is not store in session.

To avoid being asked “Enter passphrase for key”

you need to use a ssh agent and add passphrase in it by running :- Continue reading “How to avoid being asked passphrase each time using ssh”