Life is ridiculous

Your awesome Tagline

0 notes

How to make a jQuery plugin for sticky navigation bar.

Making a sticky navigation that stick into the top (or any position) of your web page is actually quite simple. The following snippet illustrate the basic idea:

.sticky {
 position: fixed
 top:0;
}
<div class="sticky"> </div>

Setting position property to fixed make it position relatively to the browser window, Setting top property to 0 make it position beneath window top border by 0 PX. 

If you are not quite understanding the previous statement, here are several concepts to make this a bit clearer to you:

Window area: it is the browser display area available to end user, it contract/expand as user re-size the browser.
Document area : the area where all your web page reside, when the document area larger than the window area, a scroll bar will appear to scroll down the window to reveal whole page.

Setting position to fixed make your element position relative to window( Not the Document), so when you scroll the scroll bar, the element stick in the place where it was put at.

I am not going to stop at here, instead I want to make a plugin for this for saving effort on making it from scratch. 

The theory:

Basically, we need to determine when to make element stuck in place. it is when the topScroll is great than the top of the element, we need to position the element fixed in relative to window.  We still solved half of the problem, the other part is when user scroll up back, in one point we need to restore the element to where it was put initially. the point is when the topScroll is less than the top of the element.

So here is the formula: sticky = true when  topScroll > top, sticky = false when topScroll < top. 

So the key point is to monitor value of topScroll, this can be done by listen scroll event:

For IE:

    window.attachEvent(“scroll”, scrollerHandler);

For other browser:

    window.attachEventListener(“scroll”,  scrollerHandler);

Then we need to scrollerHandler function at where we retrieve the current topScroll value and use the aforementioned formula to check if we need to make the element sticky or not. Here is the pseudo implementation:

var elementTop = $("element to stick").top();
scrollerHandler = function() {
  var currentScroll =  $(window).topScroll();
  if (currentScroll < elementTop) {
 //restore stickyelement to its initial state
   $("element to stick").css('top', '');
   $("element to stick").css('position', '');
  } else {
    //TODO:#1 make element sticky
 }
}

In the TODO comment #1, where we need to add code to get the new top value of the stickyElement. It can be done by  stickyElement.top = 0. However we may want some space between top of window and top of stickyElement, we make a parameter named topspacing to configure that. So stickyElement.top = 0 + topspacing = topspacing. We still missed one edge case when user scroll down, the left document area is less than area that the stickyElement occupied, then we need to re-calculate the top value instead of simply setting top to topspacing. Because it will cause the document area expand infinitely. Why? when the outer height of stickyElement is longer than the height of left document area, if we move the stickyElement to the align to the top of the window, it force scroll to expand to accommodate the stickyElement, then if user try to scroll down to reveal the bottom part of the page, this will trigger stickyElement to re-position to the top of window area, this in turn force scroll expand further… this can go into a infinite cycle causing document area expand infinitely. To resolve this issue, we need to determine if the left document area is enough to accommodate the stickyElement before set top to spacingtop:

var newtop = document.height() - window.scroll() - stickyElement.outerHeight
        - topspacing - bottomspacing;
 if(newtop < 0) {
     newtop = newtop + topspacing;
 } else {
     newtop = topspacing;
}

81 notes

scienceetfiction:

The Juno spacecraft will investigate Jupiter’s origins, its interior structure, its deep atmosphere and its magnetosphere from an innovative, highly elliptical orbit with a suite of seven science instruments. In addition, a camera called JunoCam will be used by student participants in the Juno Education and Public Outreach program to take the first images of Jupiter’s polar regions.
via juno.wisc.edu

scienceetfiction:

The Juno spacecraft will investigate Jupiter’s origins, its interior structure, its deep atmosphere and its magnetosphere from an innovative, highly elliptical orbit with a suite of seven science instruments. In addition, a camera called JunoCam will be used by student participants in the Juno Education and Public Outreach program to take the first images of Jupiter’s polar regions.

via juno.wisc.edu

(via itsfullofstars)

0 notes

My thoughts on Scrum

IMG_5004

Scrum is an implementation of Agile engineering methodology seen in software development management. It differentiates from traditional water flow software development life cycle with iterative incremental way to control life cycle of software management. If the water flow way was seem as relay race, where team member wait in track for baton, Scrum is just like scrum in football, where all team member collaboratively fight together for one goal. Instead of passively stand aside to wait baton, it positively, aggressively pull the demand.

Scrum differed from traditional water flow, instead of work out the whole requirement , it cut whole work it into chunk of workable and manageable sprints. A sprints varies from one to four weeks. After each sprint there will be a component accomplished and can be delivered to customer. Scrum allows requirement change within each sprint. It attempt provide the major functionality and omit the non achievable and low prioritized requirement. The unfinished work will be return to backlog from where it may be return to the work list of next sprint.

There are basically three characteristics involved in Scrum:

 Product owner: product owner is the represent of customer. He is in charge of the management of requirement. He has the right to change and terminate any requirement. 

Team: a team of cross functional skilled people who takes responsibility to fulfill the requirement, who turn the blueprint into real software

Scrum master: he who acts like project manager, but instead of managing the project directly, he try to remove any impediment that preventing team member from accomplishing goal. 

Meetings involved in Scrum:

Before each sprint a planning meeting was arranged to plan out next development sprint. The task of this meeting is to pick requirement from backlog evaluate each requirements, prioritize each, do effort estimation, foresee the possible difficult that may screw up the plan. 

Meeting at each work day morning which is called daily stand up, a team of member stand up and spend ten minutes to get through three question:

1, what have you finished since yesterday?

2, what’s your plan on today?

3,  What the problem, if any, you have that may prevent you from finish your work?

make the meeting short and to the point.

Meeting after each sprint, it is the meeting to demonstrate what work we have achieved in the last sprint. Put left out into backlog to continue work out it in next sprint. It serves as a good opportunity to encourage team light up their morale and make them being proud of what they have achieved

The last meeting is called retrospect meeting. It’s time to do self retrospection: basically ask team member these question what could be done better in the last sprint? what went very well? The purpose of this meeting is basically encourage continuous improvement. 

Scrum has been proved as a better approach to address software management, after decades of real project exercise and revolution. Scrum, with its flexible and agile methodologies, has saved ton of money for doomed  projects.