Tuesday, April 21, 2015

Book Review: Spring Chicken: Stay Young Forever (or Die Trying) (Gifford, Bill)


Following are my notes/highlights from the book:
  1. Two of the major diseases of aging—cardiovascular disease and diabetes—are largely avoidable,
  2. Major longevity-promoting mechanisms, hardwired into our biology, can be triggered right now, by simply going out for a short jog, or even just by skipping a meal or two.
  3. One good way to shorten your life, statistically, is by becoming obese.
  4. Nothing makes you look older than attempting to look young. —Karl Lagerfeld
  5. Lifting weights (and taking testosterone) do improve strength; also, weight training and vigorous exercise like sprinting have been shown to increase growth-hormone levels naturally. So does deep sleep.
  6. Thanks to Blast data, researchers now know that natural walking speed is one of the most accurate predictors of mortality that we have. The slower you walk, statistically speaking, the sooner you are likely to check out.
  7. Aging is hiding in our bodies.
  8. Mobility is key to survival
  9. Young-middle-aged people (in their forties and fifties) with positive feelings about growing older—gaining wisdom, freedom from working, opportunities to travel and learn more—tended to enjoy better health, and better cognitive health later in life.
  10. “If you want to become a healthy eighty-year-old, you need to live a healthy lifestyle, but if you want to become a healthy hundred-year-old, you need to inherit the right genes.”
  11. many of them had a specific gene variant that inhibits something called CETP, a molecule involved in cholesterol processing (it stands for “cholesterol ester transfer protein,” - in general, the less CETP you have, the better; high levels of the protein are thought to lead to premature atherosclerosis. Centenarians with the CETP-inhibiting mutation not only had better heart health, and very high “good” cholesterol, but they also had a lower incidence of memory loss and dementia,
  12. He pays special attention to his LDL cholesterol—the “bad” kind—which tends to be extremely low in centenarians. If he keeps his LDL low, he reasons, then he might stand a chance of living to be a hundred, too. The machine lets him monitor it closely: If it gets too high, he’ll cut back on the carbohydrates and perhaps up his dose of red yeast rice, a natural statin that lowers LDL.
  13. And finally, there is one bellwether of heart trouble that on reflection should be obvious: erectile dysfunction
  14. “Remember, our genes still think it’s three thousand years ago and we’re starving, so these mechanisms for preserving cholesterol are still going strong,” Lebowitz said.
  15. (Oat bran fiber does much the same thing, absorbing cholesterol in the gut and escorting it out of the body.)
  16. Red meat has long been known to be a risk factor for heart disease, originally because of its fat content.
  17. According to this study, it is apparently only safe to eat meat if you’re a vegetarian.
  18. A moist eye, a dry hand, a yellow cheek, a white beard, a decreasing leg, an increasing belly… your voice broken, your wind short, your chin double, your wit single, and every part about you blasted with antiquity. —Shakespeare
  19. “three phases of a new idea”: “First you’re an idiot; second, it’s meaningless; third, it was obvious all along—and nobody gives you credit for it.”
  20. A cell’s biological age, therefore, had almost nothing to do with its chronological age.
  21. The only thing that seemed to matter was how many times it (the cell) had divided.
  22. Activating telomerase might cause cancer. One thing that cancer cells all have in common is amped-up telomerase.
  23. According to the twenty-five-year-long Rancho Bernardo study of older Californians, the higher your levels of IL-6, the earlier your checkout time from Hotel Earth.
  24. Hayflick recognized two possible fates for our cells when they stop dividing: Either they become cancer, that is to say immortal; or they enter a state he termed replicative senescence.
  25. “The big aha came when we realized that when a cell becomes senescent, it starts to secrete molecules that cause chronic inflammation,”
  26. As we grow older, and growth hormone and testosterone decline (along with other chemical changes), the calories we consume are far more likely to end up as fat.
  27. Beginning around age thirty-five, our total body fat percentage increases by as much as 1 point per year, even if our overall weight stays the same.
  28. Diabetes itself is now thought to speed up the aging process enormously. The body becomes unable to process the sugar that we eat, which ends up rollicking around in our bloodstream, inflicting massive amounts of cellular damage in every tissue that it touches. Excess blood sugar even makes you look older: One study showed that people with higher blood sugar actually did appear older than they were, perhaps because this damage is visible in their very skin.
  29. Men do not quit playing because they grow old; they grow old because they quit playing. —Oliver Wendell Holmes
  30. Ron stays young, he said, by avoiding the “inflammables,” by which he seemed to mean foods containing dairy, wheat, and sugar.
  31. Education, money, and access to medical care all correlate strongly with longevity, Jay Olshansky and other scholars have found.
  32. “And the idea that well, it’s natural and you’re just an old man now—that isn’t natural! That is the default. That’s where we get to by not challenging ourselves. Exercise is a continuum: The more you do, the less you’re going to lose.”
  33. the “secret” seems to be: Use It or Lose It.
  34. We begin to lose muscle mass gradually at around age forty, and as time goes on we lose it more rapidly: Between fifty and seventy, we say good-bye to about 15 percent of our lean muscle per decade. After that, it jumps to 30 percent per decade. “You could make the case that aging starts in muscle,”
  35. But even as we’re losing muscle in middle age, we don’t lose weight overall (duh). That means our muscle is gradually, insidiously being replaced by fat. More fat and less muscle means your metabolic “engine” runs at a much slower rate; you have less muscle, which means you have fewer mitochondria, which means your body is less efficient at burning the sugar out of your bloodstream. Not coincidentally, most new cases of diabetes appear in people in their mid-forties and older.
  36. Recent studies have pinpointed the mere act of sitting, itself, as a potent risk factor for death. Sitting is the new smoking, some scientists believe: a bad habit that leads inevitably to disease.
  37. caloric restriction might actually be slowing the aging process itself, on a more fundamental level.
  38. He cut down to a protein shake for breakfast, a salad for lunch, and a baked sweet potato and perhaps a bit of fish for dinner.
  39. The hungry monkeys were far healthier, in terms of basic measures like blood pressure, and had far less incidence of age-related disease, such as diabetes and cancer. As a result they seemed to be living as much as 30 percent longer than their overfed friends.
  40. A wealth of good epidemiological data points to the fact that it’s better to be a little bit overweight (i.e., BMI of 25) than to be seriously underweight (BMI below 21), very skinny people may not have the fat reserves they need to survive an infection, particularly as they get older.
  41. What to eat - not too much, and nothing processed, only good, real food. He looks forward to his salad lunches and his salmon dinners, as much as any gourmand.
  42. “hormetic” lifestyle, in which he actively seeks out stressful experiences (like diving into bone-freezing water).
  43. The work stresses and even damages our muscle fibers, but thanks to the miracle of hormesis, we repair and rebuild them with new, stronger fibers. Most vaccinations work by the same principle: A small dose of a pathogen stimulates a response that renders us immune to the disease.
  44. “Stress is strengthening, even essential to life,”
  45. Each morning he wakes up to an ice-cold shower, the cold tap cranked all the way up. He stays in for five minutes, minimum, and claims that this bracing ritual not only jolts him awake (thus reducing his coffee budget) but also burns fat, improves pain tolerance, and boosts immunity.
  46. gettingstronger.org. (Motto: “Train yourself to thrive on stress.”)
  47. short-term fasting—skipping one, and sometimes even two meals—and tough, intense workouts, either running barefoot on trails or climbing in a nearby rock gym, often on an empty stomach. As a matter of fact, he hadn’t eaten for twenty-two hours, or since lunch the previous day, despite going for a tough postwork run with work colleagues in the Palo Alto hills, training for an upcoming 125-mile relay race. “One thing I really love,” he confessed to me, “is fasted workouts.”
  48. working out while you’re hungry might actually be a good thing.
  49. “I learned to embrace a little bit of hunger.”
  50. rapamycin could be the magic bullet that aging researchers had been looking for
  51. continuation of cell growth leads to cellular senescence, the toxification of our aged cells.
  52. he eats a far healthier diet, consisting of mostly green vegetables, some pasta, and a little bit of wine. Meat is an occasional luxury.
  53. The key to Caruso’s diet, according to Longo, is its low carbohydrate content and its low protein content—intentionally or not, he thinks, it keeps his growth factors and TOR in check, which effectively slows the rate of aging.
  54. He and his cohort were trained to eat less, in effect, by history—war, poverty, and periodic famine.
  55. Most days he skips lunch completely, and at dinner he eats a low-protein, plant-based, vegan-ish diet designed to push down his IGF-1 levels (not just to keep himself rock-star thin at age forty-six). Once or twice a year, he’ll put himself through a bare-bones fast for up to four days, taking in a bare minimum of nutrition, in order to “reset” his system. He believes this is the best option, based on mouse and human studies, and also because it happens to work for him.
  56. Use It or Lose It applies to our brains,
  57. Health Extension Salon - Bay area.
  58. A major 2011 study from UCSF found that if seven basic risk factors were addressed, including diabetes, midlife obesity (defined as waist size of thirty-nine inches or more for men, thirty-six for women), midlife hypertension, smoking, depression, low educational level, and physical inactivity, half of all Alzheimer’s cases could actually be prevented.
  59. another recent long-term study found that people who had been fitter at age twenty-five had stayed more cognitively “intact” at age fifty.

Wednesday, April 15, 2015

World of Baby Aarini: Book 1–"Baby Aarini and the Lawn Bunny” Published



This is the first book in the series of picture story books of Baby Aarini. In this story, baby Aarini interacts with the lawn Bunny.

Thursday, March 05, 2015

Preserving History When Renaming Files in git by Scott Nelson of This by Them

Preserving History When Renaming Files in git by Scott Nelson of This by Them

REMEMBER, GIT TRACKS CONTENT, NOT FILES

Git doesn’t really care that we renamed the file, but it knows that we moved the contents of the file to another file. When we tell git to show us the history for a particular file name, it will only show us the history for that file, not the entire history for the content within the file.
In order to see the entire history for that content, we need to tell git that’s specifically what we want. There’s a --follow option we can pass to git logfor this.

So, to see our commits before the rename, we can do git log --follow just-an-everage-blog-post.md and voila, there’s our entire history for the content of that file.

Monday, March 02, 2015

Autocrlf setting in Git

How autocrlf works:
core.autocrlf=true:    core.autocrlf=input:      core.autocrlf=false:

       repo                     repo                    repo
    /        \               /        \              /        \
crlf->lf    lf->crlf     crlf->lf       \          /            \      
 /              \        /                \      /                \
Reminder: crlf = win-style end-of-line marker, lf = unix-style.
Note that cr (mac-style) in not affected for any of three options above.
When does this warning show up (under Windows)
    - autocrlf = true if you have unix-style lf in one of your files (= RARELY),
    - autocrlf = input if you have win-style crlf in one of your files (= almost ALWAYS),
    - autocrlf = false - NEVER!
What does this warning mean
The warning "LF will be replaced by CRLF" says that you (having autocrlf=true) will lose your unix-style LF after commit-checkout cycle (it will be replaced by windows-style CRLF). Git doesn't expect you to use unix-style LF under windows.
The warning "CRLF will be replaced by LF" says that you (having autocrlf=input) will lose your windows-style CRLF after a commit-checkout cycle (it will be replaced by unix-style LF). Don't use input under windows.
Yet another way to show how autocrlf works
1) true:             x -> LF -> CRLF
2) input:            x -> LF -> LF
3) false:            x -> x -> x
where x is either CRLF (windows-style) or LF (unix-style) and arrows stand for
file to commit -> repository -> checked out file
How to fix
Default value for core.autocrlf is selected during git installation and stored in system-wide gitconfig (%ProgramFiles(x86)%\git\etc\gitconfig). Also there're (cascading in the following order):
   - "global" (per-user) gitconfig located at ~/.gitconfig, yet another
   - "global" (per-user) gitconfig at $XDG_CONFIG_HOME/git/config or $HOME/.config/git/config and
   - "local" (per-repo) gitconfig at .git/config in the working dir.
So, write git config core.autocrlf in the working dir to check the currently used value and
   - add autocrlf=false to system-wide gitconfig             # per-system solution
   - git config --global core.autocrlf false        # per-user solution
   - git config --local core.autocrlf false          # per-project solution
Moral (for Windows):
    - use core.autocrlf = true if you plan to use this project under Unix as well (and unwilling to configure your editor/IDE to use unix line endings),
    - use core.autocrlf = false if you plan to use this project under Windows only,
    - never use core.autocrlf = input unless you have a good reason to (eg if you're using unix utilities under windows or if you run into makefiles issues),
P.S. What to choose when installing git for Windows?
If you're not going to use any of your projects under Unix, don't agree with the default first option. Choose the third one (Checkout as-is, commit as-is). You won't see this message. Ever.
P.P.S. My personal preference is configuring the editor/IDE to use Unix-style endings, and setting core.autocrlf to false.

Thursday, February 12, 2015

REST service with Payara

Based on - http://www.payara.co.uk/building_restful_javaee_microservices_with_paya

Payara is embedded glassfish server (4.1 as of this writing) and the above blog post describes how to write your REST (micro) service easily and quickly with Payara embedded server.

Sunday, February 08, 2015

Book Review: A Study in Scarlet

This is the first of the 4 novels of Sherlock Holmes in which Dr Watson has returned from his service in the military in Afghanistan and is looking for a cheaper accommodation in London city when he meets his acquaintance to whom he mentions of his need of a cheaper accommodation and who happens to know of another fellow who was looking for someone to share accommodation with at 221B Baker St London ... and this is how Dr Watson gets to meet his lodge partner Sherlock Holmes... and the rest as we know is history. In this book, Sherlock Holmes was asked for help by Mr Gregson and Mr Lestrade of Scotland Yard to help solve a mysterious death of a person who was found in an uninhabited house in the city... and the dead man had no injury on him except that his face was contorted in anguish such that it deeply shocked Dr Watson who had never before met with such a ghastly sight before even compared to his grim experiences in the army. In the following days there was another murder in a hotel and the common aspect of both these cases was that the murderer wrote RACHE with his own blood.. which Sherlock Holmes explained is german for revenge. Both Gregson and Lestrade took to wrong links to solve the case which ended up in failures and at last Sherlock Holmes solves the mystery. The other part of the book tells the story of the reason why these horrific murders took place. So that is in short about this book.. now on to the Sign of four, the next adventure of Sherlock Holmes and Dr Watson.

Thursday, August 28, 2014

Elements of PaaS


PaaS (Platform as a Service) is a layer over IaaS (Infrastructure as a Service) that provides the following:

  1. Some kind of deployement interface
  2. coupled with a load balancer - HAProxy
  3. a service provisioning system 
  4. Scaling  in/out support
  5. Optional add-on services: 
    1. Backup and restore service 
    2. Patching
    3. Caching or data grid service
    4. Different DB types - relational, in-memory, no-sql 


The above is generally controlled by a service management layer that exposes all of the above operations of PaaS as REST endpoints. The implementation of the endpoints will use IaaS service endpoints to perform infrastructure related operations (like say adding/removing a VM etc).

Generally some devops toolkit like chef (solo)/puppet combined with some bash scripts are used to provision the platform (like say application server or database server) in the VM after the VM has been created.

The tenant user can either use the REST endpoints directly or through some SDK or CLI or through a web UI to request say, creation of platform instance(s).

Once the platform instance is created, user can deploy their applications on the platform through the platform specific administration tools (like tomcat admin console or a DB client).

Examples of PaaS:
Heroku (see my other posts summarizing the salient features of Heroku platform) 

Understanding Heroku


Deploy, run and manage Java application on Heroku:
  1. Application = source code for application + web or application server framework + dependencies on third party libraries + dependency description (pom.xml) that instructs a build system (maven) to download the needed dependencies from a repository in order to build the application + Procfile.
  2. Procfile - lists named commands that you may want executed.
     
web: java -jar lib/foobar.jar $PORT
queuty: java -jar lib/queue-processor.jar

Defines a 'web' process type and provides a command that needs to be executed in order to run it.
  1. Git - used as primary means for deploying applications on Heroku platform. When application is created on Heroku, a new git remote is associated typically named "heroku" with the local git repository for your application. To deploy, simply do a git push heroku master. Thus git acts as a transport mechanism to push local application to heroku platform (remote).
  2. When Heroku platfrom receives a git push, it builds the application - mvn clean install.
  3. Slug - a bundle of application source code + dependencies + JRE + binary o/p from mvn install. A slug is the application ready for execution.
  4. Dynos - Heroku executes the applications by running a command you defined in Procfile on a dyno (unix container like Docker) that has been preloaded with slug and config-vars and add-ons (together called a release).
Each dyno gets its own ephemeral filesystem - with a fresh copy of the most recent release. It can be used as temporary scratchpad, but changes to the filesystem are not reflected to other dynos.
  1. To retain state information across dyno restarts use DB or message queues. The filesystem on a dyno are temporary.
  2. User can control the number of dynos: heroku ps:scale web=3 queuty=2 for example will run 5 dynos (3 for web and 2 for queuty process types).
  3. When a new version of application is pushed to heroku platform, currently executing dynos are killed and new ones are spawned to replace them with the new release.
  4. Application config-vars are set as:
heroku config:set ENCRYPTION_KEY= my_secret_launch_codes

These are exposed to application as environment vars.
  1. Release = version controlled ledger of (slug + config-vars + add-ons)
heroku releases - lists all changes deployed with their version id (internally they might be mapping version ids to git SHA ids)
Everytime you deploy, new slug is created and a release is generated.
Its thus very easy to rollback to a previous release.
Heroku releases:rollback v102
  1. Dyno manager - manages dynos across all applications deployed on heroku platform.
  2. Add-ons - are pluggable services like email service, Database service, queuing or caching services etc.

For example, a REDISTOGO_URL will be automatically added to your application when you provision the add-on. You can write code that connects to the service through the URL, for example:
uri = URI.parse(ENV["REDISTOGO_URL"])
REDIS = Redis.new(:host => uri.host, :port => uri.port, :password => uri.password)

  1. Logplex automatically collates log entries from all the running dynos of your app, as well as other components such as the routers, providing a single source of activity.
  2. HTTP Routing:

Heroku’s HTTP routers distributes incoming requests for your application across your running web dynos.

Tuesday, August 19, 2014

Book Review: The Giver by Lois Lowry

** spoiler alert ** The Giver is a science fiction about a special community which has attained a very peaceful and strictly disciplined lifestyle for its citizens by enforcing rules and cutting them off from any and all randomness of life. Everything is controlled - population, feelings, freedom to choose their own job. It makes one think about what living in such a time will be like where people just don't feel anything wrong in killing (called releasing in the book) because they have never thought about releasing being bad - as it is what they have learned to expect by living in their community. We can compare this kind of feeling with our times and come up with a lot of aspects in our lives that we believe are bad today but were being practiced just a few years ago by some communities. Overall a thought provoking story. I am looking forward to read the other books in this series.

Thursday, July 31, 2014

HTML/CSS Basics

Styles within HTML tags:
<p style="font-family: Arial; font-size: 20px; color: blue">A truly spectacular paragraph!</p>

<ol style="background-color: yellow;">
<li style="text-align:left">The Hawthorn Football Club</li>
</ol>

<strong> -- bold
<em> -- to italicize

<table style="border-collapse:collapse;">
<thead>
<tr>
<th colspan="2">test</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding:5px;border-left:1px solid black;">1</td>
<td style="padding:5px;border-left:1px solid black;">2</td>
</tr>
</tbody>
</table>

Following div will create a 50px X 50px rectangular block of red color:
<div style="width:50px; height:50px; background-color:red"></div>

A very long <span style="color:red;">text</span>!

CSS:
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>

Stylesheet.css:
/* A comment */
body {
    background-color: #C6E2FF;
}

p {
    color: green;
}

td {
    height: 50px;
    border: 1px dashed blue;
}

table {
    border:1px solid black;
}

a {
    color: #cc0000;
    text-decoration: none;
}

img {
   display: block;
    height: 100px;
    width: 300px;
    border: 1px solid #4682b4;
    margin: auto; -- puts the image in the center
}

div {
    height: 50px;
    width:120px;
    border-color:#6495ED;
    background-color:#BCD2EE;
    border-style:dashed;
    border-width:2px;
    border-radius: 5px; -- gives a rounded corner
    margin: auto; -- puts the entire block in the center (equal margin on all sides)
    text-align: center; -- center the text within the div block
}
Selectors:
Cascading selection:
To select p nested within 2 divs:
<div>
    <div>
        <p>I like tacos!</p>

div div p {
    /*CSS stuff!*/
}

The font-size unit em is a relative measure: one em is equal to the default font size on whatever screen the user is using.
<p style="font-size: 0.5em">Half an em!</p>

Universal Selector: applies to all HTML elements on the page
* {
    border: 1px dashed #3A5FCD;
}

Classes and IDs based selection:
ID: good for identifying single selector/element on a page.
#summary {
font-size: 20px;
color: #000000;
}
<p id="summary">summary</p>

Class: good for identify a class/group of elements on a page.
.list_item {
font-family: Vivaldi, cursive;
}
<p class="list_item">

Psuedo class selectors: - way of accessing state of HTML elements like mouse hover on element <a>:
a:link {
    text-decoration: none;
    color:#008B45;
}

a:hover {
    color:#00FF00;
}

a:visited {
    color:#EE9A00;
}

First child selector: applies to first child <p> element only
p:first-child {
    font-family: cursive;
}
p:nth-child(2) { -- 2nd child p selected
    font-family:Tahoma;
}

p:nth-child(3) { -- 3rd child p selected
    color: #CC0000;
}

Draw circle with div:
div {
display: inline-block;
margin-left: 5px;
height:100px;
width:100px;
border-radius:100%;
border:2px solid black;
}

Positioning:
Each element gets its own box. The outermost box of each element go all the way across the page.
display property -
• Block - element becomes a block box and takes up the whole width of page (no other element can sit with it on same line) -- this is default behavior in the absence of display property.
• Inline-block: element becomes a block box (no overlapping elements), but allows other elements on same line.
• Inline: allows overlapping and other elements on same line and does not honour dimension settings (height and width etc)
• None: hides the element

div {
height: 50px;
width: 100px;
border: 2px solid black;
border-radius: 5px;
display:inline-block;
}
Following universal selector makes all boxes shown in the image above visible.
* {
border: 1px dashed blue;
}

Margins, border and padding: - Refer box model diagram above.
• Margin - outermost box - space around element.
• Border - edge of element
• Padding - space between content and border.
• Content - content within the element like text within <p>.

Margin: auto - sets equal margin on all sides (top, left, bottom and right)
div {
height: 50px;
width: 100px;
border: 2px solid black;
border-radius: 5px;
background-color: #308014;
margin-top: 20px;
margin-right: 50px;
margin-bottom: 10px;
margin-left: 5px;
}
Same goes with padding (padding-top, etc).

We can even set margin and padding on one line as:
padding: [top] [right] [bottom] [left];

Border takes - line size in px, solid/dotted/dashed/none, color.

Float property: no overlapping elements, used to place elements.
div {
height: 300px;
width: 100px;
border: 2px solid black;
border-radius: 5px;
background-color: #308014;
float: right;
}

p {
font-family: Verdana, sans-serif;
font-size: 20px;
width: 280px;
/*Add your CSS here!*/
float: right;
}

In the above snippet, both <p> and <div> contents will be floated to right however first element in the document will occupy the rightmost position followed by the next element in the doc floated to the right on the same line of page.

Clear:
 If you tell it to clear: both, it will get out of the way of elements floating on the left and right!

#header { <!DOCTYPE html>
        height: 50px; <html>
        background-color: #F38630;        <head>
        margin-bottom: 10px;                <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
}                <title>Result</title>
       </head>
.left {        <body>
        height: 300px;                <div id="header"></div>
        width: 150px;                <div class="left"></div>
        background-color: #A7DBD8;                <div class="right"></div>
        float: left;                <div id="footer"></div>
        margin-bottom: 10px;        </body>
} </html>

.right {
        height: 300px;
        width: 450px;
        background-color: #E0E4CC;
        float: right;
        margin-bottom: 10px;
}

#footer {
        height: 50px;
        background-color: #69D2E7;
           clear:both;
}

Positioning:
1. Default is "static" position - so element is position relative to entire page.
Position: static
2. Absolute - position relative to its parent element that does not have position: static. In absence of such a parent the element will position relative to <html> element.
3. Relative - position relative to where it would have landed if it had default static positioning.
4. Fixed - anchors element to the browser window. Element won't change its position even if you scroll up or down. So this element seems to be glued to the screen and when one scrolls its always visible.

z-index property:
You can think of the z-index as a measure of importance: the higher an element's z-index, the higher it will be "stacked" on the page. Giving your header a z-index of 1 while not giving any of the other elements a z-index ensures that your header will sit "on top of" your other elements and won't get stuck behind them.

#header {
    height: 50px;
    width: 100%;
    background-color: violet;
    position:fixed;
    z-index:1;
}