Stress at work

In the past when I was stressed out at work due to certain situations or people, I often swept it under the rug. Recently I started challenging myself to deal more directly with my emotions.

Unresolved emotions hold on to me more strongly than perhaps normal people. It keeps me up at night and I’ve been dealing with sleeping issues for 10 years.

It’s not at all an easy challenge but it’s the only way I can get better.

Everyone deals with stress differently. I often find myself angry during a stressful situation and want to lash out at someone. Instead of lashing out, I challenge myself to step away and more thoroughly identify and analyze the stressor. My first step is trying to view the situation from a third party’s perspective. If I cannot do it myself, I reach out to a trustworthy coworker for a second opinion. While talking about the event with a third party, it helps me understand myself better.

My coworker pointed out the importance of trust at work. I realize my trust with coworkers come naturally at 100%. It however changes based on my interaction and/or observation of the person. We learn to trust people who keep their promises and who do what they say they’ll do. In other words, we assign credibility to people who can successfully predict their own behavior. Looking back I realize losing trust caused me to dislike the person and avoided working with the person. It’s important for me to bring this up with the person to prevent the negative relationship to continue. Although it was difficult having the conversation but it cleared up the air and helped me move on.

Growing up I was taught to always criticize myself in every conflict. Finally I realize that is not the best way to solve issues. Criticizing myself doesn’t always lead to improvement and often it just harbors negative emotion that is degrading to my mental health. The instructors who led the group therapy I participated always stressed the need to unlearn and relearn our emotion handling routines. It took decades to develop my routine; it shouldn’t surprise me that I’m still taking baby steps to unlearn and relearn everything.

Guest Post: Breaking The Low Mood Cycle

Originally posted on Captain Awkward:

Image: a cheerful orange blob monster is chatting to a friend using a speech bubble containing a question mark and exclamation mark. The friend is a grumpy grey blob monster who looks away expressing grumpiness. Its speech bubble contains a grey scribble.

Hello friends! It’s Elodie Under Glass here with a guest post on Low Moods.

I particularly want to thank Quisty, Kellis Amberlee and TheOtherAlice  for their kindly help in reading and editing this piece. It would not have existed without their care, support, compassion, and wonderful editorial abilities. They are truly remarkable humans! (edited: And thanks to the radiant and patient NessieMonster, who let me come to her city and follow her around, burbling insensibly about this post, for far longer than most people would have.)

So recently, I went on a Stress and Mood Management course, and I thought that you all might enjoy sharing what I’ve learned.

This post is something of a correction/update to Adulthood is a Scary Horse, a post for the Captain which I was never quite satisfied with. It really crystallized for me on this course, in our…

View original 3,458 more words

Responsive Selection/dropdown idea

Placeholder text in selection/dropdown cannot be manipulated by CSS right now. Sometimes we’d like the placeholder text to change based on how wide the container is.

Goal

To allow the same HTML look differently based on the width of its container.

So here’s an idea to generate a selection/dropdown via a list and allow the placeholder text to change based on the width of the container via pseudo elements.

What do you think?

Oracle query top N results order by

Why is oracle query with any pagination flavor always so whacky?

Just wanted to return the top N results ordered by a field you have to do

select * from
(
select m.*,rank() over (order by m.msg_post_dt desc) rnk from board b, msg m
where b.id = m.board_id
and b.src_community = 'parents'
and b.board_id = 'toddlers_preschoolers'
and m.msg_content is not null
)
where rnk <= 5;

in MySQL:

select m.* from board b, msg m
where b.id = m.board_id
and b.src_community = 'parents'
and b.board_id = 'toddlers_preschoolers'
and m.msg_content is not null
order by m.msg_post_dt desc limit 5

Chrome Mobile Emulation in Action

Get latest updates on chrome emulation

Step 1

Open a regular website in Chrome.

Step 2

Right click -> Inspect Element to bring up the develop tools.

Step 3

Click on the settings Icon

settings

Verify the mobile emulation is turned on under Appearances

Step 4

Either hit the ESC button or this little icon to open the drawer.
chromeConsoleDrawer

Step 5

Select the device you’d like to emulate.

Step 6

See it in action.
regretlessMobile

Step 7

Read more about all of the features available. This does a lot more than the regular user agent switcher.

Screen scraping census baby name data with nodeJs, cheerio(jQuery) and promises

—->My Soure Code<—-

Goal

Screen scrape census baby names data for the 51 states and produce a single CSV file.

These data are in html table via sites such as

censusStateData2012

Script must translate all of the table data from 51 states (51 requests) into a single csv file that contains

state,rank,gender,maleName,maleBirths
state,rank,gender,femaleName,femaleBirths

Tools

Design

  • Fire 51 post requests.
  • In each request, parse the html data to produce an array of javascript objects that represents the data collected.
  • Once all requests are done, loop through all of the data collected and generate the csv file.

Main Concepts

This blog entry does a fantastic job explaining the programming used in my code.

Lexical Scope/IIFE/Closure

You need to understand the lexical scope in Javascript so you can understand why async calls inside of a loop will not behave correctly unless you wrap your code in an IIFE. This is explained in details in the blog entry.

For example, the following code will NOT work correctly

for(var i = 0; i < states.length; i++) {
	var stateCode = states[i];
	request(url + stateCode, function(error, response, body){
		// this is wrong
	});
}

It needs to be like

for(var i = 0; i < states.length; i++) {
	var stateCode = states[i];
	(function(stateCode) {
		request(url + stateCode, function(error, response, body){
			// this is right
		});
	})(stateCode);
}

Promises

Promises are used to collect all data from all of the async calls.
This concept works similar to the jQuery promise e.g.

// array of promises
var ajaxCalls = [];

// unknown number of ajaxCalls
ajaxCalls.push(
	$.ajax(....)
);

var group = $.when.apply($, ajaxCalls);
group.done(function() {
    // all ajax calls are done
});

Using promise-io, the syntax will be

// lib
var promiseIo = require("promised-io/promise");
var Deferred = promiseIo.Deferred;

var allStates = []; // array of promises
for(var i = 0; i < states.length; i++) {
	allStates[i] = new Deferred();
}

// when all of the async call return
var group = promiseIo.all(allStates);
group.then(function(array){
	for(var i = 0; i < array.length; i++) {
		// array[i] contains the value returned by the promise
	}
});

// somewhere in an async call
... { ....
allStates[i].resolve('my promise value to return');
... }

Execution

  • You must first install nodeJs
  • Then download/clone my source code
  • Follow my read me instructions for
    npm install ...
    
  • Open censusBabyNamesState.js and update any variables
  • Run
    > node censusBabyNamesState.js
    

    and your csv file will be generated

HttpFox helps filter http requests

Was looking for something for work that filters all of the requests on a page.

Finally spotted the HttpFox plugin that pretty closely achieves what I need.

Install the plugin and click on the tiny icon httpFoxIcon at the lower right of the browser.

Once open, click on the start (to record requests)
httpFoxStart

Load a page of interest, you will see the requests being captured.

Once done, you may filter the results based on anything in the requested URLs such as
httpFoxFilter

How to Help Others Without Compromising Yourself

1. You can’t help someone who is not taking responsibility for helping themselves.

Sometimes, no matter how much you give, the other person doesn’t seem to meet you halfway. It seems like the more you try to help them, the more they stay the same, or worse, regress.

Maybe they have become so used to your helping them that they no longer have the ability to see where they need to help themselves. Or maybe they take your helping for granted so they feel they no longer need to participate.

2. Sometimes, doing nothing is helping them.

When someone asks you for help in some tangible way or when you see the obvious need in others, especially a loved one, it’s very hard to say no. However, before you say yes, ask yourself what’s the cost to you.

Are you compromising yourself in some way that is beyond your personal boundaries? Sometimes by saying no and doing nothing, you’re giving them a chance to take responsibility for their own lives and help themselves.

3. Helping someone doesn’t mean fixing them.

Often, you think you know what is best for another person, but you don’t truly know what is for their highest good or what life has in store for them. They are in a situation because they need to learn some spiritual or life lessons.

You can’t shortchange their learning process, no matter how hard you try to help them, if they’re not in the right place and time to learn those lessons.

4. You can help by accepting them as and where they are.

We all have judgments about ourselves and others. However, helping means accepting the other person as they are and where they are on their life’s path.

It can be excruciatingly painful to sit by and watch the other person self-destruct or seemingly do nothing to help themselves, but maybe this is what they need right now in order to become more aware in themselves.

5. Don’t be attached to the outcome of your helping.

You may have expectations of what someone would become and what they’d do with their lives once you help them. You want to see this person feel better, be happier, healthier, and make better life decisions.

However, it’s not up to you to put intention in the other person’s space. What’s good for them may not be what you expect, and you might not like or agree with the outcome. Let go of attachment to your own ego and your own vision of what the other person will become once they’re helped.

6. Send loving, compassionate intention.

Know that your intention to help another person, when it’s from a place of neutrality, love, and compassion, will always be helpful, whether or not you feel you’re doing enough. Just having the intention to help and sending your peaceful, loving energy to the other person and their situation is sometimes the best thing to do.

Thoughts have energy, so even if you just send compassionate thoughts to the other person, you are doing something to help.

Reblogged from tiny buddha.

How I made tiny carousel swipeable

On parents.com, we previously used the jquery plugin tiny carousel to display various lists of links mostly used to track pregnancy month/week:

For example:
tinyCarousel

The concept is easy. You have a list of items that you want to scroll horizontally by using nav buttons. In our case, all of the content are lists of links. Since parents.com is responsive, the style of the carousel adapts based on screen width. To make parents.com more mobile friendly, we wanted to make these carousels swipeable on touch devices and I was assigned this task.

My immediate thought here is to add a swipe event to the content area to move items left and right. So I tried out the jquery plugin touchSwipe.

So this pen is close to what I came up with. Load the pen with your touch device and swipe on weeks. If an alert is shown, that means the swipe event is detected.

I noticed the swipe event doesn’t get detected consistently especially when you swipe over the links. I do not understand enough about how the swipe event is captured to do anything about it. I do not believe this will be a good experience for the user.

Another issue is that tiny carousel doesn’t expose public methods for its navigation. I would have to do some ‘hacking’ to make it react to the swipe event.

When I showed this example to my coworker, she wondered whether the swipe plugin is really a good use here. If it’s implemented this way, it would mean no matter how much you swipe, you always get the same amount of scrolling back and forth leveraging tiny carousel.

Great thought! A light bulb popped in my head. Why am I trying so hard to fake the scrolling by using javascript? I should rely on the browser’s native scrolling. Why didn’t I think of overflow: auto?

My idea is to use the multiple layers and the overflow css property to show the horizontal scrolling. Javascript is added on the previous and next links to scroll a certain amount. In my example, the amount is the outerWidth of the content area.

A few things

  • Originally I was ONLY going to do this on mobile and continue to use tiny carousel on desktop. The worry was about how ugly the horizontal scrollbar is with overflow: auto.
    scrollBar
    But I resolved that issue with some CSS :) To pull off this trick, you need three layers. We will call them container, viewport, content.

    • container layer must have overflow: hidden and position: relative
    • container layer must have overflow: auto and position: absolute
    • content is the list of links. it should have very long width. for me, I created a list with the style:
      ul {
      list-style: none;
      white-space: nowrap;
      }
      ul li {
      display: inline-block;
      }
      

      Then your list will be a horizontal no wrap line that will be as wide as necessary. Add a large bottom padding to this list e.g. padding-bottom: 50px. This will hide the scrollar.

    • This pen contains the full example
  • A little javascript is leveraged to
    • continue the support on previous and next links as in the tiny carousel plugin
    • allow scrolling to an selected item in the html source on page load
    • I used jQuery in my code but you can easily do this without the help of jQuery:
      (function($){
          var opts = {
              viewport: '.viewport'
              ,selected: '.dateCarouselSelected'
              ,prev: '.prev'
              ,next: '.next'
              ,defaultScrollDistance: 200
              ,scrollAnimationDuration: 500 // ms
          };
      
          $.fn.carouselSwipeable = function(options) {
              var options = $.extend({}, opts, options);
              this.each(function(){ new CarouselSwipeable($(this), options); });
              return this;
          };
      
          function CarouselSwipeable(root, options){
              /* init date carousel */
              var wrapper = root.find(options.viewport);
              var wrapperWidth = $(wrapper).outerWidth();
      
              var selectedElement = root.find(options.selected);
      
              if(selectedElement && selectedElement.length === 1) {
                  var parentLi = selectedElement.closest('li');
                  var childPos = parentLi.offset(); // li
                  var parentPos = parentLi.parent().offset(); // ul
                  var childOffset = {
                      top: childPos.top - parentPos.top,
                      left: childPos.left - parentPos.left
                  };
      
                  var startPos = childOffset.left;
      
                  scroll('right', wrapper, startPos);
              }
      
              root.find(options.prev).on('click', function(e) {
                  e.preventDefault();
                  e.stopPropagation();
                  scroll('left', wrapper, wrapperWidth);
              });
              root.find(options.next).on('click', function(e) {
                  e.preventDefault();
                  e.stopPropagation();
                  scroll('right', wrapper, wrapperWidth);
      
              });
      
              function scroll(direction, innerWrapper, distance) {
                  if(distance === undefined) {
                      distance = options.defaultScrollDistance;
                  }
                  var leftPos = $(innerWrapper).scrollLeft();
      
                  if('left' === direction) {
                      leftPos = leftPos - distance;
                  } else {
                      leftPos = leftPos + distance;
                  }
                  $(innerWrapper).animate({scrollLeft: leftPos}, options.scrollAnimationDuration);
              }
          }
      })(jQuery);
      
      $('#dateCarousel').carouselSwipeable();
      

      Obviously, this is not written in a modular format. It really should be done better and made into a plugin :) And I might do that.

    What I like about my carousel

    • It is responsive by nature
    • It defers swiping back to the browser’s default scrolling ability
    • It works on any touch device as well as desktop. The scrolling is just hidden on the desktop
    • With tiny carousel, you have a moment of “style flash” when the carousel is generated by javascript. Mine just relies on the default css style of the layers so there is no “style flash”
    • It’s not a traditional image slider but it’s perfect for our unique usage. We just want to scroll some long text horizontally.
    • I got out of the javascript web and thought outside of the box for a simpler solution. YAY!

    Improvement I’d like to make

    Currently the javascript still uses the jQuery animation for the previous & next scrolling effect. I’d like to use CSS animation instead. But I’m not sure how to do that yet…. saw an example here but it’s not exactly applicable to my situation.

Making Semantic Elements Behave Like a Table

CSS has properties to make any element you wish behave as if it was a table element. You’ll need to structure them essentially as you would a table, and it will be subject to the same source-order-dependency as a table, but you can do it. I’m not crapping on it either, it’s genuinely useful sometimes. If that layout style solves a problem and has no negative order implications, use it.

Don’t use inline styles, but just for understanding here’s how that would go:

<section style="display: table;">
  <header style="display: table-row;">
    <div style="display: table-cell;"></div>
    <div style="display: table-cell;"></div>
    <div style="display: table-cell;"></div>
  </header>
  <div style="display: table-row;">
    <div style="display: table-cell;"></div>
    <div style="display: table-cell;"></div>
    <div style="display: table-cell;"></div>
  </div>
</section>

A handy trick here is that you don’t even need the table-row element in there if you don’t want. A bunch of display: table-cell; elements that are children of a display: table; element will behave like they are all in one row.

You always alter the display property of the element to get the table-style behavior. Here’s the values:

display: table                /* <table>     */
display: table-cell           /* <td>        */
display: table-row            /* <tr>        */
display: table-column         /* <col>       */
display: table-column-group   /* <colgroup>  */
display: table-footer-group   /* <tfoot>     */
display: table-header-group   /* <thead>     */

Notice there is no <th> alternative. That is for semantic value only. It otherwise behaves just like a <td>, so, no need to replicate it in CSS.

There is also display: inline-table; which is pretty interesting. Remember we talked about how weird table elements widths are above. They are only as wide as they need to be, yet break onto new lines. It’s almost like they are inline-block elements which happen to break. This makes them literally like inline-block elements, without the breaking.

Copied from css-tricks