A Collection on Mindfulness Meditation

Talking to his biographer Walter Isaacson about meditation

© Tashka

If you just sit and observe, you will see how restless your mind is. If you try to calm it, it only makes things worse, but over time it does calm, and when it does, there's room to hear more subtle things — that's when your intuition starts to blossom and you start to see things more clearly and be in the present more.

Your mind just slows down, and you see a tremendous expanse in the moment. You see so much more than you could see before. It's a discipline; you have to practice it.

Steve Jobs

A former skeptic talks about his conversion:

If you had told me as recently as a few years ago that I’d ever become a Buddhist — never mind that I might even admit to it publicly — I would have coughed my beer up through my nose.

Meditation is not relaxation. It's not sitting there and zoning out. You're taming your mind. It's hard work – just the way rock climbing or swimming a mile is. But it has benefits just like those activities do.

Dan Harris

On how meditation slowly changes the way the mind works:

Instead of seeing my thoughts as something to run from or capture, they could be something I simply observed. And if I observed them long enough, even the most tantalizing or infuriating of thoughts — a pretty face, a debt owed — would float away. And my mind, lo and behold, would become stable, even tranquil.

Drake Baer

Mindfulness practice may feel counterintuitive:

When we do things, we expect a certain outcome. We expect to get better at it over time. But in meditation, the whole thing is you have to go in expecting to fail all the time. But the quote and quote failure is actually a success.

I have to remind myself over and over. The moment you wake up and notice you got distracted, that's a win. I usually go into a spiral of self-recrimination in that moment but noticing that is a win, too. Knowing what's happening right now is the radical act, is the win.

Dan Harris

Is a strong argument alone key to effective communication?

Equally important is the relational agility to work with whatever comes up in the dynamic environment of human interaction, especially all that is felt but not articulated by both parties to the conversation.

Monique Valcour

Train Your Mind, Change Your Brain:

Showing attention is necessary for neuroplasticity. Focused attention alters the brain.

Outside stimuli can alter the brain so can self-generated stimuli such as thoughts and meditation.

You can train your brain to adopt different thinking circuits, to switch off ruminative modes of thinking and to practice relating differently to negative thoughts and feeling.

Sharon Begley

Dr. Mehmet Öz & Transcendental Meditation

Sitting with Dr.Oz, I couldn't help but wonder how he maintains such a calm presence. He shared that he practices Transcendental Meditation. "When I meditate, I go to that place where truth lives," he said. "I can see what reality really is, and it is so much easier to form good relationships then."

Daneen Skube

Daniel Amen in "Your brain is always listening"

Prayer and meditation can calm the amygdala. A 2009 study found that prayer may be useful in the treatment of anxiety and depression. I have performed several studies showing how meditation can calm the emotional brain and strengthen your prefrontal cortex.

Meditation is a mental exercise in which you focus your attention on a specific thought, object, or activity for a short period of time.

Daniel Amen

Loving-Kindness meditation:

One of my favorite forms of meditation is called loving-kindness meditation which is intended to develop feelings of goodwill and warmth towards others. It quickly increases positive emotions and decreases negative ones, increases gray matter in the emotional processing areas of the brains and boosts social connectedness.

Here's how to do it: Sit in a comfortable and relaxed position and close your eyes. Take two or three deep breaths, taking twice as long to exhale. Let any worries or concerns drift away, and feel your breath moving through the area around your heart As you sit, quietly, and silently repeat the following or similar phrases:

• May I be safe and secure.
• May I be healthy and strong.
• May I be happy and purposeful.

Let the intentions in these phrases sink in as you repeat them. Allow the feelings to grow deeper. After a few repetitions, direct the phrases to someone you feel grateful for:

• May you be safe and secure.
• May you be healthy and strong.
• May you be happy and purposeful.
• May you be at peace.

Next visualize someone you feel neutral about. Choose among people you neither like or dislike, and repeat the phrases.

Then visualize someone you don't like or with whom you are having a hard time. Kids who are being teased or bullied at school often feel quite empowered when they send love to the people who are making them miserable. Finally, direct the phrases toward everyone universally:

"May all beings be safe and secure.". You can do this for a few minutes or longer; it's up to you.

Daniel Amen

CSS Zen Garden Series

CSS Zen Garden Series

• ExtraDiv1 Goes Where No Div's Gone Before, Part 8 | Final Design
• Styling the CSS Zen Garden Menu, Part 7
• Styling the CSS Zen Garden Footer, Part 6
• Styling the CSS Zen Garden Text Paragraphs, Part 5
• Spider & Rose for CSS Zen Garden, Part 4
• CSS Zen Garden HTML Elements, Part 3
• CSS Zen Garden Markup, Part 2
• Walking over to the Zen Garden, Part 1

Positioning the Extra Divs in the CSS Zen Garden Markup

Here's the post.

Styling the CSS Zen Garden Menu

It's been a long time. Here's the latest installment in the Zen Garden Series.

Styling the Text Paragraphs in the Zen Garden Design

This is Part 5 in the Zen Garden series.

We have to make the z-index for the preamble div higher than z-index for pageHeader div because otherwise the text in preamble is hidden by the pair of flowers. But, just setting z-index isn't enough because z-index only works if the element is positioned. So we have to do some kind of positioning on preamble. By doing position: relative; with no top or left values given, we are doing positioning, but not really moving the div any. In other words, the relative position is only for making the z-index work.

#preamble, #explanation, #participation, #benefits, #requirements {   
    position: relative;  
    z-index: 105;
}

With the new z-index, preamble text is no longer being covered up. The text "The road to Enlightenment" is now visible.

#preamble, #explanation, #participation, #benefits, #requirements {   
    margin-left: 250px;
    position: relative;  
    z-index: 105;
}

One problem is that the unearthed text is overwriting the flower image and it also has to get out of the way to make room for the left side navigation bar. So I added a left margin rule to our style above. All five div's will be pushed away from the left edge of the frame by 250 pixels.


Do you see that tiny wisp right above us?

Looks like a minituare fly-fishing lure, you can easily miss it if you are not looking. We repeat "pattern_reverseNEW97x4.jpg" which is only 4 pixels high to build the right edge. So our updated selector will now include a background rule:

#preamble, #explanation, #participation, #benefits, #requirements {   
    margin-left: 250px;
    position: relative; 
    z-index: 105;

    /* fading edge on the right */
    background: url(images/pattern_reverseNEW97x4.jpg) 100% 0 repeat-y;     
}

What starts out as a miniscule bit builds up with successive divs and helps give the page depth by lifting it off the white background. Our text is writing over the background images for #preamble, #explanation, #participation, #benefits, #requirements div's but that's easy to fix.



In the top left corner, the preamble div text is getting too close to the edge of the red flower so we nudge it down a little by 15 pixels and also pull the text that's spilling over the right edge by giving all five div's 40 pixels right padding. This is how the page cleans up with additional padding.

#preamble {
    padding-top: 15px;
}
   
#preamble, #explanation, #participation, #benefits, #requirements { 
    padding-right: 40px;
}

To match the beige edge of the right side and also to continue the pattern underneath the flowers of pageheader div, we will make the same pattern the background of both intro and supportingText div's. It doesn't look like much on its own below but wait until we stack them up.



To understand why only two div's, intro div and supportingText div, are sufficient to build the entire left side edge, see the two "medium blue" blocks (why did I have to use different shades of blue instead of distinct colors?) in the mark-up diagram. The div's pageheader, quickSummary and preamble are a subset of intro div. The supportingText div contains explanation, participation, benefits, requirements and footer div's as you can clearly see in the element flow chart. You can of course simply check the mark-up itself which is what you'll do ordinarily.

#supportingText, #intro  { background:  url(images/rep413x4.jpg) 0 0 repeat-y;  }

With the text nudged over to the right and the new background image repeating itself vertically, we now have a blank patterned canvas ready for the left side navigation bar.

The number of times the background image repeats is dependent on the height of the div's which is allocated dynamically based on the content and font-size. If the user changes his text size, your div's will get longer to accommodate the larger text and their background image will repeat more times to fill in the div space.

FONTS AND HEADINGS

#preamble p, #supportingText p {
  line-height: 1.66em;
  margin: 0 1.5em; 
  padding: 0.5em 0;
  font: 0.8em Tahoma, Arial, Helvetica, sans-serif;
  color: #566047;
}

To change the default font, I wrote selectors for preamble and supportingText div's. The page with the font change. We'll finish up with text by styling the headings. I want a contrasting font to the clean sans-serif we used for the body so I chose a serif font "Times" for the headings, opened up the font a little bit with letter spacing, gave it a red color that matches one of the blooms and the main title.

#preamble h3, #supportingText h3 { 
  /* headings like the road to enlightenment */
  font: 1.2em Times, "Times New Roman", serif;
  letter-spacing: 0.04em;
  color: #DD1947;
  font-weight: bold;
  margin: 1em 0 0.5em 0.5em;
  text-align: left;
  font-variant : small-caps;
}

The new capitalized red headings stand out without being distractive.

MARGIN COLLAPSING

But our layout has developed gaps. This is because of what's called the margin collapsing - the margins of the h3 element collapsed with the margin of its parent div. Since we have many sections or div's like that, the gap problem repeats itself through the body of the text.



To give you a simpler example, imagine having a div and a single h3 as the first element within this div. If the h3 has a top margin, it'll collapse with any top margin that the div may have and extend beyond the div. You may not even be aware of this phenomenon if the div does not have a background image. But if there's a backbround image that's being tiled, you'll see similar gaps. Always keep in mind that the browser renders a background image only over padding, never over a margin.



So in the first figure above, the top margin of h3 is adjacent to the top margin of its parent div, and is therefore collapsing through the top of its parent div. This is the correct behaviour as defined in the CSS Standard. Think of it this way: When you have a parent div and the first child of that div has a top margin, then the margins of the div and its first child get combined (or "collapsed") into a single margin for the two of them. In this case, the child h3's margin is larger than the div's margin so the h3's margin is used by the div. But this only happens when the div's top margin and the child's top margin are adjacent to each other.

As shown in Figure two, to address this problem, we assign a 1 pixel padding to the parent div, at which point, the browser says, "Ok. I have to first address the 1 pixel space for the top padding of the div and then, and only then, allocate the space for the h3 top margin. I won't be collapsing the margins together in this case because they aren't adjacent. They are separated by the 1 pixel of padding."

So with this fix, the h3's margin will automatically stay within the div because the div's padding has to stay within its borders, and the h3's margin will be rendered just below the div's top padding. So that's why the margin of the h3 will no longer be sticking out of the top of the parent div. You can also think of it as if the div has expanded to contain the h3's margin, along with the new top padding.

#explanation, #participation, #benefits, #requirements {
    padding-top: 1px; padding-bottom: 1px;
}

If we add padding to each of these div's, they will expand to contain their descendants, p and h3 elements in this case, and all of the margins associated with these elements. Since we are doing this as a workaround, I will make the paddings negligible at 1 pixels each for top and bottom which fixes the gap problem.

Finally, I want to open up space in the requirements div to fit some images that I'll be dropping into the design later.

#requirements { 
  margin-bottom: 160px;
  padding-bottom: 5px;            
}

The large bottom margin gives the page some breathing room in the bottom area. You might wonder why we cut off the beige edging on the right side short while the shading on the left edge is extended via the requirements div. Just wait until a later post when we will fit a graphic image into the blank corner to complete the frame. You'll see why we don't need to shade that part of right side edge.