Things to Know

#toknow li {border:0; list-style-type:disc;}

This is a list of some things considered relevant from the perspective of someone reviewing a job candidate’s front-end development abilities. I jotted these from various articles and forums posted online.

  • Understand DOM (what it is, why it’s related)
  • XML / Namespaces
  • Understanding javascript
  • Knowing approaches to componentization (XBL, HTC) – plus
  • Understand object-oriented principles
  • Javascript closures
  • Memory leaks in browsers
  • Good HTML / CSS design principles
  • As in reviewing an online portfolio of examples:

  • Does HTML and CSS validate?
  • Does presentation render consistently between browsers (cross browser compatability)
  • Does the work have javascript errors? Are the errors making their way to the presentation layer, or caught with a try / catch block?
  • Form validation
  • regex
  • MM_preloader? (bad?)
  • Be able to properly break down a design into its semantic components
  • Name at least 3 things that fail in IE and the workarounds used for IE
  • As a task during an interview or pre-qual:

  • Create a company intranet that follows:
    1. a simple 3 column layout
    2. a good looking table using CSS
    3. dynamic loading using XML and javascript
Advertisements

Jquery: UI tabs not working

Well, hmm. Let’s see. A quick Google fixed this for me!

There is one CSS style that is required for .tabs() to work. It takes care of the hiding of non active tabs.

/*tabs
------------------------*/
.ui-tabs .ui-tabs-hide {
display: none;
}

Also, to get the tabs to line up horizontally, use a CSS style that says display: inline.

#rinatabs li {display:inline; padding:5px;}

Javascript: notes on using switch

function whatClicked(x) {
//z=(x) //this line works
//clickResult=alert("you clicked " + z) //this line works
x=parseInt(x); // see the value passed as a number
switch (x)
{
case 1:
alert("you clicked 1");
break;
case 2:
alert("you clicked 2");
break;
case 3:
alert("you clicked 3");
break;
case 4:
alert("you clicked 4")
break;
default:
alert("oops");
}
}

To use the switch with the x value that is being set in the a tag, the switch statement must be used in the same code block of the function that finds the value of x. So, basically, contain the swtich within the function. Also, the x=parseInt(x) line makes the value from the a tag that was clicked and sees it as a number instead of a string. So, if you passed the string “1abc” from the onclick in the a tag to the whatClicked function, using parseInt() would use only the number from that string.

The alerts within the switch cases will be replaced with the functionality I originally meant. This is just for testing. Now that I know it works to this point, I will begin adding some jQuery to take the bigSquare and move it around and resize when the a tags are clicked.

$(document).ready(function() {
$('#content1').hide();
});

//var bigSquareOrigin=$('.bigSquare').animate({left:"40%", top:"40%"})

// get a value from the a tag that will replace x
function whatClicked(x) {
//z=(x) //this line works
//clickResult=alert("you clicked " + z) //this line works
x=parseInt(x);

// if that x value equals one of these cases, do something and stop.
switch (x)
{
case 1:
$('.bigSquare').animate({left:"0px", top:"0px"}, function(){
$('#content1').show("slow");
})

break;
case 2:
alert("you clicked 2");
break;
case 3:
alert("you clicked 3");
break;
case 4:
alert("you clicked 4")
break;
case 5:
$('#content1').hide("fast", function(){
$('.bigSquare').animate({left:"40%", top:"40%"});
});

break;
default:
alert("oops");
}
} // end of function whatClicked

So, I got everything working the way I want. But, in case 1 of the switch, the animation of the big square and the showing of the content were happening at the same time. I needed to separate the effects in order to achieve a result that moved the big square first, then proceeded to show the content box.

Luckily, there is a way. You simply type a comma after the last animate bracket and write a function that contains the second part of the case. So, for my desired effect, I simply moved the showing of the content box into an inner function and it suddenly behave exactly as I intended.

Idea: meal planning that can flex

Use jquery sliding menu with draggable droppable to rearrange meals in a weekly or monthly meal planning feature of the shopping db.

Serves: the home meal planner who normally makes a handwritten meal plan. Allows them to rearrange each meal based on the meals used each day. Meatloaf Monday can now be changed to Tuesday.

Expanded Ideas:
1) Make each meal item a separate draggable droppable so true mix and match meals can be created.

2) Start out with an inventory list, created with what the user has on hand, that gets subtracted from as meal items are added to the meal planning space.

3) Have another list that populates as items not currently in inventory are used in the meal planning space.

Scenario: simple mock-feed

One page for news items listed as a DL in DT and DD tags. File / page will be updated by simply adding another set of DT and DL tags to the bottom of the list in code view.

Two instances of the mock-feeds:

Once on the front page of a site, displayed as a ticker with previous and next buttons as well as a “read more” link, using javascript and jquery.

Another instance is in the page containing the DL items. This will be pulled in as the content of another page, which displays the full article after clicking the “read more” from the front page ticker. There is also a small list / menu on the right hand side of the full feed display page that the user can use to click through all of the stories. Use javascript and jquery to show and hide the content. In code view, this is the original DL list of ALL the feed items.

Passing values from html to javascript example

So, basically, the following examples sets values in javascript functions.

In the first function, we set up a function called “myMsg” and in parenthesis we put a placeholder for a value. We give that placeholder a value from one of the html elements. We do this by setting the html input element to reference “form.text1.value”. This comes from the parent object, “form” in this case. Then the value of the “name” attribute within the input element that we want to look at. Then we say “value”, which says “pull the value of” the element we’ve looked at.

So, we type something in the text field and hig Show Me. We get an alert that contains what we entered into the text field. Upon typing something in that field, we gave it a value. The javascript function contains code that says “give me an alert” and that alert will contain the value the user puts in the field.

Similarly, the second function contains code that says “set the document background to what the user types in the field”.

def my_javascript_snippet
  blog_post.should(be_highlighted)
end