Nov 24, 2011

Cloud Foundry and Custom Domain

Posted Nov 24, 2011
Currently, Cloud Foundry (CF) doesn't support mapping of external URL's (See discussion).  The workaround is to use a reverse proxy. For this job, I hosted it Google App Engine (GAE) and used BS2 GAE Reverse Proxy. Credits to yufeiwu for the free reverse proxy app.

Prerequisite:
- Also, please read the Python Tutorial for the development environment and pushing your app to Google server.

Steps:
  1. Download the reverse proxy library (license: LGPL) in http://code.google.com/p/bs2grproxy/
  2. Modify bs2grpconfig.py
    • set TARGET_HOST to your cloud foundry url
      e.g. TARGET_HOST = "mvergel.cloudfoundry.com"
  3. Modify app.yaml
    • set your registered application id
  4. Push the app and make it live

I will continue to use this approach for my website until CF have a proper DNS support.

[UPDATE] Many are encountering a problem with the session using this method. There is a patch that fixes this issue. Thank you Marius Anton for the information.

Nov 23, 2011

Occupy the remaining height in CSS

Posted Nov 23, 2011

Today, I learned something new in CSS. The question is fairly simple: How do you occupy the rest of the height of a page?  Let's say you have a header with a height of 200px (the blue area above), and for the bottom part, you want the height to be flexible and fill-in the rest (red part). Same idea can be applied to widths.

Solution:
Use of absolute positioning. Specify the top style to be the height of your header and set bottom to 0.

Sample:

<!DOCTYPE html>
<html> <head> <title>Auto-expand body height</title> <style type="text/css"> body { height: 100%; margin: 0;
 position: relative;
}

html {
  height: 100%;
}

html * { 
  box-sizing: border-box;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; } </style> </head> <body> <div style="height: 200px; border: 1px solid blue;"> </div> <div style="border: 1px solid red; position: absolute; top: 200px; bottom: 0; width: 100%;"> </div> </body> </html>


[Updated June, 2014] Or if you want a fixed footer too:
<!DOCTYPE html>
<html>
<head>
<title>Auto Expand</title>
<style type="text/css">

body {
 height: 100%;
 margin: 0;
 min-height: 450px;
 position: relative;
}

html {
  height: 100%;
}

html * { 
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

</style>
</head>
<body>
  <div style="height: 200px; border: 1px solid blue;">
  </div>
  <div style="border: 1px solid red; position: absolute; top: 200px; bottom: 100px; width: 100%;">
  </div>
<div style="height: 100px; border: 1px solid green; position: absolute; bottom: 0; width: 100%;">
  </div>
</body>
</html>