Monthly Archives: November 2015

In fact, there is no difference between web front-end development and email development. But if we want to compatible with all email clients, the thing becomes a trouble. Here I list some notes to make the thing a little easier.

Tool: litmus

Now more and more developers use Mac as the main laptop to work. If we don’t have all devices, how can we know the final render result before we send out? Here is an online website: https://litmus.com You can use it free feature to get render result on Outlook, iphone6, and Gmail. For me, it is enough. Because most of the problems are coming from Outlook. If I can fix Outlook issue, others are normally ok.

position

we’d better use a table to design the whole layout. Note: here the width doesn’t have px.

For Outlook, we’d use a different one. This method is good, but if we want to achieve “background-size: cover” effect, we need to add “aspect” to control its resize ratio. (Please note: here the size we use the width’s same size. Normally we should select the larger one between width and height. ) If not, it will resize the whole original image, it is like “background-size: contain”. Depends on which is your requirement, you need to know exactly which “background-size” you need.

The method above will create a background, but its size is not scalable. If we want a scalable background, we’d better use following method. And your content is between the two codes. So please note: The first method we mentioned above doesn’t need to put content between codes, you just need to put above code before your td or table and then the background will be applied to your next content. But the second method here we talk needs to put your content between the two codes snip.

Until now, the background is ok. But if we want to put overlay above the background, we need to a little adjust the second method. (This case is very important for user experience, because sometimes, if we just put content purely over the background, the background color will impact the content’s final effect. We’d better put a dark overlay over the background. In fact, the dark overlay is between the background and the content)

Above method use img to solve background problem, but its scale image is for the entire image. If you want background-position and background-size applying on the image, you need to use the following method.

For Hotmail, it still supports padding-left, padding-right, and padding-bottom. But for Outlook, it doesn’t support any. Here I use a trick to solve it. As I say, it is a trick, so it can’t solve it totally. I add empty space to be as a padding or margin.

Using a negative margin-top on a div inside a td will not have any effect unless the div has any other preceding element neighbors. If you had, for example, an h1 before your div inside the td, you could use margin-top: -10px; on the div to move the div closer to the h1 visually.

Even though Play uses async method to communicate with front-end and back-end. But sometimes, we still need to call third-party restful api to do something else. Especially, third-party restful api takes too long time to return data. In this case, it is wasteful to wait there and always ask whether it is ok or not. Good way to handle it is to make use of third-party callback and web socket to deal with this case.

So it is very clear that we have three sides: one is third-party api, the other is our back-end, another is our front-end.

What we need to do is that front-end builds a WebSocket with back-end. And then back-end requests data from third-party api. When third-party api returns data, back-end sends data back to front-end.

Build a web socket between front-end and back-end.

front-end sends data to back-end

back-end calls third-party api

third-party api returns data back to back-end

back-end returns data back to front-end by web socket

So, there are two routes, one is for web socket, another is for callback. The connection between the two is to store actorRef to keep the bridge. You also needs to ask callback to append special token back in order to figure out this actor.

Javascript code to send web socket to build connection between front-end and back-end.

And next I have one global variable to store actorRef for each connect between front-end and back-end. For each web socket request, I will store unique key combining the actorRef and trigger call to third-party api. For each callback request, I will to find its mapping actorRef to send data back to front-end.

Last time, we use cookie/session to help us to enhance web application’s security issue. This time, we talk about how to design normal cookie and use it to improve user experience. Our target is to avoid user’s trouble to login many times. User only needs to login once and come back in future without login. Cookie is also used to recognize user and obtain user information without boring user.